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)

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

// 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

# 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

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