# Onboarding Page - Session 3

**Tanggal:** 2026-07-23
**Status:** Selesai

## Tujuan

Membuat halaman onboarding pada `web2/app/components/OnboardingForm.vue` dengan referensi dari `web/app/pages/onboarding.vue`, mengadaptasi komponen Nuxt UI ke shadcn-vue.

## Yang Dikerjakan

### 1. Buat `app/pages/onboarding/index.vue`
- Page wrapper yang merender `<OnboardingForm />`.

### 2. Buat `app/components/OnboardingForm.vue`
- Multi-step form (3 langkah) dengan stepper UI.
- **Step 0 - Bisnis:** Pilih jenis bisnis (grid kartu dengan gambar).
- **Step 1 - Info:** Form nama bisnis, telepon, email, alamat.
- **Step 2 - Paket:** Pilih paket langganan (card pricing).
- Validasi per step menggunakan Zod.
- Submit handler: `POST /tenants` via `$fetch`.
- Toast notification (success/error/warning) via `vue-sonner`.
- Loading state pada tombol submit.
- Layout split-screen (55% form + 45% gambar dekoratif).
- Navigasi: tombol Kembali, Lanjut, Selesai.

## File yang Dibuat

| File | Aksi |
|------|------|
| `app/pages/onboarding/index.vue` | Dibuat |
| `app/components/OnboardingForm.vue` | Dibuat |

## API yang Digunakan

- `GET /v1/business-types?is_active=true` - Daftar jenis bisnis
- `GET /v1/plans` - Daftar paket langganan
- `POST /v1/tenants` - Buat bisnis baru

## Adaptasi Nuxt UI → shadcn-vue

| Nuxt UI (web) | shadcn-vue (web2) |
|---|---|
| `UButton` | `Button` |
| `UInput` | `Input` |
| `UFormField` | `Field` + `FieldLabel` |
| `UBadge` | `<span>` styled |
| `UIcon` | `i-lucide-*` class |
| `useToast()` | `toast` dari `vue-sonner` |

## Fields Form (Step 1)

| Field | Type | Validasi |
|-------|------|----------|
| `name` | text | wajib, max 100 karakter |
| `phone` | text | optional, max 20 karakter |
| `email` | email | optional, format email, max 100 karakter |
| `address` | text | optional, max 255 karakter |

## Error Handling

- Field-level errors dari Zod validation
- Toast warning untuk validasi step
- Toast error untuk API errors
- Toast success untuk submit berhasil

## Catatan

- Route `/onboarding` memerlukan hard refresh atau restart dev server setelah pembuatan file baru.
