````tsx import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Clock, XCircle, CheckCircle2, ArrowRight } from "lucide-react" const orders = [ { id: "ORD-1247", customer: "Sarah Williams", status: "completed", payment: "Credit Card", total: "$234.50", date: "15 Mar 2024", }, { id: "ORD-1248", customer: "Michael Chen", status: "pending", payment: "PayPal", total: "$89.99", date: "16 Mar 2024", }, { id: "ORD-1249", customer: "Emma Rodriguez", status: "cancelled", payment: "Debit Card", total: "$156.25", date: "16 Mar 2024", }, { id: "ORD-1250", customer: "James Wilson", status: "completed", payment: "Credit Card", total: "$412.00", date: "17 Mar 2024", }, { id: "ORD-1251", customer: "Olivia Taylor", status: "pending", payment: "Bank Transfer", total: "$78.50", date: "18 Mar 2024", }, { id: "ORD-1252", customer: "Lucas Anderson", status: "completed", payment: "Credit Card", total: "$299.99", date: "18 Mar 2024", }, { id: "ORD-1253", customer: "Sophia Martinez", status: "pending", payment: "PayPal", total: "$167.75", date: "19 Mar 2024", }, ] function getStatusBadge(status: string) { switch (status) { case "pending": return ( Pending ) case "cancelled": return ( Cancelled ) case "completed": return ( Completed ) default: return {status} } } export default function Table02() { return (

Recent Orders

View and manage customer orders from the past week. Last updated{" "} 19 Mar 2024.

View All

Order ID Customer Status Payment Total Date {orders.map((order) => ( {order.id} {order.customer} {getStatusBadge(order.status)} {order.payment} {order.total} {order.date} ))}

) } ````

blocks

Tables