thebet365/apps/player/src/components/WalletStatsPanel.vue

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { formatMoneyCompact, parseAmount } from '../utils/localeDisplay';

interface Transaction {
  transactionType: string;
  amount: string;
  createdAt: string;
  transactionId?: string;
}

const props = withDefaults(defineProps<{
  items: Transaction[];
  cashbackTotal?: string;
}>(), {
  cashbackTotal: '0',
});
const { t, locale } = useI18n();

const CASHBACK_TYPES = new Set(['CASHBACK', 'CASHBACK_DEPOSIT']);

const stats = computed(() => {
  let income = 0;
  let expense = 0;
  let cashback = 0;

  for (const tx of props.items) {
    const amt = parseAmount(tx.amount);
    const isCb = CASHBACK_TYPES.has(tx.transactionType.toUpperCase());
    if (isCb) {
      cashback += Math.abs(amt);
    }
    if (amt >= 0) income += amt;
    else expense += Math.abs(amt);
  }

  // Use server-side cashback total if provided (more accurate across all pages)
  if (props.cashbackTotal !== '0') {
    cashback = Math.abs(parseAmount(props.cashbackTotal));
  }

  const net = income - expense;

  return { income, expense, net, cashback };
});
</script>

<template>
  <div class="wallet-stats-panel">
    <div class="stats-row">
      <div class="stat-item">
        <span class="stat-label">{{ t('wallet.stats_income') }}</span>
        <span class="stat-val income">{{ formatMoneyCompact(stats.income, locale) }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">{{ t('wallet.stats_expense') }}</span>
        <span class="stat-val expense">{{ formatMoneyCompact(stats.expense, locale) }}</span>
      </div>
    </div>
    <div class="stats-divider" />
    <div class="stats-row">
      <div class="stat-item">
        <span class="stat-label">{{ t('wallet.stats_net') }}</span>
        <span class="stat-val" :class="stats.net >= 0 ? 'income' : 'expense'">
          {{ formatMoneyCompact(stats.net, locale) }}
        </span>
      </div>
      <div class="stat-item">
        <span class="stat-label">{{ t('wallet.stats_cashback') }}</span>
        <span class="stat-val cashback">{{ formatMoneyCompact(stats.cashback, locale) }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.wallet-stats-panel {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.stats-row {
  display: flex;
  align-items: center;
}

.stat-item {
  flex: 1;
  text-align: center;
  min-width: 0;
  padding: 4px 8px;
}

.stat-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.stat-val {
  display: block;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1A1A2E;
}

.stat-val.income { color: #059669; }
.stat-val.expense { color: #DC2626; }
.stat-val.cashback { color: #F8971F; }

.stats-divider {
  height: 1px;
  margin: 6px 8px;
  background: #E5E7EB;
}
</style>