Dashboard

@props([
    'name' => 'Alex',
    'stats' => null,
    'ranges' => null,
    'categories' => null,
    'transactions' => null,
])

{{--
    Dashboard Spending — content-only finance dashboard (drop into an app
    shell such as app-shell-assistant for the sidebar/AI rail; this page owns
    none of that chrome). A welcome header, a four-up KPI tray row, a
    revenue-vs-expense comparison chart, and a two-column spending-breakdown
    + transactions-list row.

    The sample figures agree with each other: chart-comparison's own bundled
    "Last 30 days" totals (Revenue $8,750.00, Expense $1,852.00) are echoed
    in the KPI row, net profit is revenue minus expense, cash flow is net
    profit less a stated pending-receivables gap, and the spending-breakdown
    categories below sum to the same $1,852.00 total expense.
--}}

@php
    // Fixed inline icon set for the KPI tray headers — hand-authored, trusted
    // markup (not user data), safe to print unescaped in the loop below.
    $icons = [
        'bar-chart' => '<path d="M3 3v18h18"/><path d="M8 17V9"/><path d="M13 17V5"/><path d="M18 17v-7"/>',
        'coin' => '<circle cx="12" cy="12" r="10"/><path d="M14.8 9A2 2 0 0 0 13 8h-2a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-2a2 2 0 0 1-1.8-1"/><path d="M12 6v2"/><path d="M12 16v2"/>',
        'trending-up' => '<path d="M22 7 13.5 15.5 8.5 10.5 2 17"/><path d="M16 7h6v6"/>',
        'swap' => '<path d="m17 3 4 4-4 4"/><path d="M21 7H9"/><path d="m7 21-4-4 4-4"/><path d="M3 17h12"/>',
    ];

    // Revenue and expense mirror blocks/chart-comparison's own bundled 30-day
    // sample one-for-one, so the KPI row and the chart panel underneath never
    // disagree. Net profit is revenue minus expense; cash flow is net profit
    // less a stated pending-receivables gap (both spelled out in the
    // description so the figures read as derived, not arbitrary).
    $stats ??= [
        ['title' => __('Total revenue'), 'icon' => 'bar-chart', 'value' => '$8,750.00', 'delta' => '+12%', 'description' => __('vs last month')],
        ['title' => __('Total expense'), 'icon' => 'coin', 'value' => '$1,852.00', 'delta' => '-3%', 'description' => __('vs last month'), 'inverse' => true],
        ['title' => __('Net profit'), 'icon' => 'trending-up', 'value' => '$6,898.00', 'delta' => '+16.9%', 'description' => __('Revenue minus expense')],
        ['title' => __('Cash flow'), 'icon' => 'swap', 'value' => '$6,240.00', 'delta' => '+17.1%', 'description' => __('Net profit less pending receivables')],
    ];

    // Spending-breakdown categories are a subset of the same $1,852.00 total
    // expense above (45% / 30% / 25% of it), not a separate, disagreeing figure.
    $categories ??= [
        ['name' => __('Housing'), 'percent' => 45, 'amount' => '$833.40', 'icon' => 'home'],
        ['name' => __('Food & Dining'), 'percent' => 30, 'amount' => '$555.60', 'icon' => 'utensils'],
        ['name' => __('Transport'), 'percent' => 25, 'amount' => '$463.00', 'icon' => 'car'],
    ];
@endphp

<main id="main-content" data-surface="admin" {{ $attributes->merge(['class' => 'min-h-svh bg-background p-4 text-foreground sm:p-6 lg:p-8']) }}>
    <div class="mx-auto max-w-7xl space-y-6">
        {{-- Welcome header --}}
        <div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
            <h1 class="text-2xl font-bold tracking-tight">{{ __('Welcome back, :name', ['name' => $name]) }}</h1>
            <x-ui.button size="sm">
                <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
                {{ __('Add new') }}
            </x-ui.button>
        </div>

        {{-- KPI tray row --}}
        <div data-slot="dashboard-spending-kpis" class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ($stats as $stat)
                <x-ui.tray :title="$stat['title']">
                    <x-slot:icon>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{!! $icons[$stat['icon']] ?? '' !!}</svg>
                    </x-slot:icon>
                    <x-ui.stat
                        variant="plain"
                        :value="$stat['value']"
                        :delta="$stat['delta']"
                        :description="$stat['description'] ?? null"
                        :inverse="$stat['inverse'] ?? false"
                    />
                </x-ui.tray>
            @endforeach
        </div>

        {{-- Revenue vs. expense comparison --}}
        <x-blocks.chart-comparison :ranges="$ranges" />

        {{-- Spending breakdown + transactions --}}
        <div class="grid gap-6 lg:grid-cols-2">
            <x-blocks.metrics-breakdown :categories="$categories" total="$1,852.00" delta="-3%" />
            <x-blocks.transactions-list :transactions="$transactions" />
        </div>
    </div>
</main>