Authorization Signature Popup - Copy this React, Tailwind Component to your project

Dưới đây là mô tả chi tiết thiết kế popup cho tính năng ủy quyền ký, bao gồm các phần cần thiết và các yếu tố giao diện người dùng: ### Mô Tả Popup Tính Năng Ủy Quyền Ký #### Tiêu đề Popup: **"Ủy Quyền Ký"** #### Phần Nội Dung: 1. **Thông Tin Người Được Ủy Quyền:** Trường nhập liệu cho tên người được ủy quyền: **Label:** "Tên người ủy quyền:" **Input type:** Textbox Trường nhập liệu cho email của người được ủy quyền (nếu cần thiết): **Label:** "Email của người được ủy quyền (tùy chọn):" **Input type:** Textbox Trường nhập liệu cho số điện thoại của người được ủy quyền (tùy chọn): **Label:** "Số điện thoại (tùy chọn):" **Input type:** Textbox 2. **Chọn Giấy Ủy Quyền:** **Label:** "Chọn giấy ủy quyền:" **Tùy chọn:** **Checkbox/Radio:** Chọn từ danh sách chứng từ có sẵn trên hệ thống. **Hoặc:** Nút "Tải lên" cho phép người dùng tải lên giấy ủy quyền. **Input type:** File upload **Hướng dẫn:** "Chọn file (PDF, DOCX, JPG...)" 3. **Nội Dung Ủy Quyền:** **Label:** "Nhập nội dung ủy quyền:" **Input type:** Textarea **Ghi chú:** "Mô tả rõ ràng quyền hạn ủy quyền." 4. **Xác Nhận Ủy Quyền:** **Checkbox:** "Tôi xác nhận rằng thông tin trên là chính xác và tôi đồng ý ủy quyền." **Label:** "Xác nhận ủy quyền" #### Nút Hành Động: **Nút "Gửi"** Chức năng: Lưu thông tin và thực hiện ủy quyền **Nút "Hủy"** Chức năng: Đóng popup mà không lưu lại thông tin #### Thiết Kế Giao Diện: **Màu sắc, font chữ:** Sử dụng màu sắc và phong cách thiết kế thống nhất với giao diện hiện tại của hệ thống. **Khoảng cách giữa các trường nhập liệu:** Đảm bảo đủ khoảng cách để người dùng dễ dàng nhập thông tin. **Thông báo lỗi:** Hiển thị thông báo khi có lỗi xảy ra như thiếu thông tin cần thiết. ### Lưu Ý: Popup này cần có khả năng xử lý dữ liệu bóng mượt và cung cấp phản hồi cho người dùng ngay khi họ thực hiện hành động (ví dụ: thông báo thành công hoặc thông báo lỗi). Đảm bảo rằng việc tải lên tài liệu và nhập liệu được kiểm tra tính hợp lệ.