Drawer Width - Copy this React, Mui Component to your project
Tạo giao diện Messenger Admin Dashboard với chức năng phê duyệt tin nhắn: 1. Cấu trúc tổng thể: Layout chia 2 phần: Sidebar (280px) và Main Content Theme màu: Material Design, hỗ trợ Dark/Light mode Responsive trên desktop, tablet và mobile 2. Sidebar Menu: ├─ Dashboard │ └─ Thống kê tổng quan ├─ Message Manager │ ├─ Tin nhắn chờ duyệt │ ├─ Tin nhắn đã duyệt │ └─ Tin nhắn từ chối ├─ User Manager │ ├─ Danh sách người dùng │ └─ Phân quyền ├─ Settings │ ├─ Cấu hình chung │ ├─ Quy tắc lọc tin │ └─ Thông báo 3. Main Content: A. Dashboard View ├─ Thống kê nhanh (Quick Stats) │ ├─ Tổng tin nhắn chờ duyệt │ ├─ Tin nhắn đã xử lý hôm nay │ ├─ Thời gian phản hồi TB │ └─ Tỷ lệ từ chối ├─ Biểu đồ hoạt động │ ├─ Số lượng tin nhắn theo thời gian │ └─ Phân bố trạng thái tin nhắn └─ Hoạt động gần đây B. Message Manager View ├─ Bộ lọc & Tìm kiếm │ ├─ Theo trạng thái │ ├─ Theo người gửi │ ├─ Theo thời gian │ └─ Theo nội dung ├─ Bảng tin nhắn │ ├─ Checkbox chọn nhiều │ ├─ Avatar & tên người gửi │ ├─ Preview nội dung │ ├─ Thời gian gửi │ └─ Trạng thái & Actions └─ Bulk Actions ├─ Phê duyệt đã chọn ├─ Từ chối đã chọn └─ Xuất báo cáo 4. Tính năng chính: Xem trước tin nhắn đầy đủ Phê duyệt/từ chối kèm ghi chú Bộ lọc tin nhắn thông minh Thông báo realtime Xuất báo cáo PDF/Excel Audit log đầy đủ 5. Tương tác & Animation: Smooth transitions Loading skeletons Toast notifications Hover effects Drag & drop support 6. Màu sắc & Typography: Primary: #1976d2 (Blue) Success: #2e7d32 (Green) Warning: #ed6c02 (Orange) Error: #d32f2f (Red) Font: Roboto Icons: Material Icons 7. Responsive Breakpoints: Mobile: < 600px Tablet: 600px 960px Desktop: > 960px 8. Loading States: Skeleton screens Progress indicators Lazy loading Infinite scroll 9. Error Handling: Offline support Retry mechanisms Error boundaries Fallback UI 10. Tối ưu hiệu năng: Code splitting Lazy loading Memoization Debouncing Virtual scrolling Yêu cầu kỹ thuật: Next.js + React 18 Material UI v5 Redux Toolkit React Query Socket.io Jest + RTL Prettier + ESLint
