order page
This commit is contained in:
g
@@ -1,122 +1,221 @@
|
|||||||
"use client"
|
"use client";
|
||||||
|
|
||||||
import { useParams } from "next/navigation"
|
import { useEffect, useState } from "react";
|
||||||
import { useState } from "react"
|
import { useParams } from "next/navigation";
|
||||||
import Layout from "@/components/kokonutui/layout"
|
import Layout from "@/components/kokonutui/layout";
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button";
|
||||||
import { Input } from "@/components/ui/input"
|
import { Input } from "@/components/ui/input";
|
||||||
import { ArrowLeft, Truck, DollarSign, Package, User } from "lucide-react"
|
import { Label } from "@/components/ui/label";
|
||||||
import Link from "next/link"
|
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() {
|
export default function OrderDetailsPage() {
|
||||||
const params = useParams()
|
const [order, setOrder] = useState<any>(null);
|
||||||
const orderId = params.id
|
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 = {
|
const params = useParams();
|
||||||
id: orderId,
|
const orderId = params.id;
|
||||||
customer: "John Doe",
|
|
||||||
email: "john.doe@example.com",
|
useEffect(() => {
|
||||||
date: "2023-05-01",
|
const fetchOrderDetails = async () => {
|
||||||
total: "$150.00",
|
try {
|
||||||
status: "Processing",
|
if (!orderId) return;
|
||||||
tracking: "",
|
|
||||||
items: [
|
const authToken = document.cookie.split("Authorization=")[1];
|
||||||
{ id: 1, name: "Product A", quantity: 2, price: "$50.00" },
|
|
||||||
{ id: 2, name: "Product B", quantity: 1, price: "$50.00" },
|
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}`, {
|
||||||
],
|
method: "GET",
|
||||||
shippingAddress: "123 Main St, Anytown, AN 12345",
|
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 = () => {
|
const fetchProductNames = async (productIds: string[], authToken: string) => {
|
||||||
// TODO: Implement API call to save tracking number
|
const productNamesMap: Record<string, string> = {};
|
||||||
console.log("Tracking number saved:", trackingNumber)
|
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 (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex justify-between items-center">
|
||||||
<h1 className="text-2xl font-semibold text-gray-900 dark:text-white">Order Details: {order.id}</h1>
|
<h1 className="text-3xl font-bold">Order Details: {order.orderId}</h1>
|
||||||
<Link href="/dashboard/orders">
|
<Badge variant={order.status === "paid" ? "default" : "secondary"}>
|
||||||
<Button variant="outline">
|
{order.status}
|
||||||
<ArrowLeft className="mr-2 h-4 w-4" /> Back to Orders
|
</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>
|
</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>
|
||||||
|
|
||||||
<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>
|
||||||
|
<div className="space-y-2">
|
||||||
<div className="bg-white dark:bg-zinc-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
|
<Label htmlFor="tracking">Tracking Number</Label>
|
||||||
<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>
|
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
id="tracking"
|
||||||
placeholder="Enter tracking number"
|
|
||||||
value={trackingNumber}
|
value={trackingNumber}
|
||||||
onChange={(e) => setTrackingNumber(e.target.value)}
|
onChange={(e) => setTrackingNumber(e.target.value)}
|
||||||
className="mt-2"
|
placeholder="Enter tracking number"
|
||||||
/>
|
/>
|
||||||
<Button className="mt-2" onClick={handleSaveTracking}>
|
</div>
|
||||||
Save Tracking
|
</CardContent>
|
||||||
|
<CardFooter>
|
||||||
|
<Button onClick={handleAddTracking}>
|
||||||
|
<Package className="w-4 h-4 mr-2" />
|
||||||
|
Update Tracking
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</CardFooter>
|
||||||
</div>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-white dark:bg-zinc-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
|
<Card>
|
||||||
<h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Order Items</h2>
|
<CardHeader>
|
||||||
<table className="w-full">
|
<CardTitle>Order Items</CardTitle>
|
||||||
<thead>
|
</CardHeader>
|
||||||
<tr>
|
<CardContent>
|
||||||
<th className="text-left">Product</th>
|
<Table>
|
||||||
<th className="text-left">Quantity</th>
|
<TableHeader>
|
||||||
<th className="text-left">Price</th>
|
<TableRow>
|
||||||
</tr>
|
<TableHead>Item</TableHead>
|
||||||
</thead>
|
<TableHead>Quantity</TableHead>
|
||||||
<tbody>
|
<TableHead>Price</TableHead>
|
||||||
{order.items.map((item) => (
|
<TableHead>Total</TableHead>
|
||||||
<tr key={item.id}>
|
</TableRow>
|
||||||
<td>{item.name}</td>
|
</TableHeader>
|
||||||
<td>{item.quantity}</td>
|
<TableBody>
|
||||||
<td>{item.price}</td>
|
{order.products.map((product: any) => (
|
||||||
</tr>
|
<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>
|
<TableRow>
|
||||||
</table>
|
<TableCell colSpan={3} className="font-bold text-right">
|
||||||
</div>
|
Total:
|
||||||
|
</TableCell>
|
||||||
<div className="flex justify-end space-x-4">
|
<TableCell className="font-bold">
|
||||||
<Button variant="outline">
|
£{order.totalPrice.toFixed(2)}
|
||||||
<Truck className="mr-2 h-4 w-4" />
|
</TableCell>
|
||||||
Update Shipping
|
</TableRow>
|
||||||
</Button>
|
</TableBody>
|
||||||
<Button variant="outline">
|
</Table>
|
||||||
<DollarSign className="mr-2 h-4 w-4" />
|
</CardContent>
|
||||||
Process Refund
|
</Card>
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user