Ready-to-Planner-Tour/README.md

# 🗺️ 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.*