Login - Copy this React, Tailwind Component to your project

I-am-creating-a-full-stack-project-in-which-i-am-handling-the-lab-technician-part-having-following-things-User-Authentication-(Login):-Implement-JWT-based-authentication-for-a-lab-technician.-Use-AuthController-for-login,-where-a-lab-technician-can-login-with-their-email-and-password.-Store-JWT-token-in-the-response-after-successful-login-and-send-it-as-a-bearer-token-in-the-subsequent-requests.-Lab-Appointment-Management:-Create-an-API-to-fetch-all-lab-appointments-for-the-technician.-Include-endpoints-to-manage-appointments-(view-only).-Implement-an-endpoint-to-view-a-specific-lab-appointment-by-ID.-Lab-Report-Generation:-Create-a-LabReport-model-with-properties-like-ReportId,-AppointmentId,-TestResults,-GeneratedDate.-Implement-an-API-endpoint-to-generate-and-save-lab-reports-for-a-specific-appointment.-Allow-the-technician-to-input-test-results-and-save-them-to-the-database.-Controller-Examples:-AuthController-(handles-login-and-authentication).-LabAppointmentsController-(handles-fetching,-adding,-and-updating-lab-appointments).-LabReportsController-(handles-generating-and-saving-lab-reports-for-appointments).-Frontend:-React-Login-Page:-Create-a-login-page-with-email-and-password-fields.-Use-React-hooks-(useState,-useEffect)-to-manage-form-state-and-handle-form-submission.-After-successful-login,-store-the-JWT-token-in-localStorage-or-sessionStorage-and-navigate-to-the-dashboard-page.-Dashboard:-After-login,-navigate-the-lab-technician-to-a-dashboard-page-that-shows-all-lab-appointments.-Display-appointments-in-a-table-with-columns-like-AppointmentId,-PatientName,-TestType,-and-AppointmentDate.-Add-an-option-to-generate-lab-reports-for-each-appointment-(a-button-or-link).-Appointment-Management-Page:-Create-a-page-where-lab-technicians-can-view-all-appointments,-add-new-ones,-update-or-delete-existing-appointments.-Each-appointment-can-have-a-button-to-generate-a-lab-report-for-it.-Lab-Report-Generation-Page:-When-a-technician-selects-an-appointment,-navigate-them-to-a-form-where-they-can-input-test-results-and-generate-the-lab-report.-After-submission,-the-lab-report-is-saved,-and-the-technician-is-notified-of-success.-React-Routing:-Use-React-Router-for-navigation-between-pages,-including:-Login-page-(/login).-Dashboard-page-(/dashboard).-Appointment-management-page-(/appointments).-Lab-report-generation-page-(/generate-report/:appointmentId).-Fetching-Data:-Use-axios-or-fetch-to-call-the-API-from-the-React-frontend.-Ensure-requests-include-the-JWT-token-in-the-Authorization-header-for-protected-routes.-Additional-Requirements:-Ensure-that-all-forms-(login,-appointment-creation,-and-lab-report-generation)-have-proper-validation.-Include-error-handling-for-API-requests-(e.g.,-invalid-credentials,-failed-report-generation).-Make-sure-the-user-interface-is-responsive-and-user-friendly-(you-can-use-Material-UI-or-Bootstrap).-Add-any-necessary-CSS-or-styling-for-the-front-end-components.