faizulhaq/Ready-to-Planner-Tour
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f5a633227fa87e8a1ae55448c679df8e8c5e6035
Ready-to-Planner-Tour/.agents/rules/phase-workflow.md
T
Faizulhaq F.N f5a633227f auto winn
2026-08-27 19:45:15 +07:00

12 KiB
Raw Blame History

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 
    npm create vite@latest . -- --template react
npm install
  • 0.2 — Install semua dependencies sekaligus 
    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:

# 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
Reference in New Issue View Git Blame Copy Permalink