E D I Dashboard - Copy this React, Mui Component to your project

To improve your EDI Dashboard and make it more functional, responsive, and user-friendly based on the details provided, here is a refined approach: Dashboard Enhancements for Full Functionality: 1. Navigation and Layout Improvements: Sticky Navigation Bar: A sticky header at the top should always show the main sections: Overview, Tenders, Responses, Issues, Invoices, EDI Log, and Partners. This ensures easy access to different parts of the dashboard without scrolling. Tenders Tab with Sub-Tabs: Under the Tenders tab, include three sub-tabs: New Tenders: Displays incoming tenders that are yet to be processed. Received Tenders: Shows tenders that have already been processed. Rejected Tenders: Displays tenders that were rejected, with reasons available for review. 2. Shipment Information Table: For each tender section (New, Received, Rejected), display a Shipment Information Table below the metrics with these columns: Column Name Description RECEIVED Date and time when the shipment was recorded (e.g., "2024-01-18 09:30 AM"). REFERENCE Shipment reference number, Tender ID, and Purchase Order number (e.g., Shipment Ref: SHP12345, Tender ID: TND789, PO: PO046789). BILL TO The company and its address responsible for the payment (e.g., "DPP Logistics Inc, 123 Logistics Way, Atlanta, GA"). STOP Sequential stop numbers for shipment destinations (e.g., Stop 1: ABC Warehouse, Savannah, GA, Stop 2: ABC Warehouse, Stuarts Draft, VA). SHIPMENT DETAILS Details about the shipment, including the type of equipment (e.g., "Dry Van"), weight (e.g., 24,000 lbs), miles (e.g., 450 miles), and rate (e.g., $2,500). DESCRIPTION A brief description of the contents of the shipment (e.g., "Kitchen Cabinets"). EDI STATUS Indicates the EDI status of the shipment, such as "New Tender" or "Processed", with a selection button for actions like accepting or rejecting the tender. 3. Responsive Design and Usability: Full Responsiveness: Mobile & Tablet Views: On smaller screens, stack the metric cards vertically for a cleaner and more compact view. Also, make the Tenders Table collapsible, so users can expand it when needed. Interactive Filters: Include a filter function that allows users to search tenders by date range, tender ID, or status (new, received, rejected). Export and Action Buttons: Add an Export button at the top of the table, allowing users to download shipment data in CSV or Excel format. Add action buttons in the EDI STATUS column to accept or reject tenders directly from the table (e.g., "Accept", "Reject", "View Details"). 4. Alerts Section: Alert System: Use alert cards at the top of the dashboard to notify users of important updates: Red Alert (Critical): For system issues, like "System maintenance scheduled in 2 hours". Yellow Alert (Warning): For performance issues or potential delays, like "Network performance degradation detected". Blue Alert (Informational): For successful processes, such as "New partner integration completed successfully". Each alert should have a "Take Action" button that directs users to the section where they can resolve or investigate the issue. 5. Search Functionality: Add a Search bar at the top-right corner of the dashboard to allow users to quickly search for tenders, invoices, or shipments by ID or partner name. This is particularly useful when managing large datasets. 6. Analytics and Trends: Transaction Trends Graph: Keep the transaction trends graph with time periods selectable (e.g., Last 7 Days, Last 30 Days, Custom Range). This allows users to quickly visualize data over different time spans. UI Design Mock-up: The layout could look like this: Top Navigation Bar: Sticky navigation for easy access to different sections. Main Dashboard: Metric cards at the top for Total Transactions, New Tenders, Today Accepted, Last 30 Days, Rejected, etc. Below, a dynamic Transaction Trends graph with the ability to filter by different date ranges. Tenders Table: For each tab (New, Received, Rejected), display the shipment table with all relevant details, including EDI STATUS and action buttons. Alerts Section: Positioned at the top of the dashboard, with critical, warning, and informational alerts. Export/Filter Options: Positioned above the Tenders Table for easy data export and filtering. Additional Features: Pop-up Modals: When users click on "View Details" for a shipment, a pop-up modal should show more detailed shipment data and provide options for editing or resolving issues. Analytics: Offer charts or visualizations on the Tenders page, such as pie charts to show the ratio of accepted vs. rejected tenders. This design will make the EDI Dashboard clean, interactive, and functional while improving user experience with easy navigation, real-time insights, and actionable alerts.