{{define "content"}}
<div class="space-y-6">
    <h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
        <!-- Customers -->
        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
            <dt class="truncate text-sm font-medium text-gray-500">Total Customers</dt>
            <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{.CustomerCount}}</dd>
            <a href="/customers" class="mt-2 inline-block text-sm text-indigo-600 hover:text-indigo-500">View all &rarr;</a>
        </div>

        <!-- Open Orders -->
        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
            <dt class="truncate text-sm font-medium text-gray-500">Open Orders</dt>
            <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{.OpenOrderCount}}</dd>
            <a href="/orders" class="mt-2 inline-block text-sm text-indigo-600 hover:text-indigo-500">View all &rarr;</a>
        </div>

        <!-- Pending Invoices -->
        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
            <dt class="truncate text-sm font-medium text-gray-500">Pending Invoices</dt>
            <dd class="mt-1 text-3xl font-semibold tracking-tight text-yellow-600">{{.PendingInvoices}}</dd>
            <dd class="mt-1 text-sm text-gray-500">{{formatMoney .OutstandingAmount}} outstanding</dd>
            <a href="/invoices?status=pending" class="mt-2 inline-block text-sm text-indigo-600 hover:text-indigo-500">View all &rarr;</a>
        </div>

        <!-- Revenue This Month -->
        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
            <dt class="truncate text-sm font-medium text-gray-500">Revenue This Month</dt>
            <dd class="mt-1 text-3xl font-semibold tracking-tight text-green-600">{{formatMoney .RevenueThisMonth}}</dd>
            <a href="/ledger/trial-balance" class="mt-2 inline-block text-sm text-indigo-600 hover:text-indigo-500">View ledger &rarr;</a>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="rounded-lg bg-white shadow p-6">
        <h2 class="text-lg font-medium text-gray-900 mb-4">Quick Actions</h2>
        <div class="flex flex-wrap gap-3">
            <a href="/customers/new" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                + New Customer
            </a>
            <a href="/orders/new" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                + New Order
            </a>
            <a href="/ledger/journal/new" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                + Journal Entry
            </a>
        </div>
    </div>

    <!-- Order Status Summary -->
    <div class="rounded-lg bg-white shadow p-6">
        <h2 class="text-lg font-medium text-gray-900 mb-4">Order Status Summary</h2>
        <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
            <div class="text-center">
                <div class="text-2xl font-bold text-gray-500">{{.OpenOrderCount}}</div>
                <div class="text-sm text-gray-500">Draft / Confirmed</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-green-600">{{.FulfilledOrders}}</div>
                <div class="text-sm text-gray-500">Fulfilled</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-yellow-600">{{.PendingInvoices}}</div>
                <div class="text-sm text-gray-500">Pending Invoices</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-green-600">{{formatMoney .RevenueThisMonth}}</div>
                <div class="text-sm text-gray-500">Monthly Revenue</div>
            </div>
        </div>
    </div>
</div>
{{end}}