B H Y T Dashboard - Copy this React, Tailwind Component to your project
### Prompt: Tạo Giao Diện Nhân Viên Thu cho Hệ Thống Kê Khai BHYT **Mục tiêu:** Thiết kế giao diện dành cho **nhân viên thu** trong hệ thống kê khai BHYT, đảm bảo thân thiện, trực quan và hỗ trợ các chức năng quản lý kê khai, đợt kê khai, và báo cáo. **Cụ thể yêu cầu giao diện như sau:** 1. **Mục tiêu chính của giao diện:** Quản lý đợt kê khai (tạo mới, theo dõi danh sách, trạng thái). Nhập và chỉnh sửa thông tin kê khai BHYT. Theo dõi trạng thái các hồ sơ kê khai: đã gửi, chờ duyệt, từ chối. Xem báo cáo và thống kê số lượng kê khai. Responsive, hiển thị đẹp trên cả desktop và mobile. ### **1. Bố cục giao diện:** #### **1.1. Header:** Thanh trên cùng chứa: Logo hệ thống. Tên hệ thống: **"Hệ Thống Kê Khai BHYT".** Menu người dùng (Avatar góc phải, các tùy chọn: Hồ sơ cá nhân, Đăng xuất). #### **1.2. Sidebar:** Danh sách các menu chức năng: Dashboard: **Tóm tắt số liệu** Tổng kê khai đã tạo. Số kê khai đang chờ duyệt. Số kê khai bị từ chối. Đợt kê khai: Tạo đợt mới. Danh sách các đợt. Kê khai BHYT: Tạo kê khai mới. Quản lý danh sách kê khai. Báo cáo: Xem báo cáo thống kê. Xuất báo cáo Excel/PDF. #### **1.3. Main Content:** Hiển thị nội dung chính, tùy thuộc vào chức năng được chọn trong sidebar: **Dashboard:** Biểu đồ thống kê (cột/tròn) các trạng thái kê khai. Bảng liệt kê 5 kê khai gần nhất. Nút truy cập nhanh "Tạo kê khai mới". **Đợt kê khai:** Form tạo đợt kê khai mới với các trường: Tháng/Năm (tự động lấy hiện tại). Số đợt (tự động tính). Ghi chú (tùy chọn). Danh sách các đợt kê khai hiển thị theo bảng: Tháng/Năm, số đợt, trạng thái (Chưa gửi, Đã gửi), số hồ sơ. Chức năng chỉnh sửa, xóa. **Kê khai BHYT:** Form nhập thông tin kê khai (Họ tên, CCCD, mã BHXH, địa chỉ, trạng thái...). Bảng danh sách kê khai với trạng thái (Chờ duyệt, Đã duyệt, Bị từ chối). **Báo cáo:** Biểu đồ thống kê số lượng kê khai theo tháng. Tính năng xuất báo cáo ra Excel hoặc PDF. #### **1.4. Footer:** Nằm ở cuối trang: `© 2024 Hệ Thống Kê Khai BHYT. All rights reserved.` ### **2. Màu sắc và Phong cách thiết kế:** **Màu chủ đạo:** Xanh dương (#007BFF) cho nút và điểm nhấn. Trắng (#FFFFFF) làm nền chính. Xám nhạt (#F8F9FA) cho phần phân cách và bảng. **Font chữ:** Sử dụng `Roboto` hoặc `Open Sans`. Tiêu đề: Bold, cỡ chữ lớn. Nội dung: Màu xám đậm (#343A40). **Hiệu ứng:** Hover cho nút, bảng dữ liệu. Animation nhẹ khi tải biểu đồ. ### **3. Tính năng nâng cao:** 1. **Tìm kiếm và lọc:** Bộ lọc theo trạng thái kê khai (Chờ duyệt, Đã duyệt, Từ chối). Tìm kiếm theo mã kê khai, họ tên. 2. **Export:** Nút xuất danh sách kê khai dưới dạng Excel hoặc PDF. 3. **Thông báo:** Hiển thị thông báo nhỏ (toast) khi thao tác thành công/thất bại. 4. **Responsive:** Sidebar thu gọn trên thiết bị di động. Tự động điều chỉnh kích thước bảng và biểu đồ. ### **4. Công nghệ Sử dụng:** **Frontend Framework:** React.js. **UI Framework:** TailwindCSS. **Thư viện bổ sung:** Chart.js hoặc Recharts: Tạo biểu đồ. React Table: Hiển thị danh sách kê khai. React Toastify: Hiển thị thông báo. ### **Mô tả yêu cầu đầu vào:** "Tạo một giao diện nhân viên thu cho hệ thống kê khai BHYT. Giao diện bao gồm Header, Sidebar, Main Content và Footer. Các chức năng cần thiết như quản lý đợt kê khai, tạo kê khai mới, xem báo cáo. Sử dụng React.js với TailwindCSS để xây dựng. Yêu cầu responsive và hỗ trợ các thao tác tìm kiếm, lọc, biểu đồ thống kê." Prompt này sẽ giúp AI tạo giao diện nhân viên thu hoàn chỉnh!
