added charge for all products 2

src/components/BasicActionSheet.vue

@@ -60,6 +60,9 @@
       <div class="flex cursor-pointer justify-center pt-2" @click="visibleProxy = false">
         <span class="w-12 rounded-sm border-t-2 border-t-solid border-t-gray-500"></span>
       </div>
+      <div v-if="title" class="basic-action-sheet__header">
+        <h3 class="basic-action-sheet__title">{{ title }}</h3>
+      </div>
       <div class="basic-action-sheet__content">
         <slot />
       </div>
@@ -167,7 +170,8 @@ function handleOk() {
 .basic-action-sheet {
   .ant-drawer-content {
     border-radius: 16px 16px 0 0;
-    overflow: hidden;
+    overflow-x: visible;
+    overflow-y: hidden;
   }
 
   .ant-drawer-body {
@@ -185,10 +189,27 @@ function handleOk() {
 
 .basic-action-sheet__content {
   flex: 1;
+  min-width: 0;
   overflow-y: auto;
   padding: 0 16px 12px;
 }
 
+.basic-action-sheet__header {
+  flex: 0 0 auto;
+  padding: 8px 16px 12px;
+  border-bottom: 1px solid var(--admin-border);
+  background: var(--admin-bg-elevated);
+}
+
+.basic-action-sheet__title {
+  margin: 0;
+  color: var(--admin-text);
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.6;
+  text-align: right;
+}
+
 .basic-action-sheet--compact {
   .ant-drawer-content-wrapper {
     height: auto !important;
@@ -209,7 +230,7 @@ function handleOk() {
 
 .basic-action-sheet__container--compact .basic-action-sheet__content {
   flex: 0 1 auto;
-  max-height: calc(88vh - 40px);
+  max-height: calc(88vh - 92px);
 }
 
 .basic-action-sheet__footer {

src/components/customer/CustomerWalletBalancePanel.vue

@@ -1,8 +1,14 @@
 <template>
-  <div class="customer-wallet-balance" :class="compact ? 'space-y-1.5' : 'space-y-3'">
+  <div
+    class="customer-wallet-balance"
+    :class="[
+      compact ? 'customer-wallet-balance--compact space-y-1.5' : 'space-y-3',
+      layout === 'sidebar' ? 'customer-wallet-balance--sidebar' : '',
+    ]"
+  >
     <div
       v-if="loading"
-      class="rounded-xl border border-gray-200 bg-gray-50 text-center text-sm text-gray-500"
+      class="customer-wallet-balance__placeholder rounded-xl text-center text-sm"
       :class="compact ? 'px-3 py-3' : 'px-4 py-6'"
     >
       در حال بارگذاری موجودی…
@@ -16,24 +22,30 @@
       {{ error }}
     </div>
 
-    <div v-else-if="summary && compact" class="customer-wallet-balance__minimal">
+    <div
+      v-else-if="summary && compact"
+      ref="minimalTrackRef"
+      class="customer-wallet-balance__minimal-track"
+    >
+      <div class="customer-wallet-balance__minimal">
       <template v-if="chargeTargets.length">
-        <button
+        <component
+          :is="interactive ? 'button' : 'div'"
           v-for="target in chargeTargets"
           :key="target.key"
-          type="button"
+          :type="interactive ? 'button' : undefined"
           class="customer-wallet-balance__minimal-item"
           :class="[
             targetToneClass(target),
             { 'customer-wallet-balance__minimal-item--inactive': target.active === false },
-            { 'customer-wallet-balance__minimal-item--selected': target.key === selectedChargeKey },
+            { 'customer-wallet-balance__minimal-item--selected': interactive && target.key === selectedChargeKey },
           ]"
           :title="target.label"
-          @click="emit('selectChargeTarget', target.key)"
+          @click="interactive ? emit('selectChargeTarget', target.key) : undefined"
         >
           <span class="customer-wallet-balance__minimal-label">{{ minimalTargetLabel(target) }}</span>
           <span class="customer-wallet-balance__minimal-value">{{ balanceForTarget(target) }}</span>
-        </button>
+        </component>
       </template>
       <template v-else>
         <div
@@ -50,68 +62,83 @@
           <span class="customer-wallet-balance__minimal-value">{{ usePrice(summary.cash_wallet ?? 0, true, '') }}</span>
         </div>
       </template>
+      </div>
     </div>
 
-    <template v-else-if="summary">
-      <div
-        v-for="metal in summary.metal_totals"
-        :key="metal.metal_id"
-        class="overflow-hidden rounded-xl border border-gray-200"
-      >
-        <div class="flex items-center justify-between gap-3 bg-emerald-50 px-4 py-3">
-          <div class="flex min-w-0 items-center gap-2">
-            <BaseIcon icon="vuesax-linear:coin" size="18" color="#15803d" />
-            <span class="truncate font-700 text-emerald-900">{{ metal.label }}</span>
-          </div>
-          <span class="shrink-0 font-800 text-emerald-800">{{ formatMetalTotal(metal) }}</span>
-        </div>
+    <div v-else-if="summary" class="customer-wallet-balance__full">
+      <p v-if="layout === 'sidebar'" class="customer-wallet-balance__sidebar-title">موجودی دارایی‌ها</p>
+      <div class="customer-wallet-balance__overview">
+        <article
+          v-for="metal in summary.metal_totals"
+          :key="metal.metal_id"
+          class="customer-wallet-balance__summary-card"
+          :class="groupToneClass(metal.metal_id)"
+        >
+          <span class="customer-wallet-balance__summary-label">{{ minimalMetalLabel(metal) }}</span>
+          <span class="customer-wallet-balance__summary-value">{{ formatMetalTotal(metal) }}</span>
+        </article>
 
-        <div v-if="linesForMetal(metal.metal_id).length" class="divide-y divide-gray-100 bg-white">
-          <div
-            v-for="line in linesForMetal(metal.metal_id)"
-            :key="line.key"
-            class="flex items-center justify-between gap-3 px-4 py-2.5 text-sm"
-          >
-            <span class="min-w-0 truncate text-gray-600">{{ line.label }}</span>
-            <span class="shrink-0 font-600 text-gray-900">{{ line.value }}</span>
-          </div>
-        </div>
+        <article class="customer-wallet-balance__summary-card customer-wallet-balance__group--cash">
+          <span class="customer-wallet-balance__summary-label">ریالی</span>
+          <span class="customer-wallet-balance__summary-value">{{ usePrice(summary.total_rial_value ?? 0, true, '') }}</span>
+        </article>
       </div>
 
-      <div class="overflow-hidden rounded-xl border border-gray-200">
-        <div class="flex items-center justify-between gap-3 bg-sky-50 px-4 py-3">
-          <div class="flex items-center gap-2">
-            <BaseIcon icon="vuesax-linear:empty-wallet" size="18" color="#0369a1" />
-            <span class="font-700 text-sky-900">کل دارایی ریالی</span>
-          </div>
-          <span class="font-800 text-sky-800">{{ usePrice(summary.total_rial_value ?? 0, true, '') }}</span>
-        </div>
+      <div class="customer-wallet-balance__details">
+        <div class="customer-wallet-balance__details-title">جزئیات موجودی</div>
 
-        <div class="divide-y divide-gray-100 bg-white">
-          <div class="flex items-center justify-between gap-3 px-4 py-2.5 text-sm">
-            <span class="text-gray-600">کیف پول ریالی</span>
-            <span class="font-600">{{ usePrice(summary.cash_wallet ?? 0, true, '') }}</span>
+        <template v-for="metal in summary.metal_totals" :key="`detail-${metal.metal_id}`">
+          <section
+            v-if="linesForMetal(metal.metal_id).length"
+            class="customer-wallet-balance__detail-group"
+            :class="groupToneClass(metal.metal_id)"
+          >
+            <div class="customer-wallet-balance__detail-group-title">
+              <span class="customer-wallet-balance__group-dot" aria-hidden="true" />
+              <span>{{ metal.label }}</span>
+            </div>
+            <div
+              v-for="line in linesForMetal(metal.metal_id)"
+              :key="line.key"
+              class="customer-wallet-balance__detail-row"
+              :class="{ 'customer-wallet-balance__detail-row--strong': line.key === 'total' }"
+            >
+              <span class="customer-wallet-balance__detail-label">{{ line.label }}</span>
+              <span class="customer-wallet-balance__detail-value">{{ line.value }}</span>
+            </div>
+          </section>
+        </template>
+
+        <section class="customer-wallet-balance__detail-group customer-wallet-balance__group--cash">
+          <div class="customer-wallet-balance__detail-group-title">
+            <span class="customer-wallet-balance__group-dot" aria-hidden="true" />
+            <span>دارایی ریالی</span>
+          </div>
+          <div class="customer-wallet-balance__detail-row">
+            <span class="customer-wallet-balance__detail-label">کیف پول ریالی</span>
+            <span class="customer-wallet-balance__detail-value">{{ usePrice(summary.cash_wallet ?? 0, true, '') }}</span>
           </div>
           <div
             v-if="Number(summary.assets_rial_value ?? 0) > 0"
-            class="flex items-center justify-between gap-3 px-4 py-2.5 text-sm"
+            class="customer-wallet-balance__detail-row"
           >
-            <span class="text-gray-600">ارزش ریالی فلزات</span>
-            <span class="font-600">{{ usePrice(summary.assets_rial_value ?? 0, true, '') }}</span>
+            <span class="customer-wallet-balance__detail-label">ارزش ریالی فلزات</span>
+            <span class="customer-wallet-balance__detail-value">{{ usePrice(summary.assets_rial_value ?? 0, true, '') }}</span>
           </div>
-          <div class="flex items-center justify-between gap-3 px-4 py-2.5 text-sm font-700">
-            <span>مجموع کل</span>
-            <span>{{ usePrice(summary.total_rial_value ?? 0, true, '') }}</span>
+          <div class="customer-wallet-balance__detail-row customer-wallet-balance__detail-row--strong">
+            <span class="customer-wallet-balance__detail-label">مجموع کل</span>
+            <span class="customer-wallet-balance__detail-value">{{ usePrice(summary.total_rial_value ?? 0, true, '') }}</span>
           </div>
-        </div>
+        </section>
       </div>
-    </template>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { getCustomerAssetsSummary } from '@/api/customer'
+import { useHorizontalTouchScroll } from '@/components/mobile/composables/useHorizontalTouchScroll'
 import type { ChargeTarget } from '@/model/wallet'
 import type { WalletAssetsSummary, WalletInventoryCard, WalletMetalTotal } from '@/model/walletAssets'
 import { usePrice } from '@core/utils/usePrice'
@@ -122,14 +149,20 @@ const props = withDefaults(
     customerId?: number | null
     /** نمایش مینیمال برای مودال‌ها */
     compact?: boolean
+    /** چیدمان ستون کناری در اطلاعات کاربر */
+    layout?: 'default' | 'sidebar'
     /** گزینه‌های شارژ — برای نمایش موجودی هر محصول */
     chargeTargets?: ChargeTarget[]
     selectedChargeKey?: string
+    /** false = فقط نمایش، بدون کلیک */
+    interactive?: boolean
   }>(),
   {
     compact: false,
+    layout: 'default',
     chargeTargets: () => [],
     selectedChargeKey: '',
+    interactive: true,
   },
 )
 
@@ -167,9 +200,23 @@ function minimalMetalToneClass(metal: WalletMetalTotal) {
 
 function minimalTargetLabel(target: ChargeTarget) {
   if (target.kind === 'money') return 'نقدی'
-  const label = target.label.replace(/\s*\(کیف اصلی\)\s*$/u, '').trim()
-  if (label.length <= 14) return label
-  return `${label.slice(0, 13)}…`
+  return target.label
+    .replace(/\s*\(کیف اصلی\)\s*$/u, '')
+    .replace(/\s*\(غیرفعال\)\s*$/u, '')
+    .trim()
+}
+
+function groupToneClass(metalId: number | string | undefined) {
+  switch (Number(metalId)) {
+    case 1:
+      return 'customer-wallet-balance__group--gold'
+    case 2:
+      return 'customer-wallet-balance__group--silver'
+    case 3:
+      return 'customer-wallet-balance__group--copper'
+    default:
+      return 'customer-wallet-balance__group--product'
+  }
 }
 
 function targetToneClass(target: ChargeTarget) {
@@ -210,6 +257,9 @@ function balanceForTarget(target: ChargeTarget) {
 const loading = ref(false)
 const error = ref<string | null>(null)
 const summary = ref<WalletAssetsSummary | null>(null)
+const minimalTrackRef = ref<HTMLElement | null>(null)
+
+useHorizontalTouchScroll(minimalTrackRef)
 
 watch(
   () => props.customerId,
@@ -287,36 +337,262 @@ defineExpose({ reload: () => props.customerId && load(props.customerId) })
 </script>
 
 <style scoped>
-.customer-wallet-balance__minimal {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
-  gap: 0.35rem;
-  padding: 0.45rem;
-  border-radius: 0.6rem;
-  border: 1px solid #e2e8f0;
-  background: #f8fafc;
-  max-height: 14rem;
+.customer-wallet-balance--compact {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.customer-wallet-balance__placeholder {
+  border: 1px solid var(--admin-border, #e2e8f0);
+  background: var(--admin-bg-muted, #f8fafc);
+  color: var(--admin-text-secondary, #64748b);
+}
+
+/* ---------- نمای کامل (خلاصه + جزئیات) ---------- */
+
+.customer-wallet-balance__full {
+  width: 100%;
+  min-width: 0;
+}
+
+.customer-wallet-balance--sidebar .customer-wallet-balance__full {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.customer-wallet-balance__sidebar-title {
+  margin: 0;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--admin-text-secondary, #64748b);
+}
+
+.customer-wallet-balance--sidebar .customer-wallet-balance__overview {
+  grid-template-columns: 1fr;
+}
+
+.customer-wallet-balance--sidebar .customer-wallet-balance__details {
+  max-height: min(52vh, 26rem);
   overflow-y: auto;
 }
 
-.customer-wallet-balance__minimal-item {
+.customer-wallet-balance__overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
+  gap: 0.5rem;
+}
+
+.customer-wallet-balance__summary-card {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.1rem;
   min-width: 0;
-  padding: 0.35rem 0.25rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+  border-radius: 0.65rem;
+  border: 1px solid color-mix(in srgb, var(--wallet-accent, #94a3b8) 28%, transparent);
+  background: color-mix(in srgb, var(--wallet-accent, #94a3b8) 10%, var(--admin-bg-elevated, #fff));
+  padding: 0.55rem 0.7rem;
+}
+
+.customer-wallet-balance__summary-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--admin-text-secondary, #64748b);
+}
+
+.customer-wallet-balance__summary-value {
+  flex: 0 0 auto;
+  font-size: 0.8125rem;
+  font-weight: 800;
+  color: var(--wallet-accent-strong, var(--admin-text, #0f172a));
+  white-space: nowrap;
+}
+
+.customer-wallet-balance__details {
+  margin-top: 0.6rem;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  border: 1px solid var(--admin-border, #e2e8f0);
+  background: var(--admin-bg-elevated, #fff);
+}
+
+.customer-wallet-balance__details-title {
+  padding: 0.55rem 0.8rem;
+  border-bottom: 1px solid var(--admin-border, #e2e8f0);
+  color: var(--admin-text-secondary, #64748b);
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.customer-wallet-balance__detail-group + .customer-wallet-balance__detail-group {
+  border-top: 1px solid var(--admin-border, #e2e8f0);
+}
+
+.customer-wallet-balance__detail-group-title {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.55rem 0.8rem 0.25rem;
+  color: var(--admin-text, #0f172a);
+  font-size: 0.75rem;
+  font-weight: 800;
+}
+
+.customer-wallet-balance__group-dot {
+  width: 0.45rem;
+  height: 0.45rem;
+  flex: 0 0 auto;
+  border-radius: 9999px;
+  background: var(--wallet-accent, var(--admin-text-secondary, #94a3b8));
+}
+
+.customer-wallet-balance__detail-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.45rem 0.8rem;
+  font-size: 0.8125rem;
+}
+
+.customer-wallet-balance__detail-row + .customer-wallet-balance__detail-row {
+  border-top: 1px solid color-mix(in srgb, var(--admin-border, #e2e8f0) 70%, transparent);
+}
+
+.customer-wallet-balance__detail-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--admin-text-secondary, #64748b);
+}
+
+.customer-wallet-balance__detail-value {
+  font-weight: 600;
+  color: var(--admin-text, #0f172a);
+  white-space: nowrap;
+}
+
+.customer-wallet-balance__detail-row--strong {
+  background: color-mix(in srgb, var(--wallet-accent, #94a3b8) 8%, transparent);
+}
+
+.customer-wallet-balance__detail-row--strong .customer-wallet-balance__detail-label,
+.customer-wallet-balance__detail-row--strong .customer-wallet-balance__detail-value {
+  font-weight: 800;
+  color: var(--admin-text, #0f172a);
+}
+
+.customer-wallet-balance__group--gold {
+  --wallet-accent: #d97706;
+  --wallet-accent-strong: #b45309;
+}
+
+.customer-wallet-balance__group--silver {
+  --wallet-accent: #64748b;
+  --wallet-accent-strong: #475569;
+}
+
+.customer-wallet-balance__group--copper {
+  --wallet-accent: #ea580c;
+  --wallet-accent-strong: #c2410c;
+}
+
+.customer-wallet-balance__group--cash {
+  --wallet-accent: #0284c7;
+  --wallet-accent-strong: #0369a1;
+}
+
+.customer-wallet-balance__group--product {
+  --wallet-accent: var(--admin-text-secondary, #64748b);
+  --wallet-accent-strong: var(--admin-text, #0f172a);
+}
+
+:global(html.is-dark) .customer-wallet-balance__group--gold {
+  --wallet-accent: #fbbf24;
+  --wallet-accent-strong: #fcd34d;
+}
+
+:global(html.is-dark) .customer-wallet-balance__group--silver {
+  --wallet-accent: #94a3b8;
+  --wallet-accent-strong: #cbd5e1;
+}
+
+:global(html.is-dark) .customer-wallet-balance__group--copper {
+  --wallet-accent: #fb923c;
+  --wallet-accent-strong: #fdba74;
+}
+
+:global(html.is-dark) .customer-wallet-balance__group--cash {
+  --wallet-accent: #60a5fa;
+  --wallet-accent-strong: #93c5fd;
+}
+
+.customer-wallet-balance__minimal-track {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-x: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--admin-border-strong, #cbd5e1) transparent;
+  padding: 0.45rem 0.35rem;
+  border-radius: 0.6rem;
+  border: 1px solid var(--admin-border, #e2e8f0);
+  background: var(--admin-bg-muted, #f8fafc);
+  direction: ltr;
+}
+
+.customer-wallet-balance__minimal-track::-webkit-scrollbar {
+  height: 0.35rem;
+}
+
+.customer-wallet-balance__minimal-track::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  background: var(--admin-border-strong, #cbd5e1);
+}
+
+.customer-wallet-balance__minimal {
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: 0.35rem;
+  width: max-content;
+  min-width: 100%;
+  direction: rtl;
+}
+
+.customer-wallet-balance__minimal-item {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  flex: 0 0 6.25rem;
+  width: 6.25rem;
+  min-width: 6.25rem;
+  min-height: 4rem;
+  gap: 0.25rem;
+  padding: 0.45rem 0.35rem;
   border-radius: 0.45rem;
-  background: #fff;
+  background: var(--wallet-tile-bg, var(--admin-bg-elevated, #fff));
   text-align: center;
-  border: 1px solid transparent;
+  border: 1px solid var(--wallet-tile-border, var(--admin-border, #e2e8f0));
   cursor: default;
+  box-sizing: border-box;
 }
 
 button.customer-wallet-balance__minimal-item {
   cursor: pointer;
-  transition: box-shadow 0.15s ease, transform 0.15s ease;
+  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
 }
 
 button.customer-wallet-balance__minimal-item:hover {
@@ -324,7 +600,9 @@ button.customer-wallet-balance__minimal-item:hover {
 }
 
 .customer-wallet-balance__minimal-item--selected {
-  box-shadow: 0 0 0 2px #2563eb;
+  border-width: 2px;
+  padding: calc(0.45rem - 1px) calc(0.35rem - 1px);
+  box-shadow: none;
 }
 
 .customer-wallet-balance__minimal-item--inactive {
@@ -332,84 +610,98 @@ button.customer-wallet-balance__minimal-item:hover {
 }
 
 .customer-wallet-balance__minimal-item--gold {
-  background: #fffbeb;
-  border-color: #fde68a;
+  --wallet-tile-bg: #fffbeb;
+  --wallet-tile-border: #fde68a;
+  --wallet-tile-label: #92400e;
+  --wallet-tile-value: #b45309;
 }
 
 .customer-wallet-balance__minimal-item--silver {
-  background: #f8fafc;
-  border-color: #cbd5e1;
+  --wallet-tile-bg: #f8fafc;
+  --wallet-tile-border: #cbd5e1;
+  --wallet-tile-label: #64748b;
+  --wallet-tile-value: #334155;
 }
 
 .customer-wallet-balance__minimal-item--copper {
-  background: #fff7ed;
-  border-color: #fdba74;
+  --wallet-tile-bg: #fff7ed;
+  --wallet-tile-border: #fdba74;
+  --wallet-tile-label: #c2410c;
+  --wallet-tile-value: #9a3412;
 }
 
 .customer-wallet-balance__minimal-item--cash {
-  background: #eff6ff;
-  border-color: #93c5fd;
+  --wallet-tile-bg: #eff6ff;
+  --wallet-tile-border: #93c5fd;
+  --wallet-tile-label: #0369a1;
+  --wallet-tile-value: #0284c7;
 }
 
 .customer-wallet-balance__minimal-item--product {
-  background: #f8fafc;
-  border-color: #e2e8f0;
+  --wallet-tile-bg: var(--admin-bg-elevated, #fff);
+  --wallet-tile-border: var(--admin-border, #e2e8f0);
+  --wallet-tile-label: #475569;
+  --wallet-tile-value: #1e293b;
 }
 
 .customer-wallet-balance__minimal-label {
-  font-size: 0.6875rem;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  align-self: start;
+  min-height: 0;
+  max-height: 2.45em;
+  font-size: 0.625rem;
   font-weight: 600;
-  color: #64748b;
-  max-width: 100%;
+  line-height: 1.25;
+  color: var(--wallet-tile-label, var(--admin-text-secondary, #64748b));
+  width: 100%;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: normal;
+  word-break: break-word;
 }
 
 .customer-wallet-balance__minimal-value {
-  font-size: 0.75rem;
+  align-self: end;
+  font-size: 0.6875rem;
   font-weight: 700;
-  color: #0f172a;
+  line-height: 1.25;
+  color: var(--wallet-tile-value, var(--admin-text, #0f172a));
   white-space: nowrap;
 }
 
-.customer-wallet-balance__minimal-item--gold .customer-wallet-balance__minimal-label {
-  color: #92400e;
+:global(html.is-dark) .customer-wallet-balance__minimal-item--gold {
+  --wallet-tile-bg: rgba(245, 158, 11, 0.14);
+  --wallet-tile-border: rgba(251, 191, 36, 0.28);
+  --wallet-tile-label: #fbbf24;
+  --wallet-tile-value: #fcd34d;
 }
 
-.customer-wallet-balance__minimal-item--gold .customer-wallet-balance__minimal-value {
-  color: #b45309;
+:global(html.is-dark) .customer-wallet-balance__minimal-item--silver {
+  --wallet-tile-bg: rgba(148, 163, 184, 0.12);
+  --wallet-tile-border: rgba(148, 163, 184, 0.28);
+  --wallet-tile-label: #94a3b8;
+  --wallet-tile-value: #cbd5e1;
 }
 
-.customer-wallet-balance__minimal-item--silver .customer-wallet-balance__minimal-label {
-  color: #64748b;
+:global(html.is-dark) .customer-wallet-balance__minimal-item--copper {
+  --wallet-tile-bg: rgba(249, 115, 22, 0.14);
+  --wallet-tile-border: rgba(251, 146, 60, 0.28);
+  --wallet-tile-label: #fb923c;
+  --wallet-tile-value: #fdba74;
 }
 
-.customer-wallet-balance__minimal-item--silver .customer-wallet-balance__minimal-value {
-  color: #334155;
+:global(html.is-dark) .customer-wallet-balance__minimal-item--cash {
+  --wallet-tile-bg: rgba(59, 130, 246, 0.14);
+  --wallet-tile-border: rgba(96, 165, 250, 0.32);
+  --wallet-tile-label: #60a5fa;
+  --wallet-tile-value: #93c5fd;
 }
 
-.customer-wallet-balance__minimal-item--copper .customer-wallet-balance__minimal-label {
-  color: #c2410c;
-}
-
-.customer-wallet-balance__minimal-item--copper .customer-wallet-balance__minimal-value {
-  color: #9a3412;
-}
-
-.customer-wallet-balance__minimal-item--cash .customer-wallet-balance__minimal-label {
-  color: #0369a1;
-}
-
-.customer-wallet-balance__minimal-item--cash .customer-wallet-balance__minimal-value {
-  color: #0284c7;
-}
-
-.customer-wallet-balance__minimal-item--product .customer-wallet-balance__minimal-label {
-  color: #475569;
-}
-
-.customer-wallet-balance__minimal-item--product .customer-wallet-balance__minimal-value {
-  color: #1e293b;
+:global(html.is-dark) .customer-wallet-balance__minimal-item--product {
+  --wallet-tile-bg: rgba(255, 255, 255, 0.04);
+  --wallet-tile-border: var(--admin-border);
+  --wallet-tile-label: var(--admin-text-secondary);
+  --wallet-tile-value: var(--admin-text);
 }
 </style>

src/components/mobile/MobileDetailSheet.vue

@@ -1,12 +1,12 @@
 <template>
   <BasicActionSheet
     v-model:visible="visibleModel"
-    :title="''"
+    :title="title"
     :showButton="false"
     :compact="true"
     :drawerHeight="drawerHeight"
   >
-    <div v-if="item" class="space-y-3 pb-2">
+    <div v-if="item" class="mobile-detail-sheet__body space-y-3 pb-2">
       <slot :item="item" />
     </div>
   </BasicActionSheet>
@@ -36,3 +36,11 @@ const visibleModel = computed({
   set: (value: boolean) => emit('update:visible', value)
 })
 </script>
+
+<style scoped>
+.mobile-detail-sheet__body {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+</style>

src/components/mobile/composables/useHorizontalTouchScroll.ts

@@ -0,0 +1,69 @@
+import { onBeforeUnmount, watch, type Ref } from 'vue'
+
+function bindHorizontalTouchScroll(el: HTMLElement) {
+  let startX = 0
+  let startY = 0
+  let scrollStart = 0
+  let axis: 'x' | 'y' | null = null
+
+  const onTouchStart = (event: TouchEvent) => {
+    if (event.touches.length !== 1) return
+    startX = event.touches[0].clientX
+    startY = event.touches[0].clientY
+    scrollStart = el.scrollLeft
+    axis = null
+  }
+
+  const onTouchMove = (event: TouchEvent) => {
+    if (event.touches.length !== 1) return
+
+    const dx = event.touches[0].clientX - startX
+    const dy = event.touches[0].clientY - startY
+
+    if (!axis) {
+      if (Math.abs(dx) < 4 && Math.abs(dy) < 4) return
+      axis = Math.abs(dx) > Math.abs(dy) ? 'x' : 'y'
+    }
+
+    if (axis !== 'x') return
+
+    event.preventDefault()
+    event.stopPropagation()
+    el.scrollLeft = scrollStart - dx
+  }
+
+  el.addEventListener('touchstart', onTouchStart, { passive: true })
+  el.addEventListener('touchmove', onTouchMove, { passive: false })
+
+  requestAnimationFrame(() => {
+    const max = el.scrollWidth - el.clientWidth
+    if (max > 0) el.scrollLeft = max
+  })
+
+  return () => {
+    el.removeEventListener('touchstart', onTouchStart)
+    el.removeEventListener('touchmove', onTouchMove)
+  }
+}
+
+/**
+ * Reliable horizontal swipe inside RTL pages and nested vertical scroll areas.
+ */
+export function useHorizontalTouchScroll(trackRef: Ref<HTMLElement | null>) {
+  let cleanup: (() => void) | undefined
+
+  watch(
+    trackRef,
+    (el) => {
+      cleanup?.()
+      cleanup = undefined
+      if (!el) return
+      cleanup = bindHorizontalTouchScroll(el)
+    },
+    { flush: 'post' },
+  )
+
+  onBeforeUnmount(() => {
+    cleanup?.()
+  })
+}