Add Order Component - Copy this Html, Tailwind Component to your project
Objective: Create a "Manual Order Entry" screen in my digital menu app, simulating a POS (Point of Sale) system. This screen will be used by the restaurant owner to manually add orders. Screen Requirements: Title and Layout: The screen should have the title "Add Order". The layout should be clear, intuitive, and optimized for use on mobile devices, tablets, and desktops. Selection Buttons: Add buttons to select the order type: Takeaway Delivery Dine In Add a button to select the customer: Display a list of registered customers with a search option. Include an option to add a new customer if needed. Product Selection Area: Display a list of available products, grouped by category. Each product should have an "Add" button to include the item in the order. Include the functionality to select the quantity for each item. Order Summary: Display a summary of the order in real time as items are added. Calculate and display the subtotal, taxes, and delivery fees (if applicable). Include a section for order notes or special instructions. Total Calculation: Automatically calculate and display the total amount, including taxes and delivery fees. Ensure the total updates dynamically as items are added or removed. Finalize Order: Add a button to finalize and save the order. Provide options to confirm the order and choose the payment method. Additional Notes: The screen should be user friendly and responsive across mobile, tablet, and desktop devices. Consider the typical workflow of a restaurant POS to make the process efficient. Make sure all calculations (totals, taxes, fees) are accurate and updated in real time. This version makes it clear that the screen should work well on mobile, tablet, and desktop platforms.
