# Task 06 — Vihar List

Captain's list of all vihars with filters and status pills.

## File to modify

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

## Layout

- Page title: "All Vihars"
- Filter row:
  - Status chips: All / Planned / In Progress / Completed / Cancelled / Auto-Closed
    (single-select, default All)
  - Date range: Today / Tomorrow / This Week / This Month / All Time
  - Locality dropdown
- List of vihar cards. Each card:
  - Date + time on the left
  - Route summary "Walkeshwar → Bhuleshwar" in the middle
  - Status pill (use `.status-pill` class from globals.css)
  - Saint counts as small chips (3 Sadhuji, 0 Sadhviji)
  - Allocation count
  - Distance if completed
  - Tap to navigate to `/captain/vihars/{id}`
- Pagination at bottom: "Page 1 of N" with Prev/Next buttons.

## Data source

```
GET /api/vihars?status=&dateFrom=&dateTo=&localityId=&page=&pageSize=20
```

Use React Query with the filter object as part of the query key so changes
trigger a refetch.

## Empty state

If the response has zero items: show a friendly empty card with
"No vihars match your filters" + a "Clear filters" button.

## Acceptance

1. Navigate to `/captain/vihars`. List loads.
2. Filter by "Planned" — only planned vihars show.
3. Switch to "This Month" — date range adjusts.
4. Tap a vihar — navigate to its detail page (Task 07).
5. Pagination works for >20 vihars.

## Gotchas

- Date range "Today" filter should send `date=YYYY-MM-DD` (single day) not
  range. Easier query and the backend supports both.
- Status chips are single-select; tapping the active chip deselects (back to
  All).
- Pagination resets to page 1 whenever any filter changes.

## Out of scope

- Bulk actions (cancel multiple, etc.) — Phase 2
- CSV export — Phase 2
- Map view of all vihars — Phase 2