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>

src/pages/ProductVersionsPage.vue

@@ -10,11 +10,14 @@ type Tenant = {
   product: 'hamkar' | 'khanegi'
   slug: string
   nameFa: string
+  nameEn?: string | null
   domain: string
   avatarUrl?: string | null
   primaryColor?: string | null
   isActive: boolean
   nodeServer: string
+  notes?: string | null
+  hasAppUiConfig?: boolean
 }
 
 const route = useRoute()
@@ -133,9 +136,14 @@ onMounted(load)
               <div class="domain">{{ item.domain }}</div>
               <div style="margin-top: 8px">
                 <a-tag>{{ item.slug }}</a-tag>
+                <a-tag v-if="item.nameEn" color="blue">{{ item.nameEn }}</a-tag>
                 <a-tag :color="item.isActive ? 'success' : 'default'">
                   {{ item.isActive ? 'فعال' : 'غیرفعال' }}
                 </a-tag>
+                <a-tag v-if="item.notes?.includes('classifyConfidence:low')" color="orange">
+                  بررسی محصول
+                </a-tag>
+                <a-tag v-if="item.hasAppUiConfig" color="purple">ظاهر اپ</a-tag>
               </div>
             </div>
           </div>

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>

src/pages/SmsTenantPage.vue

@@ -0,0 +1,380 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { message } from 'ant-design-vue'
+import { ArrowRightOutlined } from '@ant-design/icons-vue'
+import api from '@/api/http'
+
+type BalanceLevel = 'healthy' | 'warning' | 'critical' | 'unknown'
+
+type SmsSummary = {
+  balanceRials: number
+  balanceLabel: string
+  balanceLevel: BalanceLevel
+  perPartRials: number
+  todayMessages: number
+  todayParts: number
+  todayCostRials: number
+  monthMessages: number
+  monthParts: number
+  monthCostRials: number
+}
+
+const route = useRoute()
+const router = useRouter()
+const loading = ref(false)
+const saving = ref(false)
+const charging = ref(false)
+const safeNote = ref('')
+const ledgers = ref<any[]>([])
+const summary = ref<SmsSummary | null>(null)
+const tenant = ref<{
+  id: string
+  product: 'hamkar' | 'khanegi'
+  slug: string
+  nameFa: string
+  domain: string
+} | null>(null)
+
+const form = reactive({
+  pricePerPartRials: 2500,
+  isBlocked: false,
+  alertCriticalRials: 10000,
+  alertWarningRials: 100000,
+  gatewayProvider: 'melipayamak',
+  melipayamakUser: '',
+  melipayamakPassword: '',
+  melipayamakFrom: '',
+  panelUsername: '',
+  panelPassword: '',
+  panelFrom: '',
+})
+
+const chargeForm = reactive({
+  amountRials: 100000,
+  note: '',
+})
+
+const tenantId = computed(() => String(route.params.tenantId || ''))
+
+function toneClass(level?: BalanceLevel) {
+  return level || 'unknown'
+}
+
+function formatMoney(value: number | null | undefined) {
+  if (value == null) return '—'
+  return `${new Intl.NumberFormat('fa-IR').format(value)} ریال`
+}
+
+async function loadDetail() {
+  if (!tenantId.value) return
+  loading.value = true
+  try {
+    const { data } = await api.get(`/sms/tenants/${tenantId.value}`)
+    tenant.value = data.tenant
+    safeNote.value = data.safeNote || ''
+    summary.value = data.summary
+    ledgers.value = data.ledgers || []
+    Object.assign(form, {
+      pricePerPartRials: data.account.pricePerPartRials,
+      isBlocked: data.account.isBlocked,
+      alertCriticalRials: data.account.alertCriticalRials,
+      alertWarningRials: data.account.alertWarningRials,
+      gatewayProvider: data.account.gatewayProvider || 'melipayamak',
+      melipayamakUser: data.account.melipayamakUser || '',
+      melipayamakPassword: data.account.melipayamakPassword || '',
+      melipayamakFrom: data.account.melipayamakFrom || '',
+      panelUsername: data.account.panelUsername || '',
+      panelPassword: data.account.panelPassword || '',
+      panelFrom: data.account.panelFrom || '',
+    })
+  } catch (e: any) {
+    message.error(e?.response?.data?.message || 'خطا در دریافت حساب پیامک')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function saveAccount() {
+  saving.value = true
+  try {
+    await api.patch(`/sms/tenants/${tenantId.value}`, { ...form })
+    message.success('تنظیمات ذخیره شد')
+    await loadDetail()
+  } catch (e: any) {
+    message.error(e?.response?.data?.message || 'ذخیره ناموفق')
+  } finally {
+    saving.value = false
+  }
+}
+
+async function chargeWallet() {
+  charging.value = true
+  try {
+    await api.post(`/sms/tenants/${tenantId.value}/charge`, {
+      amountRials: Number(chargeForm.amountRials),
+      note: chargeForm.note || undefined,
+    })
+    message.success('موجودی به‌روز شد')
+    chargeForm.note = ''
+    await loadDetail()
+  } catch (e: any) {
+    message.error(e?.response?.data?.message || 'شارژ ناموفق')
+  } finally {
+    charging.value = false
+  }
+}
+
+async function toggleBlock() {
+  const path = form.isBlocked ? 'unblock' : 'block'
+  try {
+    await api.post(`/sms/tenants/${tenantId.value}/${path}`)
+    message.success(form.isBlocked ? 'پیامک آزاد شد' : 'پیامک مسدود شد')
+    await loadDetail()
+  } catch (e: any) {
+    message.error(e?.response?.data?.message || 'عملیات ناموفق')
+  }
+}
+
+watch(tenantId, loadDetail)
+onMounted(loadDetail)
+</script>
+
+<template>
+  <div class="page-shell">
+    <div style="display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px">
+      <a-button type="text" @click="router.push({ name: 'sms-panel' })">
+        <ArrowRightOutlined />
+      </a-button>
+      <div style="flex: 1">
+        <h1 class="page-title">{{ tenant?.nameFa || 'پنل پیامک نسخه' }}</h1>
+        <p class="page-sub">مدیریت کیف پول، تعرفه و گلوگاه پیامک این نسخه</p>
+      </div>
+    </div>
+
+    <a-alert
+      type="info"
+      show-icon
+      style="margin-bottom: 14px; border-radius: 14px"
+      message="پنل پیامکی همکار/خانگی فعلاً دست نخورده می‌ماند"
+      :description="safeNote"
+    />
+
+    <a-spin :spinning="loading">
+      <section v-if="tenant" class="sms-main">
+        <div class="selected-tenant-head">
+          <div>
+            <h2>{{ tenant.nameFa }}</h2>
+            <div class="selected-tenant-meta">
+              <a-tag :color="tenant.product === 'hamkar' ? 'cyan' : 'orange'">
+                {{ tenant.product === 'hamkar' ? 'همکار' : 'خانگی' }}
+              </a-tag>
+              <span>{{ tenant.domain }}</span>
+              <a-tag v-if="form.isBlocked" color="error">مسدود</a-tag>
+            </div>
+          </div>
+          <div class="selected-balance" :class="toneClass(summary?.balanceLevel)">
+            {{ summary?.balanceLabel || '—' }}
+          </div>
+        </div>
+
+        <div class="summary-grid">
+          <div class="summary-card">
+            <span>موجودی کیف پول</span>
+            <strong>{{ summary?.balanceLabel || '—' }}</strong>
+          </div>
+          <div class="summary-card">
+            <span>قیمت هر پارت</span>
+            <strong>{{ formatMoney(summary?.perPartRials) }}</strong>
+          </div>
+          <div class="summary-card">
+            <span>امروز</span>
+            <strong>
+              {{ summary?.todayMessages ?? 0 }} پیامک
+              <small>{{ summary?.todayParts ?? 0 }} پارت · {{ formatMoney(summary?.todayCostRials) }}</small>
+            </strong>
+          </div>
+          <div class="summary-card">
+            <span>ماه جاری</span>
+            <strong>
+              {{ summary?.monthMessages ?? 0 }} پیامک
+              <small>{{ summary?.monthParts ?? 0 }} پارت · {{ formatMoney(summary?.monthCostRials) }}</small>
+            </strong>
+          </div>
+        </div>
+
+        <div class="panels-grid">
+          <div class="panel-card">
+            <h3>شارژ / اصلاح موجودی</h3>
+            <a-form layout="vertical">
+              <a-form-item label="مبلغ (ریال) — منفی = کاهش">
+                <a-input-number v-model:value="chargeForm.amountRials" style="width: 100%" :step="10000" />
+              </a-form-item>
+              <a-form-item label="توضیح">
+                <a-input v-model:value="chargeForm.note" placeholder="مثلاً واریز مشتری" />
+              </a-form-item>
+              <a-button type="primary" block :loading="charging" @click="chargeWallet">ثبت روی کیف پول</a-button>
+            </a-form>
+          </div>
+
+          <div class="panel-card">
+            <h3>تعرفه و هشدار و مسدودسازی</h3>
+            <a-form layout="vertical">
+              <a-form-item label="قیمت هر پارت (ریال)">
+                <a-input-number v-model:value="form.pricePerPartRials" style="width: 100%" :min="0" />
+              </a-form-item>
+              <a-form-item label="آستانه قرمز (ریال)">
+                <a-input-number v-model:value="form.alertCriticalRials" style="width: 100%" :min="0" />
+              </a-form-item>
+              <a-form-item label="آستانه زرد (ریال)">
+                <a-input-number v-model:value="form.alertWarningRials" style="width: 100%" :min="0" />
+              </a-form-item>
+              <a-button danger ghost block style="margin-bottom: 10px" @click="toggleBlock">
+                {{ form.isBlocked ? 'آزاد کردن پیامک' : 'مسدود کردن پیامک' }}
+              </a-button>
+              <a-button type="primary" block :loading="saving" @click="saveAccount">ذخیره تنظیمات</a-button>
+            </a-form>
+          </div>
+        </div>
+
+        <div class="panel-card" style="margin-top: 12px">
+          <h3>گلوگاه پیامک (سوپرادمین)</h3>
+          <div class="fields-grid">
+            <div class="field-card">
+              <label>ارائه‌دهنده</label>
+              <a-select
+                v-model:value="form.gatewayProvider"
+                style="width: 100%"
+                :options="[
+                  { label: 'ملی‌پیامک', value: 'melipayamak' },
+                  { label: 'پنل ۰۰۹۸', value: 'panel0098' },
+                  { label: 'مرکزی', value: 'central' },
+                ]"
+              />
+            </div>
+            <div class="field-card">
+              <label>ملی‌پیامک — کاربر</label>
+              <a-input v-model:value="form.melipayamakUser" dir="ltr" />
+            </div>
+            <div class="field-card">
+              <label>ملی‌پیامک — رمز</label>
+              <a-input-password v-model:value="form.melipayamakPassword" dir="ltr" />
+            </div>
+            <div class="field-card">
+              <label>ملی‌پیامک — فرستنده</label>
+              <a-input v-model:value="form.melipayamakFrom" dir="ltr" />
+            </div>
+            <div class="field-card">
+              <label>۰۰۹۸ — کاربر</label>
+              <a-input v-model:value="form.panelUsername" dir="ltr" />
+            </div>
+            <div class="field-card">
+              <label>۰۰۹۸ — رمز</label>
+              <a-input-password v-model:value="form.panelPassword" dir="ltr" />
+            </div>
+            <div class="field-card">
+              <label>۰۰۹۸ — فرستنده</label>
+              <a-input v-model:value="form.panelFrom" dir="ltr" />
+            </div>
+          </div>
+          <a-button type="primary" style="margin-top: 12px" :loading="saving" @click="saveAccount">
+            ذخیره گلوگاه
+          </a-button>
+        </div>
+
+        <div class="panel-card" style="margin-top: 12px">
+          <h3>آخرین تراکنش‌ها</h3>
+          <a-empty v-if="!ledgers.length" description="هنوز تراکنشی نیست" />
+          <div v-else class="ledger-list">
+            <div v-for="item in ledgers" :key="item.id" class="ledger-item">
+              <strong :class="item.amountRials >= 0 ? 'plus' : 'minus'">
+                {{ formatMoney(item.amountRials) }}
+              </strong>
+              <span>{{ item.note || item.type }}</span>
+              <small>{{ new Date(item.createdAt).toLocaleString('fa-IR') }}</small>
+            </div>
+          </div>
+        </div>
+      </section>
+      <a-empty v-else-if="!loading" description="نسخه پیدا نشد" />
+    </a-spin>
+  </div>
+</template>
+
+<style scoped>
+.sms-main {
+  background: #f7f9fc;
+  border-radius: 18px;
+  padding: 14px;
+  border: 1px solid #e8eef5;
+}
+.selected-tenant-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+.selected-tenant-head h2 { margin: 0 0 6px; font-size: 1.1rem; }
+.selected-tenant-meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: #8b95a8;
+  font-size: 0.84rem;
+}
+.selected-balance {
+  border-radius: 14px;
+  padding: 10px 12px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+.selected-balance.healthy { background: #dff8ea; color: #0f6b3c; }
+.selected-balance.warning { background: #fff4c7; color: #8a6200; }
+.selected-balance.critical { background: #ffd8d8; color: #9d1f1f; }
+.selected-balance.unknown { background: #eef2f7; color: #6a7789; }
+
+.summary-grid,
+.panels-grid,
+.fields-grid { display: grid; gap: 10px; }
+.summary-grid {
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  margin-bottom: 14px;
+}
+.panels-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
+.fields-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
+.summary-card,
+.panel-card,
+.field-card {
+  background: #fff;
+  border: 1px solid #e8eef5;
+  border-radius: 14px;
+  padding: 12px;
+}
+.summary-card span,
+.field-card label {
+  color: #8b95a8;
+  font-size: 0.82rem;
+  display: block;
+  margin-bottom: 6px;
+}
+.summary-card strong { display: grid; gap: 4px; }
+.summary-card small { color: #6f7d90; font-size: 0.8rem; }
+.panel-card h3 { margin: 0 0 12px; font-size: 0.98rem; }
+.ledger-list { display: grid; gap: 8px; }
+.ledger-item {
+  display: grid;
+  grid-template-columns: 140px 1fr auto;
+  gap: 10px;
+  align-items: center;
+  background: #f7f9fc;
+  border-radius: 12px;
+  padding: 10px 12px;
+}
+.ledger-item .plus { color: #0f6b3c; }
+.ledger-item .minus { color: #9d1f1f; }
+.ledger-item small { color: #8b95a8; }
+@media (max-width: 720px) {
+  .selected-tenant-head { flex-direction: column; }
+  .ledger-item { grid-template-columns: 1fr; }
+}
+</style>

src/router/index.ts

@@ -24,6 +24,11 @@ const router = createRouter({
           name: 'sms-panel',
           component: () => import('@/pages/SmsPanelPage.vue'),
         },
+        {
+          path: 'sms/:tenantId',
+          name: 'sms-tenant',
+          component: () => import('@/pages/SmsTenantPage.vue'),
+        },
         {
           path: 'servers',
           name: 'server-panel',

src/theme/tokens.ts

@@ -21,8 +21,6 @@ export const saTheme: ThemeConfig = {
   },
   components: {
     Button: {
-      primaryShadow: '0 10px 24px rgba(32, 201, 151, 0.28)',
-      fontWeight: 600,
       borderRadius: 14,
     },
     Card: {