# Task 10 — Volunteer Check-Out

The most behavior-heavy screen. Captures location, start time (if not
checked in), distance with tolerance check.

## File to create

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

## Fields

| Field | Source | Editable |
|---|---|---|
| End time | now (auto-set, read-only display) | no |
| Start time | If checkedInAt exists: that timestamp; else blank | yes |
| Distance | Pre-filled from `/api/routes/walking?from=X&to=Y` | yes |
| Notes | blank | yes (optional, max 500) |
| Location | from `navigator.geolocation` | no (no manual entry) |

## Layout

1. **Title**: "Check Out"
2. **Vihar summary** (compact)
3. **GPS card**: "Get my location" → coords. Allow continue-without-GPS.
4. **Start time input** (HH:MM)
   - If volunteer checked in earlier: pre-filled with check-in time, with
     small note "from your check-in" but still editable.
   - If not checked in: blank, required.
5. **Distance card**:
   - Big number input pre-filled with Google's km, e.g. `5.2`
   - Below: small text "Suggested: 5.2 km (Google walking)"
   - **Tolerance UI** (key behavior):
     - If volunteer's value is within ±1 km of suggested: green check, "Auto-accepted"
     - If outside ±1 km: amber warning, "This needs captain approval. Vihar will close pending review."
     - The 1 km threshold should be read from a constant or fetched
       from `/api/cities/me` (not implemented yet — for Phase 1, hardcode 1.0).
6. **Notes textarea**
7. **Submit button**: "Complete Vihar"

## API call

```
POST /api/allocations/{allocationId}/check-out
{
  latitude?: number,
  longitude?: number,
  accuracyMeters?: number,
  startTime: '05:30',
  distanceKm: 5.4,
  notes?: '...'
}
```

On success, navigate to `/volunteer/vihars/{id}` which now shows the completion summary.

## Tolerance check (client-side preview)

The actual approval status is set by the server. Client just shows a hint:

```ts
const suggested = walkingRoute.distanceMeters / 1000;
const delta = Math.abs(distanceKm - suggested);
const willAutoAccept = delta <= 1.0;
```

If `willAutoAccept === false`, show the amber warning before submission.

## Acceptance

1. Open from "Check Out" button.
2. End time shows current time, read-only.
3. Start time pre-filled if checked in.
4. Distance pre-filled with Google's number.
5. Edit distance to 5.5 — green check (within tolerance).
6. Edit distance to 8.0 — amber warning shown.
7. Submit — vihar closes; if amber, status moves to completed but allocation
   is `pending_captain` for distance approval.
8. Navigate back — detail page shows "Completed".

## Gotchas

- The end time shown is a snapshot at page load, NOT a live updating clock.
  Capture it with `new Date()` once when the page mounts.
- Start time must be earlier than end time. Validate before submit.
- If distance suggestion fetch fails (Google not configured), still allow
  submission — just no auto-accept badge, and the server will accept whatever
  the volunteer entered.
- Decimal handling: input value should be string, parsed to float on submit.
  Allow `5,4` (Indian comma) → normalize.

## Out of scope

- Editing after submission — captain only via Task 07
- Photo upload — Phase 2
- Real-time km counter using GPS — Phase 2 (battery-heavy)