From f5a633227fa87e8a1ae55448c679df8e8c5e6035 Mon Sep 17 00:00:00 2001
From: "Faizulhaq F.N" <101050815+zulzunman@users.noreply.github.com>
Date: Thu, 27 Aug 2026 19:45:15 +0700
Subject: [PATCH] auto winn

---
 .agents/rules/coding-standards.md            |  186 ++
 .agents/rules/phase-workflow.md              |  353 ++++
 .agents/skills/feature-guide/SKILL.md        |  229 +++
 .agents/skills/react-component/SKILL.md      |  160 ++
 .agents/skills/state-management/SKILL.md     |  212 ++
 .agents/skills/ui-design/SKILL.md            |  268 +++
 .gitignore                                   |   24 +
 .oxlintrc.json                               |    8 +
 AGENTS.md                                    |  318 +++
 README.md                                    |  356 ++++
 index.html                                   |   18 +
 package-lock.json                            | 1925 ++++++++++++++++++
 package.json                                 |   32 +
 public/favicon.svg                           |    1 +
 public/icons.svg                             |   24 +
 src/App.jsx                                  |   32 +
 src/assets/hero.png                          |  Bin 0 -> 13057 bytes
 src/assets/react.svg                         |    1 +
 src/assets/vite.svg                          |    1 +
 src/components/budget/AddExpenseModal.jsx    |  180 ++
 src/components/budget/BudgetChart.jsx        |  256 +++
 src/components/budget/BudgetOverview.jsx     |  281 +++
 src/components/budget/ExpenseList.jsx        |  330 +++
 src/components/layout/Footer.jsx             |  157 ++
 src/components/layout/Navbar.jsx             |  366 ++++
 src/components/layout/PageWrapper.jsx        |   19 +
 src/components/packing/PackingCategory.jsx   |  255 +++
 src/components/packing/PackingItem.jsx       |  181 ++
 src/components/packing/PackingOverview.jsx   |  147 ++
 src/components/packing/TemplateModal.jsx     |  136 ++
 src/components/schedule/ActivityItem.jsx     |  299 +++
 src/components/schedule/AddActivityModal.jsx |  256 +++
 src/components/schedule/DayTabs.jsx          |  127 ++
 src/components/schedule/ScheduleTimeline.jsx |  145 ++
 src/components/trip/CustomTripModal.jsx      |  216 ++
 src/components/trip/FilterBar.jsx            |  172 ++
 src/components/trip/HeroSection.jsx          |  157 ++
 src/components/trip/TripCard.jsx             |  249 +++
 src/components/trip/TripModal.jsx            |  203 ++
 src/components/ui/Badge.jsx                  |   48 +
 src/components/ui/Button.jsx                 |   83 +
 src/components/ui/Card.jsx                   |   47 +
 src/components/ui/EmptyState.jsx             |   75 +
 src/components/ui/Modal.jsx                  |  180 ++
 src/components/ui/ProgressBar.jsx            |   76 +
 src/components/ui/ToastContainer.jsx         |  138 ++
 src/data/activities.js                       |  122 ++
 src/data/destinations.js                     |  185 ++
 src/data/packingTemplates.js                 |  168 ++
 src/hooks/useBudget.js                       |   47 +
 src/hooks/usePackingList.js                  |   42 +
 src/hooks/useSchedule.js                     |   29 +
 src/hooks/useTripStore.js                    |   18 +
 src/index.css                                |  483 +++++
 src/main.jsx                                 |   10 +
 src/pages/Budget.jsx                         |  244 +++
 src/pages/Home.jsx                           |  220 ++
 src/pages/PackingList.jsx                    |  224 ++
 src/pages/Schedule.jsx                       |  225 ++
 src/store/toastStore.js                      |   31 +
 src/store/tourStore.js                       |  372 ++++
 src/utils/dateHelpers.js                     |   69 +
 src/utils/formatCurrency.js                  |   53 +
 src/utils/helpers.js                         |   19 +
 task.md                                      |   81 +
 vite.config.js                               |    7 +
 66 files changed, 11576 insertions(+)
 create mode 100644 .agents/rules/coding-standards.md
 create mode 100644 .agents/rules/phase-workflow.md
 create mode 100644 .agents/skills/feature-guide/SKILL.md
 create mode 100644 .agents/skills/react-component/SKILL.md
 create mode 100644 .agents/skills/state-management/SKILL.md
 create mode 100644 .agents/skills/ui-design/SKILL.md
 create mode 100644 .gitignore
 create mode 100644 .oxlintrc.json
 create mode 100644 AGENTS.md
 create mode 100644 README.md
 create mode 100644 index.html
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 public/favicon.svg
 create mode 100644 public/icons.svg
 create mode 100644 src/App.jsx
 create mode 100644 src/assets/hero.png
 create mode 100644 src/assets/react.svg
 create mode 100644 src/assets/vite.svg
 create mode 100644 src/components/budget/AddExpenseModal.jsx
 create mode 100644 src/components/budget/BudgetChart.jsx
 create mode 100644 src/components/budget/BudgetOverview.jsx
 create mode 100644 src/components/budget/ExpenseList.jsx
 create mode 100644 src/components/layout/Footer.jsx
 create mode 100644 src/components/layout/Navbar.jsx
 create mode 100644 src/components/layout/PageWrapper.jsx
 create mode 100644 src/components/packing/PackingCategory.jsx
 create mode 100644 src/components/packing/PackingItem.jsx
 create mode 100644 src/components/packing/PackingOverview.jsx
 create mode 100644 src/components/packing/TemplateModal.jsx
 create mode 100644 src/components/schedule/ActivityItem.jsx
 create mode 100644 src/components/schedule/AddActivityModal.jsx
 create mode 100644 src/components/schedule/DayTabs.jsx
 create mode 100644 src/components/schedule/ScheduleTimeline.jsx
 create mode 100644 src/components/trip/CustomTripModal.jsx
 create mode 100644 src/components/trip/FilterBar.jsx
 create mode 100644 src/components/trip/HeroSection.jsx
 create mode 100644 src/components/trip/TripCard.jsx
 create mode 100644 src/components/trip/TripModal.jsx
 create mode 100644 src/components/ui/Badge.jsx
 create mode 100644 src/components/ui/Button.jsx
 create mode 100644 src/components/ui/Card.jsx
 create mode 100644 src/components/ui/EmptyState.jsx
 create mode 100644 src/components/ui/Modal.jsx
 create mode 100644 src/components/ui/ProgressBar.jsx
 create mode 100644 src/components/ui/ToastContainer.jsx
 create mode 100644 src/data/activities.js
 create mode 100644 src/data/destinations.js
 create mode 100644 src/data/packingTemplates.js
 create mode 100644 src/hooks/useBudget.js
 create mode 100644 src/hooks/usePackingList.js
 create mode 100644 src/hooks/useSchedule.js
 create mode 100644 src/hooks/useTripStore.js
 create mode 100644 src/index.css
 create mode 100644 src/main.jsx
 create mode 100644 src/pages/Budget.jsx
 create mode 100644 src/pages/Home.jsx
 create mode 100644 src/pages/PackingList.jsx
 create mode 100644 src/pages/Schedule.jsx
 create mode 100644 src/store/toastStore.js
 create mode 100644 src/store/tourStore.js
 create mode 100644 src/utils/dateHelpers.js
 create mode 100644 src/utils/formatCurrency.js
 create mode 100644 src/utils/helpers.js
 create mode 100644 task.md
 create mode 100644 vite.config.js

diff --git a/.agents/rules/coding-standards.md b/.agents/rules/coding-standards.md
new file mode 100644
index 0000000..12c1fc1
--- /dev/null
+++ b/.agents/rules/coding-standards.md
@@ -0,0 +1,186 @@
+# Coding Standards — Tour Planner App
+
+Aturan ini berlaku untuk semua kode yang ditulis dalam proyek ini.
+AI agent wajib mengikuti seluruh aturan di bawah ini.
+
+---
+
+## 1. Struktur Komponen
+
+```jsx
+// ✅ BENAR — Functional component dengan arrow function
+const MyComponent = ({ prop1, prop2 }) => {
+  // hooks di atas
+  // logic di tengah
+  // return di bawah
+  return <div />;
+};
+
+export default MyComponent;
+
+// ❌ SALAH — Jangan gunakan class component
+class MyComponent extends React.Component { }
+```
+
+---
+
+## 2. Styling
+
+```jsx
+// ✅ BENAR — CSS variables dari design system
+<div style={{ color: 'var(--color-text-primary)', padding: 'var(--space-4)' }}>
+
+// ✅ BENAR — className dengan class yang didefinisikan di CSS
+<div className="glass section-title">
+
+// ❌ SALAH — Hardcode warna
+<div style={{ color: '#ffffff', backgroundColor: '#1a1a2e' }}>
+
+// ❌ SALAH — TailwindCSS
+<div className="text-white bg-gray-900 p-4">
+```
+
+---
+
+## 3. State Management
+
+```javascript
+// ✅ BENAR — Gunakan Zustand store untuk state yang di-share
+const { schedule, addActivity } = useTourStore();
+
+// ✅ BENAR — useState untuk state lokal (form, toggle)
+const [isOpen, setIsOpen] = useState(false);
+
+// ❌ SALAH — Prop drilling lebih dari 2 level
+<A> <B prop={x}> <C prop={x}> <D prop={x} />
+```
+
+---
+
+## 4. Animasi
+
+```jsx
+// ✅ BENAR — Selalu gunakan Framer Motion
+import { motion } from 'framer-motion';
+<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+
+// ❌ SALAH — Animasi manual
+setTimeout(() => setVisible(true), 100);
+element.style.transition = 'opacity 0.3s';
+```
+
+---
+
+## 5. Icons
+
+```jsx
+// ✅ BENAR — Lucide React
+import { MapPin, Calendar, Plane } from 'lucide-react';
+<MapPin size={20} />
+
+// ❌ SALAH — Emoji sebagai icon UI
+<span>📍</span>
+
+// ❌ SALAH — SVG inline tanpa abstraksi
+<svg xmlns="..." viewBox="..."><path d="..." /></svg>
+```
+
+---
+
+## 6. Data & Constants
+
+```javascript
+// ✅ BENAR — Data di src/data/
+import { destinations } from '../data/destinations';
+import { CATEGORY_COLORS } from '../data/constants';
+
+// ❌ SALAH — Data hardcode di dalam komponen
+const destinations = [{ name: 'Bali', ... }]; // dalam file .jsx
+```
+
+---
+
+## 7. File Naming
+
+| Tipe | Convention | Contoh |
+|------|------------|--------|
+| Component | PascalCase | `TripCard.jsx` |
+| Hook | camelCase dengan "use" prefix | `useBudget.js` |
+| Utility | camelCase | `formatCurrency.js` |
+| Data file | camelCase | `destinations.js` |
+| CSS | kebab-case | `trip-card.css` |
+
+---
+
+## 8. Import Order
+
+```javascript
+// 1. React & hooks
+import { useState, useEffect } from 'react';
+
+// 2. Third-party libraries
+import { motion, AnimatePresence } from 'framer-motion';
+import { MapPin } from 'lucide-react';
+
+// 3. Internal store & hooks
+import { useTourStore } from '../store/tourStore';
+import { useBudget } from '../hooks/useBudget';
+
+// 4. Components
+import Button from '../components/ui/Button';
+import TripCard from '../components/trip/TripCard';
+
+// 5. Data & utils
+import { destinations } from '../data/destinations';
+import { formatIDR } from '../utils/formatCurrency';
+
+// 6. Styles (jika ada)
+import './ComponentName.css';
+```
+
+---
+
+## 9. Performance
+
+- Gunakan `useMemo` untuk kalkulasi berat (total budget, statistik packing)
+- Gunakan `useCallback` untuk handler yang di-pass sebagai prop
+- Gunakan `React.memo` untuk komponen list item yang berat
+- Jangan lakukan side effect tanpa `useEffect`
+
+---
+
+## 10. Batasan Fitur (TIDAK BOLEH DILANGGAR)
+
+| Larangan | Alasan |
+|----------|--------|
+| ❌ Login / Logout | Aplikasi ini sepenuhnya static & lokal |
+| ❌ API call ke backend | Tidak ada server, semua data lokal |
+| ❌ Menyimpan password atau data sensitif | Tidak ada autentikasi |
+| ❌ TailwindCSS | Gunakan vanilla CSS + CSS variables |
+| ❌ jQuery atau manipulasi DOM manual | Gunakan React state |
+| ❌ `console.log` di production code | Hapus sebelum commit |
+
+---
+
+## 11. Aksesibilitas (Minimum Requirements)
+
+- Semua tombol punya `aria-label` jika tidak ada teks
+- Semua form field punya `<label>` yang terhubung
+- Warna kontras minimum 4.5:1 untuk teks
+- Keyboard navigable untuk modal (focus trap)
+
+---
+
+## 12. Error Handling
+
+```javascript
+// Selalu handle edge case
+const totalDays = trip?.totalDays ?? 0;
+const activities = schedule[dayIndex]?.activities ?? [];
+
+// Jangan biarkan crash karena undefined
+// ❌
+const name = trip.name.toUpperCase(); // crash jika trip.name null
+// ✅
+const name = trip?.name?.toUpperCase() ?? 'Unnamed Trip';
+```
diff --git a/.agents/rules/phase-workflow.md b/.agents/rules/phase-workflow.md
new file mode 100644
index 0000000..cf1a350
--- /dev/null
+++ b/.agents/rules/phase-workflow.md
@@ -0,0 +1,353 @@
+# 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
+```
diff --git a/.agents/skills/feature-guide/SKILL.md b/.agents/skills/feature-guide/SKILL.md
new file mode 100644
index 0000000..95fe1fc
--- /dev/null
+++ b/.agents/skills/feature-guide/SKILL.md
@@ -0,0 +1,229 @@
+---
+name: feature-guide
+description: Panduan implementasi masing-masing fitur utama Tour Planner App (Trip Selection, Schedule Builder, Packing List, Budget Calculator). Gunakan skill ini saat memulai atau melanjutkan pengerjaan satu halaman/fitur tertentu.
+---
+
+# Skill: Feature Guide — Tour Planner App
+
+## Fitur 1: Trip Selection (Home Page)
+
+**File:** `src/pages/Home.jsx`
+
+### Alur User
+1. User membuka aplikasi → landing di halaman Home
+2. Bisa search destinasi atau browse dari grid card
+3. Filter berdasarkan kategori dan budget
+4. Klik card → modal konfirmasi trip (isi tanggal, nama trip)
+5. Confirm → redirect ke `/schedule`
+
+### Data yang Diperlukan
+```javascript
+// src/data/destinations.js
+export const destinations = [
+  {
+    id: 'bali-001',
+    name: 'Bali',
+    country: 'Indonesia',
+    category: 'pantai',           // 'pantai' | 'gunung' | 'kota' | 'budaya'
+    description: 'Surga tropis...',
+    highlights: ['Tanah Lot', 'Ubud', 'Kuta Beach'],
+    estimatedBudget: { min: 2000000, max: 5000000 },
+    popularDuration: 4,           // hari
+    rating: 4.8,
+    reviewCount: 12400,
+    image: '/assets/bali.jpg',    // atau URL picsum
+    tags: ['romantis', 'budaya', 'alam'],
+    bestTime: 'April - Oktober',
+  },
+  // minimal 10 destinasi
+];
+```
+
+### State yang Diupdate
+```javascript
+setTrip({
+  id: destination.id,
+  name: tripName,        // input user
+  destination: destination.name,
+  startDate: startDate,  // dari date picker
+  endDate: endDate,
+  totalDays: diffInDays(startDate, endDate) + 1,
+  coverImage: destination.image,
+  type: 'preset',
+  category: destination.category,
+});
+initSchedule(totalDays, startDate); // inisialisasi array schedule
+```
+
+### Komponen yang Dibutuhkan
+- `TripCard.jsx` — card destinasi dengan image, info, hover effect
+- `TripSelector.jsx` — modal form input tanggal & nama trip
+- `SearchBar.jsx` — search dengan debounce
+- `FilterBar.jsx` — filter kategori (pills/tabs)
+
+---
+
+## Fitur 2: Daily Schedule Builder (Schedule Page)
+
+**File:** `src/pages/Schedule.jsx`
+
+### Alur User
+1. User masuk ke `/schedule`
+2. Melihat tab per hari (Day 1, Day 2, ...)
+3. Klik "+ Tambah Aktivitas" → modal form
+4. Aktivitas ditampilkan di timeline vertikal
+5. Bisa drag & drop untuk reorder
+
+### Komponen yang Dibutuhkan
+- `DayTabs.jsx` — tab navigasi per hari
+- `ScheduleTimeline.jsx` — timeline visual
+- `ActivityItem.jsx` — satu item aktivitas (draggable)
+- `AddActivityModal.jsx` — form tambah/edit aktivitas
+
+### Implementasi Drag & Drop
+```jsx
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+// Di ActivityItem — tambahkan useSortable
+const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: activity.id });
+const style = { transform: CSS.Transform.toString(transform), transition };
+
+// Di ScheduleTimeline — wrap dengan DndContext
+<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+  <SortableContext items={activityIds} strategy={verticalListSortingStrategy}>
+    {activities.map(a => <ActivityItem key={a.id} activity={a} />)}
+  </SortableContext>
+</DndContext>
+```
+
+### Template Aktivitas Cepat
+```javascript
+// src/data/activities.js
+export const activityTemplates = [
+  { name: 'Sarapan', category: 'makan', duration: 60, defaultTime: '07:00' },
+  { name: 'Check-in Hotel', category: 'check-in', duration: 30, defaultTime: '14:00' },
+  { name: 'Makan Siang', category: 'makan', duration: 60, defaultTime: '12:00' },
+  { name: 'Makan Malam', category: 'makan', duration: 90, defaultTime: '18:30' },
+  { name: 'Kunjungan Wisata', category: 'wisata', duration: 120, defaultTime: '10:00' },
+  { name: 'Belanja Oleh-oleh', category: 'lainnya', duration: 60, defaultTime: '16:00' },
+  { name: 'Berangkat/Transportasi', category: 'transportasi', duration: 180, defaultTime: '06:00' },
+];
+```
+
+---
+
+## Fitur 3: Packing List Manager (PackingList Page)
+
+**File:** `src/pages/PackingList.jsx`
+
+### Alur User
+1. User masuk ke `/packing`
+2. Melihat daftar per kategori dengan progress
+3. Centang item yang sudah dipak
+4. Tambah item baru di kategori tertentu
+5. Load template sesuai tipe trip
+
+### Template Packing
+```javascript
+// src/data/packingTemplates.js
+export const packingTemplates = {
+  pantai: {
+    Pakaian: [
+      { name: 'Baju pantai', qty: 3 },
+      { name: 'Celana pendek', qty: 2 },
+      { name: 'Kacamata hitam', qty: 1 },
+    ],
+    // ...
+  },
+  gunung: { /* ... */ },
+  kota: { /* ... */ },
+  budaya: { /* ... */ },
+};
+```
+
+### Komponen yang Dibutuhkan
+- `PackingOverview.jsx` — statistik total item & progress keseluruhan
+- `PackingCategory.jsx` — section per kategori dengan sub-list
+- `PackingItem.jsx` — checkbox item + qty counter + delete
+
+### Logic Progress
+```javascript
+const getTotalStats = (packingList) => {
+  let total = 0, checked = 0;
+  Object.values(packingList).forEach(items => {
+    items.forEach(item => {
+      total++;
+      if (item.checked) checked++;
+    });
+  });
+  return { total, checked, percent: total > 0 ? Math.round((checked/total)*100) : 0 };
+};
+```
+
+---
+
+## Fitur 4: Budget Calculator (Budget Page)
+
+**File:** `src/pages/Budget.jsx`
+
+### Alur User
+1. User masuk ke `/budget`
+2. Set total budget di bagian atas
+3. Tambah pengeluaran satu per satu
+4. Melihat ringkasan dan chart
+5. Warning merah jika over budget
+
+### Komponen yang Dibutuhkan
+- `BudgetHeader.jsx` — input total budget + overview card (total, spent, remaining)
+- `BudgetChart.jsx` — Recharts PieChart + BarChart
+- `ExpenseList.jsx` — list semua pengeluaran
+- `AddExpenseModal.jsx` — form tambah pengeluaran
+
+### Recharts Integration
+```jsx
+import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer, BarChart, Bar, XAxis, YAxis } from 'recharts';
+
+// Data untuk pie chart
+const pieData = Object.entries(byCategory).map(([name, value]) => ({ name, value }));
+
+<ResponsiveContainer width="100%" height={240}>
+  <PieChart>
+    <Pie data={pieData} cx="50%" cy="50%" outerRadius={80} dataKey="value">
+      {pieData.map((entry, index) => (
+        <Cell key={index} fill={BUDGET_CATEGORY_COLORS[entry.name]} />
+      ))}
+    </Pie>
+    <Tooltip formatter={(value) => formatIDR(value)} />
+  </PieChart>
+</ResponsiveContainer>
+```
+
+### Format Currency
+```javascript
+// src/utils/formatCurrency.js
+export const formatIDR = (amount) => 
+  new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(amount);
+
+export const formatUSD = (amount) =>
+  new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
+```
+
+---
+
+## Navigasi Antar Halaman
+
+```
+/ (Home)           → pilih trip
+/schedule          → jadwal harian
+/packing           → packing list
+/budget            → kalkulasi budget
+```
+
+Navbar harus selalu tampil dan menampilkan:
+- Logo / nama app
+- Link ke semua 4 halaman
+- Indikator halaman aktif
+- Badge progress (% packing done, budget status)
diff --git a/.agents/skills/react-component/SKILL.md b/.agents/skills/react-component/SKILL.md
new file mode 100644
index 0000000..a321116
--- /dev/null
+++ b/.agents/skills/react-component/SKILL.md
@@ -0,0 +1,160 @@
+---
+name: react-component
+description: Panduan membuat React component untuk Tour Planner App. Gunakan skill ini ketika membuat komponen baru, baik UI umum maupun komponen spesifik fitur (trip, schedule, packing, budget).
+---
+
+# Skill: React Component — Tour Planner App
+
+## Aturan Dasar
+
+Semua komponen HARUS mengikuti pola berikut:
+- Functional component dengan arrow function
+- Props didestruktur di parameter
+- Menggunakan CSS variables dari design system (lihat `src/index.css`)
+- Menggunakan Framer Motion untuk animasi
+- Menggunakan Lucide React untuk icon
+
+## Template Dasar Komponen
+
+```jsx
+import { motion } from 'framer-motion';
+import { IconName } from 'lucide-react';
+import styles from './ComponentName.module.css'; // opsional
+
+const ComponentName = ({ prop1, prop2, onAction }) => {
+  return (
+    <motion.div
+      className="component-name"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      {/* content */}
+    </motion.div>
+  );
+};
+
+export default ComponentName;
+```
+
+## Komponen UI yang Tersedia
+
+### Button
+```jsx
+<Button variant="primary|secondary|ghost|danger" size="sm|md|lg" icon={IconComponent} onClick={fn}>
+  Label
+</Button>
+```
+
+### Card
+```jsx
+<Card glassmorphism hoverable>
+  {/* content */}
+</Card>
+```
+Variants: `glassmorphism` (default), `elevated`, `outlined`
+
+### Modal
+```jsx
+<Modal isOpen={bool} onClose={fn} title="Judul Modal">
+  {/* content */}
+</Modal>
+```
+
+### Badge
+```jsx
+<Badge variant="primary|success|warning|danger">{text}</Badge>
+```
+
+### ProgressBar
+```jsx
+<ProgressBar value={0-100} label="Teks" showPercent />
+```
+
+## Animasi Standar
+
+```javascript
+// Fade in dari bawah (card, item list)
+const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.3 }
+};
+
+// Stagger anak-anak (list items)
+const containerVariants = {
+  animate: { transition: { staggerChildren: 0.08 } }
+};
+
+// Scale on hover (interactive card)
+const hoverScale = {
+  whileHover: { scale: 1.02 },
+  whileTap: { scale: 0.98 }
+};
+```
+
+## CSS Classes Tersedia (dari index.css)
+
+```
+.glass          — glassmorphism card
+.glass-dark     — glassmorphism gelap
+.btn-primary    — tombol primary
+.btn-secondary  — tombol secondary
+.btn-ghost      — tombol ghost
+.text-gradient  — teks dengan gradient
+.badge          — badge dasar
+.input-field    — input form
+.section-title  — heading section
+```
+
+## File Baru Selalu di Folder yang Tepat
+
+| Tipe | Lokasi |
+|------|--------|
+| Layout component | `src/components/layout/` |
+| UI generic | `src/components/ui/` |
+| Trip feature | `src/components/trip/` |
+| Schedule feature | `src/components/schedule/` |
+| Packing feature | `src/components/packing/` |
+| Budget feature | `src/components/budget/` |
+| Full page | `src/pages/` |
+
+## Contoh: Membuat Activity Item
+
+```jsx
+// src/components/schedule/ActivityItem.jsx
+import { motion } from 'framer-motion';
+import { Clock, MapPin, GripVertical, Trash2 } from 'lucide-react';
+
+const ActivityItem = ({ activity, onDelete, dragHandleProps }) => {
+  return (
+    <motion.div
+      className="activity-item"
+      layout
+      initial={{ opacity: 0, x: -20 }}
+      animate={{ opacity: 1, x: 0 }}
+      exit={{ opacity: 0, x: 20 }}
+    >
+      <div className="activity-drag-handle" {...dragHandleProps}>
+        <GripVertical size={16} />
+      </div>
+      <div className="activity-time">
+        <Clock size={14} />
+        <span>{activity.time}</span>
+      </div>
+      <div className="activity-content">
+        <h4>{activity.name}</h4>
+        <div className="activity-location">
+          <MapPin size={12} />
+          <span>{activity.location}</span>
+        </div>
+      </div>
+      <button onClick={() => onDelete(activity.id)}>
+        <Trash2 size={16} />
+      </button>
+    </motion.div>
+  );
+};
+
+export default ActivityItem;
+```
diff --git a/.agents/skills/state-management/SKILL.md b/.agents/skills/state-management/SKILL.md
new file mode 100644
index 0000000..409d5cd
--- /dev/null
+++ b/.agents/skills/state-management/SKILL.md
@@ -0,0 +1,212 @@
+---
+name: state-management
+description: Panduan lengkap penggunaan Zustand store untuk Tour Planner App. Gunakan skill ini ketika membaca, menulis, atau menambahkan state baru ke global store, atau saat membuat custom hooks.
+---
+
+# Skill: State Management — Zustand Store
+
+## Overview
+
+Aplikasi ini menggunakan Zustand dengan middleware `persist` untuk menyimpan state ke localStorage.
+File utama: `src/store/tourStore.js`
+localStorage key: `tour-planner-storage`
+
+## Full Store Shape
+
+```javascript
+{
+  // === TRIP INFO ===
+  trip: {
+    id: null,              // string | null
+    name: '',              // nama trip user
+    destination: '',       // nama destinasi
+    startDate: null,       // ISO string
+    endDate: null,         // ISO string
+    totalDays: 0,          // number
+    coverImage: '',        // URL atau path lokal
+    type: 'custom',        // 'preset' | 'custom'
+    category: '',          // 'pantai' | 'gunung' | 'kota' | 'budaya'
+  },
+
+  // === SCHEDULE ===
+  // Array of days, index = hari ke-N (0-based)
+  schedule: [
+    {
+      dayNumber: 1,        // display number
+      date: '',            // ISO string
+      activities: [
+        {
+          id: '',          // uuid
+          time: '09:00',   // HH:mm
+          name: '',
+          location: '',
+          duration: 60,    // menit
+          category: '',    // 'wisata' | 'makan' | 'transportasi' | 'check-in' | 'lainnya'
+          notes: '',
+          color: '',       // CSS color untuk timeline
+        }
+      ]
+    }
+  ],
+
+  // === PACKING LIST ===
+  packingList: {
+    Pakaian: [
+      { id: '', name: '', qty: 1, checked: false }
+    ],
+    Dokumen: [],
+    Elektronik: [],
+    'Obat-obatan': [],
+    Toiletries: [],
+    Lainnya: [],
+  },
+
+  // === BUDGET ===
+  budget: {
+    total: 0,              // number (IDR)
+    currency: 'IDR',       // 'IDR' | 'USD' | 'EUR'
+    expenses: [
+      {
+        id: '',            // uuid
+        name: '',
+        amount: 0,
+        category: '',      // 'transportasi' | 'akomodasi' | 'makan' | 'aktivitas' | 'oleh-oleh' | 'lainnya'
+        day: null,         // number (hari ke berapa) | null (umum)
+        date: '',          // ISO string opsional
+        notes: '',
+      }
+    ]
+  }
+}
+```
+
+## Actions API
+
+```javascript
+const { 
+  // Trip actions
+  setTrip,          // (tripData: Partial<trip>) => void
+  resetTrip,        // () => void
+
+  // Schedule actions
+  initSchedule,     // (totalDays: number, startDate: string) => void
+  addActivity,      // (dayIndex: number, activity: Activity) => void
+  updateActivity,   // (dayIndex: number, activityId: string, data: Partial<Activity>) => void
+  removeActivity,   // (dayIndex: number, activityId: string) => void
+  reorderActivities,// (dayIndex: number, oldIndex: number, newIndex: number) => void
+  moveActivity,     // (fromDay: number, toDay: number, activityId: string) => void
+
+  // Packing actions
+  addPackingItem,   // (category: string, item: PackingItem) => void
+  updatePackingItem,// (category: string, id: string, data: Partial<PackingItem>) => void
+  togglePackingItem,// (category: string, id: string) => void
+  removePackingItem,// (category: string, id: string) => void
+  loadPackingTemplate, // (tripType: string) => void
+
+  // Budget actions
+  setTotalBudget,   // (amount: number) => void
+  addExpense,       // (expense: Expense) => void
+  updateExpense,    // (id: string, data: Partial<Expense>) => void
+  removeExpense,    // (id: string) => void
+
+  // Global
+  resetAll,         // () => void — reset semua state
+
+} = useTourStore();
+```
+
+## Custom Hooks
+
+Gunakan custom hooks untuk encapsulate logic:
+
+### useTripStore.js
+```javascript
+import { useTourStore } from '../store/tourStore';
+
+export const useTripStore = () => {
+  const { trip, setTrip, resetTrip } = useTourStore();
+  
+  const updateTrip = (data) => setTrip({ ...trip, ...data });
+  const isConfigured = trip.id !== null;
+  
+  return { trip, updateTrip, resetTrip, isConfigured };
+};
+```
+
+### useSchedule.js
+```javascript
+import { useTourStore } from '../store/tourStore';
+
+export const useSchedule = (dayIndex) => {
+  const { schedule, addActivity, removeActivity, reorderActivities } = useTourStore();
+  
+  const day = schedule[dayIndex];
+  const activities = day?.activities ?? [];
+  const sortedActivities = [...activities].sort((a, b) => a.time.localeCompare(b.time));
+  
+  return { day, activities: sortedActivities, addActivity: (a) => addActivity(dayIndex, a), removeActivity: (id) => removeActivity(dayIndex, id) };
+};
+```
+
+### useBudget.js
+```javascript
+import { useTourStore } from '../store/tourStore';
+
+export const useBudget = () => {
+  const { budget, setTotalBudget, addExpense, removeExpense } = useTourStore();
+  
+  const totalSpent = budget.expenses.reduce((sum, e) => sum + e.amount, 0);
+  const remaining = budget.total - totalSpent;
+  const isOverBudget = remaining < 0;
+  const percentUsed = budget.total > 0 ? (totalSpent / budget.total) * 100 : 0;
+  
+  const byCategory = budget.expenses.reduce((acc, e) => {
+    acc[e.category] = (acc[e.category] || 0) + e.amount;
+    return acc;
+  }, {});
+  
+  return { budget, totalSpent, remaining, isOverBudget, percentUsed, byCategory, setTotalBudget, addExpense, removeExpense };
+};
+```
+
+## Cara Membuat UUID
+
+```javascript
+// Di utils/helpers.js
+export const generateId = () => crypto.randomUUID();
+```
+
+## Contoh Penggunaan di Komponen
+
+```jsx
+import { useTourStore } from '../store/tourStore';
+
+const SchedulePage = () => {
+  const { schedule, addActivity } = useTourStore();
+  
+  const handleAddActivity = (dayIndex, activityData) => {
+    addActivity(dayIndex, {
+      id: crypto.randomUUID(),
+      ...activityData
+    });
+  };
+  
+  return ( /* ... */ );
+};
+```
+
+## Penting: Jangan Mutasi State Langsung
+
+```javascript
+// ❌ SALAH
+state.schedule[0].activities.push(newActivity);
+
+// ✅ BENAR (dalam store action)
+set(state => ({
+  schedule: state.schedule.map((day, i) =>
+    i === dayIndex
+      ? { ...day, activities: [...day.activities, newActivity] }
+      : day
+  )
+}));
+```
diff --git a/.agents/skills/ui-design/SKILL.md b/.agents/skills/ui-design/SKILL.md
new file mode 100644
index 0000000..ed847be
--- /dev/null
+++ b/.agents/skills/ui-design/SKILL.md
@@ -0,0 +1,268 @@
+---
+name: ui-design
+description: Panduan design system, CSS variables, layout, dan visual styling untuk Tour Planner App. Gunakan skill ini ketika menulis CSS, membangun layout, atau memastikan konsistensi visual antar halaman.
+---
+
+# Skill: UI Design — Tour Planner App
+
+## Design System Lengkap
+
+Semua token harus didefinisikan di `src/index.css` di dalam `:root`.
+
+```css
+/* === src/index.css === */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');
+
+:root {
+  /* Colors */
+  --color-primary: hsl(220, 90%, 56%);
+  --color-primary-dark: hsl(220, 90%, 42%);
+  --color-primary-light: hsl(220, 90%, 70%);
+  --color-primary-glow: hsl(220, 90%, 56%, 0.3);
+  
+  --color-accent: hsl(38, 95%, 55%);
+  --color-accent-dark: hsl(38, 95%, 40%);
+  --color-accent-light: hsl(38, 95%, 70%);
+  
+  --color-bg-base: hsl(222, 28%, 8%);
+  --color-bg-surface: hsl(222, 22%, 13%);
+  --color-bg-elevated: hsl(222, 18%, 18%);
+  --color-bg-overlay: hsla(222, 28%, 5%, 0.8);
+  
+  --color-text-primary: hsl(210, 40%, 96%);
+  --color-text-secondary: hsl(210, 20%, 65%);
+  --color-text-muted: hsl(210, 15%, 45%);
+  
+  --color-border: hsl(220, 15%, 22%);
+  --color-border-light: hsl(220, 15%, 28%);
+  
+  --color-success: hsl(142, 70%, 45%);
+  --color-success-bg: hsl(142, 70%, 45%, 0.15);
+  --color-warning: hsl(38, 95%, 55%);
+  --color-warning-bg: hsl(38, 95%, 55%, 0.15);
+  --color-danger: hsl(0, 75%, 55%);
+  --color-danger-bg: hsl(0, 75%, 55%, 0.15);
+  
+  /* Typography */
+  --font-body: 'Inter', -apple-system, sans-serif;
+  --font-display: 'Outfit', sans-serif;
+  --font-hero: 'Playfair Display', serif;
+  
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+  
+  /* Spacing */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --space-20: 5rem;
+  
+  /* Border Radius */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-full: 9999px;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 3px hsla(0,0%,0%,0.3);
+  --shadow-md: 0 4px 16px hsla(0,0%,0%,0.35);
+  --shadow-lg: 0 8px 32px hsla(0,0%,0%,0.4);
+  --shadow-glow: 0 0 24px var(--color-primary-glow);
+  
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* Z-Index */
+  --z-dropdown: 100;
+  --z-modal: 200;
+  --z-toast: 300;
+  --z-tooltip: 400;
+}
+```
+
+## CSS Utility Classes Wajib
+
+```css
+/* Base reset */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  font-family: var(--font-body);
+  background-color: var(--color-bg-base);
+  color: var(--color-text-primary);
+  line-height: 1.6;
+}
+
+/* Glassmorphism */
+.glass {
+  background: hsla(222, 22%, 18%, 0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+}
+
+/* Gradient text */
+.text-gradient {
+  background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Layout container */
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 var(--space-4);
+}
+
+/* Grid layouts */
+.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
+.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
+.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
+
+/* Responsive grid */
+@media (max-width: 1024px) {
+  .grid-4 { grid-template-columns: repeat(2, 1fr); }
+  .grid-3 { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 640px) {
+  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
+}
+```
+
+## Pola Layout Halaman
+
+```jsx
+// Setiap page menggunakan struktur ini:
+<div className="page-wrapper">
+  <div className="page-header">
+    <h1 className="page-title">Judul</h1>
+    <p className="page-subtitle">Deskripsi</p>
+  </div>
+  <div className="page-content">
+    {/* konten */}
+  </div>
+</div>
+```
+
+## Komponen Hero (Home Page)
+
+```css
+.hero {
+  min-height: 100vh;
+  background: 
+    radial-gradient(ellipse at 20% 50%, hsl(220, 90%, 20%, 0.4) 0%, transparent 60%),
+    radial-gradient(ellipse at 80% 20%, hsl(38, 95%, 20%, 0.3) 0%, transparent 60%),
+    var(--color-bg-base);
+  display: flex;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,..."); /* subtle grid pattern */
+  opacity: 0.03;
+}
+```
+
+## Warna Kategori Aktivitas
+
+```javascript
+export const CATEGORY_COLORS = {
+  wisata: 'hsl(220, 90%, 56%)',
+  makan: 'hsl(142, 70%, 45%)',
+  transportasi: 'hsl(280, 70%, 60%)',
+  'check-in': 'hsl(38, 95%, 55%)',
+  lainnya: 'hsl(210, 20%, 55%)',
+};
+```
+
+## Warna Kategori Budget
+
+```javascript
+export const BUDGET_CATEGORY_COLORS = {
+  transportasi: '#4f8ef7',
+  akomodasi: '#a78bfa',
+  makan: '#34d399',
+  aktivitas: '#fbbf24',
+  'oleh-oleh': '#f87171',
+  lainnya: '#94a3b8',
+};
+```
+
+## Breakpoints
+
+```css
+/* Mobile first */
+/* xs: 0+ (default) */
+/* sm: 640+ */
+@media (min-width: 640px) { }
+/* md: 768+ */
+@media (min-width: 768px) { }
+/* lg: 1024+ */
+@media (min-width: 1024px) { }
+/* xl: 1280+ */
+@media (min-width: 1280px) { }
+```
+
+## Animasi Framer Motion Standar
+
+```javascript
+// Import di setiap komponen yang butuh animasi
+import { motion, AnimatePresence } from 'framer-motion';
+
+// Fade in dari bawah (item list, card)
+export const fadeInUp = {
+  initial: { opacity: 0, y: 24 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -12 },
+  transition: { duration: 0.3 }
+};
+
+// Stagger container
+export const staggerContainer = {
+  animate: {
+    transition: { staggerChildren: 0.08, delayChildren: 0.1 }
+  }
+};
+
+// Scale pop (modal, tooltip)
+export const scalePop = {
+  initial: { opacity: 0, scale: 0.92 },
+  animate: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.92 },
+  transition: { type: 'spring', stiffness: 300, damping: 24 }
+};
+
+// Slide in dari kiri (sidebar)
+export const slideInLeft = {
+  initial: { x: -300, opacity: 0 },
+  animate: { x: 0, opacity: 1 },
+  exit: { x: -300, opacity: 0 },
+  transition: { type: 'spring', stiffness: 260, damping: 28 }
+};
+```
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.oxlintrc.json b/.oxlintrc.json
new file mode 100644
index 0000000..1255078
--- /dev/null
+++ b/.oxlintrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..d515fcb
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,318 @@
+# 🗺️ AGENTS.md — Ready to Plan Tour (RPT)
+
+> **Dokumen ini adalah panduan utama untuk semua AI agent yang bekerja pada proyek ini.**
+> Jika model sebelumnya kehabisan token, baca dokumen ini terlebih dahulu sebelum melanjutkan pekerjaan.
+
+---
+
+## 📌 Konteks Proyek
+
+**Nama Aplikasi:** Ready to Plan Tour (RPT)
+**Singkatan:** RPT
+**Tipe:** Static Web Application (tidak ada backend, tidak ada login/logout)
+**Framework:** React.js (dengan Vite sebagai bundler)
+**Target:** Aplikasi perencanaan perjalanan wisata yang interaktif, kreatif, dan mandiri
+
+---
+
+## 🎯 Tujuan Aplikasi
+
+Membantu pengguna merencanakan perjalanan wisata secara lengkap dengan fitur:
+
+1. **Trip Selection** — Memilih destinasi wisata dan tipe perjalanan
+2. **Daily Schedule Builder** — Membuat jadwal harian aktivitas perjalanan (per hari)
+3. **Packing List Manager** — Mendaftar barang-barang yang akan dibawa
+4. **Budget Calculator** — Menghitung dan memantau anggaran perjalanan
+
+---
+
+## 🏗️ Arsitektur Aplikasi
+
+```
+tour-destination/
+├── AGENTS.md                    ← Dokumen ini
+├── .agents/
+│   ├── skills/
+│   │   ├── react-component/SKILL.md
+│   │   ├── state-management/SKILL.md
+│   │   ├── ui-design/SKILL.md
+│   │   └── feature-guide/SKILL.md
+│   └── rules/
+│       └── coding-standards.md
+├── public/
+│   └── assets/
+├── src/
+│   ├── main.jsx
+│   ├── App.jsx
+│   ├── index.css
+│   ├── components/
+│   │   ├── layout/
+│   │   ├── ui/
+│   │   ├── trip/
+│   │   ├── schedule/
+│   │   ├── packing/
+│   │   └── budget/
+│   ├── pages/
+│   │   ├── Home.jsx
+│   │   ├── TripDetail.jsx
+│   │   ├── Schedule.jsx
+│   │   ├── PackingList.jsx
+│   │   └── Budget.jsx
+│   ├── hooks/
+│   ├── store/
+│   │   └── tourStore.js
+│   ├── data/
+│   │   ├── destinations.js
+│   │   ├── activities.js
+│   │   └── packingTemplates.js
+│   └── utils/
+├── package.json
+└── vite.config.js
+```
+
+---
+
+## 🎨 Design System
+
+### Palet Warna (Dark Mode Default)
+```css
+--color-primary: hsl(220, 90%, 56%);
+--color-primary-dark: hsl(220, 90%, 42%);
+--color-accent: hsl(38, 95%, 55%);
+--color-bg-base: hsl(222, 28%, 8%);
+--color-bg-surface: hsl(222, 22%, 13%);
+--color-bg-elevated: hsl(222, 18%, 18%);
+--color-text-primary: hsl(210, 40%, 96%);
+--color-text-secondary: hsl(210, 20%, 65%);
+--color-success: hsl(142, 70%, 45%);
+--color-warning: hsl(38, 95%, 55%);
+--color-danger: hsl(0, 75%, 55%);
+```
+
+### Tipografi
+- Font Utama: Inter / Outfit (Google Fonts)
+- Font Display: Playfair Display (untuk hero heading)
+
+### Efek Visual
+- Glassmorphism pada card & modal
+- Gradient pada hero section
+- Micro-animations dengan Framer Motion
+- Smooth transitions: `cubic-bezier(0.4, 0, 0.2, 1)`
+
+---
+
+## 🔧 Tech Stack
+
+| Package | Versi | Kegunaan |
+|---|---|---|
+| react | ^18.x | Core framework |
+| react-dom | ^18.x | DOM rendering |
+| react-router-dom | ^6.x | Client-side routing |
+| zustand | ^4.x | Global state management |
+| framer-motion | ^11.x | Animasi |
+| lucide-react | latest | Icon library |
+| recharts | ^2.x | Chart budget |
+| @dnd-kit/core | ^6.x | Drag & drop jadwal |
+| @dnd-kit/sortable | ^7.x | Sortable list |
+| date-fns | ^3.x | Date utilities |
+
+**Bundler:** Vite ^5.x dengan plugin @vitejs/plugin-react
+
+---
+
+## 📋 Fitur Detail
+
+### 1. 🗺️ Trip Selection (Home Page)
+- Grid card destinasi wisata populer
+- Filter: kategori, durasi, budget range
+- Card: foto, nama, estimasi budget, rating, durasi populer
+- Tombol "Buat Trip Sendiri" untuk trip kustom
+- Search bar dengan autocomplete
+- State: `trip.id`, `trip.name`, `trip.destination`, `trip.startDate`, `trip.endDate`, `trip.totalDays`
+
+### 2. 📅 Daily Schedule Builder (Schedule Page)
+- Timeline visual per hari
+- Drag & drop aktivitas menggunakan @dnd-kit
+- Setiap aktivitas: waktu, nama, lokasi, durasi, kategori, catatan
+- Template aktivitas cepat
+- Modal form tambah aktivitas
+- State: `schedule[dayIndex][activities[]]`
+
+### 3. 🎒 Packing List Manager (PackingList Page)
+- Kategori: Pakaian, Dokumen, Elektronik, Obat-obatan, Toiletries, Lainnya
+- Template berdasarkan tipe trip
+- Checkbox checked/unchecked
+- Progress bar persentase sudah dipak
+- Quantity counter per item
+- State: `packingList[category][items[{name, qty, checked}]]`
+
+### 4. 💰 Budget Calculator (Budget Page)
+- Overview: Total Budget vs Pengeluaran vs Sisa
+- Kategori: Transportasi, Akomodasi, Makan, Aktivitas, Oleh-oleh, Lainnya
+- Pie chart per kategori, Bar chart per hari
+- Warning jika over budget
+- Currency: IDR default
+- State: `budget.total`, `budget.expenses[]`
+
+---
+
+## 🔄 Zustand Store Schema
+
+```javascript
+// src/store/tourStore.js — shape lengkap:
+{
+  trip: {
+    id: null,
+    name: '',
+    destination: '',
+    startDate: null,
+    endDate: null,
+    totalDays: 0,
+    coverImage: '',
+    type: 'custom', // 'preset' | 'custom'
+  },
+  schedule: [],       // Array per hari, tiap hari punya activities[]
+  packingList: {
+    Pakaian: [],
+    Dokumen: [],
+    Elektronik: [],
+    'Obat-obatan': [],
+    Toiletries: [],
+    Lainnya: [],
+  },
+  budget: {
+    total: 0,
+    currency: 'IDR',
+    expenses: [],
+  },
+  // Semua state di-persist ke localStorage via zustand/middleware/persist
+  // key: 'tour-planner-storage'
+}
+```
+
+---
+
+## 🚀 Setup Commands
+
+```bash
+# Inisialisasi
+npm create vite@latest . -- --template react
+npm install
+
+# Install semua dependencies
+npm install react-router-dom zustand framer-motion lucide-react recharts @dnd-kit/core @dnd-kit/sortable date-fns
+
+# Dev server
+npm run dev
+```
+
+---
+
+## 📏 Coding Standards
+
+Aturan lengkap di `.agents/rules/coding-standards.md`
+
+### Ringkasan Wajib:
+- ✅ Functional component + hooks (bukan class component)
+- ✅ CSS Variables dari design system (bukan Tailwind)
+- ✅ Zustand untuk state yang di-share
+- ✅ Framer Motion untuk semua animasi
+- ✅ Lucide React untuk semua icon
+- ✅ Data dummy di `src/data/`, bukan di dalam komponen
+- ✅ Mobile-first responsive (640 / 768 / 1024 / 1280px)
+- ❌ Jangan hardcode warna langsung di JSX
+- ❌ Jangan pakai emoji sebagai icon UI
+- ❌ Jangan pakai TailwindCSS
+
+---
+
+## 🚀 Phase Workflow (WAJIB DIBACA)
+
+Setiap fitur dikerjakan dalam fase yang berurutan dan tidak boleh dilompati.
+Aturan lengkap fase ada di `.agents/rules/phase-workflow.md`
+
+| Phase | Scope | Prasyarat |
+|-------|-------|-----------|
+| **Phase 0** | Project setup, dependencies, store, routing | — |
+| **Phase 1** | Layout & UI components dasar | Phase 0 selesai |
+| **Phase 2** | Home Page — Trip Selection | Phase 1 selesai |
+| **Phase 3** | Schedule Builder Page | Phase 2 selesai |
+| **Phase 4** | Packing List Page | Phase 3 selesai |
+| **Phase 5** | Budget Calculator Page | Phase 4 selesai |
+| **Phase 6** | Polish, responsive, animasi final | Phase 2–5 selesai |
+
+> ⚠️ Jika kamu agent baru: cek `task.md` untuk tahu fase mana yang sedang berjalan,
+> lalu baca `phase-workflow.md` untuk detail checklist fase tersebut.
+
+---
+
+## 🔁 Handoff Context (Untuk AI Agent Baru)
+
+> **BACA BAGIAN INI JIKA KAMU MELANJUTKAN PEKERJAAN YANG BELUM SELESAI**
+
+### Langkah 1 — Orientasi Cepat
+```bash
+# Lihat file yang sudah ada
+ls src/
+ls src/pages/
+ls src/components/
+cat src/store/tourStore.js
+```
+
+### Langkah 2 — Cek Status Task
+- Baca `task.md` di direktori artifacts agent
+- Baca `walkthrough.md` untuk ringkasan perubahan
+
+### Langkah 3 — Validasi Sebelum Lanjut
+Jawab dulu pertanyaan ini:
+1. Apakah `src/index.css` sudah punya CSS variables design system?
+2. Apakah `src/store/tourStore.js` sudah lengkap?
+3. Apakah React Router sudah dikonfigurasi di `src/App.jsx`?
+4. Page apa yang sudah selesai? (Home / Schedule / PackingList / Budget)
+
+### Prinsip TIDAK BOLEH Dilanggar:
+- ❌ Tidak ada fitur login/logout
+- ❌ Tidak ada API call ke backend
+- ❌ Tidak ada TailwindCSS
+- ❌ Tidak mengubah design token tanpa alasan jelas
+- ✅ Dark mode sebagai default
+- ✅ Animasi dengan Framer Motion
+- ✅ State persist ke localStorage
+
+---
+
+## 📝 Urutan Pengerjaan
+
+```
+Phase 1: Setup & Foundation
+  [ ] Init Vite + React
+  [ ] Install dependencies
+  [ ] Design system di index.css (CSS variables, typography, utilities)
+  [ ] Zustand store (tourStore.js)
+  [ ] React Router setup (App.jsx)
+
+Phase 2: Data Layer
+  [ ] src/data/destinations.js (min 10 destinasi)
+  [ ] src/data/activities.js (template aktivitas)
+  [ ] src/data/packingTemplates.js (template per tipe trip)
+
+Phase 3: Layout & UI Components
+  [ ] Navbar.jsx (dengan navigasi antar page)
+  [ ] Button.jsx, Card.jsx, Modal.jsx, Badge.jsx, ProgressBar.jsx
+
+Phase 4: Pages
+  [ ] Home.jsx (trip selection + search + filter)
+  [ ] Schedule.jsx (timeline + drag&drop)
+  [ ] PackingList.jsx (checklist + progress)
+  [ ] Budget.jsx (calculator + chart)
+
+Phase 5: Polish
+  [ ] Framer Motion animations
+  [ ] Responsive layout
+  [ ] localStorage persistence test
+```
+
+---
+
+*Versi: 1.0 | Dibuat: 2026-08-27*
+*Update dokumen ini jika ada perubahan arsitektur besar.*
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4450181
--- /dev/null
+++ b/README.md
@@ -0,0 +1,356 @@
+# 🗺️ Ready to Plan Tour (RPT)
+
+[![React](https://img.shields.io/badge/React-18.x-61DAFB?style=flat&logo=react&logoColor=black)](https://react.dev/)
+[![Vite](https://img.shields.io/badge/Vite-5.x-646CFF?style=flat&logo=vite&logoColor=white)](https://vitejs.dev/)
+[![Zustand](https://img.shields.io/badge/State-Zustand%20%2B%20Persist-443e38?style=flat)](https://zustand-demo.pmnd.rs/)
+[![Framer Motion](https://img.shields.io/badge/Animations-Framer%20Motion-0055FF?style=flat&logo=framer&logoColor=white)](https://www.framer.com/motion/)
+[![Recharts](https://img.shields.io/badge/Charts-Recharts-22b5bf?style=flat)](https://recharts.org/)
+[![Dnd Kit](https://img.shields.io/badge/Drag%20%26%20Drop-@dnd--kit-FC4A60?style=flat)](https://dndkit.com/)
+[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
+
+**Ready to Plan Tour (RPT)** adalah aplikasi *static web* perencanaan perjalanan wisata yang modern, kreatif, dan interaktif. Aplikasi ini dirancang untuk mempermudah pengguna menyusun seluruh aspek liburan—mulai dari memilih destinasi, menyusun jadwal harian per jam, mengelola daftar barang bawaan (*packing list*), hingga menghitung estimasi anggaran budget secara *real-time*.
+
+Aplikasi ini berjalan **100% di sisi klien (static web app tanpa backend, tanpa login/logout)** dengan sistem penyimpanan data otomatis ke `localStorage` browser.
+
+---
+
+## 📌 Daftar Isi
+1. [Fitur Utama](#-fitur-utama)
+2. [Detail Teknologi yang Digunakan](#-detail-teknologi-yang-digunakan)
+3. [Arsitektur & Struktur Folder](#-arsitektur--struktur-folder)
+4. [Persyaratan Sistem (Prerequisites)](#-persyaratan-sistem-prerequisites)
+5. [Cara Instalasi & Menjalankan Aplikasi](#-cara-instalasi--menjalankan-aplikasi)
+6. [Alur State Management & Penyimpanan Data](#-alur-state-management--penyimpanan-data)
+7. [Panduan Penggunaan Fitur](#-panduan-penggunaan-fitur)
+
+---
+
+## ✨ Fitur Utama
+
+### 1. 🧭 Trip Selection & Exploration (Home Page)
+- **Hero Section Visual:** Tipografi artistik Google Font *Playfair Display*, background *radial glow gradients*, dan lencana sorotan fitur.
+- **Koleksi 10+ Destinasi Populer:** Menampilkan destinasi eksotis Indonesia (Bali, Labuan Bajo, Jogja, Bromo, Raja Ampat, Bandung, Lombok) dan internasional (Tokyo, Seoul, Swiss Alps).
+- **Pencarian & Filter Cepat:** Filter instan berdasarkan kategori (*Pantai & Laut*, *Gunung & Alam*, *Budaya & Heritage*, *Kota Metropolitan*) serta sorting (*Paling Populer*, *Rating Tertinggi*, *Budget Terendah*, *Durasi Singkat*).
+- **Konfigurasi Trip Dinamis:** Form pengaturan nama trip, pemilihan rentang tanggal (auto-kalkulasi durasi hari), dan estimasi alokasi target budget.
+- **Trip Kustom Bebas:** Opsi merancang rencana perjalanan ke destinasi mana pun dengan cover foto dan preferensi kustom.
+
+### 2. 📅 Daily Schedule Builder (`/schedule`)
+- **Navigasi Tab Per Hari:** Tab interaktif (*Hari 1, Hari 2, ... Hari N*) dengan badge tanggal terformat dalam bahasa Indonesia dan counter aktivitas.
+- **Drag & Drop Interaktif (`@dnd-kit`):** Mengurutkan dan memindahkan jadwal aktivitas dengan sentuhan atau klik mouse (terproteksi sensor threshold 5px).
+- **Detail Aktivitas Kaya:** Jam mulai, durasi menit, garis warna & badge kategori (*Wisata, Kuliner, Transportasi, Hotel, Belanja, Santai, Lainnya*), lokasi kunjungan, dan catatan khusus.
+- **Template Aktivitas Cepat:** Menambahkan agenda umum hanya dalam 1 klik (*Sarapan Pagi, Check-in Hotel, Kunjungan Wisata, Makan Siang, Sunset Golden Hour, Makan Malam, Belanja Oleh-oleh*).
+- **Perpanjangan Hari Dinamis:** Tombol *"+ Tambah Hari"* untuk menambah durasi hari liburan kapan saja.
+
+### 3. 🎒 Packing List Manager (`/packing`)
+- **Visual Progress Bar Dinamis:** Menghitung persentase kesiapan barang secara *real-time* lengkap dengan status dinamis dan pesan selebrasi otomatis saat mencapai 100%.
+- **4 Template Bawaan Sesuai Tipe Trip:** Memuat template packing bawaan khusus *Trip Pantai*, *Trip Gunung*, *Trip Kota*, atau *Trip Budaya*.
+- **6 Kategori Perlengkapan:** *Pakaian, Dokumen, Elektronik, Obat-obatan, Toiletries, Lainnya*.
+- **Kontrol Interaktif:** Checkbox animasi spring Framer Motion, efek strikethrough, quantity counter (`- / +`), tombol *Centang Semua / Batalkan Semua*, dan form inline tambah item baru.
+- **Live Search Filter:** Pencarian nama barang secara instan.
+
+### 4. 💰 Budget Calculator (`/budget`)
+- **3 Kartu Ringkasan Anggaran:** *Target Total Budget* (dapat diedit langsung), *Total Pengeluaran Terpakai*, dan *Sisa Budget* dengan indikator warna cerdas:
+  - 🟢 **Hijau (*Aman & Terkendali*)** saat dana masih mencukupi.
+  - 🟡 **Kuning (*Mendekati Batas*)** saat pengeluaran mencapai $\ge 80\%$.
+  - 🔴 **Merah (*Over Budget!*)** saat pengeluaran melampaui batas anggaran.
+- **Banner Peringatan Defisit:** Muncul otomatis dengan nominal defisit saat over-budget.
+- **Visualisasi Grafik Recharts:**
+  - 🥧 **Donut / Pie Chart:** Proporsi pengeluaran berdasarkan pos kategori dengan legend persentase & custom glassmorphism tooltip.
+  - 📊 **Bar Chart:** Distribusi pengeluaran per hari perjalanan (*Hari ke-1, Hari ke-2*, dst.).
+- **Multi-Currency Toggle:** Kemudahan beralih antara mata uang **IDR** (Rupiah), **USD** (\$), dan **EUR** (€).
+- **Riwayat Pengeluaran:** Filter kategori pengeluaran, pengelompokan hari ke-N, modal edit, dan hapus transaksi.
+
+### 5. 🔔 Toast Notification & Utility System
+- **Global Toast Notification:** Notifikasi mengambang (*Floating Toast*) dengan animasi geser untuk feedback aksi sukses, info, peringatan, atau penghapusan data.
+- **Modal Konfirmasi Reset Trip:** Fitur reset data yang aman dengan dialog konfirmasi sebelum menghapus memori `localStorage`.
+- **Navigasi Sticky Glassmorphism:** Header navigasi transparan dengan drawer menu responsif di smartphone/tablet.
+
+---
+
+## 🛠️ Detail Teknologi yang Digunakan
+
+Aplikasi ini dibangun menggunakan arsitektur modern web berbasis komponen tanpa ketergantungan pada backend server:
+
+| Teknologi / Library | Versi | Peran & Alasan Penggunaan |
+|---|---|---|
+| **React.js** | `^18.x` | Library inti antarmuka berbasis komponen modular (*functional components* dan *React Hooks*). |
+| **Vite** | `^5.x` | Build tool dan bundler super cepat dengan fitur *Hot Module Replacement (HMR)* instan untuk pengembangan frontend modern. |
+| **React Router DOM** | `^6.x` | Pengatur navigasi dan routing multi-halaman sisi klien (*Client-Side Routing*) tanpa *page reload*. |
+| **Zustand** | `^4.x` | Library manajemen state global yang ringan, fleksibel, dan memiliki performa tinggi tanpa boilerplate seperti Redux. |
+| **Zustand Persist Middleware** | Bawaan Zustand | Menyimpan dan menyinkronkan seluruh state aplikasi ke `localStorage` secara otomatis agar data tidak hilang saat browser di-refresh. |
+| **Framer Motion** | `^11.x` | Mesin animasi deklaratif untuk transisi halaman, efek hover (*micro-interactions*), modal pop-up spring, dan animasi checkbox. |
+| **@dnd-kit/core & @dnd-kit/sortable** | `^6.x / ^7.x` | Library drag and drop modern, teroptimasi performa, dan mendukung aksesibilitas keyboard serta touch screen di mobile. |
+| **Recharts** | `^2.x` | Library visualisasi data berbasis SVG deklaratif untuk menggambar Donut/Pie Chart kategori dan Bar Chart anggaran per hari. |
+| **Lucide React** | Latest | Kumpulan ikon SVG modern, konsisten, tajam, dan ringan. |
+| **date-fns** | `^3.x` | Library utilitas manipulasi tanggal untuk format tanggal bahasa Indonesia (`date-fns/locale/id`) dan perhitungan selisih hari. |
+| **CSS Variables & Glassmorphism** | Vanilla CSS | Desain token HSL murni, efek *backdrop-filter blur*, bayangan glow, dan tata letak CSS Grid/Flexbox yang responsif tanpa dependensi CSS framework berat. |
+
+---
+
+## 📁 Arsitektur & Struktur Folder
+
+```
+tour-destination/
+├── index.html                     # File HTML utama, memuat Google Fonts (Inter, Outfit, Playfair Display)
+├── package.json                   # Konfigurasi dependensi project dan script npm
+├── vite.config.js                 # Konfigurasi Vite & React plugin
+├── README.md                      # Dokumentasi lengkap proyek
+├── AGENTS.md                      # Pedoman dan konteks pengerjaan AI Agent
+├── task.md                        # Tracking status fase pengerjaan (Phase 0 - 6)
+│
+├── .agents/                       # Direktori aturan dan skill AI
+│   ├── rules/
+│   │   ├── coding-standards.md    # Aturan baku penulisan kode
+│   │   └── phase-workflow.md      # Alur pengerjaan berfase
+│   └── skills/                    # Skill cheatsheets (react-component, state-management, ui-design, feature-guide)
+│
+├── public/                        # File aset statis publik (favicon, svg icons)
+│
+└── src/
+    ├── main.jsx                   # Entry point aplikasi React
+    ├── App.jsx                    # Root component, konfigurasi React Router & Global Toast
+    ├── index.css                  # Design System utama (CSS Variables, Typography, Glassmorphism, Utilities)
+    │
+    ├── components/                # Komponen antarmuka modular
+    │   ├── layout/
+    │   │   ├── Navbar.jsx         # Header sticky glassmorphism + mobile drawer + Reset Modal
+    │   │   ├── Footer.jsx         # Footer branding, link navigasi, dan info trip aktif
+    │   │   └── PageWrapper.jsx    # Wrapper transisi halaman Framer Motion
+    │   │
+    │   ├── ui/                    # Komponen UI atomik
+    │   │   ├── Button.jsx         # Tombol multi-variant, loading spinner, whileHover & whileTap
+    │   │   ├── Card.jsx           # Kartu glassmorphism dengan efek hover lift
+    │   │   ├── Modal.jsx          # Modal dialog interaktif dengan focus trap & escape key
+    │   │   ├── Badge.jsx          # Badge status dan kategori
+    │   │   ├── ProgressBar.jsx    # Progress bar animasi dengan gradient dinamis
+    │   │   ├── EmptyState.jsx     # Tampilan placeholder saat data kosong
+    │   │   └── ToastContainer.jsx # Wadah notifikasi mengambang (Floating Toasts)
+    │   │
+    │   ├── trip/                  # Komponen fitur Trip Selection
+    │   │   ├── HeroSection.jsx    # Banner hero dengan tipografi Playfair Display & CTA
+    │   │   ├── FilterBar.jsx      # Search bar, filter pills kategori, dan dropdown sorting
+    │   │   ├── TripCard.jsx       # Kartu destinasi 16:10 dengan overlay & hover effects
+    │   │   ├── TripModal.jsx      # Modal konfigurasi destinasi preset
+    │   │   └── CustomTripModal.jsx# Modal pembuatan rencana trip kustom
+    │   │
+    │   ├── schedule/              # Komponen fitur Daily Schedule
+    │   │   ├── DayTabs.jsx        # Tab navigasi hari + tombol tambah hari
+    │   │   ├── ScheduleTimeline.jsx # Timeline vertikal terintegrasi DnD Kit
+    │   │   ├── ActivityItem.jsx   # Item aktivitas draggable dengan kategori stripe & actions
+    │   │   └── AddActivityModal.jsx# Modal form tambah & edit aktivitas + template cepat
+    │   │
+    │   ├── packing/               # Komponen fitur Packing List
+    │   │   ├── PackingOverview.jsx# Widget ringkasan progress % & status selebrasi
+    │   │   ├── PackingCategory.jsx# Accordion kategori collapsible dengan form inline
+    │   │   ├── PackingItem.jsx    # Item checklist dengan animasi checkbox & counter kuantitas
+    │   │   └── TemplateModal.jsx  # Modal pemilihan template bawaan (Pantai, Gunung, Kota, Budaya)
+    │   │
+    │   └── budget/                # Komponen fitur Budget Calculator
+    │       ├── BudgetOverview.jsx # 3 Kartu statistik alokasi & status over-budget
+    │       ├── BudgetChart.jsx    # Donut Pie Chart & Bar Chart Recharts
+    │       ├── AddExpenseModal.jsx# Form modal catat & edit pengeluaran
+    │       └── ExpenseList.jsx    # Daftar rincian pengeluaran dengan filter kategori
+    │
+    ├── pages/                     # Halaman rute utama
+    │   ├── Home.jsx               # Halaman pilih destinasi & eksplorasi trip
+    │   ├── Schedule.jsx           # Halaman susun jadwal harian (Drag & Drop)
+    │   ├── PackingList.jsx        # Halaman checklist barang bawaan
+    │   └── Budget.jsx             # Halaman kalkulator & grafik pengeluaran
+    │
+    ├── store/                     # Global State Management (Zustand)
+    │   ├── tourStore.js           # Store utama (trip, schedule, packingList, budget) + localStorage persist
+    │   └── toastStore.js          # Store notifikasi toast
+    │
+    ├── hooks/                     # Custom React Hooks
+    │   ├── useTripStore.js        # Hook pengelolaan data trip
+    │   ├── useSchedule.js         # Hook manipulasi jadwal & aktivitas
+    │   ├── usePackingList.js      # Hook pengelolaan packing list & kalkulasi persentase
+    │   └── useBudget.js           # Hook kalkulasi budget, pengeluaran, dan breakdown
+    │
+    ├── data/                      # Dataset dummy & template bawaan
+    │   ├── destinations.js        # 10 data destinasi unggulan beserta foto & info
+    │   ├── activities.js          # Kategori aktivitas, warna, dan template cepat
+    │   └── packingTemplates.js    # Template packing (pantai, gunung, kota, budaya)
+    │
+    └── utils/                     # Fungsi utilitas pembantu
+        ├── formatCurrency.js      # Formatter IDR, USD, EUR
+        ├── dateHelpers.js         # Format tanggal Indonesia & kalkulasi durasi hari
+        └── helpers.js             # Generator ID unik, clamp, dan truncate text
+```
+
+---
+
+## 💻 Persyaratan Sistem (Prerequisites)
+
+Sebelum menjalankan aplikasi, pastikan komputer Anda telah terinstal:
+- **Node.js**: Versi `18.x` atau lebih baru (Disarankan versi LTS).
+- **npm** (Node Package Manager) versi `9.x` atau yang lebih baru (otomatis terpasang bersama Node.js) atau **yarn** / **pnpm**.
+- **Browser Modern**: Google Chrome, Microsoft Edge, Mozilla Firefox, Brave, atau Safari versi terbaru.
+
+Untuk mengecek instalasi Node.js dan npm di terminal:
+```bash
+node -v
+npm -v
+```
+
+---
+
+## 🚀 Cara Instalasi & Menjalankan Aplikasi
+
+Ikuti langkah-langkah mudah berikut untuk menjalankan aplikasi di komputer lokal:
+
+### 1. Masuk ke Direktori Project
+Buka Terminal / Command Prompt / PowerShell, lalu arahkan ke folder proyek:
+```bash
+cd "lokasi proyek"
+```
+
+### 2. Install Dependensi Proyek
+Jalankan perintah berikut untuk mengunduh seluruh package yang dibutuhkan:
+```bash
+npm install
+```
+
+### 3. Jalankan Development Server
+Mulai server pengembangan lokal dengan perintah:
+```bash
+npm run dev
+```
+
+Output di terminal akan menampilkan URL lokal seperti berikut:
+```text
+  VITE v5.x.x  ready in 250 ms
+
+  ➜  Local:   http://localhost:5173/
+  ➜  Network: use --host to expose
+```
+
+### 4. Buka Aplikasi di Browser
+Buka peramban web Anda dan akses alamat:
+👉 **[http://localhost:5173/](http://localhost:5173/)**
+
+---
+
+## 📦 Build untuk Produksi (Production Build)
+
+Jika Anda ingin membuat bundle produksi yang telah dioptimasi (*minified & compressed*):
+
+```bash
+# Membuat bundle produksi di folder /dist
+npm run build
+
+# Menjalankan preview lokal dari hasil build produksi
+npm run preview
+```
+
+Hasil build di folder `dist/` berupa file HTML, JS, dan CSS statis murni yang siap di-*deploy* ke hosting statis seperti **Vercel**, **Netlify**, **GitHub Pages**, atau **Cloudflare Pages**.
+
+---
+
+## 🔄 Alur State Management & Penyimpanan Data
+
+Aplikasi menggunakan **Zustand** yang dikombinasikan dengan middleware `persist`. Seluruh perubahan data langsung disinkronkan ke `localStorage` browser pengguna dengan kunci:
+`tour-planner-storage`
+
+```mermaid
+graph TD
+    A[Pengguna Berinteraksi di UI] --> B[Memanggil Action di Zustand Store]
+    B --> C[State Terupdate Secara Reaktif di Komponen]
+    B --> D[Middleware Persist Menyimpan State ke localStorage]
+    D --> E[(Browser localStorage)]
+    E -.->|Saat Halaman Direfresh / Dibuka Kembali| B
+```
+
+### Struktur Skema Data:
+```javascript
+{
+  trip: {
+    id: 'dest-bali-01',
+    name: 'Liburan Impian ke Bali',
+    destination: 'Bali (Island of Gods)',
+    location: 'Bali, Indonesia',
+    startDate: '2026-08-27',
+    endDate: '2026-08-30',
+    totalDays: 4,
+    coverImage: 'https://images.unsplash.com/...',
+    type: 'preset', // 'preset' | 'custom'
+    category: 'pantai'
+  },
+  schedule: [
+    {
+      dayNumber: 1,
+      date: '2026-08-27',
+      activities: [
+        {
+          id: 'act-uuid',
+          time: '08:00',
+          name: 'Sarapan Pagi di Kafe Pantai',
+          location: 'Sanur Beach',
+          duration: 60,
+          category: 'makan',
+          notes: 'Mencoba menu lokal'
+        }
+      ]
+    }
+  ],
+  packingList: {
+    Pakaian: [{ id: 'item-1', name: 'Baju renang', qty: 2, checked: true }],
+    Dokumen: [{ id: 'item-2', name: 'KTP / Paspor', qty: 1, checked: false }],
+    Elektronik: [],
+    'Obat-obatan': [],
+    Toiletries: [],
+    Lainnya: []
+  },
+  budget: {
+    total: 5000000,
+    currency: 'IDR',
+    expenses: [
+      {
+        id: 'exp-1',
+        name: 'Tiket Pesawat PP',
+        amount: 1800000,
+        category: 'transportasi',
+        day: 1,
+        notes: 'Penerbangan pagi'
+      }
+    ]
+  }
+}
+```
+
+---
+
+## 📖 Panduan Penggunaan Fitur
+
+1. **Memulai Perjalanan Baru:**
+   - Masuk ke halaman utama (*Home*).
+   - Pilih salah satu destinasi kartu wisata atau klik tombol **"Buat Trip Kustom"**.
+   - Tentukan nama rencana trip, tanggal mulai & selesai (durasi hari otomatis dihitung), dan target budget.
+   - Klik **"Mulai Buat Jadwal"**.
+
+2. **Menyusun Jadwal Harian:**
+   - Pilih tab **Hari 1, Hari 2, dst.**
+   - Klik tombol **"Tambah Aktivitas"** atau klik **Template Cepat** (*Sarapan, Check-in, Wisata, dll.*).
+   - Ubah urutan aktivitas dengan cara men-drag icon titik di sebelah kiri kartu aktivitas.
+
+3. **Mengelola Checklist Barang Bawaan:**
+   - Buka menu **Packing List**.
+   - Template barang akan otomatis terisi sesuai kategori trip (dapat diganti melalui tombol *Template Bawaan*).
+   - Klik pada item untuk menandai barang yang sudah masuk ke koper.
+   - Gunakan tombol `+` / `-` untuk menyesuaikan jumlah barang.
+
+4. **Memantau Pengeluaran & Anggaran:**
+   - Buka menu **Budget**.
+   - Klik tombol **"Ubah"** pada Target Total Budget untuk menyesuaikan batas anggaran.
+   - Klik **"Tambah Biaya"** untuk mencatat tiket, hotel, makanan, atau belanja oleh-oleh.
+   - Pantau grafik lingkaran (*Pie Chart*) untuk melihat kategori yang paling banyak menyerap anggaran.
+
+---
+
+## 📄 Lisensi
+
+Proyek ini dilisensikan di bawah **MIT License**. Bebas dikembangkan dan dimodifikasi untuk keperluan edukasi, portofolio, maupun produksi.
+
+---
+
+*Ready to Plan Tour (RPT) — Rencanakan Liburan Impianmu dengan Mudah, Cerdas, dan Terstruktur.*
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cb61356
--- /dev/null
+++ b/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="id">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Ready to Plan Tour (RPT) — Rencanakan perjalanan wisata impian Anda, susun jadwal harian interaktif, kelola checklist barang bawaan, dan kalkulasi budget secara cerdas." />
+    <title>Ready to Plan Tour (RPT) — Smart Trip & Budget Planner</title>
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..6f4f9da
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1925 @@
+{
+  "name": "temp-init",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "temp-init",
+      "version": "0.0.0",
+      "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "date-fns": "^4.4.0",
+        "framer-motion": "^13.1.1",
+        "lucide-react": "^1.34.0",
+        "react": "^19.2.8",
+        "react-dom": "^19.2.8",
+        "react-router-dom": "^7.18.2",
+        "recharts": "^3.10.1",
+        "zustand": "^5.0.15"
+      },
+      "devDependencies": {
+        "@types/react": "^19.2.18",
+        "@types/react-dom": "^19.2.4",
+        "@vitejs/plugin-react": "^6.1.0",
+        "oxlint": "^1.79.0",
+        "vite": "^8.2.2"
+      }
+    },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.147.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.147.0.tgz",
+      "integrity": "sha512-IJ3s6ltHLp45S0bh7phkX+gJO7A1Wuz2EaqpAhb8WjqDwbzMiWKHhyyT42tskaWjEYXtHtVCPpnBJVT9+dcRLg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@oxlint/binding-android-arm-eabi": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm-eabi/-/binding-android-arm-eabi-1.80.0.tgz",
+      "integrity": "sha512-RM3Plj+biQpxa5d1GOOX6ciDlcUROmm4OZ/pLTpitkQt2mJv4jhtY4cbgaetOm5UKWZe05/TGQ6o1Vl8EOHkrA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-android-arm64": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm64/-/binding-android-arm64-1.80.0.tgz",
+      "integrity": "sha512-YlO5JEf0Yr2bUUlu8O8daVcUxtcGGbcSmyV7E7nSbJbfAdxTE0PFPwgnIlw7wXJaTYjb+qs5hI5q3jxUkI7cAw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-darwin-arm64": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-arm64/-/binding-darwin-arm64-1.80.0.tgz",
+      "integrity": "sha512-BULDOyO3AhsmdWfQeIUCykDt3dd7XZBGLhp1eIh56skRv01O+cNjNPwXMIbeW1x4+pxcln5if72wcRgViVo7PA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-darwin-x64": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-x64/-/binding-darwin-x64-1.80.0.tgz",
+      "integrity": "sha512-YJ4JzLw7N5TDSQFlA0hAQGHvnDZgyypm1yunObVWcWiF9KM7eGCJKYKLgTC2Fi/57OdnBhbj4OkzPGdFQJ6HyA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-freebsd-x64": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-freebsd-x64/-/binding-freebsd-x64-1.80.0.tgz",
+      "integrity": "sha512-AYUIk5QnL0s8oWAYsREZwkRYy1SupJTXALo93J1TgzHywxQtdM99FecRMQ87MXEdPQ0j1TmEpeeq3fGNkpvMqg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm-gnueabihf": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.80.0.tgz",
+      "integrity": "sha512-9hBZVANupQ89W9dXyE0n8doCyaW5pDyGn3y6XlIMPZ+rIKuyqkr3SNUXmVJIhuvUq0NBU3RBiSXXE69l4XI6KA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm-musleabihf": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-1.80.0.tgz",
+      "integrity": "sha512-SvS2uKqzY+pbfuvAHzH4338R6Zwo805GAwrIMVvK1KxoOWCIjZUdfzTCvilD7z6JK91v011+zYMryabhDo2AsQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm64-gnu": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.80.0.tgz",
+      "integrity": "sha512-tCLadyqRVL3pQTRPNg7cjXKvcvS4fbyXeQHhKk5BTJ1oftQln5/yIIWbu/Xom/DX41zv2P9QGt6+D/TtQVtY3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm64-musl": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.80.0.tgz",
+      "integrity": "sha512-XfpCNRlOPcLlJl4Bn/FUhjqlR6BVavEykERBf/MV7YA9VZDa5g5znVqYhyviMafcxS9Pe/i/kPvHNO0U6svEHQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-ppc64-gnu": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.80.0.tgz",
+      "integrity": "sha512-3I4yMwcFG9NeO8ioY6JBBuKsIm5GL/x7MATt1S4tVWaxPu5HcJ+XnLUbcVBTxG8q2Wu56HSj+NmXQiVYb1lp6A==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-riscv64-gnu": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-1.80.0.tgz",
+      "integrity": "sha512-E1wAKymkpe1/E8helzBKdm81OBOF+ezxRyXRMEuik3ZpWDER5CPOKZwF66RsdwW98uwZv8UTFremUQtC1CzdJA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-riscv64-musl": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-1.80.0.tgz",
+      "integrity": "sha512-+gLRGD4sIo3+VA++iham5UxD9tKSoJ/VOrROCEXIcknrYtQg6iIQgvjN0cpiRF7N6UYC7pJbvHJlDnMge5LRpQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-s390x-gnu": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.80.0.tgz",
+      "integrity": "sha512-aR0PrzHj9leW3NmzBAAP4EzdoBNoJcs9sjnIQPIwyRnBGYrRbXUIpEB5Q39AqK3PLY5JK5uEhDQDiUa1QSAstw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-x64-gnu": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.80.0.tgz",
+      "integrity": "sha512-vSVh5cSo3Xxs6ghBCcFJlpbkbENzDog1qXtoXLa/HC3aCrR4XO76GZbXmQoCPHnu99nQpdCeC3H9tdNICfDh7A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-x64-musl": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-musl/-/binding-linux-x64-musl-1.80.0.tgz",
+      "integrity": "sha512-FfzBXpNQ8u7/ZI/p8bl73MeZ508Ax3hxWp3SiJpEFiC+BB9XcXy5FAZHTLKDPSzrUpxQZSZJAVdDmuJp/+HDBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-openharmony-arm64": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-openharmony-arm64/-/binding-openharmony-arm64-1.80.0.tgz",
+      "integrity": "sha512-zMzbkumtmprCgRwoYNzcB3iC39fXdJIMLMU33KdCjEGLlJGOEt1+LwQ4LF8ndLzAEKVz4BR0y3V6Xrkk3Nm3yA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-win32-arm64-msvc": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.80.0.tgz",
+      "integrity": "sha512-ib6iRcrXsk4t1fm3iKcwksyWh1ZkZXC/2mEzakl0ai2+6HZunf1WWMZ/xP9EJAvw9g9K4UVTC3NF/+G2qLrbTQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-win32-ia32-msvc": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.80.0.tgz",
+      "integrity": "sha512-xhRWBMpLxZvgKAH6+DJZmpP+W8Y8UdQOSU1JfxSWNXsaBaRGW77j+1hCuNHlzj7OH4SPN8fYd1q0o2qrDtoVyw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-win32-x64-msvc": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.80.0.tgz",
+      "integrity": "sha512-yAnO7lwBYQnz2pcfBPIGQQZWIX5zd5R/1aAKIF3oE+TVj7IhoHcROjOkz3sRDngzqhfPKfFaXqug5j5rE5dn6Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+      "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm-eabi": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.6.tgz",
+      "integrity": "sha512-b+jTcARdTiFLI6jB4a5XjTm0RWd6KcRfQj/I2356fxUZemiho9zQLxo0RtCuMDAyKcLo6cEltkgbQp6d1+sjjQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.6.tgz",
+      "integrity": "sha512-lkWU8ZJaRk9q3CIEY1Tc7vIFALp3Xw5NfGJo2hQg5oIqNgxWi1zI+IiDEK3r70BF5Dzol1tcXsnzsRc8NLhG+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.6.tgz",
+      "integrity": "sha512-dgR56NYnvAszm7Ob1B2/Vn0e8bUQYZH2UjVaMMtMVOCKFSfjhfLmuA/9+O+F+ajUdG6B/bSssrKW6JJYASa8jA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.6.tgz",
+      "integrity": "sha512-vpVxFvUCFioJqug7OTvqptkc4yb8UX0AwfDmJpaR/0sWz+BUmqSVAf7c8JkUgnN8YLspb4a/N6NhTyMAmdyQ7Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.6.tgz",
+      "integrity": "sha512-h1wG6Y6K3JlRswxsI64qQJqBAy4vrLuHgRbc8CZMGSWTOFRY6ghMApM1NKzB2I0n5xV1fjkE18SuVl2QpLeNpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.6.tgz",
+      "integrity": "sha512-tbCiqub0q2MVWJKgF5PoAlNWCtQydiOYSLIkd8sByqK/6MMYLJRcSXSYodqYtd0O+Fw7QaVmKKlS4oL94YRZ0w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.6.tgz",
+      "integrity": "sha512-oxK9+baEBPhZG5HB4URY+uU04zJWeZlH6Tb9rB5DK4DF9XR1uXNLXt5Q5ZsugTKayNCNLhkcwz/ye74hRI98dg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.6.tgz",
+      "integrity": "sha512-muWCk27FVBEZtv0MsK8gnfSmgczA8KQ0uRVJbTABKhkRfQc38aUrcb7fhi3BNiyseFmgcRsoMfQsSNJ+DbZdSw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.6.tgz",
+      "integrity": "sha512-eWDoSfU7Co2qj3vgB3Dt4lj1mG6CoWbcJQkRMP3XJplyCMtuaq3LHvPFjS9QIPvMGWVadJC04Xiy0IdcVPtnwQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.6.tgz",
+      "integrity": "sha512-2bWNjRSIayvupRKxXUY2tWG9fYdoUlTqWywHRvE8Eq3GvuQ+f2HeIkve697fIt+IQs/PV8yFsdWuhp1aJ1PdnA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.6.tgz",
+      "integrity": "sha512-KekI0gS0wLxe1UBSQSjenBVwou/JkcQPDzBPICGZjxUv9k3RteHDPBQaiOicZUFKRIH2wKEimGwVpnJsbPzu7w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.6.tgz",
+      "integrity": "sha512-TvtPnfVr+HtyGiDmPK4VWmlNm7QhNNAcK5Q9A7aOXsI8545yCyaoMaicXrFZ72JzeYjaUVk7yT243zT0jzjFKQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.6.tgz",
+      "integrity": "sha512-iOo0VEay2XFhaCcH0sps5XIimkSuOnNaZrf6+ZkoSOQBJPKNU48RkmJv0/lSpipexu5P+ouFgafe5IGr/DiQfg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.6.tgz",
+      "integrity": "sha512-y5NTmmasMS455JlOCO4ZM9krIchv3Mvm1crL1iUPGOPgEzSkves9n0SdC5Sjz6+qWDFhd8/JpfWMH8NSWNHe+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.6.tgz",
+      "integrity": "sha512-np8iZSLfXlAD4kWhiyq/u0Yt8oZDtRQ8lGhQaCXo2rl37KNjeU0GjJuwr4P3oeZ++ROfofsKNBqR5LTO8aXyWQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-kVd74ta9eof3eJOvbNd1vGKS/XERRyQbT26Og63hIsvDO84cjD5gEOhsXf26w3FSoNlPVz84DOFcKv/oou+fMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz",
+      "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.5.tgz",
+      "integrity": "sha512-fMPwH9v7r/pp43yUd2/Mbiex5KouJwwR3dzHkhLREUC6764VyDsqxhAxv6OFEYR1RhjOyD1naqba8ECDBe7ZQg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.1.0.tgz",
+      "integrity": "sha512-qd2BzUBehkov86WFhg0JkEFEYyCLG9uPCe6qWTY/kRlss9OvJrOF2UbIWT7p+8IzZHkEu0DNGHc4HSv+JdDLsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+        "babel-plugin-react-compiler": "^1.0.0",
+        "oxc-transform-react": "^0.145.0",
+        "vite": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rolldown/plugin-babel": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "oxc-transform-react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.4.0.tgz",
+      "integrity": "sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/es-toolkit": {
+      "version": "1.51.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.51.0.tgz",
+      "integrity": "sha512-zC2lQGkM7QX+Gm6iM3+WIdZJzthsEd14LvRNJneSO2hzyz/zNBENR8+YXWo1cKxgPBtV6ksPYHELbcwBRzmdCw==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks",
+        "tests/types",
+        "tests/browser-compat"
+      ]
+    },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/framer-motion": {
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-13.1.1.tgz",
+      "integrity": "sha512-B/xn2TPS4f61cEBLFjiYlQFnBZUW1YVj/LM+C+N4OP8Rs95VLEI2ot/RlfBg111la/EiyECFaJJi/A3FWA8MUA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^13.1.1",
+        "motion-utils": "^13.0.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/immer": {
+      "version": "11.1.18",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.18.tgz",
+      "integrity": "sha512-EQyQtLiYW029lyoczMl/Hh4Xu7cDecSc58JRYpHyL4tIAu3eqd1yJzQX04d2BZHDkzFFvm6qJEJWOtfDSWAXbQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
+      "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.33.0",
+        "lightningcss-darwin-arm64": "1.33.0",
+        "lightningcss-darwin-x64": "1.33.0",
+        "lightningcss-freebsd-x64": "1.33.0",
+        "lightningcss-linux-arm-gnueabihf": "1.33.0",
+        "lightningcss-linux-arm64-gnu": "1.33.0",
+        "lightningcss-linux-arm64-musl": "1.33.0",
+        "lightningcss-linux-x64-gnu": "1.33.0",
+        "lightningcss-linux-x64-musl": "1.33.0",
+        "lightningcss-win32-arm64-msvc": "1.33.0",
+        "lightningcss-win32-x64-msvc": "1.33.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz",
+      "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz",
+      "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz",
+      "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz",
+      "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz",
+      "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz",
+      "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz",
+      "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz",
+      "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz",
+      "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz",
+      "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz",
+      "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "1.34.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.34.0.tgz",
+      "integrity": "sha512-vnjGJNI7Htk5+oWW8gXGuaLgwgAb0T6/iZbBrp9JCfRFwdNWZ0YTm3eyxjOLgwN6r8iyAf3UA70zNmBRBNv7yg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-13.1.1.tgz",
+      "integrity": "sha512-XSf8VYWSB6G/0IY3rWVbyLcxWXtAVHkN1PQE2agTaCv3u8RGvbwu56TyyR/MNzBqqNavEBTZzErcxI1TxBrjcA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^13.0.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-13.0.0.tgz",
+      "integrity": "sha512-7DnN7TmbLcYXcG4RVadXIihWlyuM9afoUww8Y5Agg431kGKiuL2/OMyP4mJ5wLz+pvN3t5ySClLOaVXJ+wekRQ==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/oxlint": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/oxlint/-/oxlint-1.80.0.tgz",
+      "integrity": "sha512-5nTiSps4qdbCWLbxzuO00alHkEO2exR9YMN/ig6QXWrLsYSG0KaObOAM+l6oU2LcKPWoSAGYbkZIGEu1ViiWKA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "oxlint": "bin/oxlint"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      },
+      "optionalDependencies": {
+        "@oxlint/binding-android-arm-eabi": "1.80.0",
+        "@oxlint/binding-android-arm64": "1.80.0",
+        "@oxlint/binding-darwin-arm64": "1.80.0",
+        "@oxlint/binding-darwin-x64": "1.80.0",
+        "@oxlint/binding-freebsd-x64": "1.80.0",
+        "@oxlint/binding-linux-arm-gnueabihf": "1.80.0",
+        "@oxlint/binding-linux-arm-musleabihf": "1.80.0",
+        "@oxlint/binding-linux-arm64-gnu": "1.80.0",
+        "@oxlint/binding-linux-arm64-musl": "1.80.0",
+        "@oxlint/binding-linux-ppc64-gnu": "1.80.0",
+        "@oxlint/binding-linux-riscv64-gnu": "1.80.0",
+        "@oxlint/binding-linux-riscv64-musl": "1.80.0",
+        "@oxlint/binding-linux-s390x-gnu": "1.80.0",
+        "@oxlint/binding-linux-x64-gnu": "1.80.0",
+        "@oxlint/binding-linux-x64-musl": "1.80.0",
+        "@oxlint/binding-openharmony-arm64": "1.80.0",
+        "@oxlint/binding-win32-arm64-msvc": "1.80.0",
+        "@oxlint/binding-win32-ia32-msvc": "1.80.0",
+        "@oxlint/binding-win32-x64-msvc": "1.80.0"
+      },
+      "peerDependencies": {
+        "oxlint-tsgolint": ">=7.0.2001",
+        "vite-plus": "*"
+      },
+      "peerDependenciesMeta": {
+        "oxlint-tsgolint": {
+          "optional": true
+        },
+        "vite-plus": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz",
+      "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.17",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz",
+      "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz",
+      "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.8"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.8.tgz",
+      "integrity": "sha512-s5un28nYxKJw5gvUHyW5PCC28CvBqLu9r3cWgzHT4Vo/5fqqkFcdRYsGcKf50WMPpjjFZS5d76fn3YCo2njKwQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/react-redux": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.2.tgz",
+      "integrity": "sha512-aUVMjFm3GAPTTZL7oYr5E7ETiqfQCHRLH+B+5afnICvf0r7kkK4eR6SMuwbSTJw/7t+12khT/Kahij49fqOCIg==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.2.tgz",
+      "integrity": "sha512-AIKJ/jgGlFb3EbfCXk5Gzshiwt+l3mqbCrNjmEWMMjqQxNJ3svBa6bgzFyCC2Sw3RA0VWF1kg3uQf2OFhxb8hw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.18.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/recharts": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.10.1.tgz",
+      "integrity": "sha512-QXFrvt6IVcw7eeZCoyXTwkIJAX3Dv1nyVhMicXJ47GsGDDpcN8z6o644DibE9XjpBTThtsomLKnTV6lc+cVFUA==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^11.1.8",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.2.0",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
+      "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==",
+      "license": "MIT"
+    },
+    "node_modules/rolldown": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.6.tgz",
+      "integrity": "sha512-vMM4q3aixf46GiF1Kok8jDPFsEpXgFWGjUHXNkNHNm+Y2adXAG2dbX91jkti3i0ZRsOlcmbuzAz1poObSHCmUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.147.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm-eabi": "1.2.6",
+        "@rolldown/binding-android-arm64": "1.2.6",
+        "@rolldown/binding-darwin-arm64": "1.2.6",
+        "@rolldown/binding-darwin-x64": "1.2.6",
+        "@rolldown/binding-freebsd-x64": "1.2.6",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.2.6",
+        "@rolldown/binding-linux-arm64-gnu": "1.2.6",
+        "@rolldown/binding-linux-arm64-musl": "1.2.6",
+        "@rolldown/binding-linux-ppc64-gnu": "1.2.6",
+        "@rolldown/binding-linux-s390x-gnu": "1.2.6",
+        "@rolldown/binding-linux-x64-gnu": "1.2.6",
+        "@rolldown/binding-linux-x64-musl": "1.2.6",
+        "@rolldown/binding-openharmony-arm64": "1.2.6",
+        "@rolldown/binding-win32-arm64-msvc": "1.2.6",
+        "@rolldown/binding-win32-x64-msvc": "1.2.6"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
+    "node_modules/vite": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.2.tgz",
+      "integrity": "sha512-cFKLV/PRgAUlIRm5WjMjJ86jrftzpqcgH+Us+DS8mI3CDNiH30Whrz8uHL3+MOLPAgqbMBAqWdAHAphOAM+z/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.33.0",
+        "picomatch": "^4.0.5",
+        "postcss": "^8.5.26",
+        "rolldown": "~1.2.4",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.4.0 || ^0.5.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.15",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.15.tgz",
+      "integrity": "sha512-MpSEjRiBkA9crSYeOUH32rJC7SVqAbm0Fqcqge/bUi2PPoLcBWKOsG+C8mevmpr8TwXHBVkChbbJiyvkE+i/3A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d0dfe57
--- /dev/null
+++ b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "temp-init",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "oxlint",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "date-fns": "^4.4.0",
+    "framer-motion": "^13.1.1",
+    "lucide-react": "^1.34.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.2",
+    "recharts": "^3.10.1",
+    "zustand": "^5.0.15"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.1.0",
+    "oxlint": "^1.79.0",
+    "vite": "^8.2.2"
+  }
+}
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..6893eb1
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
\ No newline at end of file
diff --git a/public/icons.svg b/public/icons.svg
new file mode 100644
index 0000000..e952219
--- /dev/null
+++ b/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..178dad6
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import Navbar from './components/layout/Navbar';
+import Footer from './components/layout/Footer';
+import ToastContainer from './components/ui/ToastContainer';
+import Home from './pages/Home';
+import Schedule from './pages/Schedule';
+import PackingList from './pages/PackingList';
+import Budget from './pages/Budget';
+
+function App() {
+  return (
+    <Router>
+      <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', backgroundColor: 'var(--color-bg-base)' }}>
+        <Navbar />
+        <main style={{ flex: 1 }}>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/schedule" element={<Schedule />} />
+            <Route path="/packing" element={<PackingList />} />
+            <Route path="/budget" element={<Budget />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </main>
+        <Footer />
+        <ToastContainer />
+      </div>
+    </Router>
+  );
+}
+
+export default App;
diff --git a/src/assets/hero.png b/src/assets/hero.png
new file mode 100644
index 0000000000000000000000000000000000000000..02251f4b956c55af2d76fd0788124d7eee2b45eb
GIT binary patch
literal 13057
zcmV+cGycqpP)<h;3K|Lk000e1NJLTq00CD300C(T0{{R3AD^4|0008|P)t-s0002#
z=<I%WhJJR2aAb9@sIl4B-R9)$WLj*Um!f@jgN}!les+buxxwPy>V|)f$;Qooc7=_G
zlYe)HToTQIc!$)^+J1M1y0*T%w!p~7%ux`!eRhO?c80XDxK<Fwes+bAiIsnNhmJ<(
z+}7lUQoFyQ;#5vrg?^0D!sKUOaC~)yPe@gOc!x<7omo*{m5-aIp{uu#<$QL9%dzNv
zc7<9TwR{}!fOv;^L$RNkq=0ycmtoYff$3Z=k7pC&s%`6?e8h@_k!CcTeRYLG5Rgno
zQJj~eaW%Y+VZCS+;AtJ#fk?-nW8$Z4>Q*R^lUUMnA>6NT^?feoZ8xxvP32D&s-9ow
zqjcM}eesrC)NeDmsf)*P7wJ|K!&xP%Zy4iI8lF)Tv2!reW)tCzg_1=PmOwd1SQfxa
z8;58t!=z~Ba7CYlNWVG>he8aRPY|+-JmozNhn!#9i#77Aa_Edt$ijyCWL#=~I>~2X
zZNrQ8I0=D+NWD4<hktj6GzWW(Pse^nwx@09icrEn3XweujFME(k5kA%5`>pq=7~(i
zhfThMNw|G>g^y9pGzxX7ZSApl@tIxFcs{p#MX{Ax&XZT+cR#U+OWc@S)pkIuI}dzu
zH?^Q=<(y&Vq-oxSLfc0Zmq81bjZWf}RnssBaD6}2g-XJHLcN_|*IOu>m|x$nbm(?E
zyNy!Zp=RroS;?Vg*kmoJYBi!n5{_^@rA!)=t#a^;N$8GL!*DsQb}`yvEuX!G@||An
znOfUZAevPrkV_qjl|<~3QRZzG<YpAyOckA{W%5G|n~y)`pkm&PPt;!#)KnR*SR$jt
zjP-mz#hqi(Wi*+RR@!SauxmA`N)M;1Z{meS;)F!bfkeiXRq2IJx^x@pe>&h@C9Y5z
zqpNH4xqbF_InIPh)kX}Vn^5kyed|mOuq+2>M;v~KO37a#yrEn3XDqtOl=rc6_KZ!;
zreo)DFVB4|>1Zd(bvMI%8uM;3!)YMYu&cG?<mRj}p+W!v0DN>(PE!B~y@3yKBMt|R
zAf=I16tFwPsl)!jDqvYkLH<MEWd84=xF8*<QzN%BFu*>aAQ+f@W1m6F5aZvwhm4JL
z{_l)@b;)mDSzle2gyFP5-r1x-5X{G}ot%VyWP@vEW80!Q=f%RTfpg>B*TA^pyWYUQ
z<=xPtz}WcZ!;rFl4m1D&FFHv?K~#9!?A%+fn=lXt;9<B42qB6@NRWxZIuC8ENK{cJ
zl)h$P-T`ZF-J2S<hY}#fHvV*0U`7A&jAsDDFbu;m3}dmJQ<mAQ^Z9bV*!GPO2aJ)z
zZ1uV1h{-m%2H*a!b%Lxd(^Yl?V;Cp9l$_RX{Lz9xt-bshAeJ->!Fc#kQ;zk~gZFsH
z8e5iu@c_pzX&qb8&Dum*oXwB+fm6l6gFfC|<mP01pX$|vzAP8HZEgtvMH;;B;1TNz
z3zM_mNQ%h;9+g+vm@s&s^MxmS7-EmDiP`sve^(X^<GWbeVEi*!>o*wgEiy6tw~&co
z9Vd_4)P%wP-KwQW7|lN-znGK#?N+j24U=$982myIBM+vsiKsc*@4-rwJxuAaHKna6
zT3wi!C~a4ZKH03qU<cFluS<?ulG17e&#{THS>}_1bKyx0&$CaK7_%Z+Kl$)fF5^op
zZApQF2TvDav!s|krTjw<bJ#@qc`0GwtT^srE-_n3%-%{2U`D=+h5j*13R>-8US6ep
z%!VmX4luub+fseQz_D9ATJQ?iQQwD}TZz{-yo#l12a%+7bT@E(X-hyaVS-5vuXc#^
zx^w;L21;NphGVoj*{s3f4dme0y2LC=G1-7THd`#z?;tuC{^9k(dM{Rf2GOxg7Jzho
z7nSZHl7?M9kdalX`)YgoKEfiae5+;$(OGeN1eqxrv!ZCVKyH>xiyNqfe8xzY8*7)H
zQls8KMp)F4D>ED;idMOU^^WhVF@q>ZSmeB0y~qC~|DB648hr%Sh|*T(4q|w2l?m2+
zvBVw3@7+Mz?^Yc#+se6KM;a<=(W-I>k)$-qL2V*t<q895#U*%V8E;RedbJgs!anFg
zru8~f(0T{DSXWGnm<>}VaW`;?P4)WqI%maIDq8!oUcSYAD`}wWjkSyAVsnF65#2zQ
zZ>(K*TlS(E#4y$4Zq+e^_&}d)q20hCe3!LfLYP%nQpLJ~gM6a1hJlz3)aS<9C9me|
zAcmJ#>tOwBy{<cE6<TPMiZx3IkreXG2F}IWK6~$jNIk;xFDi5pMbWC}Gs}2;#An5<
zoU?(mc~S?F6#5pe{di9pjtNs#{+VTpnB|kM*Ex2pd(qmD_45N=IxMuw#doJFZ3$!5
zvV-+r9!*i&hLkR-Xzk|^wU==8_rs-FXp@USa=k7qRGST)i+`m>HoP0Sm1&_(E+S@6
zgBIFUoei8zJmdpiq8q5=OY7t@`)JWxn_&GvKVr=Zdb_pEL_j|=?f;WK^U9Q0efd#K
z9q7SfJTl4pmA$jsZ5oK8@O9#!I3Cv-kL)<8SalSsp#dcpvJ}Nz#G6FC0%9|7Fi#8;
zGDJXtj!&GljT3*HE@0EE>G8Se&d)*nkqe}-?`3vP<Es;}QW0PTRMxH5!*DXmYMp@W
zUE5gjcxDTAOL|_bE)O^yzqckWW4Y*5paFp#la8ocu8r{3f;5<&x;Dd}N>l&UqK?xG
z!3XJ4M-x`EuQjhBbu?ik-)rmIt=DF_N?TVMP)8Gjn)TZ2V%H|zENbeix}kOxd@0}Q
z>)HuH6Ean!uS#~4g2Ne2WsMGel|h%j9*W_quQheG^JqmKhc*RYzp0wKlGjBq2VzY_
zgOv8WC1+%W=W)k)Yp_`8kfE=uiiwOZTXi8Uj9YGr$f@yJcJ;#&-Nq~sJ7anE(@;QN
z=~br%7%7`isKStX|7!1?L(apl^QvPKlrHV4S+6tNVQ*R1iGdC~WMNE1$a+=rpQmcB
z>wxiLIBvOnm;u*;9Y!kJdy(T4lk|8>JAm(&wEsFIF1$_*{>2ZNd$V6DS=SfrGxAv0
zzKe377JI`&o9Ljr+VnS*EwehA{f&{cKZF(6*MG5!p5MvrFA3ll{fmRG*L@6^cb;o^
z3Wm8c?Sc6$`>~VEWw(c$Y?nRO;2Q$=ulpqPtM^=1IZx;@xK0PgO7rKQ^WHVLwtgUT
z%|JF{^f(VH)wLKQ%dYiu2RmchBdxL0-M?wxxul_z*{h6ZZ`>-k(vizs((vW8Lt6Z6
zY;Dt?@JWyN`O`f;&d1Mb?e%9oyRK1ql?EE5XB2(W)|D1~Rx35$H6@6)$F?)7V|zEO
zI}fu0-0}8W5=6sg$f<UV_o)U}Sjb(7#Z|~`G8HLe!9+xQ%=^KDCxlcsx_B{|%!O+s
zW#zAjRpoTwtxu*|L^%PBwq<t7m+RV_(z6LIE4|fxx2k_N$qb6nz;5=QUalDAY@T5M
zQLKlwtE+Ck{)n}>PnZ~7=tTudl?Ecb@pxbo)vni%gP-?hL|%*?62C;x6?@E`VRnJv
z?fTb;k4x;TS7Cu-z%J}uy}e-pwpLQ17Q@4DC+FCdAmNKklG$`I_pyw7E{fYmw~{Fj
zi?6KcVy=Wrel)EB_DWO|0CK<Q!al4;=n%jxWEZhh&dy5kj!Rc4X3`%l?*}zLYyaU=
z@Vht)+yAnWv8mEPgk&!FpXfsT>mI|13!gBV?X`Ozp7x>?6jr`>Qz=^4ea35!$*f})
zS$i+x_k+@P2q1RFUH^ZTTk7=n?cjfR>hTq3l3SY~#w+I8SSutXGyhw;Ws~=zMQ%Vc
z>$On~47Ut?P*_!TOQ&PFmLAyJieB2X4_Fd_!WxI-<gXiz*AXVOMjo}wbG-@}c6qQ}
z39Cr}n7-~X`!WK>AY`q1Lc-oK?+qcOTzlQ?@~x@OT}*9jTVNfl@3rGvZpWI=eKg>T
zZb@6YWz)J=IhP7CF|c?G62vMEG%#U}?#86$0jR4sG~i(jRd#jmn`7b(O#?N;3a;1t
zhXLssmUwGhp79luw#(*V8W<sI;PSyd`h7!D_|)<QG40KhBhx?}JVBJ0m2xa`maldA
z0Rz*(-9X@(s1ii%QsbNO{94<YSFUVKSfhWM*2ex76$5-wGj-3YwKZHehnv>L0|8+E
z6=YZ_O@er~$LrD_PYGc(kJgB=;yw#+Z3X6LDUZ(NcwN=B-hjdiHm!JFar%m{(5bEW
z@@_VEtG$5;`EJZ|OkJ@l&G9n((w@uNFwmU%bG|s#TbcJJos!{e<xMcp#a}c*OahUD
z!$ZElrI%;?8ch)0=*3#wQBY!O;LT5AJqOIb0`rT}mSr<~e(Vi8hfleJpE7OkU-3bW
z<f(yqLiYSJYvD~Rk8Yb*&eVR@22Gzsmgwdf{>+bjCjrCq_}LcN!UFgKtgg7siV*7#
z!}1whTRRi*-avJPu->C}Z8EiuK$#886+H_#_!btv+rsiBbv2jAJvJ+O0{#}y(%L3H
zfjU-kq_-L@2XrL*ae{{qYJkD{@dw%*bkh2P&YS-0!Xt!PRz7KHV0+~j(t9W8lAVWR
zt@B*DgURgEz4>WuN>o?_iKc<gc>w$?k{||Pg7{Q2o4|VmJ)mg?{VQJA<}zEr^YAAS
zgGm5RT4T3p)U;yz-tfBO^kw8?IoG!IVmc+Z3m#}AOQ?5MRa>)OcU!$N^_+yK6ayn?
zK>~WK0!#ysuj^oNLakm)Zvu+J)OSubX^kv!c*xgdIvs;kln!rgG4*uZ;w0mQQO4XD
zO9P{GNdv!=cQ(CAL{S(%<uZJ<&h5aIq0=U~fFNveAmSudGCHY2iwg;{+88M!8p1|R
zSj)<-EB}H2g&G%KyJP83FvN{_G-~}|Jj|UtE%L0IlD6r)csTc+GmIBj$tZ!noN#50
z`mh_gh20HgZQvr~T&Te|h#@JMHc&65kZoWv{j2u|Q9<5b7m~%dfe{0-!ou~wh0m2=
zvlRC{5U)FkIqYs=l&!FQ6YJvV>KtuV^zC&<bpBM?l~x@&E{srj3iIcR-_zu45MR4A
zh@2nLl?hd`cM5adcY)c{44&qjk;_$Eo)73^yMfp?kZrNSf5qj_ky%p++d)KrWYwCy
zg1`S7d1$SYTc-IC{vR&yS)cAwfEAq}4?|j<6<s;_7ZElDAXAmsNu5G|Xqs6#1w<Ui
znhoo25x!xQq>Q{%g)PoXnp^gn^>c*`E>$hLYg2HjnbVGtWLa{7zHdG1jT@B{|Dm16
z7K2(jsfG+m*Zxof)iXxu+!H5M<Yg9H`SG*Y%*h@g;CSB>o-0$pkyV3VV4B@Qms46M
zuBxGRV@HxU<xN?Zr1IK&=v=|bD1arS5`E=l%)^QKaItfJXjx3GzoQd%o>7Wwx-6CB
zaU*HO<K?ovRh+NjO4lj;N`5$PWdqIi;srm&+Ot}J&44n^Zb1-4)^=^}FZMp*&@5uZ
zRV1a})U3^Pr=3b_AR4y9V$bje)2w+D77sRCSqE<avQDa^H#0I-QlI@N@-4HmaMP?K
zR!0Hu$*QuzWcBZ2bxC&8DM28_!v2VL+PZ|0pFqt<jMPc7&XmD)FB?R1t3J#F*^VPt
z6h&K2MnM2O38Di6dY2t-gO~?cuDoKMSl1|EaWo5lBd_oNE><_qn$5GH>&@?nRy1{z
zkik!sLfWQ)r#75)vVwCBU*r_)Q6mp?!j85{#Xqse)ApRdE$V0%I0*~e(_{)5H)`Mk
z#rExC>yjhZxuL@|+#v4#<<N@PY}$`$RxUVgpcnEl#;q)zL7JxZq6i*9G>Axw$+VpV
zuT;!2Vww$je$DpAW`$FX_Ab|Ip%$;&T$-lW8jS~B$>G}rd>eQG+$h9lQx4Mx0w={m
zx9?T6VU`>sR}XC<KhA|3Z<^gKIEPk#@-5bLiO6*|#?c1yLv7+=0WQMCs(~-igN@_;
z5^t{je$DodaI+O&v+A6C#?g~)AV1No+x@l|zsCHWSgqsxfCYcFjYj|rl~hs(U&#;7
zcTcsOZCl4KhgKfVR*|ED7H6sEz;7yp?fopA63yP2wSi*LNunSX!JSB^z*40k0D5(U
zqe0~HYqm3CVikv0Cu(X(o+SjTmkSAED^U=H(;&8e^J{oDhQ7>lkAhHEShOUe8awiq
zmizhL+}5UKs3}6~It7vBTig9dfQ2Q8coo+Miiaw7n~>4ybv2Ptt0^^=VqX(t*Yya9
zr`FxxFX8(v*H=+uJ#JJWIB2A(==HDYx~^zZ2nu?2`}|Wsa*f3h3ixc+U|FDtAG$Y!
z*lc_7se5Oso-Cgqe0){{!8H4g$3<8!R<6JOurD;((({c$1(pwb>(#TT!sge@4>r2@
zVL7>U`0`nsWAYErezk4(Z!gMI2?UTo{J3Ajo(u4)KYIRd>BRcG4BoS3G0EXyEp@tw
z%P7__?A^a>Q&AKL@ayDO9D*Qkc!NHnO9l}kpp_6hXbMppYL(X1L?njdFT|-h2<_$;
zAtDZ!1Rf%|yb!qbWKd}%0b`LzBeyNy43|QO(&h2mxQLUL)|0%agVOW)6TV!&Ip^Ls
z`PG2cygM8)IecQx=Fc+nqYRo4hS^^-nM_&-y8?EJXUczP=DIw(GkTJdpEdh<_STs{
z|A)4n1GKdE=Wu!!nYoZHcUQ4S&R;oDOKX2lrkdF(mK>hz<$Pp>igjOcvoRIjlN=W8
zu8Gx5(roqn8$>gEE5vy{GiGeW8Tq{vnf3hS-V=$tZkQuftUVuU8o6k&dn=<r#oF7z
zsl>Yg3)6MOIH>nlK^-2+C6BZITr~1@So?NvG#TwL)|~=1YXGMTLpS<)ziK_CSOabe
z=cB#5)yz|@0i9dSo?*CX)}UP=s6)B+F@~Em(u@Q(I9J9i_V{LmMu8BfXYMh~*oPP+
z!3~xTv|(>|=n6ZOtT~C@V!z!w%18*8T2t6}U2S##rC)mekBql&VsBX;$~ByGE$oA9
z`0Wzq8p?R{4)$l*on;!cLa}Dh^Xe?owiQZt9nH1fxxh$pN9K%CtOw?u3>85L7rr!d
zXs)l{TZ{xXP&U8exz?9cv~dNNibOmt*K4I$?RxqIBZ0(?Mg-9FS{*9Bc49Qc1`=<!
zK*4?Nv7qhNUM|<CDcAtw<raYNW9N0U>sIF-rye`aNT1G@4NwXcnyc@+bw_mTsR>5<
zF<2;X0QesG_pw|TonqVBhRtfqI>ty(SIu&VOXd0CrLlfp+;WH7HYjhqnu^oAY!9cB
z=B6#R?Rfz9BP`dJ=@v_?70s3HxQPk+{6Y+lM85f2NF^00*^OcM0~?JOZfR9ZPYF+#
zYSs}(_BUYV8{n@2a1hD^SV41bwmi2uztR;PeBgF1F-`9>`<lpn+61l^gaS`$@az(r
z>zoNss-@3LaF2sjl~>OaaVmp7PNp+UT`6@}gR%uzqHDVeEZ14{Yt?n%JeQm+t(1_u
zSc}oj^{b;+rlS|ME%+LjzSI&xu0Bblxo$MJ-J$kJ?Qu_XUXh}*@*-x@ny|}wVM%Lg
z3tNB`yvr*}N?ClGL;H2cglcvErIccU3(eP7>@~4nOIcI~-`P8tSQnx=jI&{9)!1}l
z;gQ%_h>ZlPSV@o@Azq1<NJJ1~BbiR>R$C6ja5!^ZGh;YRhhxs58qJWo9@Bc<X{gra
zwxgayijbgQ8^>eac&yy(pET1hnn`~7@}2L0&dfPKYs$ih7m2}R!25!(hxqA(!UIw;
zK4+~Jowy3=R<l1Zn}&`DzWqTbUg%;koH6x(=K5A6mMk*r_$k&4y7yk^>NC6n<EidJ
z=Y2=6M^e`#Pw$&MD+ObKJoStqAT9_wSP19*pO+mMTeRmD^gTV`V7agAMqqG9;H^Qv
z=S!#ct(Bs1q<B7WLdyUH*dPM|DTE|om;`j+)Y(IPiDvTp=NU7bsUcJ_u;<~Yg}^XE
zo&R9a8nd?JxRp2(ZJKg*^HXeaXC)7C0kE)82mz?QlBZ4^K5WR=#OdqnitKd1@<Scr
zdVsiBa==`C#y}{aZ*}H+U3^x4TCMIh7{P?Qhi-V7Ayi<f*4HD$IYTwgj*2bu{GHXD
z4Bv*H@fzs?A(#yqq)_1FP&QslbmBVch$!;bplWWZd!7dfAH70E2*5tJ{ZnyAt~Z8c
z<{CbE$+goxCOnfn5#L2Hz%Jps^Dr^E^03FU)|hn1?H<+&2{Bq!X2eZ~Jra7M;Su06
z9BM4g?#x}tDfKyvhg@qrC3ef-T&>E=ncU{LH5?*9@W24lacJlvCZXB$CYtE@>c+~H
zkV=(5I&gb{xn2!~f&fs2NQgAL6`p|kyt6kpWk}iVlqIp(H;ig`{_U9yxs1jzu^ETM
z7~)Rg8C-Nue<Z!O^EM8LzZpSWhEB~xxPV<uT+9LjG!1C?V1K^?yYFXCE}k%C$c~%b
zrM637{2BRb&bi}kwUO<41W^Wb4|zd|G4`F$5s}+KN5NiCrJpskvXcz~Vmfhw?P`co
z%n;~{Tc%abXY@8Wy<}))uHlno2aHnl(}SZsd*m6=dbM9;gdwcEAgqKyC)mK`6+Hip
z%e8Z@6~((nV`qQd$AHTmc{PBL#$4vR$)moaI6XVqmroDW*rFlun8B23r|acXvDnnN
zW@pHz(jV_bjD{{j3<2QrD+U40%8?D+T|3vL4e8XFFWuRABV>qTYP&U8l{DY=Y47cR
zOR@U%$KQV{mkRF|4)z9Y^t3K`@p>duY&QLUFeh6VoV`a`$U@)(z!-N*5Cj<1<c}@x
z0>1$EZW&hJLX83TO{lJYP74rlDZQPkm@t<=U^I)x@|UnHHkdQlh?!ltZwl92rE;;^
zZuIappj4dhld1}kt<?fg_nAw)fPiezhvmPt`M|nV#MlA1*C_C5fS5+P6==L_n|sX0
zQPa6k+Rb7l5`EMcn?7jCP8h%AOgf!PwIbzW@k$25JFua=I!%3m0>tYYV-j|KF1Kus
zWBnzttD^00%LFK(wrwNragFub6xiV8QE2rm<`&fcR4SLFcdtLxVuN!Aal-g6dE4%k
zARZ}|xeo;K{0yf7@9aua%2j5o)CPcIOc6uLHFJOcgtB5owlcNAwyAHc0QB0Dts?c@
zUemG~j_E&W7R%+x-IO4FJl8e&*2Blmp1S#RA|)geVrxvP)NHdYuxi~g&Etn?QdN<w
z0m=Xcz|{y?J?VE&ec9;19rPLjpeETA9k6?Wq)GJ9t47^2<x`|xDvud+_n9CFXB(M8
zwoo&2^7yTn#N7$uSR!>K8ZDKZ?QFLU?<n=ndwaQ1HBDtm14#{lz&)_^chA+_1h;B7
zcU1{#Qu3Or?$K1~v~O8=DsUG!*m5b-iV8wHk-mv%4W>zh30<dh+jbv&A#%AUj<mkT
ztiov-#uepE<}~*J$wm^>G|t9G>a_X4zk}Ygw<^$7K!GIn(Io$>(d4ODJQ2XSd%jpK
zm7>ptl$a3GyB}5-%p4>Q*p#VL<!y<?3oh5){PS$gm}0RV>^B{yQMuFCM^#l#+N!Ne
z5_PrJWB=@Iy+t)H`g1lX`{bm($KE5I?0c(JEYm#t{F}j!xtsb<R@{B{Qhv_lK`?-g
zo7QE%Joe&Pf|n?Y$Ang^+$^?HuLDg*X&mpfskG++wIvm((!9BUe4n}VwB7@fq}FIs
zN}f~q(0fO%k5(Pt_IQGgMDM24Y2ipBA&BC^3z^0Lx)}^#++|)$aHz+Qi7z<WbSix}
z^34Vgz}y*2shEe7DpfVrwmA~?ce`OOokuy;Lu&HeNy(P>ob0{xu@0TB_*>G7w0ICn
zr#V<Ly<521y=d`2-P%qV-+kc+RYBmFgpd+a&&p-aRh7+pU8%%x?^h+;)@UzH#^(R+
zA?9DHJF_1af;f)z!ked!mp=5tk$CYSB9S;F5=0zv--HMu1o0pllZ`bKBg9yBPaU(Y
zbL$*ix2EV?bg5vev&d>oBktqHZ~XxhiKD*lcG|b;H<QnNf4|*!dmJ<l8`~Yj%o^3T
z#)eGh`t{WE+aDhnG+3~fg>*|Ny3P^8ceV`sfBRfrhwZ!T+MFZ!F1Bt{q$8d9i6o?~
zODj^POr}&ivSa^R^YFIq7o0giLBKCycH_aU`F6)O6JX%nPTwh~Q`eq6*0iE#Srj2^
z*_hN3%*b83zfafy60@Cp3{J({RlSaEn<IE)onTT+YT)a(6{+-tG!$EAcAH^5-?r!{
zuKpqn4jYG^9gYDsxKN6Bt_}A;Ue=1q$R`-tl)xM?f`iDt>&E?mrxRNC9GQ7#+f=s!
z0KBf-9Ny_v2VbE%aB|Di)5kNJ^t&C`4D(>t7zYUWUFtbxt+Oq=!@O7BU)}>d*R72o
zFF)3jQD_lLe4is&xzyJYC1-c{8TX$RU>&>P$%)ufpez0XSAukmh!xcekg`s$c<>-q
zI#zn^JU0zzF}V60)o$_gY}PQH>b2M9&8fR<wm*6NxR9uY7-0l}$1q|YUM-5#SNi-<
znX6Tw!I_2*!ZydK9{X#@TNftOuW1EHuUpcG?tZ?r^JvvE0Ia`T?dLe>Za#OauglPb
zeQ@pMm&=!vNgos4CluQjLMV!pfkmxK+35bi^k&=k>9h02?l+u+m0agG<SPywAU@ZL
zRjX;*<0l7KK}k?9KiF|^$e;PKdzT?Q?m5-#rF15fy7lm590+PPUypFSbz+2li|7<)
zgi-Q*hk^e^n(Z>;(h2|Jslc-llvtEwn~*w3bx7qnvZACG<8}AGeaDVvcHbKd2>3G^
zSFPULUn-?Pmo^-_`mLZr??uNH`2=I&yajlrF{DtUxMy#Nu}z=3y7qbUA;5`)hibMR
zhXL@@uKyV0-2&A@t@!xyrBnMJl&^o@Gx$&5_q6?D=ji5grd-~=?dlg;ur(_V0wjh!
zA=JV^C1m+DDkOsgr<%O9ZQFg!0}pD(#PSz4Dr_EyS5$`)VIAv);4n-SFP~YtC7sH=
z7&*MfpH;gd*FHbkmD#)hVxb6xjc9~`t?_{=JS+@ip_cTicXxG<=7m9<feYWHZK6f!
z!~PdUFl1Xg=Uk61#hCh-kT9VY3s1K1O+8pLxy7H?_$4pOrA<enMW8_`8~He{4&t)U
zC+J7wvayvYYQTMWS%+qIw(sm$$6Z&12|qk(d{RPighT}aVCzU?3lZ%5wPd33@uhJ)
zHKALJzoBkDN}tn@wqLzmEPM+I!EjKEh6wQhVM;whY2sTVqM;%;R(EJd7<BA6`@p>&
zPX+Z8IC*GSAXuGCrZDHgR$r%jyk-fctis2Kx4HvZ|B~8uC@o)m^>Hy-O!&TKA?$&n
zkP2Xc54w~!=z2?^NafyL*L0V9cbYr<?rWpEOWLXyQSJ8igkrHMLxSsd9RTYiY*{}r
z0Nud9sR4@&=)o3}iBN^$sRd{yKBBS`(oY_eo>ugHBBUj`xVyZmGFR&kvk#>1J*Z~i
zNTz}?IAdJ$gkqd2!Gw(%LzE!O5s4C7q4%T~e_P{+z=DNDKrG**p=U`d5yg^vp`;Zn
zsU=8gd0a9s4s0FPJePWR9eH5=+O^Kks&kC-iblNqTh2&Pw*^(4384f+D8N|fewZu_
zg2ejQ)ov;ztz;NQl7yj;A`(!H!XQu_$sqY9h_IrH*}_%1{L&_YLDvO?%R5Z-t+ClW
z_qERbL?HKUZ!nt+!E9S`uoh^5A|DaIHe*_gf1`E_Vq+}{&T@t$EGhMnRjJ4z2w_W8
zp+qjs7as22^&S3wY1?+}^j-I=RcCE>#|39)g(<JW8{3UaU4R(lg4JPE6nTWB`QYk5
z)8tu+1|ry#7DW|LA<x4~2V5yQJsir=lfsSn1druko%rWJuj@OdeEXhr(}V`n^&L0M
zl6j4w^6A=3#p-qN)E0J~E5#@UoaNxwW&czYW)T$XGC~qbkcB-U0TY3yg@G@XbXiW^
z5c$089_ZEYU;c5-#C~Uw-!{)x&zae`=4P|HPjJ<s-jmyVBx6kF80U(+LYFF#ax}R5
zkJWj!tdI&~$YPQb8K{c%C<KCU0j>lU7v_8;?=qK(9D8-*pPdiy)P3lIblG`+?%ea|
zYoD3dopYt!tKgFicfNmNi(EWE=E4hC6(r|PYtanqJlmt57YOVrr2^tfrG(eG9C##X
zu&1t@%L$RIvpj!w<JGI#|Kj49He;vXxwEsp+o;~VX_{A_ncL63Z}40YD0%pOgXM()
zbh$2<KrIC~+-w&0pYJgxxGr5FLGaXL-qXhAZyv?!1_Muz<#RXKu^VnKpFfcA_xJxf
zrpu`E$*Vheu6+Oe+|8<)z4F%Be(u6kAwD%K-&SsHxPsq+c`6~8$Ss`t?-B5wdh>UA
z8i>Pqot#_+Cnp6L2XPcZy1ar|9MnY+7eNvK1E)@Tr#2KsXq1*>)uUCozT7L##ok?o
zhA6ofP4E|b*9tAfG?u<r>f$#}>TIR&1A!yslP8}i7w-EzW(x#9VEvx18k%Tn=-$VV
zkOtUr0b2!w3t>h?#8AZl^Az*(6KCGlD;4j~yx};`#2gN1_gv=%7KVzecIRakN{f*4
zeaI>yH;-o4OGhvGTU)(quWI<f0ZkSMe<;7IH4#E$!C65@Tm*zO9-Tay`+wtgFw^?T
zt9uo%@&SB>)-q?V*(sVesSMv|wMUQ3hLEt=lBB$KZ9TyHr><Ns^r}@~{|c>)f7o%)
zPYeU<3P)*P10*7vE)nA5#{c=6-E-_>r_u4e3i!I2+UksELwDqwMeBZ9FSP$;^Ajro
z_@M#_Ss$?ejoB@!wN|kbGKs(0zLo%0QpQXW#t;oC$B0MZYZ&Ej?8~fNhcCVvPo3vo
zFn0WWZaPliF^8_}yzb`*f@yg0uWv6HgNI)xa=pO%Ck(C<=-60l#uD3(wXP~c7!NoX
z0&^6=N`zcc90F#qt@=Rn@r!3(*1v(Tl{B!m?Mc7yIA+nEHpY{YWr$=)F7rhR1P}(v
zt{YhY#;jsW6G>#xhP*B`OCk|Pf+NN;ju1rxa*HAgoGq*rvqw&xe~;t1JA31$s?GBb
z*g7&@cbKo4n<`>)!UlIAgR6q&))B0KYU8r66GbFj?8Guw4E%&}Qi_lT003LtoIZei
zwD~=XZmeo+yZ2Pq3KYCF-R&11^p<z0XimV`5yaIs8?ynXa-rh!ow`xr{Ay-5XybBk
z$%I^did7<|Vi;2)LWILMYVkI{#VH^bQ;IFluVq(q?C5Z|)wD29KHE=6^KM#O;|5>=
z@H%s+=G`}wrbJ{()Mh71#2SP3Zy3m>l1n?0N-N1Q;z6?oSxr-G(H5m4EO>~&;}VKi
zfY}3w+9z><a6Pd<J)6uuuiLFW8#!Nr18Hr|rZeX~MQVp7+xhR=bD7<vqh}=e`Z-Yw
zD-_^1N5E86;*>vp#d)hVuu`)vG_aaH%3b=WKMnSu&c31;<3O;bz2iD=w+o4#oBb36
z5ZCF*Gu?zjZIR0S>_%pHY2$k8D^n7Sz_K8tCDeXM+dO<#LSg%h6`~dnVG1N@T7v&e
z%wEd1!k{^zfz_1BTW{!$!B%g)J^2b87!9Y>>100X1SgT7s0z$o>^lAA=G<MK2E#D!
zq?3+<v*_r4Km*c6K~Uj%LuVItcFK@g=pktc)};B`5HDb9K3k*W$452vLTQJ90UMGA
zY>p_cC1(h=*5Tmf8z&LGJJ>$|K^~s`z9*OWz5MFUr?>Bi?_PGBB)#psD5?>n+q{o_
zz7~ez&;t#h8l$jwGPCC&xq2YetXYQT+0F3j(`xmNGf8dj#an|p#I*pvI*kwW4iuB>
z+q3_7xB8y;pLzHG-S%+UHQ<o432!3?QJ<%TfU}{Ehl*iDmgO0S*X{n3&b9Xd6I#>A
zvqp;$kmGJY>lL<o_rTd0=nB3z9Pss{Gr7|w+w02&)^Fb+zTbXY0|59o&k%+WDM31+
zK4QUK8!0x9A|rKoIyJhPzkRgbc|2oV+Q=IvhT>sN4C~&TcvAS1SErTcwcw0r@wngk
zShAUA1M9b#g}^pL-zH7Q#z^&j#r9F8BTVfkR&qF<=e35goTu7c|GN)0mokj4m0%~0
zXJ8j4Hc_l;HJ&uU*Iw`8d_EscJ``s0tk9mkKo^&#TYXm-EoAzTQObxa@^u~g2t#T)
zJz|rE!I_?i4dCJC=B8(_pZ{YR>|V?0iCcnU;E@$239^x?SYCfNaMHN;CtHIS_zHN9
zTkQc1v@O35okiFtq5_u+5FkY55ap@pi)O?}x0D1c*qB0KpY<Pk(Yb@W{;XTAQ`34h
za)r|UQIz0>R}>Ul+B0Vmr}Z@+%mJ|As}sis_=ROPbov@*2thpE&?!V#Qgu$snYvCZ
zrkhmkMU+fSf-s8(L37<BzmM5n$JZp5V-r(&6tqjDAc;7R<xzz1_s4^{2Wou5z+^n0
zJ^OfM$Li?Vx()=$OS(vS`WjKcSi$@TMo1Qsktk;5J_Zo91=kJSQwR3_?%aiHidYe&
zdLRU_;saw-6tgDEjkL|eR-E?Nv}J*>fPr&M*jRs{{THb!aXQu|P9l_-vJhHvLzMGH
zE?1U0H_+Pm<FRmiQK`t4-`YKW@bHPe{v>NABp9`|KzkGfrrZ%XvdGo6*<{d5m9~L7
z_<Chk5bzad4^S$zx=&TaFqCCEp3jPTw(@{on73SrnQ*_Y-Ep-_dBM@OqkDgK`0~UP
zj?-^FD6*A`d!rt>^`M;X6xDo=m6LY6RfvJEvsTK1!u8d2HPx|<l&88RWmTd+&&#4L
z6`yaIIr*+E=5jY5j|C@qT(5V`pe*s~+EqBge!eqoP0ilQXP=j!Jjv!>$S}p;sRy!I
zWL55Yxu~_B`OP@~(q6&W3#)~I&+MGL%GWR$#udC151^wsswhqlii;rP9jJpiI7o&Z
zAb})=HY7?4HA|re3ns`%$)FuvKCFWjhb~?IE)F6dF2K5}poj-NK6Gf;hw$t3=1txY
zoxQxZWrQU6K!%|~!m?~Bnw-6Rr!F3BZ{u5!LqnZTDON}Coj9^@&le)V!NYrVwS~B%
zEL+>Sr@}qGwGvu|HrOo|gSt__ezN^&%~{*)a=rf7y1HujUcr`zZB<4#l@T#eN)si}
z)lZA<{=tKx8E%c9>A(##6<YscCl4O_6bU=`?>}_p+~EZpKsl5a4pj`E*;_-6`ysiv
zffA!7=MT1vCz}-m4~tjVey1b2KSR4OEtLd-(_DdUqYZ74LaDkhH?KFh?%WAOP2WbX
zp@zT+Dx|5_f%JQiAGvVw!oh<Fj~_X?_l(zRnh=l-WC;0!mOR-``}O{MU1CcEv7Qs*
z##?uvJbC$WHTK%CKg;;jwZgzC#K9t&V>+g3e50u!aPfMxdC=E)XB{F5IcEZhePIM-
zph6Y`$Oy?JBL<8Ex(SqEhLeQ@XcrdA>a?rx+_~HLA;l14)WmmpH}_w?Pg#HBZs0eS
zwypwAW?M-x+3AU-(GGWSJ=ngxUEcEZ5OsX(Qlt<Fz^h6i01-4sy<tMCc1v+0VC6V5
z0-&XWhKg)`PS#^w_BB?-Pg+kQ;0N1J*4@{$e?!swwU{MxaFS_BthZry39n;$UT)Uq
zHsW!l$r7z0G~8Bb3jt#qAqA@x9~7k(tR$2`HV7zmlPRRwY9w8Ktj8G_ot|a(I>!MQ
zn^(`S{GHkAv(8@D`EAfSYig%Cxv?z!{=w^F#y)5_d7FuKZH7qlR-#5B0bt806%D0I
zT7VdVP_?q*%Rq8UR;JkD4i^RXowt+E%#V2U>TfDqzZSDZ+dR!a#T3I>-z_$q9@k|m
zy5~A*m~&JWP@E7a=pc}4kVHTc4h&R;Li7d@f`|hKMLkbb^uhOakNr3&FLj<m{owCS
ztY6Ts!!D4Zz4l4ZoyT|IuCt^HpYRx$OdQctiUt|Lg@bTuLIXgvB^F`ai`&W(BP=I?
z2y@R(VV<H*-CXv#oM%1Fa8hIbD|Q3FZE{RnboApG((|G&Hro$6?6J2=>lm~i5NBM<
zFaYI{;cpiHCNRdE0dg*>qIm(_t?#$h=(SCw?h3rJV2*ER8{O4^3#=dO)KwklZkoqU
zS8i5c%YL*y*4;FY#D=XmkQnYj%LH)?02~gSJH`Qp1XY64g>%c_K$xseI&|e)7vRoL
zAqRba$G@%fSGA7X7hQk%_3NVOYVS+$leU_!&6*5uN)8#5ZBz_6ASCA;azYS-Rt@ki
zg2NWz(=;t}SC(~Ibl63$5C8FPmhXqb^)5#jaJ~I{Ex3xZ!+2h8$}}h_g@Be>HZ;72
z6#y#>AY3^skuVKF#0WxFBQ()5d5_nWb?c6c>EeMM|Mh+*&wEpPyxHCq{R-Gdr-`hN
zF=1sxl&mBoK+#qRLl9#CEN|Fg8><B(oIypso}-^r*B5<{@BcMzmLGA~b}m;4tbD~d
zc|1-j_>nbmsTg3a1;#M9enQ$RgWk}kp#-5wh=EF&1tl%mJln2V^8o%Qv(*=zEuO7y
z=m*8?xpUn-*@h5Cl_3BK3joiGkyaScK+>|MWdMRWm@RT!Q1piAlv5hL@B6>3&GI8)
zP!xBc6}ZNIpJLL%2a8Y!+(<=f%WX>_uWVxlga9!D*oYt$l0cxRDMvqfU;Kq_mLK5k
z)dvqYcgLa_Lz?3HyeF)@$%$&6lI?r4I>6W#M*<)vq{?&<hzOc>Oqrx``d`mhpVPr>
z#q078F6gw_X<=?KR>8%^t%@wbITvNMu!hKiTSkCTJkw>1!e*Y{%31#_yMf=LW7{RJ
zYoC^w$6%3cBtVG5)x#{Hg6IVTh9XEcM{gQwXk!R^y95^f-hZ`d{aVa+xW1EO4wDV4
zB?JgD7*?qkvc|$nIykTvNl2x0j3Q!MXoLL^)~}d7jcYf(H8D~c+?$pKL(px>Z3`eb
z04RzS6_AgFT6Pn#iZAg$Sl_j8#;6ShF%&(Fag#E2asU@@LaN;=b=Wf7sgPKhfzhBM
zC@eFL8^MrnA*9&Khe*Ab@CC9*uyJGXyi(;y2>lQLJZt;ShtJi?3Yf_t<kTXZBo$C^
z2@O4iV}c>`F+$hY!+Q2Ndsx=U+bjTiAy7djLji>7k%k`$9&--f<*BNA3Hy&ZrHH|4
zG5H&9cB?O#zI1_OOf0Ce%mDfQxdtp3vU%(iY6yji3iISS61XLv#z|!zI_sZqza@B+
zyu9st5-h+`H7QUKx9}3w@oU@EO}&cEzG?fu!!bLO->%zkcg;i9^j`S~=WKMnDi1f=
P00000NkvXXu0mjft=yBf

literal 0
HcmV?d00001

diff --git a/src/assets/react.svg b/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/vite.svg b/src/assets/vite.svg
new file mode 100644
index 0000000..5101b67
--- /dev/null
+++ b/src/assets/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>
diff --git a/src/components/budget/AddExpenseModal.jsx b/src/components/budget/AddExpenseModal.jsx
new file mode 100644
index 0000000..6cc4a9a
--- /dev/null
+++ b/src/components/budget/AddExpenseModal.jsx
@@ -0,0 +1,180 @@
+import React, { useState, useEffect } from 'react';
+import { DollarSign, Tag, Calendar, FileText, Plus, Check } from 'lucide-react';
+import Modal from '../ui/Modal';
+import Button from '../ui/Button';
+import { formatCurrency } from '../../utils/formatCurrency';
+
+const BUDGET_CATEGORY_OPTIONS = [
+  { id: 'transportasi', label: 'Transportasi' },
+  { id: 'akomodasi', label: 'Akomodasi & Hotel' },
+  { id: 'makan', label: 'Kuliner & Makan' },
+  { id: 'aktivitas', label: 'Tiket & Aktivitas' },
+  { id: 'oleholeh', label: 'Oleh-oleh & Belanja' },
+  { id: 'lainnya', label: 'Lain-lain' },
+];
+
+const AddExpenseModal = ({
+  isOpen,
+  onClose,
+  onSave,
+  initialData = null,
+  totalDays = 1,
+  currency = 'IDR',
+}) => {
+  const isEditing = Boolean(initialData?.id);
+
+  const [name, setName] = useState('');
+  const [amount, setAmount] = useState('');
+  const [category, setCategory] = useState('makan');
+  const [day, setDay] = useState(''); // '' means General / Umum
+  const [notes, setNotes] = useState('');
+
+  useEffect(() => {
+    if (initialData) {
+      setName(initialData.name || '');
+      setAmount(initialData.amount ? initialData.amount.toString() : '');
+      setCategory(initialData.category || 'makan');
+      setDay(initialData.day ? initialData.day.toString() : '');
+      setNotes(initialData.notes || '');
+    } else {
+      setName('');
+      setAmount('');
+      setCategory('makan');
+      setDay('');
+      setNotes('');
+    }
+  }, [initialData, isOpen]);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!name.trim() || !amount) return;
+
+    onSave({
+      id: initialData?.id,
+      name: name.trim(),
+      amount: Number(amount) || 0,
+      category,
+      day: day ? Number(day) : null,
+      notes: notes.trim(),
+    });
+
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={isEditing ? 'Edit Catatan Pengeluaran' : 'Catat Pengeluaran Baru'}
+      maxWidth="md"
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>
+            Batal
+          </Button>
+          <Button
+            variant="primary"
+            icon={isEditing ? Check : Plus}
+            onClick={handleSubmit}
+          >
+            {isEditing ? 'Simpan Perubahan' : 'Catat Pengeluaran'}
+          </Button>
+        </>
+      }
+    >
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
+        {/* Expense Name */}
+        <div className="input-group">
+          <label className="input-label">Nama Pengeluaran / Item</label>
+          <input
+            type="text"
+            className="input-field"
+            placeholder="e.g. Tiket Pesawat, Sewa Mobil, Makan Malam Seafood..."
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+            autoFocus
+          />
+        </div>
+
+        {/* Amount */}
+        <div className="input-group">
+          <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <DollarSign size={14} style={{ color: 'var(--color-success)' }} /> Jumlah Biaya ({currency})
+          </label>
+          <input
+            type="number"
+            min="0"
+            step="1000"
+            className="input-field"
+            placeholder="e.g. 250000"
+            value={amount}
+            onChange={(e) => setAmount(e.target.value)}
+            required
+          />
+          {amount && (
+            <span style={{ fontSize: 'var(--text-xs)', color: 'var(--color-accent-light)' }}>
+              Terbaca: {formatCurrency(amount, currency)}
+            </span>
+          )}
+        </div>
+
+        {/* Category & Day Grid */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--space-3)' }}>
+          <div className="input-group">
+            <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+              <Tag size={14} style={{ color: 'var(--color-text-secondary)' }} /> Kategori
+            </label>
+            <select
+              className="select-field"
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+            >
+              {BUDGET_CATEGORY_OPTIONS.map((opt) => (
+                <option key={opt.id} value={opt.id} style={{ background: 'var(--color-bg-elevated)', color: '#fff' }}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="input-group">
+            <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+              <Calendar size={14} style={{ color: 'var(--color-primary-light)' }} /> Hari ke-
+            </label>
+            <select
+              className="select-field"
+              value={day}
+              onChange={(e) => setDay(e.target.value)}
+            >
+              <option value="" style={{ background: 'var(--color-bg-elevated)', color: '#fff' }}>
+                Umum / Seluruh Trip
+              </option>
+              {Array.from({ length: Math.max(1, totalDays) }, (_, i) => (
+                <option key={i + 1} value={i + 1} style={{ background: 'var(--color-bg-elevated)', color: '#fff' }}>
+                  Hari ke-{i + 1}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        {/* Notes */}
+        <div className="input-group">
+          <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <FileText size={14} style={{ color: 'var(--color-text-secondary)' }} /> Catatan / Keterangan (Opsional)
+          </label>
+          <textarea
+            className="textarea-field"
+            rows={2}
+            placeholder="e.g. Pembayaran via kartu kredit, patungan 2 orang..."
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+          />
+        </div>
+      </form>
+    </Modal>
+  );
+};
+
+export default AddExpenseModal;
diff --git a/src/components/budget/BudgetChart.jsx b/src/components/budget/BudgetChart.jsx
new file mode 100644
index 0000000..dd566f6
--- /dev/null
+++ b/src/components/budget/BudgetChart.jsx
@@ -0,0 +1,256 @@
+import React, { useState } from 'react';
+import {
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { PieChart as PieIcon, BarChart3, Tag, Calendar } from 'lucide-react';
+import { formatCurrency } from '../../utils/formatCurrency';
+
+const CATEGORY_COLORS = {
+  transportasi: '#3b82f6',
+  akomodasi: '#a855f7',
+  makan: '#22c55e',
+  aktivitas: '#eab308',
+  oleholeh: '#ec4899',
+  lainnya: '#94a3b8',
+};
+
+const CATEGORY_LABELS = {
+  transportasi: 'Transportasi',
+  akomodasi: 'Akomodasi',
+  makan: 'Kuliner & Makan',
+  aktivitas: 'Tiket & Aktivitas',
+  oleholeh: 'Oleh-oleh',
+  lainnya: 'Lain-lain',
+};
+
+const CustomTooltip = ({ active, payload, currency = 'IDR' }) => {
+  if (active && payload && payload.length) {
+    const data = payload[0];
+    return (
+      <div
+        className="glass-dark"
+        style={{
+          padding: 'var(--space-2) var(--space-4)',
+          borderRadius: 'var(--radius-md)',
+          border: '1px solid var(--color-border)',
+          boxShadow: 'var(--shadow-md)',
+          fontSize: 'var(--text-xs)',
+        }}
+      >
+        <div style={{ fontWeight: 700, color: '#ffffff', marginBottom: '2px' }}>
+          {data.payload.name || data.name}
+        </div>
+        <div style={{ color: 'var(--color-accent-light)', fontWeight: 600 }}>
+          {formatCurrency(data.value, currency)}
+        </div>
+      </div>
+    );
+  }
+  return null;
+};
+
+const BudgetChart = ({
+  categoryBreakdown = {},
+  dayBreakdown = {},
+  currency = 'IDR',
+  totalSpent = 0,
+}) => {
+  const [chartView, setChartView] = useState('category'); // 'category' | 'day'
+
+  // Prepare Pie Chart data
+  const pieData = Object.entries(categoryBreakdown)
+    .filter(([_, value]) => value > 0)
+    .map(([key, value]) => ({
+      key,
+      name: CATEGORY_LABELS[key] || key,
+      value: Number(value),
+      color: CATEGORY_COLORS[key] || '#94a3b8',
+    }));
+
+  // Prepare Bar Chart data
+  const barData = Object.entries(dayBreakdown).map(([dayKey, value]) => ({
+    name: dayKey,
+    amount: Number(value),
+  }));
+
+  if (totalSpent === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className="glass"
+      style={{
+        borderRadius: 'var(--radius-2xl)',
+        padding: 'var(--space-6)',
+        marginBottom: 'var(--space-8)',
+        border: '1px solid var(--color-border)',
+      }}
+    >
+      {/* Chart Header & Toggle Switch */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          gap: 'var(--space-3)',
+          marginBottom: 'var(--space-6)',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
+          <div
+            style={{
+              width: '36px',
+              height: '36px',
+              borderRadius: 'var(--radius-lg)',
+              backgroundColor: 'var(--color-primary-glow)',
+              color: 'var(--color-primary-light)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {chartView === 'category' ? <PieIcon size={18} /> : <BarChart3 size={18} />}
+          </div>
+          <div>
+            <h3 style={{ fontSize: 'var(--text-lg)', color: '#ffffff' }}>
+              Visualisasi Distribusi Pengeluaran
+            </h3>
+            <p style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)' }}>
+              {chartView === 'category' ? 'Berdasarkan pos kategori pengeluaran' : 'Berdasarkan pengeluaran per hari'}
+            </p>
+          </div>
+        </div>
+
+        {/* View Toggle */}
+        <div
+          style={{
+            display: 'flex',
+            backgroundColor: 'hsla(220, 15%, 15%, 0.8)',
+            padding: '3px',
+            borderRadius: 'var(--radius-full)',
+            border: '1px solid var(--color-border)',
+          }}
+        >
+          <button
+            type="button"
+            onClick={() => setChartView('category')}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px',
+              padding: '4px 12px',
+              borderRadius: 'var(--radius-full)',
+              fontSize: 'var(--text-xs)',
+              fontWeight: 600,
+              cursor: 'pointer',
+              transition: 'all var(--transition-fast)',
+              backgroundColor: chartView === 'category' ? 'var(--color-primary)' : 'transparent',
+              color: chartView === 'category' ? '#ffffff' : 'var(--color-text-secondary)',
+            }}
+          >
+            <Tag size={12} />
+            <span>Kategori</span>
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setChartView('day')}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px',
+              padding: '4px 12px',
+              borderRadius: 'var(--radius-full)',
+              fontSize: 'var(--text-xs)',
+              fontWeight: 600,
+              cursor: 'pointer',
+              transition: 'all var(--transition-fast)',
+              backgroundColor: chartView === 'day' ? 'var(--color-primary)' : 'transparent',
+              color: chartView === 'day' ? '#ffffff' : 'var(--color-text-secondary)',
+            }}
+          >
+            <Calendar size={12} />
+            <span>Per Hari</span>
+          </button>
+        </div>
+      </div>
+
+      {/* Chart Canvas */}
+      <div style={{ width: '100%', height: 260 }}>
+        {chartView === 'category' ? (
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={pieData}
+                cx="50%"
+                cy="50%"
+                innerRadius={55}
+                outerRadius={95}
+                paddingAngle={4}
+                dataKey="value"
+              >
+                {pieData.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={entry.color} stroke="none" />
+                ))}
+              </Pie>
+              <Tooltip content={<CustomTooltip currency={currency} />} />
+            </PieChart>
+          </ResponsiveContainer>
+        ) : (
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={barData} margin={{ top: 10, right: 10, left: 10, bottom: 20 }}>
+              <XAxis dataKey="name" stroke="var(--color-text-muted)" fontSize={11} tickLine={false} />
+              <YAxis
+                stroke="var(--color-text-muted)"
+                fontSize={10}
+                tickLine={false}
+                axisLine={false}
+                tickFormatter={(val) => (val >= 1000000 ? `${(val / 1000000).toFixed(1)}M` : `${(val / 1000).toFixed(0)}k`)}
+              />
+              <Tooltip content={<CustomTooltip currency={currency} />} />
+              <Bar dataKey="amount" fill="var(--color-primary-light)" radius={[6, 6, 0, 0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        )}
+      </div>
+
+      {/* Category Legends for Pie */}
+      {chartView === 'category' && (
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            gap: 'var(--space-3)',
+            marginTop: 'var(--space-4)',
+            borderTop: '1px solid var(--color-border)',
+            paddingTop: 'var(--space-4)',
+          }}
+        >
+          {pieData.map((item) => {
+            const pct = Math.round((item.value / totalSpent) * 100);
+            return (
+              <div key={item.key} style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: 'var(--text-xs)' }}>
+                <span style={{ width: '10px', height: '10px', borderRadius: 'var(--radius-sm)', backgroundColor: item.color }} />
+                <span style={{ color: 'var(--color-text-primary)', fontWeight: 500 }}>{item.name}</span>
+                <span style={{ color: 'var(--color-text-muted)' }}>({pct}%)</span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BudgetChart;
diff --git a/src/components/budget/BudgetOverview.jsx b/src/components/budget/BudgetOverview.jsx
new file mode 100644
index 0000000..94ad98e
--- /dev/null
+++ b/src/components/budget/BudgetOverview.jsx
@@ -0,0 +1,281 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import {
+  Wallet,
+  TrendingDown,
+  PiggyBank,
+  AlertTriangle,
+  Pencil,
+  Check,
+  Plus,
+  ArrowUpRight,
+} from 'lucide-react';
+import ProgressBar from '../ui/ProgressBar';
+import Button from '../ui/Button';
+import { formatCurrency } from '../../utils/formatCurrency';
+
+const BudgetOverview = ({
+  totalBudget = 0,
+  totalSpent = 0,
+  remainingBudget = 0,
+  percentUsed = 0,
+  isOverBudget = false,
+  currency = 'IDR',
+  onUpdateTotalBudget,
+  onOpenAddExpense,
+}) => {
+  const [isEditingBudget, setIsEditingBudget] = useState(false);
+  const [budgetInput, setBudgetInput] = useState(totalBudget.toString());
+
+  const handleSaveBudget = (e) => {
+    e.preventDefault();
+    const val = Number(budgetInput) || 0;
+    onUpdateTotalBudget(val);
+    setIsEditingBudget(false);
+  };
+
+  const getRemainingStatus = () => {
+    if (isOverBudget) {
+      return { text: 'Over Budget!', color: 'var(--color-danger)', bg: 'var(--color-danger-bg)' };
+    }
+    if (percentUsed >= 80) {
+      return { text: 'Mendekati Batas', color: 'var(--color-warning)', bg: 'var(--color-warning-bg)' };
+    }
+    return { text: 'Aman & Terkendali', color: 'var(--color-success)', bg: 'var(--color-success-bg)' };
+  };
+
+  const remainingStatus = getRemainingStatus();
+
+  return (
+    <div style={{ marginBottom: 'var(--space-8)' }}>
+      {/* 3 Overview Stat Cards Grid */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
+          gap: 'var(--space-4)',
+          marginBottom: 'var(--space-6)',
+        }}
+      >
+        {/* Card 1: Total Budget */}
+        <div
+          className="glass"
+          style={{
+            padding: 'var(--space-5) var(--space-6)',
+            borderRadius: 'var(--radius-xl)',
+            border: '1px solid var(--color-border)',
+            position: 'relative',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--space-2)' }}>
+            <div style={{ fontSize: 'var(--text-xs)', textTransform: 'uppercase', color: 'var(--color-text-muted)', fontWeight: 700, letterSpacing: '0.04em' }}>
+              Target Total Budget
+            </div>
+            <button
+              onClick={() => {
+                setBudgetInput(totalBudget.toString());
+                setIsEditingBudget(!isEditingBudget);
+              }}
+              style={{
+                color: 'var(--color-primary-light)',
+                backgroundColor: 'hsla(220, 90%, 56%, 0.15)',
+                padding: '4px 8px',
+                borderRadius: 'var(--radius-md)',
+                fontSize: '11px',
+                fontWeight: 600,
+                display: 'flex',
+                alignItems: 'center',
+                gap: '4px',
+              }}
+            >
+              <Pencil size={12} /> {isEditingBudget ? 'Tutup' : 'Ubah'}
+            </button>
+          </div>
+
+          {isEditingBudget ? (
+            <form onSubmit={handleSaveBudget} style={{ display: 'flex', gap: 'var(--space-2)', marginTop: 'var(--space-2)' }}>
+              <input
+                type="number"
+                min="0"
+                step="100000"
+                className="input-field"
+                value={budgetInput}
+                onChange={(e) => setBudgetInput(e.target.value)}
+                autoFocus
+                style={{ padding: 'var(--space-2) var(--space-3)', fontSize: 'var(--text-sm)' }}
+              />
+              <Button type="submit" variant="primary" size="sm" icon={Check}>
+                Simpan
+              </Button>
+            </form>
+          ) : (
+            <div
+              style={{
+                fontSize: 'var(--text-2xl)',
+                fontWeight: 800,
+                color: '#ffffff',
+                fontFamily: 'var(--font-display)',
+                letterSpacing: '-0.02em',
+              }}
+            >
+              {formatCurrency(totalBudget, currency)}
+            </div>
+          )}
+
+          <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)', marginTop: 'var(--space-2)' }}>
+            Alokasi dana keseluruhan trip
+          </div>
+        </div>
+
+        {/* Card 2: Total Spent */}
+        <div
+          className="glass"
+          style={{
+            padding: 'var(--space-5) var(--space-6)',
+            borderRadius: 'var(--radius-xl)',
+            border: '1px solid var(--color-border)',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--space-2)' }}>
+            <div style={{ fontSize: 'var(--text-xs)', textTransform: 'uppercase', color: 'var(--color-text-muted)', fontWeight: 700, letterSpacing: '0.04em' }}>
+              Total Terpakai
+            </div>
+            <div
+              style={{
+                backgroundColor: 'hsla(38, 95%, 55%, 0.15)',
+                color: 'var(--color-accent-light)',
+                padding: '2px 8px',
+                borderRadius: 'var(--radius-full)',
+                fontSize: '11px',
+                fontWeight: 700,
+              }}
+            >
+              {percentUsed}% Terpakai
+            </div>
+          </div>
+
+          <div
+            style={{
+              fontSize: 'var(--text-2xl)',
+              fontWeight: 800,
+              color: 'var(--color-accent-light)',
+              fontFamily: 'var(--font-display)',
+              letterSpacing: '-0.02em',
+            }}
+          >
+            {formatCurrency(totalSpent, currency)}
+          </div>
+
+          <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)', marginTop: 'var(--space-2)' }}>
+            Pengeluaran yang tercatat saat ini
+          </div>
+        </div>
+
+        {/* Card 3: Remaining Budget */}
+        <div
+          className="glass"
+          style={{
+            padding: 'var(--space-5) var(--space-6)',
+            borderRadius: 'var(--radius-xl)',
+            border: isOverBudget ? '1px solid var(--color-danger)' : '1px solid var(--color-border)',
+            boxShadow: isOverBudget ? '0 0 20px hsla(0, 75%, 55%, 0.25)' : 'none',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--space-2)' }}>
+            <div style={{ fontSize: 'var(--text-xs)', textTransform: 'uppercase', color: 'var(--color-text-muted)', fontWeight: 700, letterSpacing: '0.04em' }}>
+              Sisa Budget
+            </div>
+            <div
+              style={{
+                backgroundColor: remainingStatus.bg,
+                color: remainingStatus.color,
+                padding: '2px 8px',
+                borderRadius: 'var(--radius-full)',
+                fontSize: '11px',
+                fontWeight: 700,
+              }}
+            >
+              {remainingStatus.text}
+            </div>
+          </div>
+
+          <div
+            style={{
+              fontSize: 'var(--text-2xl)',
+              fontWeight: 800,
+              color: isOverBudget ? 'var(--color-danger)' : 'var(--color-success)',
+              fontFamily: 'var(--font-display)',
+              letterSpacing: '-0.02em',
+            }}
+          >
+            {formatCurrency(remainingBudget, currency)}
+          </div>
+
+          <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)', marginTop: 'var(--space-2)' }}>
+            {isOverBudget ? 'Melebihi alokasi anggaran!' : 'Sisa saldo yang dapat dibelanjakan'}
+          </div>
+        </div>
+      </div>
+
+      {/* Progress & Alert Bar */}
+      <div
+        className="glass-dark"
+        style={{
+          padding: 'var(--space-5) var(--space-6)',
+          borderRadius: 'var(--radius-xl)',
+          border: '1px solid var(--color-border)',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--space-3)' }}>
+          <div style={{ fontSize: 'var(--text-sm)', fontWeight: 600, color: 'var(--color-text-primary)' }}>
+            Persentase Anggaran Terpakai
+          </div>
+          <Button
+            variant="primary"
+            size="sm"
+            icon={Plus}
+            onClick={onOpenAddExpense}
+          >
+            Tambah Pengeluaran
+          </Button>
+        </div>
+
+        <ProgressBar
+          value={percentUsed}
+          showPercent={false}
+          height={10}
+          variant={isOverBudget ? 'danger' : percentUsed >= 80 ? 'warning' : 'primary'}
+        />
+
+        {/* Warning Banner if Over Budget */}
+        {isOverBudget && (
+          <motion.div
+            initial={{ opacity: 0, y: 5 }}
+            animate={{ opacity: 1, y: 0 }}
+            style={{
+              marginTop: 'var(--space-4)',
+              padding: 'var(--space-3) var(--space-4)',
+              borderRadius: 'var(--radius-md)',
+              backgroundColor: 'var(--color-danger-bg)',
+              border: '1px solid hsla(0, 75%, 55%, 0.3)',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 'var(--space-3)',
+              color: 'var(--color-danger)',
+              fontSize: 'var(--text-xs)',
+              fontWeight: 600,
+            }}
+          >
+            <AlertTriangle size={16} flexShrink={0} />
+            <span>
+              Perhatian: Pengeluaran Anda melebihi target anggaran sebesar{' '}
+              <strong>{formatCurrency(Math.abs(remainingBudget), currency)}</strong>. Evaluasi kembali pos belanja Anda.
+            </span>
+          </motion.div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BudgetOverview;
diff --git a/src/components/budget/ExpenseList.jsx b/src/components/budget/ExpenseList.jsx
new file mode 100644
index 0000000..eb2e1fb
--- /dev/null
+++ b/src/components/budget/ExpenseList.jsx
@@ -0,0 +1,330 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  WalletCards,
+  Pencil,
+  Trash2,
+  Calendar,
+  Tag,
+  FileText,
+  Plus,
+  Plane,
+  Hotel,
+  Utensils,
+  Ticket,
+  ShoppingBag,
+  MoreHorizontal,
+  DollarSign,
+} from 'lucide-react';
+import Button from '../ui/Button';
+import EmptyState from '../ui/EmptyState';
+import { formatCurrency } from '../../utils/formatCurrency';
+
+const CATEGORY_ICONS = {
+  transportasi: Plane,
+  akomodasi: Hotel,
+  makan: Utensils,
+  aktivitas: Ticket,
+  oleholeh: ShoppingBag,
+  lainnya: MoreHorizontal,
+};
+
+const CATEGORY_COLORS = {
+  transportasi: '#3b82f6',
+  akomodasi: '#a855f7',
+  makan: '#22c55e',
+  aktivitas: '#eab308',
+  oleholeh: '#ec4899',
+  lainnya: '#94a3b8',
+};
+
+const CATEGORY_LABELS = {
+  transportasi: 'Transportasi',
+  akomodasi: 'Akomodasi',
+  makan: 'Makan',
+  aktivitas: 'Aktivitas',
+  oleholeh: 'Oleh-oleh',
+  lainnya: 'Lainnya',
+};
+
+const ExpenseList = ({
+  expenses = [],
+  currency = 'IDR',
+  onEditExpense,
+  onDeleteExpense,
+  onOpenAddExpense,
+}) => {
+  const [filterCategory, setFilterCategory] = useState('semua');
+
+  const filteredExpenses = expenses.filter((exp) => {
+    if (filterCategory === 'semua') return true;
+    return exp.category === filterCategory;
+  });
+
+  return (
+    <div className="glass" style={{ borderRadius: 'var(--radius-2xl)', padding: 'var(--space-6)', border: '1px solid var(--color-border)' }}>
+      {/* Header & Filter Pills */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          gap: 'var(--space-3)',
+          marginBottom: 'var(--space-6)',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
+          <div
+            style={{
+              width: '36px',
+              height: '36px',
+              borderRadius: 'var(--radius-lg)',
+              backgroundColor: 'var(--color-accent-glow)',
+              color: 'var(--color-accent)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <WalletCards size={18} />
+          </div>
+          <div>
+            <h3 style={{ fontSize: 'var(--text-lg)', color: '#ffffff' }}>
+              Daftar Rincian Pengeluaran
+            </h3>
+            <p style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)' }}>
+              {expenses.length} transaksi tercatat
+            </p>
+          </div>
+        </div>
+
+        <Button
+          variant="primary"
+          size="sm"
+          icon={Plus}
+          onClick={onOpenAddExpense}
+        >
+          Catat Pengeluaran
+        </Button>
+      </div>
+
+      {/* Filter Category Tabs */}
+      {expenses.length > 0 && (
+        <div
+          style={{
+            display: 'flex',
+            gap: 'var(--space-2)',
+            overflowX: 'auto',
+            paddingBottom: 'var(--space-3)',
+            marginBottom: 'var(--space-4)',
+            scrollbarWidth: 'none',
+          }}
+        >
+          <button
+            type="button"
+            onClick={() => setFilterCategory('semua')}
+            style={{
+              padding: '4px 12px',
+              borderRadius: 'var(--radius-full)',
+              fontSize: 'var(--text-xs)',
+              fontWeight: 600,
+              cursor: 'pointer',
+              whiteSpace: 'nowrap',
+              transition: 'all var(--transition-fast)',
+              backgroundColor: filterCategory === 'semua' ? 'var(--color-primary)' : 'hsla(222, 18%, 18%, 0.6)',
+              color: filterCategory === 'semua' ? '#ffffff' : 'var(--color-text-secondary)',
+              border: filterCategory === 'semua' ? '1px solid var(--color-primary-light)' : '1px solid var(--color-border)',
+            }}
+          >
+            Semua ({expenses.length})
+          </button>
+
+          {Object.entries(CATEGORY_LABELS).map(([key, label]) => {
+            const count = expenses.filter((e) => e.category === key).length;
+            if (count === 0) return null;
+
+            const isSelected = filterCategory === key;
+            const color = CATEGORY_COLORS[key] || 'var(--color-primary)';
+
+            return (
+              <button
+                key={key}
+                type="button"
+                onClick={() => setFilterCategory(key)}
+                style={{
+                  padding: '4px 12px',
+                  borderRadius: 'var(--radius-full)',
+                  fontSize: 'var(--text-xs)',
+                  fontWeight: 600,
+                  cursor: 'pointer',
+                  whiteSpace: 'nowrap',
+                  transition: 'all var(--transition-fast)',
+                  backgroundColor: isSelected ? color : 'hsla(222, 18%, 18%, 0.6)',
+                  color: isSelected ? '#ffffff' : 'var(--color-text-secondary)',
+                  border: isSelected ? `1px solid ${color}` : '1px solid var(--color-border)',
+                }}
+              >
+                {label} ({count})
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Expenses Items List */}
+      {filteredExpenses.length > 0 ? (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
+          <AnimatePresence>
+            {filteredExpenses.map((exp) => {
+              const Icon = CATEGORY_ICONS[exp.category] || MoreHorizontal;
+              const catColor = CATEGORY_COLORS[exp.category] || '#94a3b8';
+              const catLabel = CATEGORY_LABELS[exp.category] || exp.category;
+
+              return (
+                <motion.div
+                  key={exp.id}
+                  layout
+                  initial={{ opacity: 0, y: 8 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, scale: 0.95 }}
+                  className="glass-dark"
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: 'var(--space-4) var(--space-5)',
+                    borderRadius: 'var(--radius-xl)',
+                    border: '1px solid var(--color-border)',
+                    gap: 'var(--space-4)',
+                    flexWrap: 'wrap',
+                  }}
+                >
+                  {/* Left info: Icon & Name */}
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', flex: 1, minWidth: '220px' }}>
+                    <div
+                      style={{
+                        width: '40px',
+                        height: '40px',
+                        borderRadius: 'var(--radius-lg)',
+                        backgroundColor: `${catColor}25`,
+                        color: catColor,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        flexShrink: 0,
+                        border: `1px solid ${catColor}40`,
+                      }}
+                    >
+                      <Icon size={18} />
+                    </div>
+
+                    <div>
+                      <h4 style={{ fontSize: 'var(--text-sm)', fontWeight: 600, color: '#ffffff', lineHeight: 1.3 }}>
+                        {exp.name}
+                      </h4>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', marginTop: '2px', fontSize: '11px', color: 'var(--color-text-secondary)' }}>
+                        <span style={{ color: catColor, fontWeight: 600 }}>{catLabel}</span>
+                        <span>&bull;</span>
+                        <span>{exp.day ? `Hari ke-${exp.day}` : 'Pengeluaran Umum'}</span>
+                        {exp.notes && (
+                          <>
+                            <span>&bull;</span>
+                            <span style={{ color: 'var(--color-text-muted)', maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                              {exp.notes}
+                            </span>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Right info: Amount & Actions */}
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)' }}>
+                    <div style={{ textAlign: 'right' }}>
+                      <div
+                        style={{
+                          fontSize: 'var(--text-base)',
+                          fontWeight: 700,
+                          color: 'var(--color-accent-light)',
+                          fontFamily: 'var(--font-display)',
+                        }}
+                      >
+                        {formatCurrency(exp.amount, currency)}
+                      </div>
+                    </div>
+
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-1)' }}>
+                      <button
+                        onClick={() => onEditExpense(exp)}
+                        title="Edit Pengeluaran"
+                        style={{
+                          width: '32px',
+                          height: '32px',
+                          borderRadius: 'var(--radius-md)',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          color: 'var(--color-text-secondary)',
+                          backgroundColor: 'transparent',
+                          transition: 'all var(--transition-fast)',
+                        }}
+                        onMouseEnter={(e) => {
+                          e.currentTarget.style.color = 'var(--color-primary-light)';
+                          e.currentTarget.style.backgroundColor = 'var(--color-primary-glow)';
+                        }}
+                        onMouseLeave={(e) => {
+                          e.currentTarget.style.color = 'var(--color-text-secondary)';
+                          e.currentTarget.style.backgroundColor = 'transparent';
+                        }}
+                      >
+                        <Pencil size={15} />
+                      </button>
+
+                      <button
+                        onClick={() => onDeleteExpense(exp.id)}
+                        title="Hapus Pengeluaran"
+                        style={{
+                          width: '32px',
+                          height: '32px',
+                          borderRadius: 'var(--radius-md)',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          color: 'var(--color-text-muted)',
+                          backgroundColor: 'transparent',
+                          transition: 'all var(--transition-fast)',
+                        }}
+                        onMouseEnter={(e) => {
+                          e.currentTarget.style.color = 'var(--color-danger)';
+                          e.currentTarget.style.backgroundColor = 'var(--color-danger-bg)';
+                        }}
+                        onMouseLeave={(e) => {
+                          e.currentTarget.style.color = 'var(--color-text-muted)';
+                          e.currentTarget.style.backgroundColor = 'transparent';
+                        }}
+                      >
+                        <Trash2 size={15} />
+                      </button>
+                    </div>
+                  </div>
+                </motion.div>
+              );
+            })}
+          </AnimatePresence>
+        </div>
+      ) : (
+        <EmptyState
+          icon={DollarSign}
+          title="Belum Ada Catatan Pengeluaran"
+          description="Catat pengeluaran tiket, hotel, makanan, atau oleh-oleh untuk melihat grafik kalkulasi anggaran Anda."
+          actionText="Catat Pengeluaran Pertama"
+          actionIcon={Plus}
+          onAction={onOpenAddExpense}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ExpenseList;
diff --git a/src/components/layout/Footer.jsx b/src/components/layout/Footer.jsx
new file mode 100644
index 0000000..79061be
--- /dev/null
+++ b/src/components/layout/Footer.jsx
@@ -0,0 +1,157 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Compass, Heart, Sparkles, MapPin, ArrowUpRight } from 'lucide-react';
+import { useTourStore } from '../../store/tourStore';
+
+const Footer = () => {
+  const trip = useTourStore((state) => state.trip);
+
+  return (
+    <footer
+      style={{
+        borderTop: '1px solid var(--color-border)',
+        backgroundColor: 'hsla(222, 28%, 6%, 0.95)',
+        padding: 'var(--space-10) 0 var(--space-8)',
+        marginTop: 'auto',
+      }}
+    >
+      <div className="container">
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
+            gap: 'var(--space-8)',
+            marginBottom: 'var(--space-8)',
+          }}
+        >
+          {/* Brand Info */}
+          <div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', marginBottom: 'var(--space-3)' }}>
+              <div
+                style={{
+                  width: '34px',
+                  height: '34px',
+                  borderRadius: 'var(--radius-md)',
+                  background: 'linear-gradient(135deg, var(--color-primary), var(--color-accent))',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  color: '#fff',
+                }}
+              >
+                <Compass size={18} />
+              </div>
+              <span
+                style={{
+                  fontFamily: 'var(--font-display)',
+                  fontWeight: 800,
+                  fontSize: 'var(--text-lg)',
+                  color: 'var(--color-text-primary)',
+                }}
+              >
+                Ready to <span style={{ color: 'var(--color-accent)' }}>Plan Tour</span> (RPT)
+              </span>
+            </div>
+            <p style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', maxWidth: '320px' }}>
+              Platform interaktif perencanaan perjalanan wisata tanpa batas. Rencanakan jadwal harian, checklist packing, dan kendalikan estimasi budget.
+            </p>
+          </div>
+
+          {/* Navigasi Cepat */}
+          <div>
+            <h4
+              style={{
+                fontSize: 'var(--text-sm)',
+                fontWeight: 700,
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                marginBottom: 'var(--space-3)',
+                color: 'var(--color-text-primary)',
+              }}
+            >
+              Fitur Utama
+            </h4>
+            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
+              <li>
+                <Link to="/" style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+                  Trip Selection <ArrowUpRight size={13} />
+                </Link>
+              </li>
+              <li>
+                <Link to="/schedule" style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+                  Daily Schedule Builder <ArrowUpRight size={13} />
+                </Link>
+              </li>
+              <li>
+                <Link to="/packing" style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+                  Packing List Manager <ArrowUpRight size={13} />
+                </Link>
+              </li>
+              <li>
+                <Link to="/budget" style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+                  Budget Calculator <ArrowUpRight size={13} />
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Active Trip Status */}
+          <div>
+            <h4
+              style={{
+                fontSize: 'var(--text-sm)',
+                fontWeight: 700,
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                marginBottom: 'var(--space-3)',
+                color: 'var(--color-text-primary)',
+              }}
+            >
+              Trip Anda Saat Ini
+            </h4>
+            {trip.destination ? (
+              <div className="glass" style={{ padding: 'var(--space-3) var(--space-4)', borderRadius: 'var(--radius-md)' }}>
+                <div style={{ fontWeight: 600, fontSize: 'var(--text-sm)', color: 'var(--color-accent-light)', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                  <MapPin size={14} /> {trip.destination}
+                </div>
+                <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)', marginTop: '2px' }}>
+                  {trip.name || 'Trip Wisata'} &bull; {trip.totalDays} Hari
+                </div>
+              </div>
+            ) : (
+              <p style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)' }}>
+                Belum ada trip yang dipilih. Mulai pilih destinasi di halaman utama.
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Bottom bar */}
+        <div
+          style={{
+            borderTop: '1px solid var(--color-border)',
+            paddingTop: 'var(--space-6)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
+            gap: 'var(--space-4)',
+            fontSize: 'var(--text-xs)',
+            color: 'var(--color-text-muted)',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+            <span>© {new Date().getFullYear()} Ready to Plan Tour (RPT). Static Web Application.</span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '4px', color: 'var(--color-text-secondary)' }}>
+            <span>Made with</span>
+            <Heart size={13} style={{ color: 'var(--color-danger)' }} />
+            <span>& React.js</span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/layout/Navbar.jsx b/src/components/layout/Navbar.jsx
new file mode 100644
index 0000000..457d7c8
--- /dev/null
+++ b/src/components/layout/Navbar.jsx
@@ -0,0 +1,366 @@
+import React, { useState } from 'react';
+import { NavLink, Link, useNavigate } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Compass,
+  CalendarDays,
+  Luggage,
+  WalletCards,
+  MapPin,
+  Menu,
+  X,
+  RotateCcw,
+  AlertTriangle,
+} from 'lucide-react';
+import Modal from '../ui/Modal';
+import Button from '../ui/Button';
+import { useTourStore } from '../../store/tourStore';
+import { usePackingList } from '../../hooks/usePackingList';
+import { useBudget } from '../../hooks/useBudget';
+import { toast } from '../../store/toastStore';
+
+const Navbar = () => {
+  const navigate = useNavigate();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isResetModalOpen, setIsResetModalOpen] = useState(false);
+
+  const trip = useTourStore((state) => state.trip);
+  const resetAll = useTourStore((state) => state.resetAll);
+  const { percentPacked } = usePackingList();
+  const { percentUsed, isOverBudget } = useBudget();
+
+  const navLinks = [
+    { to: '/', label: 'Pilih Trip', icon: Compass, end: true },
+    { to: '/schedule', label: 'Jadwal Harian', icon: CalendarDays },
+    {
+      to: '/packing',
+      label: 'Packing List',
+      icon: Luggage,
+      badge: percentPacked > 0 ? `${percentPacked}%` : null,
+      badgeVariant: percentPacked === 100 ? 'badge-success' : 'badge-primary',
+    },
+    {
+      to: '/budget',
+      label: 'Budget',
+      icon: WalletCards,
+      badge: isOverBudget ? 'Over!' : percentUsed > 0 ? `${percentUsed}%` : null,
+      badgeVariant: isOverBudget ? 'badge-danger' : 'badge-accent',
+    },
+  ];
+
+  const handleConfirmReset = () => {
+    resetAll();
+    setIsResetModalOpen(false);
+    setIsMobileMenuOpen(false);
+    toast.info('Seluruh data rencana perjalanan telah direset.');
+    navigate('/');
+  };
+
+  return (
+    <>
+      <header
+        className="glass-dark"
+        style={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 'var(--z-sticky)',
+          borderBottom: '1px solid var(--color-border)',
+          padding: 'var(--space-3) 0',
+          backdropFilter: 'blur(20px)',
+        }}
+      >
+        <div className="container flex-between" style={{ position: 'relative' }}>
+          {/* Brand */}
+          <Link
+            to="/"
+            style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', textDecoration: 'none' }}
+            onClick={() => setIsMobileMenuOpen(false)}
+          >
+            <div
+              style={{
+                width: '40px',
+                height: '40px',
+                borderRadius: 'var(--radius-lg)',
+                background: 'linear-gradient(135deg, var(--color-primary), var(--color-accent))',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: '#fff',
+                boxShadow: 'var(--shadow-glow-primary)',
+              }}
+            >
+              <Compass size={22} />
+            </div>
+            <div>
+              <div
+                style={{
+                  fontFamily: 'var(--font-display)',
+                  fontWeight: 800,
+                  fontSize: 'var(--text-lg)',
+                  color: 'var(--color-text-primary)',
+                  letterSpacing: '-0.02em',
+                  lineHeight: 1.1,
+                }}
+              >
+                Ready to <span style={{ color: 'var(--color-accent)' }}>Plan Tour</span>
+              </div>
+              {trip.destination ? (
+                <div
+                  style={{
+                    fontSize: 'var(--text-xs)',
+                    color: 'var(--color-accent-light)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '4px',
+                    fontWeight: 500,
+                  }}
+                >
+                  <MapPin size={11} /> {trip.destination} ({trip.totalDays} Hari)
+                </div>
+              ) : (
+                <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)', fontWeight: 600 }}>
+                  RPT &bull; Static Trip Planner
+                </div>
+              )}
+            </div>
+          </Link>
+
+          {/* Desktop Navigation Links */}
+          <nav
+            style={{
+              display: 'none',
+              alignItems: 'center',
+              gap: 'var(--space-2)',
+            }}
+            className="desktop-nav"
+          >
+            {navLinks.map((link) => {
+              const Icon = link.icon;
+              return (
+                <NavLink
+                  key={link.to}
+                  to={link.to}
+                  end={link.end}
+                  style={({ isActive }) => ({
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 'var(--space-2)',
+                    padding: 'var(--space-2) var(--space-4)',
+                    borderRadius: 'var(--radius-md)',
+                    fontSize: 'var(--text-sm)',
+                    fontWeight: 600,
+                    color: isActive ? 'var(--color-primary-light)' : 'var(--color-text-secondary)',
+                    background: isActive ? 'var(--color-primary-glow)' : 'transparent',
+                    border: isActive ? '1px solid hsla(220, 90%, 56%, 0.3)' : '1px solid transparent',
+                    transition: 'all var(--transition-fast)',
+                  })}
+                >
+                  <Icon size={16} />
+                  <span>{link.label}</span>
+                  {link.badge && (
+                    <span className={`badge ${link.badgeVariant}`} style={{ fontSize: '10px', padding: '1px 6px' }}>
+                      {link.badge}
+                    </span>
+                  )}
+                </NavLink>
+              );
+            })}
+
+            {/* Reset Trip Button in Navbar if trip is active */}
+            {trip.destination && (
+              <button
+                type="button"
+                onClick={() => setIsResetModalOpen(true)}
+                title="Reset seluruh rencana perjalanan"
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '4px',
+                  padding: 'var(--space-2) var(--space-3)',
+                  borderRadius: 'var(--radius-md)',
+                  fontSize: 'var(--text-xs)',
+                  color: 'var(--color-text-muted)',
+                  backgroundColor: 'transparent',
+                  border: '1px solid transparent',
+                  cursor: 'pointer',
+                  transition: 'all var(--transition-fast)',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.color = 'var(--color-danger)';
+                  e.currentTarget.style.backgroundColor = 'var(--color-danger-bg)';
+                  e.currentTarget.style.borderColor = 'hsla(0, 75%, 55%, 0.3)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.color = 'var(--color-text-muted)';
+                  e.currentTarget.style.backgroundColor = 'transparent';
+                  e.currentTarget.style.borderColor = 'transparent';
+                }}
+              >
+                <RotateCcw size={13} />
+                <span>Reset</span>
+              </button>
+            )}
+          </nav>
+
+          {/* Mobile Hamburger Button */}
+          <button
+            className="mobile-menu-btn"
+            aria-label="Toggle Menu"
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            style={{
+              display: 'none',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '40px',
+              height: '40px',
+              borderRadius: 'var(--radius-md)',
+              backgroundColor: 'var(--color-bg-elevated)',
+              border: '1px solid var(--color-border)',
+              color: 'var(--color-text-primary)',
+            }}
+          >
+            {isMobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
+          </button>
+        </div>
+
+        {/* Mobile Drawer Navigation */}
+        <AnimatePresence>
+          {isMobileMenuOpen && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              transition={{ duration: 0.25 }}
+              style={{
+                overflow: 'hidden',
+                borderTop: '1px solid var(--color-border)',
+                marginTop: 'var(--space-3)',
+                backgroundColor: 'hsla(222, 28%, 9%, 0.98)',
+              }}
+            >
+              <div className="container" style={{ padding: 'var(--space-4) var(--space-6)' }}>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
+                  {navLinks.map((link) => {
+                    const Icon = link.icon;
+                    return (
+                      <NavLink
+                        key={link.to}
+                        to={link.to}
+                        end={link.end}
+                        onClick={() => setIsMobileMenuOpen(false)}
+                        style={({ isActive }) => ({
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                          padding: 'var(--space-3) var(--space-4)',
+                          borderRadius: 'var(--radius-md)',
+                          fontSize: 'var(--text-sm)',
+                          fontWeight: 600,
+                          color: isActive ? 'var(--color-primary-light)' : 'var(--color-text-secondary)',
+                          background: isActive ? 'var(--color-primary-glow)' : 'hsla(222, 18%, 18%, 0.5)',
+                          border: isActive ? '1px solid hsla(220, 90%, 56%, 0.3)' : '1px solid var(--color-border)',
+                        })}
+                      >
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
+                          <Icon size={18} />
+                          <span>{link.label}</span>
+                        </div>
+                        {link.badge && (
+                          <span className={`badge ${link.badgeVariant}`} style={{ fontSize: '10px', padding: '2px 8px' }}>
+                            {link.badge}
+                          </span>
+                        )}
+                      </NavLink>
+                    );
+                  })}
+
+                  {trip.destination && (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setIsMobileMenuOpen(false);
+                        setIsResetModalOpen(true);
+                      }}
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 'var(--space-3)',
+                        padding: 'var(--space-3) var(--space-4)',
+                        borderRadius: 'var(--radius-md)',
+                        fontSize: 'var(--text-sm)',
+                        fontWeight: 600,
+                        color: 'var(--color-danger)',
+                        backgroundColor: 'var(--color-danger-bg)',
+                        border: '1px solid hsla(0, 75%, 55%, 0.3)',
+                        cursor: 'pointer',
+                        marginTop: 'var(--space-2)',
+                      }}
+                    >
+                      <RotateCcw size={16} />
+                      <span>Reset Seluruh Data Trip</span>
+                    </button>
+                  )}
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <style>{`
+          @media (min-width: 768px) {
+            .desktop-nav { display: flex !important; }
+            .mobile-menu-btn { display: none !important; }
+          }
+          @media (max-width: 767px) {
+            .desktop-nav { display: none !important; }
+            .mobile-menu-btn { display: flex !important; }
+          }
+        `}</style>
+      </header>
+
+      {/* Confirmation Modal for Reset */}
+      <Modal
+        isOpen={isResetModalOpen}
+        onClose={() => setIsResetModalOpen(false)}
+        title="Konfirmasi Reset Rencana Perjalanan"
+        maxWidth="sm"
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setIsResetModalOpen(false)}>
+              Batal
+            </Button>
+            <Button variant="danger" icon={RotateCcw} onClick={handleConfirmReset}>
+              Ya, Reset Semua
+            </Button>
+          </>
+        }
+      >
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
+          <div
+            style={{
+              width: '48px',
+              height: '48px',
+              borderRadius: 'var(--radius-full)',
+              backgroundColor: 'var(--color-danger-bg)',
+              color: 'var(--color-danger)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              margin: '0 auto',
+            }}
+          >
+            <AlertTriangle size={24} />
+          </div>
+          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', textAlign: 'center' }}>
+            Apakah Anda yakin ingin mereset rencana perjalanan ke <strong>{trip.destination}</strong>?
+          </p>
+          <p style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)', textAlign: 'center' }}>
+            Tindakan ini akan menghapus jadwal harian, checklist barang, dan catatan pengeluaran budget yang tersimpan di browser Anda.
+          </p>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default Navbar;
diff --git a/src/components/layout/PageWrapper.jsx b/src/components/layout/PageWrapper.jsx
new file mode 100644
index 0000000..cefc7bb
--- /dev/null
+++ b/src/components/layout/PageWrapper.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const PageWrapper = ({ children, className = '', style = {}, fullWidth = false }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 15 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -15 }}
+      transition={{ duration: 0.25, ease: 'easeOut' }}
+      className={`page-wrapper ${fullWidth ? '' : 'container'} ${className}`}
+      style={style}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default PageWrapper;
diff --git a/src/components/packing/PackingCategory.jsx b/src/components/packing/PackingCategory.jsx
new file mode 100644
index 0000000..2c95516
--- /dev/null
+++ b/src/components/packing/PackingCategory.jsx
@@ -0,0 +1,255 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  ChevronDown,
+  ChevronUp,
+  Shirt,
+  FileText,
+  Smartphone,
+  HeartPulse,
+  Sparkles,
+  Package,
+  Plus,
+  CheckSquare,
+  Square,
+} from 'lucide-react';
+import PackingItem from './PackingItem';
+import Button from '../ui/Button';
+
+const getCategoryIcon = (category) => {
+  switch (category) {
+    case 'Pakaian':
+      return Shirt;
+    case 'Dokumen':
+      return FileText;
+    case 'Elektronik':
+      return Smartphone;
+    case 'Obat-obatan':
+      return HeartPulse;
+    case 'Toiletries':
+      return Sparkles;
+    default:
+      return Package;
+  }
+};
+
+const PackingCategory = ({
+  category,
+  items = [],
+  onToggleItem,
+  onUpdateQty,
+  onDeleteItem,
+  onAddItem,
+  onToggleAll,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [newItemName, setNewItemName] = useState('');
+  const [newItemQty, setNewItemQty] = useState(1);
+
+  const CategoryIcon = getCategoryIcon(category);
+  const totalCount = items.length;
+  const packedCount = items.filter((i) => i.checked).length;
+  const isAllChecked = totalCount > 0 && packedCount === totalCount;
+  const categoryPercent = totalCount > 0 ? Math.round((packedCount / totalCount) * 100) : 0;
+
+  const handleAddNewItem = (e) => {
+    e.preventDefault();
+    if (!newItemName.trim()) return;
+
+    onAddItem(category, {
+      name: newItemName.trim(),
+      qty: Number(newItemQty) || 1,
+      checked: false,
+    });
+
+    setNewItemName('');
+    setNewItemQty(1);
+  };
+
+  return (
+    <div
+      className="glass"
+      style={{
+        borderRadius: 'var(--radius-xl)',
+        overflow: 'hidden',
+        border: '1px solid var(--color-border)',
+        marginBottom: 'var(--space-4)',
+      }}
+    >
+      {/* Category Header */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: 'var(--space-4) var(--space-6)',
+          backgroundColor: 'hsla(222, 22%, 16%, 0.9)',
+          borderBottom: isExpanded ? '1px solid var(--color-border)' : 'none',
+          cursor: 'pointer',
+          userSelect: 'none',
+        }}
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
+          <div
+            style={{
+              width: '36px',
+              height: '36px',
+              borderRadius: 'var(--radius-lg)',
+              backgroundColor: 'var(--color-primary-glow)',
+              color: 'var(--color-primary-light)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <CategoryIcon size={18} />
+          </div>
+          <div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <h3 style={{ fontSize: 'var(--text-base)', color: 'var(--color-text-primary)', fontWeight: 700 }}>
+                {category}
+              </h3>
+              <span
+                style={{
+                  fontSize: '11px',
+                  fontWeight: 600,
+                  padding: '2px 8px',
+                  borderRadius: 'var(--radius-full)',
+                  backgroundColor: categoryPercent === 100 ? 'var(--color-success-bg)' : 'hsla(220, 15%, 25%, 0.6)',
+                  color: categoryPercent === 100 ? 'var(--color-success)' : 'var(--color-text-secondary)',
+                  border: categoryPercent === 100 ? '1px solid hsla(142, 70%, 45%, 0.3)' : '1px solid var(--color-border)',
+                }}
+              >
+                {packedCount}/{totalCount} item ({categoryPercent}%)
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Right Controls: Check All button & Expand/Collapse Toggle */}
+        <div
+          style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {totalCount > 0 && (
+            <button
+              type="button"
+              onClick={() => onToggleAll(category, !isAllChecked)}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '4px',
+                padding: '4px 10px',
+                borderRadius: 'var(--radius-md)',
+                fontSize: 'var(--text-xs)',
+                fontWeight: 600,
+                color: isAllChecked ? 'var(--color-success)' : 'var(--color-text-secondary)',
+                backgroundColor: 'hsla(220, 15%, 20%, 0.6)',
+                border: '1px solid var(--color-border)',
+                cursor: 'pointer',
+                transition: 'all var(--transition-fast)',
+              }}
+              onMouseEnter={(e) => (e.currentTarget.style.color = '#ffffff')}
+              onMouseLeave={(e) => (e.currentTarget.style.color = isAllChecked ? 'var(--color-success)' : 'var(--color-text-secondary)')}
+            >
+              {isAllChecked ? <CheckSquare size={13} /> : <Square size={13} />}
+              <span>{isAllChecked ? 'Batalkan Semua' : 'Centang Semua'}</span>
+            </button>
+          )}
+
+          <button
+            type="button"
+            onClick={() => setIsExpanded(!isExpanded)}
+            style={{
+              padding: '6px',
+              borderRadius: 'var(--radius-md)',
+              color: 'var(--color-text-muted)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {isExpanded ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
+          </button>
+        </div>
+      </div>
+
+      {/* Accordion Content */}
+      <AnimatePresence initial={false}>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+          >
+            <div style={{ padding: 'var(--space-5) var(--space-6)' }}>
+              {/* Item List */}
+              {items.length > 0 ? (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)', marginBottom: 'var(--space-4)' }}>
+                  {items.map((item) => (
+                    <PackingItem
+                      key={item.id}
+                      item={item}
+                      category={category}
+                      onToggle={onToggleItem}
+                      onUpdateQty={onUpdateQty}
+                      onDelete={onDeleteItem}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <p style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)', marginBottom: 'var(--space-4)', fontStyle: 'italic' }}>
+                  Belum ada item di kategori ini. Tambahkan di bawah.
+                </p>
+              )}
+
+              {/* Inline Add Form */}
+              <form
+                onSubmit={handleAddNewItem}
+                style={{
+                  display: 'flex',
+                  gap: 'var(--space-2)',
+                  alignItems: 'center',
+                  paddingTop: 'var(--space-2)',
+                  borderTop: '1px dashed var(--color-border)',
+                }}
+              >
+                <input
+                  type="text"
+                  className="input-field"
+                  placeholder={`+ Tambah barang ke ${category}...`}
+                  value={newItemName}
+                  onChange={(e) => setNewItemName(e.target.value)}
+                  style={{ flex: 1, padding: 'var(--space-2) var(--space-3)', fontSize: 'var(--text-xs)' }}
+                />
+
+                <input
+                  type="number"
+                  min="1"
+                  className="input-field"
+                  title="Jumlah / Quantity"
+                  value={newItemQty}
+                  onChange={(e) => setNewItemQty(Math.max(1, parseInt(e.target.value, 10) || 1))}
+                  style={{ width: '60px', padding: 'var(--space-2) var(--space-2)', textAlign: 'center', fontSize: 'var(--text-xs)' }}
+                />
+
+                <Button
+                  type="submit"
+                  variant="primary"
+                  size="sm"
+                  icon={Plus}
+                >
+                  Tambah
+                </Button>
+              </form>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default PackingCategory;
diff --git a/src/components/packing/PackingItem.jsx b/src/components/packing/PackingItem.jsx
new file mode 100644
index 0000000..f1f6d31
--- /dev/null
+++ b/src/components/packing/PackingItem.jsx
@@ -0,0 +1,181 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Check, Plus, Minus, Trash2 } from 'lucide-react';
+
+const PackingItem = ({
+  item,
+  category,
+  onToggle,
+  onUpdateQty,
+  onDelete,
+}) => {
+  const isChecked = Boolean(item.checked);
+
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, scale: 0.95 }}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: 'var(--space-3) var(--space-4)',
+        borderRadius: 'var(--radius-lg)',
+        backgroundColor: isChecked ? 'hsla(222, 28%, 10%, 0.5)' : 'hsla(222, 22%, 18%, 0.6)',
+        border: isChecked ? '1px solid hsla(142, 70%, 45%, 0.25)' : '1px solid var(--color-border)',
+        transition: 'all var(--transition-fast)',
+        gap: 'var(--space-3)',
+      }}
+    >
+      {/* Checkbox & Item Name */}
+      <div
+        onClick={() => onToggle(category, item.id)}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--space-3)',
+          cursor: 'pointer',
+          flex: 1,
+        }}
+      >
+        {/* Custom Animated Checkbox */}
+        <motion.div
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.9 }}
+          style={{
+            width: '22px',
+            height: '22px',
+            borderRadius: 'var(--radius-sm)',
+            border: isChecked ? '2px solid var(--color-success)' : '2px solid var(--color-border-light)',
+            backgroundColor: isChecked ? 'var(--color-success)' : 'transparent',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: '#ffffff',
+            transition: 'background-color var(--transition-fast), border-color var(--transition-fast)',
+            flexShrink: 0,
+          }}
+        >
+          {isChecked && (
+            <motion.div
+              initial={{ scale: 0, rotate: -45 }}
+              animate={{ scale: 1, rotate: 0 }}
+              transition={{ type: 'spring', damping: 15, stiffness: 400 }}
+            >
+              <Check size={14} strokeWidth={3} />
+            </motion.div>
+          )}
+        </motion.div>
+
+        {/* Item Label */}
+        <span
+          style={{
+            fontSize: 'var(--text-sm)',
+            fontWeight: 500,
+            color: isChecked ? 'var(--color-text-muted)' : 'var(--color-text-primary)',
+            textDecoration: isChecked ? 'line-through' : 'none',
+            transition: 'all var(--transition-fast)',
+            lineHeight: 1.3,
+          }}
+        >
+          {item.name}
+        </span>
+      </div>
+
+      {/* Quantity Counter & Delete Button */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
+        {/* Quantity Controls */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            backgroundColor: 'hsla(220, 15%, 15%, 0.8)',
+            borderRadius: 'var(--radius-md)',
+            border: '1px solid var(--color-border)',
+            padding: '2px',
+          }}
+        >
+          <button
+            type="button"
+            onClick={() => onUpdateQty(category, item.id, Math.max(1, (item.qty || 1) - 1))}
+            disabled={(item.qty || 1) <= 1}
+            style={{
+              width: '22px',
+              height: '22px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: (item.qty || 1) <= 1 ? 'var(--color-text-muted)' : 'var(--color-text-secondary)',
+              cursor: (item.qty || 1) <= 1 ? 'not-allowed' : 'pointer',
+              borderRadius: 'var(--radius-xs)',
+            }}
+          >
+            <Minus size={12} />
+          </button>
+
+          <span
+            style={{
+              minWidth: '24px',
+              textAlign: 'center',
+              fontSize: 'var(--text-xs)',
+              fontWeight: 700,
+              color: '#ffffff',
+            }}
+          >
+            {item.qty || 1}
+          </span>
+
+          <button
+            type="button"
+            onClick={() => onUpdateQty(category, item.id, (item.qty || 1) + 1)}
+            style={{
+              width: '22px',
+              height: '22px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: 'var(--color-text-secondary)',
+              cursor: 'pointer',
+              borderRadius: 'var(--radius-xs)',
+            }}
+          >
+            <Plus size={12} />
+          </button>
+        </div>
+
+        {/* Delete button */}
+        <button
+          type="button"
+          onClick={() => onDelete(category, item.id)}
+          title="Hapus barang"
+          aria-label="Hapus barang"
+          style={{
+            width: '28px',
+            height: '28px',
+            borderRadius: 'var(--radius-md)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'var(--color-text-muted)',
+            transition: 'all var(--transition-fast)',
+            backgroundColor: 'transparent',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = 'var(--color-danger)';
+            e.currentTarget.style.backgroundColor = 'var(--color-danger-bg)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = 'var(--color-text-muted)';
+            e.currentTarget.style.backgroundColor = 'transparent';
+          }}
+        >
+          <Trash2 size={14} />
+        </button>
+      </div>
+    </motion.div>
+  );
+};
+
+export default PackingItem;
diff --git a/src/components/packing/PackingOverview.jsx b/src/components/packing/PackingOverview.jsx
new file mode 100644
index 0000000..739552d
--- /dev/null
+++ b/src/components/packing/PackingOverview.jsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Luggage, CheckCircle2, AlertCircle, Sparkles, RefreshCw, Layers } from 'lucide-react';
+import ProgressBar from '../ui/ProgressBar';
+import Button from '../ui/Button';
+
+const PackingOverview = ({
+  totalItems = 0,
+  packedItems = 0,
+  percentPacked = 0,
+  isComplete = false,
+  onOpenTemplateModal,
+  onResetAll,
+}) => {
+  const getStatusBadge = () => {
+    if (totalItems === 0) {
+      return { text: 'Daftar Kosong', variant: 'neutral' };
+    }
+    if (isComplete) {
+      return { text: '🎉 Siap Berangkat!', variant: 'success' };
+    }
+    if (percentPacked > 50) {
+      return { text: 'Hampir Selesai Dikemas', variant: 'accent' };
+    }
+    if (percentPacked > 0) {
+      return { text: 'Sedang Dikemas', variant: 'primary' };
+    }
+    return { text: 'Belum Dimulai', variant: 'warning' };
+  };
+
+  const status = getStatusBadge();
+
+  return (
+    <div
+      className="glass-dark"
+      style={{
+        borderRadius: 'var(--radius-2xl)',
+        padding: 'var(--space-6)',
+        marginBottom: 'var(--space-8)',
+        border: isComplete ? '1px solid var(--color-success)' : '1px solid var(--color-border)',
+        boxShadow: isComplete ? 'var(--shadow-lg), 0 0 25px hsla(142, 70%, 45%, 0.2)' : 'var(--shadow-md)',
+        transition: 'all var(--transition-base)',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          gap: 'var(--space-4)',
+          marginBottom: 'var(--space-5)',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)' }}>
+          <div
+            style={{
+              width: '48px',
+              height: '48px',
+              borderRadius: 'var(--radius-xl)',
+              background: isComplete
+                ? 'linear-gradient(135deg, var(--color-success), hsl(142, 70%, 55%))'
+                : 'linear-gradient(135deg, var(--color-primary), var(--color-accent))',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#ffffff',
+              boxShadow: isComplete ? '0 0 20px hsla(142, 70%, 45%, 0.4)' : 'var(--shadow-glow-primary)',
+            }}
+          >
+            {isComplete ? <CheckCircle2 size={26} /> : <Luggage size={24} />}
+          </div>
+          <div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <h2 style={{ fontSize: 'var(--text-xl)', color: '#ffffff' }}>
+                Progress Pengepakan Barang
+              </h2>
+              <span className={`badge badge-${status.variant}`} style={{ fontSize: '11px' }}>
+                {status.text}
+              </span>
+            </div>
+            <p style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)', marginTop: '2px' }}>
+              {packedItems} dari {totalItems} barang sudah siap di dalam koper / tas
+            </p>
+          </div>
+        </div>
+
+        {/* Action Buttons */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+          <Button
+            variant="secondary"
+            size="sm"
+            icon={Layers}
+            onClick={onOpenTemplateModal}
+          >
+            Ganti Template
+          </Button>
+          {totalItems > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              icon={RefreshCw}
+              onClick={onResetAll}
+              title="Reset status centang"
+            >
+              Reset Centang
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Main Progress Bar */}
+      <ProgressBar
+        value={percentPacked}
+        showPercent={true}
+        height={10}
+        variant={isComplete ? 'success' : percentPacked > 50 ? 'accent' : 'primary'}
+      />
+
+      {/* Celebration Message */}
+      {isComplete && (
+        <motion.div
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          style={{
+            marginTop: 'var(--space-4)',
+            padding: 'var(--space-3) var(--space-4)',
+            borderRadius: 'var(--radius-lg)',
+            backgroundColor: 'var(--color-success-bg)',
+            border: '1px solid hsla(142, 70%, 45%, 0.3)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 'var(--space-3)',
+            color: 'var(--color-success)',
+            fontSize: 'var(--text-sm)',
+            fontWeight: 600,
+          }}
+        >
+          <Sparkles size={18} />
+          <span>Luar biasa! Semua perlengkapan sudah lengkap dipak. Anda siap berangkat liburan! 🏖️🚀</span>
+        </motion.div>
+      )}
+    </div>
+  );
+};
+
+export default PackingOverview;
diff --git a/src/components/packing/TemplateModal.jsx b/src/components/packing/TemplateModal.jsx
new file mode 100644
index 0000000..3c94be4
--- /dev/null
+++ b/src/components/packing/TemplateModal.jsx
@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import { Palmtree, Mountain, Building2, Landmark, Check, AlertTriangle } from 'lucide-react';
+import Modal from '../ui/Modal';
+import Button from '../ui/Button';
+import { packingTemplates } from '../../data/packingTemplates';
+
+const templateOptions = [
+  { id: 'pantai', name: 'Trip Pantai & Kepulauan', icon: Palmtree, desc: 'Baju renang, sunscreen SPF 50+, kacamata hitam, dry bag, dll.' },
+  { id: 'gunung', name: 'Trip Gunung & Alam Sejuk', icon: Mountain, desc: 'Jaket windbreaker, sepatu trekking, tolak angin, heat pack, dll.' },
+  { id: 'kota', name: 'Trip Kota & Metropolitan', icon: Building2, desc: 'Outfit smart casual, sneakers empuk, e-money transit, adaptor, dll.' },
+  { id: 'budaya', name: 'Trip Budaya & Heritage', icon: Landmark, desc: 'Pakaian sopan tertutup, selendang, slip-on shoes, lotion nyamuk, dll.' },
+];
+
+const TemplateModal = ({
+  isOpen,
+  onClose,
+  onApplyTemplate,
+  currentCategory = 'pantai',
+}) => {
+  const [selectedTemplate, setSelectedTemplate] = useState(currentCategory || 'pantai');
+
+  const handleApply = () => {
+    onApplyTemplate(selectedTemplate);
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Pilih Template Bawaan Perjalanan"
+      maxWidth="md"
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>
+            Batal
+          </Button>
+          <Button
+            variant="primary"
+            icon={Check}
+            onClick={handleApply}
+          >
+            Terapkan Template
+          </Button>
+        </>
+      }
+    >
+      <div>
+        <p style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)', marginBottom: 'var(--space-4)' }}>
+          Pilih template bawaan sesuai jenis destinasi Anda untuk memuat daftar checklist barang secara otomatis.
+        </p>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
+          {templateOptions.map((opt) => {
+            const Icon = opt.icon;
+            const isSelected = selectedTemplate === opt.id;
+
+            return (
+              <div
+                key={opt.id}
+                onClick={() => setSelectedTemplate(opt.id)}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 'var(--space-4)',
+                  padding: 'var(--space-4)',
+                  borderRadius: 'var(--radius-xl)',
+                  backgroundColor: isSelected ? 'var(--color-primary-glow)' : 'hsla(222, 22%, 16%, 0.6)',
+                  border: isSelected ? '1px solid var(--color-primary-light)' : '1px solid var(--color-border)',
+                  cursor: 'pointer',
+                  transition: 'all var(--transition-fast)',
+                }}
+              >
+                <div
+                  style={{
+                    width: '42px',
+                    height: '42px',
+                    borderRadius: 'var(--radius-lg)',
+                    backgroundColor: isSelected ? 'var(--color-primary)' : 'hsla(220, 15%, 22%, 0.6)',
+                    color: '#ffffff',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexShrink: 0,
+                  }}
+                >
+                  <Icon size={20} />
+                </div>
+
+                <div style={{ flex: 1 }}>
+                  <div style={{ fontWeight: 700, fontSize: 'var(--text-sm)', color: '#ffffff' }}>
+                    {opt.name}
+                  </div>
+                  <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)', marginTop: '2px' }}>
+                    {opt.desc}
+                  </div>
+                </div>
+
+                <div
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    borderRadius: 'var(--radius-full)',
+                    border: isSelected ? '6px solid var(--color-primary-light)' : '2px solid var(--color-border-light)',
+                    backgroundColor: '#ffffff',
+                    transition: 'all var(--transition-fast)',
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
+
+        <div
+          style={{
+            marginTop: 'var(--space-4)',
+            padding: 'var(--space-3) var(--space-4)',
+            borderRadius: 'var(--radius-md)',
+            backgroundColor: 'var(--color-warning-bg)',
+            border: '1px solid hsla(38, 95%, 55%, 0.3)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 'var(--space-2)',
+            fontSize: 'var(--text-xs)',
+            color: 'var(--color-warning)',
+          }}
+        >
+          <AlertTriangle size={15} flexShrink={0} />
+          <span>Menerapkan template baru akan memperbarui checklist barang bawaan saat ini.</span>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default TemplateModal;
diff --git a/src/components/schedule/ActivityItem.jsx b/src/components/schedule/ActivityItem.jsx
new file mode 100644
index 0000000..7fa86c1
--- /dev/null
+++ b/src/components/schedule/ActivityItem.jsx
@@ -0,0 +1,299 @@
+import React from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { motion } from 'framer-motion';
+import {
+  GripVertical,
+  Clock,
+  MapPin,
+  FileText,
+  Pencil,
+  Trash2,
+  Compass,
+  Utensils,
+  Plane,
+  Hotel,
+  ShoppingBag,
+  Coffee,
+  MoreHorizontal,
+} from 'lucide-react';
+import Badge from '../ui/Badge';
+import { ACTIVITY_CATEGORIES } from '../../data/activities';
+
+const getCategoryIcon = (category) => {
+  switch (category) {
+    case 'makan':
+      return Utensils;
+    case 'transportasi':
+      return Plane;
+    case 'checkin':
+      return Hotel;
+    case 'belanja':
+      return ShoppingBag;
+    case 'santai':
+      return Coffee;
+    case 'wisata':
+      return Compass;
+    default:
+      return MoreHorizontal;
+  }
+};
+
+const ActivityItem = ({
+  activity,
+  onEdit,
+  onDelete,
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: activity.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : 1,
+    zIndex: isDragging ? 999 : 1,
+  };
+
+  const catConfig = ACTIVITY_CATEGORIES[activity.category] || ACTIVITY_CATEGORIES.lainnya;
+  const CategoryIcon = getCategoryIcon(activity.category);
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="activity-item-wrapper"
+    >
+      <motion.div
+        layout
+        initial={{ opacity: 0, x: -15 }}
+        animate={{ opacity: 1, x: 0 }}
+        exit={{ opacity: 0, x: 15 }}
+        className="glass"
+        style={{
+          display: 'flex',
+          alignItems: 'stretch',
+          borderRadius: 'var(--radius-xl)',
+          overflow: 'hidden',
+          border: isDragging ? '1px solid var(--color-primary-light)' : '1px solid var(--color-border)',
+          backgroundColor: isDragging ? 'hsla(222, 28%, 20%, 0.95)' : 'hsla(222, 22%, 15%, 0.8)',
+          boxShadow: isDragging ? 'var(--shadow-lg), var(--shadow-glow-primary)' : 'var(--shadow-sm)',
+          transition: 'border-color var(--transition-fast), background-color var(--transition-fast)',
+        }}
+      >
+        {/* Drag Handle */}
+        <div
+          {...attributes}
+          {...listeners}
+          title="Tarik untuk memindahkan urutan"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '0 var(--space-3)',
+            backgroundColor: 'hsla(222, 28%, 10%, 0.5)',
+            borderRight: '1px solid var(--color-border)',
+            cursor: 'grab',
+            color: 'var(--color-text-muted)',
+            touchAction: 'none',
+          }}
+          onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--color-primary-light)')}
+          onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--color-text-muted)')}
+        >
+          <GripVertical size={18} />
+        </div>
+
+        {/* Time Pillar */}
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 'var(--space-4) var(--space-4)',
+            backgroundColor: 'hsla(220, 15%, 15%, 0.4)',
+            borderRight: '1px solid var(--color-border)',
+            minWidth: '85px',
+          }}
+        >
+          <div
+            style={{
+              fontSize: 'var(--text-base)',
+              fontWeight: 700,
+              color: '#ffffff',
+              fontFamily: 'monospace',
+              letterSpacing: '-0.02em',
+            }}
+          >
+            {activity.time || '09:00'}
+          </div>
+          <div
+            style={{
+              fontSize: '11px',
+              color: 'var(--color-text-muted)',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '2px',
+              marginTop: '2px',
+            }}
+          >
+            <Clock size={11} /> {activity.duration || 60}m
+          </div>
+        </div>
+
+        {/* Category Accent Stripe */}
+        <div
+          style={{
+            width: '4px',
+            backgroundColor: catConfig.color,
+          }}
+        />
+
+        {/* Main Details */}
+        <div
+          style={{
+            flex: 1,
+            padding: 'var(--space-3) var(--space-4)',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            gap: 'var(--space-1)',
+          }}
+        >
+          {/* Header Row: Category Badge */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+            <span
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '4px',
+                padding: '2px 8px',
+                borderRadius: 'var(--radius-full)',
+                fontSize: '10px',
+                fontWeight: 700,
+                textTransform: 'uppercase',
+                backgroundColor: catConfig.bgColor,
+                color: catConfig.color,
+                border: `1px solid ${catConfig.color}`,
+              }}
+            >
+              <CategoryIcon size={11} />
+              {catConfig.label}
+            </span>
+          </div>
+
+          {/* Activity Name */}
+          <h4
+            style={{
+              fontSize: 'var(--text-base)',
+              fontWeight: 600,
+              color: 'var(--color-text-primary)',
+              lineHeight: 1.3,
+            }}
+          >
+            {activity.name}
+          </h4>
+
+          {/* Location & Notes */}
+          <div
+            style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              alignItems: 'center',
+              gap: 'var(--space-4)',
+              fontSize: 'var(--text-xs)',
+              color: 'var(--color-text-secondary)',
+            }}
+          >
+            {activity.location && (
+              <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                <MapPin size={12} style={{ color: 'var(--color-accent)' }} />
+                <span>{activity.location}</span>
+              </div>
+            )}
+            {activity.notes && (
+              <div style={{ display: 'flex', alignItems: 'center', gap: '4px', color: 'var(--color-text-muted)' }}>
+                <FileText size={12} />
+                <span style={{ maxWidth: '300px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {activity.notes}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Action Buttons: Edit & Delete */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            padding: '0 var(--space-3)',
+            gap: 'var(--space-1)',
+            borderLeft: '1px solid var(--color-border)',
+          }}
+        >
+          <button
+            onClick={() => onEdit(activity)}
+            title="Edit Aktivitas"
+            aria-label="Edit Aktivitas"
+            style={{
+              width: '32px',
+              height: '32px',
+              borderRadius: 'var(--radius-md)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: 'var(--color-text-secondary)',
+              backgroundColor: 'transparent',
+              transition: 'all var(--transition-fast)',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = 'var(--color-primary-light)';
+              e.currentTarget.style.backgroundColor = 'var(--color-primary-glow)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = 'var(--color-text-secondary)';
+              e.currentTarget.style.backgroundColor = 'transparent';
+            }}
+          >
+            <Pencil size={15} />
+          </button>
+
+          <button
+            onClick={() => onDelete(activity.id)}
+            title="Hapus Aktivitas"
+            aria-label="Hapus Aktivitas"
+            style={{
+              width: '32px',
+              height: '32px',
+              borderRadius: 'var(--radius-md)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: 'var(--color-text-muted)',
+              backgroundColor: 'transparent',
+              transition: 'all var(--transition-fast)',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = 'var(--color-danger)';
+              e.currentTarget.style.backgroundColor = 'var(--color-danger-bg)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = 'var(--color-text-muted)';
+              e.currentTarget.style.backgroundColor = 'transparent';
+            }}
+          >
+            <Trash2 size={15} />
+          </button>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default ActivityItem;
diff --git a/src/components/schedule/AddActivityModal.jsx b/src/components/schedule/AddActivityModal.jsx
new file mode 100644
index 0000000..c574a1c
--- /dev/null
+++ b/src/components/schedule/AddActivityModal.jsx
@@ -0,0 +1,256 @@
+import React, { useState, useEffect } from 'react';
+import { Clock, MapPin, Tag, FileText, Sparkles, Plus, Check } from 'lucide-react';
+import Modal from '../ui/Modal';
+import Button from '../ui/Button';
+import { ACTIVITY_CATEGORIES, quickActivityTemplates } from '../../data/activities';
+
+const AddActivityModal = ({
+  isOpen,
+  onClose,
+  onSave,
+  initialData = null,
+  dayNumber = 1,
+}) => {
+  const isEditing = Boolean(initialData?.id);
+
+  const [name, setName] = useState('');
+  const [time, setTime] = useState('09:00');
+  const [duration, setDuration] = useState(60);
+  const [location, setLocation] = useState('');
+  const [category, setCategory] = useState('wisata');
+  const [notes, setNotes] = useState('');
+
+  useEffect(() => {
+    if (initialData) {
+      setName(initialData.name || '');
+      setTime(initialData.time || '09:00');
+      setDuration(initialData.duration || 60);
+      setLocation(initialData.location || '');
+      setCategory(initialData.category || 'wisata');
+      setNotes(initialData.notes || '');
+    } else {
+      setName('');
+      setTime('09:00');
+      setDuration(60);
+      setLocation('');
+      setCategory('wisata');
+      setNotes('');
+    }
+  }, [initialData, isOpen]);
+
+  const handleApplyTemplate = (template) => {
+    setName(template.name);
+    setCategory(template.category);
+    setTime(template.time || '09:00');
+    setDuration(template.duration || 60);
+    setLocation(template.location || '');
+    setNotes(template.notes || '');
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    onSave({
+      id: initialData?.id,
+      name: name.trim(),
+      time,
+      duration: Number(duration) || 60,
+      location: location.trim(),
+      category,
+      notes: notes.trim(),
+    });
+
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={isEditing ? `Edit Aktivitas — Hari ${dayNumber}` : `Tambah Aktivitas — Hari ${dayNumber}`}
+      maxWidth="md"
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>
+            Batal
+          </Button>
+          <Button
+            variant="primary"
+            icon={isEditing ? Check : Plus}
+            onClick={handleSubmit}
+          >
+            {isEditing ? 'Simpan Perubahan' : 'Tambah ke Jadwal'}
+          </Button>
+        </>
+      }
+    >
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
+        {/* Quick template selector (only when adding new) */}
+        {!isEditing && (
+          <div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: 'var(--text-xs)', color: 'var(--color-accent-light)', marginBottom: 'var(--space-2)', fontWeight: 600 }}>
+              <Sparkles size={13} /> Template Aktivitas Cepat:
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                gap: '6px',
+                overflowX: 'auto',
+                paddingBottom: 'var(--space-2)',
+                scrollbarWidth: 'none',
+              }}
+            >
+              {quickActivityTemplates.slice(0, 6).map((tpl, i) => (
+                <button
+                  type="button"
+                  key={i}
+                  onClick={() => handleApplyTemplate(tpl)}
+                  style={{
+                    fontSize: '11px',
+                    padding: '4px 10px',
+                    borderRadius: 'var(--radius-full)',
+                    backgroundColor: 'hsla(222, 18%, 20%, 0.8)',
+                    border: '1px solid var(--color-border)',
+                    color: 'var(--color-text-secondary)',
+                    whiteSpace: 'nowrap',
+                    cursor: 'pointer',
+                    transition: 'all var(--transition-fast)',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.color = '#fff';
+                    e.currentTarget.style.borderColor = 'var(--color-accent)';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.color = 'var(--color-text-secondary)';
+                    e.currentTarget.style.borderColor = 'var(--color-border)';
+                  }}
+                >
+                  {tpl.name.split(' ')[0]} {tpl.name.split(' ')[1] || ''}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Activity Name */}
+        <div className="input-group">
+          <label className="input-label">Nama Aktivitas / Tempat Kunjungan</label>
+          <input
+            type="text"
+            className="input-field"
+            placeholder="e.g. Snorkeling di Manta Point, Makan Siang di Warung Bu Made..."
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+            autoFocus
+          />
+        </div>
+
+        {/* Time & Duration row */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--space-3)' }}>
+          <div className="input-group">
+            <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+              <Clock size={14} style={{ color: 'var(--color-primary-light)' }} /> Jam Mulai
+            </label>
+            <input
+              type="time"
+              className="input-field"
+              value={time}
+              onChange={(e) => setTime(e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="input-group">
+            <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+              <Clock size={14} style={{ color: 'var(--color-accent-light)' }} /> Estimasi Durasi (Menit)
+            </label>
+            <input
+              type="number"
+              min="15"
+              step="15"
+              className="input-field"
+              value={duration}
+              onChange={(e) => setDuration(e.target.value)}
+              required
+            />
+          </div>
+        </div>
+
+        {/* Category Pill Selector */}
+        <div className="input-group">
+          <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <Tag size={14} style={{ color: 'var(--color-text-secondary)' }} /> Kategori
+          </label>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
+            {Object.entries(ACTIVITY_CATEGORIES).map(([key, cat]) => {
+              const isSelected = category === key;
+              return (
+                <button
+                  key={key}
+                  type="button"
+                  onClick={() => setCategory(key)}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '4px',
+                    padding: '4px 10px',
+                    borderRadius: 'var(--radius-md)',
+                    fontSize: 'var(--text-xs)',
+                    fontWeight: 600,
+                    cursor: 'pointer',
+                    transition: 'all var(--transition-fast)',
+                    backgroundColor: isSelected ? cat.bgColor : 'hsla(222, 18%, 18%, 0.5)',
+                    color: isSelected ? cat.color : 'var(--color-text-secondary)',
+                    border: isSelected ? `1px solid ${cat.color}` : '1px solid var(--color-border)',
+                  }}
+                >
+                  <span
+                    style={{
+                      width: '8px',
+                      height: '8px',
+                      borderRadius: 'var(--radius-full)',
+                      backgroundColor: cat.color,
+                    }}
+                  />
+                  {cat.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Location */}
+        <div className="input-group">
+          <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <MapPin size={14} style={{ color: 'var(--color-accent)' }} /> Lokasi / Alamat (Opsional)
+          </label>
+          <input
+            type="text"
+            className="input-field"
+            placeholder="e.g. Jl. Pantai Kuta No. 10 / Puncak Pulau Padar"
+            value={location}
+            onChange={(e) => setLocation(e.target.value)}
+          />
+        </div>
+
+        {/* Notes */}
+        <div className="input-group">
+          <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <FileText size={14} style={{ color: 'var(--color-text-secondary)' }} /> Catatan Khusus / Tips (Opsional)
+          </label>
+          <textarea
+            className="textarea-field"
+            rows={2}
+            placeholder="e.g. Pakai pakaian hangat, bawa uang tunai, tiket sudah dipesan..."
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+          />
+        </div>
+      </form>
+    </Modal>
+  );
+};
+
+export default AddActivityModal;
diff --git a/src/components/schedule/DayTabs.jsx b/src/components/schedule/DayTabs.jsx
new file mode 100644
index 0000000..e145391
--- /dev/null
+++ b/src/components/schedule/DayTabs.jsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Calendar, Plus, Sparkles } from 'lucide-react';
+import { formatDateShort } from '../../utils/dateHelpers';
+
+const DayTabs = ({
+  schedule = [],
+  selectedDayIndex = 0,
+  onSelectDay,
+  onAddDay,
+  totalDays = 0,
+}) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--space-2)',
+        overflowX: 'auto',
+        paddingBottom: 'var(--space-3)',
+        marginBottom: 'var(--space-6)',
+        scrollbarWidth: 'thin',
+      }}
+    >
+      {schedule.map((day, index) => {
+        const isSelected = selectedDayIndex === index;
+        const activityCount = day.activities?.length || 0;
+        const formattedDate = day.date ? formatDateShort(day.date) : '';
+
+        return (
+          <motion.button
+            key={index}
+            whileHover={{ y: -2 }}
+            whileTap={{ scale: 0.97 }}
+            onClick={() => onSelectDay(index)}
+            className="glass"
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+              padding: 'var(--space-3) var(--space-5)',
+              borderRadius: 'var(--radius-xl)',
+              minWidth: '130px',
+              cursor: 'pointer',
+              transition: 'all var(--transition-fast)',
+              backgroundColor: isSelected
+                ? 'var(--color-primary)'
+                : 'hsla(222, 22%, 16%, 0.7)',
+              border: isSelected
+                ? '1px solid var(--color-primary-light)'
+                : '1px solid var(--color-border)',
+              boxShadow: isSelected ? '0 4px 16px var(--color-primary-glow)' : 'none',
+              textAlign: 'left',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', marginBottom: '2px' }}>
+              <span
+                style={{
+                  fontWeight: 700,
+                  fontSize: 'var(--text-sm)',
+                  color: isSelected ? '#ffffff' : 'var(--color-text-primary)',
+                }}
+              >
+                Hari {day.dayNumber || index + 1}
+              </span>
+              <span
+                style={{
+                  fontSize: '11px',
+                  fontWeight: 600,
+                  padding: '1px 6px',
+                  borderRadius: 'var(--radius-full)',
+                  backgroundColor: isSelected ? 'hsla(0, 0%, 100%, 0.25)' : 'hsla(220, 15%, 25%, 0.6)',
+                  color: isSelected ? '#ffffff' : 'var(--color-text-secondary)',
+                }}
+              >
+                {activityCount}
+              </span>
+            </div>
+
+            <div
+              style={{
+                fontSize: 'var(--text-xs)',
+                color: isSelected ? 'hsla(0, 0%, 100%, 0.85)' : 'var(--color-text-muted)',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '4px',
+              }}
+            >
+              {formattedDate ? (
+                <span>{formattedDate}</span>
+              ) : (
+                <span>Jadwal Harian</span>
+              )}
+            </div>
+          </motion.button>
+        );
+      })}
+
+      {/* Button to add one more day */}
+      <motion.button
+        whileHover={{ y: -2 }}
+        whileTap={{ scale: 0.97 }}
+        onClick={onAddDay}
+        className="glass"
+        title="Tambah Hari ke Jadwal"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--space-2)',
+          padding: 'var(--space-3) var(--space-4)',
+          borderRadius: 'var(--radius-xl)',
+          cursor: 'pointer',
+          whiteSpace: 'nowrap',
+          color: 'var(--color-text-secondary)',
+          border: '1px dashed var(--color-border-light)',
+          backgroundColor: 'transparent',
+          height: '62px',
+        }}
+      >
+        <Plus size={16} style={{ color: 'var(--color-accent)' }} />
+        <span style={{ fontSize: 'var(--text-xs)', fontWeight: 600 }}>Tambah Hari</span>
+      </motion.button>
+    </div>
+  );
+};
+
+export default DayTabs;
diff --git a/src/components/schedule/ScheduleTimeline.jsx b/src/components/schedule/ScheduleTimeline.jsx
new file mode 100644
index 0000000..9c10ce9
--- /dev/null
+++ b/src/components/schedule/ScheduleTimeline.jsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  arrayMove,
+} from '@dnd-kit/sortable';
+import { Plus, Calendar, Clock, Sparkles } from 'lucide-react';
+import ActivityItem from './ActivityItem';
+import Button from '../ui/Button';
+import EmptyState from '../ui/EmptyState';
+import { formatDateIndo } from '../../utils/dateHelpers';
+
+const ScheduleTimeline = ({
+  day,
+  dayIndex = 0,
+  onAddActivity,
+  onEditActivity,
+  onDeleteActivity,
+  onReorderActivities,
+}) => {
+  const activities = day?.activities || [];
+  const activityIds = activities.map((a) => a.id);
+
+  // Configure pointer sensor with activation distance to avoid accidental drags when clicking buttons
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = activities.findIndex((item) => item.id === active.id);
+      const newIndex = activities.findIndex((item) => item.id === over.id);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const reordered = arrayMove(activities, oldIndex, newIndex);
+        onReorderActivities(dayIndex, reordered);
+      }
+    }
+  };
+
+  return (
+    <div className="schedule-timeline-container">
+      {/* Day Header Info Bar */}
+      <div
+        className="glass"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          gap: 'var(--space-3)',
+          padding: 'var(--space-4) var(--space-6)',
+          borderRadius: 'var(--radius-xl)',
+          marginBottom: 'var(--space-6)',
+          borderLeft: '4px solid var(--color-primary)',
+        }}
+      >
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <h3 style={{ fontSize: 'var(--text-xl)', color: '#ffffff' }}>
+              Hari ke-{day?.dayNumber || dayIndex + 1}
+            </h3>
+            <span className="badge badge-primary" style={{ fontSize: '11px' }}>
+              {activities.length} Aktivitas
+            </span>
+          </div>
+          {day?.date && (
+            <p style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)', marginTop: '2px' }}>
+              {formatDateIndo(day.date)}
+            </p>
+          )}
+        </div>
+
+        <Button
+          variant="primary"
+          size="sm"
+          icon={Plus}
+          onClick={onAddActivity}
+        >
+          Tambah Aktivitas
+        </Button>
+      </div>
+
+      {/* Activity Timeline List with DnD */}
+      {activities.length > 0 ? (
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext
+            items={activityIds}
+            strategy={verticalListSortingStrategy}
+          >
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--space-3)',
+              }}
+            >
+              {activities.map((activity) => (
+                <ActivityItem
+                  key={activity.id}
+                  activity={activity}
+                  onEdit={onEditActivity}
+                  onDelete={onDeleteActivity}
+                />
+              ))}
+            </div>
+          </SortableContext>
+        </DndContext>
+      ) : (
+        <EmptyState
+          icon={Clock}
+          title="Belum Ada Rencana di Hari Ini"
+          description="Tambahkan rencana kunjungan wisata, kuliner, hotel, atau waktu santai untuk menyusun itinerary hari ini."
+          actionText="Tambah Aktivitas Pertama"
+          actionIcon={Plus}
+          onAction={onAddActivity}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ScheduleTimeline;
diff --git a/src/components/trip/CustomTripModal.jsx b/src/components/trip/CustomTripModal.jsx
new file mode 100644
index 0000000..bc451cf
--- /dev/null
+++ b/src/components/trip/CustomTripModal.jsx
@@ -0,0 +1,216 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { PlusCircle, Calendar, MapPin, DollarSign, Clock, ArrowRight, Image as ImageIcon } from 'lucide-react';
+import Modal from '../ui/Modal';
+import Button from '../ui/Button';
+import { useTourStore } from '../../store/tourStore';
+import { calculateTotalDays, getTodayString, getFutureDateString } from '../../utils/dateHelpers';
+import { generateId } from '../../utils/helpers';
+import { formatIDR } from '../../utils/formatCurrency';
+import { toast } from '../../store/toastStore';
+
+const DEFAULT_COVER_IMAGES = {
+  pantai: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1000&q=80',
+  gunung: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1000&q=80',
+  kota: 'https://images.unsplash.com/photo-1477959858617-67f30bc75b82?auto=format&fit=crop&w=1000&q=80',
+  budaya: 'https://images.unsplash.com/photo-1590073242678-70ee3fc28e8e?auto=format&fit=crop&w=1000&q=80',
+};
+
+const CustomTripModal = ({ isOpen, onClose }) => {
+  const navigate = useNavigate();
+  const setTrip = useTourStore((state) => state.setTrip);
+  const setTotalBudget = useTourStore((state) => state.setTotalBudget);
+
+  const [destinationName, setDestinationName] = useState('');
+  const [tripName, setTripName] = useState('');
+  const [category, setCategory] = useState('pantai');
+  const [startDate, setStartDate] = useState(getTodayString());
+  const [endDate, setEndDate] = useState(getFutureDateString(3));
+  const [customCoverUrl, setCustomCoverUrl] = useState('');
+  const [budgetAmount, setBudgetAmount] = useState('3000000');
+
+  const totalDays = calculateTotalDays(startDate, endDate);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!destinationName.trim()) return;
+
+    const coverImage = customCoverUrl.trim() || DEFAULT_COVER_IMAGES[category] || DEFAULT_COVER_IMAGES.pantai;
+
+    setTrip({
+      id: generateId(),
+      name: tripName.trim() || `Rencana Perjalanan ke ${destinationName.trim()}`,
+      destination: destinationName.trim(),
+      location: destinationName.trim(),
+      startDate,
+      endDate,
+      totalDays,
+      coverImage,
+      type: 'custom',
+      category,
+    });
+
+    if (budgetAmount) {
+      setTotalBudget(Number(budgetAmount));
+    }
+
+    toast.success(`Trip custom ke ${destinationName.trim()} berhasil dibuat!`);
+    onClose();
+    navigate('/schedule');
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Rancang Trip Kustom Sendiri"
+      maxWidth="md"
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>
+            Batal
+          </Button>
+          <Button
+            variant="accent"
+            icon={ArrowRight}
+            iconPosition="right"
+            onClick={handleSubmit}
+          >
+            Buat & Rencanakan Jadwal
+          </Button>
+        </>
+      }
+    >
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
+        {/* Destinasi Tujuan */}
+        <div className="input-group">
+          <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <MapPin size={14} style={{ color: 'var(--color-accent)' }} /> Destinasi / Kota Tujuan
+          </label>
+          <input
+            type="text"
+            className="input-field"
+            placeholder="e.g. Karimunjawa, Raja Ampat, Tokyo..."
+            value={destinationName}
+            onChange={(e) => setDestinationName(e.target.value)}
+            required
+          />
+        </div>
+
+        {/* Nama Trip */}
+        <div className="input-group">
+          <label className="input-label">Judul Rencana Perjalanan</label>
+          <input
+            type="text"
+            className="input-field"
+            placeholder="e.g. Roadtrip Seru Akhir Pekan"
+            value={tripName}
+            onChange={(e) => setTripName(e.target.value)}
+          />
+        </div>
+
+        {/* Kategori Perjalanan */}
+        <div className="input-group">
+          <label className="input-label">Kategori / Tipe Trip</label>
+          <select
+            className="select-field"
+            value={category}
+            onChange={(e) => setCategory(e.target.value)}
+          >
+            <option value="pantai">Pantai & Kepulauan</option>
+            <option value="gunung">Gunung & Alam Terbuka</option>
+            <option value="kota">Kota & Metropolitan</option>
+            <option value="budaya">Budaya & Sejarah</option>
+          </select>
+          <span style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)' }}>
+            *Kategori ini akan otomatis menyiapkan template packing list yang sesuai.
+          </span>
+        </div>
+
+        {/* Date Row */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--space-3)' }}>
+          <div className="input-group">
+            <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+              <Calendar size={14} style={{ color: 'var(--color-primary-light)' }} /> Tanggal Berangkat
+            </label>
+            <input
+              type="date"
+              className="input-field"
+              value={startDate}
+              onChange={(e) => setStartDate(e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="input-group">
+            <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+              <Calendar size={14} style={{ color: 'var(--color-accent-light)' }} /> Tanggal Kembali
+            </label>
+            <input
+              type="date"
+              className="input-field"
+              value={endDate}
+              min={startDate}
+              onChange={(e) => setEndDate(e.target.value)}
+              required
+            />
+          </div>
+        </div>
+
+        {/* Total Days */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: 'var(--space-3) var(--space-4)',
+            backgroundColor: 'hsla(38, 95%, 55%, 0.12)',
+            border: '1px solid hsla(38, 95%, 55%, 0.3)',
+            borderRadius: 'var(--radius-md)',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: 'var(--text-sm)', color: 'var(--color-accent-light)' }}>
+            <Clock size={16} />
+            <span>Total Durasi Terhitung:</span>
+          </div>
+          <span style={{ fontWeight: 700, fontSize: 'var(--text-base)', color: '#ffffff' }}>
+            {totalDays} Hari
+          </span>
+        </div>
+
+        {/* Budget */}
+        <div className="input-group">
+          <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <DollarSign size={14} style={{ color: 'var(--color-success)' }} /> Alokasi Target Budget (IDR)
+          </label>
+          <input
+            type="number"
+            className="input-field"
+            placeholder="e.g. 5000000"
+            value={budgetAmount}
+            onChange={(e) => setBudgetAmount(e.target.value)}
+          />
+          <span style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)' }}>
+            {budgetAmount ? `Setara: ${formatIDR(budgetAmount)}` : 'Bisa disesuaikan nanti di halaman Budget.'}
+          </span>
+        </div>
+
+        {/* Custom Image URL (optional) */}
+        <div className="input-group">
+          <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <ImageIcon size={14} style={{ color: 'var(--color-text-secondary)' }} /> Link URL Foto Sampul (Opsional)
+          </label>
+          <input
+            type="url"
+            className="input-field"
+            placeholder="https://images.unsplash.com/..."
+            value={customCoverUrl}
+            onChange={(e) => setCustomCoverUrl(e.target.value)}
+          />
+        </div>
+      </form>
+    </Modal>
+  );
+};
+
+export default CustomTripModal;
diff --git a/src/components/trip/FilterBar.jsx b/src/components/trip/FilterBar.jsx
new file mode 100644
index 0000000..d7296d3
--- /dev/null
+++ b/src/components/trip/FilterBar.jsx
@@ -0,0 +1,172 @@
+import React from 'react';
+import { Search, Compass, Palmtree, Mountain, Landmark, Building2, SlidersHorizontal, X } from 'lucide-react';
+
+const categories = [
+  { id: 'semua', label: 'Semua Destinasi', icon: Compass },
+  { id: 'pantai', label: 'Pantai & Laut', icon: Palmtree },
+  { id: 'gunung', label: 'Gunung & Alam', icon: Mountain },
+  { id: 'budaya', label: 'Budaya & Heritage', icon: Landmark },
+  { id: 'kota', label: 'Kota Metropolitan', icon: Building2 },
+];
+
+const FilterBar = ({
+  searchQuery,
+  onSearchChange,
+  activeCategory,
+  onCategoryChange,
+  sortBy,
+  onSortChange,
+}) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-4)',
+        marginBottom: 'var(--space-8)',
+      }}
+    >
+      {/* Top row: Search Bar & Sort Dropdown */}
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 'var(--space-3)',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        {/* Search Bar */}
+        <div
+          className="glass"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 'var(--space-3)',
+            padding: 'var(--space-2) var(--space-4)',
+            flex: '1 1 300px',
+            maxWidth: '500px',
+            borderRadius: 'var(--radius-xl)',
+          }}
+        >
+          <Search size={18} style={{ color: 'var(--color-primary-light)' }} />
+          <input
+            type="text"
+            placeholder="Cari destinasi wisata, kota, atau aktivitas..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            style={{
+              background: 'transparent',
+              border: 'none',
+              outline: 'none',
+              width: '100%',
+              fontSize: 'var(--text-sm)',
+              color: 'var(--color-text-primary)',
+            }}
+          />
+          {searchQuery && (
+            <button
+              onClick={() => onSearchChange('')}
+              style={{
+                background: 'transparent',
+                color: 'var(--color-text-muted)',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <X size={16} />
+            </button>
+          )}
+        </div>
+
+        {/* Sort Select */}
+        <div
+          className="glass"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 'var(--space-2)',
+            padding: 'var(--space-2) var(--space-4)',
+            borderRadius: 'var(--radius-xl)',
+          }}
+        >
+          <SlidersHorizontal size={16} style={{ color: 'var(--color-accent)' }} />
+          <span style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)', fontWeight: 600 }}>
+            Urutkan:
+          </span>
+          <select
+            value={sortBy}
+            onChange={(e) => onSortChange(e.target.value)}
+            style={{
+              background: 'transparent',
+              border: 'none',
+              outline: 'none',
+              fontSize: 'var(--text-sm)',
+              color: 'var(--color-text-primary)',
+              cursor: 'pointer',
+            }}
+          >
+            <option value="popular" style={{ background: 'var(--color-bg-elevated)', color: '#fff' }}>
+              Paling Populer
+            </option>
+            <option value="rating" style={{ background: 'var(--color-bg-elevated)', color: '#fff' }}>
+              Rating Tertinggi (★)
+            </option>
+            <option value="budget-low" style={{ background: 'var(--color-bg-elevated)', color: '#fff' }}>
+              Budget Terendah
+            </option>
+            <option value="duration" style={{ background: 'var(--color-bg-elevated)', color: '#fff' }}>
+              Durasi Singkat
+            </option>
+          </select>
+        </div>
+      </div>
+
+      {/* Category Pills Bar */}
+      <div
+        style={{
+          display: 'flex',
+          gap: 'var(--space-2)',
+          overflowX: 'auto',
+          paddingBottom: 'var(--space-2)',
+          scrollbarWidth: 'none',
+        }}
+      >
+        {categories.map((cat) => {
+          const Icon = cat.icon;
+          const isActive = activeCategory === cat.id;
+
+          return (
+            <button
+              key={cat.id}
+              onClick={() => onCategoryChange(cat.id)}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--space-2)',
+                padding: 'var(--space-2) var(--space-5)',
+                borderRadius: 'var(--radius-full)',
+                fontSize: 'var(--text-sm)',
+                fontWeight: 600,
+                whiteSpace: 'nowrap',
+                transition: 'all var(--transition-fast)',
+                cursor: 'pointer',
+                backgroundColor: isActive ? 'var(--color-primary)' : 'hsla(222, 22%, 18%, 0.6)',
+                color: isActive ? '#ffffff' : 'var(--color-text-secondary)',
+                border: isActive
+                  ? '1px solid var(--color-primary-light)'
+                  : '1px solid var(--color-border)',
+                boxShadow: isActive ? '0 4px 14px var(--color-primary-glow)' : 'none',
+              }}
+            >
+              <Icon size={15} style={{ color: isActive ? '#fff' : 'var(--color-primary-light)' }} />
+              <span>{cat.label}</span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default FilterBar;
diff --git a/src/components/trip/HeroSection.jsx b/src/components/trip/HeroSection.jsx
new file mode 100644
index 0000000..001c212
--- /dev/null
+++ b/src/components/trip/HeroSection.jsx
@@ -0,0 +1,157 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Compass, Sparkles, MapPin, Plus, CalendarCheck, ShieldCheck, ArrowDown } from 'lucide-react';
+import Button from '../ui/Button';
+
+const HeroSection = ({ onExploreClick, onCreateCustomClick }) => {
+  return (
+    <section
+      className="bg-gradient-hero"
+      style={{
+        position: 'relative',
+        padding: 'var(--space-16) 0 var(--space-12)',
+        overflow: 'hidden',
+        borderBottom: '1px solid var(--color-border)',
+      }}
+    >
+      {/* Background glow element */}
+      <div
+        className="animate-pulse-slow"
+        style={{
+          position: 'absolute',
+          top: '-10%',
+          right: '10%',
+          width: '400px',
+          height: '400px',
+          borderRadius: 'var(--radius-full)',
+          background: 'radial-gradient(circle, hsla(220, 90%, 56%, 0.15) 0%, transparent 70%)',
+          pointerEvents: 'none',
+          filter: 'blur(40px)',
+        }}
+      />
+
+      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
+        <div style={{ maxWidth: '850px', margin: '0 auto', textAlign: 'center' }}>
+          {/* Top Pill Badge */}
+          <motion.div
+            initial={{ opacity: 0, y: -15 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3 }}
+            style={{ display: 'inline-flex', marginBottom: 'var(--space-4)' }}
+          >
+            <span
+              className="badge badge-accent"
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '6px',
+                padding: '6px 14px',
+                fontSize: 'var(--text-xs)',
+                letterSpacing: '0.04em',
+              }}
+            >
+              <Sparkles size={14} /> RPT &bull; Ready to Plan Tour
+            </span>
+          </motion.div>
+
+          {/* Main Hero Headline with Playfair Display */}
+          <motion.h1
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.4, delay: 0.1 }}
+            style={{
+              fontFamily: 'var(--font-hero)',
+              fontSize: 'clamp(2rem, 5vw, 3.75rem)',
+              fontWeight: 700,
+              lineHeight: 1.15,
+              marginBottom: 'var(--space-5)',
+              letterSpacing: '-0.02em',
+            }}
+          >
+            Rencanakan Perjalanan Wisata <br />
+            <span className="text-gradient">Secara Lengkap & Terstruktur</span>
+          </motion.h1>
+
+          {/* Subtitle */}
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.4, delay: 0.2 }}
+            style={{
+              fontSize: 'var(--text-lg)',
+              color: 'var(--color-text-secondary)',
+              lineHeight: 1.6,
+              marginBottom: 'var(--space-8)',
+              maxWidth: '680px',
+              margin: '0 auto var(--space-8)',
+            }}
+          >
+            Pilih destinasi populer, susun timeline aktivitas harian per jam, kelola checklist barang bawaan, dan pantau kalkulasi anggaran budget Anda secara real-time.
+          </motion.p>
+
+          {/* CTA Buttons */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.4, delay: 0.3 }}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexWrap: 'wrap',
+              gap: 'var(--space-4)',
+              marginBottom: 'var(--space-10)',
+            }}
+          >
+            <Button
+              variant="primary"
+              size="lg"
+              icon={Compass}
+              onClick={onExploreClick}
+              style={{ boxShadow: 'var(--shadow-glow-primary)' }}
+            >
+              Jelajahi Destinasi
+            </Button>
+            <Button
+              variant="accent"
+              size="lg"
+              icon={Plus}
+              onClick={onCreateCustomClick}
+            >
+              Buat Trip Kustom
+            </Button>
+          </motion.div>
+
+          {/* Key Feature Badges Grid */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5, delay: 0.4 }}
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+              gap: 'var(--space-4)',
+              borderTop: '1px solid var(--color-border)',
+              paddingTop: 'var(--space-6)',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', color: 'var(--color-text-secondary)', fontSize: 'var(--text-sm)' }}>
+              <MapPin size={18} style={{ color: 'var(--color-primary-light)' }} />
+              <span>10+ Destinasi Pilihan</span>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', color: 'var(--color-text-secondary)', fontSize: 'var(--text-sm)' }}>
+              <CalendarCheck size={18} style={{ color: 'var(--color-accent)' }} />
+              <span>Drag & Drop Schedule</span>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', color: 'var(--color-text-secondary)', fontSize: 'var(--text-sm)' }}>
+              <ShieldCheck size={18} style={{ color: 'var(--color-success)' }} />
+              <span>100% Offline & Auto-Save</span>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;
diff --git a/src/components/trip/TripCard.jsx b/src/components/trip/TripCard.jsx
new file mode 100644
index 0000000..1401da9
--- /dev/null
+++ b/src/components/trip/TripCard.jsx
@@ -0,0 +1,249 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { MapPin, Star, Calendar, ArrowRight, Sparkles } from 'lucide-react';
+import Badge from '../ui/Badge';
+import Button from '../ui/Button';
+import { formatIDR } from '../../utils/formatCurrency';
+
+const TripCard = ({ destination, onSelect }) => {
+  const {
+    name,
+    location,
+    category,
+    description,
+    highlights = [],
+    estimatedBudget,
+    popularDuration,
+    rating,
+    reviewCount,
+    image,
+    tags = [],
+  } = destination;
+
+  const getCategoryBadgeVariant = () => {
+    switch (category) {
+      case 'pantai':
+        return 'primary';
+      case 'gunung':
+      case 'alam':
+        return 'success';
+      case 'budaya':
+        return 'accent';
+      case 'kota':
+        return 'warning';
+      default:
+        return 'neutral';
+    }
+  };
+
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, scale: 0.95 }}
+      whileHover={{ y: -6 }}
+      transition={{ duration: 0.25 }}
+      className="glass-card"
+      style={{
+        borderRadius: 'var(--radius-xl)',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+      }}
+    >
+      {/* Image Container */}
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          paddingTop: '60%', // 16:10 aspect ratio
+          overflow: 'hidden',
+        }}
+      >
+        <img
+          src={image}
+          alt={name}
+          loading="lazy"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            transition: 'transform 0.5s ease',
+          }}
+          onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.08)')}
+          onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1.0)')}
+        />
+        {/* Dark overlay gradient */}
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            background: 'linear-gradient(to top, hsla(222, 28%, 10%, 0.95) 0%, transparent 65%)',
+          }}
+        />
+
+        {/* Top Badges */}
+        <div
+          style={{
+            position: 'absolute',
+            top: 'var(--space-3)',
+            left: 'var(--space-3)',
+            right: 'var(--space-3)',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <Badge variant={getCategoryBadgeVariant()}>{category}</Badge>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px',
+              backgroundColor: 'hsla(222, 28%, 8%, 0.85)',
+              backdropFilter: 'blur(8px)',
+              padding: '3px 8px',
+              borderRadius: 'var(--radius-full)',
+              fontSize: 'var(--text-xs)',
+              fontWeight: 700,
+              color: 'var(--color-accent-light)',
+              border: '1px solid var(--color-border)',
+            }}
+          >
+            <Star size={12} fill="var(--color-accent)" color="var(--color-accent)" />
+            <span>{rating}</span>
+            <span style={{ color: 'var(--color-text-muted)', fontWeight: 400 }}>
+              ({reviewCount ? (reviewCount > 1000 ? `${(reviewCount / 1000).toFixed(1)}k` : reviewCount) : 0})
+            </span>
+          </div>
+        </div>
+
+        {/* Location & Title over image */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 'var(--space-3)',
+            left: 'var(--space-4)',
+            right: 'var(--space-4)',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px',
+              color: 'var(--color-text-secondary)',
+              fontSize: 'var(--text-xs)',
+              marginBottom: '2px',
+            }}
+          >
+            <MapPin size={12} style={{ color: 'var(--color-accent)' }} />
+            <span>{location}</span>
+          </div>
+          <h3
+            style={{
+              fontSize: 'var(--text-lg)',
+              fontFamily: 'var(--font-display)',
+              fontWeight: 700,
+              color: '#ffffff',
+              lineHeight: 1.2,
+            }}
+          >
+            {name}
+          </h3>
+        </div>
+      </div>
+
+      {/* Card Body */}
+      <div
+        style={{
+          padding: 'var(--space-4)',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+          justifyContent: 'space-between',
+          gap: 'var(--space-4)',
+        }}
+      >
+        {/* Description & Highlights */}
+        <div>
+          <p
+            style={{
+              fontSize: 'var(--text-xs)',
+              color: 'var(--color-text-secondary)',
+              lineHeight: 1.5,
+              marginBottom: 'var(--space-3)',
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+            }}
+          >
+            {description}
+          </p>
+
+          {/* Highlights pills */}
+          {highlights.length > 0 && (
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px', marginBottom: 'var(--space-2)' }}>
+              {highlights.slice(0, 3).map((hl, idx) => (
+                <span
+                  key={idx}
+                  style={{
+                    fontSize: '11px',
+                    padding: '2px 7px',
+                    borderRadius: 'var(--radius-sm)',
+                    backgroundColor: 'hsla(220, 15%, 22%, 0.6)',
+                    color: 'var(--color-text-secondary)',
+                    border: '1px solid var(--color-border)',
+                  }}
+                >
+                  {hl}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer Info & CTA */}
+        <div
+          style={{
+            borderTop: '1px solid var(--color-border)',
+            paddingTop: 'var(--space-3)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <div>
+            <div style={{ fontSize: '10px', textTransform: 'uppercase', color: 'var(--color-text-muted)', fontWeight: 600 }}>
+              Estimasi Budget / Durasi
+            </div>
+            <div style={{ fontSize: 'var(--text-sm)', fontWeight: 700, color: 'var(--color-accent-light)' }}>
+              {estimatedBudget ? formatIDR(estimatedBudget.min) : '-'}
+              <span style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)', fontWeight: 400 }}>
+                {' '}&bull; {popularDuration} Hari
+              </span>
+            </div>
+          </div>
+
+          <Button
+            variant="primary"
+            size="sm"
+            icon={ArrowRight}
+            iconPosition="right"
+            onClick={() => onSelect(destination)}
+          >
+            Pilih
+          </Button>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default TripCard;
diff --git a/src/components/trip/TripModal.jsx b/src/components/trip/TripModal.jsx
new file mode 100644
index 0000000..4833276
--- /dev/null
+++ b/src/components/trip/TripModal.jsx
@@ -0,0 +1,203 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Calendar, MapPin, Sparkles, DollarSign, Clock, ArrowRight } from 'lucide-react';
+import Modal from '../ui/Modal';
+import Button from '../ui/Button';
+import { useTourStore } from '../../store/tourStore';
+import { calculateTotalDays, getTodayString, getFutureDateString } from '../../utils/dateHelpers';
+import { formatIDR } from '../../utils/formatCurrency';
+import { toast } from '../../store/toastStore';
+
+const TripModal = ({ isOpen, onClose, destination }) => {
+  const navigate = useNavigate();
+  const setTrip = useTourStore((state) => state.setTrip);
+  const setTotalBudget = useTourStore((state) => state.setTotalBudget);
+
+  const [tripName, setTripName] = useState('');
+  const [startDate, setStartDate] = useState(getTodayString());
+  const [endDate, setEndDate] = useState(getFutureDateString(destination?.popularDuration ? destination.popularDuration - 1 : 3));
+  const [customBudget, setCustomBudget] = useState('');
+
+  useEffect(() => {
+    if (destination) {
+      setTripName(`Liburan Impian ke ${destination.name}`);
+      const duration = destination.popularDuration || 3;
+      const today = getTodayString();
+      setStartDate(today);
+      setEndDate(getFutureDateString(duration - 1));
+      setCustomBudget(destination.estimatedBudget?.min || 3000000);
+    }
+  }, [destination]);
+
+  if (!destination) return null;
+
+  const totalDays = calculateTotalDays(startDate, endDate);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    setTrip({
+      id: destination.id,
+      name: tripName.trim() || `Trip ke ${destination.name}`,
+      destination: destination.name,
+      location: destination.location,
+      startDate,
+      endDate,
+      totalDays,
+      coverImage: destination.image,
+      type: 'preset',
+      category: destination.category,
+    });
+
+    if (customBudget) {
+      setTotalBudget(Number(customBudget));
+    }
+
+    toast.success(`Trip ke ${destination.name} berhasil dibuat!`);
+    onClose();
+    navigate('/schedule');
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={`Konfigurasi Perjalanan`}
+      maxWidth="md"
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>
+            Batal
+          </Button>
+          <Button
+            variant="primary"
+            icon={ArrowRight}
+            iconPosition="right"
+            onClick={handleSubmit}
+          >
+            Mulai Buat Jadwal
+          </Button>
+        </>
+      }
+    >
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
+        {/* Destination preview card */}
+        <div
+          style={{
+            position: 'relative',
+            borderRadius: 'var(--radius-lg)',
+            overflow: 'hidden',
+            height: '140px',
+            marginBottom: 'var(--space-2)',
+            border: '1px solid var(--color-border)',
+          }}
+        >
+          <img
+            src={destination.image}
+            alt={destination.name}
+            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+          />
+          <div
+            style={{
+              position: 'absolute',
+              inset: 0,
+              background: 'linear-gradient(to top, hsla(222, 28%, 8%, 0.95), transparent 70%)',
+              padding: 'var(--space-3) var(--space-4)',
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'flex-end',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: 'var(--text-xs)', color: 'var(--color-accent-light)' }}>
+              <MapPin size={12} /> {destination.location}
+            </div>
+            <h4 style={{ fontSize: 'var(--text-lg)', color: '#ffffff' }}>{destination.name}</h4>
+          </div>
+        </div>
+
+        {/* Input: Trip Name */}
+        <div className="input-group">
+          <label className="input-label">Nama Rencana Perjalanan</label>
+          <input
+            type="text"
+            className="input-field"
+            placeholder="e.g. Liburan Seru Bareng Sahabat"
+            value={tripName}
+            onChange={(e) => setTripName(e.target.value)}
+            required
+          />
+        </div>
+
+        {/* Date Row */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--space-3)' }}>
+          <div className="input-group">
+            <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+              <Calendar size={14} style={{ color: 'var(--color-primary-light)' }} /> Tanggal Mulai
+            </label>
+            <input
+              type="date"
+              className="input-field"
+              value={startDate}
+              onChange={(e) => setStartDate(e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="input-group">
+            <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+              <Calendar size={14} style={{ color: 'var(--color-accent-light)' }} /> Tanggal Selesai
+            </label>
+            <input
+              type="date"
+              className="input-field"
+              value={endDate}
+              min={startDate}
+              onChange={(e) => setEndDate(e.target.value)}
+              required
+            />
+          </div>
+        </div>
+
+        {/* Duration badge summary */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: 'var(--space-3) var(--space-4)',
+            backgroundColor: 'hsla(220, 90%, 56%, 0.12)',
+            border: '1px solid hsla(220, 90%, 56%, 0.3)',
+            borderRadius: 'var(--radius-md)',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: 'var(--text-sm)', color: 'var(--color-primary-light)' }}>
+            <Clock size={16} />
+            <span>Total Durasi Perjalanan:</span>
+          </div>
+          <span style={{ fontWeight: 700, fontSize: 'var(--text-base)', color: '#ffffff' }}>
+            {totalDays} Hari
+          </span>
+        </div>
+
+        {/* Initial Budget Input */}
+        <div className="input-group">
+          <label className="input-label" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <DollarSign size={14} style={{ color: 'var(--color-success)' }} /> Alokasi Target Budget (Opsional)
+          </label>
+          <input
+            type="number"
+            className="input-field"
+            placeholder="e.g. 5000000"
+            value={customBudget}
+            onChange={(e) => setCustomBudget(e.target.value)}
+          />
+          <span style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)' }}>
+            {customBudget ? `Setara: ${formatIDR(customBudget)}` : `Rekomendasi destinasi ini: ${destination.estimatedBudget ? formatIDR(destination.estimatedBudget.min) : '-'}`}
+          </span>
+        </div>
+      </form>
+    </Modal>
+  );
+};
+
+export default TripModal;
diff --git a/src/components/ui/Badge.jsx b/src/components/ui/Badge.jsx
new file mode 100644
index 0000000..5288330
--- /dev/null
+++ b/src/components/ui/Badge.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+const Badge = ({
+  children,
+  variant = 'primary',
+  icon: Icon,
+  size = 'md',
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const getVariantClass = () => {
+    switch (variant) {
+      case 'accent':
+        return 'badge-accent';
+      case 'success':
+        return 'badge-success';
+      case 'warning':
+        return 'badge-warning';
+      case 'danger':
+        return 'badge-danger';
+      case 'neutral':
+        return 'badge-neutral';
+      case 'primary':
+      default:
+        return 'badge-primary';
+    }
+  };
+
+  const isSmall = size === 'sm';
+
+  return (
+    <span
+      className={`badge ${getVariantClass()} ${className}`}
+      style={{
+        fontSize: isSmall ? '10px' : 'var(--text-xs)',
+        padding: isSmall ? '2px 8px' : 'var(--space-1) var(--space-3)',
+        ...style,
+      }}
+      {...props}
+    >
+      {Icon && <Icon size={isSmall ? 11 : 13} />}
+      {children}
+    </span>
+  );
+};
+
+export default Badge;
diff --git a/src/components/ui/Button.jsx b/src/components/ui/Button.jsx
new file mode 100644
index 0000000..a77b163
--- /dev/null
+++ b/src/components/ui/Button.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Loader2 } from 'lucide-react';
+
+const Button = ({
+  children,
+  variant = 'primary',
+  size = 'md',
+  icon: Icon,
+  iconPosition = 'left',
+  loading = false,
+  disabled = false,
+  onClick,
+  type = 'button',
+  fullWidth = false,
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const getVariantClass = () => {
+    switch (variant) {
+      case 'accent':
+        return 'btn-accent';
+      case 'secondary':
+        return 'btn-secondary';
+      case 'ghost':
+        return 'btn-ghost';
+      case 'danger':
+        return 'btn-danger';
+      case 'primary':
+      default:
+        return 'btn-primary';
+    }
+  };
+
+  const getSizeClass = () => {
+    switch (size) {
+      case 'sm':
+        return 'btn-sm';
+      case 'lg':
+        return 'btn-lg';
+      case 'md':
+      default:
+        return '';
+    }
+  };
+
+  const isDisabled = disabled || loading;
+
+  return (
+    <motion.button
+      type={type}
+      className={`btn ${getVariantClass()} ${getSizeClass()} ${className}`}
+      onClick={isDisabled ? undefined : onClick}
+      disabled={isDisabled}
+      whileHover={isDisabled ? undefined : { scale: 1.02 }}
+      whileTap={isDisabled ? undefined : { scale: 0.98 }}
+      transition={{ duration: 0.15 }}
+      style={{
+        width: fullWidth ? '100%' : 'auto',
+        opacity: isDisabled ? 0.6 : 1,
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        ...style,
+      }}
+      {...props}
+    >
+      {loading ? (
+        <>
+          <Loader2 size={size === 'sm' ? 14 : size === 'lg' ? 20 : 16} className="animate-spin" />
+          <span>Memuat...</span>
+        </>
+      ) : (
+        <>
+          {Icon && iconPosition === 'left' && <Icon size={size === 'sm' ? 14 : size === 'lg' ? 20 : 16} />}
+          {children && <span>{children}</span>}
+          {Icon && iconPosition === 'right' && <Icon size={size === 'sm' ? 14 : size === 'lg' ? 20 : 16} />}
+        </>
+      )}
+    </motion.button>
+  );
+};
+
+export default Button;
diff --git a/src/components/ui/Card.jsx b/src/components/ui/Card.jsx
new file mode 100644
index 0000000..acce1bf
--- /dev/null
+++ b/src/components/ui/Card.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const Card = ({
+  children,
+  glassmorphism = true,
+  hoverable = false,
+  onClick,
+  gradient = false,
+  glow = false,
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const isClickable = Boolean(onClick);
+
+  return (
+    <motion.div
+      className={`${glassmorphism ? 'glass-card' : 'glass'} ${className}`}
+      onClick={onClick}
+      whileHover={
+        hoverable || isClickable
+          ? {
+              y: -4,
+              boxShadow: glow
+                ? 'var(--shadow-lg), var(--shadow-glow-primary)'
+                : 'var(--shadow-lg)',
+            }
+          : undefined
+      }
+      transition={{ duration: 0.2 }}
+      style={{
+        padding: 'var(--space-6)',
+        cursor: isClickable ? 'pointer' : 'default',
+        background: gradient
+          ? 'linear-gradient(135deg, hsla(222, 22%, 18%, 0.9), hsla(222, 22%, 12%, 0.95))'
+          : undefined,
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default Card;
diff --git a/src/components/ui/EmptyState.jsx b/src/components/ui/EmptyState.jsx
new file mode 100644
index 0000000..9027a1a
--- /dev/null
+++ b/src/components/ui/EmptyState.jsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import Button from './Button';
+
+const EmptyState = ({
+  icon: Icon,
+  title = 'Belum Ada Data',
+  description = 'Tambahkan item baru untuk mulai mengisi bagian ini.',
+  actionText = '',
+  onAction = null,
+  actionIcon = null,
+  className = '',
+}) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 15 }}
+      animate={{ opacity: 1, y: 0 }}
+      className={`glass flex-center flex-col text-center ${className}`}
+      style={{
+        padding: 'var(--space-12) var(--space-6)',
+        borderRadius: 'var(--radius-xl)',
+        border: '1px dashed var(--color-border-light)',
+      }}
+    >
+      {Icon && (
+        <div
+          style={{
+            width: '64px',
+            height: '64px',
+            borderRadius: 'var(--radius-full)',
+            backgroundColor: 'var(--color-primary-glow)',
+            color: 'var(--color-primary-light)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: 'var(--space-4)',
+            border: '1px solid hsla(220, 90%, 56%, 0.3)',
+          }}
+        >
+          <Icon size={32} />
+        </div>
+      )}
+
+      <h3
+        style={{
+          fontSize: 'var(--text-lg)',
+          fontFamily: 'var(--font-display)',
+          marginBottom: 'var(--space-2)',
+          color: 'var(--color-text-primary)',
+        }}
+      >
+        {title}
+      </h3>
+
+      <p
+        style={{
+          fontSize: 'var(--text-sm)',
+          color: 'var(--color-text-secondary)',
+          maxWidth: '420px',
+          marginBottom: actionText && onAction ? 'var(--space-6)' : 0,
+        }}
+      >
+        {description}
+      </p>
+
+      {actionText && onAction && (
+        <Button variant="primary" icon={actionIcon} onClick={onAction}>
+          {actionText}
+        </Button>
+      )}
+    </motion.div>
+  );
+};
+
+export default EmptyState;
diff --git a/src/components/ui/Modal.jsx b/src/components/ui/Modal.jsx
new file mode 100644
index 0000000..fd45f8d
--- /dev/null
+++ b/src/components/ui/Modal.jsx
@@ -0,0 +1,180 @@
+import React, { useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+
+const Modal = ({
+  isOpen = false,
+  onClose,
+  title = '',
+  children,
+  footer = null,
+  maxWidth = 'md', // sm (420px), md (540px), lg (680px), xl (860px)
+  className = '',
+}) => {
+  // Close on Escape key
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape' && isOpen && onClose) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen, onClose]);
+
+  const getMaxWidth = () => {
+    switch (maxWidth) {
+      case 'sm':
+        return '420px';
+      case 'lg':
+        return '680px';
+      case 'xl':
+        return '860px';
+      case 'md':
+      default:
+        return '540px';
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <div
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 'var(--z-modal-backdrop)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 'var(--space-4)',
+          }}
+        >
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            onClick={onClose}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              backgroundColor: 'var(--color-bg-overlay)',
+              backdropFilter: 'blur(10px)',
+              WebkitBackdropFilter: 'blur(10px)',
+            }}
+          />
+
+          {/* Modal Card */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.92, y: 15 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.92, y: 15 }}
+            transition={{ type: 'spring', damping: 25, stiffness: 350 }}
+            className={`glass-dark ${className}`}
+            style={{
+              position: 'relative',
+              zIndex: 'var(--z-modal)',
+              width: '100%',
+              maxWidth: getMaxWidth(),
+              maxHeight: '90vh',
+              display: 'flex',
+              flexDirection: 'column',
+              borderRadius: 'var(--radius-2xl)',
+              border: '1px solid var(--color-border-light)',
+              boxShadow: 'var(--shadow-lg), 0 0 35px hsla(220, 90%, 56%, 0.15)',
+              overflow: 'hidden',
+            }}
+          >
+            {/* Modal Header */}
+            {title && (
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: 'var(--space-5) var(--space-6)',
+                  borderBottom: '1px solid var(--color-border)',
+                }}
+              >
+                <h3
+                  style={{
+                    fontSize: 'var(--text-xl)',
+                    fontFamily: 'var(--font-display)',
+                    fontWeight: 700,
+                  }}
+                >
+                  {title}
+                </h3>
+                <button
+                  onClick={onClose}
+                  aria-label="Tutup Modal"
+                  style={{
+                    width: '32px',
+                    height: '32px',
+                    borderRadius: 'var(--radius-md)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    color: 'var(--color-text-secondary)',
+                    backgroundColor: 'hsla(220, 15%, 25%, 0.4)',
+                    transition: 'all var(--transition-fast)',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.color = '#fff';
+                    e.currentTarget.style.backgroundColor = 'var(--color-danger)';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.color = 'var(--color-text-secondary)';
+                    e.currentTarget.style.backgroundColor = 'hsla(220, 15%, 25%, 0.4)';
+                  }}
+                >
+                  <X size={18} />
+                </button>
+              </div>
+            )}
+
+            {/* Modal Body */}
+            <div
+              style={{
+                padding: 'var(--space-6)',
+                overflowY: 'auto',
+                flex: 1,
+              }}
+            >
+              {children}
+            </div>
+
+            {/* Modal Footer */}
+            {footer && (
+              <div
+                style={{
+                  padding: 'var(--space-4) var(--space-6)',
+                  borderTop: '1px solid var(--color-border)',
+                  backgroundColor: 'hsla(222, 28%, 8%, 0.7)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'flex-end',
+                  gap: 'var(--space-3)',
+                }}
+              >
+                {footer}
+              </div>
+            )}
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default Modal;
diff --git a/src/components/ui/ProgressBar.jsx b/src/components/ui/ProgressBar.jsx
new file mode 100644
index 0000000..ff03a55
--- /dev/null
+++ b/src/components/ui/ProgressBar.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const ProgressBar = ({
+  value = 0,
+  label = '',
+  showPercent = true,
+  variant = 'primary',
+  color = '',
+  height = 8,
+  className = '',
+  style = {},
+}) => {
+  const clampedValue = Math.min(100, Math.max(0, Math.round(value)));
+
+  const getGradient = () => {
+    if (color) return color;
+    switch (variant) {
+      case 'accent':
+        return 'linear-gradient(90deg, var(--color-accent), var(--color-accent-light))';
+      case 'success':
+        return 'linear-gradient(90deg, var(--color-success), hsl(142, 70%, 55%))';
+      case 'warning':
+        return 'linear-gradient(90deg, var(--color-warning), hsl(38, 95%, 65%))';
+      case 'danger':
+        return 'linear-gradient(90deg, var(--color-danger), hsl(0, 75%, 65%))';
+      case 'primary':
+      default:
+        return 'linear-gradient(90deg, var(--color-primary), var(--color-primary-light))';
+    }
+  };
+
+  return (
+    <div className={`progress-container ${className}`} style={{ width: '100%', ...style }}>
+      {(label || showPercent) && (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: 'var(--space-1)',
+            fontSize: 'var(--text-xs)',
+            fontWeight: 600,
+            color: 'var(--color-text-secondary)',
+          }}
+        >
+          {label && <span>{label}</span>}
+          {showPercent && <span style={{ color: 'var(--color-text-primary)' }}>{clampedValue}%</span>}
+        </div>
+      )}
+      <div
+        style={{
+          width: '100%',
+          height: `${height}px`,
+          backgroundColor: 'hsla(220, 15%, 20%, 0.8)',
+          borderRadius: 'var(--radius-full)',
+          overflow: 'hidden',
+          border: '1px solid var(--color-border)',
+        }}
+      >
+        <motion.div
+          initial={{ width: 0 }}
+          animate={{ width: `${clampedValue}%` }}
+          transition={{ duration: 0.5, ease: 'easeOut' }}
+          style={{
+            height: '100%',
+            background: getGradient(),
+            borderRadius: 'var(--radius-full)',
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ProgressBar;
diff --git a/src/components/ui/ToastContainer.jsx b/src/components/ui/ToastContainer.jsx
new file mode 100644
index 0000000..40670a6
--- /dev/null
+++ b/src/components/ui/ToastContainer.jsx
@@ -0,0 +1,138 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { CheckCircle2, Info, AlertTriangle, XCircle, X } from 'lucide-react';
+import { useToastStore } from '../../store/toastStore';
+
+const getToastIcon = (type) => {
+  switch (type) {
+    case 'info':
+      return Info;
+    case 'warning':
+      return AlertTriangle;
+    case 'danger':
+      return XCircle;
+    case 'success':
+    default:
+      return CheckCircle2;
+  }
+};
+
+const getToastStyles = (type) => {
+  switch (type) {
+    case 'info':
+      return {
+        border: '1px solid hsla(199, 89%, 48%, 0.4)',
+        color: 'var(--color-info)',
+        bg: 'hsla(199, 89%, 48%, 0.15)',
+      };
+    case 'warning':
+      return {
+        border: '1px solid hsla(38, 95%, 55%, 0.4)',
+        color: 'var(--color-warning)',
+        bg: 'hsla(38, 95%, 55%, 0.15)',
+      };
+    case 'danger':
+      return {
+        border: '1px solid hsla(0, 75%, 55%, 0.4)',
+        color: 'var(--color-danger)',
+        bg: 'hsla(0, 75%, 55%, 0.15)',
+      };
+    case 'success':
+    default:
+      return {
+        border: '1px solid hsla(142, 70%, 45%, 0.4)',
+        color: 'var(--color-success)',
+        bg: 'hsla(142, 70%, 45%, 0.15)',
+      };
+  }
+};
+
+const ToastContainer = () => {
+  const toasts = useToastStore((state) => state.toasts);
+  const removeToast = useToastStore((state) => state.removeToast);
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: 'var(--space-6)',
+        right: 'var(--space-6)',
+        zIndex: 'var(--z-toast)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-2)',
+        maxWidth: '380px',
+        width: 'calc(100% - 32px)',
+        pointerEvents: 'none',
+      }}
+    >
+      <AnimatePresence>
+        {toasts.map((toast) => {
+          const Icon = getToastIcon(toast.type);
+          const styleConfig = getToastStyles(toast.type);
+
+          return (
+            <motion.div
+              key={toast.id}
+              initial={{ opacity: 0, y: 20, scale: 0.9 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, x: 50, scale: 0.9 }}
+              transition={{ duration: 0.2 }}
+              style={{
+                pointerEvents: 'auto',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                padding: 'var(--space-3) var(--space-4)',
+                borderRadius: 'var(--radius-xl)',
+                backgroundColor: 'hsla(222, 28%, 10%, 0.95)',
+                backdropFilter: 'blur(16px)',
+                WebkitBackdropFilter: 'blur(16px)',
+                border: styleConfig.border,
+                boxShadow: 'var(--shadow-lg)',
+                gap: 'var(--space-3)',
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
+                <div
+                  style={{
+                    color: styleConfig.color,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexShrink: 0,
+                  }}
+                >
+                  <Icon size={20} />
+                </div>
+                <span style={{ fontSize: 'var(--text-xs)', fontWeight: 600, color: 'var(--color-text-primary)', lineHeight: 1.4 }}>
+                  {toast.message}
+                </span>
+              </div>
+
+              <button
+                type="button"
+                onClick={() => removeToast(toast.id)}
+                style={{
+                  color: 'var(--color-text-muted)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  padding: '2px',
+                  borderRadius: 'var(--radius-sm)',
+                  backgroundColor: 'transparent',
+                }}
+                onMouseEnter={(e) => (e.currentTarget.style.color = '#ffffff')}
+                onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--color-text-muted)')}
+              >
+                <X size={14} />
+              </button>
+            </motion.div>
+          );
+        })}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default ToastContainer;
diff --git a/src/data/activities.js b/src/data/activities.js
new file mode 100644
index 0000000..ab5ed58
--- /dev/null
+++ b/src/data/activities.js
@@ -0,0 +1,122 @@
+/**
+ * Activities Dataset & Presets
+ */
+
+export const ACTIVITY_CATEGORIES = {
+  wisata: {
+    id: 'wisata',
+    label: 'Wisata & Atraksi',
+    color: 'hsl(220, 90%, 56%)',
+    bgColor: 'hsla(220, 90%, 56%, 0.15)',
+    icon: 'Compass',
+  },
+  makan: {
+    id: 'makan',
+    label: 'Kuliner & Makan',
+    color: 'hsl(142, 70%, 45%)',
+    bgColor: 'hsla(142, 70%, 45%, 0.15)',
+    icon: 'Utensils',
+  },
+  transportasi: {
+    id: 'transportasi',
+    label: 'Transportasi & Perjalanan',
+    color: 'hsl(280, 70%, 60%)',
+    bgColor: 'hsla(280, 70%, 60%, 0.15)',
+    icon: 'Plane',
+  },
+  checkin: {
+    id: 'checkin',
+    label: 'Hotel & Check-in',
+    color: 'hsl(38, 95%, 55%)',
+    bgColor: 'hsla(38, 95%, 55%, 0.15)',
+    icon: 'Hotel',
+  },
+  belanja: {
+    id: 'belanja',
+    label: 'Belanja & Oleh-oleh',
+    color: 'hsl(340, 75%, 58%)',
+    bgColor: 'hsla(340, 75%, 58%, 0.15)',
+    icon: 'ShoppingBag',
+  },
+  santai: {
+    id: 'santai',
+    label: 'Istirahat & Santai',
+    color: 'hsl(190, 80%, 50%)',
+    bgColor: 'hsla(190, 80%, 50%, 0.15)',
+    icon: 'Coffee',
+  },
+  lainnya: {
+    id: 'lainnya',
+    label: 'Lain-lain',
+    color: 'hsl(210, 20%, 55%)',
+    bgColor: 'hsla(210, 20%, 55%, 0.15)',
+    icon: 'MoreHorizontal',
+  },
+};
+
+export const quickActivityTemplates = [
+  {
+    name: 'Sarapan Pagi di Hotel / Kafe Lokal',
+    category: 'makan',
+    duration: 60,
+    time: '08:00',
+    location: 'Area Penginapan',
+    notes: 'Nikmati sarapan khas lokal',
+  },
+  {
+    name: 'Check-in Penginapan / Hotel',
+    category: 'checkin',
+    duration: 30,
+    time: '14:00',
+    location: 'Hotel',
+    notes: 'Simpan koper dan istirahat sejenak',
+  },
+  {
+    name: 'Kunjungan Destinasi Utama & Foto',
+    category: 'wisata',
+    duration: 120,
+    time: '09:30',
+    location: 'Spot Wisata Populer',
+    notes: 'Siapkan kamera dan outfit terbaik',
+  },
+  {
+    name: 'Makan Siang Kuliner Khas Daerah',
+    category: 'makan',
+    duration: 75,
+    time: '12:30',
+    location: 'Restoran / Warung Rekomendasi',
+    notes: 'Cicipi menu spesial daerah',
+  },
+  {
+    name: 'Menikmati Sunset & Santai Sore',
+    category: 'santai',
+    duration: 90,
+    time: '17:00',
+    location: 'Viewpoint / Pantai / Rooftop',
+    notes: 'Waktu terbaik untuk golden hour',
+  },
+  {
+    name: 'Makan Malam & Night Market Tour',
+    category: 'makan',
+    duration: 90,
+    time: '19:00',
+    location: 'Pasar Malam / Pusat Kuliner',
+    notes: 'Cari street food lokal',
+  },
+  {
+    name: 'Belanja Souvenir & Oleh-oleh Khas',
+    category: 'belanja',
+    duration: 60,
+    time: '16:00',
+    location: 'Pusat Oleh-oleh',
+    notes: 'Camilan dan cinderamata untuk keluarga',
+  },
+  {
+    name: 'Perjalanan Bandara / Stasiun',
+    category: 'transportasi',
+    duration: 120,
+    time: '06:00',
+    location: 'Bandara / Stasiun Kereta',
+    notes: 'Tiba minimal 2 jam sebelum keberangkatan',
+  },
+];
diff --git a/src/data/destinations.js b/src/data/destinations.js
new file mode 100644
index 0000000..830f7e4
--- /dev/null
+++ b/src/data/destinations.js
@@ -0,0 +1,185 @@
+/**
+ * Destinations Dataset
+ * Comprehensive popular destinations in Indonesia & International
+ */
+
+export const destinations = [
+  {
+    id: 'dest-bali-01',
+    name: 'Bali (Island of Gods)',
+    location: 'Bali, Indonesia',
+    country: 'Indonesia',
+    category: 'pantai',
+    description: 'Surga tropis dengan perpaduan magis pantai eksotis, sawah berundak Ubud, pura bersejarah, dan budaya yang memikat.',
+    highlights: ['Pura Tanah Lot', 'Tegalalang Rice Terrace', 'Pantai Nusa Dua', 'Uluwatu Sunset Dance'],
+    estimatedBudget: { min: 2500000, max: 7000000 },
+    popularDuration: 4,
+    rating: 4.9,
+    reviewCount: 18450,
+    image: 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=1000&q=80',
+    tags: ['Pantai', 'Budaya', 'Surfing', 'Kuliner', 'Romantis'],
+    bestTime: 'April - Oktober',
+    suggestedPackingType: 'pantai',
+  },
+  {
+    id: 'dest-labuanbajo-02',
+    name: 'Labuan Bajo & Komodo',
+    location: 'Nusa Tenggara Timur, Indonesia',
+    country: 'Indonesia',
+    category: 'alam',
+    description: 'Gerbang menuju Taman Nasional Komodo dengan panorama Pulau Padar, Pink Beach, dan pengalaman sailing kapal pinisi yang tak terlupakan.',
+    highlights: ['Puncak Pulau Padar', 'Taman Nasional Komodo', 'Pink Beach', 'Manta Point Snorkeling'],
+    estimatedBudget: { min: 4500000, max: 12000000 },
+    popularDuration: 3,
+    rating: 4.9,
+    reviewCount: 9240,
+    image: 'https://images.unsplash.com/photo-1518548419970-58e3b4079ab2?auto=format&fit=crop&w=1000&q=80',
+    tags: ['Sailing', 'Diving', 'Komodo', 'Eksotis', 'Petualangan'],
+    bestTime: 'Mei - September',
+    suggestedPackingType: 'pantai',
+  },
+  {
+    id: 'dest-jogja-03',
+    name: 'Yogyakarta Istimewa',
+    location: 'D.I. Yogyakarta, Indonesia',
+    country: 'Indonesia',
+    category: 'budaya',
+    description: 'Pusat kebudayaan Jawa dengan kemegahan Candi Borobudur & Prambanan, kuliner gudeg legendaris, dan suasana Malioboro yang hangat.',
+    highlights: ['Candi Borobudur', 'Keraton Yogyakarta', 'Candi Prambanan', 'Jalan Malioboro'],
+    estimatedBudget: { min: 1200000, max: 4000000 },
+    popularDuration: 3,
+    rating: 4.8,
+    reviewCount: 22100,
+    image: 'https://images.unsplash.com/photo-1584810359583-96fc3448beaa?auto=format&fit=crop&w=1000&q=80',
+    tags: ['Candi', 'Kuliner', 'Heritage', 'Seni & Batik'],
+    bestTime: 'Sepanjang Tahun',
+    suggestedPackingType: 'budaya',
+  },
+  {
+    id: 'dest-bromo-04',
+    name: 'Gunung Bromo & Ijen',
+    location: 'Jawa Timur, Indonesia',
+    country: 'Indonesia',
+    category: 'gunung',
+    description: 'Sensasi sunrise magis di atas lautan pasir Bromo, kawah aktif bergemuruh, dan keajaiban api biru (Blue Fire) di Kawah Ijen.',
+    highlights: ['Penanjakan Sunrise Viewpoint', 'Kawah Bromo & Pasir Berbisik', 'Bukit Teletubbies', 'Blue Fire Kawah Ijen'],
+    estimatedBudget: { min: 1800000, max: 4500000 },
+    popularDuration: 3,
+    rating: 4.8,
+    reviewCount: 14320,
+    image: 'https://images.unsplash.com/photo-1588668214407-6ea9a6d8c272?auto=format&fit=crop&w=1000&q=80',
+    tags: ['Trekking', 'Sunrise', 'Dingin', 'Fotografi'],
+    bestTime: 'Juli - Oktober',
+    suggestedPackingType: 'gunung',
+  },
+  {
+    id: 'dest-rajaampat-05',
+    name: 'Raja Ampat (The Last Paradise)',
+    location: 'Papua Barat Daya, Indonesia',
+    country: 'Indonesia',
+    category: 'pantai',
+    description: 'Mahakarya alam bawah laut terbaik dunia dengan gugusan pulau karang karst ikonik di Pianemo dan Wayag.',
+    highlights: ['Pianemo Geosite', 'Wayag Lagoon', 'Pasir Timbul', 'Manta Sandy Diving'],
+    estimatedBudget: { min: 9000000, max: 22000000 },
+    popularDuration: 5,
+    rating: 5.0,
+    reviewCount: 6150,
+    image: 'https://images.unsplash.com/photo-1516690561799-46d8f74f9abf?auto=format&fit=crop&w=1000&q=80',
+    tags: ['Diving', 'Karst Islands', 'Eksklusif', 'Alam Liar'],
+    bestTime: 'Oktober - April',
+    suggestedPackingType: 'pantai',
+  },
+  {
+    id: 'dest-tokyo-06',
+    name: 'Tokyo Metropolis',
+    location: 'Tokyo, Jepang',
+    country: 'Jepang',
+    category: 'kota',
+    description: 'Peleburan futuristik gedung pencakar langit Shibuya & Shinjuku dengan kuil kuno Asakusa dan surga kuliner ramen dunia.',
+    highlights: ['Shibuya Crossing & Sky', 'Senso-ji Temple Asakusa', 'Akihabara Tech & Anime', 'TeamLab Planets'],
+    estimatedBudget: { min: 12000000, max: 30000000 },
+    popularDuration: 6,
+    rating: 4.9,
+    reviewCount: 31000,
+    image: 'https://images.unsplash.com/photo-1503899036084-c55cdd92da26?auto=format&fit=crop&w=1000&q=80',
+    tags: ['Metropolitan', 'Belanja', 'Anime', 'Kuliner Jepang'],
+    bestTime: 'Maret - Mei & Okt - Nov',
+    suggestedPackingType: 'kota',
+  },
+  {
+    id: 'dest-bandung-07',
+    name: 'Bandung Paris van Java',
+    location: 'Jawa Barat, Indonesia',
+    country: 'Indonesia',
+    category: 'kota',
+    description: 'Kota sejuk dengan pesona wisata kawah Lembang, kafe-kafe estetik Dago, belanja factory outlet, dan kuliner khas Sunda.',
+    highlights: ['Kawah Putih Ciwidey', 'Tangkuban Perahu', 'Floating Market Lembang', 'Jalan Braga & Asia Afrika'],
+    estimatedBudget: { min: 800000, max: 2800000 },
+    popularDuration: 2,
+    rating: 4.7,
+    reviewCount: 19800,
+    image: 'https://images.unsplash.com/photo-1601058268499-e52658b8bb88?auto=format&fit=crop&w=1000&q=80',
+    tags: ['Sejuk', 'Kafe Estetik', 'Kuliner', 'Family Friendly'],
+    bestTime: 'Sepanjang Tahun',
+    suggestedPackingType: 'kota',
+  },
+  {
+    id: 'dest-lombok-08',
+    name: 'Lombok & Gili Islands',
+    location: 'Nusa Tenggara Barat, Indonesia',
+    country: 'Indonesia',
+    category: 'pantai',
+    description: 'Keindahan pantai Kuta Mandalika, trekking Gunung Rinjani, dan ketenangan pulau tanpa kendaraan bermotor di Gili Trawangan.',
+    highlights: ['Gili Trawangan & Meno', 'Sirkuit Mandalika & Tanjung Aan', 'Bukit Merese', 'Desa Adat Sade'],
+    estimatedBudget: { min: 2200000, max: 6500000 },
+    popularDuration: 4,
+    rating: 4.8,
+    reviewCount: 11200,
+    image: 'https://images.unsplash.com/photo-1570789210967-2cac24afeb00?auto=format&fit=crop&w=1000&q=80',
+    tags: ['Pantai', 'Snorkeling', 'Santai', 'Budaya Sasak'],
+    bestTime: 'Mei - September',
+    suggestedPackingType: 'pantai',
+  },
+  {
+    id: 'dest-seoul-09',
+    name: 'Seoul Urban & K-Culture',
+    location: 'Seoul, Korea Selatan',
+    country: 'Korea Selatan',
+    category: 'kota',
+    description: 'Jelajahi istana megah Gyeongbokgung dengan Hanbok, street food Myeongdong, kafe viral Seongsu-dong, dan gemerlap K-Wave.',
+    highlights: ['Gyeongbokgung Palace', 'Myeongdong Night Market', 'N Seoul Tower', 'Bukchon Hanok Village'],
+    estimatedBudget: { min: 10000000, max: 25000000 },
+    popularDuration: 5,
+    rating: 4.9,
+    reviewCount: 24500,
+    image: 'https://images.unsplash.com/photo-1538485399081-7191377e8241?auto=format&fit=crop&w=1000&q=80',
+    tags: ['K-Pop', 'Street Food', 'Shopping', 'Hanbok'],
+    bestTime: 'April - Mei & Sep - Nov',
+    suggestedPackingType: 'kota',
+  },
+  {
+    id: 'dest-swiss-10',
+    name: 'Swiss Alps & Interlaken',
+    location: 'Bernese Oberland, Swiss',
+    country: 'Swiss',
+    category: 'gunung',
+    description: 'Pemandangan puncak Alpen yang dramatis, desa dongeng Lauterbrunnen, kereta gantung ke Jungfraujoch, dan danau biru kristal.',
+    highlights: ['Jungfraujoch Top of Europe', 'Lauterbrunnen Valley', 'Lake Brienz Cruise', 'Grindelwald First Cliff Walk'],
+    estimatedBudget: { min: 25000000, max: 60000000 },
+    popularDuration: 6,
+    rating: 5.0,
+    reviewCount: 8900,
+    image: 'https://images.unsplash.com/photo-1530122037265-a5f1f91d3b99?auto=format&fit=crop&w=1000&q=80',
+    tags: ['Alpen', 'Pemandangan Spektakuler', 'Kereta Wisata', 'Salju'],
+    bestTime: 'Juni - September / Des - Feb',
+    suggestedPackingType: 'gunung',
+  },
+];
+
+export const destinationCategories = [
+  { id: 'semua', label: 'Semua Destinasi', icon: 'Compass' },
+  { id: 'pantai', label: 'Pantai & Kepulauan', icon: 'Palmtree' },
+  { id: 'gunung', label: 'Gunung & Alam', icon: 'Mountain' },
+  { id: 'budaya', label: 'Budaya & Sejarah', icon: 'Landmark' },
+  { id: 'kota', label: 'Kota & Metropolitan', icon: 'Building2' },
+];
diff --git a/src/data/packingTemplates.js b/src/data/packingTemplates.js
new file mode 100644
index 0000000..c198099
--- /dev/null
+++ b/src/data/packingTemplates.js
@@ -0,0 +1,168 @@
+/**
+ * Packing List Templates based on Trip Category
+ */
+
+export const PACKING_CATEGORIES = [
+  'Pakaian',
+  'Dokumen',
+  'Elektronik',
+  'Obat-obatan',
+  'Toiletries',
+  'Lainnya',
+];
+
+export const packingTemplates = {
+  pantai: {
+    name: 'Trip Pantai & Kepulauan',
+    items: {
+      Pakaian: [
+        { name: 'Baju santai / Kaos katun ringan', qty: 4, checked: false },
+        { name: 'Celana pendek / Beach shorts', qty: 3, checked: false },
+        { name: 'Baju renang / Swimwear', qty: 2, checked: false },
+        { name: 'Topi pantai / Bucket hat', qty: 1, checked: false },
+        { name: 'Kacamata hitam (UV Protection)', qty: 1, checked: false },
+        { name: 'Sandal jepit / Water shoes', qty: 1, checked: false },
+      ],
+      Dokumen: [
+        { name: 'KTP / Paspor & Visa', qty: 1, checked: false },
+        { name: 'Tiket pesawat & booking hotel (Digital/Print)', qty: 1, checked: false },
+        { name: 'Uang tunai secukupnya & kartu debit/kredit', qty: 1, checked: false },
+      ],
+      Elektronik: [
+        { name: 'Smartphone & Charger', qty: 1, checked: false },
+        { name: 'Powerbank 10.000+ mAh', qty: 1, checked: false },
+        { name: 'Waterproof pouch untuk HP', qty: 1, checked: false },
+        { name: 'Action camera / Kamera & baterai cadangan', qty: 1, checked: false },
+      ],
+      'Obat-obatan': [
+        { name: 'Obat mabuk laut / perjalanan', qty: 1, checked: false },
+        { name: 'Obat flu, batuk, & pereda nyeri', qty: 1, checked: false },
+        { name: 'Minyak kayu putih / Roll-on aromaterapi', qty: 1, checked: false },
+        { name: 'Plester luka & antiseptik', qty: 1, checked: false },
+      ],
+      Toiletries: [
+        { name: 'Sunscreen SPF 50+ (Reef-safe)', qty: 1, checked: false },
+        { name: 'After-sun aloe vera gel', qty: 1, checked: false },
+        { name: 'Sabun, sampo & sikat gigi travel size', qty: 1, checked: false },
+        { name: 'Handuk microfiber cepat kering', qty: 1, checked: false },
+      ],
+      Lainnya: [
+        { name: 'Dry bag (10L / 20L)', qty: 1, checked: false },
+        { name: 'Botol minum tumbler (Eco-friendly)', qty: 1, checked: false },
+        { name: 'Kantong plastik / laundry bag untuk baju basah', qty: 2, checked: false },
+      ],
+    },
+  },
+  gunung: {
+    name: 'Trip Gunung & Alam Sejuk',
+    items: {
+      Pakaian: [
+        { name: 'Jaket windbreaker / Down jacket tebal', qty: 1, checked: false },
+        { name: 'Baju termal / Long john', qty: 2, checked: false },
+        { name: 'Celana trekking / kargo elastis', qty: 2, checked: false },
+        { name: 'Sarung tangan wol & Kupluk / Beanie', qty: 1, checked: false },
+        { name: 'Kaus kaki tebal cadangan', qty: 3, checked: false },
+        { name: 'Sepatu trekking / Sepatu olahraga anti-slip', qty: 1, checked: false },
+      ],
+      Dokumen: [
+        { name: 'KTP / Surat izin masuk kawasan konservasi', qty: 1, checked: false },
+        { name: 'Surat keterangan sehat (jika pendakian)', qty: 1, checked: false },
+        { name: 'Uang tunai (ATM jarang di gunung)', qty: 1, checked: false },
+      ],
+      Elektronik: [
+        { name: 'Smartphone & kabel charger tahan dingin', qty: 1, checked: false },
+        { name: 'Powerbank kapasitas besar', qty: 1, checked: false },
+        { name: 'Headlamp / Senter & baterai cadangan', qty: 1, checked: false },
+      ],
+      'Obat-obatan': [
+        { name: 'Obat masuk angin / Tolak angin', qty: 5, checked: false },
+        { name: 'Balsem otot / Salep pegal', qty: 1, checked: false },
+        { name: 'Obat asma / Obat pribadi khusus', qty: 1, checked: false },
+        { name: 'Penghangat tubuh instant (Heat pack)', qty: 4, checked: false },
+      ],
+      Toiletries: [
+        { name: 'Lip balm pelembab bibir', qty: 1, checked: false },
+        { name: 'Moisturizer / Hand cream anti-kering', qty: 1, checked: false },
+        { name: 'Tisu basah & tisu kering travel pack', qty: 2, checked: false },
+        { name: 'Sikat gigi & pasta gigi travel', qty: 1, checked: false },
+      ],
+      Lainnya: [
+        { name: 'Jas hujan ponco / Raincoat ringan', qty: 1, checked: false },
+        { name: 'Thermos air panas mini', qty: 1, checked: false },
+        { name: 'Camilan berenergi (Cokelat/Energi bar)', qty: 3, checked: false },
+      ],
+    },
+  },
+  kota: {
+    name: 'Trip Kota & Metropolitan',
+    items: {
+      Pakaian: [
+        { name: 'Pakaian smart casual / OOTD estetik', qty: 4, checked: false },
+        { name: 'Jaket ringan / Cardigan', qty: 1, checked: false },
+        { name: 'Celana jeans / Chino nyaman', qty: 2, checked: false },
+        { name: 'Sepatu sneakers empuk untuk banyak jalan kaki', qty: 1, checked: false },
+      ],
+      Dokumen: [
+        { name: 'KTP / Paspor & Boarding pass', qty: 1, checked: false },
+        { name: 'Kartu e-Money / Transit card (MRT/Bus)', qty: 1, checked: false },
+        { name: 'Kartu kredit / E-wallet terisi saldo', qty: 1, checked: false },
+      ],
+      Elektronik: [
+        { name: 'Smartphone & Charger cepat', qty: 1, checked: false },
+        { name: 'Powerbank compact & ringan', qty: 1, checked: false },
+        { name: 'TWS Earbuds / Headphone', qty: 1, checked: false },
+        { name: 'Universal travel adapter plug', qty: 1, checked: false },
+      ],
+      'Obat-obatan': [
+        { name: 'Obat maag & pencernaan', qty: 1, checked: false },
+        { name: 'Obat sakit kepala & pereda demam', qty: 1, checked: false },
+        { name: 'Vitamin C booster harian', qty: 1, checked: false },
+      ],
+      Toiletries: [
+        { name: 'Skincare travel size (Facial wash, serum, sunblock)', qty: 1, checked: false },
+        { name: 'Parfum / Cologne mini decant', qty: 1, checked: false },
+        { name: 'Deodorant & sisir rambut', qty: 1, checked: false },
+      ],
+      Lainnya: [
+        { name: 'Tote bag lipat / Shopping bag untuk belanja', qty: 1, checked: false },
+        { name: 'Payung lipat kecil uv-block', qty: 1, checked: false },
+        { name: 'Hand sanitizer pocket size', qty: 1, checked: false },
+      ],
+    },
+  },
+  budaya: {
+    name: 'Trip Budaya & Heritage',
+    items: {
+      Pakaian: [
+        { name: 'Pakaian sopan tertutup untuk masuk tempat ibadah/candi', qty: 3, checked: false },
+        { name: 'Kain selendang / Sarung batik', qty: 1, checked: false },
+        { name: 'Kaus katun adem yang menyerap keringat', qty: 3, checked: false },
+        { name: 'Topi pelindung matahari & kacamata', qty: 1, checked: false },
+        { name: 'Sepatu slip-on yang mudah dilepas pasang', qty: 1, checked: false },
+      ],
+      Dokumen: [
+        { name: 'KTP / Identitas diri', qty: 1, checked: false },
+        { name: 'Tiket masuk situs budaya / booking tour guide', qty: 1, checked: false },
+        { name: 'Uang pecahan kecil untuk donasi / suvenir', qty: 1, checked: false },
+      ],
+      Elektronik: [
+        { name: 'Smartphone untuk audio guide & foto', qty: 1, checked: false },
+        { name: 'Powerbank', qty: 1, checked: false },
+      ],
+      'Obat-obatan': [
+        { name: 'Obat pereda nyeri sendi & pegal', qty: 1, checked: false },
+        { name: 'Koyo pereda pegal', qty: 1, checked: false },
+        { name: 'Minyak angin & obat diare', qty: 1, checked: false },
+      ],
+      Toiletries: [
+        { name: 'Sunscreen & lotion anti-nyamuk', qty: 1, checked: false },
+        { name: 'Tisu basah antibakteri', qty: 1, checked: false },
+        { name: 'Perlengkapan mandi dasar', qty: 1, checked: false },
+      ],
+      Lainnya: [
+        { name: 'Kipas portable mini', qty: 1, checked: false },
+        { name: 'Botol minum isi ulang', qty: 1, checked: false },
+      ],
+    },
+  },
+};
diff --git a/src/hooks/useBudget.js b/src/hooks/useBudget.js
new file mode 100644
index 0000000..a62d445
--- /dev/null
+++ b/src/hooks/useBudget.js
@@ -0,0 +1,47 @@
+import { useTourStore } from '../store/tourStore';
+
+export const useBudget = () => {
+  const budget = useTourStore((state) => state.budget);
+  const setTotalBudget = useTourStore((state) => state.setTotalBudget);
+  const setCurrency = useTourStore((state) => state.setCurrency);
+  const addExpense = useTourStore((state) => state.addExpense);
+  const updateExpense = useTourStore((state) => state.updateExpense);
+  const removeExpense = useTourStore((state) => state.removeExpense);
+
+  const totalSpent = budget.expenses.reduce((sum, item) => sum + (Number(item.amount) || 0), 0);
+  const remainingBudget = (budget.total || 0) - totalSpent;
+  const isOverBudget = remainingBudget < 0;
+  const percentUsed = budget.total > 0 ? Math.min(100, Math.round((totalSpent / budget.total) * 100)) : 0;
+
+  // Breakdown by category
+  const categoryBreakdown = budget.expenses.reduce((acc, item) => {
+    const cat = item.category || 'lainnya';
+    acc[cat] = (acc[cat] || 0) + (Number(item.amount) || 0);
+    return acc;
+  }, {});
+
+  // Breakdown by day
+  const dayBreakdown = budget.expenses.reduce((acc, item) => {
+    const dayKey = item.day ? `Hari ${item.day}` : 'Umum';
+    acc[dayKey] = (acc[dayKey] || 0) + (Number(item.amount) || 0);
+    return acc;
+  }, {});
+
+  return {
+    budget,
+    totalBudget: budget.total,
+    currency: budget.currency,
+    expenses: budget.expenses,
+    totalSpent,
+    remainingBudget,
+    isOverBudget,
+    percentUsed,
+    categoryBreakdown,
+    dayBreakdown,
+    setTotalBudget,
+    setCurrency,
+    addExpense,
+    updateExpense,
+    removeExpense,
+  };
+};
diff --git a/src/hooks/usePackingList.js b/src/hooks/usePackingList.js
new file mode 100644
index 0000000..ba09ae0
--- /dev/null
+++ b/src/hooks/usePackingList.js
@@ -0,0 +1,42 @@
+import { useTourStore } from '../store/tourStore';
+
+export const usePackingList = () => {
+  const packingList = useTourStore((state) => state.packingList);
+  const addPackingItem = useTourStore((state) => state.addPackingItem);
+  const updatePackingItem = useTourStore((state) => state.updatePackingItem);
+  const togglePackingItem = useTourStore((state) => state.togglePackingItem);
+  const removePackingItem = useTourStore((state) => state.removePackingItem);
+  const toggleAllInCategory = useTourStore((state) => state.toggleAllInCategory);
+  const loadPackingTemplate = useTourStore((state) => state.loadPackingTemplate);
+  const clearPackingList = useTourStore((state) => state.clearPackingList);
+
+  let totalItems = 0;
+  let packedItems = 0;
+
+  Object.values(packingList).forEach((items) => {
+    if (Array.isArray(items)) {
+      items.forEach((item) => {
+        totalItems++;
+        if (item.checked) packedItems++;
+      });
+    }
+  });
+
+  const percentPacked = totalItems > 0 ? Math.round((packedItems / totalItems) * 100) : 0;
+  const isComplete = totalItems > 0 && packedItems === totalItems;
+
+  return {
+    packingList,
+    totalItems,
+    packedItems,
+    percentPacked,
+    isComplete,
+    addPackingItem,
+    updatePackingItem,
+    togglePackingItem,
+    removePackingItem,
+    toggleAllInCategory,
+    loadPackingTemplate,
+    clearPackingList,
+  };
+};
diff --git a/src/hooks/useSchedule.js b/src/hooks/useSchedule.js
new file mode 100644
index 0000000..46f4205
--- /dev/null
+++ b/src/hooks/useSchedule.js
@@ -0,0 +1,29 @@
+import { useTourStore } from '../store/tourStore';
+
+export const useSchedule = (dayIndex = 0) => {
+  const schedule = useTourStore((state) => state.schedule);
+  const trip = useTourStore((state) => state.trip);
+  const addActivity = useTourStore((state) => state.addActivity);
+  const updateActivity = useTourStore((state) => state.updateActivity);
+  const removeActivity = useTourStore((state) => state.removeActivity);
+  const reorderActivities = useTourStore((state) => state.reorderActivities);
+  const moveActivity = useTourStore((state) => state.moveActivity);
+
+  const currentDay = schedule[dayIndex] || null;
+  const activities = currentDay?.activities || [];
+
+  const totalActivities = schedule.reduce((sum, d) => sum + (d.activities?.length || 0), 0);
+
+  return {
+    schedule,
+    currentDay,
+    activities,
+    totalDays: trip.totalDays || schedule.length,
+    totalActivities,
+    addActivity: (act) => addActivity(dayIndex, act),
+    updateActivity: (id, act) => updateActivity(dayIndex, id, act),
+    removeActivity: (id) => removeActivity(dayIndex, id),
+    reorderActivities: (newActs) => reorderActivities(dayIndex, newActs),
+    moveActivity,
+  };
+};
diff --git a/src/hooks/useTripStore.js b/src/hooks/useTripStore.js
new file mode 100644
index 0000000..2a8ea8c
--- /dev/null
+++ b/src/hooks/useTripStore.js
@@ -0,0 +1,18 @@
+import { useTourStore } from '../store/tourStore';
+
+export const useTrip = () => {
+  const trip = useTourStore((state) => state.trip);
+  const setTrip = useTourStore((state) => state.setTrip);
+  const updateTrip = useTourStore((state) => state.updateTrip);
+  const resetTrip = useTourStore((state) => state.resetTrip);
+
+  const isConfigured = Boolean(trip.id && trip.destination);
+
+  return {
+    trip,
+    isConfigured,
+    setTrip,
+    updateTrip,
+    resetTrip,
+  };
+};
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..137526b
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,483 @@
+/* === Tour Planner Design System === */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');
+
+:root {
+  /* Core Colors */
+  --color-primary: hsl(220, 90%, 56%);
+  --color-primary-dark: hsl(220, 90%, 42%);
+  --color-primary-light: hsl(220, 90%, 70%);
+  --color-primary-glow: hsla(220, 90%, 56%, 0.35);
+  
+  --color-accent: hsl(38, 95%, 55%);
+  --color-accent-dark: hsl(38, 95%, 40%);
+  --color-accent-light: hsl(38, 95%, 70%);
+  --color-accent-glow: hsla(38, 95%, 55%, 0.3);
+  
+  /* Background (Dark Mode Default) */
+  --color-bg-base: hsl(222, 28%, 8%);
+  --color-bg-surface: hsl(222, 22%, 13%);
+  --color-bg-elevated: hsl(222, 18%, 18%);
+  --color-bg-card: hsla(222, 22%, 15%, 0.85);
+  --color-bg-overlay: hsla(222, 28%, 5%, 0.82);
+  
+  /* Text */
+  --color-text-primary: hsl(210, 40%, 96%);
+  --color-text-secondary: hsl(210, 20%, 68%);
+  --color-text-muted: hsl(210, 15%, 48%);
+  
+  /* Borders */
+  --color-border: hsl(220, 15%, 22%);
+  --color-border-light: hsl(220, 15%, 30%);
+  --color-border-focus: hsl(220, 90%, 60%);
+  
+  /* Status Colors */
+  --color-success: hsl(142, 70%, 45%);
+  --color-success-bg: hsla(142, 70%, 45%, 0.15);
+  --color-warning: hsl(38, 95%, 55%);
+  --color-warning-bg: hsla(38, 95%, 55%, 0.15);
+  --color-danger: hsl(0, 75%, 55%);
+  --color-danger-bg: hsla(0, 75%, 55%, 0.15);
+  --color-info: hsl(199, 89%, 48%);
+  --color-info-bg: hsla(199, 89%, 48%, 0.15);
+  
+  /* Category Colors */
+  --color-cat-wisata: hsl(220, 90%, 56%);
+  --color-cat-makan: hsl(142, 70%, 45%);
+  --color-cat-transportasi: hsl(280, 70%, 60%);
+  --color-cat-checkin: hsl(38, 95%, 55%);
+  --color-cat-akomodasi: hsl(265, 80%, 65%);
+  --color-cat-belanja: hsl(340, 75%, 58%);
+  --color-cat-lainnya: hsl(210, 20%, 55%);
+  
+  /* Typography */
+  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-display: 'Outfit', sans-serif;
+  --font-hero: 'Playfair Display', serif;
+  
+  --text-xs: 0.75rem;     /* 12px */
+  --text-sm: 0.875rem;    /* 14px */
+  --text-base: 1rem;      /* 16px */
+  --text-lg: 1.125rem;    /* 18px */
+  --text-xl: 1.25rem;     /* 20px */
+  --text-2xl: 1.5rem;     /* 24px */
+  --text-3xl: 1.875rem;   /* 30px */
+  --text-4xl: 2.25rem;    /* 36px */
+  --text-5xl: 3rem;       /* 48px */
+  
+  /* Spacing */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --space-20: 5rem;
+  
+  /* Border Radius */
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-full: 9999px;
+  
+  /* Shadows & Glow */
+  --shadow-sm: 0 2px 4px hsla(0, 0%, 0%, 0.3);
+  --shadow-md: 0 6px 18px hsla(0, 0%, 0%, 0.4);
+  --shadow-lg: 0 12px 36px hsla(0, 0%, 0%, 0.5);
+  --shadow-glow-primary: 0 0 25px var(--color-primary-glow);
+  --shadow-glow-accent: 0 0 25px var(--color-accent-glow);
+  
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* Z-Index */
+  --z-dropdown: 100;
+  --z-sticky: 150;
+  --z-modal-backdrop: 200;
+  --z-modal: 210;
+  --z-toast: 300;
+  --z-tooltip: 400;
+}
+
+/* === CSS Reset & Base Rules === */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-body);
+  background-color: var(--color-bg-base);
+  color: var(--color-text-primary);
+  line-height: 1.6;
+  min-height: 100vh;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-bg-base);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-light);
+}
+
+/* Typography Hierarchy */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  line-height: 1.25;
+  color: var(--color-text-primary);
+}
+
+h1 { font-size: var(--text-4xl); }
+h2 { font-size: var(--text-3xl); }
+h3 { font-size: var(--text-2xl); }
+h4 { font-size: var(--text-xl); }
+h5 { font-size: var(--text-lg); }
+h6 { font-size: var(--text-base); }
+
+p {
+  color: var(--color-text-secondary);
+  font-size: var(--text-base);
+}
+
+a {
+  color: var(--color-primary-light);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  color: var(--color-accent);
+}
+
+button {
+  font-family: var(--font-body);
+  cursor: pointer;
+  border: none;
+  outline: none;
+  background: none;
+}
+
+input, select, textarea {
+  font-family: var(--font-body);
+  color: var(--color-text-primary);
+}
+
+/* === Utility Classes === */
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 var(--space-6);
+}
+
+.page-wrapper {
+  min-height: calc(100vh - 80px);
+  padding: var(--space-8) 0 var(--space-16);
+}
+
+.page-header {
+  margin-bottom: var(--space-8);
+}
+
+.page-title {
+  font-size: var(--text-3xl);
+  font-family: var(--font-display);
+  margin-bottom: var(--space-2);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.page-subtitle {
+  font-size: var(--text-base);
+  color: var(--color-text-secondary);
+  max-width: 650px;
+}
+
+/* Glassmorphism */
+.glass {
+  background: hsla(222, 22%, 15%, 0.75);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-md);
+}
+
+.glass-dark {
+  background: hsla(222, 28%, 10%, 0.85);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+}
+
+.glass-card {
+  background: linear-gradient(135deg, hsla(222, 22%, 18%, 0.8), hsla(222, 22%, 12%, 0.9));
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
+}
+
+.glass-card:hover {
+  border-color: var(--color-border-light);
+  box-shadow: var(--shadow-lg), var(--shadow-glow-primary);
+  transform: translateY(-4px);
+}
+
+/* Gradient Utilities */
+.text-gradient {
+  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-gradient-hero {
+  background: linear-gradient(135deg, hsl(0, 0%, 100%) 30%, var(--color-accent-light) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.bg-gradient-hero {
+  background: 
+    radial-gradient(ellipse at 15% 30%, hsla(220, 90%, 40%, 0.25) 0%, transparent 60%),
+    radial-gradient(ellipse at 85% 20%, hsla(38, 95%, 45%, 0.18) 0%, transparent 50%),
+    radial-gradient(ellipse at 50% 80%, hsla(280, 70%, 40%, 0.12) 0%, transparent 60%),
+    var(--color-bg-base);
+}
+
+/* Grid System */
+.grid-1 { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
+.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
+.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
+.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
+
+/* Responsive Grids */
+@media (max-width: 1100px) {
+  .grid-4 { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (max-width: 860px) {
+  .grid-4 { grid-template-columns: repeat(2, 1fr); }
+  .grid-3 { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 600px) {
+  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
+  .container { padding: 0 var(--space-4); }
+  h1 { font-size: var(--text-3xl); }
+  .page-title { font-size: var(--text-2xl); }
+}
+
+/* Flex Utilities */
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-gap-2 { display: flex; gap: var(--space-2); }
+.flex-gap-4 { display: flex; gap: var(--space-4); }
+.flex-col { display: flex; flex-direction: column; }
+
+/* Form Controls */
+.input-field, .select-field, .textarea-field {
+  width: 100%;
+  background: hsla(222, 28%, 10%, 0.8);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.input-field:focus, .select-field:focus, .textarea-field:focus {
+  border-color: var(--color-border-focus);
+  box-shadow: 0 0 0 3px hsla(220, 90%, 56%, 0.2);
+  outline: none;
+}
+
+.input-field::placeholder, .textarea-field::placeholder {
+  color: var(--color-text-muted);
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin-bottom: var(--space-4);
+}
+
+.input-label {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+
+/* Badges */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.badge-primary { background: var(--color-primary-glow); color: var(--color-primary-light); border: 1px solid hsla(220, 90%, 56%, 0.3); }
+.badge-accent { background: var(--color-accent-glow); color: var(--color-accent-light); border: 1px solid hsla(38, 95%, 55%, 0.3); }
+.badge-success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid hsla(142, 70%, 45%, 0.3); }
+.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid hsla(38, 95%, 55%, 0.3); }
+.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid hsla(0, 75%, 55%, 0.3); }
+.badge-neutral { background: hsla(220, 15%, 25%, 0.6); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-5);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
+  color: #ffffff;
+  box-shadow: 0 4px 14px var(--color-primary-glow);
+}
+
+.btn-primary:hover {
+  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
+  box-shadow: 0 6px 20px hsla(220, 90%, 56%, 0.5);
+  transform: translateY(-1px);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+}
+
+.btn-accent {
+  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
+  color: hsl(222, 28%, 8%);
+  font-weight: 700;
+  box-shadow: 0 4px 14px var(--color-accent-glow);
+}
+
+.btn-accent:hover {
+  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
+  box-shadow: 0 6px 20px hsla(38, 95%, 55%, 0.5);
+  transform: translateY(-1px);
+}
+
+.btn-secondary {
+  background: var(--color-bg-elevated);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+}
+
+.btn-secondary:hover {
+  background: hsla(222, 18%, 24%, 1);
+  border-color: var(--color-border-light);
+  transform: translateY(-1px);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--color-text-secondary);
+}
+
+.btn-ghost:hover {
+  background: hsla(220, 15%, 25%, 0.4);
+  color: var(--color-text-primary);
+}
+
+.btn-danger {
+  background: var(--color-danger-bg);
+  color: var(--color-danger);
+  border: 1px solid hsla(0, 75%, 55%, 0.3);
+}
+
+.btn-danger:hover {
+  background: var(--color-danger);
+  color: #ffffff;
+}
+
+.btn-sm {
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--text-xs);
+  border-radius: var(--radius-sm);
+}
+
+.btn-lg {
+  padding: var(--space-4) var(--space-8);
+  font-size: var(--text-base);
+  border-radius: var(--radius-lg);
+}
+
+.btn-icon {
+  padding: var(--space-2);
+  border-radius: var(--radius-md);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Animations Keyframes */
+@keyframes pulse-slow {
+  0%, 100% { opacity: 0.6; transform: scale(1); }
+  50% { opacity: 0.9; transform: scale(1.05); }
+}
+
+.animate-pulse-slow {
+  animation: pulse-slow 6s ease-in-out infinite;
+}
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000..b9a1a6d
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/src/pages/Budget.jsx b/src/pages/Budget.jsx
new file mode 100644
index 0000000..66319b2
--- /dev/null
+++ b/src/pages/Budget.jsx
@@ -0,0 +1,244 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  WalletCards,
+  Plus,
+  MapPin,
+  CalendarDays,
+  Luggage,
+  DollarSign,
+  TrendingUp,
+  CreditCard,
+} from 'lucide-react';
+import PageWrapper from '../components/layout/PageWrapper';
+import BudgetOverview from '../components/budget/BudgetOverview';
+import BudgetChart from '../components/budget/BudgetChart';
+import ExpenseList from '../components/budget/ExpenseList';
+import AddExpenseModal from '../components/budget/AddExpenseModal';
+import Button from '../components/ui/Button';
+import { useTourStore } from '../store/tourStore';
+import { useBudget } from '../hooks/useBudget';
+import { toast } from '../store/toastStore';
+
+const Budget = () => {
+  const navigate = useNavigate();
+  const trip = useTourStore((state) => state.trip);
+  const {
+    budget,
+    totalBudget,
+    currency,
+    expenses,
+    totalSpent,
+    remainingBudget,
+    isOverBudget,
+    percentUsed,
+    categoryBreakdown,
+    dayBreakdown,
+    setTotalBudget,
+    setCurrency,
+    addExpense,
+    updateExpense,
+    removeExpense,
+  } = useBudget();
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingExpense, setEditingExpense] = useState(null);
+
+  const handleOpenAddModal = () => {
+    setEditingExpense(null);
+    setIsModalOpen(true);
+  };
+
+  const handleOpenEditModal = (expense) => {
+    setEditingExpense(expense);
+    setIsModalOpen(true);
+  };
+
+  const handleSaveExpense = (expenseData) => {
+    if (expenseData.id) {
+      updateExpense(expenseData.id, expenseData);
+      toast.success(`Pengeluaran "${expenseData.name}" berhasil diperbarui!`);
+    } else {
+      addExpense(expenseData);
+      toast.success(`Pengeluaran "${expenseData.name}" berhasil dicatat!`);
+      if (totalBudget > 0 && totalSpent + expenseData.amount > totalBudget) {
+        toast.warning('Perhatian: Total pengeluaran kini melebihi target anggaran!');
+      }
+    }
+  };
+
+  const handleDeleteExpense = (id) => {
+    removeExpense(id);
+    toast.info('Pengeluaran berhasil dihapus.');
+  };
+
+  const handleCurrencyChange = (newCurr) => {
+    setCurrency(newCurr);
+    toast.info(`Mata uang diubah ke ${newCurr}`);
+  };
+
+  const handleUpdateTarget = (val) => {
+    setTotalBudget(val);
+    toast.success('Target anggaran berhasil diperbarui!');
+  };
+
+  return (
+    <PageWrapper>
+      {/* Top Banner: Trip Info & Currency Selector */}
+      <div
+        className="glass-dark"
+        style={{
+          borderRadius: 'var(--radius-2xl)',
+          padding: 'var(--space-6)',
+          marginBottom: 'var(--space-8)',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          gap: 'var(--space-6)',
+          border: '1px solid var(--color-border)',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)' }}>
+          <div
+            style={{
+              width: '56px',
+              height: '56px',
+              borderRadius: 'var(--radius-xl)',
+              background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#ffffff',
+              boxShadow: 'var(--shadow-glow-accent)',
+            }}
+          >
+            <WalletCards size={28} />
+          </div>
+          <div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: 'var(--text-xs)', color: 'var(--color-accent-light)', fontWeight: 600 }}>
+              <MapPin size={13} /> {trip.destination ? `${trip.destination} (${trip.totalDays || 1} Hari)` : 'Kalkulator Anggaran'}
+            </div>
+            <h1
+              style={{
+                fontSize: 'clamp(1.25rem, 3vw, 1.75rem)',
+                fontFamily: 'var(--font-display)',
+                fontWeight: 700,
+                color: '#ffffff',
+                lineHeight: 1.2,
+                marginTop: '2px',
+              }}
+            >
+              Kalkulator & Estimasi Budget
+            </h1>
+            <p style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)', marginTop: '4px' }}>
+              Pantau arus pengeluaran liburan agar tetap sesuai dengan batas anggaran.
+            </p>
+          </div>
+        </div>
+
+        {/* Currency Toggle & Quick Nav Shortcuts */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
+          {/* Currency Toggle Selector */}
+          <div
+            style={{
+              display: 'flex',
+              backgroundColor: 'hsla(220, 15%, 15%, 0.8)',
+              padding: '3px',
+              borderRadius: 'var(--radius-md)',
+              border: '1px solid var(--color-border)',
+            }}
+          >
+            {['IDR', 'USD', 'EUR'].map((curr) => (
+              <button
+                key={curr}
+                type="button"
+                onClick={() => handleCurrencyChange(curr)}
+                style={{
+                  padding: '4px 10px',
+                  borderRadius: 'var(--radius-sm)',
+                  fontSize: '11px',
+                  fontWeight: 700,
+                  cursor: 'pointer',
+                  backgroundColor: currency === curr ? 'var(--color-primary)' : 'transparent',
+                  color: currency === curr ? '#ffffff' : 'var(--color-text-secondary)',
+                  transition: 'all var(--transition-fast)',
+                }}
+              >
+                {curr}
+              </button>
+            ))}
+          </div>
+
+          <Button
+            variant="secondary"
+            size="sm"
+            icon={CalendarDays}
+            onClick={() => navigate('/schedule')}
+          >
+            Jadwal
+          </Button>
+
+          <Button
+            variant="secondary"
+            size="sm"
+            icon={Luggage}
+            onClick={() => navigate('/packing')}
+          >
+            Packing List
+          </Button>
+
+          <Button
+            variant="primary"
+            size="sm"
+            icon={Plus}
+            onClick={handleOpenAddModal}
+          >
+            Tambah Biaya
+          </Button>
+        </div>
+      </div>
+
+      {/* Budget Overview Widget (Cards & Progress) */}
+      <BudgetOverview
+        totalBudget={totalBudget}
+        totalSpent={totalSpent}
+        remainingBudget={remainingBudget}
+        percentUsed={percentUsed}
+        isOverBudget={isOverBudget}
+        currency={currency}
+        onUpdateTotalBudget={handleUpdateTarget}
+        onOpenAddExpense={handleOpenAddModal}
+      />
+
+      {/* Recharts Visual Charts (Pie & Bar) */}
+      <BudgetChart
+        categoryBreakdown={categoryBreakdown}
+        dayBreakdown={dayBreakdown}
+        currency={currency}
+        totalSpent={totalSpent}
+      />
+
+      {/* Expense List and Categorized Items */}
+      <ExpenseList
+        expenses={expenses}
+        currency={currency}
+        onEditExpense={handleOpenEditModal}
+        onDeleteExpense={handleDeleteExpense}
+        onOpenAddExpense={handleOpenAddModal}
+      />
+
+      {/* Add / Edit Expense Modal */}
+      <AddExpenseModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onSave={handleSaveExpense}
+        initialData={editingExpense}
+        totalDays={trip.totalDays || 1}
+        currency={currency}
+      />
+    </PageWrapper>
+  );
+};
+
+export default Budget;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
new file mode 100644
index 0000000..aaadff0
--- /dev/null
+++ b/src/pages/Home.jsx
@@ -0,0 +1,220 @@
+import React, { useState, useMemo, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Compass, Sparkles, MapPin, Plus, ArrowRight, RefreshCw, CalendarDays } from 'lucide-react';
+import HeroSection from '../components/trip/HeroSection';
+import FilterBar from '../components/trip/FilterBar';
+import TripCard from '../components/trip/TripCard';
+import TripModal from '../components/trip/TripModal';
+import CustomTripModal from '../components/trip/CustomTripModal';
+import EmptyState from '../components/ui/EmptyState';
+import Button from '../components/ui/Button';
+import { destinations } from '../data/destinations';
+import { useTourStore } from '../store/tourStore';
+import { useNavigate } from 'react-router-dom';
+
+const Home = () => {
+  const navigate = useNavigate();
+  const trip = useTourStore((state) => state.trip);
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeCategory, setActiveCategory] = useState('semua');
+  const [sortBy, setSortBy] = useState('popular');
+  const [selectedDestination, setSelectedDestination] = useState(null);
+  const [isPresetModalOpen, setIsPresetModalOpen] = useState(false);
+  const [isCustomModalOpen, setIsCustomModalOpen] = useState(false);
+
+  const exploreSectionRef = useRef(null);
+
+  const handleExploreScroll = () => {
+    exploreSectionRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  const handleSelectDestination = (dest) => {
+    setSelectedDestination(dest);
+    setIsPresetModalOpen(true);
+  };
+
+  // Filter & Sort Logic
+  const filteredDestinations = useMemo(() => {
+    return destinations
+      .filter((dest) => {
+        // Category filter
+        const matchesCategory =
+          activeCategory === 'semua' ||
+          dest.category.toLowerCase() === activeCategory.toLowerCase() ||
+          (activeCategory === 'gunung' && dest.category === 'alam');
+
+        // Search query
+        const query = searchQuery.toLowerCase().trim();
+        const matchesSearch =
+          !query ||
+          dest.name.toLowerCase().includes(query) ||
+          dest.location.toLowerCase().includes(query) ||
+          dest.description.toLowerCase().includes(query) ||
+          (dest.tags && dest.tags.some((t) => t.toLowerCase().includes(query))) ||
+          (dest.highlights && dest.highlights.some((h) => h.toLowerCase().includes(query)));
+
+        return matchesCategory && matchesSearch;
+      })
+      .sort((a, b) => {
+        if (sortBy === 'rating') {
+          return b.rating - a.rating;
+        }
+        if (sortBy === 'budget-low') {
+          return (a.estimatedBudget?.min || 0) - (b.estimatedBudget?.min || 0);
+        }
+        if (sortBy === 'duration') {
+          return (a.popularDuration || 0) - (b.popularDuration || 0);
+        }
+        // default 'popular' -> reviewCount
+        return (b.reviewCount || 0) - (a.reviewCount || 0);
+      });
+  }, [searchQuery, activeCategory, sortBy]);
+
+  return (
+    <div>
+      {/* Hero Section */}
+      <HeroSection
+        onExploreClick={handleExploreScroll}
+        onCreateCustomClick={() => setIsCustomModalOpen(true)}
+      />
+
+      {/* Main Content Area */}
+      <div className="container" ref={exploreSectionRef} style={{ padding: 'var(--space-10) var(--space-4) var(--space-16)' }}>
+        {/* Active Trip Banner if configured */}
+        {trip.id && trip.destination && (
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="glass"
+            style={{
+              padding: 'var(--space-4) var(--space-6)',
+              borderRadius: 'var(--radius-xl)',
+              marginBottom: 'var(--space-8)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              flexWrap: 'wrap',
+              gap: 'var(--space-4)',
+              border: '1px solid hsla(38, 95%, 55%, 0.4)',
+              background: 'linear-gradient(135deg, hsla(222, 22%, 18%, 0.9), hsla(38, 95%, 55%, 0.1))',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
+              <div
+                style={{
+                  width: '42px',
+                  height: '42px',
+                  borderRadius: 'var(--radius-lg)',
+                  backgroundColor: 'var(--color-accent-glow)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                <CalendarDays size={22} />
+              </div>
+              <div>
+                <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-accent)', fontWeight: 700, textTransform: 'uppercase' }}>
+                  Trip Sedang Aktif
+                </div>
+                <div style={{ fontSize: 'var(--text-base)', fontWeight: 700, color: '#ffffff' }}>
+                  {trip.name || trip.destination} &bull; {trip.totalDays} Hari
+                </div>
+              </div>
+            </div>
+
+            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+              <Button
+                variant="accent"
+                size="sm"
+                icon={ArrowRight}
+                iconPosition="right"
+                onClick={() => navigate('/schedule')}
+              >
+                Buka Jadwal Saya
+              </Button>
+            </div>
+          </motion.div>
+        )}
+
+        {/* Section Header */}
+        <div className="page-header" style={{ marginBottom: 'var(--space-6)' }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 'var(--space-3)' }}>
+            <div>
+              <h2 className="page-title">
+                <Compass className="text-gradient" size={28} />
+                <span>Pilih Destinasi Wisata</span>
+              </h2>
+              <p className="page-subtitle">
+                Temukan {destinations.length} destinasi unggulan atau rancang rencana perjalanan sendiri.
+              </p>
+            </div>
+
+            <Button
+              variant="secondary"
+              icon={Plus}
+              onClick={() => setIsCustomModalOpen(true)}
+            >
+              Buat Trip Kustom
+            </Button>
+          </div>
+        </div>
+
+        {/* Search & Filter Component */}
+        <FilterBar
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          activeCategory={activeCategory}
+          onCategoryChange={setActiveCategory}
+          sortBy={sortBy}
+          onSortChange={setSortBy}
+        />
+
+        {/* Destinations Grid */}
+        {filteredDestinations.length > 0 ? (
+          <motion.div
+            layout
+            className="grid-4"
+            style={{ gap: 'var(--space-6)' }}
+          >
+            <AnimatePresence mode="popLayout">
+              {filteredDestinations.map((destination) => (
+                <TripCard
+                  key={destination.id}
+                  destination={destination}
+                  onSelect={handleSelectDestination}
+                />
+              ))}
+            </AnimatePresence>
+          </motion.div>
+        ) : (
+          <EmptyState
+            icon={Compass}
+            title="Tidak Ada Destinasi yang Cocok"
+            description={`Tidak menemukan destinasi dengan kata kunci "${searchQuery}". Coba ubah kata kunci atau buat trip kustom sendiri.`}
+            actionText="Buat Trip Kustom"
+            actionIcon={Plus}
+            onAction={() => setIsCustomModalOpen(true)}
+          />
+        )}
+      </div>
+
+      {/* Preset Trip Configuration Modal */}
+      <TripModal
+        isOpen={isPresetModalOpen}
+        onClose={() => setIsPresetModalOpen(false)}
+        destination={selectedDestination}
+      />
+
+      {/* Custom Trip Modal */}
+      <CustomTripModal
+        isOpen={isCustomModalOpen}
+        onClose={() => setIsCustomModalOpen(false)}
+      />
+    </div>
+  );
+};
+
+export default Home;
diff --git a/src/pages/PackingList.jsx b/src/pages/PackingList.jsx
new file mode 100644
index 0000000..f6cbd0d
--- /dev/null
+++ b/src/pages/PackingList.jsx
@@ -0,0 +1,224 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Luggage, Search, Plus, Sparkles, MapPin, CalendarDays, WalletCards, ArrowRight, Layers, CheckCircle2 } from 'lucide-react';
+import PageWrapper from '../components/layout/PageWrapper';
+import PackingOverview from '../components/packing/PackingOverview';
+import PackingCategory from '../components/packing/PackingCategory';
+import TemplateModal from '../components/packing/TemplateModal';
+import Button from '../components/ui/Button';
+import EmptyState from '../components/ui/EmptyState';
+import { useTourStore } from '../store/tourStore';
+import { usePackingList } from '../hooks/usePackingList';
+import { PACKING_CATEGORIES } from '../data/packingTemplates';
+import { toast } from '../store/toastStore';
+
+const PackingList = () => {
+  const navigate = useNavigate();
+  const trip = useTourStore((state) => state.trip);
+  const {
+    packingList,
+    totalItems,
+    packedItems,
+    percentPacked,
+    isComplete,
+    addPackingItem,
+    updatePackingItem,
+    togglePackingItem,
+    removePackingItem,
+    toggleAllInCategory,
+    loadPackingTemplate,
+    clearPackingList,
+  } = usePackingList();
+
+  const [isTemplateModalOpen, setIsTemplateModalOpen] = useState(false);
+  const [searchFilter, setSearchFilter] = useState('');
+
+  // If packing list is empty, auto-load template according to trip category
+  useEffect(() => {
+    if (totalItems === 0) {
+      loadPackingTemplate(trip.category || 'pantai');
+    }
+  }, [totalItems, trip.category]);
+
+  const handleResetChecklist = () => {
+    PACKING_CATEGORIES.forEach((cat) => {
+      toggleAllInCategory(cat, false);
+    });
+    toast.info('Status centang packing list direset.');
+  };
+
+  const handleUpdateQty = (category, itemId, newQty) => {
+    updatePackingItem(category, itemId, { qty: newQty });
+  };
+
+  const handleAddItem = (category, itemData) => {
+    addPackingItem(category, itemData);
+    toast.success(`"${itemData.name}" ditambahkan ke ${category}!`);
+  };
+
+  const handleDeleteItem = (category, itemId) => {
+    removePackingItem(category, itemId);
+    toast.info('Barang berhasil dihapus.');
+  };
+
+  const handleApplyTemplate = (templateKey) => {
+    loadPackingTemplate(templateKey);
+    toast.success(`Template ${templateKey} berhasil dimuat!`);
+  };
+
+  return (
+    <PageWrapper>
+      {/* Top Banner: Trip Info Header */}
+      <div
+        className="glass-dark"
+        style={{
+          borderRadius: 'var(--radius-2xl)',
+          padding: 'var(--space-6)',
+          marginBottom: 'var(--space-8)',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          gap: 'var(--space-6)',
+          border: '1px solid var(--color-border)',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)' }}>
+          <div
+            style={{
+              width: '56px',
+              height: '56px',
+              borderRadius: 'var(--radius-xl)',
+              background: 'linear-gradient(135deg, var(--color-primary), var(--color-accent))',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#ffffff',
+              boxShadow: 'var(--shadow-glow-primary)',
+            }}
+          >
+            <Luggage size={28} />
+          </div>
+          <div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: 'var(--text-xs)', color: 'var(--color-accent-light)', fontWeight: 600 }}>
+              <MapPin size={13} /> {trip.destination ? `${trip.destination} (${trip.totalDays || 1} Hari)` : 'Daftar Perlengkapan'}
+            </div>
+            <h1
+              style={{
+                fontSize: 'clamp(1.25rem, 3vw, 1.75rem)',
+                fontFamily: 'var(--font-display)',
+                fontWeight: 700,
+                color: '#ffffff',
+                lineHeight: 1.2,
+                marginTop: '2px',
+              }}
+            >
+              Packing List & Bawaan
+            </h1>
+            <p style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)', marginTop: '4px' }}>
+              Pastikan dokumen penting, pakaian, dan peralatan esensial sudah masuk koper.
+            </p>
+          </div>
+        </div>
+
+        {/* Quick Nav Shortcuts */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
+          <Button
+            variant="secondary"
+            size="sm"
+            icon={CalendarDays}
+            onClick={() => navigate('/schedule')}
+          >
+            Lihat Jadwal
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            icon={WalletCards}
+            onClick={() => navigate('/budget')}
+          >
+            Lihat Budget
+          </Button>
+          <Button
+            variant="accent"
+            size="sm"
+            icon={Layers}
+            onClick={() => setIsTemplateModalOpen(true)}
+          >
+            Template Bawaan
+          </Button>
+        </div>
+      </div>
+
+      {/* Progress Overview Widget */}
+      <PackingOverview
+        totalItems={totalItems}
+        packedItems={packedItems}
+        percentPacked={percentPacked}
+        isComplete={isComplete}
+        onOpenTemplateModal={() => setIsTemplateModalOpen(true)}
+        onResetAll={handleResetChecklist}
+      />
+
+      {/* Search Filter Bar */}
+      <div
+        className="glass"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--space-3)',
+          padding: 'var(--space-3) var(--space-4)',
+          borderRadius: 'var(--radius-xl)',
+          marginBottom: 'var(--space-6)',
+          maxWidth: '450px',
+        }}
+      >
+        <Search size={18} style={{ color: 'var(--color-primary-light)' }} />
+        <input
+          type="text"
+          className="input-field"
+          placeholder="Cari barang bawaan (e.g. Paspor, Sunscreen, Charger)..."
+          value={searchFilter}
+          onChange={(e) => setSearchFilter(e.target.value)}
+          style={{ background: 'transparent', border: 'none', padding: 0 }}
+        />
+      </div>
+
+      {/* Categories List */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
+        {PACKING_CATEGORIES.map((categoryName) => {
+          const categoryItems = (packingList[categoryName] || []).filter((item) => {
+            if (!searchFilter.trim()) return true;
+            return item.name.toLowerCase().includes(searchFilter.toLowerCase().trim());
+          });
+
+          // Skip empty categories when search query is active and nothing matches
+          if (searchFilter.trim() && categoryItems.length === 0) return null;
+
+          return (
+            <PackingCategory
+              key={categoryName}
+              category={categoryName}
+              items={categoryItems}
+              onToggleItem={togglePackingItem}
+              onUpdateQty={handleUpdateQty}
+              onDeleteItem={handleDeleteItem}
+              onAddItem={handleAddItem}
+              onToggleAll={toggleAllInCategory}
+            />
+          );
+        })}
+      </div>
+
+      {/* Template Selection Modal */}
+      <TemplateModal
+        isOpen={isTemplateModalOpen}
+        onClose={() => setIsTemplateModalOpen(false)}
+        onApplyTemplate={handleApplyTemplate}
+        currentCategory={trip.category}
+      />
+    </PageWrapper>
+  );
+};
+
+export default PackingList;
diff --git a/src/pages/Schedule.jsx b/src/pages/Schedule.jsx
new file mode 100644
index 0000000..4c1fcbc
--- /dev/null
+++ b/src/pages/Schedule.jsx
@@ -0,0 +1,225 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import {
+  CalendarDays,
+  MapPin,
+  Clock,
+  Plus,
+  Compass,
+  ArrowRight,
+  Luggage,
+  WalletCards,
+  Sparkles,
+  Layers,
+} from 'lucide-react';
+import PageWrapper from '../components/layout/PageWrapper';
+import DayTabs from '../components/schedule/DayTabs';
+import ScheduleTimeline from '../components/schedule/ScheduleTimeline';
+import AddActivityModal from '../components/schedule/AddActivityModal';
+import Button from '../components/ui/Button';
+import EmptyState from '../components/ui/EmptyState';
+import { useTourStore } from '../store/tourStore';
+import { useSchedule } from '../hooks/useSchedule';
+import { toast } from '../store/toastStore';
+
+const Schedule = () => {
+  const navigate = useNavigate();
+  const trip = useTourStore((state) => state.trip);
+  const schedule = useTourStore((state) => state.schedule);
+  const addActivity = useTourStore((state) => state.addActivity);
+  const updateActivity = useTourStore((state) => state.updateActivity);
+  const removeActivity = useTourStore((state) => state.removeActivity);
+  const reorderActivities = useTourStore((state) => state.reorderActivities);
+  const updateTrip = useTourStore((state) => state.updateTrip);
+  const initSchedule = useTourStore((state) => state.initSchedule);
+
+  const [selectedDayIndex, setSelectedDayIndex] = useState(0);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingActivity, setEditingActivity] = useState(null);
+
+  const currentDay = schedule[selectedDayIndex] || schedule[0];
+  const totalActivities = schedule.reduce((sum, d) => sum + (d.activities?.length || 0), 0);
+
+  // If no trip configured yet
+  if (!trip.id || !trip.destination) {
+    return (
+      <PageWrapper>
+        <div className="page-header text-center" style={{ maxWidth: '600px', margin: '0 auto var(--space-8)' }}>
+          <h1 className="page-title flex-center">
+            <CalendarDays className="text-gradient" size={32} />
+            <span>Jadwal Harian Perjalanan</span>
+          </h1>
+          <p className="page-subtitle" style={{ margin: '0 auto' }}>
+            Anda belum memilih destinasi wisata untuk membuat itinerary.
+          </p>
+        </div>
+
+        <EmptyState
+          icon={Compass}
+          title="Mulai dengan Memilih Destinasi"
+          description="Pilih salah satu destinasi wisata populer atau buat trip kustom sendiri untuk mulai menyusun jadwal aktivitas harian."
+          actionText="Pilih Destinasi Sekarang"
+          actionIcon={ArrowRight}
+          onAction={() => navigate('/')}
+        />
+      </PageWrapper>
+    );
+  }
+
+  const handleOpenAddModal = () => {
+    setEditingActivity(null);
+    setIsModalOpen(true);
+  };
+
+  const handleOpenEditModal = (activity) => {
+    setEditingActivity(activity);
+    setIsModalOpen(true);
+  };
+
+  const handleSaveActivity = (activityData) => {
+    if (activityData.id) {
+      updateActivity(selectedDayIndex, activityData.id, activityData);
+      toast.success(`Aktivitas "${activityData.name}" berhasil diperbarui!`);
+    } else {
+      addActivity(selectedDayIndex, activityData);
+      toast.success(`Aktivitas "${activityData.name}" ditambahkan ke Hari ${selectedDayIndex + 1}!`);
+    }
+  };
+
+  const handleDeleteActivity = (activityId) => {
+    removeActivity(selectedDayIndex, activityId);
+    toast.info('Aktivitas berhasil dihapus.');
+  };
+
+  const handleAddDay = () => {
+    const newTotalDays = (trip.totalDays || schedule.length) + 1;
+    updateTrip({ totalDays: newTotalDays });
+    initSchedule(newTotalDays, trip.startDate);
+    setSelectedDayIndex(newTotalDays - 1);
+    toast.success(`Hari ke-${newTotalDays} berhasil ditambahkan ke jadwal!`);
+  };
+
+  return (
+    <PageWrapper>
+      {/* Top Banner Header: Trip Info & Summary Stats */}
+      <div
+        className="glass-dark"
+        style={{
+          borderRadius: 'var(--radius-2xl)',
+          padding: 'var(--space-6)',
+          marginBottom: 'var(--space-8)',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          gap: 'var(--space-6)',
+          border: '1px solid var(--color-border)',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        {/* Left Side: Destination Info */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)' }}>
+          {trip.coverImage && (
+            <div
+              style={{
+                width: '72px',
+                height: '72px',
+                borderRadius: 'var(--radius-xl)',
+                overflow: 'hidden',
+                flexShrink: 0,
+                border: '2px solid var(--color-border-light)',
+                boxShadow: 'var(--shadow-md)',
+              }}
+            >
+              <img
+                src={trip.coverImage}
+                alt={trip.destination}
+                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+              />
+            </div>
+          )}
+          <div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: 'var(--text-xs)', color: 'var(--color-accent-light)', fontWeight: 600 }}>
+              <MapPin size={13} /> {trip.destination}
+            </div>
+            <h1
+              style={{
+                fontSize: 'clamp(1.25rem, 3vw, 1.75rem)',
+                fontFamily: 'var(--font-display)',
+                fontWeight: 700,
+                color: '#ffffff',
+                lineHeight: 1.2,
+                marginTop: '2px',
+              }}
+            >
+              {trip.name || `Itinerary ${trip.destination}`}
+            </h1>
+            <p style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)', marginTop: '4px' }}>
+              {trip.totalDays} Hari Total &bull; {totalActivities} Aktivitas Terjadwal
+            </p>
+          </div>
+        </div>
+
+        {/* Right Side: Quick Action Pills to Packing & Budget */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
+          <Button
+            variant="secondary"
+            size="sm"
+            icon={Luggage}
+            onClick={() => navigate('/packing')}
+          >
+            Lihat Packing List
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            icon={WalletCards}
+            onClick={() => navigate('/budget')}
+          >
+            Lihat Budget
+          </Button>
+          <Button
+            variant="primary"
+            size="sm"
+            icon={Plus}
+            onClick={handleOpenAddModal}
+          >
+            Tambah Aktivitas
+          </Button>
+        </div>
+      </div>
+
+      {/* Day Navigation Tabs */}
+      <DayTabs
+        schedule={schedule}
+        selectedDayIndex={selectedDayIndex}
+        onSelectDay={setSelectedDayIndex}
+        onAddDay={handleAddDay}
+        totalDays={trip.totalDays}
+      />
+
+      {/* Daily Timeline */}
+      <ScheduleTimeline
+        day={currentDay}
+        dayIndex={selectedDayIndex}
+        onAddActivity={handleOpenAddModal}
+        onEditActivity={handleOpenEditModal}
+        onDeleteActivity={handleDeleteActivity}
+        onReorderActivities={reorderActivities}
+      />
+
+      {/* Add / Edit Activity Modal */}
+      <AddActivityModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onSave={handleSaveActivity}
+        initialData={editingActivity}
+        dayNumber={selectedDayIndex + 1}
+      />
+    </PageWrapper>
+  );
+};
+
+export default Schedule;
diff --git a/src/store/toastStore.js b/src/store/toastStore.js
new file mode 100644
index 0000000..f58896b
--- /dev/null
+++ b/src/store/toastStore.js
@@ -0,0 +1,31 @@
+import { create } from 'zustand';
+
+export const useToastStore = create((set, get) => ({
+  toasts: [],
+  addToast: ({ message, type = 'success', duration = 3000 }) => {
+    const id = 'toast-' + Math.random().toString(36).substring(2, 9) + '-' + Date.now();
+    const newToast = { id, message, type };
+
+    set((state) => ({
+      toasts: [...state.toasts, newToast],
+    }));
+
+    if (duration > 0) {
+      setTimeout(() => {
+        get().removeToast(id);
+      }, duration);
+    }
+  },
+  removeToast: (id) => {
+    set((state) => ({
+      toasts: state.toasts.filter((t) => t.id !== id),
+    }));
+  },
+}));
+
+export const toast = {
+  success: (msg, duration) => useToastStore.getState().addToast({ message: msg, type: 'success', duration }),
+  info: (msg, duration) => useToastStore.getState().addToast({ message: msg, type: 'info', duration }),
+  warning: (msg, duration) => useToastStore.getState().addToast({ message: msg, type: 'warning', duration }),
+  danger: (msg, duration) => useToastStore.getState().addToast({ message: msg, type: 'danger', duration }),
+};
diff --git a/src/store/tourStore.js b/src/store/tourStore.js
new file mode 100644
index 0000000..d957d9d
--- /dev/null
+++ b/src/store/tourStore.js
@@ -0,0 +1,372 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { generateId } from '../utils/helpers';
+import { getDateForDayIndex, calculateTotalDays } from '../utils/dateHelpers';
+import { packingTemplates } from '../data/packingTemplates';
+
+const initialTripState = {
+  id: null,
+  name: '',
+  destination: '',
+  location: '',
+  startDate: null,
+  endDate: null,
+  totalDays: 0,
+  coverImage: '',
+  type: 'custom', // 'preset' | 'custom'
+  category: 'pantai',
+};
+
+const initialPackingState = {
+  Pakaian: [],
+  Dokumen: [],
+  Elektronik: [],
+  'Obat-obatan': [],
+  Toiletries: [],
+  Lainnya: [],
+};
+
+const initialBudgetState = {
+  total: 0,
+  currency: 'IDR',
+  expenses: [],
+};
+
+export const useTourStore = create(
+  persist(
+    (set, get) => ({
+      // State
+      trip: initialTripState,
+      schedule: [],
+      packingList: initialPackingState,
+      budget: initialBudgetState,
+
+      // === TRIP ACTIONS ===
+      setTrip: (tripData) => {
+        const totalDays = tripData.startDate && tripData.endDate
+          ? calculateTotalDays(tripData.startDate, tripData.endDate)
+          : (tripData.totalDays || 1);
+
+        const newTrip = {
+          ...get().trip,
+          ...tripData,
+          totalDays,
+        };
+
+        set({ trip: newTrip });
+
+        // Auto-initialize schedule if empty or if day count changed
+        const currentSchedule = get().schedule;
+        if (currentSchedule.length !== totalDays) {
+          get().initSchedule(totalDays, newTrip.startDate);
+        }
+
+        // Auto-load template packing if packingList is completely empty
+        const isPackingEmpty = Object.values(get().packingList).every((arr) => arr.length === 0);
+        if (isPackingEmpty && newTrip.category) {
+          get().loadPackingTemplate(newTrip.category);
+        }
+      },
+
+      updateTrip: (data) => {
+        set((state) => ({
+          trip: { ...state.trip, ...data },
+        }));
+      },
+
+      resetTrip: () => {
+        set({ trip: initialTripState, schedule: [] });
+      },
+
+      // === SCHEDULE ACTIONS ===
+      initSchedule: (totalDays, startDate) => {
+        const currentSchedule = get().schedule;
+        const newSchedule = [];
+
+        for (let i = 0; i < totalDays; i++) {
+          const existingDay = currentSchedule[i];
+          const dayDate = getDateForDayIndex(startDate, i);
+
+          newSchedule.push({
+            dayNumber: i + 1,
+            date: dayDate,
+            activities: existingDay ? existingDay.activities : [],
+          });
+        }
+
+        set({ schedule: newSchedule });
+      },
+
+      setSchedule: (newSchedule) => {
+        set({ schedule: newSchedule });
+      },
+
+      addActivity: (dayIndex, activityData) => {
+        const newActivity = {
+          id: activityData.id || generateId(),
+          time: activityData.time || '09:00',
+          name: activityData.name || 'Aktivitas Baru',
+          location: activityData.location || '',
+          duration: activityData.duration || 60,
+          category: activityData.category || 'wisata',
+          notes: activityData.notes || '',
+          color: activityData.color || '',
+        };
+
+        set((state) => {
+          const updatedSchedule = [...state.schedule];
+          if (!updatedSchedule[dayIndex]) {
+            // ensure day exists
+            updatedSchedule[dayIndex] = {
+              dayNumber: dayIndex + 1,
+              date: getDateForDayIndex(state.trip.startDate, dayIndex),
+              activities: [],
+            };
+          }
+
+          const dayActivities = [...(updatedSchedule[dayIndex].activities || []), newActivity];
+          // Sort by time
+          dayActivities.sort((a, b) => (a.time || '').localeCompare(b.time || ''));
+
+          updatedSchedule[dayIndex] = {
+            ...updatedSchedule[dayIndex],
+            activities: dayActivities,
+          };
+
+          return { schedule: updatedSchedule };
+        });
+      },
+
+      updateActivity: (dayIndex, activityId, updatedData) => {
+        set((state) => {
+          const updatedSchedule = [...state.schedule];
+          if (!updatedSchedule[dayIndex]) return state;
+
+          const dayActivities = updatedSchedule[dayIndex].activities.map((act) =>
+            act.id === activityId ? { ...act, ...updatedData } : act
+          );
+
+          dayActivities.sort((a, b) => (a.time || '').localeCompare(b.time || ''));
+
+          updatedSchedule[dayIndex] = {
+            ...updatedSchedule[dayIndex],
+            activities: dayActivities,
+          };
+
+          return { schedule: updatedSchedule };
+        });
+      },
+
+      removeActivity: (dayIndex, activityId) => {
+        set((state) => {
+          const updatedSchedule = [...state.schedule];
+          if (!updatedSchedule[dayIndex]) return state;
+
+          updatedSchedule[dayIndex] = {
+            ...updatedSchedule[dayIndex],
+            activities: updatedSchedule[dayIndex].activities.filter((act) => act.id !== activityId),
+          };
+
+          return { schedule: updatedSchedule };
+        });
+      },
+
+      reorderActivities: (dayIndex, newActivities) => {
+        set((state) => {
+          const updatedSchedule = [...state.schedule];
+          if (!updatedSchedule[dayIndex]) return state;
+
+          updatedSchedule[dayIndex] = {
+            ...updatedSchedule[dayIndex],
+            activities: newActivities,
+          };
+
+          return { schedule: updatedSchedule };
+        });
+      },
+
+      moveActivity: (fromDayIndex, toDayIndex, activityId) => {
+        set((state) => {
+          const updatedSchedule = [...state.schedule];
+          const fromDay = updatedSchedule[fromDayIndex];
+          const toDay = updatedSchedule[toDayIndex];
+          if (!fromDay || !toDay) return state;
+
+          const activityToMove = fromDay.activities.find((a) => a.id === activityId);
+          if (!activityToMove) return state;
+
+          fromDay.activities = fromDay.activities.filter((a) => a.id !== activityId);
+          toDay.activities = [...toDay.activities, activityToMove];
+          toDay.activities.sort((a, b) => (a.time || '').localeCompare(b.time || ''));
+
+          return { schedule: updatedSchedule };
+        });
+      },
+
+      // === PACKING LIST ACTIONS ===
+      addPackingItem: (category, itemData) => {
+        const newItem = {
+          id: itemData.id || generateId(),
+          name: itemData.name,
+          qty: Math.max(1, itemData.qty || 1),
+          checked: !!itemData.checked,
+        };
+
+        set((state) => {
+          const currentCategoryItems = state.packingList[category] || [];
+          return {
+            packingList: {
+              ...state.packingList,
+              [category]: [...currentCategoryItems, newItem],
+            },
+          };
+        });
+      },
+
+      updatePackingItem: (category, itemId, updatedData) => {
+        set((state) => {
+          const currentCategoryItems = state.packingList[category] || [];
+          return {
+            packingList: {
+              ...state.packingList,
+              [category]: currentCategoryItems.map((item) =>
+                item.id === itemId ? { ...item, ...updatedData } : item
+              ),
+            },
+          };
+        });
+      },
+
+      togglePackingItem: (category, itemId) => {
+        set((state) => {
+          const currentCategoryItems = state.packingList[category] || [];
+          return {
+            packingList: {
+              ...state.packingList,
+              [category]: currentCategoryItems.map((item) =>
+                item.id === itemId ? { ...item, checked: !item.checked } : item
+              ),
+            },
+          };
+        });
+      },
+
+      removePackingItem: (category, itemId) => {
+        set((state) => {
+          const currentCategoryItems = state.packingList[category] || [];
+          return {
+            packingList: {
+              ...state.packingList,
+              [category]: currentCategoryItems.filter((item) => item.id !== itemId),
+            },
+          };
+        });
+      },
+
+      toggleAllInCategory: (category, shouldCheck) => {
+        set((state) => {
+          const currentCategoryItems = state.packingList[category] || [];
+          return {
+            packingList: {
+              ...state.packingList,
+              [category]: currentCategoryItems.map((item) => ({ ...item, checked: shouldCheck })),
+            },
+          };
+        });
+      },
+
+      loadPackingTemplate: (tripType = 'pantai') => {
+        const template = packingTemplates[tripType] || packingTemplates.pantai;
+        if (!template || !template.items) return;
+
+        const formattedList = {};
+        Object.entries(template.items).forEach(([catName, items]) => {
+          formattedList[catName] = items.map((item) => ({
+            id: generateId(),
+            name: item.name,
+            qty: item.qty || 1,
+            checked: false,
+          }));
+        });
+
+        set({ packingList: formattedList });
+      },
+
+      clearPackingList: () => {
+        set({ packingList: initialPackingState });
+      },
+
+      // === BUDGET ACTIONS ===
+      setTotalBudget: (amount) => {
+        set((state) => ({
+          budget: {
+            ...state.budget,
+            total: Math.max(0, Number(amount) || 0),
+          },
+        }));
+      },
+
+      setCurrency: (currency) => {
+        set((state) => ({
+          budget: {
+            ...state.budget,
+            currency: currency || 'IDR',
+          },
+        }));
+      },
+
+      addExpense: (expenseData) => {
+        const newExpense = {
+          id: expenseData.id || generateId(),
+          name: expenseData.name || 'Pengeluaran',
+          amount: Math.max(0, Number(expenseData.amount) || 0),
+          category: expenseData.category || 'lainnya',
+          day: expenseData.day ?? null, // number or null
+          date: expenseData.date || '',
+          notes: expenseData.notes || '',
+        };
+
+        set((state) => ({
+          budget: {
+            ...state.budget,
+            expenses: [newExpense, ...state.budget.expenses],
+          },
+        }));
+      },
+
+      updateExpense: (id, updatedData) => {
+        set((state) => ({
+          budget: {
+            ...state.budget,
+            expenses: state.budget.expenses.map((exp) =>
+              exp.id === id ? { ...exp, ...updatedData } : exp
+            ),
+          },
+        }));
+      },
+
+      removeExpense: (id) => {
+        set((state) => ({
+          budget: {
+            ...state.budget,
+            expenses: state.budget.expenses.filter((exp) => exp.id !== id),
+          },
+        }));
+      },
+
+      // === GLOBAL RESET ===
+      resetAll: () => {
+        set({
+          trip: initialTripState,
+          schedule: [],
+          packingList: initialPackingState,
+          budget: initialBudgetState,
+        });
+      },
+    }),
+    {
+      name: 'tour-planner-storage',
+      storage: createJSONStorage(() => localStorage),
+    }
+  )
+);
diff --git a/src/utils/dateHelpers.js b/src/utils/dateHelpers.js
new file mode 100644
index 0000000..d92085b
--- /dev/null
+++ b/src/utils/dateHelpers.js
@@ -0,0 +1,69 @@
+import { format, parseISO, isValid, differenceInCalendarDays, addDays } from 'date-fns';
+import { id } from 'date-fns/locale';
+
+/**
+ * Format ISO date string to readable Indonesian date
+ * e.g., "Senin, 15 Okt 2026"
+ */
+export const formatDateIndo = (dateInput, pattern = 'EEEE, d MMM yyyy') => {
+  if (!dateInput) return '';
+  try {
+    const dateObj = typeof dateInput === 'string' ? parseISO(dateInput) : dateInput;
+    if (!isValid(dateObj)) return '';
+    return format(dateObj, pattern, { locale: id });
+  } catch {
+    return '';
+  }
+};
+
+/**
+ * Format date for short badge e.g. "15 Okt"
+ */
+export const formatDateShort = (dateInput) => {
+  return formatDateIndo(dateInput, 'd MMM');
+};
+
+/**
+ * Calculate total days inclusive (Start: Day 1, End: Day 3 => 3 days)
+ */
+export const calculateTotalDays = (startDate, endDate) => {
+  if (!startDate || !endDate) return 1;
+  try {
+    const start = typeof startDate === 'string' ? parseISO(startDate) : startDate;
+    const end = typeof endDate === 'string' ? parseISO(endDate) : endDate;
+    if (!isValid(start) || !isValid(end)) return 1;
+    const diff = differenceInCalendarDays(end, start);
+    return Math.max(1, diff + 1);
+  } catch {
+    return 1;
+  }
+};
+
+/**
+ * Get date for specific day index (0-based)
+ */
+export const getDateForDayIndex = (startDate, dayIndex) => {
+  if (!startDate) return '';
+  try {
+    const start = typeof startDate === 'string' ? parseISO(startDate) : startDate;
+    if (!isValid(start)) return '';
+    const targetDate = addDays(start, dayIndex);
+    return format(targetDate, 'yyyy-MM-dd');
+  } catch {
+    return '';
+  }
+};
+
+/**
+ * Get ISO string for today in YYYY-MM-DD
+ */
+export const getTodayString = () => {
+  return format(new Date(), 'yyyy-MM-dd');
+};
+
+/**
+ * Get ISO string for tomorrow in YYYY-MM-DD
+ */
+export const getFutureDateString = (daysAhead = 3) => {
+  return format(addDays(new Date(), daysAhead), 'yyyy-MM-dd');
+};
diff --git a/src/utils/formatCurrency.js b/src/utils/formatCurrency.js
new file mode 100644
index 0000000..fb513c4
--- /dev/null
+++ b/src/utils/formatCurrency.js
@@ -0,0 +1,53 @@
+/**
+ * Currency Formatting Utilities
+ */
+
+export const formatIDR = (amount) => {
+  const value = Number(amount) || 0;
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value);
+};
+
+export const formatUSD = (amount) => {
+  const value = Number(amount) || 0;
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  }).format(value);
+};
+
+export const formatEUR = (amount) => {
+  const value = Number(amount) || 0;
+  return new Intl.NumberFormat('de-DE', {
+    style: 'currency',
+    currency: 'EUR',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  }).format(value);
+};
+
+export const formatCurrency = (amount, currency = 'IDR') => {
+  switch (currency.toUpperCase()) {
+    case 'USD':
+      return formatUSD(amount);
+    case 'EUR':
+      return formatEUR(amount);
+    case 'IDR':
+    default:
+      return formatIDR(amount);
+  }
+};
+
+export const parseCurrencyInput = (value) => {
+  if (typeof value === 'number') return value;
+  if (!value) return 0;
+  // Remove non-digit characters except decimals
+  const cleaned = value.toString().replace(/[^0-9]/g, '');
+  return parseInt(cleaned, 10) || 0;
+};
diff --git a/src/utils/helpers.js b/src/utils/helpers.js
new file mode 100644
index 0000000..a4409a1
--- /dev/null
+++ b/src/utils/helpers.js
@@ -0,0 +1,19 @@
+/**
+ * General helper functions
+ */
+
+export const generateId = () => {
+  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return 'id-' + Math.random().toString(36).substring(2, 9) + '-' + Date.now().toString(36);
+};
+
+export const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
+
+export const truncateText = (text, maxLength = 100) => {
+  if (!text || text.length <= maxLength) return text;
+  return text.slice(0, maxLength) + '...';
+};
+
+export const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
diff --git a/task.md b/task.md
new file mode 100644
index 0000000..1d1c8e7
--- /dev/null
+++ b/task.md
@@ -0,0 +1,81 @@
+# 📋 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)
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..9982072
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})