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 }"
      >
        <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 class="dashboard-income-summary__unit">{{ unit }}</span>
        </p>
        <!-- تفکیک کارمزد به ریالی + طلایی -->
        <div v-if="row.breakdown" class="dashboard-income-summary__breakdown">
          <span class="dashboard-income-summary__breakdown-row">
            <span>ریالی</span>
            <span class="dashboard-income-summary__breakdown-val">
              {{ formatDashboardAmount(rialFee) }} ریال
            </span>
          </span>
          <span class="dashboard-income-summary__breakdown-row">
            <span>طلایی</span>
            <span class="dashboard-income-summary__breakdown-val">
              {{ formatGram(goldFeeGrams) }} گرم ≈ {{ formatDashboardAmount(goldFeeRial) }} ریال
            </span>
          </span>
        </div>
      </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, 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 = 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))
// کارمزد ریالی: از معامله‌های وزن‌محور (fee_asset = rial)
const rialFee = computed(() => Number(props.finance?.profitRial ?? 0))
// کارمزد طلایی: از معامله‌های مبلغ‌محور (fee_asset = gold)
const goldFeeGrams = computed(() => Number(props.finance?.profitGoldGrams ?? 0))
const goldFeeRial = computed(() => Number(props.finance?.profitGoldValueRial ?? 0))
// کارمزد ترکیبی به ریال = کارمزد ریالی + معادل ریالی کارمزد طلایی
const commissionRial = computed(() => rialFee.value + goldFeeRial.value)
// جمع سود = اختلاف قیمت + کارمزد ترکیبی
const totalRial = computed(() => priceDiffRial.value + commissionRial.value)

function formatGram(value: number) {
  return value.toLocaleString('fa-IR', { maximumFractionDigits: 4 })
}

const commissionHelp: DashboardHelp = {
  description:
    'کارمزد ترکیبی از دو نوع معامله است: در معامله‌های مبلغ‌محور (مشتری مبلغ ریالی ثابت زده) کارمزد از طلا کسر می‌شود، و در معامله‌های وزن‌محور (مشتری وزن ثابت زده) از ریال. این مبلغ مجموع کارمزد ریالی به‌علاوهٔ معادل ریالی کارمزد طلایی است.',
  formula: 'کارمزد = کارمزد ریالی + (گرم کارمزد طلایی × قیمت روز)',
}

const rows = computed(() => [
  {
    key: 'priceDiff',
    label: 'سود اختلاف قیمت',
    hint: 'فاصله بین قیمت پایه و قیمت مشتری',
    amount: formatDashboardAmount(priceDiffRial.value),
    help: dashboardKpi.priceDiffProfit,
    breakdown: false,
    isTotal: false,
  },
  {
    key: 'commission',
    label: 'کارمزد',
    hint: 'ترکیبی از کارمزد ریالی و طلایی',
    amount: formatDashboardAmount(commissionRial.value),
    help: commissionHelp,
    breakdown: true,
    isTotal: false,
  },
  {
    key: 'total',
    label: 'جمع سود',
    hint: 'اختلاف قیمت + کارمزد ترکیبی',
    amount: formatDashboardAmount(totalRial.value),
    help: dashboardKpi.totalTradingProfit,
    breakdown: false,
    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: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

/* در حالت کناری، کارت‌ها زیر هم */
.dashboard-income-summary--sidebar .dashboard-income-summary__grid {
  grid-template-columns: 1fr;
}

@media (max-width: 640px) {
  .dashboard-income-summary__grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-income-summary__card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 4.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--admin-border);
  background: var(--admin-bg-muted);
}

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

.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__breakdown {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--admin-border);
}

.dashboard-income-summary__breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.625rem;
  color: var(--admin-text-secondary);
}

.dashboard-income-summary__breakdown-val {
  font-weight: 700;
  color: var(--admin-text);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  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;
  }
}
</style>