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

Đây là một modal đẹp mắt và chuyên nghiệp, được thiết kế để tạo sự thuận tiện tối đa khi người dùng thêm thông tin vào hệ thống. Khi người dùng nhấp vào nút "Thêm Mới", modal này sẽ xuất hiện với hiệu ứng chuyển động tịnh tiến mượt mà từ ngoài vào, mang đến một trải nghiệm trực quan và dễ chịu. Các Trường Nhập Liệu: Ngày (day): Đây là trường nhập liệu kiểu date, cho phép người dùng chọn ngày chính xác. Một bộ chọn ngày trực quan sẽ giúp người dùng nhanh chóng nhập đúng ngày mong muốn. Thời gian (attendanceDate): Trường nhập thời gian (kiểu time), cho phép người dùng chỉ định thời điểm sự kiện bắt đầu. Thời gian Check in (attendanceTimeCheck): Tương tự như trường "Thời gian", nhưng dành cho việc xác định thời gian check in của người dùng, cũng sử dụng bộ chọn thời gian. Trạng thái (status): Trường status cho phép người dùng chọn trạng thái của người dùng (ví dụ: "Vào", "Ra", "Vào trễ", "Ra trễ"). Dễ dàng thay đổi trạng thái qua một dropdown. User ID (userInfoId): Trường này giúp nhập thông tin ID người dùng, thể hiện mối liên hệ với người dùng cụ thể trong hệ thống. Tính Năng Chuyển Động: Modal sẽ có hiệu ứng mở/đóng mượt mà, tạo cảm giác sống động và nhẹ nhàng, khi modal xuất hiện từ từ và trượt vào màn hình. Người dùng sẽ cảm nhận được sự chuyển động này, giúp giao diện trở nên sinh động hơn. Khi đóng modal, hiệu ứng tịnh tiến sẽ khiến nó từ từ thu nhỏ và biến mất, tạo cảm giác mượt mà.