Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed for managing income and expenses in a sophisticated yet simple and interactive manner. Users will have the ability to input their revenue and expenses, providing insights into their financial health through automated calculations and visualizations.

## CORE FEATURES
1. **Income Management**: Users can input various sources of income, including sales, detailing the product sold, cost, selling price, and automatically calculating profit.
2. **Expense Tracking**: Users can easily log their expenses, categorizing them for better financial oversight.
3. **Automatic Profit Calculation**: The app will compute profits based on inputted revenue and expenses, updating dynamically.
4. **Interactive Charts**: Visual representations of revenue and expenses will allow users to track their financial performance effectively.
5. **User Authentication**: Secure user login to maintain personalized data integrity.
6. **Dashboard Overview**: A clear and concise dashboard showing key metrics and insights into income and expenditures.

## 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 layout will feature a sidebar for navigation between income and expenses, with a main content area displaying forms for data entry and interactive charts.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Zustand for global state management.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React application using TypeScript and install necessary dependencies (Tailwind CSS, shadcn/ui).
2. **Create Components**: Develop the main components including Income, Expense, Dashboard, and Authentication screens.
3. **Implement Routing**: Set up React Router to navigate between different sections of the app.
4. **Data Management**: Establish state management using Context API or Zustand to handle income and expense data.
5. **Form Handling**: Create forms for income and expense entries with validation and dynamic calculations.
6. **Chart Integration**: Use a charting library (e.g., Chart.js or Recharts) to visualize income and expenses.
7. **User Authentication**: Implement secure authentication methods to protect user data.
8. **Styling**: Apply Tailwind CSS for styling, ensuring adherence to the specified design guidelines.
9. **Testing**: Conduct thorough testing for functionality and user experience, ensuring responsiveness across devices.
10. **Deployment**: Deploy the application on a platform like Vercel or Netlify for public access.

## USER EXPERIENCE
Users will first encounter a login screen where they can authenticate their accounts. Upon logging in, they will access a dashboard with two main tabs for income and expenses. Each tab will feature intuitive forms for inputting data, with instant feedback on profit calculations. Users can easily switch between tabs and visually track their financial health through interactive charts, making the experience seamless and engaging. The minimalist design ensures users can focus on their financial management without distractions.