Update modal

components/tables/order-table.tsx

@@ -43,6 +43,14 @@ interface Order {
 
 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() {
   const [orders, setOrders] = useState<Order[]>([]);
   const [loading, setLoading] = useState(true);
@@ -152,11 +160,10 @@ export default function OrderTable() {
     }
   };
 
-  // Status display configuration
-  const statusConfig = {
+  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 -" },
+    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" },
@@ -230,7 +237,6 @@ export default function OrderTable() {
           ) : (
             paginatedOrders.map(order => {
               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 (
                 <TableRow key={order._id}>
@@ -243,8 +249,8 @@ export default function OrderTable() {
                   <TableCell>#{order.orderId}</TableCell>
                   <TableCell>£{order.totalPrice.toFixed(2)}</TableCell>
                   <TableCell>
-                    <div className={`flex items-center ${statusColor}`}>
-                      <StatusIcon className="h-4 w-4 mr-2" />
+                    <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 || ""}`} />
                       {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
                     </div>
                   </TableCell>