Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide a comprehensive dashboard that allows users to monitor service levels across various points of sale (pdv) and a specific supplier warehouse (7018). The application aims to present insights into service levels of items, highlight the best-performing products and pdv, and identify critical items for better inventory management and decision-making.

## CORE FEATURES
1. **Service Level Overview**: A visual representation of service levels for each pdv and the supplier warehouse (7018), allowing users to quickly assess performance.
2. **Item Performance Metrics**: Detailed metrics on individual items, showcasing the best-selling products and their corresponding service levels.
3. **Critical Item Alerts**: Notifications and alerts for items that are underperforming or critical, enabling proactive management.
4. **Best Performing PDV**: A section dedicated to highlighting the top-performing points of sale, helping users to identify successful strategies.
5. **Interactive Data Visualization**: Graphs and charts that provide insights into service levels and trends over time, facilitating data-driven decisions.
6. **User Authentication**: Secure login for users to access personalized dashboards and saved settings.

## 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 will consist of a sidebar for navigation, a header for quick access to user settings, and a main content area displaying various charts, metrics, and alerts in a grid format.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React application with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Build the User Authentication Module**: Implement user login and registration functionality, ensuring secure access to the dashboard.
3. **Create the Dashboard Layout**: Design the overall layout with a responsive sidebar, header, and main content area using Tailwind CSS.
4. **Implement Core Features**: 
   - Develop the service level overview component, integrating data visualization libraries.
   - Create the item performance metrics section to display details about best-selling products.
   - Set up notifications for critical items using real-time data updates.
   - Highlight the best-performing pdv using sortable tables and visual indicators.
5. **Add Interactive Elements**: Ensure that all charts and metrics are interactive and provide user-friendly interaction options.
6. **Test and Optimize**: Conduct thorough testing to ensure functionality and responsiveness across devices, optimizing performance as needed.

## USER EXPERIENCE
Users will interact with the dashboard through a streamlined interface. Upon logging in, they will see an overview of service levels, with options to drill down into specific metrics. The application will provide immediate feedback through notifications for critical items and allow users to explore best-selling products and top-performing pdv through interactive charts. The design will ensure that information is easily accessible and visually appealing, promoting effective decision-making.