"Create a high-fidelity professional dashboard for a 'Gestão Portuária Integrada' platform for Instituto Evereste.
Visual Identity: Use a modern tech-driven design with a color palette of deep blue, slate gray, and clean white. Include the placeholder for 'Instituto Evereste' logo.
Key Sections to Include:
- Real-Time Maritime Map: A central widget showing a ship tracking map (MarineTraffic style) with vessel icons, routes, and speed data [1, 2].
- Integration Status Bar: Icons showing live connection status with official systems: 'Porto Sem Papel (PSP 2.0)', 'Siscomex', and 'Mercante' [3, 4].
- AI Predictive Analytics Card: A section for 'Predictive Berth Management' showing estimated arrival times (ETA) and berth occupancy schedules using AI [4].
- Operational KPIs: Charts for 'Queue Monitoring', 'Gate Flow', and 'Documentation Traceability' [4].
- User Roles: Ensure the interface looks tailored for Port Managers, Shipowners, and Maritime Agents [5].
Style: Clean, professional, and data-heavy but organized. The UI should look like a mission-critical command center (Smart Port Command Center). Ensure the navigation is modular and parametric as per the system's architecture [6]."
Now let me install the charting library and create the dashboard. I'll need to install recharts and a map library for the maritime visualization.
Now I'll create the dashboard with a command center design. Let me update the globals.css with the dark theme, update the layout, and build out the components.
Now let me create all the dashboard components:
Let me verify the dashboard is working correctly in the browser:
The dashboard is looking great! Let me scroll down to see the full view and check if there are any issues to fix:
The dashboard is now complete and looking professional. Let me also test the mobile view to ensure responsiveness:
Excellent! The dashboard is fully responsive and working well on mobile. Let me close the browser and provide a summary:
O dashboard de Gestão Portuária Integrada do Instituto Evereste está completo! Implementei todos os requisitos solicitados:
Funcionalidades Criadas:
- Mapa Marítimo em Tempo Real - Visualização interativa com navios posicionados, berços, rotas e legenda por tipo de embarcação (Container, Tanker, Graneleiro). Clique em navios para ver detalhes.
- Barra de Status de Integração - Conexões em tempo real com PSP 2.0, Siscomex e Mercante, mostrando latência e status de cada sistema.
- Card de Analytics Preditiva com IA - Previsões de ETA com nível de confiança, sugestões de berços, tempos de espera estimados, ocupação de berços e alertas preditivos de congestionamento.
KPIs Operacionais:
- Monitoramento de Filas (gráfico de área)
- Fluxo de Gates (entradas/saídas por hora)
- Rastreabilidade Documental (status em tempo real)
- Programação de Navios - Tabela completa com ETA/ETD, berços, operações e carga, adaptada para mobile com cards.
- Seletor de Perfis - Interface adaptável para Gestor Portuário, Armador e Agente Marítimo.
O design segue a paleta solicitada (azul profundo, cinza ardósia, branco) com um visual de command center profissional e data-heavy, totalmente responsivo para desktop e mobile.