Styled Card - Copy this React, Mui Component to your project
Improved Load Board Design: Route Map Integration: Each shipment in the table should have a small "Map View" icon or button that opens a route map for the specific shipment. The map should show the origin, destination, and route path. Add markers on the map for intermediate stops or key locations along the route. The map should be interactive (zoomable and pannable), and you could integrate a dynamic route feature showing traffic and estimated time of arrival. Shipment Content Details: Add a "Shipment Details" button next to each load on the list, opening a popup or modal with additional details about the shipment. Cargo type (e.g., Fragile, Perishable, etc.) Loading/unloading instructions Special handling notes Delivery instructions Enhanced Table Display: Price Comparison: Show both the price you’re offering and the market average more prominently. You can use color-coding (e.g., green for competitive, red for higher than average) to visually highlight if the price is in line with the market rate. Load Status: The current status (Available, In Transit) should be more visible with a color-coded indicator that matches the status label (e.g., green for Available, orange for In Transit). Action Buttons: Place action buttons such as Place Bid and Show Map in the same row, clearly defined by icons and labels to make them intuitive. Additional Filters: Shipment Content Type: Allow filtering by shipment content type (e.g., Refrigerated, Dry Van). Price Range: Add a slider to filter by price range. Date Range: The date range filter should dynamically update the load availability list based on the chosen range. Mobile Optimization: Ensure the layout is responsive so that it adjusts nicely on smaller screens, especially the table and map integration. The Map View should open in a lightbox or pop-up, ensuring users can see both the table and the map at the same time.