order page

app/dashboard/orders/[id]/page.tsx

@@ -1,122 +1,221 @@
-"use client"
+"use client";
 
-import { useParams } from "next/navigation"
-import { useState } from "react"
-import Layout from "@/components/kokonutui/layout"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { ArrowLeft, Truck, DollarSign, Package, User } from "lucide-react"
-import Link from "next/link"
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import Layout from "@/components/kokonutui/layout";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Clipboard, Package, } from "lucide-react";
 
-export default function OrderDetails() {
-  const params = useParams()
-  const orderId = params.id
+export default function OrderDetailsPage() {
+  const [order, setOrder] = useState<any>(null);
+  const [trackingNumber, setTrackingNumber] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [productNames, setProductNames] = useState<Record<string, string>>({}); // Map of productId to productName
 
-  // In a real application, you would fetch the order details based on the orderId
-  const [trackingNumber, setTrackingNumber] = useState("")
 
-  const order = {
-    id: orderId,
-    customer: "John Doe",
-    email: "john.doe@example.com",
-    date: "2023-05-01",
-    total: "$150.00",
-    status: "Processing",
-    tracking: "",
-    items: [
-      { id: 1, name: "Product A", quantity: 2, price: "$50.00" },
-      { id: 2, name: "Product B", quantity: 1, price: "$50.00" },
-    ],
-    shippingAddress: "123 Main St, Anytown, AN 12345",
+  const params = useParams();
+  const orderId = params.id;
+
+  useEffect(() => {
+    const fetchOrderDetails = async () => {
+      try {
+        if (!orderId) return;
+
+        const authToken = document.cookie.split("Authorization=")[1];
+
+        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}`, {
+          method: "GET",
+          headers: { Authorization: `Bearer ${authToken}` },
+        });
+
+        if (!res.ok) throw new Error("Failed to fetch order details");
+
+        const data = await res.json();
+        setOrder(data);
+
+        // Fetch product names for the order
+        const productIds = data.products.map((product: any) => product.productId);
+        const productNamesMap = await fetchProductNames(productIds, authToken);
+        setProductNames(productNamesMap);
+      } catch (err: any) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
       }
+    };
 
-  const handleSaveTracking = () => {
-    // TODO: Implement API call to save tracking number
-    console.log("Tracking number saved:", trackingNumber)
+    const fetchProductNames = async (productIds: string[], authToken: string) => {
+      const productNamesMap: Record<string, string> = {};
+      try {
+        const promises = productIds.map((id) =>
+          fetch(`${process.env.NEXT_PUBLIC_API_URL}/products/${id}`, {
+            method: "GET",
+            headers: { Authorization: `Bearer ${authToken}` },
+          })
+        );
+        const responses = await Promise.all(promises);
+        const results = await Promise.all(responses.map((res) => res.json()));
+
+        results.forEach((product, index) => {
+          productNamesMap[productIds[index]] = product.name || "Unknown Product";
+        });
+      } catch (err) {
+        console.error("Failed to fetch product names:", err);
       }
+      return productNamesMap;
+    };
+
+    fetchOrderDetails();
+  }, [orderId]);
+
+
+  const handleAddTracking = async () => {
+    if (!trackingNumber) return;
+
+    try {
+      const authToken = document.cookie.split("Authorization=")[1];
+
+      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}/tracking`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${authToken}`,
+        },
+        body: JSON.stringify({ trackingNumber }),
+      });
+
+      if (!res.ok) throw new Error("Failed to update tracking number");
+
+      console.log("Tracking number updated successfully!");
+    } catch (err: any) {
+      console.error(err.message);
+    }
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+  };
+
+  if (loading) return <div className="text-center py-10">Loading order details...</div>;
+  if (error) return <div className="text-center text-red-500 py-10">Error: {error}</div>;
 
   return (
     <Layout>
       <div className="space-y-6">
-        <div className="flex items-center justify-between">
-          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">Order Details: {order.id}</h1>
-          <Link href="/dashboard/orders">
-            <Button variant="outline">
-              <ArrowLeft className="mr-2 h-4 w-4" /> Back to Orders
+        <div className="flex justify-between items-center">
+          <h1 className="text-3xl font-bold">Order Details: {order.orderId}</h1>
+          <Badge variant={order.status === "paid" ? "default" : "secondary"}>
+            {order.status}
+          </Badge>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2">
+        <Card>
+            <CardHeader>
+              <CardTitle>PGP Encrypted Address</CardTitle>
+              <CardDescription>Securely encrypted delivery address</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Textarea value={order.pgpAddress} readOnly className="font-mono text-xs" rows={10} />
+            </CardContent>
+            <CardFooter>
+              <Button variant="outline" onClick={() => copyToClipboard(order.pgpAddress)}>
+                <Clipboard className="w-4 h-4 mr-2" />
+                Copy to Clipboard
               </Button>
-          </Link>
+            </CardFooter>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Shipping Information</CardTitle>
+              <CardDescription>
+                Shipping method and tracking details
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label>Shipping Method</Label>
+                <div className="text-sm text-gray-700 dark:text-gray-300 font-medium">
+                  {order.shippingMethod.type} - £{order.shippingMethod.price.toFixed(2)}
                 </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="bg-white dark:bg-zinc-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
-            <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white flex items-center">
-              <User className="mr-2 h-5 w-5" />
-              Customer Information
-            </h2>
-            <p><strong>Name:</strong> {order.customer}</p>
-            <p><strong>Email:</strong> {order.email}</p>
-            <p><strong>Shipping Address:</strong> {order.shippingAddress}</p>
               </div>
-
-          <div className="bg-white dark:bg-zinc-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
-            <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white flex items-center">
-              <Package className="mr-2 h-5 w-5" />
-              Order Summary
-            </h2>
-            <p><strong>Order Date:</strong> {order.date}</p>
-            <p><strong>Total:</strong> {order.total}</p>
-            <p><strong>Status:</strong> {order.status}</p>
-
-            {/* Tracking Input Field */}
-            <div className="mt-4">
-              <p className="font-semibold text-gray-900 dark:text-white">Tracking Number:</p>
+              <div className="space-y-2">
+                <Label htmlFor="tracking">Tracking Number</Label>
                 <Input
-                type="text" 
-                placeholder="Enter tracking number" 
+                  id="tracking"
                   value={trackingNumber}
                   onChange={(e) => setTrackingNumber(e.target.value)}
-                className="mt-2"
+                  placeholder="Enter tracking number"
                 />
-              <Button className="mt-2" onClick={handleSaveTracking}>
-                Save Tracking
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button onClick={handleAddTracking}>
+                <Package className="w-4 h-4 mr-2" />
+                Update Tracking
               </Button>
-            </div>
-          </div>
+            </CardFooter>
+          </Card>
         </div>
 
-        <div className="bg-white dark:bg-zinc-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
-          <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Order Items</h2>
-          <table className="w-full">
-            <thead>
-              <tr>
-                <th className="text-left">Product</th>
-                <th className="text-left">Quantity</th>
-                <th className="text-left">Price</th>
-              </tr>
-            </thead>
-            <tbody>
-              {order.items.map((item) => (
-                <tr key={item.id}>
-                  <td>{item.name}</td>
-                  <td>{item.quantity}</td>
-                  <td>{item.price}</td>
-                </tr>
+        <Card>
+          <CardHeader>
+            <CardTitle>Order Items</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Item</TableHead>
+                  <TableHead>Quantity</TableHead>
+                  <TableHead>Price</TableHead>
+                  <TableHead>Total</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {order.products.map((product: any) => (
+                  <TableRow key={product._id}>
+                    <TableCell>{productNames[product.productId] || "Loading..."}</TableCell>
+                    <TableCell>{product.quantity}</TableCell>
+                    <TableCell>£{product.pricePerUnit.toFixed(2)}</TableCell>
+                    <TableCell>£{product.totalItemPrice.toFixed(2)}</TableCell>
+                  </TableRow>
                 ))}
-            </tbody>
-          </table>
-        </div>
-
-        <div className="flex justify-end space-x-4">
-          <Button variant="outline">
-            <Truck className="mr-2 h-4 w-4" />
-            Update Shipping
-          </Button>
-          <Button variant="outline">
-            <DollarSign className="mr-2 h-4 w-4" />
-            Process Refund
-          </Button>
-        </div>
+                <TableRow>
+                  <TableCell colSpan={3} className="font-bold text-right">
+                    Total:
+                  </TableCell>
+                  <TableCell className="font-bold">
+                    £{order.totalPrice.toFixed(2)}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
       </div>
     </Layout>
-  )
+  );
 }