Attendance Records Modal - Copy this React, Tailwind Component to your project

Trong modal, danh sách giờ vào/ra của nhân viên được hiển thị dưới dạng các list card, mỗi card đại diện cho một bản ghi với các thông tin về attendanceDate (giờ), attendanceTimeCheck (giờ), statusId (mã trạng thái) và statusName (tên trạng thái). Các thông tin này được trình bày một cách rõ ràng và dễ nhìn, với thiết kế tinh tế và chuyên nghiệp. Mỗi card có hiệu ứng chuyển động mượt mà, mang lại cảm giác dễ chịu khi chúng xuất hiện hoặc được thay đổi. Thông tin trong card: attendanceDate: Giờ vào của nhân viên. attendanceTimeCheck: Giờ ra của nhân viên. statusId: Mã trạng thái (số). statusName: Tên trạng thái (string). Mỗi card sẽ hiển thị đầy đủ các thông tin trên và có cấu trúc dễ đọc, giúp người dùng dễ dàng theo dõi và quản lý. Hiệu ứng xuất hiện: Khi modal mở, các list card sẽ tịnh tiến từ phía dưới lên, mang lại cảm giác nhẹ nhàng và tự nhiên. Hiệu ứng hover: Khi người dùng di chuột vào từng card, card sẽ nhẹ nhàng phóng to hoặc thay đổi độ sáng (shadow) để làm nổi bật và dễ nhận diện. Nút sửa: Mỗi card sẽ có nút Edit, cho phép người dùng chỉnh sửa thông tin attendanceDate, attendanceTimeCheck, statusId, và statusName. Nút Edit có hiệu ứng thay đổi màu sắc khi hover, tạo sự tương tác trực quan và dễ sử dụng. Cập nhật dữ liệu: Sau khi sửa, các thay đổi sẽ được cập nhật mượt mà trong card mà không làm gián đoạn trải nghiệm người dùng. Card có thể thay đổi vị trí hoặc cập nhật nội dung ngay lập tức. Cập nhật trạng thái: Các card sẽ hiển thị màu sắc khác nhau dựa trên statusId và statusName để dễ dàng phân biệt các trạng thái khác nhau của nhân viên, giúp người quản lý nhanh chóng nắm bắt tình hình.