Creating a control panel infrastructure

src/pages/SmsPanelPage.vue

@@ -1,8 +1,55 @@
 <script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { message } from 'ant-design-vue'
 import { ArrowRightOutlined, MessageOutlined } from '@ant-design/icons-vue'
+import api from '@/api/http'
+
+type BalanceLevel = 'healthy' | 'warning' | 'critical' | 'unknown'
+
+type TenantRow = {
+  id: string
+  product: 'hamkar' | 'khanegi'
+  slug: string
+  nameFa: string
+  domain: string
+  isBlocked?: boolean
+  sms: {
+    balanceLabel: string
+    balanceLevel: BalanceLevel
+  }
+}
 
 const router = useRouter()
+const loadingList = ref(false)
+const tenants = ref<TenantRow[]>([])
+
+const groupedTenants = computed(() => ({
+  hamkar: tenants.value.filter((t) => t.product === 'hamkar'),
+  khanegi: tenants.value.filter((t) => t.product === 'khanegi'),
+}))
+
+function toneClass(level?: BalanceLevel) {
+  return level || 'unknown'
+}
+
+function openTenant(id: string) {
+  router.push({ name: 'sms-tenant', params: { tenantId: id } })
+}
+
+async function loadTenants() {
+  loadingList.value = true
+  try {
+    const { data } = await api.get('/sms/tenants')
+    tenants.value = data
+  } catch (e: any) {
+    message.error(e?.response?.data?.message || 'خطا در دریافت نسخه‌ها')
+  } finally {
+    loadingList.value = false
+  }
+}
+
+onMounted(loadTenants)
 </script>
 
 <template>
@@ -11,24 +58,144 @@ const router = useRouter()
       <a-button type="text" @click="router.push({ name: 'home' })">
         <ArrowRightOutlined />
       </a-button>
-      <div>
+      <div style="flex: 1">
         <h1 class="page-title">پنل پیامکی</h1>
-        <p class="page-sub">مرکز مشترک پیامک برای همکار و خانگی</p>
+        <p class="page-sub">یک نسخه را انتخاب کنید تا کیف پول و تنظیمات SMS همان نسخه باز شود</p>
       </div>
     </div>
 
-    <div class="placeholder-hero sms">
-      <div style="display: flex; align-items: center; gap: 12px; font-size: 28px">
-        <MessageOutlined />
-        <strong style="font-size: 1.2rem">به‌زودی</strong>
-      </div>
-      <p style="margin: 12px 0 0; opacity: 0.92; line-height: 1.8">
-        اینجا پنل پیامکی مرکزی می‌آید تا دیگر لازم نباشد در هر پروژه جداگانه مدیریت شود.
-      </p>
+    <a-alert
+      type="info"
+      show-icon
+      style="margin-bottom: 14px; border-radius: 14px"
+      message="فعلاً پنل پیامکی همکار و خانگی دست نخورده می‌ماند"
+      description="بعد از تست سوپرادمین، اتصال به محصولات تصمیم‌گیری می‌شود."
+    />
+
+    <div class="legend">
+      <span class="chip healthy">بالای ۱۰۰٬۰۰۰ — سبز</span>
+      <span class="chip warning">۱۰٬۰۰۰ تا ۱۰۰٬۰۰۰ — زرد</span>
+      <span class="chip critical">زیر ۱۰٬۰۰۰ — قرمز</span>
     </div>
 
-    <div class="hint-box">
-      فعلاً اسکلت صفحه آماده است. در مرحله بعد اتصال به سرویس پیامک و تنظیمات هر نسخه را اضافه می‌کنیم.
-    </div>
+    <section class="sms-selector">
+      <div class="sms-side-head"><MessageOutlined /> نسخه‌ها</div>
+      <a-spin :spinning="loadingList">
+        <div class="tenant-groups">
+          <section class="tenant-group">
+            <div class="tenant-group-head">
+              <h3>همکار</h3>
+              <span>{{ groupedTenants.hamkar.length }} نسخه</span>
+            </div>
+            <div class="tenant-grid">
+              <button
+                v-for="t in groupedTenants.hamkar"
+                :key="t.id"
+                type="button"
+                class="tenant-card"
+                :class="toneClass(t.sms?.balanceLevel)"
+                @click="openTenant(t.id)"
+              >
+                <strong>{{ t.nameFa }}</strong>
+                <span>{{ t.sms?.balanceLabel }}</span>
+                <small>{{ t.isBlocked ? 'مسدود' : t.domain }}</small>
+              </button>
+            </div>
+          </section>
+
+          <section class="tenant-group">
+            <div class="tenant-group-head">
+              <h3>خانگی</h3>
+              <span>{{ groupedTenants.khanegi.length }} نسخه</span>
+            </div>
+            <div class="tenant-grid">
+              <button
+                v-for="t in groupedTenants.khanegi"
+                :key="t.id"
+                type="button"
+                class="tenant-card"
+                :class="toneClass(t.sms?.balanceLevel)"
+                @click="openTenant(t.id)"
+              >
+                <strong>{{ t.nameFa }}</strong>
+                <span>{{ t.sms?.balanceLabel }}</span>
+                <small>{{ t.isBlocked ? 'مسدود' : t.domain }}</small>
+              </button>
+            </div>
+          </section>
+        </div>
+        <a-empty
+          v-if="!groupedTenants.hamkar.length && !groupedTenants.khanegi.length"
+          description="نسخه‌ای نیست"
+        />
+      </a-spin>
+    </section>
   </div>
 </template>
+
+<style scoped>
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+.chip {
+  border-radius: 999px;
+  padding: 6px 12px;
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+.chip.healthy { background: #dff8ea; color: #0f6b3c; }
+.chip.warning { background: #fff4c7; color: #8a6200; }
+.chip.critical { background: #ffd8d8; color: #9d1f1f; }
+
+.sms-selector {
+  background: #f7f9fc;
+  border-radius: 18px;
+  padding: 14px;
+  border: 1px solid #e8eef5;
+}
+.sms-side-head {
+  font-weight: 800;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.tenant-groups { display: grid; gap: 16px; }
+.tenant-group-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.tenant-group-head h3 { margin: 0; font-size: 1rem; }
+.tenant-group-head span { color: #8b95a8; font-size: 0.82rem; }
+.tenant-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 8px;
+}
+.tenant-card {
+  width: 100%;
+  text-align: right;
+  border: 1px solid transparent;
+  border-radius: 16px;
+  padding: 12px;
+  cursor: pointer;
+  font-family: inherit;
+  display: grid;
+  gap: 4px;
+  color: #17324d;
+}
+.tenant-card.healthy { background: linear-gradient(135deg, #dff8ea, #c3efd7); }
+.tenant-card.warning { background: linear-gradient(135deg, #fff4c7, #ffe39a); }
+.tenant-card.critical { background: linear-gradient(135deg, #ffd8d8, #ffb9b9); }
+.tenant-card.unknown { background: linear-gradient(135deg, #eef2f7, #dde5ef); }
+.tenant-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 22px rgba(23, 50, 77, 0.08);
+}
+.tenant-card small { direction: ltr; text-align: right; }
+</style>