Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to manage financial modules with a focus on budget planning and expense tracking linked to suppliers, projects, and contracts. Users will be able to create a hierarchical budget plan, compare forecasted versus actual expenses, and manually set up cash flows for better financial oversight.

## CORE FEATURES
1. **Hierarchical Budgeting**: Users can create an unlimited number of parent-child levels within the budget structure, allowing for detailed tracking of expenses and revenues associated with projects, suppliers, and contracts.

2. **Budget vs. Actual Comparison**: The application will provide insights into the differences between budgeted amounts and actual expenses, helping users make informed financial decisions.

3. **Cash Flow Management**: A dedicated submenu within the application will allow users to manually plan their cash flows, facilitating a clear overview of financial statuses based on selected budgets.

4. **Supplier and Contract Linking**: Each expense entry can be linked to specific suppliers and contracts to allow for better tracking and accountability of financial commitments.

5. **Interactive Dashboard**: A visual dashboard will provide key metrics and visualizations of budget performance, enabling users to easily monitor their financial health.

6. **User Authentication**: To ensure data security, the application will include a user authentication system for managing access and user roles.

## 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 easy access to different sections, a sidebar for budget selection, and a central content area displaying metrics, forms, and tables. The dashboard will feature visual components like graphs and charts to represent financial data clearly.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux (if needed for complex state management).

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS, shadcn/ui, and Redux (if applicable) to manage state.
3. **Create Components**: Develop key components including:
   - Navigation Bar
   - Budget Management Forms
   - Cash Flow Management Interface
   - Dashboard for visualizations
4. **Implement Router**: Set up React Router for navigation between main sections of the application.
5. **Connect to Backend**: Integrate with a backend service (e.g., REST API) to handle data storage and retrieval for budgets, expenses, and user authentication.
6. **Design UI**: Apply Tailwind CSS classes to style components based on the minimalist design specifications.
7. **Testing**: Conduct thorough testing for functionality, user experience, and responsiveness across devices.

## USER EXPERIENCE
Users will be greeted with a clean and straightforward interface that emphasizes simplicity and ease of navigation. The main dashboard will showcase key financial metrics, while users can quickly access budgeting and cash flow tools via the navigation bar. Interactive elements will provide real-time feedback, making it easy for users to understand their financial position at a glance. The application will prioritize responsiveness to ensure usability on both desktop and mobile devices.