Ứng dụng web quản lý thiết bị / nhân sự và nghiệp vụ nội bộ: Trang chủ, Hệ thống (nhân viên, phòng ban, chức vụ, thông tin công ty, phân quyền, …), Hồ sơ. Giao diện tiếng Việt, dark mode; tông màu chủ đạo chọn trong menu người dùng (avatar).
- Frontend: React (Vite) + TypeScript.
- UI: Tailwind CSS + component nội bộ trong
components/ui/(phong cách tương tự shadcn, không cài registry shadcn/Radix để giữ kiểm soát bundle). - Dữ liệu: TanStack Query (server) + Zustand (client); React Hook Form + Zod.
- Backend: Supabase (PostgreSQL + Auth); mặc định dev có thể dùng mock (
VITE_DATA_SOURCE=mock).
-
Tạo project trên Supabase, lấy URL và anon key.
-
Copy
.env.example→.envvà đặtVITE_SUPABASE_URL,VITE_SUPABASE_ANON_KEY,VITE_DATA_SOURCE=supabase. -
Sinh type TypeScript cho PostgREST (khuyến nghị khi schema ổn định):
npm run types:supabase
(Cần Supabase CLI và project đã
supabase link, hoặc chỉnh script trongpackage.jsondùng--project-id.) -
Bật RLS và policy phù hợp trên các bảng; client chỉ dùng anon key nên policy là lớp bảo vệ chính.
Hiệu năng (đã áp dụng trong code): client Supabase singleton + PKCE; TanStack Query staleTime / gcTime; repository giới hạn số dòng mỗi lần getAll (xem SUPABASE_DEFAULT_MAX_ROWS); select trong service chỉ lấy cột và quan hệ cần thiết. Dev: nút React Query Devtools góc dưới trái.
- Node.js (khuyến nghị LTS)
- Cài đặt phụ thuộc:
npm install
- Chạy máy chủ phát triển:
npm run dev
- Mở trình duyệt theo địa chỉ in ra (thường là
http://localhost:5173).
| Lệnh | Mô tả |
|---|---|
npm run dev |
Chạy dev server (Vite) |
npm run build |
Build production (output trong dist/) |
npm run preview |
Xem bản build (sau khi chạy npm run build) |
npm run test |
Chạy test (Vitest) |
npm run test:watch |
Chạy test ở chế độ watch |
npm run types:supabase |
Sinh lib/supabase/database.types.ts (cần Supabase CLI) |
- Quy ước giao diện (UI Conventions) – Dialog/Drawer, Section, Design system (border radius, button, error message).
- Catalog view types ERP –
VIEW_TYPE_REGISTRY, primitive theo nhóm, táchViewTypeIdvsDataTypeId.
App.tsx– Router, theme, ngôn ngữ, route bảo vệ.components/– Layout, UI dùng chung (Button, Input, Table, …), shared (ConfirmDialog, ErrorState, …).features/he-thong/– Module Hệ thống: nhân viên, phòng ban, chức vụ, thông tin công ty, phân quyền; cấp bậc / chi nhánh chỉ là lookup (hooks + service), không có trang riêng.lib/– Tiện ích,lib/text(chuỗi giao diện), theme, sidebar,lib/query-keys,lib/supabase/.locales/– File JSON / gộp chuỗi (theo cấu hình dự án).pages/– Trang đơn (Home, Login, Profile, …).store/– Zustand (auth, UI, confirm).