Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application will serve as an operational analysis tool for the city of Surakarta, focusing on data from 2023 and 2024. Users will be able to analyze changes in various operational metrics, highlighting areas of increase and decrease, along with explanations for these trends.

## CORE FEATURES
1. **Data Dashboard**: A comprehensive view of operational metrics for both years, allowing users to quickly assess performance changes.
2. **Trend Analysis**: Interactive graphs and charts that visualize increases and decreases in key metrics, with the ability to filter by specific categories.
3. **Detailed Reports**: In-depth analysis reports that provide insights into why certain metrics changed, including explanations based on the largest influencing factors.
4. **Export Functionality**: Users can export the analysis reports in various formats (PDF, CSV) for offline review and presentation.
5. **User Authentication**: Secure login for users to save their preferences and access personalized reports.
6. **Feedback Mechanism**: A feature allowing users to submit feedback on the analysis reports, facilitating continuous improvement of the tool.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space to enhance readability and focus on essential content.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring high contrast and readability.
- **Layout**: A structured layout with a top navigation bar, a central dashboard area for data visualization, and side panels for filters and report options.
- **Typography**: Use a modern sans-serif font for clarity, with a clear hierarchy (e.g., headings in bold and larger size, body text in regular weight).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and type-safe application.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design iterations.
- **UI Components**: Utilize shadcn/ui for a consistent and modern UI component library.
- **State Management**: Implement React Context or Zustand for managing state across the application.

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript and install necessary dependencies (Tailwind CSS, shadcn/ui).
2. **Create the folder structure**: Organize the project into components, pages, and utilities for better maintainability.
3. **Build the authentication module**: Implement user login and registration functionality using a secure method (e.g., JWT).
4. **Develop the dashboard**: Construct the main dashboard area with visualizations using a charting library (e.g., Chart.js or Recharts).
5. **Implement data fetching**: Create API calls to retrieve operational data for 2023 and 2024, and integrate it into the dashboard.
6. **Add trend analysis feature**: Develop the functionality to calculate and display increases and decreases in metrics.
7. **Create detailed reports**: Design and implement the layout for detailed reports including explanations for changes in metrics.
8. **Export functionality**: Integrate a feature to allow users to export data in various formats.
9. **User feedback**: Implement a feedback mechanism for users to provide input on the analysis reports.
10. **Testing and deployment**: Conduct thorough testing of all features and deploy the application using a service like Vercel or Netlify.

## USER EXPERIENCE
Users will be greeted with a clean and intuitive interface upon logging in. They can easily navigate through the dashboard to view trends and detailed reports. Interactive graphs will allow users to hover over data points for more information, and the feedback mechanism will enable them to contribute insights on the reports. The overall experience will emphasize simplicity and clarity, ensuring that users can focus on analyzing operational data without distractions.