Drawer Width - Copy this React, Mui Component to your project

Vehicle List Screen! This page provides an overview of all the vehicles in your fleet, with quick access to key information and vehicle images. Here’s how the components are structured: 1. Vehicle Overview Each vehicle in the fleet is displayed as a card or table row with the following key components: Vehicle Image: Display a clear image of the vehicle for easy identification. Option for users to click on the image for a larger view. Vehicle Details: Vehicle Make & Model: (e.g., Toyota Corolla) Vehicle Registration Number: (e.g., XYZ 1234) Vehicle Type: (e.g., Sedan, SUV, Luxury) Vehicle Capacity: Number of passengers (e.g., 4 passengers) Odometer Reading: Current mileage (e.g., 25,000 km) Vehicle Color: (e.g., Red) Year of Manufacture: (e.g., 2020) 2. Vehicle Status Vehicle Availability: Show whether the vehicle is available or assigned to a ride. (Green for available, Red for in-use or unavailable) Vehicle Health Status: Active: If the vehicle is in working condition and ready for bookings. In Maintenance: If the vehicle is currently undergoing repairs or servicing. Out of Service: If the vehicle is temporarily out of service for any reason. 3. Documentation and Compliance Document Expiry Reminders: Insurance Expiry Date: Shows when the vehicle’s insurance is about to expire (with a warning if close). Registration Expiry Date: Displays the vehicle registration expiry date. Inspection Certificate Expiry: Displays the date of the last inspection and whether a new inspection is required soon. Document Uploads: Quick access to upload or view documents like the vehicle registration, insurance policy, and inspection certificates. 4. Financial and Operational Details Revenue Generated: Displays the total revenue generated by the vehicle based on completed bookings. Shows a breakdown of earnings (fare, tips, commissions). Fuel Expenses: Shows fuel usage and associated costs for the vehicle over time. Maintenance and Service History: A quick overview of any past maintenance, repairs, and service records with dates and descriptions. 5. Actions and Controls Edit Vehicle Details: Button to edit the vehicle’s information, including model, capacity, registration, and documentation. View Ride History: Button that leads to a detailed history of past bookings for this vehicle, showing dates, fares, customer feedback, and driver performance. Assign Vehicle to Driver: Button to assign the vehicle to a specific driver for a set period or indefinitely. Schedule Maintenance: Button to schedule a future maintenance or inspection for the vehicle. Remove Vehicle: Button to remove the vehicle from the fleet if it is permanently out of service. 6. Filter and Search Options Search Bar: Allow users to search vehicles by make, model, registration number, or vehicle type. Filter Options: Status Filter: Filter vehicles by their status (Active, In Maintenance, Out of Service). Vehicle Type Filter: Filter by vehicle type (Sedan, SUV, Luxury, etc.). Capacity Filter: Filter by the number of passengers (e.g., 4-seat, 7-seat). Document Expiry Filter: Filter vehicles whose documentation is about to expire soon. Sort Options: Sort by Odometer Reading, Vehicle Make & Model, or Last Service Date. 7. Pagination/Scrolling Infinite Scrolling or Pagination: For larger fleets, ensure that the list is broken into manageable pages or an infinite scroll option is enabled to load vehicles progressively. This screen gives you a full overview of each vehicle in the fleet, its current status, financial performance, operational details, and documentation compliance. You can easily track the status of all your vehicles and take necessary actions with a few clicks.