Update page.tsx

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

@@ -672,9 +672,28 @@ export default function OrderDetailsPage() {
                 )}
 
                 {order?.status === "acknowledged" && (
+                  <Button
+                    className="w-full"
+                    onClick={handleMarkAsShipped}
+                    disabled={isMarkingShipped}
+                  >
+                    {isMarkingShipped ? "Processing..." : "Mark as Shipped"}
+                  </Button>
+                )}
+
+                {(order?.status === "acknowledged" || order?.status === "shipped") && (
                   <div className="space-y-4">
+                    {order.trackingNumber === "" ? (
+                      <div className="text-sm text-zinc-400 text-center py-2">
+                        Tracking number has been viewed by the buyer
+                      </div>
+                    ) : order.trackingNumber ? (
+                      <div className="text-sm text-zinc-400 text-center py-2">
+                        Tracking number is present
+                      </div>
+                    ) : (
                       <div className="space-y-2">
-                      <Label htmlFor="tracking">Tracking Number</Label>
+                        <Label htmlFor="tracking">Tracking Number (Optional)</Label>
                         <div className="flex gap-2">
                           <Input
                             id="tracking"
@@ -691,17 +710,14 @@ export default function OrderDetailsPage() {
                           </Button>
                         </div>
                       </div>
-                    <Button
+                    )}
-                      className="w-full"
-                      onClick={handleMarkAsShipped}
-                      disabled={isMarkingShipped || !trackingNumber}
-                    >
-                      {isMarkingShipped ? "Processing..." : "Mark as Shipped"}
-                    </Button>
                   </div>
                 )}
 
-                {order?.status !== "cancelled" && order?.status !== "completed" && (
+                {/* Cancel Order Button */}
+                {order?.status !== "cancelled" && 
+                 order?.status !== "completed" && 
+                 order?.status !== "shipped" && (
                   <AlertDialog>
                     <AlertDialogTrigger asChild>
                       <Button variant="destructive" className="w-full">
@@ -730,7 +746,7 @@ export default function OrderDetailsPage() {
 
                 {(order?.status === "completed" || order?.status === "cancelled") && (
                   <div className="text-center py-6 text-sm text-zinc-500">
-                    No actions available - Order is {order.status.toLowerCase()}
+                    No actions available - Order is {order.status}
                   </div>
                 )}
               </CardContent>