Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as a financial dashboard that enables users to view and analyze their revenue, projections, and performance metrics. It features dynamic columns for various versions, allowing users to track expected totals and maintain data integrity across different scenarios.

## CORE FEATURES
1. **Monthly Composition Logic**: Integrates the current month’s totals into a single column, calculating the Total Expected from both Realized and Projected values.
   
2. **Dynamic Snapshot Columns**: Automatically generates columns for each version (W0, W1, W2, W3, W4, and Current), displaying the total for the month based on the designated formulas.

3. **Value Integrity Check**: Ensures that the displayed totals are accurate by filtering data strictly by version, preventing inflated values.

4. **Highlighted Metrics**: Focuses on key financial indicators like Net Revenue, TPV, and Gross Margin with distinct styles (Net Revenue in standard, TPV in standard, Gross Margin in a highlighted format).

5. **Responsive Design**: Adapts to various screen sizes while maintaining usability and aesthetics.

6. **Error Handling**: Provides visual cues when data is missing or when columns cannot be displayed due to lack of data for specific versions.

## 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 content area for the dashboard with sections for each financial metric, and dynamic columns for snapshots.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API for state management.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript support.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components.
3. **Create Layout Structure**: Set up the main layout with a navigation bar and a content area for the dashboard.
4. **Develop Core Components**: Build components for the Monthly Composition Logic and Dynamic Snapshot Columns.
5. **Implement State Management**: Use the Context API to manage the financial data and ensure proper data flow between components.
6. **Apply Styling**: Use Tailwind CSS to style components according to the specified design specifications.
7. **Test Functionality**: Ensure that all calculations are correct and that the application handles missing data appropriately.
8. **Optimize for Responsiveness**: Ensure the application is usable on various devices by testing and adjusting the layout as necessary.

## USER EXPERIENCE
Users will interact with a clean and intuitive interface, where they can quickly navigate through the dashboard to view their financial metrics. The main focus will be on the dynamic columns that display relevant data based on the selected version, making it easy for users to analyze their financial performance without confusion. The highlighted metrics will draw attention to important figures, enhancing usability and overall experience.