oh

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

@@ -22,7 +22,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Clipboard, Truck, Package, ArrowRight, ChevronDown, AlertTriangle, Copy } from "lucide-react";
+import { Clipboard, Truck, Package, ArrowRight, ChevronDown, AlertTriangle, Copy, Loader2, RefreshCw } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import {
@@ -37,6 +37,7 @@ import {
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import Layout from "@/components/layout/layout";
+import { cacheUtils } from '@/lib/api-client';
 
 interface Order {
   orderId: string;
@@ -128,6 +129,7 @@ export default function OrderDetailsPage() {
   const [currentPage, setCurrentPage] = useState(1);
   const [isAcknowledging, setIsAcknowledging] = useState(false);
   const [isCancelling, setIsCancelling] = useState(false);
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
 
   const router = useRouter();
   const params = useParams();
@@ -182,8 +184,23 @@ export default function OrderDetailsPage() {
       if (response && response.message === "Order status updated successfully") {
         // Update both states
         setIsPaid(true);
-        setOrder((prevOrder) => (prevOrder ? { ...prevOrder, status: "paid" } : null));
+        setOrder((prevOrder) => (prevOrder ? { 
+          ...prevOrder, 
+          status: "paid",
+          // Clear underpayment flags when marking as paid
+          underpaid: false,
+          underpaymentAmount: 0
+        } : null));
+        
+        // Invalidate order cache to ensure fresh data everywhere
+        cacheUtils.invalidateOrderData(orderId as string);
+        
         toast.success("Order marked as paid successfully");
+        
+        // Refresh order data to get latest status
+        setTimeout(() => {
+          setRefreshTrigger(prev => prev + 1);
+        }, 500);
       } else {
         // Handle unexpected response format
         console.error("Unexpected response format:", response);
@@ -336,7 +353,7 @@ export default function OrderDetailsPage() {
 
         const data: Order = await res;
         setOrder(data);
-        console.log(data);
+        console.log("Fresh order data:", data);
 
         const productIds = data.products.map((product) => product.productId);
         const productNamesMap = await fetchProductNames(productIds, authToken);
@@ -368,7 +385,7 @@ export default function OrderDetailsPage() {
     };
 
     fetchOrderDetails();
-  }, [orderId]);
+  }, [orderId, refreshTrigger]);
 
   useEffect(() => {
     const fetchAdjacentOrders = async () => {
@@ -480,7 +497,13 @@ export default function OrderDetailsPage() {
 
   // Helper function to check if order is underpaid
   const isOrderUnderpaid = (order: Order | null) => {
-    return order?.underpaid === true && order?.underpaymentAmount && order.underpaymentAmount > 0;
+    // More robust check - only show underpaid if status is NOT paid and underpayment exists
+    return order?.underpaid === true && 
+           order?.underpaymentAmount && 
+           order.underpaymentAmount > 0 &&
+           order.status !== "paid" &&
+           order.status !== "completed" &&
+           order.status !== "shipped";
   };
 
   // Helper function to get underpaid information
@@ -501,6 +524,15 @@ export default function OrderDetailsPage() {
 
   const underpaidInfo = getUnderpaidInfo(order);
 
+  // Add order refresh subscription
+  useEffect(() => {
+    const unsubscribe = cacheUtils.onOrderRefresh(() => {
+      setRefreshTrigger(prev => prev + 1);
+    });
+
+    return unsubscribe;
+  }, []);
+
   if (loading)
     return (
       <Layout>
@@ -537,6 +569,19 @@ export default function OrderDetailsPage() {
             </div>
           </div>
           <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setRefreshTrigger(prev => prev + 1)}
+              disabled={loading}
+            >
+              {loading ? (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              ) : (
+                <RefreshCw className="h-4 w-4 mr-1" />
+              )}
+              Refresh
+            </Button>
             {prevOrderId && (
               <Button
                 variant="outline"