File Import Modal - Copy this React, Tailwind Component to your project
Create a ReactJS component that handles file import functionality with a modal interface. This component should: 1. Have a ‘Thêm mới’ button that, when clicked, opens a modal where the user can upload an Excel file. 2. The modal should have a button to download a sample Excel template (‘Tải file mẫu’) and a file upload area that accepts .xls and .xlsx files up to 10MB. 3. Include a ‘Hủy bỏ’ button to close the modal and a ‘Thêm mới’ button that shows a loading state when the file is being processed. 4. Implement client side validation: If the file fails validation, show an error message listing each error, such as invalid date ranges. 5. If validation passes, send the file to an API endpoint for upload. If the API call is successful, show a success message and allow the user to download the uploaded file. 6. If the upload fails, display another modal showing error details and provide an option to download the error report file.”
