Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Cashflow System is a web application designed to help users manage and track their financial inflows and outflows effectively. It provides a user-friendly interface that allows individuals and businesses to visualize their cash flow, generate reports, and make informed financial decisions.

## CORE FEATURES
1. **Dashboard Overview**: A central dashboard that displays key financial metrics, including total income, expenses, and net cash flow in a clean and minimalist layout.
2. **Income Tracking**: Users can easily add, edit, and categorize various sources of income, ensuring accurate tracking of financial inflows.
3. **Expense Management**: A comprehensive tool for recording and categorizing expenses, allowing users to keep a close eye on their spending habits.
4. **Reports Generation**: Users can generate detailed reports based on their cash flow data, helping them analyze trends and make informed decisions.
5. **Budget Planning**: A feature that allows users to set budgets for different categories and monitor their spending against these budgets.
6. **User Authentication**: Secure login functionality to ensure that users’ financial data is protected and accessible only to them.

## 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, a central dashboard area displaying key metrics and features, and a sidebar for navigation between sections like income, expenses, reports, and budget planning.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Zustand (or any preferred state management library)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript support and install necessary dependencies (React, TypeScript, Tailwind CSS, Zustand).
2. **Create Project Structure**: Organize your project directories for components, pages, and services.
3. **Design Layout**: Implement the main layout with a top navigation bar, sidebar, and dashboard area using Tailwind CSS.
4. **Develop Core Features**: 
   - Implement user authentication with secure login and registration.
   - Create components for income tracking and expense management.
   - Develop the dashboard to display financial metrics.
   - Implement budget planning and reports generation functionalities.
5. **Integrate State Management**: Set up Zustand for state management to handle user data, income, expenses, and budgets.
6. **Responsive Design**: Ensure the application is responsive across various devices using Tailwind CSS utilities.
7. **Testing**: Conduct unit and integration tests to ensure all features are functioning correctly.
8. **Deployment**: Deploy the application using a platform like Vercel or Netlify for easy access.

## USER EXPERIENCE
The Cashflow System is designed to provide a seamless user experience. Users will start by logging into their accounts, which will take them to the dashboard, where they can see a quick overview of their financial situation. They can navigate easily between income and expense management sections, with simple forms to add or edit entries. Users will appreciate the ability to generate reports and visualize their financial data, helping them to stay organized and make informed decisions. The overall minimalist design ensures that users can focus on their financial management without distractions.