Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as a dynamic dashboard that visualizes financial data based on real-time metrics from Supabase. It allows users to see revenue, transactions, and other key performance indicators (KPIs) for the current month and the previous 12 months, with a focus on flexible data representation and visual clarity.

## CORE FEATURES
1. **Dynamic Column Generation**: Automatically generates columns for versions starting with 'W' based on existing data, displaying only those versions with available records.
2. **13-Month Moving Time Axis**: Dynamically calculates and displays the last 13 months, grouping previous months by year with color-coded headers for enhanced readability.
3. **Visual Styling of Metrics**: Implements specific styling for key metrics, including bold background highlights for Net Revenue, TPV, and Gross Margin, with designated colors for different types of metrics.
4. **FP&A Calculation Engine**: Integrates complex financial calculations, including tax deductions and commission structures, ensuring accurate reporting of financial metrics.
5. **Responsive Design**: Adapts seamlessly across devices, ensuring a smooth user experience regardless of screen size.

## 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 header, a dynamic table for the financial metrics, and a footer. The table will adjust its columns based on the data retrieved from Supabase, with clear grouping and visual distinctions for each month.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in context or Zustand for managing global state if necessary

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Database Connection**: Establish a connection to Supabase using the provided API key and client.
3. **Dynamic Column Logic**: Implement logic to fetch data from Supabase, analyze the results, and dynamically generate columns for the current month's dashboard.
4. **Time Axis Calculation**: Create a function to calculate the 13-month range based on the current date and format the display for the dashboard.
5. **Metric Stylization**: Apply the specified styles for each metric according to the requirements, ensuring that bold and color-coded highlights are visible.
6. **FP&A Calculation Implementation**: Integrate the necessary calculations for financial metrics, ensuring tax deductions and commission rules are applied correctly.
7. **Testing**: Conduct thorough testing to verify the accuracy of dynamic columns, calculations, and overall responsiveness of the dashboard.
8. **Deployment**: Prepare the application for deployment, ensuring all configurations are set for a live environment.

## USER EXPERIENCE
Users will interact with a clean, intuitive interface that allows them to monitor financial performance at a glance. They can easily navigate through the dynamic columns and time axis, with visual cues guiding them to key metrics. The application will ensure quick loading times and responsive design to facilitate a seamless experience across all devices.