source code dashboard admin thiết bị điện tử

# TechZone — Dashboard Admin Quản Trị Cửa Hàng & Kho Thiết Bị Điện Tử Hệ thống Quản trị Bán hàng & Quản lý Kho Thiết Bị Điện Tử chuyên nghiệp (Smartphone, Laptop, Tablet, Smartwatch, Tai nghe & Phụ kiện công nghệ) được xây dựng theo kiến trúc chuẩn `CoreCRUD (React + Node.js + MySQL + Sequelize)`. --- ## 🔐 Bảng Phân Quyền Chi Tiết Theo Từng Vai Trò (Role-Based Access Control) Hệ thống hỗ trợ 3 cấp độ phân quyền chặt chẽ từ Backend Middleware (`authenticate`, `authorize`) đến Frontend Navigation: | Tính Năng / Quyền Hạn | Quản Trị Viên (`admin`) | Quản Lý Kho (`manager`) | Nhân Viên Bán Hàng (`staff`) | | :--- | :---: | :---: | :---: | | **Bảng điều khiển (Dashboard)** | ✅ Toàn quyền xem | ✅ Toàn quyền xem | ✅ Xem tổng quan | | **Xem danh sách thiết bị** | ✅ Có | ✅ Có | ✅ Có | | **Thêm / Sửa thông số thiết bị** | ✅ Có | ✅ Có | ❌ Không | | **Xóa thiết bị khỏi hệ thống** | ✅ Có | ❌ Không | ❌ Không | | **Thêm / Sửa Danh mục & Hãng** | ✅ Có | ✅ Có | ❌ Không (Ẩn menu) | | **Xóa Danh mục & Hãng** | ✅ Có | ❌ Không | ❌ Không (Ẩn menu) | | **Xem & Tùy chỉnh Cảnh báo kho** | ✅ Có | ✅ Có | ❌ Không (Ẩn menu) | | **Nhập hàng nhanh vào kho (+5, +10, +20)** | ✅ Có | ✅ Có | ❌ Không (Ẩn menu) | | **Xem & Tìm kiếm Đơn hàng** | ✅ Có | ✅ Có | ✅ Có | | **Tạo Đơn Hàng Mới** | ✅ Có | ✅ Có | ✅ Có | | **Cập nhật trạng thái giao / thanh toán** | ✅ Có | ✅ Có | ✅ Có | | **Xóa đơn hàng** | ✅ Có | ❌ Không | ❌ Không | | **Quản lý Nhân Viên & Phân Quyền** | ✅ Toàn quyền CRUD | ❌ Không (Ẩn menu) | ❌ Không (Ẩn menu) | | **Khóa / Mở khóa tài khoản nhân sự** | ✅ Có | ❌ Không | ❌ Không | | **Đổi thông tin cá nhân & Mật khẩu** | ✅ Có | ✅ Có | ✅ Có | --- ### Chi Tiết Mô Tả Từng Vai Trò: 1. 👑 **Quản Trị Viên (`admin`)**: - Nắm toàn quyền quản trị cao nhất trên toàn hệ thống. - Quản lý tài khoản nhân sự (Thêm, sửa quyền hạn, khóa tài khoản, xóa nhân viên). - Được phép xóa vĩnh viễn hoặc gỡ bỏ thiết bị, danh mục, hãng sản xuất và đơn hàng. 2. 📦 **Quản Lý Kho / Thủ Kho (`manager`)**: - Chuyên trách quản lý sản phẩm, nhóm ngành hàng và tồn kho. - Thêm mới và chỉnh sửa cấu hình phần cứng thiết bị (CPU, RAM, SSD, Display, Pin...). - Thêm / sửa danh mục và thương hiệu đối tác. - Theo dõi cảnh báo cạn kho, thay đổi ngưỡng an toàn và thực hiện nhập thêm máy vào kho. - Không có quyền xóa thiết bị/danh mục/hãng và không truy cập vào trang Quản lý nhân viên. 3. 💼 **Nhân Viên Bán Hàng (`staff`)**: - Chuyên trách phục vụ bán hàng và xử lý đơn hàng cho khách. - Xem thông tin giá bán, tồn kho và cấu hình máy để tư vấn khách hàng. - Tạo đơn hàng mới khi khách đặt mua (hệ thống tự động trừ kho). - Cập nhật tiến độ xử lý đơn hàng (*Chờ xác nhận -> Đang đóng gói -> Đang giao hàng -> Hoàn thành*). - Không được phép sửa giá/cấu hình sản phẩm, không thấy menu Quản lý kho, Danh mục và Nhân viên. --- ## 🌟 Tính Năng Nổi Bật Của Hệ Thống 1. **Bảng Điều Khiển Tổng Quan (Dashboard Overview)**: - Thống kê 4 chỉ số KPI : Tổng doanh thu, Tổng đơn hàng, Số model trong kho, Cảnh báo tồn kho đỏ. - Biểu đồ tăng trưởng doanh thu 6 tháng (Recharts Area Chart). - Biểu đồ cơ cấu thị phần doanh số theo nhóm thiết bị (Recharts Donut Chart). - Danh sách đơn hàng mới nhất và danh sách thiết bị cảnh báo sắp hết hàng realtime từ DB. 2. **Quản Lý Thiết Bị Điện Tử (Products CRUD)**: - Danh sách thiết bị với hình ảnh, mã SKU, tên model, giá gốc, giá bán, tồn kho và bảo hành. - Bộ lọc đa năng: Tìm kiếm realtime tên/SKU, lọc theo Hãng sản xuất và Danh mục. - Modal thêm/sửa chi tiết thông số phần cứng: **CPU, RAM, Ổ cứng SSD, Màn hình, GPU, Dung lượng Pin**. 3. **Quản Lý Đơn Hàng (Orders CRUD & Auto Stock)**: - Tạo đơn hàng mới nhanh chóng, hệ thống tự động kiểm tra và trừ tồn kho tương ứng. - Theo dõi tiến độ đơn hàng: *Chờ xác nhận, Đang đóng gói, Đang giao hàng, Hoàn thành, Đã hủy*. - Quản lý trạng thái thanh toán (*Chưa thanh toán, Đã thanh toán, Hoàn tiền*). 4. **Trung Tâm Cảnh Báo Tồn Kho (Inventory & Dynamic Alerts)**: - Tự động phát hiện và cảnh báo thiết bị dưới ngưỡng an toàn với tùy chọn ngưỡng linh hoạt (≤ 3, ≤ 5, ≤ 10, ≤ 15 máy). - Nút Nhập kho nhanh (+5 máy, +10 máy, +20 máy) chỉ với 1 click. 5. **Danh Mục & Hãng Sản Xuất (Categories & Brands CRUD)**: - Thêm / sửa / xóa phân loại ngành hàng và thương hiệu chính hãng. 6. **Cơ Chế Refresh Token Tự Động**: - Axios Interceptor tự động bắt lỗi `401 Unauthorized`, gọi endpoint `POST /api/auth/refresh` để cấp mới token ngầm mà không làm gián đoạn phiên làm việc. --- ## 📁 Cấu Trúc Thư Mục Dự Án ``` dashboard-admin/thiet-bi-dien-tu/ ├── backend/ # Node.js + Express + Sequelize MySQL │ ├── src/ │ │ ├── config/db.js # Kết nối Sequelize MySQL │ │ ├── models/ # User, Category, Brand, Product, Order, OrderItem │ │ ├── controllers/ # auth, product, order, category, stats, user │ │ ├── routes/ # RESTful API endpoints │ │ ├── middlewares/ # JWT auth, authorize RBAC, Multer upload, errorHandler │ │ ├── seeders/seedData.js # Nạp dữ liệu thiết bị điện tử phong phú │ │ └── app.js │ ├── .env.example │ └── package.json │ ├── frontend/ # React 18 + Vite + Tailwind CSS + Recharts │ ├── src/ │ │ ├── components/ # Button, Modal, Card, StatCard, DataTable, Pagination │ │ ├── layouts/AdminLayout.jsx # Sidebar phân quyền động + Header + Notifications │ │ ├── pages/ # Dashboard, Products, Orders, Categories, Inventory, Users, Login, Profile │ │ ├── services/ # api.js (Axios + auto refresh token), auth, product, order, stats, user │ │ └── context/AuthContext.jsx # Quản lý đăng nhập & profile người dùng │ ├── index.html │ ├── tailwind.config.js │ └── package.json │ └── README.md ```