You are an expert software architect. Design a single-page application (SPA) using React for a supply chain management and shipping optimization platform tailored for Amazon sellers. The application, named 'ShipSmart,' should address the problem of unreliable freight forwarding and unexpected fees. Here's the detailed specification:
**Core Functionality:**
1. **Supplier and Forwarder Integration:**
* Allow users to connect their existing supplier and freight forwarder accounts via API integrations (mock integrations are sufficient for this MVP).
* Display a unified dashboard showing all active shipments, their origins, destinations, and current statuses.
2. **Intelligent Routing Optimization:**
* Implement a basic algorithm that suggests optimal shipping routes based on cost, speed, and reliability (use dummy data for this).
* Visually present the suggested routes on a map using a library like Leaflet or Google Maps (a static image map is also acceptable for MVP).
3. **Real-time Tracking and Notifications:**
* Simulate real-time shipment tracking using a polling mechanism that updates shipment statuses every 5 minutes.
* Display shipment milestones (e.g., 'In Transit,' 'Arrived at Port,' 'Out for Delivery') with timestamps.
* Implement a notification system (using browser notifications or a simple in-app alert) to inform users of significant status changes or potential delays.
4. **Unexpected Fee Prediction:**
* Based on historical data (use a predefined dataset), predict potential unexpected fees associated with each shipment (e.g., customs duties, port fees).
* Display a breakdown of predicted fees with explanations.
5. **Shipping Cost Comparison and Analysis:**
* Allow users to compare shipping costs from different forwarders for the same shipment.
* Present the cost comparison in a clear, tabular format.
**UI/UX Requirements:**
* **Dashboard:** A central hub displaying all active shipments, key metrics (e.g., total shipping cost, average delivery time), and pending notifications.
* **Shipment Details Page:** A dedicated page for each shipment, showing its complete history, current status, route, predicted fees, and cost comparison.
* **Settings Page:** Allow users to manage their supplier and forwarder integrations, notification preferences, and profile information.
* **Responsive Design:** Ensure the application is fully responsive and works seamlessly on desktop and mobile devices.
* **Clean and Intuitive Interface:** Use a modern UI framework (e.g., Material UI, Ant Design) to create a visually appealing and easy-to-use interface.
**Technical Specifications:**
* **Framework:** React
* **State Management:** React Context API or Redux (optional, for more complex state management)
* **Styling:** CSS-in-JS (e.g., Styled Components, Emotion) or CSS Modules
* **Data Fetching:** `useEffect` hook with `fetch` API (mock API endpoints with dummy data)
* **Mapping Library:** Leaflet or Google Maps (or a static image map)
* **Notification Library:** Browser Notifications API or a custom in-app notification component
**Data Structures:**
* **Shipment Object:** `{ id: string, supplier: string, forwarder: string, origin: string, destination: string, status: string, milestones: array, predictedFees: object, costComparison: array }`
* **Milestone Object:** `{ timestamp: date, status: string }`
* **PredictedFees Object:** `{ customsDuties: number, portFees: number, otherFees: number, total: number }`
* **CostComparison Object:** `{ forwarder: string, cost: number }`
**Deliverables:**
* Complete React SPA code, well-structured and documented.
* Clear instructions on how to run the application locally.
**Focus on:**
* Functionality over perfect aesthetics (prioritize core features).
* Code clarity and maintainability.
* Use of appropriate libraries and frameworks.
* Adherence to React best practices.