Bookings Management - Copy this React, Tailwind Component to your project

This section will provide users with a detailed view of all the bookings they have made, offering functionality to view, modify, or cancel bookings in a user friendly format. Core Features Tabular Layout: A responsive and scrollable table displaying all bookings in a clean format. Columns Included: Car Image: A small thumbnail of the booked car for easy identification. Car Model: The car's make and model, e.g., Toyota Corolla 2023. Booking Date: The date and time the car was reserved (formatted as DD MM YYYY HH:MM). Total Price: The cost of the entire booking period, including taxes/fees. Booking Status: Clearly display whether the booking is confirmed, pending, or canceled. Actions: Buttons to modify the booking date or cancel the booking. Design and Interactivity Table Design: Styled rows with alternating background colors for better readability. Column headings (Car Image, Car Model, etc.) should use bold text and a subtle background color. Rows to highlight (e.g., with a light shadow or color) on hover for interactivity. Buttons: Cancel Booking: A red button with a trash can icon and text "Cancel". On click, display a confirmation modal asking: "Are you sure you want to cancel this booking?" Include Yes/No options, with Yes executing the cancellation and No closing the modal. Update the row to reflect the new status (e.g., Canceled). Modify Booking Date: A blue button with a calendar icon and text "Modify Date". On click, open a modal with a date picker allowing the user to select a new start and end date. Include options to Confirm or Cancel the action. Once confirmed, update the table with the modified booking details and save the changes.