# Finance Dashboard — Page Overrides

> **PROJECT:** AGNET Dashboard  
> **Page:** `/farmers/dashboard/finance`  
> **Reference:** `public/agnet-assets/agnet-finance-dashboard.png`

> Rules here **override** `design-system/agnet-dashboard/MASTER.md` where noted.

---

## Layout Overrides

| Zone | Grid | Notes |
|------|------|-------|
| Top KPI row | 4 equal columns | Case ID, Eligibility, Routed Bank, SLA |
| Middle row | 3 columns | Farmer & Farm, Bank Routing, Document Checklist |
| Bottom | Full width | Approval Path horizontal stepper |

### Spacing

- KPI row gap: `16px`
- Middle row gap: `24px`
- Stepper margin-top: `24px`

---

## Component Overrides

| Component | Override |
|-----------|----------|
| `KpiCard` | Eligibility shows `ProgressRing` 78/100; SLA shows ring 18/48 hrs |
| `ProgressRing` | Semi-circle gauge for eligibility; compact ring for SLA countdown |
| `Stepper` | Horizontal approval path — 5+ stages, full width |
| `Badge` | "GIS Verified" on case header; bank match % pills |
| `DataRow` | Farmer & Farm detail rows |

---

## Color Notes

- Eligibility ring: green ≥70%, amber 50–69%, red <50%
- SLA ring: `--warning-amber` when under 50% time remaining
- Document checklist: success green check, muted pending

---

## Responsive

| Breakpoint | Behavior |
|------------|----------|
| ≥1280px | 4-col KPI + 3-col middle |
| 768–1279px | 2-col KPI; stacked middle |
| <768px | Single column; stepper scrolls horizontally |