Calendar Management - Copy this React, Tailwind Component to your project
Hãy thiết kế cho tôi 1 màn hình : Quản lý Trạng thái và Tính năng: Sử dụng useState để quản lý các chế độ hiển thị: lịch tháng, tuần, hoặc ngày. Hiển thị nội dung đúng theo tháng/năm và người dùng đã chọn, quản lý thông tin người dùng trong modal. Tích hợp chuyển đổi mượt mà giữa các chế độ lịch (tháng ↔ tuần) và hỗ trợ tìm kiếm, lọc người dùng theo tên hoặc trạng thái. Hiệu ứng động với Framer Motion: Animation mượt khi mở rộng/thu nhỏ lịch, làm mờ các phần không liên quan. Tạo hiệu ứng hover và scale trên các ngày hoặc giờ, cùng với chuyển đổi mượt khi chuyển giữa tháng, tuần. Modal chi tiết người dùng có hiệu ứng mở/đóng chuyên nghiệp. Giao diện và Bố cục: Bên trái: Danh sách người dùng với filter/search, hiển thị avatar, email, trạng thái và lịch làm việc. Icon con mắt để mở modal chi tiết người dùng. Bên phải: Lịch mini với nút chuyển đổi chế độ hiển thị, thiết kế rõ ràng và dễ sử dụng. Responsive, trực quan, và sử dụng Tailwind CSS để tối ưu giao diện. Quản lý Sự Kiện: Cho phép thêm, sửa, và xóa sự kiện trên lịch. Sự kiện đồng bộ theo thời gian thực, hỗ trợ thêm thông báo và nhắc nhở cho các sự kiện quan trọng. Chế độ Hiển thị Lịch: Chế độ Ngày (Day View): Hiển thị chi tiết một ngày với các sự kiện và ghi chú. Cho phép thêm, sửa, xóa sự kiện trực tiếp. Chế độ Tháng (Month View): Hiển thị toàn bộ tháng và các sự kiện theo từng ngày, người dùng có thể chọn ngày để xem chi tiết hoặc thêm sự kiện. Chế độ Tuần (Week View): Hiển thị tuần với các giờ chi tiết, cho phép thêm ghi chú hoặc công việc theo khung giờ, vuốt ngang để chuyển ngày. Chế độ Năm (Year View): Hiển thị 12 tháng trong năm, người dùng có thể click vào tháng để xem chi tiết ngày trong tháng. Chức năng Chuyển Đổi Nhanh: Thêm nút "Hôm nay" hoặc các nút ">" để quay lại ngày hiện tại hoặc chuyển nhanh giữa các chế độ hiển thị (ngày, tháng, tuần, năm). Tính năng Đồng bộ và Quản lý Sự Kiện: Thêm form modal để điền thông tin sự kiện (tiêu đề, mô tả, thời gian, nhắc nhở). Đồng bộ sự kiện với các thiết bị khác và cập nhật theo thời gian thực, hỗ trợ quản lý múi giờ và ngôn ngữ phù hợp. Cải thiện Tương tác: Tăng cường hiệu ứng tương tác, như zoom khi click vào ngày, để cải thiện trải nghiệm người dùng.
