# Task 08 — Vihar Detail (Volunteer View)

Volunteer's view of a vihar they're allocated to — see info, take action.

## File to create

```
apps/web/src/app/volunteer/vihars/[id]/page.tsx
```

## Layout

### Status banner (top)
Color-coded based on the volunteer's allocation state:
- Blue: "Upcoming" (vihar in future, not yet check-in)
- Saffron: "In Progress" (checked in, not yet checked out)
- Moss: "Completed" (checked out)

### Vihar info card
Same content as captain's view but read-only. No action menu on
allocations, no captain-only buttons.

### Co-volunteers list
"Walking with: Rajesh M., Pradeep S." (just names, no actions)

### Action button (sticky bottom of card)
- If allocation has no `checkInAt`: big saffron "Check In at Departure" button → Task 09
- If has `checkInAt` but no `checkOutAt`: big saffron "Check Out at Arrival" button → Task 10
- If both done: read-only summary. "Walked 5.4 km in 1h 12m. Thank you 🙏"
- If vihar is `cancelled`: muted notice "This vihar was cancelled."
- If allocation is inactive (volunteer was reassigned away): "You were reassigned. No action needed."

## Data source

```
GET /api/vihars/{id}    # full detail
```

The volunteer's own allocation is in `allocations[]` where `userId === currentUser.userId`.
Filter to that one for display purposes.

## Authorization

Server-side: the GET returns the vihar regardless of allocation, but the volunteer
can only act on their own allocation (enforced in `AllocationsService.findOwnAllocation`).
Client-side: if no allocation matches the current user, show "You're not allocated
to this vihar" and no action button.

## Acceptance

1. Allocated volunteer opens vihar from notifications/deep link.
2. See banner state matching their allocation status.
3. Tap "Check In" — go to Task 09 screen.
4. After check-in, return — banner changes to "In Progress", button is now "Check Out".
5. Tap "Check Out" — go to Task 10 screen.
6. After check-out, return — banner shows "Completed" with summary.
7. Open a vihar they're not allocated to — see read-only view, no action button.

## Gotchas

- Always pull fresh data on focus (use `refetchOnWindowFocus: true` for this query).
  Volunteers will switch back from camera/maps and expect updated state.
- Multiple volunteers on the same vihar: each acts on their own allocation row.
  The vihar status changes once the LAST volunteer checks out.
- Don't show captain-only badges (e.g., "Distance pending approval") to volunteers.

## Out of scope

- Reassign yourself — volunteers can't do this; ask captain
- Decline — Phase 2
- Live location sharing during walk — Phase 2 / privacy review needed