Frontend React
Frontend utama pada repo ini adalah aplikasi React 19, TypeScript, dan Vite 6. Router berada di apps/web/src/App.tsx; halaman mencakup dashboard, login, memo, supplier, perusahaan, bank, karyawan, pengaturan, notifikasi, dan profil.
Struktur penting
| Lokasi | Peran |
|---|---|
apps/web/src/App.tsx | Route aplikasi dan provider global |
apps/web/src/pages/ | Halaman utama dan alur pengguna |
apps/web/components/ | Komponen UI, formulir, tabel, dan navigasi |
apps/web/lib/api/ | Axios client dan TanStack Query hooks per domain |
apps/web/lib/auth-context.tsx | Login, restore sesi, logout, dan lock screen |
apps/web/lib/store.ts dan store domain | State klien dengan Zustand |
apps/web/src/globals.css | Token warna dan tema terang/gelap |
apps/web/tests/ | Test browser Playwright |
Jalankan dan build
Dari root repo Bucket/:
npm ci
cp -n apps/web/.env.example apps/web/.env
npm run dev
Vite biasanya membuka http://localhost:5173. Setel VITE_API_URL=http://localhost:8082 untuk backend Go di host. npm run build:web memeriksa TypeScript lalu membuat output di apps/web/dist/.
Autentikasi dan API
apps/web/lib/auth-context.tsx mengirim username dan password ke POST /api/auth/login, lalu mengambil token dari response.data.data.token. Saat aplikasi dibuka kembali, GET /api/auth/me memulihkan sesi. Axios client menambahkan Bearer token dari localStorage dan menangani 401.
Kunci storage utama adalah job-match-auth-token, job-match-auth-user, dan job-match-auth-locked. Gunakan API hooks di apps/web/lib/api/ sebagai jalur utama penambahan integrasi; beberapa halaman dan alur masih perlu divalidasi terhadap backend Go dengan data nyata.
apps/web/mock-server.js adalah server Express untuk pengembangan dan test tertentu. Kontrak endpoint mock tidak selalu sama dengan client saat ini. Sebagai contoh, client login mengirim username, sedangkan route login mock membaca usernameOrEmail; jangan menganggap mode mock siap dipakai tanpa menyelaraskan keduanya.
Frontend lama
Implementasi Vue 2 tersedia di repo saudara ../../Bucket/memo_front/. Vue memakai kontrak login PHP lama dan menyimpan token dengan format berbeda. Dokumentasi ini memakai React sebagai frontend utama; Vue dipertahankan sebagai referensi alur dan tampilan sebelumnya.
Warna situs Docusaurus tetap mengikuti permintaan desain awal dari memo_front: logo teal #00A19D, tombol #41A29D, dan hover #236B67.