Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application, titled “Мини-планировщик бюджета,” serves as a simple, one-page budget planner designed for users to manage their monthly income and expenses efficiently. The application operates entirely on the client side without the need for login or backend support, allowing users to quickly input their financial data and view their budgeting insights.

## CORE FEATURES
1. **Income Input**: Users can enter their monthly income, which is a required field.
2. **Mandatory Expenses Input**: Users can input their monthly mandatory expenses, another required field.
3. **Savings Goal**: Users set a target savings amount, which is necessary for calculating their budgeting plan.
4. **Monthly Savings Calculation**: The app calculates how much users can save each month, with an option to toggle saving a percentage of the remaining balance.
5. **Progress Visualization**: The application provides a visual representation of user progress towards their savings goal through progress bars and, optionally, a small chart.
6. **Real-time Feedback**: Results update instantly as users modify their inputs, ensuring a dynamic and interactive experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: Modern minimalist design featuring fintech-inspired cards that emphasize clarity and simplicity. A clean aesthetic with ample white space and a limited color palette enhances usability.
- **Color Mode**: Default light theme with dark text for optimal readability, including an optional toggle switch for dark mode.
- **Layout**: The application is structured into two columns on larger screens (single column on mobile):
  - **Left Column**: Contains the “Мой месяц” input form with large, intuitive input fields.
  - **Right Column**: Displays the “Сводка” results along with a progress visualization section.
- **Typography**: Utilize a sans-serif font for clean readability, with larger font sizes for headings and results, ensuring that key figures stand out and are easy to read.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust, type-safe development experience.
- **Styling**: Tailwind CSS for responsive, utility-first styling that aligns with the minimalist design approach.
- **UI Components**: Use shadcn/ui library for consistent UI elements and components.
- **State Management**: Local component state management is sufficient for this application.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui components.
2. **Create Layout**: Implement the responsive layout with two columns using Tailwind CSS. Ensure the layout adjusts for mobile viewing.
3. **Build Input Form**: Develop the “Мой месяц” form with input fields for monthly income, mandatory expenses, and savings goal. Include validation for required fields and numeric inputs.
4. **Add Toggle for Savings**: Implement a toggle switch for optional savings percentage along with a slider for inputting the desired percentage.
5. **Calculate Results**: Create functions to compute the remaining balance, monthly savings, time to goal, and display results dynamically.
6. **Visualize Progress**: Incorporate a progress bar to show the path to the savings goal and optionally a small chart for income vs. expenses.
7. **Implement Real-time Updates**: Ensure that all calculations trigger on input changes for an interactive user experience.
8. **Add Additional Features**: Include buttons for filling example data, resetting the form, and saving user data in localStorage if desired.

## USER EXPERIENCE
The user interacts with the application by entering their financial data into the form. As they fill in their income, expenses, and savings goal, the results in the “Сводка” section update in real time. The progress bar visually indicates how close they are to their goal, providing immediate feedback and motivation. The interface remains simple and approachable, with friendly microtext guiding users through the process, ensuring a seamless and engaging experience.

This comprehensive prompt will help create the desired minimalist budget planner application effectively.