Update page.tsx

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

@@ -27,6 +27,7 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { Clipboard, Truck, Package } from "lucide-react";
 import { useRouter } from "next/navigation";
+import { toast } from "sonner";
 
 interface Order {
   orderId: string;
@@ -42,6 +43,7 @@ interface Order {
     totalItemPrice: number;
   }>;
   totalPrice: number;
+  trackingNumber?: string;
 }
 
 export default function OrderDetailsPage() {
@@ -51,7 +53,7 @@ export default function OrderDetailsPage() {
   const [error, setError] = useState("");
   const [productNames, setProductNames] = useState<Record<string, string>>({});
   const [isPaid, setIsPaid] = useState(false);
-
+  const [isSending, setIsSending] = useState(false);
 
   const router = useRouter();
   const params = useParams();
@@ -149,15 +151,19 @@ export default function OrderDetailsPage() {
     };
 
     fetchOrderDetails();
-}, [orderId]);
+  }, [orderId]);
 
   const handleAddTracking = async () => {
-    if (!trackingNumber) return;
+    if (!trackingNumber) {
+      toast.error("Please enter a tracking number");
+      return;
+    }
 
     try {
+      setIsSending(true);
       const authToken = document.cookie.split("Authorization=")[1];
 
-      const res = await fetchData(
+      const response = await fetchData(
         `${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}/tracking`,
         {
           method: "PUT",
@@ -169,11 +175,21 @@ export default function OrderDetailsPage() {
         }
       );
 
-      if (!res.ok) throw new Error("Failed to update tracking number");
+      if (response.error) throw new Error(response.error);
 
-      console.log("Tracking number updated successfully!");
+      // Update the local state
+      setOrder(prevOrder => prevOrder ? {
+        ...prevOrder,
+        trackingNumber: trackingNumber
+      } : null);
+      
+      toast.success("Tracking number updated and notification sent to customer!");
+      setTrackingNumber(""); // Clear the input
     } catch (err: any) {
-      console.error(err.message);
+      console.error("Failed to update tracking:", err);
+      toast.error(err.message || "Failed to update tracking number");
+    } finally {
+      setIsSending(false);
     }
   };
 
@@ -249,9 +265,12 @@ export default function OrderDetailsPage() {
               </div>
             </CardContent>
             <CardFooter>
-              <Button onClick={handleAddTracking}>
+              <Button 
+                onClick={handleAddTracking} 
+                disabled={isSending || !trackingNumber.trim()}
+              >
                 <Package className="w-4 h-4 mr-2" />
-                Update Tracking
+                {isSending ? "Updating..." : "Update Tracking"}
               </Button>
             </CardFooter>
           </Card>