From bbbedc60595f6718ceb8472eba20b6b11bc54a20 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Mon, 19 Oct 2026 21:47:17 +0330
Subject: [PATCH] fix: polish SMS header chip and add deposit info in adm panel
 Tighten the wallet chip layout and let super-admins set charge deposit
 details shown in the header charge modal.

---
 apps/web/src/components/SmsHeaderWallet.vue | 312 ++++++++++++++++----
 apps/web/src/layouts/AppLayout.vue          |   2 +-
 apps/web/src/views/adm/AdmSmsView.vue       |  69 ++++-
 3 files changed, 322 insertions(+), 61 deletions(-)

diff --git a/apps/web/src/components/SmsHeaderWallet.vue b/apps/web/src/components/SmsHeaderWallet.vue
index 3420214..15a4191 100644
--- a/apps/web/src/components/SmsHeaderWallet.vue
+++ b/apps/web/src/components/SmsHeaderWallet.vue
@@ -10,6 +10,7 @@ const summary = ref<SmsWalletSummaryDto | null>(null);
 const loading = ref(false);
 const chargeOpen = ref(false);
 const warnOpen = ref(false);
+const copyHint = ref('');
 const NEGATIVE_KEY = 'mento_sms_negative_warning_shown';
 
 const visible = computed(() => Boolean(summary.value?.billingEnabled));
@@ -27,6 +28,42 @@ const toneClass = computed(() => {
   return 'ok';
 });
 
+const chargeInfo = computed(() => summary.value?.chargeInfo ?? null);
+
+function normalizeCopyText(value: string) {
+  const persianDigits = '۰۱۲۳۴۵۶۷۸۹';
+  const arabicDigits = '٠١٢٣٤٥٦٧٨٩';
+  return value
+    .replace(/[\u06F0-\u06F9]/g, (digit) => String(persianDigits.indexOf(digit)))
+    .replace(/[\u0660-\u0669]/g, (digit) => String(arabicDigits.indexOf(digit)))
+    .replace(/\s+/g, '');
+}
+
+function formatCardDisplay(value: string) {
+  const digits = normalizeCopyText(value);
+  if (!digits) return '—';
+  return digits.replace(/(\d{4})(?=\d)/g, '$1 ').trim();
+}
+
+async function copyValue(label: string, value: string) {
+  const text = normalizeCopyText(value);
+  if (!text) {
+    copyHint.value = `${label} ثبت نشده است`;
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(text);
+    copyHint.value = `${label} کپی شد`;
+  } catch {
+    copyHint.value = 'کپی انجام نشد';
+  }
+}
+
+function closeCharge() {
+  chargeOpen.value = false;
+  copyHint.value = '';
+}
+
 async function load() {
   if (!auth.isAuthenticated || !auth.user?.organizationId) {
     summary.value = null;
@@ -79,39 +116,58 @@ defineExpose({ refresh: load });
 
 <template>
   <div v-if="visible" class="sms-wallet">
-    <div class="chip" :class="toneClass" :title="loading ? '…' : undefined">
-      <span>اعتبار پیامک: {{ balanceLabel }} ریال</span>
+    <div
+      class="chip"
+      :class="toneClass"
+      :title="loading ? '…' : `اعتبار پیامک: ${balanceLabel} ریال`"
+    >
+      <span class="label">پیامک</span>
+      <span class="amount">{{ balanceLabel }}</span>
       <button type="button" class="charge" @click="chargeOpen = true">شارژ</button>
     </div>
 
     <div v-if="chargeOpen" class="layer">
-      <div class="backdrop" @click="chargeOpen = false" />
-      <div class="modal" role="dialog" aria-label="شارژ پیامک">
+      <div class="backdrop" @click="closeCharge" />
+      <div class="modal charge-modal" role="dialog" aria-label="شارژ پیامک">
         <header>
           <strong>شارژ اعتبار پیامک</strong>
-          <button type="button" class="x" @click="chargeOpen = false">×</button>
+          <button type="button" class="x" @click="closeCharge">×</button>
         </header>
-        <p class="muted">
-          برای شارژ با پشتیبانی هماهنگ کنید یا فیش واریز را ارسال کنید.
-        </p>
-        <template v-if="summary?.chargeInfo">
-          <dl>
-            <div v-if="summary.chargeInfo.card">
-              <dt>کارت</dt>
-              <dd dir="ltr">{{ summary.chargeInfo.card }}</dd>
+
+        <div v-if="chargeInfo" class="charge-body">
+          <div class="instruction-box">
+            <p>{{ chargeInfo.instruction }}</p>
+          </div>
+
+          <div class="info-card">
+            <div class="info-head">
+              <span>شماره کارت</span>
+              <button type="button" class="copy violet" @click="copyValue('شماره کارت', chargeInfo.card)">
+                کپی
+              </button>
             </div>
-            <div v-if="summary.chargeInfo.iban">
-              <dt>شبا</dt>
-              <dd dir="ltr">{{ summary.chargeInfo.iban }}</dd>
+            <p class="mono" dir="ltr">{{ formatCardDisplay(chargeInfo.card) }}</p>
+          </div>
+
+          <div class="info-card">
+            <div class="info-head">
+              <span>شماره شبا</span>
+              <button type="button" class="copy emerald" @click="copyValue('شماره شبا', chargeInfo.iban)">
+                کپی
+              </button>
             </div>
-            <div v-if="summary.chargeInfo.accountHolder">
-              <dt>صاحب حساب</dt>
-              <dd>{{ summary.chargeInfo.accountHolder }}</dd>
-            </div>
-          </dl>
-          <p class="instruction">{{ summary.chargeInfo.instruction }}</p>
-        </template>
-        <button type="button" class="ok" @click="chargeOpen = false">متوجه شدم</button>
+            <p class="mono" dir="ltr">{{ chargeInfo.iban || '—' }}</p>
+          </div>
+
+          <div class="info-card muted-card">
+            <span class="small">به نام</span>
+            <p class="holder">{{ chargeInfo.accountHolder || '—' }}</p>
+          </div>
+
+          <p v-if="copyHint" class="copy-hint">{{ copyHint }}</p>
+        </div>
+
+        <p v-else class="muted">اطلاعات واریز در دسترس نیست.</p>
       </div>
     </div>
 
@@ -134,45 +190,88 @@ defineExpose({ refresh: load });
 </template>
 
 <style scoped>
-.chip {
-  display: flex;
+.sms-wallet {
+  display: inline-flex;
   align-items: center;
-  gap: 0.45rem;
-  white-space: nowrap;
-  border-radius: 12px;
-  border: 1px solid #a7f3d0;
-  background: rgba(236, 253, 245, 0.7);
-  padding: 0.35rem 0.65rem;
-  font-size: 0.82rem;
-  font-weight: 600;
-  color: #065f46;
+  flex-shrink: 0;
 }
+
+/* چیپ جمع‌وجور؛ دکمه شارژ سمت چپ، برچسب سمت راست */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 31px;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 4px 0 2px;
+  border: 1px solid #a7f3d0;
+  border-radius: 10px;
+  background: color-mix(in srgb, #ecfdf5 70%, #fff);
+  color: #065f46;
+  font-size: 0.75rem;
+  line-height: 1;
+  white-space: nowrap;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
 .chip.warning {
   border-color: #fde68a;
-  background: rgba(255, 251, 235, 0.85);
+  background: color-mix(in srgb, #fffbeb 75%, #fff);
   color: #92400e;
 }
+
 .chip.critical,
 .chip.negative {
   border-color: #fecaca;
-  background: rgba(254, 242, 242, 0.9);
+  background: color-mix(in srgb, #fef2f2 75%, #fff);
   color: #991b1b;
 }
+
+.label {
+  font-weight: 600;
+  font-size: 0.7rem;
+  opacity: 0.72;
+}
+
+.amount {
+  font-weight: 800;
+  letter-spacing: -0.01em;
+}
+
 .charge {
-  border: 0;
-  background: #059669;
-  color: #fff;
-  border-radius: 8px;
-  padding: 0.2rem 0.55rem;
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 23px;
+  margin: 0;
+  padding: 0 6px;
+  border: 1px solid #e2e8f0;
+  border-radius: 7px;
+  background: #fff;
+  color: #334155;
   font: inherit;
-  font-size: 0.78rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  line-height: 1;
   cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
 }
-.chip.critical .charge,
-.chip.negative .charge,
-.chip.warning .charge {
-  background: #b45309;
+
+.charge:hover {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+  color: #0f172a;
 }
+
+.charge:active {
+  background: #f1f5f9;
+}
+
 .layer {
   position: fixed;
   inset: 0;
@@ -180,26 +279,34 @@ defineExpose({ refresh: load });
   display: grid;
   place-items: center;
 }
+
 .backdrop {
   position: absolute;
   inset: 0;
   background: rgba(15, 23, 42, 0.35);
 }
+
 .modal {
   position: relative;
   width: min(420px, calc(100vw - 2rem));
+  max-height: min(90vh, 640px);
+  overflow: auto;
   background: #fff;
   border-radius: 16px;
-  padding: 1rem 1.1rem;
+  padding: 1rem 1.1rem 1.15rem;
   display: grid;
   gap: 0.75rem;
   box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
 }
+
 .modal header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding-bottom: 0.35rem;
+  border-bottom: 1px solid #f3f4f6;
 }
+
 .x {
   border: 0;
   background: transparent;
@@ -207,33 +314,120 @@ defineExpose({ refresh: load });
   cursor: pointer;
   line-height: 1;
 }
-.muted,
-.instruction {
+
+.muted {
   margin: 0;
   color: var(--muted);
   font-size: 0.9rem;
   line-height: 1.6;
+  text-align: center;
+  padding: 1rem 0;
 }
-dl {
-  margin: 0;
+
+.charge-body {
   display: grid;
-  gap: 0.45rem;
+  gap: 0.65rem;
 }
-dl > div {
+
+.instruction-box {
+  border: 1px solid #e0f2fe;
+  border-radius: 14px;
+  background: linear-gradient(145deg, #f0f9ff, #fff);
+  padding: 0.85rem 0.95rem;
+}
+
+.instruction-box p {
+  margin: 0;
+  color: #475569;
+  font-size: 0.88rem;
+  line-height: 1.75;
+}
+
+.info-card {
+  border: 1px solid #f3f4f6;
+  border-radius: 12px;
+  background: #fff;
+  padding: 0.75rem 0.85rem;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.info-card.muted-card {
+  background: #f8fafc;
+}
+
+.info-head {
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  gap: 0.75rem;
-  font-size: 0.9rem;
+  gap: 0.5rem;
+  margin-bottom: 0.4rem;
 }
-dt {
-  color: var(--muted);
+
+.info-head > span,
+.small {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #64748b;
 }
+
+.mono {
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 1rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  color: #0f172a;
+  word-break: break-all;
+}
+
+.holder {
+  margin: 0.15rem 0 0;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.copy {
+  border: 0;
+  border-radius: 8px;
+  padding: 0.25rem 0.55rem;
+  font: inherit;
+  font-size: 0.72rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.copy.violet {
+  background: #f5f3ff;
+  color: #6d28d9;
+}
+
+.copy.violet:hover {
+  background: #ede9fe;
+}
+
+.copy.emerald {
+  background: #ecfdf5;
+  color: #047857;
+}
+
+.copy.emerald:hover {
+  background: #d1fae5;
+}
+
+.copy-hint {
+  margin: 0;
+  text-align: center;
+  font-size: 0.8rem;
+  color: #0f766e;
+  font-weight: 600;
+}
+
 .ok {
   border: 0;
   background: #0f766e;
   color: #fff;
   border-radius: 10px;
-  padding: 0.55rem 0.9rem;
+  padding: 0.45rem 0.9rem;
   font: inherit;
   cursor: pointer;
 }
diff --git a/apps/web/src/layouts/AppLayout.vue b/apps/web/src/layouts/AppLayout.vue
index 306528c..7e42ca0 100644
--- a/apps/web/src/layouts/AppLayout.vue
+++ b/apps/web/src/layouts/AppLayout.vue
@@ -807,7 +807,6 @@ onUnmounted(() => {
         </form>
 
         <div class="topbar-actions">
-          <SmsHeaderWallet />
           <RouterLink class="round-btn accent" :to="{ name: 'notes' }" title="هوش مصنوعی">
             <UiIcon name="sparkle" :size="18" />
           </RouterLink>
@@ -821,6 +820,7 @@ onUnmounted(() => {
           <RouterLink class="round-btn" :to="{ name: 'tickets' }" title="پیام‌ها">
             <UiIcon name="mail" :size="18" />
           </RouterLink>
+          <SmsHeaderWallet />
           <div
             v-if="subscription"
             class="sub-chip"
diff --git a/apps/web/src/views/adm/AdmSmsView.vue b/apps/web/src/views/adm/AdmSmsView.vue
index 4487811..dbed368 100644
--- a/apps/web/src/views/adm/AdmSmsView.vue
+++ b/apps/web/src/views/adm/AdmSmsView.vue
@@ -25,6 +25,10 @@ const ownUser = ref('');
 const ownPass = ref('');
 const ownFrom = ref('');
 const ownType = ref('0098');
+const depositCard = ref('');
+const depositIban = ref('');
+const depositHolder = ref('');
+const depositInstruction = ref('');
 
 function formatRials(n: number) {
   return toFaDigits(new Intl.NumberFormat('fa-IR').format(n)) + ' ریال';
@@ -51,6 +55,10 @@ async function loadOverview(orgId: string) {
   ownPass.value = '';
   ownFrom.value = data.account.ownPanelFrom || '';
   ownType.value = data.account.ownPanelType || '0098';
+  depositCard.value = data.chargeInfo.card || '';
+  depositIban.value = data.chargeInfo.iban || '';
+  depositHolder.value = data.chargeInfo.accountHolder || '';
+  depositInstruction.value = data.chargeInfo.instruction || '';
 }
 
 async function load() {
@@ -155,6 +163,18 @@ function saveOwnPanel() {
   });
 }
 
+function saveDepositInfo() {
+  if (!selectedId.value) return;
+  void runSave(async () => {
+    await platformApi.patch(`/platform/sms/organizations/${selectedId.value}`, {
+      chargeCard: depositCard.value.trim() || null,
+      chargeIban: depositIban.value.trim() || null,
+      chargeHolder: depositHolder.value.trim() || null,
+      chargeInstruction: depositInstruction.value.trim() || null,
+    });
+  });
+}
+
 watch(
   () => route.query.org,
   () => {
@@ -307,6 +327,34 @@ onMounted(() => {
               </button>
             </template>
           </div>
+
+          <div class="panel deposit-panel">
+            <h3>اطلاعات واریز شارژ</h3>
+            <p class="hint">نمایش در مودال «شارژ» هدر برای همه مدیران این محیط</p>
+            <label class="field">
+              <span>شماره کارت</span>
+              <input v-model="depositCard" type="text" dir="ltr" placeholder="مثلاً 6219…" />
+            </label>
+            <label class="field">
+              <span>شماره شبا</span>
+              <input v-model="depositIban" type="text" dir="ltr" placeholder="IR…" />
+            </label>
+            <label class="field">
+              <span>به نام</span>
+              <input v-model="depositHolder" type="text" placeholder="صاحب حساب" />
+            </label>
+            <label class="field">
+              <span>متن راهنما</span>
+              <textarea
+                v-model="depositInstruction"
+                rows="3"
+                placeholder="متن راهنمای واریز برای مدیران"
+              />
+            </label>
+            <button type="button" class="btn btn-primary" :disabled="saving" @click="saveDepositInfo">
+              ذخیره
+            </button>
+          </div>
         </div>
 
         <div class="tables">
@@ -393,13 +441,32 @@ onMounted(() => {
 }
 .list-head input,
 .panel input,
-.panel select {
+.panel select,
+.panel textarea {
   width: 100%;
   border: 1px solid var(--line);
   border-radius: 10px;
   padding: 0.55rem 0.7rem;
   font: inherit;
 }
+.panel textarea {
+  resize: vertical;
+  min-height: 4.5rem;
+}
+.deposit-panel {
+  grid-column: 1 / -1;
+  background: color-mix(in srgb, #ede9fe 35%, #fff);
+  border-color: #ddd6fe;
+}
+.field {
+  display: grid;
+  gap: 0.3rem;
+}
+.field > span {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: #475569;
+}
 .tenant {
   width: 100%;
   text-align: start;