change transition structure 4

2026-07-11 00:35:37 +03:30
parent 4bc9476d59
commit 303f3f0fca
4 changed files with 138 additions and 47 deletions
@@ -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));
@@ -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>
@@ -58,8 +58,8 @@ export const dashboardKpi = {
 } as const satisfies Record<string, DashboardHelp>

 export const dashboardTradingIncomeSummary = help(
-  'در بازهٔ انتخابی، درآمد معاملات را به دو بخش می‌بینید: سود اختلاف قیمت و کارمزد ریالی. همهٔ مبالغ به ریال هستند (نه تومان).',
-  'جمع سود معاملات = سود اختلاف قیمت + کارمزد معاملات'
+  'تفکیک کارمزد فروشگاه در بازهٔ انتخابی: بخشی از ریال مشتری کسر شده (کارمزد ریالی) و بخشی از طلا (کارمزد طلایی با معادل ریالی). جمع = مجموع هر دو به ریال.',
+  'جمع کارمزد = کارمزد ریالی + (گرم کارمزد طلایی × قیمت روز)'
 )

 export const dashboardDateRange = help(
@@ -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,