Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application will serve as a quotation management system that prioritizes accurate product matching between an internal inventory database and supplier product listings. The main purpose is to ensure that the best price for a product is retrieved based on its name or, if necessary, its EAN code, thus maintaining the integrity and reliability of the pricing system.

## CORE FEATURES
1. **Product Matching**: Automatically matches products from the inventory database with those from suppliers using product names first, and EAN codes as a fallback.
2. **Quotation Generation**: Generates quotes based on the best prices retrieved for matched products, allowing users to view and compare supplier prices.
3. **Supplier Management**: Allows the addition and management of supplier information, including product listings and prices.
4. **Data Integrity Checks**: Ensures the system maintains data integrity by validating product names and EAN codes to prevent incorrect price retrieval.
5. **User Authentication**: Secure login system for users to access their quotations and manage supplier data.
6. **Dashboard Overview**: A user-friendly dashboard displaying recent quotations, product match statuses, and supplier performance metrics.

## 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 feature a header with navigation links, a sidebar for additional features, a central content area for displaying quotations and product matches, and a footer with contact information.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Folder Structure**: Organize components, pages, and services for better maintainability.
4. **Implement Authentication**: Create user login and registration components with authentication logic.
5. **Develop Core Features**: 
    - Build the product matching algorithm utilizing the internal database and supplier data.
    - Create components for quotation generation and display.
6. **Design UI Components**: Utilize Tailwind CSS to style buttons, forms, and layout as per the design specifications.
7. **Testing**: Conduct thorough testing for data integrity checks and user interactions.
8. **Deployment**: Deploy the application using a service like Vercel or Netlify for user access.

## USER EXPERIENCE
Users will log in to the application and be greeted by a dashboard that displays recent quotations and product matches. They can easily add or manage suppliers and view detailed information about product pricing. The system will automatically suggest the best prices based on product names and EAN codes, ensuring users receive accurate quotes without the risk of mismatched products. The clean and minimalist interface will enhance usability, allowing users to navigate through the application effortlessly.