# CODEX Context

Ringkasan konteks kerja untuk meneruskan pengembangan aplikasi chatbot pengusaha kos.

## Ringkasan Proyek
- Tujuan: Aplikasi chatbot untuk pengusaha kos-kosan.
- Fokus utama: Antarmuka chat sebagai halaman utama, login admin, dan dashboard analitik performa chatbot.

## Stack & Tools
- Frontend: React 18 + TypeScript (Vite).
- Styling: Tailwind CSS + shadcn/ui (preset CSS vars + utilities) + tailwindcss-animate.
- Ikon: lucide-react.
- Routing: react-router-dom.

## Struktur Halaman & Routing
- `/` → Chat (UI percakapan + input pesan, respons asisten masih disimulasikan).
- `/admin/login` → Halaman login admin (stub login di sisi klien).
- `/admin/dashboard` → Dashboard analitik sederhana (KPI dummy + daftar percakapan terbaru).

Router didefinisikan di `src/main.tsx` dengan `createBrowserRouter`, layout root di `src/App.tsx` dan `Outlet` untuk konten halaman.

## UI Kit & Styling (shadcn/ui)
- Tailwind dikonfigurasi untuk shadcn: `darkMode: ['class']`, warna via CSS variables, radius, dan animasi accordion.
- File penting:
  - `tailwind.config.js` (termasuk `tailwindcss-animate`).
  - `src/index.css` (layer base + CSS variables tema light/dark shadcn).
  - `components.json` (config shadcn, alias `src/components` dan `src/lib/utils`).
- Helper util: `src/lib/utils.ts` berisi `cn()` (clsx + tailwind-merge).

## Komponen yang Tersedia
- `Button` (`src/components/ui/button.tsx`) – berbasis CVA + Radix Slot, varian: default, destructive, outline, secondary, ghost, link; size: default, sm, lg, icon.
- `Input` (`src/components/ui/input.tsx`).
- `Card` (`src/components/ui/card.tsx`) + `CardHeader`, `CardTitle`, `CardContent`.
- Ikon: gunakan dari `lucide-react`, contoh: `Home`, `Moon`, `Send`, dsb.

## Halaman yang Ada
- `src/pages/Chat.tsx`: daftar pesan, auto scroll, input + tombol kirim, balasan asisten disimulasikan (setTimeout). Siap dihubungkan ke backend (SSE/WebSocket/HTTP stream).
- `src/pages/admin/Login.tsx`: form email/password; menggunakan `services/auth` untuk stub login.
- `src/pages/admin/Dashboard.tsx`: guard sederhana (redirect ke login jika belum auth), KPI dummy dan list percakapan terbaru.

## Auth (sementara)
- `src/services/auth.ts` menyimpan token dummy di `localStorage`. Fungsi: `login`, `logout`, `isAuthenticated`.
- Perlu diganti ke autentikasi riil (JWT/session) dan proteksi route yang lebih kuat.

## Perintah NPM
- `npm run dev` — jalankan Vite dev server.
- `npm run build` — build produksi ke `dist/`.
- `npm run preview` — preview hasil build.

## Berkas Penting
- `index.html` — entry HTML.
- `vite.config.ts` — plugin React.
- `tsconfig.json`, `tsconfig.node.json` — TypeScript config.
- `src/App.tsx` — layout + navigasi (Chat, Dashboard) + placeholder toggle tema.
- `src/main.tsx` — bootstrap React + Router.

## Rencana Lanjutan / TODO
- [ ] Implementasi toggle dark mode (persist di `localStorage`, set class `dark` di `document.documentElement`).
- [ ] Integrasi backend chat (SSE/WebSocket/HTTP) + streaming token respons.
- [ ] Ganti stub auth dengan API riil (JWT/refresh) + guard router (loader/ProtectedRoute).
- [ ] Dashboard analitik: metrik nyata (total percakapan, CSAT, latency), grafik (mis. Recharts), filter rentang waktu.
- [ ] Persistensi percakapan (riwayat, metadata: intent, kepuasan, sumber lead).
- [ ] A11y chat: roles/aria proper, fokus kembali ke input setelah kirim, shortcut keyboard.
- [ ] ESLint + Prettier + Vitest sesuai pedoman repo; tambahkan test dasar untuk komponen UI dan routing.
- [ ] ENV config (`.env.local`) untuk URL API (`VITE_API_URL`) dan kunci lain (tanpa commit rahasia).

## Catatan Implementasi
- Tema mengikuti shadcn: gunakan kelas Tailwind yang merujuk CSS variables (`bg-background`, `text-foreground`, dll.).
- Animasi: `tailwindcss-animate` sudah aktif; siap untuk komponen seperti Accordion/Dialog apabila ditambahkan.
- Navigasi header ada di `src/App.tsx` (link ke Chat dan Dashboard), tombol tema placeholder.

## Cara Menjalankan
1. `npm install`
2. `npm run dev` (development) atau `npm run build && npm run preview` (produksi lokal).

---
Jika Anda ingin saya melanjutkan, prioritas disarankan: dark mode toggle → integrasi alur chat ke backend (streaming) → auth riil → dashboard metrik & grafik → testing & linting.