Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed for analyzing budget realization reports for specific regions. It provides insights into budget allocations, actual expenditures, revenue sources, and identifies trends in surpluses or deficits. Users can easily navigate through detailed reports to understand financial performance and the factors influencing budget outcomes.

## CORE FEATURES
1. **Budget Overview Dashboard**: A comprehensive view displaying the total budget, actual expenditures, and the difference, highlighting whether there is a surplus or deficit.
2. **Detailed Revenue Analysis**: Users can examine revenue streams, including which categories contributed the most, with visual representations of growth or decline.
3. **Expenditure Breakdown**: A detailed analysis of expenses categorized by type, showing any increases or decreases with explanations derived from financial reports.
4. **Trend Analysis Tool**: Visual graphs that illustrate the trends in budget realization over time, allowing users to identify patterns in financial performance.
5. **Source of Financing**: A section detailing the various sources of funding, comparing budgeted amounts against actual realizations.
6. **Interactive Reports**: Generate and download detailed reports with insights into budget performance, including key factors affecting the financial outcomes.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, emphasizing clarity and readability.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance visibility and comfort.
- **Layout**: A single-column layout with a fixed top navigation bar; the main content area will showcase interactive charts and tables, with sections clearly divided for easy access to different analyses.
- **Typography**: Use a sans-serif font like "Inter" for headings and body text, ensuring a modern and easily readable hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and scalable application.
- **Styling**: Tailwind CSS to facilitate rapid styling with a utility-first approach.
- **UI Components**: Utilize shadcn/ui for pre-designed, accessible UI components.
- **State Management**: Implement Zustand or React Context for managing global state where necessary.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Design Layout**: Create a responsive layout that adapts to different screen sizes, ensuring a smooth user experience on both desktop and mobile devices.
4. **Develop Components**: Build individual components for the dashboard, revenue analysis, expenditure breakdown, trend analysis, and report generation.
5. **Integrate State Management**: Set up Zustand or React Context for managing application state across components.
6. **Implement Charts and Graphs**: Use a library like Chart.js or Recharts to visualize data dynamically.
7. **Testing**: Conduct thorough testing for usability and functionality across different devices and browsers.
8. **Deployment**: Deploy the application using a service like Vercel or Netlify for easy access and sharing.

## USER EXPERIENCE
Users will interact with the application through an intuitive dashboard that allows them to navigate between different analyses effortlessly. They can click on various sections to drill down into specific details, view charts that illustrate trends, and generate reports based on their selections. The focus on simplicity ensures that even users with minimal technical knowledge can effectively utilize the application to understand budget realizations.