Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a dashboard designed for monitoring quality across different business units. It allows users to filter through various units, visualize failures before testing, during testing, and after guarantees. The goal is to provide a clean and efficient interface for quality management professionals to track and manage quality metrics effectively.

## CORE FEATURES
1. **Business Unit Filter**: A dropdown or sidebar that enables users to select and filter data by specific business units, allowing for tailored insights.
2. **Failures Before Testing**: A dedicated section that displays metrics and lists of failures identified prior to testing, helping teams address issues early in the process.
3. **Failures During Testing**: A visual representation of failures that occur during the testing phase, providing insights into real-time quality issues.
4. **Guarantee Failures**: A section for tracking failures that occur post-guarantee, crucial for understanding long-term product performance and customer satisfaction.
5. **Data Visualization**: Interactive charts and graphs that present key metrics visually, enabling quick comprehension of quality trends and patterns.
6. **User Management**: A simple authentication and user management system to allow different levels of access for team members.

## 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 layout that organizes sections for filtering, data visualization, and metrics in a logical flow, ensuring easy navigation and readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux for managing application state and user data.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project using Create React App with TypeScript support.
2. **Install Dependencies**: Install Tailwind CSS and configure it for styling. Add shadcn/ui for UI components.
3. **Design Layout**: Create a main dashboard layout using a grid system to organize components for filters, visualizations, and metrics.
4. **Implement Business Unit Filter**: Develop the filter component to allow users to select different business units, integrating it with the state management system.
5. **Create Data Sections**: Build components for displaying failures before testing, during testing, and after guarantees, ensuring they are visually distinct and informative.
6. **Add Data Visualization**: Use a charting library (like Chart.js or Recharts) to implement visual representations of quality metrics.
7. **Set Up User Management**: Implement a simple user authentication system for managing access levels and permissions.

## USER EXPERIENCE
Users will interact with the application through a streamlined dashboard. Upon logging in, they will see the business unit filter at the top, allowing them to quickly switch between units. Below the filter, they will have sections for viewing failures categorized by stage (before testing, during testing, and after guarantees). Users can click on various data points to get more detailed views, ensuring a responsive and engaging experience that focuses on usability and clarity. The design will maintain a minimalist aesthetic, ensuring users can focus on the data without distractions.