Expand SuperAdmin web for SMS, servers, plugins, admins, and UI config.

Align SMS tenant panel with Hamkar, add Jalali dates, and support hamkar/khanegi appearance editing.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/pages/ServerPanelPage.vue

@@ -1,8 +1,57 @@
 <script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { message } from 'ant-design-vue'
 import { ArrowRightOutlined, CloudServerOutlined } from '@ant-design/icons-vue'
+import api from '@/api/http'
+
+type ExpiryLevel = 'dedicated' | 'healthy' | 'warning' | 'critical' | 'unknown'
+
+type TenantRow = {
+  id: string
+  product: 'hamkar' | 'khanegi'
+  slug: string
+  nameFa: string
+  domain: string
+  server: {
+    isDedicated: boolean
+    expiryLevel: ExpiryLevel
+    expiryLabel: string
+    serverName?: string | null
+    planLabel?: string | null
+  }
+}
 
 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?: ExpiryLevel) {
+  return level || 'unknown'
+}
+
+function openTenant(id: string) {
+  router.push({ name: 'server-tenant', params: { tenantId: id } })
+}
+
+async function loadTenants() {
+  loadingList.value = true
+  try {
+    const { data } = await api.get('/servers/tenants')
+    tenants.value = data
+  } catch (e: any) {
+    message.error(e?.response?.data?.message || 'خطا در دریافت سرورها')
+  } finally {
+    loadingList.value = false
+  }
+}
+
+onMounted(loadTenants)
 </script>
 
 <template>
@@ -11,24 +60,169 @@ 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">وضعیت اختصاصی یا مدیریت‌شده، شارژ و هشدار نزدیک پایان اعتبار</p>
       </div>
     </div>
 
-    <div class="placeholder-hero server">
-      <div style="display: flex; align-items: center; gap: 12px; font-size: 28px">
-        <CloudServerOutlined />
-        <strong style="font-size: 1.2rem">به‌زودی</strong>
-      </div>
-      <p style="margin: 12px 0 0; opacity: 0.92; line-height: 1.8">
-        این بخش برای پیگیری شارژ، تمدید و وضعیت سرورها طراحی می‌شود — مشابه ساختار پنل پیامکی.
-      </p>
+    <div class="legend">
+      <span class="chip dedicated">اختصاصی</span>
+      <span class="chip healthy">اعتبار کافی — سبز</span>
+      <span class="chip warning">نزدیک هشدار — زرد</span>
+      <span class="chip critical">۳ روز یا کمتر / منقضی — قرمز</span>
+      <span class="chip unknown">بدون تاریخ</span>
     </div>
 
-    <div class="hint-box">
-      اسکلت صفحه آماده است. جزئیات业务流程 و اتصال به سرویس‌ها را در مرحله بعد اضافه می‌کنیم.
-    </div>
+    <section class="sms-selector">
+      <div class="sms-side-head"><CloudServerOutlined /> نسخه‌ها</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.server?.expiryLevel)"
+                @click="openTenant(t.id)"
+              >
+                <strong>{{ t.nameFa }}</strong>
+                <span>{{ t.server?.expiryLabel }}</span>
+                <small v-if="t.server?.serverName">{{ t.server.serverName }}</small>
+                <small v-else>{{ t.domain }}</small>
+              </button>
+              <div v-if="!groupedTenants.hamkar.length" class="empty-hint">نسخه‌ای نیست</div>
+            </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.server?.expiryLevel)"
+                @click="openTenant(t.id)"
+              >
+                <strong>{{ t.nameFa }}</strong>
+                <span>{{ t.server?.expiryLabel }}</span>
+                <small v-if="t.server?.serverName">{{ t.server.serverName }}</small>
+                <small v-else>{{ t.domain }}</small>
+              </button>
+              <div v-if="!groupedTenants.khanegi.length" class="empty-hint">نسخه‌ای نیست</div>
+            </div>
+          </section>
+        </div>
+      </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.8rem;
+  font-weight: 700;
+}
+
+.chip.dedicated { background: #e8eef8; color: #3b5bdb; }
+.chip.healthy { background: #dff8ea; color: #0f7a45; }
+.chip.warning { background: #fff4c7; color: #9a6b00; }
+.chip.critical { background: #ffd8d8; color: #b42318; }
+.chip.unknown { background: #eef2f7; color: #64748b; }
+
+.sms-selector {
+  border-radius: 22px;
+  background: #fff;
+  border: 1px solid #e8eef5;
+  padding: 16px;
+}
+
+.sms-side-head {
+  font-weight: 800;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tenant-groups {
+  display: grid;
+  gap: 18px;
+}
+
+.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: #94a3b8;
+  font-size: 0.85rem;
+}
+
+.tenant-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 10px;
+}
+
+.tenant-card {
+  appearance: none;
+  border: none;
+  border-radius: 16px;
+  padding: 14px;
+  text-align: right;
+  cursor: pointer;
+  font-family: inherit;
+  display: grid;
+  gap: 4px;
+  color: #17324d;
+}
+
+.tenant-card strong { font-size: 0.95rem; }
+.tenant-card span,
+.tenant-card small {
+  opacity: 0.92;
+  font-size: 0.82rem;
+}
+
+.tenant-card.dedicated { background: linear-gradient(135deg, #e8eef8, #d6e0f5); }
+.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); }
+
+.empty-hint {
+  grid-column: 1 / -1;
+  color: #94a3b8;
+  padding: 12px;
+  font-size: 0.85rem;
+}
+</style>