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;

  frozenBefore?: string;

  frozenAfter?: 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);

  }



  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-grid">

      <div class="stat-cell">

        <span class="stat-label">{{ t('wallet.stats_income') }}</span>

        <span class="stat-val income">{{ formatMoneyCompact(stats.income, locale) }}</span>

      </div>

      <div class="stat-cell">

        <span class="stat-label">{{ t('wallet.stats_expense') }}</span>

        <span class="stat-val expense">{{ formatMoneyCompact(stats.expense, locale) }}</span>

      </div>

      <div class="stat-cell">

        <span class="stat-label">{{ t('wallet.stats_net') }}</span>

        <span class="stat-val" :class="stats.net >= 0 ? 'income' : 'muted'">

          {{ formatMoneyCompact(stats.net, locale) }}

        </span>

      </div>

      <div class="stat-cell">

        <span class="stat-label">{{ t('wallet.stats_cashback') }}</span>

        <span class="stat-val">{{ formatMoneyCompact(stats.cashback, locale) }}</span>

      </div>

    </div>

  </div>

</template>



<style scoped>

.wallet-stats-panel {

  position: relative;

  background: var(--gradient-card);

  border: 1px solid rgba(255, 255, 255, 0.11);

  border-radius: var(--radius);

  padding: 14px 16px;

  margin-bottom: var(--space-section);

  box-shadow: var(--shadow-card-sm);

  overflow: hidden;

}



.wallet-stats-panel::before {

  content: '';

  position: absolute;

  top: 0;

  left: 10%;

  right: 10%;

  height: 1px;

  background: var(--gradient-card-shine);

  pointer-events: none;

}



.stats-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px 16px;

}



.stat-cell {

  display: flex;

  flex-direction: column;

  gap: 4px;

  min-width: 0;

}



.stat-label {

  font-size: 12px;

  font-weight: 500;

  color: var(--text-dim);

  letter-spacing: 0;

}



.stat-val {

  font-size: 15px;

  font-weight: 600;

  font-variant-numeric: tabular-nums;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  color: var(--text);

  letter-spacing: -0.02em;

}



.stat-val.income { color: var(--success); }

.stat-val.expense { color: var(--text-muted); }

.stat-val.muted { color: var(--text-muted); }

</style>