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

npm install
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.

4.2 KiB Raw Blame History Unescape Escape