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

<template>
  <section class="dashboard-income-summary">
    <DashboardSectionHeader title="خلاصه درآمد معاملات" :help="help" />
    <p class="dashboard-income-summary__intro">
      سود اسپرد (اختلاف قیمت) و کارمزد جدا محاسبه می‌شوند. جمع = هر دو. همه مبالغ
      <strong>ریال</strong> هستند (نه تومان).
    </p>

    <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>
      </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'

const props = defineProps<{
  finance?: DashboardFinance | null
}>()

const help = dashboardTradingIncomeSummary
const unit = DASHBOARD_RIAL_UNIT

const spreadRial = computed(() => Number(props.finance?.fullPriceSood ?? 0))
const commissionRial = computed(() =>
  Number(props.finance?.fullPriceKarmozd ?? props.finance?.fullPriceKaermozd ?? 0)
)
const totalRial = computed(() =>
  Number(props.finance?.totalTradingProfit ?? spreadRial.value + commissionRial.value)
)

const rows = computed(() => [
  {
    key: 'spread',
    label: 'سود اسپرد',
    hint: 'اختلاف قیمت پایه و قیمت مشتری',
    amount: formatDashboardAmount(spreadRial.value),
    help: dashboardKpi.spreadProfit,
    isTotal: false,
  },
  {
    key: 'commission',
    label: 'کارمزد',
    hint: 'درصد یا وزن کارمزد، به ریال',
    amount: formatDashboardAmount(commissionRial.value),
    help: dashboardKpi.commission,
    isTotal: false,
  },
  {
    key: 'total',
    label: 'جمع سود',
    hint: 'اسپرد + کارمزد',
    amount: formatDashboardAmount(totalRial.value),
    help: dashboardKpi.totalTradingProfit,
    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__intro {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  line-height: 1.55;
  color: var(--admin-text-secondary);
}

.dashboard-income-summary__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

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

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>