Update order-table.tsx

components/tables/order-table.tsx

@@ -31,6 +31,17 @@ import Link from "next/link";
 import { clientFetch } from '@/lib/client-utils';
 import { toast } from "sonner";
 import { Checkbox } from "@/components/ui/checkbox";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 
 interface Order {
   _id: string;
@@ -61,6 +72,7 @@ export default function OrderTable() {
     direction: "asc" | "desc";
   }>({ column: "orderDate", direction: "desc" });
   const [selectedOrders, setSelectedOrders] = useState<Set<string>>(new Set());
+  const [isShipping, setIsShipping] = useState(false);
   const ITEMS_PER_PAGE = 10;
 
   // Fetch orders with error handling
@@ -140,23 +152,39 @@ export default function OrderTable() {
     }
 
     try {
-      await clientFetch("/orders/mark-shipped", {
+      setIsShipping(true);
+      const response = await clientFetch("/orders/mark-shipped", {
         method: "POST",
         body: JSON.stringify({ orderIds: Array.from(selectedOrders) })
       });
       
-      setOrders(prev =>
-        prev.map(order =>
-          selectedOrders.has(order._id)
-            ? { ...order, status: "shipped" }
-            : order
-        )
-      );
+      // Only update orders that were successfully marked as shipped
+      if (response.success && response.success.orders) {
+        const successfulOrderIds = new Set(response.success.orders.map((o: any) => o.id));
+        
+        setOrders(prev =>
+          prev.map(order =>
+            successfulOrderIds.has(order._id)
+              ? { ...order, status: "shipped" }
+              : order
+          )
+        );
+        
+        if (response.failed && response.failed.count > 0) {
+          toast.warning(`${response.failed.count} orders could not be marked as shipped`);
+        }
+        
+        if (response.success.count > 0) {
+          toast.success(`${response.success.count} orders marked as shipped`);
+        }
+      }
+      
       setSelectedOrders(new Set());
-      toast.success("Selected orders marked as shipped");
     } catch (error) {
       toast.error("Failed to update orders");
       console.error("Shipping error:", error);
+    } finally {
+      setIsShipping(false);
     }
   };
 
@@ -188,10 +216,33 @@ export default function OrderTable() {
           </SelectContent>
         </Select>
 
-        <Button onClick={markAsShipped} disabled={selectedOrders.size === 0}>
-          <Truck className="mr-2 h-5 w-5" />
-          Mark Shipped ({selectedOrders.size})
-        </Button>
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button disabled={selectedOrders.size === 0 || isShipping}>
+              <Truck className="mr-2 h-5 w-5" />
+              {isShipping ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                `Mark Shipped (${selectedOrders.size})`
+              )}
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Mark Orders as Shipped</AlertDialogTitle>
+              <AlertDialogDescription>
+                Are you sure you want to mark {selectedOrders.size} order{selectedOrders.size !== 1 ? 's' : ''} as shipped? 
+                This action cannot be undone.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction onClick={markAsShipped}>
+                Confirm
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
       </div>
 
       {/* Table */}
@@ -244,6 +295,7 @@ export default function OrderTable() {
                     <Checkbox
                       checked={selectedOrders.has(order._id)}
                       onCheckedChange={() => toggleSelection(order._id)}
+                      disabled={order.status !== "paid"}
                     />
                   </TableCell>
                   <TableCell>#{order.orderId}</TableCell>