fix

components/tables/order-table.tsx

@@ -34,7 +34,9 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import { clientFetch } from '@/lib/api';
+import { exportOrdersToCSV } from '@/lib/api-client';
 import { toast } from "sonner";
+import { Download } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
   AlertDialog,
@@ -140,6 +142,7 @@ export default function OrderTable() {
   const [itemsPerPage, setItemsPerPage] = useState<number>(20);
   const pageSizeOptions = [5, 10, 15, 20, 25, 50, 75, 100];
   const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [exporting, setExporting] = useState(false);
 
   // Add order refresh subscription
   useEffect(() => {
@@ -351,6 +354,25 @@ export default function OrderTable() {
     toast.success("Orders refreshed");
   };
 
+  // Handle CSV export
+  const handleExportCSV = async () => {
+    if (statusFilter === "all") {
+      toast.error("Please select a specific status to export");
+      return;
+    }
+
+    try {
+      setExporting(true);
+      await exportOrdersToCSV(statusFilter);
+      toast.success(`Orders exported successfully!`);
+    } catch (error) {
+      console.error("Error exporting orders:", error);
+      toast.error("Failed to export orders");
+    } finally {
+      setExporting(false);
+    }
+  };
+
   // Add periodic refresh for underpaid orders
   useEffect(() => {
     // Check if we have any underpaid orders
@@ -384,6 +406,27 @@ export default function OrderTable() {
                 onChange={(value) => handleItemsPerPageChange({ target: { value } } as React.ChangeEvent<HTMLSelectElement>)}
                 options={pageSizeOptions}
               />
+
+              {statusFilter !== "all" && (
+                <Button
+                  onClick={handleExportCSV}
+                  disabled={exporting}
+                  variant="outline"
+                  size="sm"
+                >
+                  {exporting ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Exporting...
+                    </>
+                  ) : (
+                    <>
+                      <Download className="mr-2 h-4 w-4" />
+                      Export CSV
+                    </>
+                  )}
+                </Button>
+              )}
             </div>
             
             <div className="flex items-center gap-2 self-end lg:self-auto">