Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web dashboard designed for startup founders to monitor their financial health metrics in real-time. It integrates a Health Metrics Form and a 12-month Health Metrics Dashboard, allowing founders to easily input key financial data and visualize trends over time.

## CORE FEATURES
1. **Health Metrics Form**: A user-friendly form allowing founders to input essential metrics, such as current cash position, monthly income, and burn rate, with real-time validation and feedback.
   
2. **Auto-Calculated Metrics**: Automatically computes critical financial metrics like Net Burn Rate and Runway, providing instant visual feedback through color-coded indicators for financial health.

3. **Health Metrics Dashboard**: Displays a 12-month overview of key metrics including Current MRR, Burn Rate, and Paying Customers, with interactive monthly trend charts and a data breakdown table.

4. **Real-Time Updates**: Ensures that all displayed metrics update instantly as new data is entered into the form, providing an accurate snapshot of the startup's financial health.

5. **Interactive Filters**: Allows users to filter data trends over various time ranges (3, 6, 9, or 12 months) for more detailed analysis.

6. **Narrative Insights**: Provides contextual insights based on data trends highlighting strengths, risks, and actionable recommendations.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design emphasizing a clean and simple interface with ample white space, keeping distractions to a minimum and enhancing focus on the key metrics.
  
- **Color Mode**: Light theme featuring dark text on light backgrounds, utilizing a color palette of Primary Purple (#913f98), Success Green (#059669), Warning Yellow (#d97706), and Error Red (#dc2626).

- **Layout**: 
  - **Desktop**: Two-column grid layout with the Health Metrics Form on the left and the Dashboard metrics on the right.
  - **Mobile**: Single-column layout with stacked input fields and metric cards for optimized usability on smaller screens.

- **Typography**: Use a sans-serif font for clarity and legibility, maintaining consistent spacing and hierarchy throughout the interface to enhance readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and maintainability.
  
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design changes and consistent application of styles.

- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design ethos.

- **State Management**: Use React's built-in state management for local state and potentially Redux or Context API for global state if necessary.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and integrate Tailwind CSS.
   
2. **Create Health Metrics Form**: Build the form component with required inputs and validation rules for each field, ensuring real-time feedback as users type.

3. **Implement Auto-Calculated Metrics**: Add logic to compute Net Burn Rate and Runway, displaying the results with appropriate color codes based on the values.

4. **Design Health Metrics Dashboard**: Create the dashboard layout with charts and tables to visualize the 12-month financial trends, ensuring real-time updates are correctly implemented.

5. **Integrate Interactive Filters**: Implement filtering functionality for the dashboard metrics to allow users to customize the time ranges displayed.

6. **Establish Data Integration**: Hook into the useHealthMetrics API to fetch and save metrics, ensuring the database table `startup_health_metrics` is properly structured for auto-calculated fields.

7. **Testing**: Conduct thorough testing to ensure all components function correctly, including validation, real-time updates, and responsiveness across devices.

## USER EXPERIENCE
Users will interact with the application by entering their financial metrics into the Health Metrics Form, receiving immediate feedback on their input. Upon submission, they will see their metrics saved successfully or receive notifications for any errors. The dashboard will dynamically update to reflect their inputs, showcasing trends and insights that help guide their financial decisions. The minimalist design ensures a focus on essential information, making it easy for founders to assess their startup’s financial health at a glance.