NPX
Nhật Phùng Xuân

Order Details - Copy this React, Tailwind Component to your project

Component Name: OrderDetails Purpose: Display detailed information of a specific order and allow the admin or authorized user to update the order status. ✅ Main Features: Customer Information: fullName phoneNumber streetAddress city district ward postalCode Payment Information: paymentMethod (e.g., COD, Online) If paymentMethod is "Online", optionally display: cardNumber (masked) cardExpiry cvv (masked or hidden) Product List: List all products in the order with: Product name Quantity Price per item Total per item Thumbnail image (optional) Order Summary: Subtotal Shipping fee (if applicable) Discount (if applied) Total amount Order Status: Display current status (e.g., Pending, Confirmed, Shipped, Delivered, Cancelled) Provide a dropdown or select input to update the status Button to save/update the new status Optionally show timestamps: order created time, updated time, delivery time

Prompt
Component Preview

About

OrderDetails - Display order info with customer details, payment options, product list, order summary, and status updates. Built with. View and copy code!

Share

Last updated 1 month ago