Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
OceanLog is a web application designed to provide an executive dashboard for maritime logistics. It aggregates data from an external API to deliver real-time insights into shipping metrics, enhancing operational efficiency and decision-making for logistics managers.

## CORE FEATURES
1. **Big Numbers Display**: Showcase total shipments categorized by status (delivered, in transit, delayed, pending) alongside the total number of active and damaged containers.
2. **Bar Chart for Shipments by Carrier**: Present a visual representation of total shipments segmented by carrier to identify performance metrics.
3. **Horizontal Bar Chart for Weight Shipped by Port**: Display shipping weights organized by port of origin, allowing users to analyze shipping volume effectively.
4. **Pie Chart for Destination Country Distribution**: Visualize the distribution of shipments based on their destination countries, providing insights into international logistics.
5. **Secure API Integration**: Utilize Supabase for secure token management and API calls, ensuring no sensitive data is exposed in the frontend.
6. **Loading State and Error Handling**: Implement user-friendly loading indicators and error messages to enhance the user experience during data retrieval.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The layout will consist of a top navigation bar, a main dashboard area displaying the big numbers and visual metrics, and a responsive design that adjusts gracefully on different screen sizes.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (or Context API if preferred for simpler state management)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (Tailwind CSS, Recharts, Supabase).
2. **Configure Supabase**: Set up Supabase for user authentication and API management to securely handle tokens and API calls.
3. **Create UI Components**: Develop reusable components for big numbers, charts (bar and pie), and loading/error states using shadcn/ui.
4. **Implement Data Fetching**: Create functions to fetch data from the external API, handling authorization via Bearer Token and integrating Supabase for security.
5. **Visualize Data**: Use Recharts to create the necessary chart components, ensuring they are responsive and align with the minimalist design aesthetic.
6. **Test and Optimize**: Conduct thorough testing for performance, usability, and responsiveness. Optimize the user interface and experience based on feedback.

## USER EXPERIENCE
Users will interact with the OceanLog dashboard by viewing key metrics on the landing screen, navigating through intuitive charts and big number displays. Loading indicators will provide feedback during data retrieval, while error messages will guide users in case of issues. The clean, minimalist design will ensure that users can focus on the data without distractions, facilitating quick decision-making and operational oversight.