Ready-to-Planner-Tour/README.md

🗺️ Ready to Plan Tour (RPT)

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
2. Detail Teknologi yang Digunakan
3. Arsitektur & Struktur Folder
4. Persyaratan Sistem (Prerequisites)
5. Cara Instalasi & Menjalankan Aplikasi
6. Alur State Management & Penyimpanan Data
7. 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:

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:

cd "lokasi proyek"

2. Install Dependensi Proyek

Jalankan perintah berikut untuk mengunduh seluruh package yang dibutuhkan:

npm install

3. Jalankan Development Server

Mulai server pengembangan lokal dengan perintah:

npm run dev

Output di terminal akan menampilkan URL lokal seperti berikut:

  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/

---

📦 Build untuk Produksi (Production Build)

Jika Anda ingin membuat bundle produksi yang telah dioptimasi (minified & compressed):

# 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

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:

{
  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.