<div class="space-y-6">
  <div class="grid gap-4 md:grid-cols-3"><div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs uppercase tracking-wide text-slate-400">Invoices Listed</div><div class="mt-2 text-3xl font-bold">{{ billing.invoice_count }}</div></div><div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs uppercase tracking-wide text-slate-400">Draft Invoices</div><div class="mt-2 text-3xl font-bold">{{ billing.draft_count }}</div></div><div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs uppercase tracking-wide text-slate-400">Outstanding</div><div class="mt-2 text-3xl font-bold">₹ {{ billing.outstanding }}</div></div></div>
  <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="flex items-center justify-between"><div><h2 class="text-lg font-semibold text-slate-900">Billing Control</h2><p class="text-sm text-slate-500">Recent invoices in the active branch/FY scope.</p></div><a href="/billing" class="rounded-2xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white">Open Billing</a></div>
  <div class="mt-5 overflow-x-auto"><table class="min-w-full text-left text-sm"><thead class="text-xs uppercase tracking-wide text-slate-400"><tr><th class="px-3 py-2">Invoice</th><th class="px-3 py-2">Client</th><th class="px-3 py-2">Date</th><th class="px-3 py-2">Total</th><th class="px-3 py-2">Balance</th><th class="px-3 py-2">Status</th></tr></thead><tbody class="divide-y divide-slate-100">{% for inv in billing.invoices %}<tr><td class="px-3 py-3 font-semibold">{{ inv.invoice_no }}</td><td class="px-3 py-3">{{ inv.client_legal_name or inv.client_trade_name or inv.client_id }}</td><td class="px-3 py-3">{{ inv.invoice_date }}</td><td class="px-3 py-3">₹ {{ inv.total_amount }}</td><td class="px-3 py-3">₹ {{ inv.balance_amount }}</td><td class="px-3 py-3"><span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold">{{ inv.status }}</span></td></tr>{% else %}<tr><td colspan="6" class="px-3 py-8 text-center text-slate-500">No billing invoices found in current scope.</td></tr>{% endfor %}</tbody></table></div></div>
</div>
