Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web dashboard specifically designed for tracking Key Performance Indicators (KPIs) within the software engineering department of a financial company. It focuses on monitoring and visualizing data related to mainframe technology and legacy applications, enabling stakeholders to gain insights and make informed decisions.

## CORE FEATURES
1. **KPI Visualization**: Display key metrics such as application performance, error rates, and user satisfaction in visually engaging charts and graphs.
2. **Real-time Data Updates**: Integrate with existing data sources to provide real-time updates on KPIs, ensuring that users have the latest information at their fingertips.
3. **Customizable Dashboards**: Allow users to create and arrange their own dashboard layouts, selecting which KPIs to display and how to visualize them.
4. **Alerts and Notifications**: Implement a system to notify users about critical changes in KPIs, such as significant drops in performance or spikes in error rates.
5. **Historical Data Analysis**: Provide tools to analyze past performance trends over time, enabling users to identify patterns and forecast future performance.
6. **User Access Control**: Maintain a secure environment by implementing user authentication and role-based access to sensitive data.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: A grid-based layout with a sidebar for navigation and a main content area for displaying KPIs and visualizations. Responsive design to ensure usability across devices.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for rapid UI development and consistency.
- **UI Components**: shadcn/ui for reusable and customizable components.
- **State Management**: Utilize React's Context API or Redux for managing global state, depending on complexity.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui).
2. **Create the Layout**: Develop a responsive grid layout with a sidebar and main content area using Tailwind CSS.
3. **Develop Components**: Build reusable components for KPIs, charts, and alerts, utilizing shadcn/ui for consistency.
4. **Integrate Data Sources**: Connect to backend APIs or databases to fetch and update KPI data in real-time.
5. **Implement User Authentication**: Set up a basic authentication system to secure access to the dashboard.
6. **Test and Optimize**: Conduct user testing to gather feedback and optimize the interface for improved user experience.

## USER EXPERIENCE
Users will interact with the dashboard through an intuitive interface, where they can easily navigate between different KPIs via the sidebar. They will have the ability to customize their dashboard layout, select different visualizations for their KPIs, and set alerts for significant changes. The application will provide a seamless experience, ensuring that users can quickly access the data they need to make informed decisions, regardless of the device they are using.