Billiards CMS

Tổng quan

Hệ thống quản lý câu lạc bộ Billiards hiện đại, sử dụng kiến trúc Monorepo tách biệt Frontend và Backend, hỗ trợ tính năng Realtime và quản lý toàn diện thông qua Admin Panel.

Mô tả luồng hoạt động:

Luồng 1: Nhân viên nhận order như cách truyền thống.
Luồng 2: Khách (màn điện thoại) quét mã QR của bàn để yêu cầu mở bàn, có thể order dịch vụ của quán. Nhân viên( màn máy tính) nhận được thông báo theo thời gian thực, thực hiện các yêu cầu của khách hàng. Video demo luồng 2: https://www.threads.com/@insofanh/post/DRmuzhaE7GR?xmt=AQF0ffkjUIWMzBXVmlNyJf1XjjRutTdPH4fexhqfknNBC2T51zSSLmHYZj9jZE8CA3xTFiw&slof=1

Công nghệ sử dụng

Backend (Laravel 12)

Core: Laravel Framework 12.x
Admin Panel: Filament 4.0 (Quản lý nội dung, người dùng, cấu hình hệ thống).
Authentication: Laravel Sanctum (API Authentication).
Realtime / WebSocket: Laravel Reverb (Self-hosted WebSocket Server).
Authorization: Spatie Laravel Permission (Quản lý vai trò và quyền hạn).
Database: MySQL (Production).
Settings: Spatie Laravel Settings Plugin (Quản lý cấu hình động).
Export: Filament Excel (Xuất báo cáo).

Frontend (React 19)

Core: React 19, TypeScript.
Build Tool: Vite 7.x.
Styling: Tailwind CSS 3.4.
State Management: Zustand (Quản lý trạng thái nhẹ nhàng).
Data Fetching: React Query (TanStack Query v5) - Quản lý server state và caching.
Routing: React Router v7.
Forms: React Hook Form kết hợp với Zod để validation.
Realtime Client: Laravel Echo + Pusher JS (Kết nối với Reverb Backend).
Utilities:
- axios: HTTP Client.
- qrcode.react & @yudiel/react-qr-scanner: Xử lý QR Code.
- react-quill: Rich Text Editor.

Tính năng nổi bật đã tích hợp

Realtime Update: Cập nhật trạng thái bàn/order ngay lập tức nhờ Laravel Reverb và Echo.
Admin mạnh mẽ: Filament Dashboard giúp quản lý số liệu, danh mục nhanh chóng mà không cần code nhiều giao diện admin thủ công.
QR Code: Hỗ trợ quét và tạo QR cho bàn/thanh toán.
PWA Ready: Hỗ trợ Progressive Web App.
Báo cáo doanh thu: Theo từng ngày, tự động gửi mail báo cáo doanh thu vào mỗi cuối ngày.