change transition structure 4

src/pages/dashboard/components/DashboardProfitSplit.vue

@@ -31,6 +31,14 @@
       <span class="dashboard-text-muted text-[11px]">بازهٔ فعال: {{ activeRangeLabel }}</span>
     </div>
 
+    <div class="dashboard-profit-split__body">
+      <!-- سمت راست (RTL): خلاصه درآمد — سه کارت زیر هم -->
+      <aside class="dashboard-profit-split__aside">
+        <DashboardTradingIncomeSummary :finance="finance" variant="sidebar" />
+      </aside>
+
+      <!-- محتوای اصلی -->
+      <div class="dashboard-profit-split__main">
     <a-spin :spinning="loading">
       <!-- دو کارت خلاصه -->
       <div class="dashboard-profit-split__cards">
@@ -110,7 +118,9 @@
           size="small"
         />
       </div>
-    </a-spin>
+      </a-spin>
+      </div>
+    </div>
 
     <!-- سندهای تبدیل سود به طلا -->
     <div class="dashboard-profit-split__sanad mt-3">
@@ -244,6 +254,7 @@ import moment from 'moment-jalaali'
 import { message } from 'ant-design-vue'
 import DashboardSectionHeader from '@/pages/dashboard/components/DashboardSectionHeader.vue'
 import DashboardLabelWithHelp from '@/pages/dashboard/components/DashboardLabelWithHelp.vue'
+import DashboardTradingIncomeSummary from '@/pages/dashboard/components/DashboardTradingIncomeSummary.vue'
 import BasicActionSheet from '@/components/BasicActionSheet.vue'
 import { formatDashboardAmount } from '@/pages/dashboard/dashboardFormat'
 import {
@@ -491,6 +502,27 @@ reloadAll()
   gap: 0.5rem;
 }
 
+.dashboard-profit-split__body {
+  display: grid;
+  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
+  gap: 0.75rem;
+  align-items: start;
+}
+
+@media (max-width: 1024px) {
+  .dashboard-profit-split__body {
+    grid-template-columns: 1fr;
+  }
+}
+
+.dashboard-profit-split__aside {
+  min-width: 0;
+}
+
+.dashboard-profit-split__main {
+  min-width: 0;
+}
+
 .dashboard-profit-split__cards {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));

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 {
+import { dashboardTradingIncomeSummary } from '@/pages/dashboard/dashboardSectionCopy'
-  dashboardTradingIncomeSummary,
-  dashboardKpi,
-} 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<{
+const props = withDefaults(
-  finance?: DashboardFinance | null
+  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 rialFee = computed(() => Number(props.finance?.profitRial ?? 0))
-const commissionRial = computed(() =>
+const goldFeeGrams = computed(() => Number(props.finance?.profitGoldGrams ?? 0))
-  Number(props.finance?.fullPriceKarmozd ?? props.finance?.fullPriceKaermozd ?? 0)
+const goldFeeRial = computed(() => Number(props.finance?.profitGoldValueRial ?? 0))
-)
+const totalFeeRial = computed(() => rialFee.value + goldFeeRial.value)
-const totalRial = computed(() =>
+
-  Number(props.finance?.totalTradingProfit ?? priceDiffRial.value + commissionRial.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',
+    key: 'rialFee',
-    label: 'سود اختلاف قیمت',
+    label: 'کارمزد ریالی',
-    hint: 'فاصله بین قیمت پایه و قیمت مشتری',
+    hint: 'کسرشده از مبلغ ریالی معامله',
-    amount: formatDashboardAmount(priceDiffRial.value),
+    amount: formatDashboardAmount(rialFee.value),
-    help: dashboardKpi.priceDiffProfit,
+    unit: DASHBOARD_RIAL_UNIT,
+    sub: undefined as string | undefined,
+    help: rialFeeHelp,
+    tone: 'rial' as const,
     isTotal: false,
   },
   {
-    key: 'commission',
+    key: 'goldFee',
-    label: 'کارمزد',
+    label: 'کارمزد طلایی',
-    hint: 'درصد یا وزن کارمزد، به ریال',
+    hint: 'کسرشده از وزن طلای معامله',
-    amount: formatDashboardAmount(commissionRial.value),
+    amount: formatGram(goldFeeGrams.value),
-    help: dashboardKpi.commission,
+    unit: 'گرم',
+    sub: `معادل ${formatDashboardAmount(goldFeeRial.value)} ${DASHBOARD_RIAL_UNIT}`,
+    help: goldFeeHelp,
+    tone: 'gold' as const,
     isTotal: false,
   },
   {
     key: 'total',
-    label: 'جمع سود',
+    label: 'جمع کارمزد',
-    hint: 'اختلاف قیمت + کارمزد',
+    hint: 'کارمزد ریالی + معادل ریالی طلا',
-    amount: formatDashboardAmount(totalRial.value),
+    amount: formatDashboardAmount(totalFeeRial.value),
-    help: dashboardKpi.totalTradingProfit,
+    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 {
+.dashboard-income-summary--sidebar {
-  display: grid;
+  margin-top: 0;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  height: 100%;
-  gap: 0.5rem;
 }
 
-@media (max-width: 640px) {
+.dashboard-income-summary__grid {
-  .dashboard-income-summary__grid {
+  display: flex;
-    grid-template-columns: 1fr;
+  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>

src/pages/dashboard/dashboardSectionCopy.ts

@@ -58,8 +58,8 @@ export const dashboardKpi = {
 } as const satisfies Record<string, DashboardHelp>
 
 export const dashboardTradingIncomeSummary = help(
-  'در بازهٔ انتخابی، درآمد معاملات را به دو بخش می‌بینید: سود اختلاف قیمت و کارمزد ریالی. همهٔ مبالغ به ریال هستند (نه تومان).',
+  'تفکیک کارمزد فروشگاه در بازهٔ انتخابی: بخشی از ریال مشتری کسر شده (کارمزد ریالی) و بخشی از طلا (کارمزد طلایی با معادل ریالی). جمع = مجموع هر دو به ریال.',
-  'جمع سود معاملات = سود اختلاف قیمت + کارمزد معاملات'
+  'جمع کارمزد = کارمزد ریالی + (گرم کارمزد طلایی × قیمت روز)'
 )
 
 export const dashboardDateRange = help(

src/pages/dashboard/index.vue

@@ -45,8 +45,6 @@
 
       <DashboardQuickWalletModal v-model:visible="showQuickWallet" />
 
-      <DashboardTradingIncomeSummary :finance="finance" />
-
       <DashboardProfitSplit :unit-price="master?.price" />
 
       <!-- تراز و آمار — ۴ کارت در یک ردیف -->
@@ -447,7 +445,6 @@ import DashboardQuickActionsBar from '@/pages/dashboard/components/DashboardQuic
 import DashboardQuickWalletModal from '@/pages/dashboard/components/DashboardQuickWalletModal.vue'
 import DashboardSectionHeader from '@/pages/dashboard/components/DashboardSectionHeader.vue'
 import DashboardStatCard from '@/pages/dashboard/components/DashboardStatCard.vue'
-import DashboardTradingIncomeSummary from '@/pages/dashboard/components/DashboardTradingIncomeSummary.vue'
 import DashboardProfitSplit from '@/pages/dashboard/components/DashboardProfitSplit.vue'
 import {
   dashboardCharts,