order page
This commit is contained in:
g
@@ -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;
|
||||
|
||||
const handleSaveTracking = () => {
|
||||
// TODO: Implement API call to save tracking number
|
||||
console.log("Tracking number saved:", trackingNumber)
|
||||
}
|
||||
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 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
|
||||
</Button>
|
||||
</Link>
|
||||
<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 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>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Enter tracking number"
|
||||
value={trackingNumber}
|
||||
onChange={(e) => setTrackingNumber(e.target.value)}
|
||||
className="mt-2"
|
||||
/>
|
||||
<Button className="mt-2" onClick={handleSaveTracking}>
|
||||
Save Tracking
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</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="space-y-2">
|
||||
<Label htmlFor="tracking">Tracking Number</Label>
|
||||
<Input
|
||||
id="tracking"
|
||||
value={trackingNumber}
|
||||
onChange={(e) => setTrackingNumber(e.target.value)}
|
||||
placeholder="Enter tracking number"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button onClick={handleAddTracking}>
|
||||
<Package className="w-4 h-4 mr-2" />
|
||||
Update Tracking
|
||||
</Button>
|
||||
</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>
|
||||
))}
|
||||
</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>
|
||||
<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>
|
||||
))}
|
||||
<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>
|
||||
)
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user