change transition structure 4

src/pages/dashboard/components/DashboardTradingIncomeSummary.vue

@@ -1,5 +1,8 @@
 <template>
-  <section class="dashboard-income-summary">
+  <section
+    class="dashboard-income-summary"
+    :class="{ 'dashboard-income-summary--sidebar': variant === 'sidebar' }"
+  >
     <DashboardSectionHeader title="خلاصه درآمد معاملات" :help="help" />
 
     <div class="dashboard-income-summary__grid">
@@ -7,7 +10,11 @@
         v-for="row in rows"
         :key="row.key"
         class="dashboard-income-summary__card"
-        :class="{ 'dashboard-income-summary__card--total': row.isTotal }"
+        :class="{
+          'dashboard-income-summary__card--total': row.isTotal,
+          'dashboard-income-summary__card--gold': row.tone === 'gold',
+          'dashboard-income-summary__card--rial': row.tone === 'rial',
+        }"
       >
         <DashboardLabelWithHelp
           v-if="row.help"
@@ -20,8 +27,9 @@
         <p class="dashboard-income-summary__hint">{{ row.hint }}</p>
         <p class="dashboard-income-summary__value">
           <span class="dashboard-income-summary__amount">{{ row.amount }}</span>
-          <span class="dashboard-income-summary__unit">{{ unit }}</span>
+          <span v-if="row.unit" class="dashboard-income-summary__unit">{{ row.unit }}</span>
         </p>
+        <p v-if="row.sub" class="dashboard-income-summary__sub">{{ row.sub }}</p>
       </article>
     </div>
   </section>
@@ -31,51 +39,76 @@
 import { computed } from 'vue'
 import DashboardSectionHeader from '@/pages/dashboard/components/DashboardSectionHeader.vue'
 import DashboardLabelWithHelp from '@/pages/dashboard/components/DashboardLabelWithHelp.vue'
-import {
-  dashboardTradingIncomeSummary,
-  dashboardKpi,
-} from '@/pages/dashboard/dashboardSectionCopy'
+import { dashboardTradingIncomeSummary } from '@/pages/dashboard/dashboardSectionCopy'
 import { DASHBOARD_RIAL_UNIT, formatDashboardAmount } from '@/pages/dashboard/dashboardFormat'
 import type { DashboardFinance } from '@/model/dashboard'
+import type { DashboardHelp } from '@/pages/dashboard/dashboardSectionCopy'
 
-const props = defineProps<{
-  finance?: DashboardFinance | null
-}>()
+const props = withDefaults(
+  defineProps<{
+    finance?: DashboardFinance | null
+    /** standalone: بالای صفحه | sidebar: کنار بخش سود طلایی/ریالی */
+    variant?: 'standalone' | 'sidebar'
+  }>(),
+  { variant: 'standalone' },
+)
 
 const help = dashboardTradingIncomeSummary
-const unit = DASHBOARD_RIAL_UNIT
 
-const priceDiffRial = computed(() => Number(props.finance?.fullPriceSood ?? 0))
-const commissionRial = computed(() =>
-  Number(props.finance?.fullPriceKarmozd ?? props.finance?.fullPriceKaermozd ?? 0)
-)
-const totalRial = computed(() =>
-  Number(props.finance?.totalTradingProfit ?? priceDiffRial.value + commissionRial.value)
-)
+const rialFee = computed(() => Number(props.finance?.profitRial ?? 0))
+const goldFeeGrams = computed(() => Number(props.finance?.profitGoldGrams ?? 0))
+const goldFeeRial = computed(() => Number(props.finance?.profitGoldValueRial ?? 0))
+const totalFeeRial = computed(() => rialFee.value + goldFeeRial.value)
+
+function formatGram(value: number) {
+  return value.toLocaleString('fa-IR', { maximumFractionDigits: 4 })
+}
+
+const rialFeeHelp: DashboardHelp = {
+  description: 'مجموع کارمزدهایی که در معاملات «وزن‌محور» از مبلغ ریالی مشتری کسر شده است.',
+  formula: 'جمع service_charge_price سفارش‌هایی که fee_asset = rial',
+}
+const goldFeeHelp: DashboardHelp = {
+  description: 'مجموع کارمزدهایی که در معاملات «مبلغ‌محور» از طلای مشتری کسر شده است.',
+  formula: 'گرم کارمزد × قیمت روز = معادل ریالی',
+}
+const totalFeeHelp: DashboardHelp = {
+  description: 'جمع کل درآمد کارمزدی فروشگاه در بازه — ریالی مستقیم به‌علاوهٔ معادل ریالی کارمزد طلایی.',
+  formula: 'جمع = کارمزد ریالی + معادل ریالی کارمزد طلایی',
+}
 
 const rows = computed(() => [
   {
-    key: 'priceDiff',
-    label: 'سود اختلاف قیمت',
-    hint: 'فاصله بین قیمت پایه و قیمت مشتری',
-    amount: formatDashboardAmount(priceDiffRial.value),
-    help: dashboardKpi.priceDiffProfit,
+    key: 'rialFee',
+    label: 'کارمزد ریالی',
+    hint: 'کسرشده از مبلغ ریالی معامله',
+    amount: formatDashboardAmount(rialFee.value),
+    unit: DASHBOARD_RIAL_UNIT,
+    sub: undefined as string | undefined,
+    help: rialFeeHelp,
+    tone: 'rial' as const,
     isTotal: false,
   },
   {
-    key: 'commission',
-    label: 'کارمزد',
-    hint: 'درصد یا وزن کارمزد، به ریال',
-    amount: formatDashboardAmount(commissionRial.value),
-    help: dashboardKpi.commission,
+    key: 'goldFee',
+    label: 'کارمزد طلایی',
+    hint: 'کسرشده از وزن طلای معامله',
+    amount: formatGram(goldFeeGrams.value),
+    unit: 'گرم',
+    sub: `معادل ${formatDashboardAmount(goldFeeRial.value)} ${DASHBOARD_RIAL_UNIT}`,
+    help: goldFeeHelp,
+    tone: 'gold' as const,
     isTotal: false,
   },
   {
     key: 'total',
-    label: 'جمع سود',
-    hint: 'اختلاف قیمت + کارمزد',
-    amount: formatDashboardAmount(totalRial.value),
-    help: dashboardKpi.totalTradingProfit,
+    label: 'جمع کارمزد',
+    hint: 'کارمزد ریالی + معادل ریالی طلا',
+    amount: formatDashboardAmount(totalFeeRial.value),
+    unit: DASHBOARD_RIAL_UNIT,
+    sub: undefined as string | undefined,
+    help: totalFeeHelp,
+    tone: undefined,
     isTotal: true,
   },
 ])
@@ -91,29 +124,38 @@ const rows = computed(() => [
   color: var(--admin-text);
 }
 
-.dashboard-income-summary__grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0.5rem;
+.dashboard-income-summary--sidebar {
+  margin-top: 0;
+  height: 100%;
 }
 
-@media (max-width: 640px) {
-  .dashboard-income-summary__grid {
-    grid-template-columns: 1fr;
-  }
+.dashboard-income-summary__grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .dashboard-income-summary__card {
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
-  min-height: 4.75rem;
+  min-height: 4.5rem;
   padding: 0.5rem 0.6rem;
   border-radius: 0.5rem;
   border: 1px solid var(--admin-border);
   background: var(--admin-bg-muted);
 }
 
+.dashboard-income-summary__card--gold {
+  border-color: rgba(245, 158, 11, 0.4);
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.dashboard-income-summary__card--rial {
+  border-color: rgba(14, 165, 233, 0.35);
+  background: rgba(14, 165, 233, 0.1);
+}
+
 .dashboard-income-summary__card--total {
   border-color: rgba(245, 158, 11, 0.4);
   background: rgba(245, 158, 11, 0.1);
@@ -139,6 +181,7 @@ const rows = computed(() => [
   direction: ltr;
   text-align: right;
   unicode-bidi: isolate;
+  color: var(--admin-text);
 }
 
 .dashboard-income-summary__amount {
@@ -159,6 +202,15 @@ const rows = computed(() => [
   color: var(--admin-text-secondary);
 }
 
+.dashboard-income-summary__sub {
+  margin: 0;
+  font-size: 0.6875rem;
+  color: var(--admin-text-secondary);
+  direction: ltr;
+  text-align: right;
+  unicode-bidi: isolate;
+}
+
 html.is-dark {
   .dashboard-income-summary__card--total {
     border-color: rgba(245, 158, 11, 0.45);
@@ -168,5 +220,15 @@ html.is-dark {
   .dashboard-income-summary__card--total .dashboard-income-summary__amount {
     color: #fcd34d;
   }
+
+  .dashboard-income-summary__card--gold {
+    border-color: rgba(245, 158, 11, 0.45);
+    background: rgba(245, 158, 11, 0.14);
+  }
+
+  .dashboard-income-summary__card--rial {
+    border-color: rgba(14, 165, 233, 0.4);
+    background: rgba(14, 165, 233, 0.14);
+  }
 }
 </style>