Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a customizable POS self-order system designed for restaurants and retail environments. It features an intuitive admin panel for managing orders, menu items, and customer interactions, enabling businesses to streamline their ordering process and enhance customer experience.

## CORE FEATURES
1. **Self-Order Interface**: A user-friendly interface for customers to place orders directly from their devices, selecting items and customizing them as needed.
2. **Admin Panel**: A comprehensive dashboard for administrators to manage menu items, view orders in real-time, and analyze sales data.
3. **Order Tracking**: Real-time order status updates for customers, allowing them to see when their orders are being processed and completed.
4. **Payment Integration**: Secure payment processing options, including credit/debit cards and digital wallets, ensuring a smooth transaction experience.
5. **Customer Management**: Tools for tracking customer preferences and order history to facilitate personalized service and marketing efforts.
6. **Analytics and Reporting**: Insights into sales trends, popular items, and customer behavior to help improve business strategies.

## 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 be divided into a top navigation bar for easy access to the admin panel features, a central content area for displaying the self-order interface, and a sidebar for quick navigation between different sections.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API (as needed for managing application state)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Structure Application**: Set up the folder structure for components, pages, services, and styles.
4. **Develop Core Features**:
   - Build the self-order interface with customizable item options using hooks for state management.
   - Create the admin panel dashboard with tables for order management and forms for adding/editing menu items.
   - Implement real-time order tracking using WebSocket or polling for updates.
5. **Integrate Payment Gateway**: Set up a secure payment processing solution, configuring necessary APIs.
6. **Add Customer Management**: Develop user profiles and order history tracking functionality.
7. **Implement Analytics**: Integrate analytics tools to capture user interactions and generate reports.
8. **Testing**: Conduct thorough testing of all features, focusing on user experience and responsiveness.
9. **Deployment**: Prepare the application for deployment and choose a hosting provider.

## USER EXPERIENCE
The user experience is centered around simplicity and efficiency. Customers will interact with a clean self-order interface that allows for easy navigation and quick order placement. The admin panel will provide straightforward access to manage operations, ensuring that both customers and administrators can navigate the application seamlessly. Responsiveness will be prioritized, allowing users to access the system on various devices, from tablets to smartphones.