balls

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

@@ -0,0 +1,122 @@
+"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>
+  )
+}