122 lines
4.3 KiB
TypeScript
122 lines
4.3 KiB
TypeScript
"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"
|
|
|
|
export default function OrderDetails() {
|
|
const params = useParams()
|
|
const orderId = params.id
|
|
|
|
// 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 handleSaveTracking = () => {
|
|
// TODO: Implement API call to save tracking number
|
|
console.log("Tracking number saved:", trackingNumber)
|
|
}
|
|
|
|
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>
|
|
|
|
<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
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
</div>
|
|
</Layout>
|
|
)
|
|
} |