# Task 03 — Vihar Create Form (Step 1)

The form a captain fills to create a new vihar. Two-step flow: step 1 is the
details (this task), step 2 is allocation (Task 04).

## File to modify

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

## Fields (matching `createViharSchema` in `@vihar/shared`)

| Field | Type | Default | Validation |
|---|---|---|---|
| viharDate | date picker | tomorrow | required |
| plannedStartTime | time picker | 05:30 if morning, else 17:00 | required |
| sadhujiCount | stepper | 0 | 0–100 |
| sadhvijiCount | stepper | 0 | 0–100 |
| otherCount | stepper | 0 | 0–100 |
| headSaintName | text input | "" | min 2, max 150 |
| samudayId | dropdown from `/api/samuday` | null | optional |
| departureLocationId | LocationPicker (Task 02) | null | required |
| arrivalLocationId | LocationPicker (Task 02) | null | required, must differ from departure |
| templeDarshan | toggle | false | — |
| updhi | toggle | false | — |
| remarks | textarea | "" | max 1000 |

## After both locations are picked

Show a small read-only summary card:
- "Walking distance: ~5.2 km · ~1h 15m"
- Pulled from `GET /api/routes/walking?from=X&to=Y`
- If error (Google not configured yet), show "Distance will be calculated later"

## Submit

On "Save & Continue":
1. Validate with `createViharSchema` from `@vihar/shared`.
2. POST to `/api/vihars`. Body matches the schema exactly.
3. On success, navigate to `/captain/vihars/{id}/allocate` (Task 04).

## React patterns

Use `react-hook-form` with the zod resolver:

```tsx
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { createViharSchema, type CreateViharInput } from '@vihar/shared';

const form = useForm<CreateViharInput>({
  resolver: zodResolver(createViharSchema),
  defaultValues: {
    viharDate: tomorrow.toISOString().slice(0, 10),
    plannedStartTime: '05:30',
    sadhujiCount: 0,
    sadhvijiCount: 0,
    otherCount: 0,
    templeDarshan: false,
    updhi: false,
  },
});
```

## UI notes

- Use the `Card` component for visual sectioning. One card per logical group:
  "When", "Who", "Route", "Options".
- Steppers for counts are friendlier than number inputs on mobile.
- Date picker: native `<input type="date">` is fine for Phase 1.
- Show field errors inline below the input in `text-rust text-xs`.

## Acceptance

1. Open `/captain/vihars/new`. Form renders, date is tomorrow, time is 05:30.
2. Fill all required fields including departure + arrival from the picker.
3. After picking both locations, see the distance summary.
4. Try to submit with departure == arrival — see validation error.
5. Submit successfully — navigate to allocation page with the new vihar's ID.
6. Cancel button takes you back to `/captain` without saving.

## Gotchas

- The picker's `value` is a number; resetting it requires `null`, not `undefined`.
- The schema's `viharDate` is YYYY-MM-DD string, not Date object. Date picker
  outputs a string already.
- Arrow up/down on number steppers should be disabled when at min/max.
- The "Save & Continue" button must be disabled while the mutation is pending.

## Out of scope

- Editing an existing vihar — separate task
- Bulk-create / recurring vihar templates — Phase 2
- Pre-filling from a previous similar vihar — Phase 2