Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The "Control de Inventario" web application for "Ópticas Alfa" is a modern Single Page Application (SPA) designed to manage inventory efficiently. Utilizing React, Tailwind CSS, and Supabase, this application offers a premium UI/UX experience tailored for medical and optical business needs.

## CORE FEATURES
1. **User Authentication**: A secure login screen that uses Supabase Auth, displaying different functionalities based on user roles (Admin, Supervisor, Agent).
2. **Dashboard**: A visually appealing dashboard featuring summary cards for key metrics such as total stock items, out-of-stock models, and recent inventory additions.
3. **Inventory Management Module**: A comprehensive inventory management system with tabs for adding new items, querying stock, and updating existing items.
4. **Real-Time Search**: A global search feature that filters inventory items dynamically based on brand, model, or color, displayed in a modern data table with pagination.
5. **Toast Notifications**: Instant feedback for user actions (save, update, delete, errors) using toast notifications to enhance user experience.

## 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 features a collapsible sidebar for navigation, a centered login card, and well-structured tabs for inventory management.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui (including cards, dialogs, tables, forms, selects, and toast notifications).
- **State Management**: React Query (TanStack Query) or the native Supabase client for data fetching.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a React project with Vite and install necessary dependencies (Tailwind CSS, shadcn/ui, Supabase).
2. **Configure Supabase**: Set up a Supabase project, create the `profiles` and `inventory` tables as per the provided data model, and enable authentication.
3. **Create Authentication Flow**: Implement the login screen with forms for email and password, linking to Supabase Auth and handling user roles appropriately.
4. **Build Dashboard**: Design the dashboard with summary cards and integrate a simple graph (using Recharts if possible) for stock visualization.
5. **Develop Inventory Module**: 
   - Create tabs for "Nuevo Artículo", "Consultar Stock", and "Actualizar Stock".
   - Implement forms using react-hook-form for adding new items.
   - Set up a search input and data table for querying stock with real-time filtering.
6. **Implement Notifications**: Use shadcn/ui's toast notifications for user feedback on actions like saving and updating inventory.

## USER EXPERIENCE
The application offers an intuitive experience where users can seamlessly navigate through the login screen, access the dashboard for quick insights, and manage inventory items through well-organized tabs. The use of toast notifications ensures that users are kept informed of their actions, enhancing the overall usability and efficiency of the application.