## Mô tả chi tiết dự án (Cafe Manage – Menu điện tử + POS/KDS)
Cafe Manage là template hệ thống quản lý quán cafe/nhà hàng theo mô hình “menu điện tử + đặt món tại bàn”, kết hợp POS cho thu ngân và KDS cho bếp/bar. Dự án tập trung vào trải nghiệm UI/UX, responsive mobile, chạy demo nhanh (mock data/localStorage) nhưng vẫn mô phỏng đúng luồng nghiệp vụ thực tế.
### 1) Khách hàng (Customer)
- Menu điện tử responsive (mobile-first)
- Banner/ảnh nổi bật (khuyến mãi, combo, món mới)
- Khu Best Seller / Món mới
- Tìm kiếm món nhanh
- Bộ lọc món ăn (mở bằng modal lọc, gọn gàng)
- Hiển thị trạng thái món: còn/hết
- Hiển thị trạng thái bếp (chuẩn bị/nấu/hoàn thành) theo demo
- AI gợi ý món (mock): gợi ý món liên quan theo món đang xem/tìm kiếm (bán chạy, cùng danh mục, co-occurrence)
- Giỏ hàng
- Tăng/giảm số lượng có xác nhận
- Toast thông báo đặt món thành công (demo)
- Sơ đồ bàn (Table Map)
- Chọn bàn trực tiếp bằng sơ đồ (thay cho QR) – lưu context bàn
- Quét QR bàn (demo) để gắn context bàn
- Gọi nhân viên / dịch vụ tại bàn (modal chung)
- Gọi nhân viên, gọi thêm nước/khăn, yêu cầu thanh toán, báo sự cố…
- Lưu yêu cầu vào localStorage, có lịch sử yêu cầu
- Thanh toán trực tiếp (mock)
- Khách tạo đơn và thanh toán ngay trên hệ thống (không cần gọi nhân viên)
- Hỗ trợ các phương thức demo: tiền mặt / chuyển khoản (VietQR demo) / MoMo / VNPay
- Màn hình Success sau thanh toán: mã đơn, tổng tiền, trạng thái “Đã thanh toán”
- Modal đánh giá sau thanh toán (dùng modal component chung)
- Đặt bàn (Booking)
- Form mobile đẹp, có tùy chọn bàn (hoặc nhà hàng tự sắp chỗ – demo)
- Mock captcha “I’m not a robot” (demo)
- Profile
- Giao diện đẹp, có cập nhật thông tin (mock lưu localStorage)
- Nhân viên có thêm check-in/check-out (demo)
### 2) Admin / Nhân viên
- POS (Point of Sale) cho thu ngân
- Chọn loại đơn: Tại quán / Mang về / Giao hàng
- Tạo đơn, gửi bếp/bar, thanh toán và cập nhật trạng thái
- Responsive mobile cho POS
- Có shortcut “POS Mang về”
- KDS (Kitchen Display System)
- Hiển thị ticket theo khu vực (Bếp/Bar)
- Cập nhật trạng thái món, bump ticket
- Responsive mobile cho KDS
- Quản lý đơn hàng, thanh toán (demo)
- Danh sách đơn, đổi trạng thái, filter
- Payment management (mock list)
- Online delivery (demo)
- Quy trình xác nhận giao hàng nội bộ bằng OTP (assign → pickup → delivered)
- Có trang shipper demo để xác nhận OTP
- Quản lý danh mục (Category Management) + Takeaway/Online delivery pages (demo)
- Quản lý yêu cầu dịch vụ (Service Requests)
- Admin nhận yêu cầu, cập nhật trạng thái NEW/ACK/DONE/CANCELLED
- Dữ liệu lưu localStorage (demo)
- Chấm công nhân viên (Workforce)
- Check-in/check-out, nhật ký chấm công (demo)
- Có route mở thẳng tab chấm công
### 3) Kỹ thuật & demo
- Frontend: React + TypeScript + Vite
- UI: responsive mạnh cho mobile, component dùng chung
- Data demo: mockData + mockApi + localStorage
- Có sẵn routing cho customer/store scope (`/store/:storeSlug/...`) và admin (`/admin/...`)
### Phù hợp cho ai?
- Người muốn mua source template để làm sản phẩm menu điện tử/POS/KDS nhanh
- Dùng demo bán hàng/portfolio, hoặc làm nền để tích hợp backend thật sau này
### Ghi chú
- Bản hiện tại ưu tiên demo UI/flow: dữ liệu và các bước xác minh/thanh toán được mock để chạy ngay, không phụ thuộc Google reCAPTCHA hay cổng thanh toán thật.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
# HƯỚNG DẪN CÀI ĐẶT (Cafe Manage – Menu điện tử + POS/KDS)
## 1) Yêu cầu môi trường
- Node.js: khuyến nghị `>= 18` (khuyên dùng 18/20)
- npm (đi kèm Node)
- Trình duyệt: Chrome/Edge mới nhất
## 2) Cài đặt & chạy local
1. Giải nén source code, mở terminal tại thư mục dự án.
2. Cài dependencies:
```bash
npm install
Chạy dự án:
npm run dev
Mở trình duyệt theo link terminal (thường là http://localhost:5173 )
Các đường dẫn quan trọng
Khách hàng:
/ Trang Home
/menu Thực đơn (có QR bàn + sơ đồ bàn + gọi nhân viên + giỏ hàng)
/booking Đặt bàn (demo + mock captcha)
/checkout Xác nhận đơn & thanh toán
/payment Thanh toán (mock)
/payment/result Kết quả thanh toán + modal đánh giá
/profile Hồ sơ (có cập nhật thông tin – mock)
Admin:
/admin Layout admin
/admin/pos POS thu ngân (tại quán / mang về / giao hàng)
/admin/kds KDS bếp/bar
/admin/orders Quản lý đơn hàng
/admin/service-requests Quản lý yêu cầu dịch vụ tại bàn
/admin/workforce?tab=attendance Chấm công (check-in/check-out)
/shipper Màn hình shipper demo (OTP delivery)
5) Tài khoản demo (nếu có sẵn trong mock)
Dự án dùng mock/localStorage, tùy cấu hình có thể có sẵn user mẫu.
Nếu chưa đăng nhập được: vào pages/Login.tsx / services/mockApi.ts để xem danh sách user mẫu (demo).
Dịch vụ triển khai nếu muốn :
Bao gồm:
Website menu điện tử hoàn chỉnh theo ý muốn
Tạo QR Code cho từng bàn
Cài đặt hosting + domain
Hướng dẫn quản lý hệ thống
Hỗ trợ kỹ thuật 3 tháng
Nguồn: Topcode.vn
