auto winn

2026-08-27 19:45:15 +07:00
commit f5a633227f
66 changed files with 11576 additions and 0 deletions
@@ -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.*