feat(juragankos-app): scaffold chatbot app with Vite + Tailwind + shadcn/ui + router\n\n- Add chat-focused UI with glass effect\n- Add admin login and dashboard pages\n- Configure Tailwind + shadcn, lucide icons\n- Add routing and simple auth stub\n- Include CODEX.md project context

juragankos-app/CODEX.md

@@ -0,0 +1,77 @@
+# 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.