boursecu_admin/src/pages/dashboard/components/DashboardTradingIncomeSummary.vue

<template>
  <section
    class="dashboard-income-summary"
    :class="{ 'dashboard-income-summary--sidebar': variant === 'sidebar' }"
  >
    <DashboardSectionHeader title="خلاصه درآمد معاملات" :help="help" />

    <div class="dashboard-income-summary__grid">
      <article
        v-for="row in rows"
        :key="row.key"
        class="dashboard-income-summary__card"
        :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"
          :label="row.label"
          :help="row.help"
          size="xs"
          label-class="dashboard-income-summary__card-title"
        />
        <span v-else class="dashboard-income-summary__card-title">{{ row.label }}</span>
        <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 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>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import DashboardSectionHeader from '@/pages/dashboard/components/DashboardSectionHeader.vue'
import DashboardLabelWithHelp from '@/pages/dashboard/components/DashboardLabelWithHelp.vue'
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 = withDefaults(
  defineProps<{
    finance?: DashboardFinance | null
    /** standalone: بالای صفحه | sidebar: کنار بخش سود طلایی/ریالی */
    variant?: 'standalone' | 'sidebar'
  }>(),
  { variant: 'standalone' },
)

const help = dashboardTradingIncomeSummary

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: '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: '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(totalFeeRial.value),
    unit: DASHBOARD_RIAL_UNIT,
    sub: undefined as string | undefined,
    help: totalFeeHelp,
    tone: undefined,
    isTotal: true,
  },
])
</script>

<style scoped lang="less">
.dashboard-income-summary {
  margin-top: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--admin-border);
  background: var(--admin-bg-elevated);
  padding: 0.65rem 0.75rem 0.75rem;
  color: var(--admin-text);
}

.dashboard-income-summary--sidebar {
  margin-top: 0;
  height: 100%;
}

.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.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);
}

.dashboard-income-summary__card-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--admin-text);
  line-height: 1.35;
}

.dashboard-income-summary__hint {
  margin: 0;
  flex: 1;
  font-size: 0.625rem;
  line-height: 1.45;
  color: var(--admin-text-secondary);
}

.dashboard-income-summary__value {
  margin: 0.15rem 0 0;
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
  color: var(--admin-text);
}

.dashboard-income-summary__amount {
  font-size: 0.9375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.dashboard-income-summary__card--total .dashboard-income-summary__amount {
  font-size: 1rem;
  color: #b45309;
}

.dashboard-income-summary__unit {
  margin-right: 3px;
  font-size: 0.625rem;
  font-weight: 600;
  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);
    background: rgba(245, 158, 11, 0.14);
  }

  .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>