Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web dashboard designed to visualize and analyze data related to sustainability and energy consumption. The main purpose is to provide users with comprehensive insights through interactive charts, indicators, and filtering options, enabling them to make informed decisions regarding energy efficiency.

## CORE FEATURES
1. **Energy Consumption Graphs**: Interactive line and bar graphs displaying historical energy consumption data over selected time frames.
2. **Efficiency Indicators**: Real-time indicators showcasing metrics such as energy efficiency ratios and comparisons with industry standards.
3. **Filtering Menu**: A user-friendly menu allowing users to filter data by month, year, and specific energy sources for tailored insights.
4. **Downloadable Reports**: Options for users to download reports of their energy consumption analysis in PDF or Excel formats.
5. **User Authentication**: Secure login system for users to access their personalized dashboards and save settings/preferences.
6. **Responsive Design**: A layout that adapts seamlessly to various screen sizes, ensuring usability across devices.

## 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 main layout will consist of a top navigation bar for filtering options, a central dashboard area for graphs and indicators, and a sidebar for additional navigation and user settings.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API for managing user data and application state.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS along with shadcn/ui for UI components.
2. **Create the Login System**: Implement user authentication, allowing users to securely log in and access their dashboards.
3. **Build the Dashboard Layout**: Develop the main layout structure with a responsive design, incorporating the top navigation bar, central dashboard area, and sidebar.
4. **Implement Graphs and Indicators**: Use a chart library (e.g., Chart.js or Recharts) to create interactive graphs displaying energy consumption data.
5. **Add Filtering Functionality**: Create the filtering menu that allows users to filter the displayed data based on their selections.
6. **Enable Report Downloads**: Implement functionality to generate and download reports based on the user's selected data and preferences.

## USER EXPERIENCE
Users will begin by logging into the application, where they will be greeted by a clean, minimalist dashboard. They can easily navigate through the filtering options to customize their data view. The interactive graphs will respond dynamically to their selections, providing a clear visual representation of energy consumption trends and efficiency indicators. The ability to download reports ensures that users can take insights offline for further analysis or sharing. The overall design emphasizes usability, ensuring a smooth and engaging experience across all devices.