From 9ec1500018a7c7dc34a031255a252757b0418d21 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Sat, 8 Aug 2026 12:52:02 +0330
Subject: [PATCH] Make panel legend chips toggle status filters.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/pages/PluginPanelPage.vue  | 59 +++++++++++++++++++++++++---
 src/pages/ServerPanelPage.vue  | 70 ++++++++++++++++++++++++++++++----
 src/pages/SmsPanelPage.vue     | 58 +++++++++++++++++++++++-----
 src/pages/SupportPanelPage.vue | 59 +++++++++++++++++++++++++---
 4 files changed, 218 insertions(+), 28 deletions(-)

diff --git a/src/pages/PluginPanelPage.vue b/src/pages/PluginPanelPage.vue
index c6eb2e2..7765484 100644
--- a/src/pages/PluginPanelPage.vue
+++ b/src/pages/PluginPanelPage.vue
@@ -24,11 +24,14 @@ const router = useRouter()
 const loadingList = ref(false)
 const tenants = ref<TenantRow[]>([])
 const q = ref('')
+const toneFilter = ref<'healthy' | 'warning' | 'critical' | 'unknown' | null>(null)
 
 const filteredTenants = computed(() => {
   const term = q.value.trim().toLowerCase()
-  if (!term) return tenants.value
   return tenants.value.filter((t) => {
+    const tone = toneClass(t.summary?.expiryLevel)
+    if (toneFilter.value && tone !== toneFilter.value) return false
+    if (!term) return true
     const blob = [t.nameFa, t.domain, t.slug || '', t.summary?.expiryLabel || '']
       .join(' ')
       .toLowerCase()
@@ -45,6 +48,10 @@ function toneClass(level?: ExpiryLevel) {
   return level && level !== 'none' ? level : 'unknown'
 }
 
+function toggleToneFilter(level: 'healthy' | 'warning' | 'critical' | 'unknown') {
+  toneFilter.value = toneFilter.value === level ? null : level
+}
+
 function openTenant(id: string) {
   router.push({ name: 'plugin-tenant', params: { tenantId: id } })
 }
@@ -90,11 +97,39 @@ onMounted(loadTenants)
       </a-input>
     </div>
 
-    <div class="legend">
-      <span class="chip healthy">اعتبار کافی</span>
-      <span class="chip warning">نزدیک هشدار</span>
-      <span class="chip critical">۳ روز یا کمتر / منقضی</span>
-      <span class="chip unknown">بدون افزونه یا بدون تاریخ</span>
+    <div class="legend" role="group" aria-label="فیلتر وضعیت افزونه">
+      <button
+        type="button"
+        class="chip healthy"
+        :class="{ active: toneFilter === 'healthy' }"
+        @click="toggleToneFilter('healthy')"
+      >
+        اعتبار کافی
+      </button>
+      <button
+        type="button"
+        class="chip warning"
+        :class="{ active: toneFilter === 'warning' }"
+        @click="toggleToneFilter('warning')"
+      >
+        نزدیک هشدار
+      </button>
+      <button
+        type="button"
+        class="chip critical"
+        :class="{ active: toneFilter === 'critical' }"
+        @click="toggleToneFilter('critical')"
+      >
+        ۳ روز یا کمتر / منقضی
+      </button>
+      <button
+        type="button"
+        class="chip unknown"
+        :class="{ active: toneFilter === 'unknown' }"
+        @click="toggleToneFilter('unknown')"
+      >
+        بدون افزونه یا بدون تاریخ
+      </button>
     </div>
 
     <section class="sms-selector">
@@ -159,16 +194,28 @@ onMounted(loadTenants)
 }
 
 .chip {
+  appearance: none;
+  border: 2px solid transparent;
   border-radius: 999px;
   padding: 6px 12px;
+  font: inherit;
   font-size: 0.8rem;
   font-weight: 700;
+  cursor: pointer;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
 }
 
+.chip:hover { transform: translateY(-1px); }
+.chip.active { box-shadow: 0 0 0 2px rgba(23, 50, 77, 0.18); }
+
 .chip.healthy { background: #dff8ea; color: #0f7a45; }
+.chip.healthy.active { border-color: #0f7a45; }
 .chip.warning { background: #fff4c7; color: #9a6b00; }
+.chip.warning.active { border-color: #9a6b00; }
 .chip.critical { background: #ffd8d8; color: #b42318; }
+.chip.critical.active { border-color: #b42318; }
 .chip.unknown { background: #eef2f7; color: #64748b; }
+.chip.unknown.active { border-color: #64748b; }
 
 .sms-selector {
   border-radius: 22px;
diff --git a/src/pages/ServerPanelPage.vue b/src/pages/ServerPanelPage.vue
index 30b6082..c89377f 100644
--- a/src/pages/ServerPanelPage.vue
+++ b/src/pages/ServerPanelPage.vue
@@ -28,11 +28,15 @@ const router = useRouter()
 const loadingList = ref(false)
 const tenants = ref<TenantRow[]>([])
 const q = ref('')
+const toneFilter = ref<ExpiryLevel | null>(null)
 
 const filteredTenants = computed(() => {
   const term = q.value.trim().toLowerCase()
-  if (!term) return tenants.value
   return tenants.value.filter((t) => {
+    if (toneFilter.value && (t.server?.expiryLevel || 'unknown') !== toneFilter.value) {
+      return false
+    }
+    if (!term) return true
     const blob = [
       t.nameFa,
       t.domain,
@@ -55,6 +59,10 @@ function toneClass(level?: ExpiryLevel) {
   return level || 'unknown'
 }
 
+function toggleToneFilter(level: ExpiryLevel) {
+  toneFilter.value = toneFilter.value === level ? null : level
+}
+
 function openTenant(id: string) {
   router.push({ name: 'server-tenant', params: { tenantId: id } })
 }
@@ -100,12 +108,47 @@ onMounted(loadTenants)
       </a-input>
     </div>
 
-    <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 class="legend" role="group" aria-label="فیلتر وضعیت سرور">
+      <button
+        type="button"
+        class="chip dedicated"
+        :class="{ active: toneFilter === 'dedicated' }"
+        @click="toggleToneFilter('dedicated')"
+      >
+        اختصاصی
+      </button>
+      <button
+        type="button"
+        class="chip healthy"
+        :class="{ active: toneFilter === 'healthy' }"
+        @click="toggleToneFilter('healthy')"
+      >
+        اعتبار کافی — سبز
+      </button>
+      <button
+        type="button"
+        class="chip warning"
+        :class="{ active: toneFilter === 'warning' }"
+        @click="toggleToneFilter('warning')"
+      >
+        نزدیک هشدار — زرد
+      </button>
+      <button
+        type="button"
+        class="chip critical"
+        :class="{ active: toneFilter === 'critical' }"
+        @click="toggleToneFilter('critical')"
+      >
+        ۳ روز یا کمتر / منقضی — قرمز
+      </button>
+      <button
+        type="button"
+        class="chip unknown"
+        :class="{ active: toneFilter === 'unknown' }"
+        @click="toggleToneFilter('unknown')"
+      >
+        بدون تاریخ
+      </button>
     </div>
 
     <section class="sms-selector">
@@ -178,17 +221,30 @@ onMounted(loadTenants)
 }
 
 .chip {
+  appearance: none;
+  border: 2px solid transparent;
   border-radius: 999px;
   padding: 6px 12px;
+  font: inherit;
   font-size: 0.8rem;
   font-weight: 700;
+  cursor: pointer;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
 }
 
+.chip:hover { transform: translateY(-1px); }
+.chip.active { box-shadow: 0 0 0 2px rgba(23, 50, 77, 0.18); }
+
 .chip.dedicated { background: #e8eef8; color: #3b5bdb; }
+.chip.dedicated.active { border-color: #3b5bdb; }
 .chip.healthy { background: #dff8ea; color: #0f7a45; }
+.chip.healthy.active { border-color: #0f7a45; }
 .chip.warning { background: #fff4c7; color: #9a6b00; }
+.chip.warning.active { border-color: #9a6b00; }
 .chip.critical { background: #ffd8d8; color: #b42318; }
+.chip.critical.active { border-color: #b42318; }
 .chip.unknown { background: #eef2f7; color: #64748b; }
+.chip.unknown.active { border-color: #64748b; }
 
 .sms-selector {
   border-radius: 22px;
diff --git a/src/pages/SmsPanelPage.vue b/src/pages/SmsPanelPage.vue
index 4ec5c47..d8569b6 100644
--- a/src/pages/SmsPanelPage.vue
+++ b/src/pages/SmsPanelPage.vue
@@ -24,16 +24,21 @@ const router = useRouter()
 const loadingList = ref(false)
 const tenants = ref<TenantRow[]>([])
 const q = ref('')
+const toneFilter = ref<BalanceLevel | null>(null)
 
 const filteredTenants = computed(() => {
   const term = q.value.trim().toLowerCase()
-  if (!term) return tenants.value
-  return tenants.value.filter(
-    (t) =>
+  return tenants.value.filter((t) => {
+    if (toneFilter.value && (t.sms?.balanceLevel || 'unknown') !== toneFilter.value) {
+      return false
+    }
+    if (!term) return true
+    return (
       t.nameFa.toLowerCase().includes(term) ||
       t.domain.toLowerCase().includes(term) ||
-      t.slug.toLowerCase().includes(term),
-  )
+      t.slug.toLowerCase().includes(term)
+    )
+  })
 })
 
 const groupedTenants = computed(() => ({
@@ -45,6 +50,10 @@ function toneClass(level?: BalanceLevel) {
   return level || 'unknown'
 }
 
+function toggleToneFilter(level: BalanceLevel) {
+  toneFilter.value = toneFilter.value === level ? null : level
+}
+
 function openTenant(id: string) {
   router.push({ name: 'sms-tenant', params: { tenantId: id } })
 }
@@ -98,10 +107,31 @@ onMounted(loadTenants)
       description="بعد از تست سوپرادمین، اتصال به محصولات تصمیم‌گیری می‌شود."
     />
 
-    <div class="legend">
-      <span class="chip healthy">بالای ۱۰۰٬۰۰۰ — سبز</span>
-      <span class="chip warning">۱۰٬۰۰۰ تا ۱۰۰٬۰۰۰ — زرد</span>
-      <span class="chip critical">زیر ۱۰٬۰۰۰ — قرمز</span>
+    <div class="legend" role="group" aria-label="فیلتر وضعیت موجودی">
+      <button
+        type="button"
+        class="chip healthy"
+        :class="{ active: toneFilter === 'healthy' }"
+        @click="toggleToneFilter('healthy')"
+      >
+        بالای ۱۰۰٬۰۰۰ — سبز
+      </button>
+      <button
+        type="button"
+        class="chip warning"
+        :class="{ active: toneFilter === 'warning' }"
+        @click="toggleToneFilter('warning')"
+      >
+        ۱۰٬۰۰۰ تا ۱۰۰٬۰۰۰ — زرد
+      </button>
+      <button
+        type="button"
+        class="chip critical"
+        :class="{ active: toneFilter === 'critical' }"
+        @click="toggleToneFilter('critical')"
+      >
+        زیر ۱۰٬۰۰۰ — قرمز
+      </button>
     </div>
 
     <section class="sms-selector">
@@ -169,14 +199,24 @@ onMounted(loadTenants)
   margin-bottom: 14px;
 }
 .chip {
+  appearance: none;
+  border: 2px solid transparent;
   border-radius: 999px;
   padding: 6px 12px;
+  font: inherit;
   font-size: 0.82rem;
   font-weight: 700;
+  cursor: pointer;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
 }
+.chip:hover { transform: translateY(-1px); }
+.chip.active { box-shadow: 0 0 0 2px rgba(23, 50, 77, 0.18); }
 .chip.healthy { background: #dff8ea; color: #0f6b3c; }
+.chip.healthy.active { border-color: #0f6b3c; }
 .chip.warning { background: #fff4c7; color: #8a6200; }
+.chip.warning.active { border-color: #8a6200; }
 .chip.critical { background: #ffd8d8; color: #9d1f1f; }
+.chip.critical.active { border-color: #9d1f1f; }
 
 .sms-selector {
   background: #f7f9fc;
diff --git a/src/pages/SupportPanelPage.vue b/src/pages/SupportPanelPage.vue
index 2668637..8a2284c 100644
--- a/src/pages/SupportPanelPage.vue
+++ b/src/pages/SupportPanelPage.vue
@@ -24,11 +24,14 @@ const router = useRouter()
 const loadingList = ref(false)
 const tenants = ref<TenantRow[]>([])
 const q = ref('')
+const toneFilter = ref<'healthy' | 'warning' | 'critical' | 'unknown' | null>(null)
 
 const filteredTenants = computed(() => {
   const term = q.value.trim().toLowerCase()
-  if (!term) return tenants.value
   return tenants.value.filter((t) => {
+    const tone = toneClass(t.summary?.expiryLevel)
+    if (toneFilter.value && tone !== toneFilter.value) return false
+    if (!term) return true
     const blob = [t.nameFa, t.domain, t.slug || '', t.summary?.expiryLabel || '']
       .join(' ')
       .toLowerCase()
@@ -45,6 +48,10 @@ function toneClass(level?: ExpiryLevel) {
   return level && level !== 'none' ? level : 'unknown'
 }
 
+function toggleToneFilter(level: 'healthy' | 'warning' | 'critical' | 'unknown') {
+  toneFilter.value = toneFilter.value === level ? null : level
+}
+
 function openTenant(id: string) {
   router.push({ name: 'support-tenant', params: { tenantId: id } })
 }
@@ -90,11 +97,39 @@ onMounted(loadTenants)
       </a-input>
     </div>
 
-    <div class="legend">
-      <span class="chip healthy">اعتبار کافی</span>
-      <span class="chip warning">نزدیک هشدار</span>
-      <span class="chip critical">۳ روز یا کمتر / منقضی</span>
-      <span class="chip unknown">بدون پشتیبانی یا بدون تاریخ</span>
+    <div class="legend" role="group" aria-label="فیلتر وضعیت پشتیبانی">
+      <button
+        type="button"
+        class="chip healthy"
+        :class="{ active: toneFilter === 'healthy' }"
+        @click="toggleToneFilter('healthy')"
+      >
+        اعتبار کافی
+      </button>
+      <button
+        type="button"
+        class="chip warning"
+        :class="{ active: toneFilter === 'warning' }"
+        @click="toggleToneFilter('warning')"
+      >
+        نزدیک هشدار
+      </button>
+      <button
+        type="button"
+        class="chip critical"
+        :class="{ active: toneFilter === 'critical' }"
+        @click="toggleToneFilter('critical')"
+      >
+        ۳ روز یا کمتر / منقضی
+      </button>
+      <button
+        type="button"
+        class="chip unknown"
+        :class="{ active: toneFilter === 'unknown' }"
+        @click="toggleToneFilter('unknown')"
+      >
+        بدون پشتیبانی یا بدون تاریخ
+      </button>
     </div>
 
     <section class="sms-selector">
@@ -159,16 +194,28 @@ onMounted(loadTenants)
 }
 
 .chip {
+  appearance: none;
+  border: 2px solid transparent;
   border-radius: 999px;
   padding: 6px 12px;
+  font: inherit;
   font-size: 0.8rem;
   font-weight: 700;
+  cursor: pointer;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
 }
 
+.chip:hover { transform: translateY(-1px); }
+.chip.active { box-shadow: 0 0 0 2px rgba(23, 50, 77, 0.18); }
+
 .chip.healthy { background: #dff8ea; color: #0f7a45; }
+.chip.healthy.active { border-color: #0f7a45; }
 .chip.warning { background: #fff4c7; color: #9a6b00; }
+.chip.warning.active { border-color: #9a6b00; }
 .chip.critical { background: #ffd8d8; color: #b42318; }
+.chip.critical.active { border-color: #b42318; }
 .chip.unknown { background: #eef2f7; color: #64748b; }
+.chip.unknown.active { border-color: #64748b; }
 
 .sms-selector {
   border-radius: 22px;