56 lines
3.3 KiB
TypeScript
56 lines
3.3 KiB
TypeScript
const orders = [
|
|
{ id: "#1284", customer: "Alex Johnson", items: "2x Latte, 1x Croissant", total: "$14.50", status: "Completed", time: "10:32 AM" },
|
|
{ id: "#1283", customer: "Sarah Miller", items: "1x Espresso", total: "$4.00", status: "Preparing", time: "10:28 AM" },
|
|
{ id: "#1282", customer: "Mike Chen", items: "1x Cappuccino, 2x Muffin", total: "$13.00", status: "Completed", time: "10:20 AM" },
|
|
{ id: "#1281", customer: "Emily Davis", items: "3x Americano", total: "$10.50", status: "Completed", time: "10:15 AM" },
|
|
{ id: "#1280", customer: "Tom Wilson", items: "1x Mocha, 1x Bagel", total: "$9.50", status: "Preparing", time: "10:10 AM" },
|
|
{ id: "#1279", customer: "Lisa Park", items: "2x Cappuccino", total: "$10.00", status: "Completed", time: "10:02 AM" },
|
|
{ id: "#1278", customer: "David Brown", items: "1x Latte, 1x Croissant", total: "$8.50", status: "Completed", time: "9:55 AM" },
|
|
];
|
|
|
|
const Orders = () => {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="animate-fade-in">
|
|
<h1 className="text-2xl font-display font-bold text-foreground">Orders</h1>
|
|
<p className="text-sm text-muted-foreground mt-1">Track and manage incoming orders</p>
|
|
</div>
|
|
|
|
<div className="glass-card rounded-xl overflow-hidden animate-fade-in" style={{ animationDelay: "100ms" }}>
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-border bg-muted/30">
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Order</th>
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Customer</th>
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Items</th>
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Time</th>
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Total</th>
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{orders.map((order) => (
|
|
<tr key={order.id} className="border-b border-border/50 hover:bg-muted/20 transition-colors">
|
|
<td className="px-6 py-4 text-sm font-medium text-foreground">{order.id}</td>
|
|
<td className="px-6 py-4 text-sm text-foreground">{order.customer}</td>
|
|
<td className="px-6 py-4 text-sm text-muted-foreground">{order.items}</td>
|
|
<td className="px-6 py-4 text-sm text-muted-foreground">{order.time}</td>
|
|
<td className="px-6 py-4 text-sm font-semibold text-foreground">{order.total}</td>
|
|
<td className="px-6 py-4">
|
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
|
order.status === "Completed" ? "bg-success/10 text-success" : "bg-warning/10 text-warning"
|
|
}`}>
|
|
{order.status}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Orders;
|