Ready-to-Planner-Tour/task.md

📋 Task Progress — Tour Destination Planner

Phase 0 — Project Setup & Foundation [DONE]

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

---

Phase 1 — Layout & UI Components [DONE]

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

---

Phase 2 — Home Page (Trip Selection) [DONE]

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

---

Phase 3 — Schedule Builder Page [DONE]

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

---

Phase 4 — Packing List Page [DONE]

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

---

Phase 5 — Budget Calculator Page [DONE]

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

---

Phase 6 — Polish, Animations & Responsive [DONE]

• 6A.1 — ToastContainer.jsx & toastStore.js (notifikasi mengambang interaktif sukses/info/warning/danger di semua aksi pengguna)
• 6B.1 — Responsiveness audit & mobile drawer navigation menu di Navbar
• 6C.1 — Dialog modal konfirmasi "Reset Trip" dengan visual peringatan
• 6D.1 — Production build testing (npm run build) 100% sukses tanpa error (732ms)