354 lines
12 KiB
Markdown
354 lines
12 KiB
Markdown
# Phase Workflow Rules — Tour Planner App
|
|
|
|
> Aturan ini mengatur bagaimana setiap fitur harus dikerjakan secara berurutan.
|
|
> AI agent WAJIB mengikuti fase ini dan TIDAK BOLEH melompat fase tanpa alasan yang jelas.
|
|
|
|
---
|
|
|
|
## ⚠️ Prinsip Utama
|
|
|
|
1. **Satu fase harus selesai sebelum masuk ke fase berikutnya.**
|
|
2. **Setiap akhir fase, update `task.md`** untuk mencatat progress.
|
|
3. **Jangan mulai phase baru jika phase sebelumnya masih ada item `[ ]`.**
|
|
4. **Validasi output setiap phase sebelum lanjut.**
|
|
|
|
---
|
|
|
|
## 🗂️ Phase 0 — Project Setup (WAJIB DIKERJAKAN PERTAMA)
|
|
|
|
> Fondasi project. Tidak ada komponen atau page yang boleh dibuat sebelum phase ini selesai.
|
|
|
|
### Checklist Phase 0
|
|
- [ ] **0.1** — Inisialisasi Vite + React
|
|
```bash
|
|
npm create vite@latest . -- --template react
|
|
npm install
|
|
```
|
|
- [ ] **0.2** — Install semua dependencies sekaligus
|
|
```bash
|
|
npm install react-router-dom zustand framer-motion lucide-react recharts @dnd-kit/core @dnd-kit/sortable date-fns
|
|
```
|
|
- [ ] **0.3** — Buat `src/index.css` dengan SEMUA CSS variables (lihat skill `ui-design`)
|
|
- [ ] **0.4** — Buat `src/store/tourStore.js` dengan full Zustand store + persist middleware
|
|
- [ ] **0.5** — Setup React Router di `src/App.jsx` dengan semua 4 routes
|
|
- [ ] **0.6** — Buat file data dummy:
|
|
- `src/data/destinations.js` (min. 10 destinasi)
|
|
- `src/data/activities.js` (template aktivitas)
|
|
- `src/data/packingTemplates.js` (template per tipe trip)
|
|
- [ ] **0.7** — Buat utility functions:
|
|
- `src/utils/formatCurrency.js`
|
|
- `src/utils/dateHelpers.js`
|
|
- `src/utils/helpers.js` (generateId, dll.)
|
|
|
|
### Validasi Phase 0
|
|
- `npm run dev` harus berjalan tanpa error
|
|
- Route `/`, `/schedule`, `/packing`, `/budget` harus bisa diakses
|
|
- Zustand store harus bisa di-import dari semua page
|
|
- CSS variables harus aktif (cek di browser DevTools)
|
|
|
|
---
|
|
|
|
## 🧱 Phase 1 — Layout & UI Components
|
|
|
|
> Membangun blok bangunan dasar yang akan dipakai semua page.
|
|
> Jangan buat page dulu sebelum komponen UI dasar selesai.
|
|
|
|
### Checklist Phase 1
|
|
|
|
#### 1A — Layout Components
|
|
- [ ] **1A.1** — `src/components/layout/Navbar.jsx`
|
|
- Logo + nama app
|
|
- Link navigasi ke 4 halaman
|
|
- Indikator halaman aktif
|
|
- Responsif (hamburger menu di mobile)
|
|
- [ ] **1A.2** — `src/components/layout/PageWrapper.jsx`
|
|
- Wrapper umum untuk semua page
|
|
- Padding, max-width, fade-in animation
|
|
|
|
#### 1B — UI Components Dasar
|
|
- [ ] **1B.1** — `src/components/ui/Button.jsx`
|
|
- Props: `variant` (primary/secondary/ghost/danger), `size` (sm/md/lg), `icon`, `loading`, `disabled`
|
|
- [ ] **1B.2** — `src/components/ui/Card.jsx`
|
|
- Props: `glassmorphism`, `hoverable`, `onClick`
|
|
- [ ] **1B.3** — `src/components/ui/Modal.jsx`
|
|
- Props: `isOpen`, `onClose`, `title`
|
|
- Focus trap, backdrop click close, escape key
|
|
- Framer Motion animation (scalePop)
|
|
- [ ] **1B.4** — `src/components/ui/Badge.jsx`
|
|
- Props: `variant` (primary/success/warning/danger)
|
|
- [ ] **1B.5** — `src/components/ui/ProgressBar.jsx`
|
|
- Props: `value` (0-100), `label`, `showPercent`, `color`
|
|
- Animated fill dengan Framer Motion
|
|
- [ ] **1B.6** — `src/components/ui/EmptyState.jsx`
|
|
- Tampil saat list kosong, dengan ilustrasi dan CTA
|
|
|
|
### Validasi Phase 1
|
|
- Semua komponen bisa di-render tanpa crash
|
|
- Tidak ada hardcode warna (semua pakai CSS variables)
|
|
- Modal bisa dibuka dan ditutup dengan keyboard (Escape)
|
|
- Navbar menampilkan halaman aktif dengan benar
|
|
|
|
---
|
|
|
|
## 🏠 Phase 2 — Home Page (Trip Selection)
|
|
|
|
> Feature pertama. Harus selesai sebelum page lain karena trip yang dipilih
|
|
> menentukan data yang dipakai di semua page lainnya.
|
|
|
|
### Checklist Phase 2
|
|
|
|
#### 2A — Hero Section
|
|
- [ ] **2A.1** — Hero dengan background gradient + animated particles atau subtle pattern
|
|
- [ ] **2A.2** — Headline besar dengan `Playfair Display` font
|
|
- [ ] **2A.3** — Subtitle dan CTA button "Mulai Rencanakan"
|
|
- [ ] **2A.4** — Search bar dengan placeholder animasi
|
|
|
|
#### 2B — Filter & Grid Destinasi
|
|
- [ ] **2B.1** — `FilterBar.jsx` — filter pills: Semua / Pantai / Gunung / Kota / Budaya
|
|
- [ ] **2B.2** — `TripCard.jsx` — card dengan:
|
|
- Gambar destinasi (16:9 ratio)
|
|
- Nama, negara, rating
|
|
- Estimasi budget range
|
|
- Durasi populer
|
|
- Tags/badge kategori
|
|
- Hover effect (scale + overlay)
|
|
- [ ] **2B.3** — Grid responsif 4→3→2→1 kolom
|
|
- [ ] **2B.4** — Animasi stagger pada grid item
|
|
|
|
#### 2C — Trip Configuration Modal
|
|
- [ ] **2C.1** — Modal terbuka saat klik TripCard
|
|
- [ ] **2C.2** — Form: Nama Trip, Tanggal Mulai, Tanggal Selesai
|
|
- [ ] **2C.3** — Auto-hitung total hari dari range tanggal
|
|
- [ ] **2C.4** — Tombol "Buat Trip Kustom" (tanpa pilih destinasi preset)
|
|
- [ ] **2C.5** — Konfirmasi → update Zustand store → redirect ke `/schedule`
|
|
|
|
### Validasi Phase 2
|
|
- Semua destinasi tampil di grid
|
|
- Filter berfungsi (klik kategori → grid berubah)
|
|
- Search berfungsi (filter by name)
|
|
- Modal terbuka dengan animasi
|
|
- Setelah konfirmasi, `useTourStore().trip` terisi dengan benar
|
|
- Data trip tersimpan di localStorage
|
|
|
|
---
|
|
|
|
## 📅 Phase 3 — Schedule Builder Page
|
|
|
|
> Fitur drag & drop. Ini yang paling complex — kerjakan dengan hati-hati.
|
|
|
|
### Checklist Phase 3
|
|
|
|
#### 3A — Day Navigation
|
|
- [ ] **3A.1** — `DayTabs.jsx` — tabs untuk setiap hari
|
|
- Day 1, Day 2, ..., Day N (sesuai `trip.totalDays`)
|
|
- Tampilkan tanggal di bawah label hari
|
|
- Active state yang jelas
|
|
- Scrollable jika banyak hari
|
|
- [ ] **3A.2** — Guard: Jika trip belum dikonfigurasi, tampilkan prompt ke Home
|
|
|
|
#### 3B — Timeline View
|
|
- [ ] **3B.1** — `ScheduleTimeline.jsx` — timeline vertikal
|
|
- Jam dari 06:00 - 23:00 di sisi kiri
|
|
- Aktivitas diposisikan sesuai waktu
|
|
- [ ] **3B.2** — `ActivityItem.jsx` — satu item:
|
|
- Warna berdasarkan kategori
|
|
- Waktu, nama, lokasi, durasi
|
|
- Drag handle (ikon GripVertical)
|
|
- Tombol edit & hapus
|
|
- [ ] **3B.3** — Placeholder "Belum ada aktivitas" dengan CTA tambah
|
|
|
|
#### 3C — Add/Edit Activity
|
|
- [ ] **3C.1** — `AddActivityModal.jsx` — form:
|
|
- Time picker (HH:MM)
|
|
- Nama aktivitas
|
|
- Lokasi
|
|
- Durasi (menit)
|
|
- Kategori (dropdown/pills)
|
|
- Catatan (textarea)
|
|
- [ ] **3C.2** — Template aktivitas cepat (chip/button, klik → auto-isi form)
|
|
- [ ] **3C.3** — Edit mode: modal ter-preisi dengan data yang ada
|
|
|
|
#### 3D — Drag & Drop
|
|
- [ ] **3D.1** — Sortable dalam satu hari (reorder aktivitas)
|
|
- [ ] **3D.2** — Update state setelah drag selesai
|
|
- [ ] **3D.3** — Visual feedback saat dragging (opacity, scale)
|
|
|
|
### Validasi Phase 3
|
|
- Tabs menampilkan jumlah hari yang benar sesuai trip
|
|
- Tambah aktivitas → muncul di timeline
|
|
- Hapus aktivitas → hilang dari timeline
|
|
- Drag & drop mengubah urutan dan tersimpan
|
|
- Data persist setelah refresh browser
|
|
|
|
---
|
|
|
|
## 🎒 Phase 4 — Packing List Page
|
|
|
|
> Fitur yang relatif straightforward. Fokus pada UX checklist yang satisfying.
|
|
|
|
### Checklist Phase 4
|
|
|
|
#### 4A — Overview & Progress
|
|
- [ ] **4A.1** — `PackingOverview.jsx`:
|
|
- Total item / item yang sudah dipak
|
|
- ProgressBar keseluruhan (animated)
|
|
- Badge status: "Belum dimulai" / "Sedang dikemas" / "Siap Berangkat!"
|
|
- [ ] **4A.2** — Tombol "Load Template" berdasarkan tipe trip
|
|
|
|
#### 4B — Kategori & Item
|
|
- [ ] **4B.1** — `PackingCategory.jsx`:
|
|
- Header kategori dengan icon dan jumlah item
|
|
- Collapsible (klik header → expand/collapse)
|
|
- Progress mini per kategori
|
|
- [ ] **4B.2** — `PackingItem.jsx`:
|
|
- Checkbox dengan animasi checkmark (Framer Motion)
|
|
- Nama item (strikethrough jika checked)
|
|
- Quantity counter (- / angka / +)
|
|
- Tombol hapus
|
|
- [ ] **4B.3** — Inline add item per kategori (input + tombol "+")
|
|
|
|
#### 4C — Interaksi & UX
|
|
- [ ] **4C.1** — "Check All" / "Uncheck All" per kategori
|
|
- [ ] **4C.2** — Sort: unchecked items tampil di atas
|
|
- [ ] **4C.3** — Animasi item saat di-check (smooth height collapse jika sorted)
|
|
- [ ] **4C.4** — Konfetti/celebrasi kecil saat 100% selesai
|
|
|
|
### Validasi Phase 4
|
|
- Load template mengisi item sesuai tipe trip
|
|
- Checkbox berfungsi dan tersimpan di localStorage
|
|
- Progress bar update real-time saat item di-check
|
|
- Tambah item baru muncul di kategori yang tepat
|
|
- Quantity counter mengubah nilai dengan benar
|
|
|
|
---
|
|
|
|
## 💰 Phase 5 — Budget Calculator Page
|
|
|
|
> Fitur terakhir. Fokus pada visual chart dan feedback yang jelas.
|
|
|
|
### Checklist Phase 5
|
|
|
|
#### 5A — Budget Overview Header
|
|
- [ ] **5A.1** — Input total budget (editable, format IDR)
|
|
- [ ] **5A.2** — 3 stat card: Total Budget / Total Terpakai / Sisa
|
|
- Warna Sisa: hijau (cukup), kuning (hampir habis), merah (over)
|
|
- [ ] **5A.3** — Progress bar: % budget terpakai
|
|
- [ ] **5A.4** — Warning banner jika over budget
|
|
|
|
#### 5B — Chart Visualisasi
|
|
- [ ] **5B.1** — `PieChart` — distribusi per kategori (Recharts)
|
|
- Custom tooltip dengan format IDR
|
|
- Legend dengan warna kategori
|
|
- [ ] **5B.2** — `BarChart` — pengeluaran per hari (Recharts)
|
|
- X axis: hari ke-N
|
|
- Y axis: jumlah IDR
|
|
|
|
#### 5C — Expense Management
|
|
- [ ] **5C.1** — List semua pengeluaran (grouped by kategori)
|
|
- [ ] **5C.2** — `AddExpenseModal.jsx`:
|
|
- Nama pengeluaran
|
|
- Jumlah (IDR)
|
|
- Kategori
|
|
- Hari (dropdown: Hari 1, Hari 2, ... atau "Umum")
|
|
- Catatan
|
|
- [ ] **5C.3** — Edit & hapus pengeluaran
|
|
- [ ] **5C.4** — Currency toggle (IDR / USD / EUR) dengan konversi sederhana
|
|
|
|
### Validasi Phase 5
|
|
- Tambah expense → stat card dan chart update real-time
|
|
- Over budget → warning tampil dengan warna merah
|
|
- Pie chart menampilkan semua kategori dengan warna yang benar
|
|
- Bar chart menampilkan per-hari dengan benar
|
|
- Data tersimpan setelah refresh
|
|
|
|
---
|
|
|
|
## ✨ Phase 6 — Polish & Optimization (FASE TERAKHIR)
|
|
|
|
> Hanya dikerjakan setelah Phase 2-5 semuanya selesai dan tervalidasi.
|
|
|
|
### Checklist Phase 6
|
|
|
|
#### 6A — Animasi & Transisi
|
|
- [ ] **6A.1** — Page transition (fade antar route)
|
|
- [ ] **6A.2** — Scroll-triggered animations (IntersectionObserver via Framer Motion)
|
|
- [ ] **6A.3** — Loading states yang smooth
|
|
- [ ] **6A.4** — Hover dan tap feedback di semua elemen interaktif
|
|
|
|
#### 6B — Responsive Design Audit
|
|
- [ ] **6B.1** — Test di 320px (iPhone SE)
|
|
- [ ] **6B.2** — Test di 768px (tablet)
|
|
- [ ] **6B.3** — Test di 1280px (desktop)
|
|
- [ ] **6B.4** — Navbar collapse ke hamburger di mobile
|
|
|
|
#### 6C — UX Improvement
|
|
- [ ] **6C.1** — Toast notification (sukses tambah item, hapus, dll.)
|
|
- [ ] **6C.2** — Konfirmasi sebelum hapus item penting
|
|
- [ ] **6C.3** — Empty states yang informatif di semua halaman
|
|
- [ ] **6C.4** — Tombol "Reset Trip" dengan konfirmasi
|
|
|
|
#### 6D — Code Quality
|
|
- [ ] **6D.1** — Hapus semua `console.log`
|
|
- [ ] **6D.2** — Pastikan tidak ada prop drilling lebih dari 2 level
|
|
- [ ] **6D.3** — Cek semua edge case (trip belum dibuat, schedule kosong, dll.)
|
|
|
|
### Validasi Phase 6
|
|
- Aplikasi berjalan mulus di semua ukuran layar
|
|
- Tidak ada error di console browser
|
|
- localStorage berfungsi: data tetap ada setelah refresh
|
|
- Semua animasi smooth (tidak ada jank/lag)
|
|
|
|
---
|
|
|
|
## 📋 Template Update task.md per Phase
|
|
|
|
Saat memulai pengerjaan, buat file `task.md` dengan format ini:
|
|
|
|
```markdown
|
|
# Task Progress — Tour Planner App
|
|
|
|
## Phase 0 — Setup [DONE/IN PROGRESS/TODO]
|
|
- [x] 0.1 Init Vite
|
|
- [x] 0.2 Install dependencies
|
|
...
|
|
|
|
## Phase 1 — Layout & UI [TODO]
|
|
- [ ] 1A.1 Navbar
|
|
...
|
|
|
|
## Phase 2 — Home Page [TODO]
|
|
...
|
|
```
|
|
|
|
**Update status item:**
|
|
- `[ ]` → belum dikerjakan
|
|
- `[/]` → sedang dikerjakan
|
|
- `[x]` → selesai dan tervalidasi
|
|
|
|
---
|
|
|
|
## 🚦 Decision Tree untuk Agent Baru
|
|
|
|
```
|
|
Masuk ke project
|
|
│
|
|
▼
|
|
Baca AGENTS.md + task.md
|
|
│
|
|
▼
|
|
Phase 0 selesai? ──NO──→ Kerjakan Phase 0 dulu
|
|
│
|
|
YES
|
|
│
|
|
▼
|
|
Phase 1 selesai? ──NO──→ Kerjakan Phase 1 dulu
|
|
│
|
|
YES
|
|
│
|
|
▼
|
|
Phase mana yang belum selesai? → Kerjakan sesuai urutan (2→3→4→5→6)
|
|
│
|
|
▼
|
|
Semua done? → Lakukan validasi akhir & update walkthrough.md
|
|
```
|