Ready-to-Planner-Tour/AGENTS.md

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