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.

2.1 KiB Raw Permalink Blame History