# Task 13 — Captain Dashboard Charts

Replace the placeholder on `/captain/stats` with real charts using
`recharts`. Build after Task 12.

## File to modify

```
apps/web/src/app/captain/stats/page.tsx
```

## Add dependency

```bash
pnpm --filter @vihar/web add recharts
```

## Layout

- Period filter at top: chips for Today / This Week / This Month / This Year / Custom
  - Custom opens two date inputs
- Big number tiles row:
  - Total vihars · Completed · Total km · Active sevaks
- Charts (one per card, vertical stack on mobile):
  1. **Daily trend** — line chart of vihar count over last 30 days
  2. **Vihars by locality** — bar chart, top 10 localities
  3. **Vihars by samuday** — pie chart
  4. **Top contributors** — horizontal bar chart with name + km, top 10
- Pending items list (already in dashboard, can be reused or linked)

## Recharts setup

Use the warm palette. Override default colors:

```tsx
const CHART_COLORS = {
  ink:     'hsl(30 18% 16%)',
  saffron: 'hsl(30 80% 50%)',
  moss:    'hsl(140 25% 30%)',
  rust:    'hsl(10 60% 45%)',
  series:  ['hsl(30 80% 50%)', 'hsl(140 25% 30%)', 'hsl(30 18% 16%)', 'hsl(10 60% 45%)'],
};
```

Style every chart's tooltip / legend / axis ticks to match the typography.
Use `tabular-nums` font feature for axis labels.

## Empty states

Each chart card shows a placeholder if zero data:
"No data for this period."

## Acceptance

1. Open `/captain/stats`. Charts load.
2. Switch period to Today — charts update.
3. Switch to Custom and pick a 7-day range — charts update.
4. With seeded test data, see meaningful curves.
5. With no data, see empty-state messages instead of broken charts.

## Gotchas

- Recharts is large (~140 KB). Lazy-load it via dynamic import:
  ```tsx
  const Chart = dynamic(() => import('@/components/charts/chart-suite'), { ssr: false });
  ```
- Mobile viewport: charts must use `<ResponsiveContainer width="100%" height={240}>`.
- Tooltips on touch devices: tap once to show, tap elsewhere to dismiss.
  Default Recharts behavior is fine for this.
- BigInt in API response: ensure Task 12's `Number()` coercions are in place,
  or recharts will throw on serialization.

## Out of scope

- Comparison overlay (this period vs last) — Phase 2
- CSV / PDF export of charts — Phase 2
- Drill-down (tap a bar → filtered list) — Phase 2 nice-to-have