Creating a control panel infrastructure

src/pages/HomePage.vue

@@ -10,25 +10,32 @@ import {
 import { message } from 'ant-design-vue'
 import api from '@/api/http'
 
-type Tenant = { id: string; product: 'hamkar' | 'khanegi' }
+type BalanceLevel = 'healthy' | 'warning' | 'critical' | 'unknown'
+
+type SmsSummary = {
+  balanceRials: number | null
+  balanceLabel: string
+  balanceLevel: BalanceLevel
+}
+
+type Tenant = {
+  id: string
+  product: 'hamkar' | 'khanegi'
+  slug?: string
+  nameFa?: string
+  sms?: SmsSummary
+}
 
 const router = useRouter()
 const loading = ref(true)
 const tenants = ref<Tenant[]>([])
+const smsTenants = ref<Tenant[]>([])
 
 const hamkarCount = computed(() => tenants.value.filter((t) => t.product === 'hamkar').length)
 const khanegiCount = computed(() => tenants.value.filter((t) => t.product === 'khanegi').length)
+const lowestSmsTenants = computed(() => smsTenants.value.slice(0, 5))
 
 const modules = computed(() => [
-  {
-    key: 'sms',
-    className: 'sms',
-    title: 'پنل پیامکی',
-    desc: 'ارسال و مدیریت پیامک مشترک برای همکار و خانگی در یکجا',
-    meta: 'مرکزی',
-    icon: MessageOutlined,
-    to: { name: 'sms-panel' as const },
-  },
   {
     key: 'server',
     className: 'server',
@@ -61,8 +68,12 @@ const modules = computed(() => [
 async function load() {
   loading.value = true
   try {
-    const { data } = await api.get('/tenants')
-    tenants.value = data
+    const [tenantsRes, lowestRes] = await Promise.all([
+      api.get('/tenants'),
+      api.get('/sms/lowest', { params: { limit: 5 } }),
+    ])
+    tenants.value = tenantsRes.data
+    smsTenants.value = lowestRes.data
   } catch (e: any) {
     message.error(e?.response?.data?.message || 'خطا در دریافت آمار')
   } finally {
@@ -70,6 +81,27 @@ async function load() {
   }
 }
 
+function openSmsPanel(tenantId?: string) {
+  if (tenantId) {
+    router.push({ name: 'sms-tenant', params: { tenantId } })
+    return
+  }
+  router.push({ name: 'sms-panel' })
+}
+
+function smsTone(level?: BalanceLevel) {
+  switch (level) {
+    case 'healthy':
+      return 'healthy'
+    case 'warning':
+      return 'warning'
+    case 'critical':
+      return 'critical'
+    default:
+      return 'unknown'
+  }
+}
+
 onMounted(load)
 </script>
 
@@ -83,6 +115,40 @@ onMounted(load)
 
     <a-spin :spinning="loading">
       <div class="dash-modules">
+        <div class="module-card sms sms-dashboard-card" @click="openSmsPanel()">
+          <div>
+            <div class="icon-wrap">
+              <MessageOutlined />
+            </div>
+            <h3>پنل پیامکی</h3>
+            <p>۵ نسخه با کمترین موجودی برای پیگیری سریع شارژ و وضعیت پیامک</p>
+          </div>
+          <div class="sms-mini-grid">
+            <button
+              v-for="tenant in lowestSmsTenants"
+              :key="tenant.id"
+              type="button"
+              class="sms-mini-card"
+              :class="smsTone(tenant.sms?.balanceLevel)"
+              @click.stop="openSmsPanel(tenant.id)"
+            >
+              <strong>{{ tenant.nameFa }}</strong>
+              <span>{{ tenant.product === 'hamkar' ? 'همکار' : 'خانگی' }}</span>
+              <small>{{ tenant.sms?.balanceLabel || 'نامشخص' }}</small>
+            </button>
+            <div v-if="!lowestSmsTenants.length" class="sms-mini-empty">
+              هنوز نسخه‌ای برای نمایش موجودی ثبت نشده است
+            </div>
+          </div>
+          <div>
+            <div class="progress"><span /></div>
+            <div class="module-meta">
+              <span>{{ lowestSmsTenants.length }} نسخه کم‌موجودی</span>
+              <span>ورود ←</span>
+            </div>
+          </div>
+        </div>
+
         <button
           v-for="item in modules"
           :key="item.key"
@@ -110,3 +176,63 @@ onMounted(load)
     </a-spin>
   </div>
 </template>
+
+<style scoped>
+.sms-dashboard-card {
+  min-height: 196px;
+}
+
+.sms-mini-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.sms-mini-card {
+  border: none;
+  border-radius: 14px;
+  padding: 10px 12px;
+  text-align: right;
+  font-family: inherit;
+  cursor: pointer;
+  display: grid;
+  gap: 2px;
+  color: #17324d;
+}
+
+.sms-mini-card strong {
+  font-size: 0.88rem;
+}
+
+.sms-mini-card span,
+.sms-mini-card small {
+  color: inherit;
+  opacity: 0.9;
+}
+
+.sms-mini-card.healthy {
+  background: linear-gradient(135deg, #dff8ea, #c3efd7);
+}
+
+.sms-mini-card.warning {
+  background: linear-gradient(135deg, #fff4c7, #ffe39a);
+}
+
+.sms-mini-card.critical {
+  background: linear-gradient(135deg, #ffd8d8, #ffb9b9);
+}
+
+.sms-mini-card.unknown {
+  background: linear-gradient(135deg, #eef2f7, #dde5ef);
+}
+
+.sms-mini-empty {
+  grid-column: 1 / -1;
+  border-radius: 14px;
+  background: #f5f7fb;
+  padding: 14px;
+  color: #7b8798;
+  font-size: 0.85rem;
+}
+</style>