Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application will provide a comprehensive analysis of the budget realization for the city of Surakarta. It will allow users to explore the budget and realization for each category, identifying increases and decreases, and understanding the factors contributing to surpluses or deficits. Users will have access to detailed reports and insights to enhance transparency and facilitate informed decision-making.

## CORE FEATURES
1. **Budget Overview Dashboard**: A visual representation of the overall budget, displaying total income and expenses, highlighting surplus or deficit status with accompanying explanations.
2. **Category Analysis**: Detailed breakdown of income and expenses by category, showing trends (increase/decrease) and reasons behind these changes.
3. **Factor Analysis**: Insights into the largest contributing factors for surplus or deficit, providing context for the numbers.
4. **Realization Reports**: Downloadable reports that summarize the budget realization against the initial budget, allowing for easy sharing and review.
5. **Interactive Charts**: Dynamic charts and graphs to visualize data trends over time, enhancing user engagement and understanding.
6. **User Feedback Section**: A feature for users to submit their insights or questions regarding the budget, promoting community engagement.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, focusing on clarity and readability.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure maximum readability and comfort.
- **Layout**: 
  - A top navigation bar for easy access to different sections (Overview, Analysis, Reports).
  - A hero section to introduce the application purpose.
  - Main content area featuring interactive charts and tables.
  - Footer with contact information and links to additional resources.
- **Typography**: 
  - Use sans-serif fonts like Arial or Roboto for a modern look.
  - Headings should be bold and larger to establish a clear hierarchy, while body text remains regular weight for readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for strong typing and component-based architecture.
- **Styling**: Tailwind CSS for responsive design and utility-first styling, ensuring a clean and modern aesthetic.
- **UI Components**: Utilize shadcn/ui for pre-built, accessible UI components that align with the minimalist style.
- **State Management**: Use React Context API or Zustand for state management if needed for handling complex data interactions.

## IMPLEMENTATION STEPS
1. **Set up the React project** with TypeScript and Tailwind CSS.
2. **Implement the main layout** with a navigation bar, hero section, main content area, and footer.
3. **Create the dashboard component** to display the budget overview and integrate dynamic charts using a library like Chart.js or Recharts.
4. **Develop the category analysis section** to allow users to filter and view data by different categories.
5. **Implement the reports feature**, ensuring users can download summary reports in formats like PDF or CSV.
6. **Add the user feedback section**, allowing users to submit comments or questions, and integrate a simple backend (e.g., Firebase) for data storage if necessary.

## USER EXPERIENCE
Users will interact with the application through a straightforward and intuitive interface. Upon landing on the homepage, users will see a clear overview of the budget status. They can navigate through different sections using the top navigation bar. The interactive charts will allow users to hover over data points for more details, and users can download reports with a single click. Feedback submissions will be simple, ensuring users feel engaged and valued in providing their insights about the budget data. The entire application will be responsive, ensuring a seamless experience across devices.