function MainComponent() { const [orders, setOrders] = React.useState([ { id: 1, product: 'Laptop', customer: 'John Doe', status: 'Processing' }, { id: 2, product: 'Phone', customer: 'Jane Smith', status: 'Shipped' } ]); const handleEdit = (id)=>{ const updatedOrders = orders.map((order)=>order.id === id ? { ...order, status: 'Updated' } : order); setOrders(updatedOrders); }; const handleDelete = (id)=>{ const updatedOrders = orders.filter((order)=>order.id !== id); setOrders(updatedOrders); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "Order Management"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white border border-gray-200", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 border-b", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "Order ID"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 border-b", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "Product"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 border-b", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "Customer"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 border-b", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 border-b", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "Actions"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, orders.map((order)=>/*#__PURE__*/ React.createElement("tr", { key: order.id, __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border-b px-4 py-2", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, order.id), /*#__PURE__*/ React.createElement("td", { className: "border-b px-4 py-2", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, order.product), /*#__PURE__*/ React.createElement("td", { className: "border-b px-4 py-2", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, order.customer), /*#__PURE__*/ React.createElement("td", { className: "border-b px-4 py-2", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, order.status), /*#__PURE__*/ React.createElement("td", { className: "border-b px-4 py-2", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: ()=>handleEdit(order.id), __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }, "Edit"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 ml-2 rounded", onClick: ()=>handleDelete(order.id), __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, "Delete")))))))); }

Order ID	Product	Customer	Status	Actions
1	Laptop	John Doe	Processing
2	Phone	Jane Smith	Shipped