Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a modern, elegant, and fully responsive administrative panel for a business application. This web app will feature a professional dashboard, allowing users to manage various aspects such as users, clients, products, and invoices. The design focuses on providing a clean and intuitive user experience across all devices.

## CORE FEATURES
1. **Dashboard Overview**: A visual dashboard displaying key metrics including total users, clients, products, and sales figures with various dynamic graphs.
2. **User Management Module**: A table for managing users with options to view, edit, and delete user details. Includes a form for creating and editing user profiles.
3. **Client Management Module**: A detailed view of clients with options to manage their information and view client-specific details.
4. **Product Management Module**: A comprehensive table to manage products, including creation, editing, and viewing detailed product information.
5. **Invoice Management Module**: A system for tracking invoices with a detailed view for each invoice, showcasing relevant purchase details.
6. **Responsive Design**: The application will be fully responsive, with a collapsible sidebar on mobile devices to ensure usability across all screen sizes.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist, with a clean and simple design that emphasizes usability through plenty of white space. The layout should be modern and friendly.
- **Color Mode**: Light theme with dark text on light backgrounds, utilizing a primary color of white, secondary green accents, and neutral tones.
- **Layout**: 
  - Fixed left sidebar with navigation links (Dashboard, Users, Clients, Products, Invoices, Settings, Logout).
  - Top bar displaying the logged-in user's name, avatar, notifications, and an optional search bar.
  - Dynamic content area that updates based on the selected module.
- **Typography**: Professional font choices that enhance readability and maintain a modern aesthetic.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building the user interface.
- **Styling**: Tailwind CSS for utility-first styling to maintain a consistent design.
- **UI Components**: Utilize shadcn/ui for modern and responsive components.
- **State Management**: Context API or Zustand for managing application state effectively.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (React, TypeScript, Tailwind CSS, shadcn/ui).
2. **Create Layout Structure**: Implement the fixed left sidebar and top bar. Ensure responsiveness for different devices.
3. **Develop Dashboard Component**: Create a dashboard component that includes summary cards and dynamic graphs using mock data. Prepare for API integration.
4. **Build User Management Module**: Implement the user table with CRUD functionalities and a dedicated form for user details.
5. **Construct Client and Product Management Modules**: Develop similar tables and forms for managing clients and products with appropriate actions.
6. **Integrate Invoice Management Module**: Create functionality to manage invoices, displaying relevant details in a table format.
7. **Responsive Testing**: Ensure all components are responsive using media queries and Tailwind's responsive utilities.
8. **API Integration**: Set up REST API endpoints for users, clients, products, and invoices. Prepare to fetch and manage data dynamically.
9. **User Experience Enhancements**: Implement smooth animations, loaders for tables, confirmation dialogs for actions like delete, and toast notifications for user feedback.
10. **Final Review and Optimization**: Review the code for cleanliness, maintainability, and performance optimization, ensuring the application is SEO-friendly.

## USER EXPERIENCE
Users will experience a smooth and engaging interface with easy navigation through the sidebar and top bar. Key actions such as creating, editing, and viewing details will be intuitive, supported by visual feedback like animations and notifications. The responsive design ensures seamless interaction on desktops, tablets, and mobile devices, providing a consistent experience regardless of screen size.