Order Details - Copy this React, Tailwind Component to your project

Hãy thiết kế cho tôi 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à. Thiết Kế: Giao diện sạch sẽ và dễ nhìn: Từng trường nhập liệu được tách biệt rõ ràng, dễ dàng nhập thông tin với các label rõ ràng. Bố cục hợp lý: Các trường được sắp xếp gọn gàng, đảm bảo tính thẩm mỹ cao và dễ dàng thao tác. Nút hành động trực quan: Nút "Thêm Mới" nằm ở vị trí dễ tiếp cận với biểu tượng dấu cộng, giúp người dùng nhận diện dễ dàng.