Past Bookings Page - Copy this React, Tailwind Component to your project

The History of Past Bookings and Payments page for farmers should be designed to give users a comprehensive and easy to navigate record of their past transactions, bookings, and payments. It should provide a clean, visually clear overview of their past service usage, payment status, and any follow up actions. The interface must be professional, user friendly, and responsive across mobile, tablet, and desktop devices. The design should focus on simplicity, with quick access to past data and the ability to filter, sort, and interact with the records. 1. Overview Section Page Header: The header should display a concise title like "Your Booking History" or "Past Transactions", with an icon like FaHistory to represent history. Below, provide a quick summary of the number of bookings, payments made, and any pending actions (if applicable). Navigation Controls: Include a navigation bar with filters for: Date Range (from and to date) Service Type (dropdown for selecting "Tractors", "Labor", etc.) Status (dropdown for selecting "Completed", "Pending", or "Canceled") Payment Status (dropdown for selecting "Paid", "Unpaid") Sort Options: Allow users to sort bookings by date, amount, and service type. Use FaSortAmountDown and FaSortAmountUp icons to indicate sorting. 2. Booking History Table Table Layout: Display past bookings in a table format with clear headers and rows. The table should have: Booking ID (unique identifier) Service Type (tractor, labor, irrigation, etc.) Provider Name (with a link to their profile) Booking Date (with a MdCalendarToday icon) Amount Paid (with MdAttachMoney icon) Status (Completed, Pending, Cancelled) with a colored status indicator (green, orange, red) Payment Status (Paid, Unpaid) with a clear indication (colored circle or text) Action Buttons like "View Details", "Rebook" (with icons such as MdVisibility for "View" and FaRegClock for "Rebook") Pagination and Scroll: The table should support pagination for large data sets and infinite scrolling for mobile users. Add pagination controls like FaArrowLeft and FaArrowRight for easy navigation. 3. Payment History Section Payment Details: Below the booking table, provide a dedicated section for payment history, where farmers can view detailed transaction records, including: Transaction ID Service Booked Payment Method (Razorpay, Stripe, etc., with respective icons like FaCreditCard, FaPaypal) Amount (with MdAttachMoney icon) Payment Date (with MdDateRange icon) Payment Status (Paid, Pending, Failed) Status Tracking: For pending payments, allow users to retry payment with a button that opens the payment gateway (using an icon like MdPayment or FaRedo). 4. Detailed View of Bookings Booking Details Modal: When a user clicks on any row in the booking table, open a modal or dedicated page displaying full details of the booking, including: Provider Contact Information Service Description Service Duration Location Details (map link with FaMapMarkerAlt icon) Special Instructions (if any) Payment Breakdown (showing the exact breakdown of the service charges, including any discounts or additional costs) 5. Mobile Responsive Design Mobile Layout: On mobile devices, switch the table to a card style design with each booking displayed in a separate card with concise information. Show the most important data at the top, such as service type, provider, amount, and status. Use expandable sections to view additional details. Filters and Search should be at the top with dropdown menus or a collapsible sidebar. Tablet Layout: On tablets, the layout should adjust to a two column design with the booking history and payment history sections side by side. Ensure elements are appropriately spaced for easy touch interaction. 6. Design Aesthetics Color Scheme: Use a professional and agricultural theme with earth tones like green and brown, with accent colors for actions (blue for "View Details", green for "Completed", red for "Failed", and orange for "Pending"). Typography: Use clear, legible fonts like Roboto or Poppins for headings and body text. The headings should be bold and larger, with clear contrast from the background. Icons and Interactions: Use relevant React Icons throughout the page for a more visual and interactive experience. Icons like MdPayment, FaHistory, FaCreditCard, FaRegClock, MdVisibility should be used next to buttons for clear actions. 7. User Feedback and Actions Rebooking Button: Include a prominent "Rebook" button next to each past booking, allowing the farmer to quickly book the same service again. When clicked, the button should lead to a pre filled booking form with the same service, provider, and location. Cancel or Dispute: For canceled or disputed bookings, include a button like "Dispute This Booking" or "Request Refund" with a FaExclamationCircle icon. Upon clicking, the user should be directed to customer support or dispute resolution flow. Download/Export: Offer the option to download or export booking history as a PDF or CSV file, using a MdDownload icon for this feature. 8. Feedback and Support Support Option: Include a floating help button on the bottom right (with FaComments or AiOutlineMessage) for users to ask for assistance related to any issues with their bookings or payments. 9. Accessibility Considerations Make sure the text is legible with sufficient contrast against the background. Use large clickable areas for all buttons to improve usability on touch devices. Ensure proper alt text for all images and icons to support screen readers. Provide keyboard navigation support for users who may need to navigate without a mouse. This Past Booking History Page should help farmers easily track their past services, payments, and booking status with clear actions to rebook, dispute, or review details. It should be responsive, modern, and focused on providing quick access to key information with minimal effort, ensuring a smooth and efficient user experience.