Ready-to-Planner-Tour/task.md

# 📋 Task Progress — Tour Destination Planner

## Phase 0 — Project Setup & Foundation [DONE]
- [x] **0.1** — Inisialisasi Vite + React
- [x] **0.2** — Install dependencies (`react-router-dom`, `zustand`, `framer-motion`, `lucide-react`, `recharts`, `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities`, `date-fns`)
- [x] **0.3** — Setup design system di `src/index.css` (CSS variables, glassmorphism, buttons, badges, forms)
- [x] **0.4** — Setup Zustand store di `src/store/tourStore.js` dengan persist middleware ke localStorage
- [x] **0.5** — Setup React Router di `src/App.jsx` dengan 4 rute utama (`/`, `/schedule`, `/packing`, `/budget`)
- [x] **0.6** — Buat data dummy di `src/data/` (`destinations.js`, `activities.js`, `packingTemplates.js`)
- [x] **0.7** — Buat utility functions di `src/utils/` (`formatCurrency.js`, `dateHelpers.js`, `helpers.js`) dan custom hooks di `src/hooks/`
- [x] **0.8** — Validasi build (`npm run build`) sukses tanpa error

---

## Phase 1 — Layout & UI Components [DONE]
- [x] **1A.1** — `Navbar.jsx` (Sticky glassmorphism, responsive mobile drawer menu, dynamic badge indicators)
- [x] **1A.2** — `Footer.jsx` (Branding, quick links, active trip widget) & `PageWrapper.jsx` (framer-motion page transition)
- [x] **1B.1** — `Button.jsx` (variants: primary/secondary/accent/ghost/danger, sizes, loading spinner, whileHover & whileTap)
- [x] **1B.2** — `Card.jsx` (glassmorphism card, hoverable glow lift effect)
- [x] **1B.3** — `Modal.jsx` (accessible focus & escape key trap, Framer Motion scalePop spring, custom footers)
- [x] **1B.4** — `Badge.jsx` (primary/accent/success/warning/danger/neutral badges)
- [x] **1B.5** — `ProgressBar.jsx` (animated fill, custom gradients, label & percentage indicator)
- [x] **1B.6** — `EmptyState.jsx` (empty view illustration, responsive text, call-to-action button)
- [x] **1B.7** — Validasi build (`npm run build`) 100% sukses tanpa error

---

## Phase 2 — Home Page (Trip Selection) [DONE]
- [x] **2A.1** — `HeroSection.jsx` dengan typography Playfair Display, pulsing background glow, CTA buttons & key feature badges
- [x] **2A.2** — `FilterBar.jsx` dengan search input real-time, clear button, dan filter pills kategori (Pantai, Gunung, Budaya, Kota)
- [x] **2A.3** — Sorting mode dropdown (Paling Populer, Rating Tertinggi, Budget Terendah, Durasi Singkat)
- [x] **2B.1** — `TripCard.jsx` dengan image overlay, rating badge, tag highlights, budget range, dan hover lift effect
- [x] **2B.2** — Responsive grid destinasi (4→3→2→1 kolom) dengan layout animation & AnimatePresence
- [x] **2B.3** — `EmptyState.jsx` saat pencarian tidak ditemukan
- [x] **2C.1** — `TripModal.jsx` untuk preset destination (nama trip, tanggal mulai/selesai, auto-calc durasi hari, target budget)
- [x] **2C.2** — `CustomTripModal.jsx` untuk membuat trip bebas (custom nama destinasi, kategori, cover image, durasi, budget)
- [x] **2C.3** — Banner info trip aktif saat user sudah memilih trip sebelumnya
- [x] **2C.4** — Validasi build (`npm run build`) 100% sukses tanpa error

---

## Phase 3 — Schedule Builder Page [DONE]
- [x] **3A.1** — `DayTabs.jsx` navigasi per hari (Day 1..Day N) dengan badge jumlah aktivitas, tanggal format Indonesia, dan tombol tambah hari
- [x] **3A.2** — Guard check & Empty state jika belum ada destinasi yang dipilih
- [x] **3B.1** — `ScheduleTimeline.jsx` dengan header ringkasan hari dan list timeline vertikal
- [x] **3B.2** — `ActivityItem.jsx` dengan drag handle, kategori icon & stripe color, waktu, durasi, lokasi, catatan, tombol edit & hapus
- [x] **3C.1** — `AddActivityModal.jsx` (mode tambah & mode edit aktivitas)
- [x] **3C.2** — Quick activity template chips (Sarapan, Check-in, Sunset, Wisata, Kuliner, Belanja, dll.)
- [x] **3D.1** — Drag & drop reordering menggunakan `@dnd-kit/core` & `@dnd-kit/sortable`
- [x] **3D.2** — Validasi build (`npm run build`) 100% sukses tanpa error

---

## Phase 4 — Packing List Page [DONE]
- [x] **4A.1** — `PackingOverview.jsx` (total item, item terkemas, persentase packing bar dinamis, badge status & pesan selebrasi saat 100%)
- [x] **4A.2** — `TemplateModal.jsx` untuk memuat template bawaan per kategori trip (*Pantai*, *Gunung*, *Kota*, *Budaya*)
- [x] **4B.1** — `PackingCategory.jsx` (kategori collapsible dengan badge count, toggle Check All / Uncheck All, dan form inline tambah item)
- [x] **4B.2** — `PackingItem.jsx` (custom animated checkbox spring, coret nama barang, quantity counter minus/plus, tombol hapus)
- [x] **4C.1** — Search filter barang bawaan real-time
- [x] **4C.2** — Auto-load template berdasarkan trip yang dipilih
- [x] **4C.3** — Validasi build (`npm run build`) 100% sukses tanpa error

---

## Phase 5 — Budget Calculator Page [DONE]
- [x] **5A.1** — `BudgetOverview.jsx` (Target total budget editable, total terpakai, sisa budget dengan status warna dinamis)
- [x] **5A.2** — Progress bar alokasi budget terpakai & banner peringatan saat over-budget
- [x] **5B.1** — `BudgetChart.jsx` dengan Recharts PieChart (proporsi per kategori) & BarChart (pengeluaran per hari)
- [x] **5B.2** — Custom dark glassmorphism tooltips & legend persentase kategori
- [x] **5C.1** — `AddExpenseModal.jsx` (form tambah & edit biaya: nominal, kategori, hari ke-N, catatan)
- [x] **5C.2** — `ExpenseList.jsx` (list pengeluaran dengan filter kategori, sorting, edit & hapus item)
- [x] **5C.3** — Multi-currency toggle (IDR, USD, EUR)
- [x] **5C.4** — Validasi build (`npm run build`) 100% sukses tanpa error

---

## Phase 6 — Polish, Animations & Responsive [DONE]
- [x] **6A.1** — `ToastContainer.jsx` & `toastStore.js` (notifikasi mengambang interaktif sukses/info/warning/danger di semua aksi pengguna)
- [x] **6B.1** — Responsiveness audit & mobile drawer navigation menu di Navbar
- [x] **6C.1** — Dialog modal konfirmasi "Reset Trip" dengan visual peringatan
- [x] **6D.1** — Production build testing (`npm run build`) 100% sukses tanpa error (732ms)