g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update modal

Browse Source
This commit is contained in:
g
2025-02-07 23:06:50 +00:00
parent 29b9e0fd9f
commit 1b1ab05877
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/tables/order-table.tsx
View File

@@ -43,6 +43,14 @@ interface Order {
type SortableColumns = "orderId" | "totalPrice" | "status" | "createdAt"; type SortableColumns = "orderId" | "totalPrice" | "status" | "createdAt";
interface StatusConfig {
icon: React.ElementType;
color: string;
animate?: string;
}
type OrderStatus = "paid" | "unpaid" | "confirming" | "shipped" | "completed" | "disputed" | "cancelled";
export default function OrderTable() { export default function OrderTable() {
const [orders, setOrders] = useState<Order[]>([]); const [orders, setOrders] = useState<Order[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -152,11 +160,10 @@ export default function OrderTable() {
} }
}; };
// Status display configuration const statusConfig: Record<OrderStatus, StatusConfig> = {
const statusConfig = {
paid: { icon: CheckCircle2, color: "text-green-500" }, paid: { icon: CheckCircle2, color: "text-green-500" },
unpaid: { icon: XCircle, color: "text-red-500" }, unpaid: { icon: XCircle, color: "text-red-500" },
confirming: { icon: Loader2, color: "text-yellow-500 -" }, confirming: { icon: Loader2, color: "text-yellow-500", animate: "animate-spin" },
shipped: { icon: Truck, color: "text-blue-500" }, shipped: { icon: Truck, color: "text-blue-500" },
completed: { icon: CheckCircle2, color: "text-gray-500" }, completed: { icon: CheckCircle2, color: "text-gray-500" },
disputed: { icon: XCircle, color: "text-orange-500" }, disputed: { icon: XCircle, color: "text-orange-500" },
@@ -230,7 +237,6 @@ export default function OrderTable() {
) : ( ) : (
paginatedOrders.map(order => { paginatedOrders.map(order => {
const StatusIcon = statusConfig[order.status as keyof typeof statusConfig]?.icon || XCircle; const StatusIcon = statusConfig[order.status as keyof typeof statusConfig]?.icon || XCircle;
const statusColor = statusConfig[order.status as keyof typeof statusConfig]?.color || "text-red-500";
return ( return (
<TableRow key={order._id}> <TableRow key={order._id}>
@@ -243,8 +249,8 @@ export default function OrderTable() {
<TableCell>#{order.orderId}</TableCell> <TableCell>#{order.orderId}</TableCell>
<TableCell>£{order.totalPrice.toFixed(2)}</TableCell> <TableCell>£{order.totalPrice.toFixed(2)}</TableCell>
<TableCell> <TableCell>
<div className={`flex items-center ${statusColor}`}> <div className={`flex items-center ${statusConfig[order.status as OrderStatus]?.color || "text-red-500"}`}>
<StatusIcon className="h-4 w-4 mr-2" /> <StatusIcon className={`h-4 w-4 mr-2 ${statusConfig[order.status as OrderStatus]?.animate || ""}`} />
{order.status.charAt(0).toUpperCase() + order.status.slice(1)} {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
</div> </div>
</TableCell> </TableCell>