add header show SMSpanel

components.d.ts

@@ -10,7 +10,6 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     _index: typeof import('./src/core/components/_sample/_index.vue')['default']
-    AAlert: typeof import('ant-design-vue/es')['Alert']
     AAvatar: typeof import('ant-design-vue/es')['Avatar']
     ABadge: typeof import('ant-design-vue/es')['Badge']
     AButton: typeof import('ant-design-vue/es')['Button']
@@ -42,7 +41,6 @@ declare module '@vue/runtime-core' {
     APagination: typeof import('ant-design-vue/es')['Pagination']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     APopover: typeof import('ant-design-vue/es')['Popover']
-    ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARow: typeof import('ant-design-vue/es')['Row']
@@ -58,7 +56,6 @@ declare module '@vue/runtime-core' {
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
-    AUpload: typeof import('ant-design-vue/es')['Upload']
     BaseButton: typeof import('./src/core/components/BaseButton/index.ts')['default']
     BaseCard: typeof import('./src/core/components/BaseCard/index.ts')['default']
     BaseCollapse: typeof import('./src/components/BaseCollapse.vue')['default']
@@ -89,6 +86,7 @@ declare module '@vue/runtime-core' {
     PargarRetryModal: typeof import('./src/components/PargarRetryModal.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SmsCreditWidget: typeof import('./src/components/SmsCreditWidget.vue')['default']
     TahesabRetryModal: typeof import('./src/components/TahesabRetryModal.vue')['default']
     ThemeMenuSection: typeof import('./src/core/components/ThemeMenuSection.vue')['default']
     ThemeToggle: typeof import('./src/core/components/ThemeToggle.vue')['default']

src/api/smsPanel.ts

@@ -1,6 +1,13 @@
 import useAxios from '@core/utils/useAxios'
 import type { TableInput } from '@core/type/baseTable'
 
+export type SmsDepositInfo = {
+  card_number: string
+  sheba: string
+  account_holder: string
+  note: string
+}
+
 export type SmsPanelOverview = {
   wallet: {
     balance: number
@@ -9,12 +16,20 @@ export type SmsPanelOverview = {
     alert_days_sent: number
     last_alert_date: string | null
   }
+  deposit: SmsDepositInfo
   stats: {
     today: { parts: number; amount: number; messages: number }
     month: { parts: number; amount: number; messages: number }
   }
 }
 
+export type SmsWalletSummary = {
+  enabled: boolean
+  balance: number
+  is_blocked: boolean
+  deposit: SmsDepositInfo
+}
+
 export type SmsPanelReport = {
   from_date: string
   to_date: string
@@ -46,6 +61,15 @@ export type SmsPanelChargeReport = {
 
 export const getSmsPanelOverview = () => useAxios.get<SmsPanelOverview>('/admin/sms-panel/overview')
 
+export const getSmsWalletSummary = () =>
+  useAxios.get<SmsWalletSummary>('/admin/sms-wallet/summary')
+
+export const updateSmsDepositInfo = (payload: Partial<SmsDepositInfo>) =>
+  useAxios.put<{ message: string; deposit: SmsDepositInfo }>(
+    '/admin/sms-panel/deposit-info',
+    payload
+  )
+
 export const chargeSmsWallet = (payload: { amount: number; note?: string }) =>
   useAxios.post<{ message: string; balance: number }>('/admin/sms-panel/charge', payload)
 

src/components/BasicMobileHeader.vue

@@ -1,10 +1,12 @@
 <template>
   <div theme="light" :class="[prefixCls]" class="md:hidden">
     <div class="mobile-header-bar">
-      <span class="mobile-header-bar__name">{{ displayName }}</span>
+      <div class="mobile-header-bar__brand">
-      <div class="mobile-header-bar__logo">
         <BasicMobileHeaderLogo />
       </div>
+      <div class="mobile-header-bar__center">
+        <SmsCreditWidget variant="mobile" />
+      </div>
       <div class="mobile-header-bar__actions">
         <button type="button" class="mobile-header-bar__icon" aria-label="رفرش صفحه" @click="handleRefresh">
           <Icon icon="vuesax-linear:refresh" :size="26" />
@@ -74,11 +76,12 @@ import { inputLenRules, inputRules } from '@/utils/inputRules'
 import { usePrefix } from '@core/composable/usePrefix'
 import Icon from '@core/components/BaseIcon/src/Icon.vue'
 import BasicMobileHeaderLogo from '@/components/BasicMobileHeaderLogo.vue'
+import SmsCreditWidget from '@/components/SmsCreditWidget.vue'
 import { useUserStore } from '@/store/userStore'
 import type { User } from '@/model/user'
 import { updateMyInformation } from '@/api/user'
 import { message } from 'ant-design-vue/es'
-import { onMounted, ref, computed } from 'vue'
+import { onMounted, ref } from 'vue'
 import type { FormInstance } from 'ant-design-vue'
 import { cloneDeep } from 'lodash'
 import ThemeMenuSection from '@core/components/ThemeMenuSection.vue'
@@ -104,12 +107,6 @@ const form = ref<User>({
   permission: []
 })
 
-const displayName = computed(() => {
-  const info = userStore.userInfo
-  if (info?.name) return info.name
-  return [info?.fname, info?.lname].filter(Boolean).join(' ') || 'کاربر'
-})
-
 onMounted(() => {
   form.value = cloneDeep(userStore?.userInfo) as User
 })
@@ -154,11 +151,10 @@ function handleRefresh() {
 }
 
 .mobile-header-bar {
-  position: relative;
+  display: grid;
-  display: flex;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  justify-content: space-between;
+  gap: 8px;
-  gap: 12px;
   width: 100%;
   padding: 10px 12px;
   background: var(--admin-bg-surface);
@@ -166,33 +162,26 @@ function handleRefresh() {
   border-radius: 0;
 }
 
-.mobile-header-bar__name {
+.mobile-header-bar__brand {
-  max-width: 34%;
+  display: flex;
-  font-size: 15px;
+  align-items: center;
-  font-weight: 600;
+  justify-self: start;
-  color: var(--admin-text);
+  min-width: 0;
-  line-height: 1.4;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
-.mobile-header-bar__logo {
+.mobile-header-bar__center {
-  position: absolute;
+  justify-self: center;
-  left: 50%;
+  min-width: 0;
-  top: 50%;
+  max-width: 100%;
-  transform: translate(-50%, -50%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
 }
 
 .mobile-header-bar__actions {
   display: flex;
   align-items: center;
-  gap: 12px;
+  justify-content: flex-end;
-  flex-shrink: 0;
+  gap: 10px;
+  justify-self: end;
+  min-width: 0;
 }
 
 .mobile-header-bar__icon {

src/components/SmsCreditWidget.vue

@@ -0,0 +1,368 @@
+<template>
+  <div v-if="store.visible" class="sms-credit" :class="`sms-credit--${variant}`">
+    <div class="sms-credit__info">
+      <span class="sms-credit__label">اعتبار پیامک:</span>
+      <span class="sms-credit__amount" :class="amountClass">
+        {{ formattedBalance }}
+        <span class="sms-credit__unit">ریال</span>
+      </span>
+    </div>
+    <button type="button" class="sms-credit__charge" @click="modalVisible = true">
+      <Icon icon="vuesax-linear:wallet-add" :size="15" />
+      <span>شارژ</span>
+    </button>
+
+    <BasicModal
+      v-model:visible="modalVisible"
+      width="30rem"
+      title="شارژ اعتبار پیامک"
+      :custom-footer="true"
+      @close="modalVisible = false"
+    >
+      <div class="sms-charge-modal">
+        <p class="sms-charge-modal__note">{{ depositNote }}</p>
+
+        <div class="sms-charge-modal__rows">
+          <div class="sms-charge-row">
+            <span class="sms-charge-row__label">شماره کارت</span>
+            <div class="sms-charge-row__value-box">
+              <span class="sms-charge-row__value" dir="ltr">{{ deposit.card_number || '—' }}</span>
+              <button
+                v-if="deposit.card_number"
+                type="button"
+                class="sms-charge-row__copy"
+                aria-label="کپی شماره کارت"
+                @click="copyValue(deposit.card_number, 'شماره کارت')"
+              >
+                <Icon icon="vuesax-linear:copy" :size="16" />
+              </button>
+            </div>
+          </div>
+
+          <div class="sms-charge-row">
+            <span class="sms-charge-row__label">شماره شبا</span>
+            <div class="sms-charge-row__value-box">
+              <span class="sms-charge-row__value" dir="ltr">{{ deposit.sheba || '—' }}</span>
+              <button
+                v-if="deposit.sheba"
+                type="button"
+                class="sms-charge-row__copy"
+                aria-label="کپی شماره شبا"
+                @click="copyValue(deposit.sheba, 'شماره شبا')"
+              >
+                <Icon icon="vuesax-linear:copy" :size="16" />
+              </button>
+            </div>
+          </div>
+
+          <div class="sms-charge-row sms-charge-row--holder">
+            <span class="sms-charge-row__label">به نام</span>
+            <span class="sms-charge-row__holder">{{ deposit.account_holder || '—' }}</span>
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <BaseButton @click="modalVisible = false">بستن</BaseButton>
+      </template>
+    </BasicModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useClipboard } from '@vueuse/core'
+import { message } from 'ant-design-vue'
+import BasicModal from '@/components/BasicModal.vue'
+import BaseButton from '@core/components/BaseButton'
+import Icon from '@core/components/BaseIcon/src/Icon.vue'
+import { useSmsWalletStore } from '@/store/smsWalletStore'
+
+withDefaults(defineProps<{ variant?: 'desktop' | 'mobile' }>(), {
+  variant: 'desktop'
+})
+
+const store = useSmsWalletStore()
+const route = useRoute()
+const modalVisible = ref(false)
+
+const { copy, isSupported } = useClipboard()
+
+const deposit = computed(() => store.deposit)
+const depositNote = computed(
+  () =>
+    store.deposit.note ||
+    'لطفا مبلغ مورد نظر خود جهت شارژ سامانه پیامکی را به شماره کارت یا حساب زیر واریز نمایید و تصویر فیش پرداختی را برای پشتیبانی بفرستید.'
+)
+
+const formattedBalance = computed(() => Number(store.balance || 0).toLocaleString('fa-IR'))
+
+const amountClass = computed(() => {
+  if (store.balance < 0) return 'sms-credit__amount--danger'
+  if (store.balance <= 0) return 'sms-credit__amount--warn'
+  return 'sms-credit__amount--ok'
+})
+
+async function copyValue(value: string, label: string) {
+  const clean = String(value ?? '').replace(/\s+/g, '')
+  if (!clean) return
+
+  try {
+    if (isSupported.value) {
+      await copy(clean)
+    } else {
+      const el = document.createElement('textarea')
+      el.value = clean
+      el.style.position = 'fixed'
+      el.style.opacity = '0'
+      document.body.appendChild(el)
+      el.select()
+      document.execCommand('copy')
+      document.body.removeChild(el)
+    }
+    message.success(`${label} کپی شد`)
+  } catch {
+    message.error('کپی انجام نشد')
+  }
+}
+
+watch(
+  () => store.visible,
+  (isVisible) => {
+    if (isVisible) store.refresh()
+  },
+  { immediate: true }
+)
+
+watch(
+  () => route.fullPath,
+  () => store.refresh()
+)
+</script>
+
+<style scoped lang="less">
+.sms-credit {
+  border: 1px solid var(--admin-border);
+  border-radius: 0.75rem;
+  background: var(--admin-bg-muted);
+  box-sizing: border-box;
+}
+
+.sms-credit--desktop {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  column-gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  line-height: 1.2;
+}
+
+.sms-credit--desktop .sms-credit__info {
+  justify-self: start;
+  align-self: center;
+  align-items: center;
+}
+
+.sms-credit--desktop .sms-credit__charge {
+  justify-self: end;
+  align-self: center;
+  padding-block: 0.25rem;
+}
+
+.sms-credit__info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.35rem;
+  line-height: 1.2;
+  min-width: 0;
+}
+
+.sms-credit__label {
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: var(--admin-text-secondary);
+  white-space: nowrap;
+}
+
+.sms-credit__amount {
+  font-size: 0.875rem;
+  font-weight: 700;
+  white-space: nowrap;
+  letter-spacing: -0.01em;
+}
+
+.sms-credit__unit {
+  font-size: 0.65rem;
+  font-weight: 400;
+  opacity: 0.7;
+}
+
+.sms-credit__amount--ok {
+  color: #047857;
+}
+
+.sms-credit__amount--warn {
+  color: #b45309;
+}
+
+.sms-credit__amount--danger {
+  color: #b91c1c;
+}
+
+.sms-credit__charge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.2rem 0.55rem;
+  border: none;
+  border-radius: 0.55rem;
+  background: var(--admin-gold-light);
+  color: var(--admin-menu-selected-text, #fff);
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.sms-credit__charge:hover {
+  background: var(--admin-gold-hover);
+}
+
+.sms-credit--mobile {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  column-gap: 0.4rem;
+  border-radius: 0.6rem;
+  padding: 0.3rem 0.45rem;
+  line-height: 1.2;
+}
+
+.sms-credit--mobile .sms-credit__info {
+  justify-self: start;
+  align-self: center;
+  align-items: center;
+}
+
+.sms-credit--mobile .sms-credit__charge {
+  justify-self: end;
+  align-self: center;
+  padding-block: 0.2rem;
+}
+
+.sms-credit--mobile .sms-credit__label {
+  font-size: 0.68rem;
+}
+
+.sms-credit--mobile .sms-credit__amount {
+  font-size: 0.8rem;
+}
+
+.sms-credit--mobile .sms-credit__charge {
+  padding: 0.18rem 0.45rem;
+  font-size: 0.7rem;
+}
+
+/* modal content */
+.sms-charge-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.sms-charge-modal__note {
+  margin: 0;
+  font-size: 0.85rem;
+  line-height: 1.9;
+  color: var(--admin-text-secondary);
+  text-align: justify;
+}
+
+.sms-charge-modal__rows {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.sms-charge-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.sms-charge-row__label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--admin-text-secondary);
+}
+
+.sms-charge-row__value-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border: 1px solid var(--admin-border);
+  border-radius: 0.6rem;
+  background: var(--admin-bg-muted);
+  padding: 0.5rem 0.75rem;
+}
+
+.sms-charge-row__value {
+  font-size: 0.95rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--admin-text);
+  word-break: break-all;
+}
+
+.sms-charge-row__copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border: none;
+  border-radius: 0.4rem;
+  background: transparent;
+  color: var(--admin-gold-light);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color 0.2s;
+}
+
+.sms-charge-row__copy:hover {
+  background: var(--admin-bg-hover);
+}
+
+.sms-charge-row--holder {
+  flex-direction: row;
+  align-items: center;
+  gap: 0.4rem;
+  padding-top: 0.25rem;
+}
+
+.sms-charge-row__holder {
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--admin-text);
+}
+</style>
+
+<style lang="less">
+html.is-dark {
+  .sms-credit__amount--ok {
+    color: #6ee7b7;
+  }
+
+  .sms-credit__amount--warn {
+    color: #fcd34d;
+  }
+
+  .sms-credit__amount--danger {
+    color: #fda4af;
+  }
+}
+</style>

src/core/layouts/BasicHeader.vue

@@ -20,9 +20,7 @@
       <!--      <BaseButton icon="vuesax-linear:menu" @click="handleCollapseSideMenu"></BaseButton>-->
       <!--      <div @click="handleCollapseSideMenu">بستن منو</div>-->
       <div class="flex shrink-0 items-center gap-3">
-<!--        <div>
+        <SmsCreditWidget variant="desktop" />
-          <BaseButton size="small" @click="openNewTabBalance">تراز</BaseButton>
-        </div>-->
         <ADropdown placement="bottomLeft" class="ml-5">
           <a class="ant-dropdown-link" @click.prevent>
             <!--            Hover me-->
@@ -147,8 +145,8 @@
 </template>
 
 <script lang="ts" setup>
-import {openNewTabBalance} from '@core/composable/appInfo'
 import { usePrefix } from '@core/composable/usePrefix'
+import SmsCreditWidget from '@/components/SmsCreditWidget.vue'
 import { useLayoutStore } from '@core/stores/layout'
 import BasicMenu from '@core/layouts/composnts/BasicMenu.vue'
 import placeholderM from '@core/assets/img/avatars/placeholder-m.jpg'

src/pages/menuPages/smsPanel/index.vue

@@ -323,6 +323,50 @@
                 </p>
               </div>
             </div>
+
+            <div class="sms-panel-subcard sms-panel-subcard--sky rounded-xl p-3 shadow-sm md:p-5">
+              <div class="mb-3 flex items-center gap-2 md:mb-4">
+                <span class="sms-stat-icon sms-stat-icon--sky flex h-8 w-8 items-center justify-center rounded-lg">
+                  <Icon icon="vuesax-linear:card" Size="18px" />
+                </span>
+                <div>
+                  <p class="sms-subcard-title text-sm font-semibold">اطلاعات واریز شارژ پیامک</p>
+                  <p class="sms-panel-subtitle hidden text-xs md:block">
+                    برای همه مشتری‌ها یکسان است و در پاپ‌آپ «شارژ» هدر نمایش داده می‌شود.
+                  </p>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-4">
+                <a-form-item label="شماره کارت" class="sms-compact-field !mb-0">
+                  <BasicInput v-model:value="depositForm.card_number" place-holder="شماره کارت" />
+                </a-form-item>
+                <a-form-item label="شماره شبا" class="sms-compact-field !mb-0">
+                  <BasicInput v-model:value="depositForm.sheba" place-holder="IR..." />
+                </a-form-item>
+                <a-form-item label="نام صاحب حساب" class="sms-compact-field !mb-0 md:col-span-2">
+                  <BasicInput v-model:value="depositForm.account_holder" place-holder="نام صاحب حساب" />
+                </a-form-item>
+                <a-form-item label="متن راهنما" class="sms-compact-field !mb-0 md:col-span-2">
+                  <a-textarea
+                    v-model:value="depositForm.note"
+                    :auto-size="{ minRows: 2, maxRows: 5 }"
+                    placeholder="متن راهنمای واریز"
+                  />
+                </a-form-item>
+              </div>
+              <div class="mt-3 flex justify-end md:mt-4">
+                <BaseButton
+                  type="primary"
+                  size="large"
+                  class="!w-auto shrink-0 whitespace-nowrap"
+                  :loading="depositLoading"
+                  @click="submitDepositInfo"
+                >
+                  ذخیره اطلاعات واریز
+                </BaseButton>
+              </div>
+            </div>
           </div>
         </div>
 
@@ -592,14 +636,18 @@ import {
   getSmsPanelOverview,
   getSmsPanelReport,
   updateSmsBlock,
+  updateSmsDepositInfo,
   updateSmsPrice,
   type SmsPanelChargeReport,
   type SmsPanelOverview,
   type SmsPanelReport
 } from '@/api/smsPanel'
+import { useSmsWalletStore } from '@/store/smsWalletStore'
 import { toJalaliNoTime } from '@core/utils/useDataTime'
 import { message } from 'ant-design-vue'
 
+const smsWalletStore = useSmsWalletStore()
+
 const pageLoading = ref(true)
 const actionLoading = ref(false)
 const blockLoading = ref(false)
@@ -615,6 +663,14 @@ const chargeNote = ref('')
 const pricePerPart = ref<number | null>(null)
 const chargeModalVisible = ref(false)
 
+const depositLoading = ref(false)
+const depositForm = reactive({
+  card_number: '',
+  sheba: '',
+  account_holder: '',
+  note: ''
+})
+
 const reportFrom = ref('')
 const reportTo = ref('')
 const chargeReportFrom = ref('')
@@ -690,6 +746,12 @@ async function loadOverview() {
     overview.value = await getSmsPanelOverview()
     pricePerPart.value = overview.value.wallet.price_per_part || null
     isBlocked.value = overview.value.wallet.is_blocked
+    if (overview.value.deposit) {
+      depositForm.card_number = overview.value.deposit.card_number ?? ''
+      depositForm.sheba = overview.value.deposit.sheba ?? ''
+      depositForm.account_holder = overview.value.deposit.account_holder ?? ''
+      depositForm.note = overview.value.deposit.note ?? ''
+    }
   } catch {
     message.error('خطا در بارگذاری پنل پیامک')
   } finally {
@@ -732,6 +794,30 @@ async function submitCharge() {
   }
 }
 
+async function submitDepositInfo() {
+  depositLoading.value = true
+  try {
+    const res = await updateSmsDepositInfo({
+      card_number: depositForm.card_number.trim(),
+      sheba: depositForm.sheba.trim(),
+      account_holder: depositForm.account_holder.trim(),
+      note: depositForm.note.trim()
+    })
+    message.success(res.message || 'اطلاعات واریز ذخیره شد')
+    if (res.deposit) {
+      depositForm.card_number = res.deposit.card_number ?? ''
+      depositForm.sheba = res.deposit.sheba ?? ''
+      depositForm.account_holder = res.deposit.account_holder ?? ''
+      depositForm.note = res.deposit.note ?? ''
+    }
+    await smsWalletStore.refresh()
+  } catch (e: any) {
+    message.error(e?.response?.data?.message || 'خطا در ذخیره اطلاعات واریز')
+  } finally {
+    depositLoading.value = false
+  }
+}
+
 async function submitPrice() {
   const price = Number(pricePerPart.value ?? 0)
   if (Number.isNaN(price) || price < 0) {

src/store/smsWalletStore.ts

@@ -0,0 +1,55 @@
+import { computed, ref } from 'vue'
+import { getSmsWalletSummary, type SmsDepositInfo } from '@/api/smsPanel'
+import { useUserStore } from '@/store/userStore'
+
+const EMPTY_DEPOSIT: SmsDepositInfo = {
+  card_number: '',
+  sheba: '',
+  account_holder: '',
+  note: ''
+}
+
+/** وضعیت کیف پول پیامک برای نمایش «اعتبار پیامک» در هدر (همه ادمین‌ها). */
+export const useSmsWalletStore = defineStore('smsWallet', () => {
+  const userStore = useUserStore()
+
+  const balance = ref(0)
+  const isBlocked = ref(false)
+  const deposit = ref<SmsDepositInfo>({ ...EMPTY_DEPOSIT })
+  const loaded = ref(false)
+  const loading = ref(false)
+
+  /** ویجت فقط وقتی billing/پنل پیامک فعال است نمایش داده می‌شود. */
+  const visible = computed(() => userStore.smsBillingEnabled)
+
+  async function refresh() {
+    if (!visible.value) {
+      loaded.value = false
+      return
+    }
+    if (loading.value) return
+
+    loading.value = true
+    try {
+      const res = await getSmsWalletSummary()
+      balance.value = res.balance
+      isBlocked.value = res.is_blocked
+      deposit.value = res.deposit ?? { ...EMPTY_DEPOSIT }
+      loaded.value = true
+    } catch {
+      // خطای موجودی نباید مزاحم کاربر شود؛ ویجت در صورت نبود داده مخفی می‌ماند
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    balance,
+    isBlocked,
+    deposit,
+    loaded,
+    loading,
+    visible,
+    refresh
+  }
+})