I want to integrate RiverSat river level monitoring into this codebase. RiverSat provides an embeddable iframe that displays real-time river water levels, forecasts, and historical data.
## Supported Rivers and Stations
**Rhine River:**
- maxau, kaub, cologne, duisburg, emmerich
**Mississippi River:**
- st_paul_mn, winona_mn, camanche_ia, grafton_il
## Embed URL Parameters
```typescript
interface RiverSatEmbedParams {
theme?: 'light' | 'dark' // Color theme (default: light)
river?: 'all' | 'rhine' | 'mississippi' // Filter to specific river (default: all)
station?: 'all' | Station // Show specific station (default: all)
stationview?: 'home' | 'chart' // Station view (default: home)
variant?: 'app' | 'panel' // Display variant (default: app)
}
```
Base URL: https://prod.insights.earthdaily.com/app/riverlevels/embed
Note: The embed defaults to light theme. Only add `theme=dark` if you need dark mode.
## Your Task
1. **Analyze the codebase** to understand the frontend architecture and identify where river level data would be valuable
2. **Find relevant screens** where logistics, shipping, supply chain, or weather data is displayed
3. **Look for existing data** that references rivers, ports, or locations near these stations
4. **Create a mapping** between any existing location/port data and RiverSat station IDs
5. **Propose integration points** where the RiverSat iframe should be embedded
6. **Generate the implementation plan** with specific files to modify and code to add
Present your findings as a structured plan before implementing.