Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to analyze and report the realization of the budget for the city of Surakarta. It will provide insights into the budget allocations and realizations across various categories, highlighting increases or decreases in each segment, as well as analyzing the factors contributing to surpluses or deficits in revenue and expenses.

## CORE FEATURES
1. **Budget Overview Dashboard**: A visual representation of the budget allocation versus actual realization, showing overall performance at a glance.
2. **Detailed Category Analysis**: Interactive sections for each budget category (revenue, expenses) that detail increases or decreases with explanations sourced from relevant data.
3. **Surplus/Deficit Analysis**: A dedicated section that analyzes the overall financial health, displaying whether the city is operating at a surplus or deficit, along with explanations for the largest contributing factors.
4. **Source of Financing Insights**: Breakdown of financing sources, comparing actual realizations with budgeted amounts to identify variances and their causes.
5. **Data Visualization Tools**: Graphs and charts to visually represent budget trends, facilitating easier understanding of financial dynamics.
6. **Export Functionality**: Ability to export analysis reports in various formats (PDF, Excel) for further sharing and documentation.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - a clean, simple design emphasizing white space, a minimal color palette, and a focus on clear typography.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability.
- **Layout**: The application will utilize a card-based layout for sections, with a top navigation bar for easy access to different analysis areas. Each card will contain relevant data visualizations and textual explanations.
- **Typography**: Use a sans-serif font for clarity and modern aesthetics. Main headings (H1) should be bold and larger in size, while sub-headings (H2, H3) should maintain a hierarchy with appropriate sizing and weight.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for responsive design and utility-first styling approach.
- **UI Components**: Utilize shadcn/ui for consistent and modern UI components.
- **State Management**: Use Context API or Zustand for managing application state where necessary.

## IMPLEMENTATION STEPS
1. **Set up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Basic Layout**: Develop the main layout structure with a navigation bar and placeholders for dashboard and analysis sections.
3. **Implement Core Features**:
   - Build the Budget Overview Dashboard with relevant data visualization components.
   - Create detailed category analysis sections that fetch and display data dynamically.
   - Develop the Surplus/Deficit Analysis section using conditional rendering based on financial data.
   - Integrate a source of financing insights feature that compares budgeted versus actual values.
   - Add data visualization tools using libraries such as Chart.js or D3.js.
4. **Export Functionality**: Implement functionality to export reports in various formats using libraries like jsPDF or SheetJS.
5. **Testing and Optimization**: Conduct thorough testing of all features, ensuring responsiveness and user experience across devices.

## USER EXPERIENCE
Users will navigate through a streamlined interface that allows them to easily access different analyses. The dashboard will provide a clear overview of the budget's performance, while detailed sections will offer insights into specific categories. Interactions will include hovering over data points for more information, clicking on categories for deeper analysis, and exporting reports for offline access. A user-friendly design ensures that stakeholders can quickly grasp the financial status and insights without being overwhelmed by data.