Cleanup

components/tables/order-table.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
+import React from "react";
 import {
   Table,
   TableBody,
@@ -57,10 +58,11 @@ type SortableColumns = "orderId" | "totalPrice" | "status" | "orderDate";
 interface StatusConfig {
   icon: React.ElementType;
   color: string;
+  bgColor: string;
   animate?: string;
 }
 
-type OrderStatus = "paid" | "unpaid" | "confirming" | "shipped" | "completed" | "disputed" | "cancelled";
+type OrderStatus = "paid" | "unpaid" | "acknowledged" | "shipped" | "completed" | "cancelled" | "confirming";
 
 export default function OrderTable() {
   const [orders, setOrders] = useState<Order[]>([]);
@@ -208,13 +210,42 @@ export default function OrderTable() {
   };
 
   const statusConfig: Record<OrderStatus, StatusConfig> = {
-    paid: { icon: CheckCircle2, color: "text-green-500" },
-    unpaid: { icon: XCircle, color: "text-red-500" },
-    confirming: { icon: Loader2, color: "text-yellow-500", animate: "animate-spin" },
-    shipped: { icon: Truck, color: "text-blue-500" },
-    completed: { icon: CheckCircle2, color: "text-gray-500" },
-    disputed: { icon: XCircle, color: "text-orange-500" },
-    cancelled: { icon: XCircle, color: "text-gray-400" }
+    acknowledged: { 
+      icon: CheckCircle2, 
+      color: "text-white",
+      bgColor: "bg-purple-600" 
+    },
+    paid: { 
+      icon: CheckCircle2, 
+      color: "text-white",
+      bgColor: "bg-emerald-600" 
+    },
+    unpaid: { 
+      icon: XCircle, 
+      color: "text-white",
+      bgColor: "bg-red-500" 
+    },
+    confirming: { 
+      icon: Loader2, 
+      color: "text-white",
+      bgColor: "bg-yellow-500", 
+      animate: "animate-spin" 
+    },
+    shipped: { 
+      icon: Truck, 
+      color: "text-white",
+      bgColor: "bg-blue-600" 
+    },
+    completed: { 
+      icon: CheckCircle2, 
+      color: "text-white",
+      bgColor: "bg-green-600" 
+    },
+    cancelled: { 
+      icon: XCircle, 
+      color: "text-white",
+      bgColor: "bg-gray-500" 
+    }
   };
 
   return (
@@ -317,8 +348,12 @@ export default function OrderTable() {
                   <TableCell>#{order.orderId}</TableCell>
                   <TableCell>£{order.totalPrice.toFixed(2)}</TableCell>
                   <TableCell>
-                    <div className={`flex items-center ${statusConfig[order.status as OrderStatus]?.color || "text-red-500"}`}>
-                      <StatusIcon className={`h-4 w-4 mr-2 ${statusConfig[order.status as OrderStatus]?.animate || ""}`} />
+                    <div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm ${
+                      statusConfig[order.status as OrderStatus]?.bgColor || "bg-gray-500"
+                    } ${statusConfig[order.status as OrderStatus]?.color || "text-white"}`}>
+                      {React.createElement(statusConfig[order.status as OrderStatus]?.icon || XCircle, {
+                        className: `h-4 w-4 ${statusConfig[order.status as OrderStatus]?.animate || ""}`
+                      })}
                       {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
                     </div>
                   </TableCell>