Leave Request Management - Copy this React, Tailwind Component to your project

Create and design an component to manage leave requests. The component should include the following features: View All Leave Requests Display a section where the user can view all their leave requests in a table or list. Each row should show the following details: Leave Type Start Date End Date Reason Leave Status (initially PENDING) New Leave Request Include a New Request button that, when clicked, opens a modal where the user can submit a new leave request. The modal should allow the user to input the following data: Leave Type (dropdown with options: SICK, ANNUAL, CASUAL). Start Date (date picker). End Date (date picker). Reason (text input). The Leave Status should default to PENDING and cannot be modified by the user. Cancel a Leave Request Allow the user to cancel a leave request (i.e., request an annulment). Include a button or option in the leave request table for cancelling a request. This action should update the leave status to CANCELLED. Submit Leave Request After the user fills in the modal form, they should be able to submit the leave request with the status set to PENDING. Include validation for the required fields, such as dates and reason. User Friendly Design The leave requests table should be clean and easy to navigate. The modal for adding new requests should be simple and accessible. Provide confirmation messages when a request is successfully submitted or cancelled. Search and Filter Add a search bar or filtering options to allow users to view leave requests by type, date, or status. Ensure the component is interactive, visually appealing, and user friendly, with a focus on simplicity and clarity.