Cleanup

2025-02-25 13:12:20 +00:00
parent 56c1b4d7b9
commit f498624eff
2 changed files with 357 additions and 237 deletions
--- a/app/dashboard/orders/[id]/page.tsx
+++ b/app/dashboard/orders/[id]/page.tsx
@@ -24,7 +24,7 @@ import {
  CardTitle,
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Clipboard, Truck, Package, ArrowRight } from "lucide-react";
+import { Clipboard, Truck, Package, ArrowRight, ChevronDown } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import {
@@ -38,6 +38,12 @@ import {
  AlertDialogTitle,
  AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
+import Layout from "@/components/layout/layout";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";

 interface Order {
  orderId: string;
@@ -58,16 +64,20 @@ interface Order {

 const getStatusVariant = (status: string) => {
  switch (status) {
+    case 'acknowledged':
+      return 'secondary';
    case 'paid':
-      return 'paid';
+      return 'default';
    case 'shipped':
-      return 'shipped';
+      return 'default';
    case 'completed':
-      return 'completed';
+      return 'default';
    case 'cancelled':
      return 'destructive';
+    case 'unpaid':
+      return 'secondary';
    default:
-      return 'unpaid';
+      return 'secondary';
  }
 };

@@ -87,6 +97,7 @@ export default function OrderDetailsPage() {
  const [currentOrderNumber, setCurrentOrderNumber] = useState(0);
  const [totalPages, setTotalPages] = useState(1);
  const [currentPage, setCurrentPage] = useState(1);
+  const [isAcknowledging, setIsAcknowledging] = useState(false);

  const router = useRouter();
  const params = useParams();
@@ -177,9 +188,9 @@ export default function OrderDetailsPage() {
    }
  };

-  const handleDiscardOrder = async () => {
+  const handleMarkAsAcknowledged = async () => {
    try {
-      setIsDiscarding(true);
+      setIsAcknowledging(true);
      const authToken = document.cookie.split("Authorization=")[1];
      const response = await fetchData(
        `${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}`,
@@ -189,19 +200,47 @@ export default function OrderDetailsPage() {
            "Content-Type": "application/json",
            Authorization: `Bearer ${authToken}`,
          },
-          body: JSON.stringify({ status: "cancelled" }),
+          body: JSON.stringify({ status: "acknowledged" }),
        }
      );

      if (response && response.message === "Order status updated successfully") {
-        setOrder((prevOrder) => prevOrder ? { ...prevOrder, status: "cancelled" } : null);
-        toast.success("Order discarded successfully!");
+        setOrder((prevOrder) => prevOrder ? { ...prevOrder, status: "acknowledged" } : null);
+        toast.success("Order marked as acknowledged!");
      } else {
-        throw new Error(response.error || "Failed to discard order");
+        throw new Error(response.error || "Failed to mark order as acknowledged");
      }
    } catch (error: any) {
-      console.error("Failed to discard order:", error);
-      toast.error(error.message || "Failed to discard order");
+      console.error("Failed to mark order as acknowledged:", error);
+      toast.error(error.message || "Failed to mark order as acknowledged");
+    } finally {
+      setIsAcknowledging(false);
+    }
+  };
+
+  const handleDiscardOrder = async () => {
+    try {
+      setIsDiscarding(true);
+      const authToken = document.cookie.split("Authorization=")[1];
+      const response = await fetchData(
+        `${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}`,
+        {
+          method: "DELETE",
+          headers: {
+            Authorization: `Bearer ${authToken}`,
+          },
+        }
+      );
+
+      if (response && response.message === "Order deleted successfully") {
+        toast.success("Order deleted successfully!");
+        router.push('/dashboard/orders');
+      } else {
+        throw new Error(response.error || "Failed to delete order");
+      }
+    } catch (error: any) {
+      console.error("Failed to delete order:", error);
+      toast.error(error.message || "Failed to delete order");
    } finally {
      setIsDiscarding(false);
    }
@@ -345,11 +384,20 @@ export default function OrderDetailsPage() {
  };

  if (loading)
-    return <div className="text-center py-10">Loading order details...</div>;
+    return (
+      <Layout>
+        <div className="text-center py-10">Loading order details...</div>
+      </Layout>
+    );
  if (error)
-    return <div className="text-center text-red-500 py-10">Error: {error}</div>;
+    return (
+      <Layout>
+        <div className="text-center text-red-500 py-10">Error: {error}</div>
+      </Layout>
+    );

  return (
+    <Layout>
      <div className="container mx-auto px-4 py-8">
        <div className="space-y-6">
          <div className="flex justify-between items-center">
@@ -357,12 +405,64 @@ export default function OrderDetailsPage() {
              <h1 className="text-3xl font-bold">Order Details: {order?.orderId}</h1>
            </div>
            <div className="flex items-center gap-2">
-            <Badge variant={getStatusVariant(order?.status || '')}>
+              <Badge 
+                variant={getStatusVariant(order?.status || '')}
+                className={`${
+                  order?.status === 'acknowledged' 
+                    ? '!bg-purple-600 hover:!bg-purple-700 text-white' 
+                    : order?.status === 'paid'
+                    ? 'bg-emerald-600 hover:bg-emerald-700 text-white'
+                    : order?.status === 'shipped'
+                    ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                    : order?.status === 'completed'
+                    ? 'bg-green-600 hover:bg-green-700 text-white'
+                    : ''
+                }`}
+              >
                {order?.status}
              </Badge>
            </div>
          </div>

+          {/* Order Navigation - Moved to top */}
+          <div className="flex justify-between items-center border-b pb-4">
+            <div className="w-[140px]">
+              {nextOrderId && (
+                <Button
+                  variant="outline"
+                  size="lg"
+                  onClick={() => {
+                    setLoading(true);
+                    router.push(`/dashboard/orders/${nextOrderId}`);
+                  }}
+                  className="flex items-center"
+                >
+                  <span className="mr-2">←</span>
+                  Older
+                </Button>
+              )}
+            </div>
+            <div className="text-center text-sm text-muted-foreground">
+              Navigate Orders
+            </div>
+            <div className="w-[140px] flex justify-end">
+              {prevOrderId && (
+                <Button
+                  variant="outline"
+                  size="lg"
+                  onClick={() => {
+                    setLoading(true);
+                    router.push(`/dashboard/orders/${prevOrderId}`);
+                  }}
+                  className="flex items-center"
+                >
+                  Newer
+                  <span className="ml-2">→</span>
+                </Button>
+              )}
+            </div>
+          </div>
+
          <div className="grid gap-6 md:grid-cols-2">
            <Card>
              <CardHeader>
@@ -466,9 +566,16 @@ export default function OrderDetailsPage() {
          </Card>

          {/* Add Crypto Transaction Details */}
+          <Collapsible>
            <div className="rounded-lg border bg-card text-card-foreground shadow-sm">
-          <div className="p-6">
-            <h3 className="text-lg font-semibold mb-4">Crypto Transactions</h3>
+              <CollapsibleTrigger className="w-full">
+                <div className="p-6 flex items-center justify-between">
+                  <h3 className="text-lg font-semibold">Crypto Transactions</h3>
+                  <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 [&[data-state=open]]:rotate-180" />
+                </div>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="px-6 pb-6">
                  {order?.txid && order.txid.length > 0 ? (
                    <div className="space-y-3">
                      {order.txid.slice(order.txid.length > 2 ? 1 : 0).map((txid: string, index: number) => (
@@ -476,7 +583,7 @@ export default function OrderDetailsPage() {
                          key={index}
                          className="p-3 bg-muted rounded-md"
                        >
-                    <code className="text-sm">{txid}</code>
+                          <code className="text-sm break-all">{txid}</code>
                        </div>
                      ))}
                    </div>
@@ -484,28 +591,30 @@ export default function OrderDetailsPage() {
                    <p className="text-muted-foreground">No crypto transactions associated with this order</p>
                  )}
                </div>
+              </CollapsibleContent>
            </div>
+          </Collapsible>

-        <div className="flex justify-between gap-4 mt-4">
+          <div className="flex justify-between gap-4">
            <div>
              {order?.status !== "cancelled" && (
                <AlertDialog>
                  <AlertDialogTrigger asChild>
                    <Button variant="destructive" size="lg" disabled={isDiscarding}>
-                    {isDiscarding ? "Discarding..." : "Discard Order"}
+                      {isDiscarding ? "Deleting..." : "Delete Order"}
                    </Button>
                  </AlertDialogTrigger>
                  <AlertDialogContent>
                    <AlertDialogHeader>
                      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
                      <AlertDialogDescription>
-                      This action will discard the order and cannot be undone.
+                        This action will permanently delete the order and cannot be undone.
                      </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                      <AlertDialogCancel>Cancel</AlertDialogCancel>
                      <AlertDialogAction onClick={handleDiscardOrder}>
-                      Discard Order
+                        Delete Order
                      </AlertDialogAction>
                    </AlertDialogFooter>
                  </AlertDialogContent>
@@ -513,7 +622,18 @@ export default function OrderDetailsPage() {
              )}
            </div>
            <div className="flex gap-4">
-            {order?.status === "unpaid" && (
+              {(order?.status === "unpaid" || order?.status === "paid") && (
+                <Button 
+                  size="lg" 
+                  onClick={handleMarkAsAcknowledged}
+                  disabled={isAcknowledging}
+                  className="bg-purple-600 hover:bg-purple-700"
+                >
+                  {isAcknowledging ? "Updating..." : "Mark as Acknowledged"}
+                </Button>
+              )}
+
+              {(order?.status === "unpaid" || order?.status === "acknowledged") && (
                <Button 
                  size="lg" 
                  onClick={handleMarkAsPaid}
@@ -537,43 +657,8 @@ export default function OrderDetailsPage() {
              )}
            </div>
          </div>
-
-        {/* Order Navigation */}
-        <div className="flex justify-between items-center pt-8 mt-8 border-t">
-          <div className="w-[140px]">
-            {prevOrderId && (
-              <Button
-                variant="outline"
-                size="lg"
-                onClick={() => {
-                  setLoading(true);
-                  router.push(`/dashboard/orders/${prevOrderId}`);
-                }}
-                className="flex items-center"
-              >
-                <span className="mr-2">←</span>
-                Newer
-              </Button>
-            )}
-          </div>
-          <div className="w-[140px] flex justify-end">
-            {nextOrderId && (
-              <Button
-                variant="outline"
-                size="lg"
-                onClick={() => {
-                  setLoading(true);
-                  router.push(`/dashboard/orders/${nextOrderId}`);
-                }}
-                className="flex items-center"
-              >
-                Older
-                <span className="ml-2">→</span>
-              </Button>
-            )}
-          </div>
-        </div>
        </div>
      </div>
+    </Layout>
  );
 }
--- a/components/tables/order-table.tsx
+++ b/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>