Styled Card - Copy this React, Mui Component to your project

To further enhance the functionality and user experience of the "Shipments Overview" dashboard, here is a comprehensive update and reorganization of the dashboard’s layout and features. This includes an improved action button design for streamlined user interactions: Shipments Overview Dashboard Design Header and Navigation: Main Title: "Shipments Overview" — Prominently displayed for immediate recognition. Simplified Tabs: Designed to enhance user navigation and quick access to specific data: Overview: Provides general insights across all shipment modes. LTL: Dedicated to metrics specific to Less Than Truckload shipments. Truckload: Offers insights into full truckload shipments. Intermodal: Displays data on multi-modal transportation shipments. Ocean: Focuses on specialized data regarding ocean freight operations. Search and Filtering Capability: Dynamic Search Bar: Strategically positioned to facilitate searches by BOL, PRO number, origin, destination, or status. This bar includes intuitive placeholder text to aid user interaction. Filters Feature: Visually distinct 'Filters' button allows for advanced and specific queries, enhancing the ability to perform detailed analyses and reporting. Metrics and Data Visualization: Total Shipments: Quantity: "1,234" — Represents the total number of shipments over the last 30 days. Graph: Interactive line graph that visualizes monthly shipment trends, highlighting volume fluctuations. LTL Shipments: Quantity: "456" — Active LTL shipments. Graph: Area graph illustrating the flow and variability of LTL shipments over time. Truckload Shipments: Quantity: "789" — Current shipments in transit. Graph: Soft-colored area graph tracking the volume of truckload shipments, emphasizing logistical dynamics. Intermodal Shipments: Quantity: "123" — Scheduled shipments. Graph: Line graph offering insights into the scheduling versus actual movements. Ocean Shipments: Quantity: "67" — Active ocean shipments. Graph: Simplified line graph depicting trends and seasonal variations in ocean shipments. Detailed Shipments Table: Layout: Features organized columns including BOL #, PRO #, PO #, Created Date, Pickup Date, Origin, Destination, Carrier, and Status, providing a comprehensive overview of each shipment. Status Indicators: Color-coded tags for quick status recognition such as 'In Transit', 'Delivered', and 'Scheduled'. Action Dropdown: Each row includes a three-dot menu offering actionable options like 'View Details', 'Edit', and 'Delete' to enhance management control and operational efficiency. Design and Usability Enhancements: Color Palette: A coherent scheme that differentiates data types while maintaining visual harmony across the dashboard. Interactive Elements: Graphs and other data points are interactive, offering expanded views on hover or click. Responsive Design: Ensures seamless functionality across various devices, prioritizing compatibility for both mobile and desktop environments. Accessibility Features: Enhances readability, navigability, and user interaction, accommodating a broad range of user needs. Action Button Enhancement: Replace Action Icons: Introduce a three-dot menu for each row in the "Shipments" table to streamline user actions: View Details: Opens a detailed view of the shipment, including comprehensive data and historical tracking. Edit: Enables users to modify shipment details directly from the dashboard for real-time updates. Delete: Allows for the removal of shipment records with a confirmation step to prevent accidental deletions. This refreshed design strategy for the "Shipments Overview" dashboard aims to not only streamline operations but also enhance user interaction, providing a holistic and functional view of the shipment lifecycle. The focus is on ensuring that all dashboard elements are accessible, adaptable, and responsive to meet the diverse needs of users across the logistics domain. veiw details add this Status Indicator: Displays the current shipment status dynamically with intuitive color coding: Pending: Yellow Pre-transit: Blue In Transit: Orange Out for Delivery: Green Delivered: Dark Green Failed Delivery: Red Return to Sender: Purple Cancelled: Grey Declined: Maroon Disputed: Pink 2. Shipment Details Tab Basic Information: Mode: LTL Shipping Type: Dry Van Shipping ID: #3534534 Service: Maintenance Quote ID: #33 Transit Days: Estimated 35, Actual 3 Estimated Delivery Time: 09:44 AM Reference Number: [Editable field for user input] Insurance Details: Condition of Goods: New Value of Goods: $3,242 3. Shipment Items Tab Commodity Type: 11 Pieces: 1 Pallets: 1 Hazmat: No Dimensions: 11 x 22 x 33 inches Weight: 33g Weight Class: 200 lbs Total Quantity: 5 Total Weight: 400 lbs Temperature Requirements: [Selectable] Pallet Count: 400 Bill of Lading Instructions: [Editable Area for User Input] 4. Route Details Tab Stop 1 to 5 Details: Sequentially lists stops with editable fields for Address, Mile, Phone, Email, Carrier Info, etc., each with the same address but incremented 'Mile' count. Specific Carrier and Driver Details Provided 5. Notes Section Title: [Editable Title] Description: [Editable Description] 6. Financials Tab Receivable: Bill To: Keri Enterprises Inc. Address: 111 Deerwood Road Suite 200 Phone: 650-055-57896 Fax: 650-231-1040 Email: qbwebsamplecompany@yahoo.com Currency: Dollars Bill Date: 01/27/2021 Invoice No.: 10000 Payment Method: Check Customer Type: Shippers Payable: Pay To: [Not specified] Address: [Not specified] Phone: [Not specified] Fax: [Not specified] Email: [Not specified] Currency: Dollars Invoice Date: 01/27/2021 Invoice No.: 10000 Payment Method: Check Customer Type: Freight Broker Rates: Description: Fuel Surcharge Quantity: 1 Rate: $180 Billed Amount: $180 Total Charge: $0 7. Documents Tab Document Management: Space for uploading and managing documents relevant to the shipment. 8. Commissions Tab Commission Details: Editable fields for entering and adjusting commission details.