auto winn
This commit is contained in:
Faizulhaq F.N
@@ -0,0 +1,186 @@
|
||||
# Coding Standards — Tour Planner App
|
||||
|
||||
Aturan ini berlaku untuk semua kode yang ditulis dalam proyek ini.
|
||||
AI agent wajib mengikuti seluruh aturan di bawah ini.
|
||||
|
||||
---
|
||||
|
||||
## 1. Struktur Komponen
|
||||
|
||||
```jsx
|
||||
// ✅ BENAR — Functional component dengan arrow function
|
||||
const MyComponent = ({ prop1, prop2 }) => {
|
||||
// hooks di atas
|
||||
// logic di tengah
|
||||
// return di bawah
|
||||
return <div />;
|
||||
};
|
||||
|
||||
export default MyComponent;
|
||||
|
||||
// ❌ SALAH — Jangan gunakan class component
|
||||
class MyComponent extends React.Component { }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Styling
|
||||
|
||||
```jsx
|
||||
// ✅ BENAR — CSS variables dari design system
|
||||
<div style={{ color: 'var(--color-text-primary)', padding: 'var(--space-4)' }}>
|
||||
|
||||
// ✅ BENAR — className dengan class yang didefinisikan di CSS
|
||||
<div className="glass section-title">
|
||||
|
||||
// ❌ SALAH — Hardcode warna
|
||||
<div style={{ color: '#ffffff', backgroundColor: '#1a1a2e' }}>
|
||||
|
||||
// ❌ SALAH — TailwindCSS
|
||||
<div className="text-white bg-gray-900 p-4">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. State Management
|
||||
|
||||
```javascript
|
||||
// ✅ BENAR — Gunakan Zustand store untuk state yang di-share
|
||||
const { schedule, addActivity } = useTourStore();
|
||||
|
||||
// ✅ BENAR — useState untuk state lokal (form, toggle)
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
// ❌ SALAH — Prop drilling lebih dari 2 level
|
||||
<A> <B prop={x}> <C prop={x}> <D prop={x} />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Animasi
|
||||
|
||||
```jsx
|
||||
// ✅ BENAR — Selalu gunakan Framer Motion
|
||||
import { motion } from 'framer-motion';
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
|
||||
|
||||
// ❌ SALAH — Animasi manual
|
||||
setTimeout(() => setVisible(true), 100);
|
||||
element.style.transition = 'opacity 0.3s';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Icons
|
||||
|
||||
```jsx
|
||||
// ✅ BENAR — Lucide React
|
||||
import { MapPin, Calendar, Plane } from 'lucide-react';
|
||||
<MapPin size={20} />
|
||||
|
||||
// ❌ SALAH — Emoji sebagai icon UI
|
||||
<span>📍</span>
|
||||
|
||||
// ❌ SALAH — SVG inline tanpa abstraksi
|
||||
<svg xmlns="..." viewBox="..."><path d="..." /></svg>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Data & Constants
|
||||
|
||||
```javascript
|
||||
// ✅ BENAR — Data di src/data/
|
||||
import { destinations } from '../data/destinations';
|
||||
import { CATEGORY_COLORS } from '../data/constants';
|
||||
|
||||
// ❌ SALAH — Data hardcode di dalam komponen
|
||||
const destinations = [{ name: 'Bali', ... }]; // dalam file .jsx
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. File Naming
|
||||
|
||||
| Tipe | Convention | Contoh |
|
||||
|------|------------|--------|
|
||||
| Component | PascalCase | `TripCard.jsx` |
|
||||
| Hook | camelCase dengan "use" prefix | `useBudget.js` |
|
||||
| Utility | camelCase | `formatCurrency.js` |
|
||||
| Data file | camelCase | `destinations.js` |
|
||||
| CSS | kebab-case | `trip-card.css` |
|
||||
|
||||
---
|
||||
|
||||
## 8. Import Order
|
||||
|
||||
```javascript
|
||||
// 1. React & hooks
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
// 2. Third-party libraries
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { MapPin } from 'lucide-react';
|
||||
|
||||
// 3. Internal store & hooks
|
||||
import { useTourStore } from '../store/tourStore';
|
||||
import { useBudget } from '../hooks/useBudget';
|
||||
|
||||
// 4. Components
|
||||
import Button from '../components/ui/Button';
|
||||
import TripCard from '../components/trip/TripCard';
|
||||
|
||||
// 5. Data & utils
|
||||
import { destinations } from '../data/destinations';
|
||||
import { formatIDR } from '../utils/formatCurrency';
|
||||
|
||||
// 6. Styles (jika ada)
|
||||
import './ComponentName.css';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Performance
|
||||
|
||||
- Gunakan `useMemo` untuk kalkulasi berat (total budget, statistik packing)
|
||||
- Gunakan `useCallback` untuk handler yang di-pass sebagai prop
|
||||
- Gunakan `React.memo` untuk komponen list item yang berat
|
||||
- Jangan lakukan side effect tanpa `useEffect`
|
||||
|
||||
---
|
||||
|
||||
## 10. Batasan Fitur (TIDAK BOLEH DILANGGAR)
|
||||
|
||||
| Larangan | Alasan |
|
||||
|----------|--------|
|
||||
| ❌ Login / Logout | Aplikasi ini sepenuhnya static & lokal |
|
||||
| ❌ API call ke backend | Tidak ada server, semua data lokal |
|
||||
| ❌ Menyimpan password atau data sensitif | Tidak ada autentikasi |
|
||||
| ❌ TailwindCSS | Gunakan vanilla CSS + CSS variables |
|
||||
| ❌ jQuery atau manipulasi DOM manual | Gunakan React state |
|
||||
| ❌ `console.log` di production code | Hapus sebelum commit |
|
||||
|
||||
---
|
||||
|
||||
## 11. Aksesibilitas (Minimum Requirements)
|
||||
|
||||
- Semua tombol punya `aria-label` jika tidak ada teks
|
||||
- Semua form field punya `<label>` yang terhubung
|
||||
- Warna kontras minimum 4.5:1 untuk teks
|
||||
- Keyboard navigable untuk modal (focus trap)
|
||||
|
||||
---
|
||||
|
||||
## 12. Error Handling
|
||||
|
||||
```javascript
|
||||
// Selalu handle edge case
|
||||
const totalDays = trip?.totalDays ?? 0;
|
||||
const activities = schedule[dayIndex]?.activities ?? [];
|
||||
|
||||
// Jangan biarkan crash karena undefined
|
||||
// ❌
|
||||
const name = trip.name.toUpperCase(); // crash jika trip.name null
|
||||
// ✅
|
||||
const name = trip?.name?.toUpperCase() ?? 'Unnamed Trip';
|
||||
```
|
||||
@@ -0,0 +1,353 @@
|
||||
# Phase Workflow Rules — Tour Planner App
|
||||
|
||||
> Aturan ini mengatur bagaimana setiap fitur harus dikerjakan secara berurutan.
|
||||
> AI agent WAJIB mengikuti fase ini dan TIDAK BOLEH melompat fase tanpa alasan yang jelas.
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Prinsip Utama
|
||||
|
||||
1. **Satu fase harus selesai sebelum masuk ke fase berikutnya.**
|
||||
2. **Setiap akhir fase, update `task.md`** untuk mencatat progress.
|
||||
3. **Jangan mulai phase baru jika phase sebelumnya masih ada item `[ ]`.**
|
||||
4. **Validasi output setiap phase sebelum lanjut.**
|
||||
|
||||
---
|
||||
|
||||
## 🗂️ Phase 0 — Project Setup (WAJIB DIKERJAKAN PERTAMA)
|
||||
|
||||
> Fondasi project. Tidak ada komponen atau page yang boleh dibuat sebelum phase ini selesai.
|
||||
|
||||
### Checklist Phase 0
|
||||
- [ ] **0.1** — Inisialisasi Vite + React
|
||||
```bash
|
||||
npm create vite@latest . -- --template react
|
||||
npm install
|
||||
```
|
||||
- [ ] **0.2** — Install semua dependencies sekaligus
|
||||
```bash
|
||||
npm install react-router-dom zustand framer-motion lucide-react recharts @dnd-kit/core @dnd-kit/sortable date-fns
|
||||
```
|
||||
- [ ] **0.3** — Buat `src/index.css` dengan SEMUA CSS variables (lihat skill `ui-design`)
|
||||
- [ ] **0.4** — Buat `src/store/tourStore.js` dengan full Zustand store + persist middleware
|
||||
- [ ] **0.5** — Setup React Router di `src/App.jsx` dengan semua 4 routes
|
||||
- [ ] **0.6** — Buat file data dummy:
|
||||
- `src/data/destinations.js` (min. 10 destinasi)
|
||||
- `src/data/activities.js` (template aktivitas)
|
||||
- `src/data/packingTemplates.js` (template per tipe trip)
|
||||
- [ ] **0.7** — Buat utility functions:
|
||||
- `src/utils/formatCurrency.js`
|
||||
- `src/utils/dateHelpers.js`
|
||||
- `src/utils/helpers.js` (generateId, dll.)
|
||||
|
||||
### Validasi Phase 0
|
||||
- `npm run dev` harus berjalan tanpa error
|
||||
- Route `/`, `/schedule`, `/packing`, `/budget` harus bisa diakses
|
||||
- Zustand store harus bisa di-import dari semua page
|
||||
- CSS variables harus aktif (cek di browser DevTools)
|
||||
|
||||
---
|
||||
|
||||
## 🧱 Phase 1 — Layout & UI Components
|
||||
|
||||
> Membangun blok bangunan dasar yang akan dipakai semua page.
|
||||
> Jangan buat page dulu sebelum komponen UI dasar selesai.
|
||||
|
||||
### Checklist Phase 1
|
||||
|
||||
#### 1A — Layout Components
|
||||
- [ ] **1A.1** — `src/components/layout/Navbar.jsx`
|
||||
- Logo + nama app
|
||||
- Link navigasi ke 4 halaman
|
||||
- Indikator halaman aktif
|
||||
- Responsif (hamburger menu di mobile)
|
||||
- [ ] **1A.2** — `src/components/layout/PageWrapper.jsx`
|
||||
- Wrapper umum untuk semua page
|
||||
- Padding, max-width, fade-in animation
|
||||
|
||||
#### 1B — UI Components Dasar
|
||||
- [ ] **1B.1** — `src/components/ui/Button.jsx`
|
||||
- Props: `variant` (primary/secondary/ghost/danger), `size` (sm/md/lg), `icon`, `loading`, `disabled`
|
||||
- [ ] **1B.2** — `src/components/ui/Card.jsx`
|
||||
- Props: `glassmorphism`, `hoverable`, `onClick`
|
||||
- [ ] **1B.3** — `src/components/ui/Modal.jsx`
|
||||
- Props: `isOpen`, `onClose`, `title`
|
||||
- Focus trap, backdrop click close, escape key
|
||||
- Framer Motion animation (scalePop)
|
||||
- [ ] **1B.4** — `src/components/ui/Badge.jsx`
|
||||
- Props: `variant` (primary/success/warning/danger)
|
||||
- [ ] **1B.5** — `src/components/ui/ProgressBar.jsx`
|
||||
- Props: `value` (0-100), `label`, `showPercent`, `color`
|
||||
- Animated fill dengan Framer Motion
|
||||
- [ ] **1B.6** — `src/components/ui/EmptyState.jsx`
|
||||
- Tampil saat list kosong, dengan ilustrasi dan CTA
|
||||
|
||||
### Validasi Phase 1
|
||||
- Semua komponen bisa di-render tanpa crash
|
||||
- Tidak ada hardcode warna (semua pakai CSS variables)
|
||||
- Modal bisa dibuka dan ditutup dengan keyboard (Escape)
|
||||
- Navbar menampilkan halaman aktif dengan benar
|
||||
|
||||
---
|
||||
|
||||
## 🏠 Phase 2 — Home Page (Trip Selection)
|
||||
|
||||
> Feature pertama. Harus selesai sebelum page lain karena trip yang dipilih
|
||||
> menentukan data yang dipakai di semua page lainnya.
|
||||
|
||||
### Checklist Phase 2
|
||||
|
||||
#### 2A — Hero Section
|
||||
- [ ] **2A.1** — Hero dengan background gradient + animated particles atau subtle pattern
|
||||
- [ ] **2A.2** — Headline besar dengan `Playfair Display` font
|
||||
- [ ] **2A.3** — Subtitle dan CTA button "Mulai Rencanakan"
|
||||
- [ ] **2A.4** — Search bar dengan placeholder animasi
|
||||
|
||||
#### 2B — Filter & Grid Destinasi
|
||||
- [ ] **2B.1** — `FilterBar.jsx` — filter pills: Semua / Pantai / Gunung / Kota / Budaya
|
||||
- [ ] **2B.2** — `TripCard.jsx` — card dengan:
|
||||
- Gambar destinasi (16:9 ratio)
|
||||
- Nama, negara, rating
|
||||
- Estimasi budget range
|
||||
- Durasi populer
|
||||
- Tags/badge kategori
|
||||
- Hover effect (scale + overlay)
|
||||
- [ ] **2B.3** — Grid responsif 4→3→2→1 kolom
|
||||
- [ ] **2B.4** — Animasi stagger pada grid item
|
||||
|
||||
#### 2C — Trip Configuration Modal
|
||||
- [ ] **2C.1** — Modal terbuka saat klik TripCard
|
||||
- [ ] **2C.2** — Form: Nama Trip, Tanggal Mulai, Tanggal Selesai
|
||||
- [ ] **2C.3** — Auto-hitung total hari dari range tanggal
|
||||
- [ ] **2C.4** — Tombol "Buat Trip Kustom" (tanpa pilih destinasi preset)
|
||||
- [ ] **2C.5** — Konfirmasi → update Zustand store → redirect ke `/schedule`
|
||||
|
||||
### Validasi Phase 2
|
||||
- Semua destinasi tampil di grid
|
||||
- Filter berfungsi (klik kategori → grid berubah)
|
||||
- Search berfungsi (filter by name)
|
||||
- Modal terbuka dengan animasi
|
||||
- Setelah konfirmasi, `useTourStore().trip` terisi dengan benar
|
||||
- Data trip tersimpan di localStorage
|
||||
|
||||
---
|
||||
|
||||
## 📅 Phase 3 — Schedule Builder Page
|
||||
|
||||
> Fitur drag & drop. Ini yang paling complex — kerjakan dengan hati-hati.
|
||||
|
||||
### Checklist Phase 3
|
||||
|
||||
#### 3A — Day Navigation
|
||||
- [ ] **3A.1** — `DayTabs.jsx` — tabs untuk setiap hari
|
||||
- Day 1, Day 2, ..., Day N (sesuai `trip.totalDays`)
|
||||
- Tampilkan tanggal di bawah label hari
|
||||
- Active state yang jelas
|
||||
- Scrollable jika banyak hari
|
||||
- [ ] **3A.2** — Guard: Jika trip belum dikonfigurasi, tampilkan prompt ke Home
|
||||
|
||||
#### 3B — Timeline View
|
||||
- [ ] **3B.1** — `ScheduleTimeline.jsx` — timeline vertikal
|
||||
- Jam dari 06:00 - 23:00 di sisi kiri
|
||||
- Aktivitas diposisikan sesuai waktu
|
||||
- [ ] **3B.2** — `ActivityItem.jsx` — satu item:
|
||||
- Warna berdasarkan kategori
|
||||
- Waktu, nama, lokasi, durasi
|
||||
- Drag handle (ikon GripVertical)
|
||||
- Tombol edit & hapus
|
||||
- [ ] **3B.3** — Placeholder "Belum ada aktivitas" dengan CTA tambah
|
||||
|
||||
#### 3C — Add/Edit Activity
|
||||
- [ ] **3C.1** — `AddActivityModal.jsx` — form:
|
||||
- Time picker (HH:MM)
|
||||
- Nama aktivitas
|
||||
- Lokasi
|
||||
- Durasi (menit)
|
||||
- Kategori (dropdown/pills)
|
||||
- Catatan (textarea)
|
||||
- [ ] **3C.2** — Template aktivitas cepat (chip/button, klik → auto-isi form)
|
||||
- [ ] **3C.3** — Edit mode: modal ter-preisi dengan data yang ada
|
||||
|
||||
#### 3D — Drag & Drop
|
||||
- [ ] **3D.1** — Sortable dalam satu hari (reorder aktivitas)
|
||||
- [ ] **3D.2** — Update state setelah drag selesai
|
||||
- [ ] **3D.3** — Visual feedback saat dragging (opacity, scale)
|
||||
|
||||
### Validasi Phase 3
|
||||
- Tabs menampilkan jumlah hari yang benar sesuai trip
|
||||
- Tambah aktivitas → muncul di timeline
|
||||
- Hapus aktivitas → hilang dari timeline
|
||||
- Drag & drop mengubah urutan dan tersimpan
|
||||
- Data persist setelah refresh browser
|
||||
|
||||
---
|
||||
|
||||
## 🎒 Phase 4 — Packing List Page
|
||||
|
||||
> Fitur yang relatif straightforward. Fokus pada UX checklist yang satisfying.
|
||||
|
||||
### Checklist Phase 4
|
||||
|
||||
#### 4A — Overview & Progress
|
||||
- [ ] **4A.1** — `PackingOverview.jsx`:
|
||||
- Total item / item yang sudah dipak
|
||||
- ProgressBar keseluruhan (animated)
|
||||
- Badge status: "Belum dimulai" / "Sedang dikemas" / "Siap Berangkat!"
|
||||
- [ ] **4A.2** — Tombol "Load Template" berdasarkan tipe trip
|
||||
|
||||
#### 4B — Kategori & Item
|
||||
- [ ] **4B.1** — `PackingCategory.jsx`:
|
||||
- Header kategori dengan icon dan jumlah item
|
||||
- Collapsible (klik header → expand/collapse)
|
||||
- Progress mini per kategori
|
||||
- [ ] **4B.2** — `PackingItem.jsx`:
|
||||
- Checkbox dengan animasi checkmark (Framer Motion)
|
||||
- Nama item (strikethrough jika checked)
|
||||
- Quantity counter (- / angka / +)
|
||||
- Tombol hapus
|
||||
- [ ] **4B.3** — Inline add item per kategori (input + tombol "+")
|
||||
|
||||
#### 4C — Interaksi & UX
|
||||
- [ ] **4C.1** — "Check All" / "Uncheck All" per kategori
|
||||
- [ ] **4C.2** — Sort: unchecked items tampil di atas
|
||||
- [ ] **4C.3** — Animasi item saat di-check (smooth height collapse jika sorted)
|
||||
- [ ] **4C.4** — Konfetti/celebrasi kecil saat 100% selesai
|
||||
|
||||
### Validasi Phase 4
|
||||
- Load template mengisi item sesuai tipe trip
|
||||
- Checkbox berfungsi dan tersimpan di localStorage
|
||||
- Progress bar update real-time saat item di-check
|
||||
- Tambah item baru muncul di kategori yang tepat
|
||||
- Quantity counter mengubah nilai dengan benar
|
||||
|
||||
---
|
||||
|
||||
## 💰 Phase 5 — Budget Calculator Page
|
||||
|
||||
> Fitur terakhir. Fokus pada visual chart dan feedback yang jelas.
|
||||
|
||||
### Checklist Phase 5
|
||||
|
||||
#### 5A — Budget Overview Header
|
||||
- [ ] **5A.1** — Input total budget (editable, format IDR)
|
||||
- [ ] **5A.2** — 3 stat card: Total Budget / Total Terpakai / Sisa
|
||||
- Warna Sisa: hijau (cukup), kuning (hampir habis), merah (over)
|
||||
- [ ] **5A.3** — Progress bar: % budget terpakai
|
||||
- [ ] **5A.4** — Warning banner jika over budget
|
||||
|
||||
#### 5B — Chart Visualisasi
|
||||
- [ ] **5B.1** — `PieChart` — distribusi per kategori (Recharts)
|
||||
- Custom tooltip dengan format IDR
|
||||
- Legend dengan warna kategori
|
||||
- [ ] **5B.2** — `BarChart` — pengeluaran per hari (Recharts)
|
||||
- X axis: hari ke-N
|
||||
- Y axis: jumlah IDR
|
||||
|
||||
#### 5C — Expense Management
|
||||
- [ ] **5C.1** — List semua pengeluaran (grouped by kategori)
|
||||
- [ ] **5C.2** — `AddExpenseModal.jsx`:
|
||||
- Nama pengeluaran
|
||||
- Jumlah (IDR)
|
||||
- Kategori
|
||||
- Hari (dropdown: Hari 1, Hari 2, ... atau "Umum")
|
||||
- Catatan
|
||||
- [ ] **5C.3** — Edit & hapus pengeluaran
|
||||
- [ ] **5C.4** — Currency toggle (IDR / USD / EUR) dengan konversi sederhana
|
||||
|
||||
### Validasi Phase 5
|
||||
- Tambah expense → stat card dan chart update real-time
|
||||
- Over budget → warning tampil dengan warna merah
|
||||
- Pie chart menampilkan semua kategori dengan warna yang benar
|
||||
- Bar chart menampilkan per-hari dengan benar
|
||||
- Data tersimpan setelah refresh
|
||||
|
||||
---
|
||||
|
||||
## ✨ Phase 6 — Polish & Optimization (FASE TERAKHIR)
|
||||
|
||||
> Hanya dikerjakan setelah Phase 2-5 semuanya selesai dan tervalidasi.
|
||||
|
||||
### Checklist Phase 6
|
||||
|
||||
#### 6A — Animasi & Transisi
|
||||
- [ ] **6A.1** — Page transition (fade antar route)
|
||||
- [ ] **6A.2** — Scroll-triggered animations (IntersectionObserver via Framer Motion)
|
||||
- [ ] **6A.3** — Loading states yang smooth
|
||||
- [ ] **6A.4** — Hover dan tap feedback di semua elemen interaktif
|
||||
|
||||
#### 6B — Responsive Design Audit
|
||||
- [ ] **6B.1** — Test di 320px (iPhone SE)
|
||||
- [ ] **6B.2** — Test di 768px (tablet)
|
||||
- [ ] **6B.3** — Test di 1280px (desktop)
|
||||
- [ ] **6B.4** — Navbar collapse ke hamburger di mobile
|
||||
|
||||
#### 6C — UX Improvement
|
||||
- [ ] **6C.1** — Toast notification (sukses tambah item, hapus, dll.)
|
||||
- [ ] **6C.2** — Konfirmasi sebelum hapus item penting
|
||||
- [ ] **6C.3** — Empty states yang informatif di semua halaman
|
||||
- [ ] **6C.4** — Tombol "Reset Trip" dengan konfirmasi
|
||||
|
||||
#### 6D — Code Quality
|
||||
- [ ] **6D.1** — Hapus semua `console.log`
|
||||
- [ ] **6D.2** — Pastikan tidak ada prop drilling lebih dari 2 level
|
||||
- [ ] **6D.3** — Cek semua edge case (trip belum dibuat, schedule kosong, dll.)
|
||||
|
||||
### Validasi Phase 6
|
||||
- Aplikasi berjalan mulus di semua ukuran layar
|
||||
- Tidak ada error di console browser
|
||||
- localStorage berfungsi: data tetap ada setelah refresh
|
||||
- Semua animasi smooth (tidak ada jank/lag)
|
||||
|
||||
---
|
||||
|
||||
## 📋 Template Update task.md per Phase
|
||||
|
||||
Saat memulai pengerjaan, buat file `task.md` dengan format ini:
|
||||
|
||||
```markdown
|
||||
# Task Progress — Tour Planner App
|
||||
|
||||
## Phase 0 — Setup [DONE/IN PROGRESS/TODO]
|
||||
- [x] 0.1 Init Vite
|
||||
- [x] 0.2 Install dependencies
|
||||
...
|
||||
|
||||
## Phase 1 — Layout & UI [TODO]
|
||||
- [ ] 1A.1 Navbar
|
||||
...
|
||||
|
||||
## Phase 2 — Home Page [TODO]
|
||||
...
|
||||
```
|
||||
|
||||
**Update status item:**
|
||||
- `[ ]` → belum dikerjakan
|
||||
- `[/]` → sedang dikerjakan
|
||||
- `[x]` → selesai dan tervalidasi
|
||||
|
||||
---
|
||||
|
||||
## 🚦 Decision Tree untuk Agent Baru
|
||||
|
||||
```
|
||||
Masuk ke project
|
||||
│
|
||||
▼
|
||||
Baca AGENTS.md + task.md
|
||||
│
|
||||
▼
|
||||
Phase 0 selesai? ──NO──→ Kerjakan Phase 0 dulu
|
||||
│
|
||||
YES
|
||||
│
|
||||
▼
|
||||
Phase 1 selesai? ──NO──→ Kerjakan Phase 1 dulu
|
||||
│
|
||||
YES
|
||||
│
|
||||
▼
|
||||
Phase mana yang belum selesai? → Kerjakan sesuai urutan (2→3→4→5→6)
|
||||
│
|
||||
▼
|
||||
Semua done? → Lakukan validasi akhir & update walkthrough.md
|
||||
```
|
||||
@@ -0,0 +1,229 @@
|
||||
---
|
||||
name: feature-guide
|
||||
description: Panduan implementasi masing-masing fitur utama Tour Planner App (Trip Selection, Schedule Builder, Packing List, Budget Calculator). Gunakan skill ini saat memulai atau melanjutkan pengerjaan satu halaman/fitur tertentu.
|
||||
---
|
||||
|
||||
# Skill: Feature Guide — Tour Planner App
|
||||
|
||||
## Fitur 1: Trip Selection (Home Page)
|
||||
|
||||
**File:** `src/pages/Home.jsx`
|
||||
|
||||
### Alur User
|
||||
1. User membuka aplikasi → landing di halaman Home
|
||||
2. Bisa search destinasi atau browse dari grid card
|
||||
3. Filter berdasarkan kategori dan budget
|
||||
4. Klik card → modal konfirmasi trip (isi tanggal, nama trip)
|
||||
5. Confirm → redirect ke `/schedule`
|
||||
|
||||
### Data yang Diperlukan
|
||||
```javascript
|
||||
// src/data/destinations.js
|
||||
export const destinations = [
|
||||
{
|
||||
id: 'bali-001',
|
||||
name: 'Bali',
|
||||
country: 'Indonesia',
|
||||
category: 'pantai', // 'pantai' | 'gunung' | 'kota' | 'budaya'
|
||||
description: 'Surga tropis...',
|
||||
highlights: ['Tanah Lot', 'Ubud', 'Kuta Beach'],
|
||||
estimatedBudget: { min: 2000000, max: 5000000 },
|
||||
popularDuration: 4, // hari
|
||||
rating: 4.8,
|
||||
reviewCount: 12400,
|
||||
image: '/assets/bali.jpg', // atau URL picsum
|
||||
tags: ['romantis', 'budaya', 'alam'],
|
||||
bestTime: 'April - Oktober',
|
||||
},
|
||||
// minimal 10 destinasi
|
||||
];
|
||||
```
|
||||
|
||||
### State yang Diupdate
|
||||
```javascript
|
||||
setTrip({
|
||||
id: destination.id,
|
||||
name: tripName, // input user
|
||||
destination: destination.name,
|
||||
startDate: startDate, // dari date picker
|
||||
endDate: endDate,
|
||||
totalDays: diffInDays(startDate, endDate) + 1,
|
||||
coverImage: destination.image,
|
||||
type: 'preset',
|
||||
category: destination.category,
|
||||
});
|
||||
initSchedule(totalDays, startDate); // inisialisasi array schedule
|
||||
```
|
||||
|
||||
### Komponen yang Dibutuhkan
|
||||
- `TripCard.jsx` — card destinasi dengan image, info, hover effect
|
||||
- `TripSelector.jsx` — modal form input tanggal & nama trip
|
||||
- `SearchBar.jsx` — search dengan debounce
|
||||
- `FilterBar.jsx` — filter kategori (pills/tabs)
|
||||
|
||||
---
|
||||
|
||||
## Fitur 2: Daily Schedule Builder (Schedule Page)
|
||||
|
||||
**File:** `src/pages/Schedule.jsx`
|
||||
|
||||
### Alur User
|
||||
1. User masuk ke `/schedule`
|
||||
2. Melihat tab per hari (Day 1, Day 2, ...)
|
||||
3. Klik "+ Tambah Aktivitas" → modal form
|
||||
4. Aktivitas ditampilkan di timeline vertikal
|
||||
5. Bisa drag & drop untuk reorder
|
||||
|
||||
### Komponen yang Dibutuhkan
|
||||
- `DayTabs.jsx` — tab navigasi per hari
|
||||
- `ScheduleTimeline.jsx` — timeline visual
|
||||
- `ActivityItem.jsx` — satu item aktivitas (draggable)
|
||||
- `AddActivityModal.jsx` — form tambah/edit aktivitas
|
||||
|
||||
### Implementasi Drag & Drop
|
||||
```jsx
|
||||
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
|
||||
import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
|
||||
import { useSortable } from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
|
||||
// Di ActivityItem — tambahkan useSortable
|
||||
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: activity.id });
|
||||
const style = { transform: CSS.Transform.toString(transform), transition };
|
||||
|
||||
// Di ScheduleTimeline — wrap dengan DndContext
|
||||
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
|
||||
<SortableContext items={activityIds} strategy={verticalListSortingStrategy}>
|
||||
{activities.map(a => <ActivityItem key={a.id} activity={a} />)}
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
```
|
||||
|
||||
### Template Aktivitas Cepat
|
||||
```javascript
|
||||
// src/data/activities.js
|
||||
export const activityTemplates = [
|
||||
{ name: 'Sarapan', category: 'makan', duration: 60, defaultTime: '07:00' },
|
||||
{ name: 'Check-in Hotel', category: 'check-in', duration: 30, defaultTime: '14:00' },
|
||||
{ name: 'Makan Siang', category: 'makan', duration: 60, defaultTime: '12:00' },
|
||||
{ name: 'Makan Malam', category: 'makan', duration: 90, defaultTime: '18:30' },
|
||||
{ name: 'Kunjungan Wisata', category: 'wisata', duration: 120, defaultTime: '10:00' },
|
||||
{ name: 'Belanja Oleh-oleh', category: 'lainnya', duration: 60, defaultTime: '16:00' },
|
||||
{ name: 'Berangkat/Transportasi', category: 'transportasi', duration: 180, defaultTime: '06:00' },
|
||||
];
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Fitur 3: Packing List Manager (PackingList Page)
|
||||
|
||||
**File:** `src/pages/PackingList.jsx`
|
||||
|
||||
### Alur User
|
||||
1. User masuk ke `/packing`
|
||||
2. Melihat daftar per kategori dengan progress
|
||||
3. Centang item yang sudah dipak
|
||||
4. Tambah item baru di kategori tertentu
|
||||
5. Load template sesuai tipe trip
|
||||
|
||||
### Template Packing
|
||||
```javascript
|
||||
// src/data/packingTemplates.js
|
||||
export const packingTemplates = {
|
||||
pantai: {
|
||||
Pakaian: [
|
||||
{ name: 'Baju pantai', qty: 3 },
|
||||
{ name: 'Celana pendek', qty: 2 },
|
||||
{ name: 'Kacamata hitam', qty: 1 },
|
||||
],
|
||||
// ...
|
||||
},
|
||||
gunung: { /* ... */ },
|
||||
kota: { /* ... */ },
|
||||
budaya: { /* ... */ },
|
||||
};
|
||||
```
|
||||
|
||||
### Komponen yang Dibutuhkan
|
||||
- `PackingOverview.jsx` — statistik total item & progress keseluruhan
|
||||
- `PackingCategory.jsx` — section per kategori dengan sub-list
|
||||
- `PackingItem.jsx` — checkbox item + qty counter + delete
|
||||
|
||||
### Logic Progress
|
||||
```javascript
|
||||
const getTotalStats = (packingList) => {
|
||||
let total = 0, checked = 0;
|
||||
Object.values(packingList).forEach(items => {
|
||||
items.forEach(item => {
|
||||
total++;
|
||||
if (item.checked) checked++;
|
||||
});
|
||||
});
|
||||
return { total, checked, percent: total > 0 ? Math.round((checked/total)*100) : 0 };
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Fitur 4: Budget Calculator (Budget Page)
|
||||
|
||||
**File:** `src/pages/Budget.jsx`
|
||||
|
||||
### Alur User
|
||||
1. User masuk ke `/budget`
|
||||
2. Set total budget di bagian atas
|
||||
3. Tambah pengeluaran satu per satu
|
||||
4. Melihat ringkasan dan chart
|
||||
5. Warning merah jika over budget
|
||||
|
||||
### Komponen yang Dibutuhkan
|
||||
- `BudgetHeader.jsx` — input total budget + overview card (total, spent, remaining)
|
||||
- `BudgetChart.jsx` — Recharts PieChart + BarChart
|
||||
- `ExpenseList.jsx` — list semua pengeluaran
|
||||
- `AddExpenseModal.jsx` — form tambah pengeluaran
|
||||
|
||||
### Recharts Integration
|
||||
```jsx
|
||||
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer, BarChart, Bar, XAxis, YAxis } from 'recharts';
|
||||
|
||||
// Data untuk pie chart
|
||||
const pieData = Object.entries(byCategory).map(([name, value]) => ({ name, value }));
|
||||
|
||||
<ResponsiveContainer width="100%" height={240}>
|
||||
<PieChart>
|
||||
<Pie data={pieData} cx="50%" cy="50%" outerRadius={80} dataKey="value">
|
||||
{pieData.map((entry, index) => (
|
||||
<Cell key={index} fill={BUDGET_CATEGORY_COLORS[entry.name]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip formatter={(value) => formatIDR(value)} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
```
|
||||
|
||||
### Format Currency
|
||||
```javascript
|
||||
// src/utils/formatCurrency.js
|
||||
export const formatIDR = (amount) =>
|
||||
new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(amount);
|
||||
|
||||
export const formatUSD = (amount) =>
|
||||
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Navigasi Antar Halaman
|
||||
|
||||
```
|
||||
/ (Home) → pilih trip
|
||||
/schedule → jadwal harian
|
||||
/packing → packing list
|
||||
/budget → kalkulasi budget
|
||||
```
|
||||
|
||||
Navbar harus selalu tampil dan menampilkan:
|
||||
- Logo / nama app
|
||||
- Link ke semua 4 halaman
|
||||
- Indikator halaman aktif
|
||||
- Badge progress (% packing done, budget status)
|
||||
@@ -0,0 +1,160 @@
|
||||
---
|
||||
name: react-component
|
||||
description: Panduan membuat React component untuk Tour Planner App. Gunakan skill ini ketika membuat komponen baru, baik UI umum maupun komponen spesifik fitur (trip, schedule, packing, budget).
|
||||
---
|
||||
|
||||
# Skill: React Component — Tour Planner App
|
||||
|
||||
## Aturan Dasar
|
||||
|
||||
Semua komponen HARUS mengikuti pola berikut:
|
||||
- Functional component dengan arrow function
|
||||
- Props didestruktur di parameter
|
||||
- Menggunakan CSS variables dari design system (lihat `src/index.css`)
|
||||
- Menggunakan Framer Motion untuk animasi
|
||||
- Menggunakan Lucide React untuk icon
|
||||
|
||||
## Template Dasar Komponen
|
||||
|
||||
```jsx
|
||||
import { motion } from 'framer-motion';
|
||||
import { IconName } from 'lucide-react';
|
||||
import styles from './ComponentName.module.css'; // opsional
|
||||
|
||||
const ComponentName = ({ prop1, prop2, onAction }) => {
|
||||
return (
|
||||
<motion.div
|
||||
className="component-name"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{/* content */}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ComponentName;
|
||||
```
|
||||
|
||||
## Komponen UI yang Tersedia
|
||||
|
||||
### Button
|
||||
```jsx
|
||||
<Button variant="primary|secondary|ghost|danger" size="sm|md|lg" icon={IconComponent} onClick={fn}>
|
||||
Label
|
||||
</Button>
|
||||
```
|
||||
|
||||
### Card
|
||||
```jsx
|
||||
<Card glassmorphism hoverable>
|
||||
{/* content */}
|
||||
</Card>
|
||||
```
|
||||
Variants: `glassmorphism` (default), `elevated`, `outlined`
|
||||
|
||||
### Modal
|
||||
```jsx
|
||||
<Modal isOpen={bool} onClose={fn} title="Judul Modal">
|
||||
{/* content */}
|
||||
</Modal>
|
||||
```
|
||||
|
||||
### Badge
|
||||
```jsx
|
||||
<Badge variant="primary|success|warning|danger">{text}</Badge>
|
||||
```
|
||||
|
||||
### ProgressBar
|
||||
```jsx
|
||||
<ProgressBar value={0-100} label="Teks" showPercent />
|
||||
```
|
||||
|
||||
## Animasi Standar
|
||||
|
||||
```javascript
|
||||
// Fade in dari bawah (card, item list)
|
||||
const fadeInUp = {
|
||||
initial: { opacity: 0, y: 20 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: { duration: 0.3 }
|
||||
};
|
||||
|
||||
// Stagger anak-anak (list items)
|
||||
const containerVariants = {
|
||||
animate: { transition: { staggerChildren: 0.08 } }
|
||||
};
|
||||
|
||||
// Scale on hover (interactive card)
|
||||
const hoverScale = {
|
||||
whileHover: { scale: 1.02 },
|
||||
whileTap: { scale: 0.98 }
|
||||
};
|
||||
```
|
||||
|
||||
## CSS Classes Tersedia (dari index.css)
|
||||
|
||||
```
|
||||
.glass — glassmorphism card
|
||||
.glass-dark — glassmorphism gelap
|
||||
.btn-primary — tombol primary
|
||||
.btn-secondary — tombol secondary
|
||||
.btn-ghost — tombol ghost
|
||||
.text-gradient — teks dengan gradient
|
||||
.badge — badge dasar
|
||||
.input-field — input form
|
||||
.section-title — heading section
|
||||
```
|
||||
|
||||
## File Baru Selalu di Folder yang Tepat
|
||||
|
||||
| Tipe | Lokasi |
|
||||
|------|--------|
|
||||
| Layout component | `src/components/layout/` |
|
||||
| UI generic | `src/components/ui/` |
|
||||
| Trip feature | `src/components/trip/` |
|
||||
| Schedule feature | `src/components/schedule/` |
|
||||
| Packing feature | `src/components/packing/` |
|
||||
| Budget feature | `src/components/budget/` |
|
||||
| Full page | `src/pages/` |
|
||||
|
||||
## Contoh: Membuat Activity Item
|
||||
|
||||
```jsx
|
||||
// src/components/schedule/ActivityItem.jsx
|
||||
import { motion } from 'framer-motion';
|
||||
import { Clock, MapPin, GripVertical, Trash2 } from 'lucide-react';
|
||||
|
||||
const ActivityItem = ({ activity, onDelete, dragHandleProps }) => {
|
||||
return (
|
||||
<motion.div
|
||||
className="activity-item"
|
||||
layout
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 20 }}
|
||||
>
|
||||
<div className="activity-drag-handle" {...dragHandleProps}>
|
||||
<GripVertical size={16} />
|
||||
</div>
|
||||
<div className="activity-time">
|
||||
<Clock size={14} />
|
||||
<span>{activity.time}</span>
|
||||
</div>
|
||||
<div className="activity-content">
|
||||
<h4>{activity.name}</h4>
|
||||
<div className="activity-location">
|
||||
<MapPin size={12} />
|
||||
<span>{activity.location}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={() => onDelete(activity.id)}>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityItem;
|
||||
```
|
||||
@@ -0,0 +1,212 @@
|
||||
---
|
||||
name: state-management
|
||||
description: Panduan lengkap penggunaan Zustand store untuk Tour Planner App. Gunakan skill ini ketika membaca, menulis, atau menambahkan state baru ke global store, atau saat membuat custom hooks.
|
||||
---
|
||||
|
||||
# Skill: State Management — Zustand Store
|
||||
|
||||
## Overview
|
||||
|
||||
Aplikasi ini menggunakan Zustand dengan middleware `persist` untuk menyimpan state ke localStorage.
|
||||
File utama: `src/store/tourStore.js`
|
||||
localStorage key: `tour-planner-storage`
|
||||
|
||||
## Full Store Shape
|
||||
|
||||
```javascript
|
||||
{
|
||||
// === TRIP INFO ===
|
||||
trip: {
|
||||
id: null, // string | null
|
||||
name: '', // nama trip user
|
||||
destination: '', // nama destinasi
|
||||
startDate: null, // ISO string
|
||||
endDate: null, // ISO string
|
||||
totalDays: 0, // number
|
||||
coverImage: '', // URL atau path lokal
|
||||
type: 'custom', // 'preset' | 'custom'
|
||||
category: '', // 'pantai' | 'gunung' | 'kota' | 'budaya'
|
||||
},
|
||||
|
||||
// === SCHEDULE ===
|
||||
// Array of days, index = hari ke-N (0-based)
|
||||
schedule: [
|
||||
{
|
||||
dayNumber: 1, // display number
|
||||
date: '', // ISO string
|
||||
activities: [
|
||||
{
|
||||
id: '', // uuid
|
||||
time: '09:00', // HH:mm
|
||||
name: '',
|
||||
location: '',
|
||||
duration: 60, // menit
|
||||
category: '', // 'wisata' | 'makan' | 'transportasi' | 'check-in' | 'lainnya'
|
||||
notes: '',
|
||||
color: '', // CSS color untuk timeline
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
// === PACKING LIST ===
|
||||
packingList: {
|
||||
Pakaian: [
|
||||
{ id: '', name: '', qty: 1, checked: false }
|
||||
],
|
||||
Dokumen: [],
|
||||
Elektronik: [],
|
||||
'Obat-obatan': [],
|
||||
Toiletries: [],
|
||||
Lainnya: [],
|
||||
},
|
||||
|
||||
// === BUDGET ===
|
||||
budget: {
|
||||
total: 0, // number (IDR)
|
||||
currency: 'IDR', // 'IDR' | 'USD' | 'EUR'
|
||||
expenses: [
|
||||
{
|
||||
id: '', // uuid
|
||||
name: '',
|
||||
amount: 0,
|
||||
category: '', // 'transportasi' | 'akomodasi' | 'makan' | 'aktivitas' | 'oleh-oleh' | 'lainnya'
|
||||
day: null, // number (hari ke berapa) | null (umum)
|
||||
date: '', // ISO string opsional
|
||||
notes: '',
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Actions API
|
||||
|
||||
```javascript
|
||||
const {
|
||||
// Trip actions
|
||||
setTrip, // (tripData: Partial<trip>) => void
|
||||
resetTrip, // () => void
|
||||
|
||||
// Schedule actions
|
||||
initSchedule, // (totalDays: number, startDate: string) => void
|
||||
addActivity, // (dayIndex: number, activity: Activity) => void
|
||||
updateActivity, // (dayIndex: number, activityId: string, data: Partial<Activity>) => void
|
||||
removeActivity, // (dayIndex: number, activityId: string) => void
|
||||
reorderActivities,// (dayIndex: number, oldIndex: number, newIndex: number) => void
|
||||
moveActivity, // (fromDay: number, toDay: number, activityId: string) => void
|
||||
|
||||
// Packing actions
|
||||
addPackingItem, // (category: string, item: PackingItem) => void
|
||||
updatePackingItem,// (category: string, id: string, data: Partial<PackingItem>) => void
|
||||
togglePackingItem,// (category: string, id: string) => void
|
||||
removePackingItem,// (category: string, id: string) => void
|
||||
loadPackingTemplate, // (tripType: string) => void
|
||||
|
||||
// Budget actions
|
||||
setTotalBudget, // (amount: number) => void
|
||||
addExpense, // (expense: Expense) => void
|
||||
updateExpense, // (id: string, data: Partial<Expense>) => void
|
||||
removeExpense, // (id: string) => void
|
||||
|
||||
// Global
|
||||
resetAll, // () => void — reset semua state
|
||||
|
||||
} = useTourStore();
|
||||
```
|
||||
|
||||
## Custom Hooks
|
||||
|
||||
Gunakan custom hooks untuk encapsulate logic:
|
||||
|
||||
### useTripStore.js
|
||||
```javascript
|
||||
import { useTourStore } from '../store/tourStore';
|
||||
|
||||
export const useTripStore = () => {
|
||||
const { trip, setTrip, resetTrip } = useTourStore();
|
||||
|
||||
const updateTrip = (data) => setTrip({ ...trip, ...data });
|
||||
const isConfigured = trip.id !== null;
|
||||
|
||||
return { trip, updateTrip, resetTrip, isConfigured };
|
||||
};
|
||||
```
|
||||
|
||||
### useSchedule.js
|
||||
```javascript
|
||||
import { useTourStore } from '../store/tourStore';
|
||||
|
||||
export const useSchedule = (dayIndex) => {
|
||||
const { schedule, addActivity, removeActivity, reorderActivities } = useTourStore();
|
||||
|
||||
const day = schedule[dayIndex];
|
||||
const activities = day?.activities ?? [];
|
||||
const sortedActivities = [...activities].sort((a, b) => a.time.localeCompare(b.time));
|
||||
|
||||
return { day, activities: sortedActivities, addActivity: (a) => addActivity(dayIndex, a), removeActivity: (id) => removeActivity(dayIndex, id) };
|
||||
};
|
||||
```
|
||||
|
||||
### useBudget.js
|
||||
```javascript
|
||||
import { useTourStore } from '../store/tourStore';
|
||||
|
||||
export const useBudget = () => {
|
||||
const { budget, setTotalBudget, addExpense, removeExpense } = useTourStore();
|
||||
|
||||
const totalSpent = budget.expenses.reduce((sum, e) => sum + e.amount, 0);
|
||||
const remaining = budget.total - totalSpent;
|
||||
const isOverBudget = remaining < 0;
|
||||
const percentUsed = budget.total > 0 ? (totalSpent / budget.total) * 100 : 0;
|
||||
|
||||
const byCategory = budget.expenses.reduce((acc, e) => {
|
||||
acc[e.category] = (acc[e.category] || 0) + e.amount;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return { budget, totalSpent, remaining, isOverBudget, percentUsed, byCategory, setTotalBudget, addExpense, removeExpense };
|
||||
};
|
||||
```
|
||||
|
||||
## Cara Membuat UUID
|
||||
|
||||
```javascript
|
||||
// Di utils/helpers.js
|
||||
export const generateId = () => crypto.randomUUID();
|
||||
```
|
||||
|
||||
## Contoh Penggunaan di Komponen
|
||||
|
||||
```jsx
|
||||
import { useTourStore } from '../store/tourStore';
|
||||
|
||||
const SchedulePage = () => {
|
||||
const { schedule, addActivity } = useTourStore();
|
||||
|
||||
const handleAddActivity = (dayIndex, activityData) => {
|
||||
addActivity(dayIndex, {
|
||||
id: crypto.randomUUID(),
|
||||
...activityData
|
||||
});
|
||||
};
|
||||
|
||||
return ( /* ... */ );
|
||||
};
|
||||
```
|
||||
|
||||
## Penting: Jangan Mutasi State Langsung
|
||||
|
||||
```javascript
|
||||
// ❌ SALAH
|
||||
state.schedule[0].activities.push(newActivity);
|
||||
|
||||
// ✅ BENAR (dalam store action)
|
||||
set(state => ({
|
||||
schedule: state.schedule.map((day, i) =>
|
||||
i === dayIndex
|
||||
? { ...day, activities: [...day.activities, newActivity] }
|
||||
: day
|
||||
)
|
||||
}));
|
||||
```
|
||||
@@ -0,0 +1,268 @@
|
||||
---
|
||||
name: ui-design
|
||||
description: Panduan design system, CSS variables, layout, dan visual styling untuk Tour Planner App. Gunakan skill ini ketika menulis CSS, membangun layout, atau memastikan konsistensi visual antar halaman.
|
||||
---
|
||||
|
||||
# Skill: UI Design — Tour Planner App
|
||||
|
||||
## Design System Lengkap
|
||||
|
||||
Semua token harus didefinisikan di `src/index.css` di dalam `:root`.
|
||||
|
||||
```css
|
||||
/* === src/index.css === */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-primary: hsl(220, 90%, 56%);
|
||||
--color-primary-dark: hsl(220, 90%, 42%);
|
||||
--color-primary-light: hsl(220, 90%, 70%);
|
||||
--color-primary-glow: hsl(220, 90%, 56%, 0.3);
|
||||
|
||||
--color-accent: hsl(38, 95%, 55%);
|
||||
--color-accent-dark: hsl(38, 95%, 40%);
|
||||
--color-accent-light: hsl(38, 95%, 70%);
|
||||
|
||||
--color-bg-base: hsl(222, 28%, 8%);
|
||||
--color-bg-surface: hsl(222, 22%, 13%);
|
||||
--color-bg-elevated: hsl(222, 18%, 18%);
|
||||
--color-bg-overlay: hsla(222, 28%, 5%, 0.8);
|
||||
|
||||
--color-text-primary: hsl(210, 40%, 96%);
|
||||
--color-text-secondary: hsl(210, 20%, 65%);
|
||||
--color-text-muted: hsl(210, 15%, 45%);
|
||||
|
||||
--color-border: hsl(220, 15%, 22%);
|
||||
--color-border-light: hsl(220, 15%, 28%);
|
||||
|
||||
--color-success: hsl(142, 70%, 45%);
|
||||
--color-success-bg: hsl(142, 70%, 45%, 0.15);
|
||||
--color-warning: hsl(38, 95%, 55%);
|
||||
--color-warning-bg: hsl(38, 95%, 55%, 0.15);
|
||||
--color-danger: hsl(0, 75%, 55%);
|
||||
--color-danger-bg: hsl(0, 75%, 55%, 0.15);
|
||||
|
||||
/* Typography */
|
||||
--font-body: 'Inter', -apple-system, sans-serif;
|
||||
--font-display: 'Outfit', sans-serif;
|
||||
--font-hero: 'Playfair Display', serif;
|
||||
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: 1.25rem;
|
||||
--text-2xl: 1.5rem;
|
||||
--text-3xl: 1.875rem;
|
||||
--text-4xl: 2.25rem;
|
||||
--text-5xl: 3rem;
|
||||
|
||||
/* Spacing */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
--space-16: 4rem;
|
||||
--space-20: 5rem;
|
||||
|
||||
/* Border Radius */
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--radius-2xl: 1.5rem;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 3px hsla(0,0%,0%,0.3);
|
||||
--shadow-md: 0 4px 16px hsla(0,0%,0%,0.35);
|
||||
--shadow-lg: 0 8px 32px hsla(0,0%,0%,0.4);
|
||||
--shadow-glow: 0 0 24px var(--color-primary-glow);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* Z-Index */
|
||||
--z-dropdown: 100;
|
||||
--z-modal: 200;
|
||||
--z-toast: 300;
|
||||
--z-tooltip: 400;
|
||||
}
|
||||
```
|
||||
|
||||
## CSS Utility Classes Wajib
|
||||
|
||||
```css
|
||||
/* Base reset */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background-color: var(--color-bg-base);
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Glassmorphism */
|
||||
.glass {
|
||||
background: hsla(222, 22%, 18%, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Layout container */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-4);
|
||||
}
|
||||
|
||||
/* Grid layouts */
|
||||
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
|
||||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
|
||||
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
|
||||
|
||||
/* Responsive grid */
|
||||
@media (max-width: 1024px) {
|
||||
.grid-4 { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid-3 { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
|
||||
}
|
||||
```
|
||||
|
||||
## Pola Layout Halaman
|
||||
|
||||
```jsx
|
||||
// Setiap page menggunakan struktur ini:
|
||||
<div className="page-wrapper">
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Judul</h1>
|
||||
<p className="page-subtitle">Deskripsi</p>
|
||||
</div>
|
||||
<div className="page-content">
|
||||
{/* konten */}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Komponen Hero (Home Page)
|
||||
|
||||
```css
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 50%, hsl(220, 90%, 20%, 0.4) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 80% 20%, hsl(38, 95%, 20%, 0.3) 0%, transparent 60%),
|
||||
var(--color-bg-base);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,..."); /* subtle grid pattern */
|
||||
opacity: 0.03;
|
||||
}
|
||||
```
|
||||
|
||||
## Warna Kategori Aktivitas
|
||||
|
||||
```javascript
|
||||
export const CATEGORY_COLORS = {
|
||||
wisata: 'hsl(220, 90%, 56%)',
|
||||
makan: 'hsl(142, 70%, 45%)',
|
||||
transportasi: 'hsl(280, 70%, 60%)',
|
||||
'check-in': 'hsl(38, 95%, 55%)',
|
||||
lainnya: 'hsl(210, 20%, 55%)',
|
||||
};
|
||||
```
|
||||
|
||||
## Warna Kategori Budget
|
||||
|
||||
```javascript
|
||||
export const BUDGET_CATEGORY_COLORS = {
|
||||
transportasi: '#4f8ef7',
|
||||
akomodasi: '#a78bfa',
|
||||
makan: '#34d399',
|
||||
aktivitas: '#fbbf24',
|
||||
'oleh-oleh': '#f87171',
|
||||
lainnya: '#94a3b8',
|
||||
};
|
||||
```
|
||||
|
||||
## Breakpoints
|
||||
|
||||
```css
|
||||
/* Mobile first */
|
||||
/* xs: 0+ (default) */
|
||||
/* sm: 640+ */
|
||||
@media (min-width: 640px) { }
|
||||
/* md: 768+ */
|
||||
@media (min-width: 768px) { }
|
||||
/* lg: 1024+ */
|
||||
@media (min-width: 1024px) { }
|
||||
/* xl: 1280+ */
|
||||
@media (min-width: 1280px) { }
|
||||
```
|
||||
|
||||
## Animasi Framer Motion Standar
|
||||
|
||||
```javascript
|
||||
// Import di setiap komponen yang butuh animasi
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
// Fade in dari bawah (item list, card)
|
||||
export const fadeInUp = {
|
||||
initial: { opacity: 0, y: 24 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
exit: { opacity: 0, y: -12 },
|
||||
transition: { duration: 0.3 }
|
||||
};
|
||||
|
||||
// Stagger container
|
||||
export const staggerContainer = {
|
||||
animate: {
|
||||
transition: { staggerChildren: 0.08, delayChildren: 0.1 }
|
||||
}
|
||||
};
|
||||
|
||||
// Scale pop (modal, tooltip)
|
||||
export const scalePop = {
|
||||
initial: { opacity: 0, scale: 0.92 },
|
||||
animate: { opacity: 1, scale: 1 },
|
||||
exit: { opacity: 0, scale: 0.92 },
|
||||
transition: { type: 'spring', stiffness: 300, damping: 24 }
|
||||
};
|
||||
|
||||
// Slide in dari kiri (sidebar)
|
||||
export const slideInLeft = {
|
||||
initial: { x: -300, opacity: 0 },
|
||||
animate: { x: 0, opacity: 1 },
|
||||
exit: { x: -300, opacity: 0 },
|
||||
transition: { type: 'spring', stiffness: 260, damping: 28 }
|
||||
};
|
||||
```
|
||||
Reference in New Issue
Block a user