A
Anonymous

Dummy Orders - Copy this React, Tailwind Component to your project

Create-orders(transactions)-page-with-a-good-looking-layout-displaying-employee-name,-date,-order-no,-customer-name,-price,-and-status.-And-when-clicked-it-shows-more-details-about-the-order-like-items,-total-price-and-tip,-and-button-transaction-history-and-when-clicked-it-shows-the-clicked-order(transactions)-history.-mark-as-paid,-it-should-not-be-editable.-Search-orders-by-employee-name,-customer-name,-and-order-no,-and-also-filter-by-status-(paid-or-unpaid).-Also-have-a-button-to-add-more-orders-to-an-order,-show-a-popup-where-you-can-select-more-items-and-add-them-to-current-order.-The-popup-must-have-a-nice-layout-showing-item-name,-image-and-price-and-button-to-add-to-order.-Below-is-the-structure-of-the-orders-data-so-orders-will-have-an-array-of-orders-object-of-the-following-json-structure:-{-id:-48,-transaction_date_time:-'2024-12-26T20:51:44.50214+00:00',-customer_name:-'Pogba',-employee_username:-'pubngrill4@gmail.com',-items:-'{"orderItems":[{"id":80,"name":"Castle-Lite-Can-500ml","category":"BEERS-&-CIDERS","price":26,"image":"https://knnhfplevewsnqnrexkd.supabase.co/storage/v1/object/public/Ekhaya_Bucket/image/d8c5781c-1fd3-4fcd-a21b-925fb9d031be.png","quantity":1},{"id":81,"name":"Klipdrift-Brandy-1L","category":"BRANDY","price":279,"image":"https://knnhfplevewsnqnrexkd.supabase.co/storage/v1/object/public/Ekhaya_Bucket/image/299a81e8-b318-4382-8f5a-e12b8c46e50c.png","quantity":1}],"tip":0}',-total_price:-305,-payment_method:-'Credit-Card',-status:-'unpaid',-notes:-'No-notes'-}.-And-order(transactions)-history-objects-have-the-following-structure:-{-date_changed:-'2024-12-26T20:51:44.50214+00:00',-employee_username:-'pubngrill4@gmail.com',-items:-'{"orderItems":[{"id":80,"name":"Castle-Lite-Can-500ml","category":"BEERS-&-CIDERS","price":26,"image":"https://knnhfplevewsnqnrexkd.supabase.co/storage/v1/object/public/Ekhaya_Bucket/image/d8c5781c-1fd3-4fcd-a21b-925fb9d031be.png","quantity":1},{"id":81,"name":"Klipdrift-Brandy-1L","category":"BRANDY","price":279,"image":"https://knnhfplevewsnqnrexkd.supabase.co/storage/v1/object/public/Ekhaya_Bucket/image/299a81e8-b318-4382-8f5a-e12b8c46e50c.png","quantity":1}],"tip":0}',-}

Prompt
Component Preview

About

dummyOrders - Create a transaction page displaying employee, date, order details, and status. Built with React and Tailwind. Copy template now!

Share

Last updated 1 month ago