78 lines
4.2 KiB
Markdown
78 lines
4.2 KiB
Markdown
|
# 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.
|