GT
Giao trần

Customer Order Form - Copy this React, Tailwind Component to your project

Design a Customer Order Form Interface using SB Admin 2 for styling and structure. The layout should be responsive, with the following sections: Customer Information, Product Information, Shipping Information, Discounts, and Action Buttons. 1. Customer Section: Use **Bootstrap cards** for grouping elements. A card titled **"Customer"** containing multiple form inputs: **Phone Number**: Use an input field with a phone icon (use `fa phone`). **Customer Name**: An input field with a person icon (use `fa user`). **Address**: Text area field with a home icon (use `fa home`). **Customer Notes**: A text area field for customer notes (use `fa sticky note`). **Order Source**: A dropdown list with a "+" button beside it to add new sources. **City**, **District**, and **Ward**: Three dropdowns for selecting the address, styled with `fa map marker alt`. **Internal Customer Care Notes**: A text area input for internal notes. **Customer Tags**: A dropdown or multi select option for customer labels. 2. Product Section: Another **card** titled **"Product"** containing: A **search bar** with the placeholder "Search for products" (use shortcut key **F3**). A **table** to list products with columns: Product name. Quantity. Price. Total. Below the table, display totals for all products (total quantity and total price). Buttons for checking stock or selling at retail. 3. Shipping Section: A **card** titled **"Shipping"** that contains: An option to **Auto calculate shipping costs**. A dropdown for **Promotion codes** (display available coupons). A text field for **Shipping Fee** (customer notified fee). Checkbox for calculating shipping based on the HVC rate. Dropdown for delivery options (e.g., "Home Delivery"). Field for selecting the **delivery date**. 4. Discount and VAT Section: A **card** labeled **"Tags"**, located on the right side of the screen: An expandable section with: **Coupon Code** input field. **Points** input field for applying reward points. Fields for **Deposit** and **Bank Transfer** amounts. VAT settings, with the option to select a tax percentage. 5. Action Buttons: At the bottom, include **three buttons**: A green button labeled **Save (F9)**. A blue button labeled **Save and Print (F10)**. A dropdown button for **Additional actions** next to the print button. Add radio buttons for selecting how to handle payments: **Customer Payment** or **Shop Payment**. General Notes: Ensure that the layout is **responsive**, using **Bootstrap grid system** from SB Admin 2. Use **form group** and **input group** classes from SB Admin 2 for spacing and aligning icons with inputs. Utilize **font awesome icons** for all relevant icons (phone, person, map, etc.). Use **card** components for each section (Customer, Product, Shipping, etc.) to maintain a clean and structured UI.

Prompt
Component Preview

About

CustomerOrderForm - Create a responsive order form with sections for customer info, products, shipping, discounts, and action buttons,. Get code instantly!

Share

Last updated 1 month ago