Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to analyze the Budget Realization Reports from the financial statements of Surakarta City for the year 2024. It will allow users to evaluate the discrepancies between budgeted and actual revenues, expenditures, transfers, and regional financing, providing insights and explanations for these variances.

## CORE FEATURES
1. **Budget Analysis Dashboard**: A comprehensive dashboard that visually represents the budget versus actual figures, highlighting discrepancies in real-time.
2. **Detailed Reports**: Users can generate detailed reports for specific budget categories—revenues, expenditures, transfers, and financing—showcasing analysis and commentary on the variances.
3. **Data Visualization**: Interactive charts and graphs to aid in the visual analysis of budget performance over time, making it easy to identify trends and issues.
4. **User Authentication**: Secure login system for users to create accounts, access personalized dashboards, and save their analysis for future reference.
5. **Feedback Mechanism**: Users can provide feedback on the reports generated, allowing for continuous improvement of the analysis features.
6. **Export Functionality**: Users can export reports in various formats (PDF, Excel) for sharing and further analysis.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - A clean, simple design with ample white space to enhance readability and focus on content.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and readability.
- **Layout**: A single-page layout with a top navigation bar leading to different sections of the dashboard, including the overview, detailed reports, and user feedback.
- **Typography**: Use a sans-serif font for headings (e.g., Inter or Roboto) to maintain a modern look, with a serif font for body text for better readability and differentiation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a scalable and maintainable application.
- **Styling**: Tailwind CSS for utility-first styling, allowing for quick adjustments and responsiveness.
- **UI Components**: Utilize shadcn/ui for pre-built, customizable components that fit the minimalist aesthetic.
- **State Management**: Implement React Context or Redux for state management to handle user sessions and report data effectively.

## IMPLEMENTATION STEPS
1. **Set Up Project Structure**: Initialize the React app with TypeScript, setting up the folder structure for components, pages, and assets.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project along with any necessary libraries for state management and routing.
3. **Create Authentication Flow**: Implement user authentication using a service like Firebase or Auth0 to handle user accounts securely.
4. **Develop Dashboard Layout**: Design the main dashboard layout with sections for budget analysis, graphs, and detailed reports using Tailwind CSS.
5. **Integrate Data Visualization**: Use libraries like Chart.js or D3.js for visualizing budget data in interactive charts.
6. **Implement Report Generation**: Allow users to create and export reports based on the analysis performed on the dashboard.
7. **Testing**: Ensure thorough testing of all features, focusing on usability and responsiveness across different devices.

## USER EXPERIENCE
Users will start by logging into their accounts, where they will be greeted by the Budget Analysis Dashboard. From there, they can view an overview of budget performance, dive into detailed reports for specific categories, and interact with dynamic charts. Users will have the ability to provide feedback on the reports and export the results for additional analysis, ensuring a comprehensive and user-friendly experience. The application will be responsive, adjusting seamlessly to various screen sizes to accommodate all users.