Lovable Prompt Creator - AI Prompt Generator

# APPLICATION OVERVIEW
This project is a web application designed to enhance the payment system in a snack sales platform, focusing on flexibility and user-friendliness. The goal is to allow users to manage payments effectively, accommodating multiple payment modes and ensuring a seamless experience for point-of-sale transactions.

# CORE FEATURES
1. **Default Payment Behavior**: The payment mode defaults to Cash, with the total amount auto-filled based on the product price multiplied by the quantity.
  
2. **Multi-Mode Payment**: Users can select multiple payment methods (Cash, Online, Credit) within a single transaction, allowing them to split the total amount efficiently.

3. **Auto Calculation & Validation**: The application will automatically calculate and validate the total of all selected payment amounts, displaying any remaining balance or errors if the total exceeds the required amount.

4. **Editable Amount**: The default total amount is editable for discounts or special sales, with the capability to manually redistribute payment splits upon modification.

5. **Special Sales Compatibility**: The payment system will accommodate "Special Sale" modes, allowing users to adjust totals and payment splits dynamically.

6. **Credit Logic**: When Credit is selected, a "Room Number" input field will be displayed; otherwise, it will be hidden to streamline the interface.

# 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 streamlined form for payment processing, with sections clearly delineated for each payment method, auto-calculation displays, and a prominent editable total amount field.

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

# IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React application using Create React App with TypeScript support.
2. **Install dependencies**: Add Tailwind CSS, shadcn/ui, and any state management library (Redux or Context API).
3. **Create the Payment Component**: Develop a main component that handles payment modes, including checkboxes for each type of payment.
4. **Implement Auto Calculation Logic**: Create functions to calculate the total amount and validate user input, checking for errors if totals do not match.
5. **Design Editable Total Logic**: Make the total amount field editable, ensuring it updates payment splits accordingly.
6. **Integrate Special Sales Logic**: Allow the system to toggle between regular and special sale modes, adapting the payment input fields as necessary.
7. **Test the Payment Process**: Ensure that all features work seamlessly, focusing on user experience and mobile responsiveness.

# USER EXPERIENCE
Users will interact with a simple, intuitive interface that minimizes clicks and provides clear visibility of their transactions. Upon entering their order, users will see the total amount pre-filled, with options to split payments using checkboxes. The design will ensure that key information, such as the total amount, entered split amounts, and remaining balance, is always visible and easy to understand, creating a fast and efficient payment experience suitable for daily use.