1. Kiến trúc & Trải nghiệm Giao diện (UI/UX)
-
Chuẩn Mobile-First: Giao diện được code thủ công hoàn toàn bằng CSS Grid và Flexbox, tự động biến đổi từ dạng Bảng (trên PC) sang dạng Thẻ Card (trên Mobile) mượt mà, không bị vỡ hay xuất hiện thanh cuộn ngang.
-
Trải nghiệm không tải trang (AJAX): Các thao tác thêm, sửa, xóa, báo cáo, gửi form đều được xử lý ngầm, kết hợp với thông báo pop-up sinh động từ SweetAlert2.
-
Điều hướng thông minh: Tích hợp Sidebar trượt có thể thu phóng, hệ thống Tab (Đang làm / Đã xong) giúp phân loại dữ liệu mạch lạc.
2. Phân hệ Quản trị viên (Admin Pro)
-
Dashboard Tổng quan: Tích hợp Chart.js hiển thị biểu đồ tỷ lệ hoàn thành công việc, tình hình điểm danh và nhịp độ hoạt động. Hiển thị nhanh danh sách nhân viên vắng mặt, nhắc nhở chưa đọc và công việc tồn đọng.
-
Quản lý Công việc (Tasks): * Chức năng giao việc cho nhiều người cùng lúc (tích hợp Select2 có hiển thị avatar).
-
Soạn thảo mô tả công việc bằng CKEditor (hỗ trợ up ảnh trực tiếp).
-
Chọn hạn chót (Deadline) chính xác bằng Flatpickr.
-
Xem chi tiết báo cáo, file đính kèm và lịch sử thao tác (Log) của từng nhân viên.
-
Quản lý Nhắc nhở (Reminders): Soạn và gửi thông báo đa luồng, theo dõi realtime trạng thái Đã xem/Chưa xem và đọc phản hồi trực tiếp từ nhân viên.
3. Phân hệ Nhân viên (Employee Workspace)
-
Dashboard Cá nhân: Tóm tắt công việc, nhắc nhở cá nhân bằng số liệu và biểu đồ riêng; tích hợp Widget đồng hồ điện tử chạy thời gian thực.
-
Công việc của tôi: * Tiếp nhận và xem chi tiết công việc được giao (giữ nguyên định dạng HTML từ Admin).
-
Nhắc nhở: Tiếp nhận thông báo, bấm xác nhận "Đã xem" và có thể gõ phản hồi nhanh gửi lại cho bộ phận Admin.
-
Hồ sơ cá nhân: Giao diện thiết kế chia khối quản lý thông tin bảo mật (Đổi mật khẩu, CCCD, SĐT). Tích hợp chức năng đổi ảnh đại diện (Avatar) với khả năng xem trước (Live Preview) ngay khi chọn ảnh.
-
Bảng lương: * Hiển thị thu nhập dưới dạng các thẻ tổng quát (Thu nhập năm, Lương kỳ gần nhất).
-
Danh sách chi tiết các khoản cộng/trừ (Lương cơ bản, Thưởng, Phạt, BHXH) có bộ lọc tìm kiếm theo Tháng/Năm.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
Thêm tệp csdl, truy cập localhost/ tên project