Order Management

\n setSelectedStatus(e.target.value as OrderStatus | 'all')}\n className=\"px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n {statusOptions.map(option => (\n \n ))}\n \n \n 🔄 Refresh\n \n

\n\n {/* Orders List */}\n

\n {orders.length === 0 ? (\n

📋

No orders found

\n {selectedStatus === 'all' \n ? 'No orders have been placed yet.' \n : `No orders with status \"${selectedStatus}\" found.`}\n

\n ) : (\n orders.map(order => (\n

\n {/* Order Info */}\n

\n Order #{order.id}\n

\n \n {order.status.charAt(0).toUpperCase() + order.status.slice(1)}\n \n

\n \n

Customer

{order.customer_name}

{order.customer_phone}

Table

{order.table?.name}

Order Time

\n {new Date(order.created_at).toLocaleString()}\n

\n\n {/* Order Items */}\n

Items:

\n {order.items.map(item => (\n

\n {item.menu_item?.name} x{item.quantity}\n ₹{item.price * item.quantity}\n

\n ))}\n

\n Total:\n ₹{order.total}\n

\n\n {/* Actions */}\n

\n {getNextStatus(order.status) && (\n updateOrderStatus(order.id, getNextStatus(order.status)!)}\n disabled={updatingOrder === order.id}\n className=\"bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 disabled:bg-gray-300 transition-colors\"\n >\n {updatingOrder === order.id ? 'Updating...' : `Mark as ${getNextStatus(order.status)}`}\n \n )}\n \n {order.status !== 'cancelled' && order.status !== 'completed' && (\n updateOrderStatus(order.id, 'cancelled')}\n disabled={updatingOrder === order.id}\n className=\"bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 disabled:bg-gray-300 transition-colors\"\n >\n Cancel Order\n \n )}\n\n {/* Quick Status Change */}\n updateOrderStatus(order.id, e.target.value as OrderStatus)}\n disabled={updatingOrder === order.id}\n className=\"px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n \n \n \n

\n ))\n )}\n

\n );\n};\n\nexport default OrdersPanel;","deleted","label",[169,170,171,152],"frontend","components","Admin","permalink","https://www.val.town/x/Pratham211/canteen/code/frontend/components/Admin/OrdersPanel.tsx","extension","actionData","errors"]