auto winn
This commit is contained in:
Faizulhaq F.N
@@ -0,0 +1,356 @@
|
||||
# 🗺️ Ready to Plan Tour (RPT)
|
||||
|
||||
[](https://react.dev/)
|
||||
[](https://vitejs.dev/)
|
||||
[](https://zustand-demo.pmnd.rs/)
|
||||
[](https://www.framer.com/motion/)
|
||||
[](https://recharts.org/)
|
||||
[](https://dndkit.com/)
|
||||
[](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.*
|
||||
Reference in New Issue
Block a user