70 lines
2.1 KiB
Markdown
70 lines
2.1 KiB
Markdown
# 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.
|