Make panel legend chips toggle status filters.

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

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;