Locales - Copy this React, Tailwind Component to your project

1. Tổng quan về giao diện: Giao diện phải gọn gàng, dễ dàng tiếp cận các tính năng và giúp người quản lý nhanh chóng nắm bắt thông tin quan trọng mà không cảm thấy rối mắt. Tất cả các tính năng cần được tối ưu sao cho dễ sử dụng trên cả desktop và mobile. 2. Header (Thanh điều hướng chính): Logo của hệ thống LMS: Nằm ở góc trái, dễ nhận diện. Tên lớp học/khóa học: Hiển thị ở giữa header. Tên lớp học nên có thể click để truy cập vào trang chi tiết lớp học. Menu Điều hướng: Dashboard: Quay về trang chính. Lịch học (Calendar): Liên kết tới giao diện Calendar. Quản lý học viên: Liên kết tới danh sách và quản lý học viên. Cài đặt: Cấu hình hệ thống, người dùng. Thông báo: Dấu chấm đỏ hiển thị thông báo mới. Tài khoản người dùng: Ảnh đại diện, tên người dùng và tùy chọn đăng xuất ở góc phải. 3. Sidebar (Thanh bên trái): Danh sách lớp học: Hiển thị các lớp học hiện có theo dạng danh sách hoặc accordion (có thể thu gọn/ mở rộng). Mỗi lớp học có thể click vào để xem chi tiết. Tìm kiếm lớp học: Hộp tìm kiếm nhanh ở đầu sidebar để người quản lý có thể tìm nhanh lớp học theo tên, giảng viên, hoặc ngày. Chuyển đổi chế độ Calendar: Cho phép người dùng chuyển qua lại giữa chế độ Calendar (lịch) và List view (danh sách lớp học). Cập nhật lớp học nhanh: Tùy chọn thêm lớp học mới hoặc cập nhật lớp học ngay từ sidebar. 4. Main Calendar View (Chế độ xem Lịch chính): Ngày/Tháng/ Tuần: Cho phép người dùng chuyển đổi giữa các chế độ xem (tháng, tuần) một cách linh hoạt. Ngày hiện tại: Được làm nổi bật bằng màu sắc khác biệt (ví dụ: viền đậm hoặc nền màu sáng hơn). Ô lớp học: Mỗi lớp học sẽ được hiển thị dưới dạng ô nhỏ trong từng ngày. Thông tin tóm tắt lớp học: Hiển thị tên lớp, giờ học, và trạng thái học viên (Ví dụ: "5/10 đã tham gia", "2 từ chối"). Màu sắc: Xanh dương: Đã đăng ký. Xanh lá: Đã tham gia. Đỏ: Từ chối tham gia. Xám: Lớp học đã hoàn thành. Tooltip/Popover: Khi người dùng di chuột vào ô lớp học, một tooltip hoặc popover nhỏ sẽ hiện ra, cho biết các thông tin chi tiết như tên giảng viên, thời gian, và số lượng học viên tham gia. Icon: Dùng icon đơn giản để biểu thị trạng thái lớp học: Check icon: Đã tham gia. Cancel icon: Từ chối tham gia. 5. Class Details (Chi tiết lớp học): Khi người quản lý click vào một lớp học trên Calendar, cửa sổ popup hoặc side panel sẽ mở ra với các thông tin chi tiết: Tên lớp học Giảng viên (có thể click vào tên giảng viên để xem chi tiết hồ sơ). Ngày giờ: Thời gian diễn ra lớp học. Trạng thái lớp học: Đang diễn ra, Đã hoàn thành, Đã hủy, Chưa bắt đầu. Danh sách học viên: Số lượng học viên đã tham gia, số học viên từ chối. Có thể click vào để mở danh sách chi tiết học viên với trạng thái và thông tin liên quan. 6. Student Management (Quản lý học viên): Danh sách học viên: Hiển thị ở dạng bảng, có các cột: Họ tên học viên Trạng thái tham gia: Đã đăng ký, Đã tham gia, Từ chối tham gia. Ngày giờ đăng ký: Khi học viên đăng ký tham gia lớp học. Thao tác: Các thao tác như thay đổi trạng thái (Đã tham gia, Từ chối tham gia). Tìm kiếm và lọc: Cung cấp công cụ tìm kiếm theo tên học viên, trạng thái tham gia, hoặc thời gian đăng ký. Thêm học viên mới: Nút Add Student ở góc trên bên phải của bảng. Cập nhật trạng thái học viên: Có thể dễ dàng thay đổi trạng thái của học viên ngay từ danh sách. Nút Edit: Thay đổi trạng thái (Đã tham gia, Từ chối, Đang chờ). 7. Notifications (Thông báo):