<div class="grid grid-cols-1 md:grid-cols-4 gap-3">
    <x-dashboard-card title="Wallet Balance" value="{{ $currencySymbol }}{{ number_format($totalWalletBalance, 2) }}"
        badge="Total Balance" icon="credit-card" color="sky" />

    <x-dashboard-card title="Total Deposit" badge="{{ ucfirst(str_replace('_', ' ', $filter)) }}"
        value="{{ $currencySymbol }}{{ number_format($totalDeposits, 2) }}" icon="arrow-up" color="green" />

    <x-dashboard-card title="Total Expenses" badge="{{ ucfirst(str_replace('_', ' ', $filter)) }}"
        value="{{ $currencySymbol }}{{ number_format($totalExpenses, 2) }}" icon="arrow-down" color="red" />

    <x-dashboard-card title="Reserved Balance"
        value="{{ $currencySymbol }}{{ number_format($reservedWalletBalance, 2) }}" badge="Reserved"
        icon="arrow-trending-down" color="purple" />

</div>
