Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a comprehensive web application focused on enhancing a dashboard system for KPI calculations, data filtering, and user authentication. The application will provide users with a streamlined interface to monitor performance metrics, manage sales data, and generate insights, ensuring an efficient and user-friendly experience.

## CORE FEATURES
1. **Performance Metrics Dashboard**: Display key performance indicators (KPIs) including Active Orders, Renewal Rate, Pending Renewals, On-Time Renewals, and Lapsed Renewals in a clear and concise format.
2. **Data Filtering**: Implement a robust filter system that allows users to filter data by Renewal Status, Branches, Products, Publications, and Sales Executives with collapsible and searchable options.
3. **Sales Executive Rankings**: Showcase top-performing sales executives using weighted rankings based on renewal performance and total order volume, with the ability to view more details.
4. **Chart Visualizations**: Provide responsive charts for visual representation of data trends and performance metrics, ensuring they are updated in real-time without stale data.
5. **User Authentication**: A secure sign-in and sign-up process that validates user credentials and maintains user sessions, with role-based access to dashboard features.
6. **Refresh Flow**: A manual refresh option for users to update all data displayed on the dashboard, ensuring information is current and accurate.

## 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**: The main layout structure includes a top navigation bar, a sidebar for filters, followed by a performance overview section, and charts below. Each section will have ample spacing to ensure clarity and ease of navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (if necessary)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
2. **Create Layout Components**: Develop reusable components for the header, sidebar filters, performance metrics, and chart visualizations.
3. **Implement Data Fetching**: Integrate API calls to fetch KPI data, ensuring proper validation and mapping of data sets.
4. **Build Filtering Logic**: Create the filter UI and implement functions to handle filtering actions and update displayed data accordingly.
5. **Develop User Authentication**: Set up authentication flows including sign-in and sign-up, and ensure session handling using context or Redux.
6. **Implement Refresh Logic**: Ensure manual refresh functionality updates all relevant data without causing stale or duplicate entries.
7. **Testing and Debugging**: Conduct thorough testing of all functionalities, including KPIs, filters, charts, and authentication to ensure a seamless user experience.

## USER EXPERIENCE
Users will log in to a clean and intuitive dashboard where they can immediately view their performance metrics. They can use the filter options to customize the data they see, and refresh the dashboard as needed. The responsive charts will provide visual insights into their performance trends. The overall experience will prioritize clarity, efficiency, and accessibility, catering to users' needs for timely and accurate data insights.