Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web-based energy dashboard designed for monitoring photovoltaic (PV) plants and battery systems within an industrial company. It provides executives and plant managers with real-time insights into energy production, consumption, and flow in a clean, minimalistic interface that prioritizes usability and clarity.

## CORE FEATURES
1. **Single-Screen Dashboard**: All essential information is visible on one page, allowing users to quickly grasp key metrics without navigating away.
2. **Current Status KPIs**: Large KPI cards display real-time metrics for solar power produced, battery power, grid power, and total plant consumption, accompanied by tooltips for easy understanding.
3. **Energy Flow Diagram**: A schematic representation of energy flows, showing solar input, battery status, grid interactions, and plant consumption with clear visual indicators.
4. **Time Range Selector**: Allows users to filter chart data by day, month, or year, while keeping KPI data fixed to the current day.
5. **View Selector**: Users can switch between aggregated views of all plants or individual plant details, enhancing data visibility.
6. **Responsive Design**: The dashboard is optimized for desktop use but adjusts to mobile screens, simplifying certain charts to maintain usability.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, a limited color palette, and a strong focus on typography to ensure clarity.
- **Color Mode**: Light theme with dark text on light backgrounds, emphasizing readability and professionalism.
- **Layout**: The layout consists of a top bar featuring the company logo on the left and a view selector on the right. Below the top bar, the dashboard content is organized in a single vertical stack, maintaining a clear hierarchy and flow.
- **Typography**: 
  - **Primary Font**: BB Torsos Pro for headings and KPIs, ensuring a modern and professional appearance.
  - **Secondary Font**: Inter Regular for labels, tooltips, and descriptions, enhancing readability and user experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling, promoting rapid design iterations while maintaining consistency.
- **UI Components**: Utilize shadcn/ui for pre-styled components, ensuring a cohesive look and feel. #0c80e6 color principal #ffffff color secundario #C7F077 color accent tipografía: BB Torsos Pro tipografía complementaria: Inter Regular
- **State Management**: Implement context API or a state management library to manage data flow efficiently.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using TypeScript and install necessary dependencies, including Tailwind CSS and shadcn/ui.
2. **Create the Layout**: Develop the top bar with a logo placeholder and view selector. Ensure the layout is responsive with a mobile-first approach.
3. **Implement KPIs**: Design and code the KPI cards, incorporating Plotly charts for data visualization. Ensure tooltips are clear and informative.
4. **Design the Energy Flow Diagram**: Use SVG or a relevant library to create a schematic illustration of energy flow, including color coding for active states.
5. **Add Filters**: Implement the time range selector for charts, ensuring it only affects the relevant data while keeping KPIs static.
6. **Test Responsiveness**: Review the dashboard on various screen sizes, adjusting layouts and components as needed to maintain usability on mobile devices.
7. **Conduct User Testing**: Gather feedback from target users to refine the design and functionality, making adjustments based on real-world usage.

## USER EXPERIENCE
Key user interactions include selecting different views for plant data, adjusting the time range for charts, and hovering over KPI cards to reveal tooltips. The layout ensures that users can easily navigate through the information presented, with a focus on intuitive design that simplifies complex data into digestible insights. The overall experience is designed to empower non-technical users to make informed decisions quickly and efficiently.