oh

components/dashboard/BuyerOrderInfo.tsx

@@ -13,6 +13,7 @@ import {
 import { getCookie } from "@/lib/api";
 import axios from "axios";
 import { useRouter } from "next/navigation";
+import { cacheUtils } from "@/lib/api-client";
 
 interface Order {
   _id: string;
@@ -46,6 +47,17 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
   const lastFetchedRef = useRef<number>(0);
   const isFetchingRef = useRef<boolean>(false);
   const tooltipDelayRef = useRef<NodeJS.Timeout | null>(null);
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+  
+  // Add order refresh subscription
+  useEffect(() => {
+    const unsubscribe = cacheUtils.onOrderRefresh(() => {
+      console.log("Order refresh triggered in BuyerOrderInfo");
+      setRefreshTrigger(prev => prev + 1);
+    });
+
+    return unsubscribe;
+  }, []);
   
   // Fetch data without unnecessary dependencies to reduce render cycles
   const fetchBuyerOrders = useCallback(async (force = false) => {
@@ -57,7 +69,7 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
     
     // Don't fetch if we already have orders and data was fetched less than 10 seconds ago
     const now = Date.now();
-    if (!force && orders.length > 0 && now - lastFetchedRef.current < 10000) return;
+    if (!force && !refreshTrigger && orders.length > 0 && now - lastFetchedRef.current < 10000) return;
     
     // Only continue if we have a chatId
     if (!chatId) return;
@@ -69,8 +81,8 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
       const authToken = getCookie("Authorization");
       
       if (!authToken) {
-        isFetchingRef.current = false;
-        setLoading(false);
+        console.error("No auth token found for buyer orders");
+        setHasOrders(false);
         return;
       }
       
@@ -92,14 +104,22 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
       }
       
       lastFetchedRef.current = Date.now();
-    } catch (error) {
+    } catch (error: any) {
       console.error("Error fetching buyer orders:", error);
-      setHasOrders(false);
+      
+      if (error.response?.status === 404) {
+        console.log("No orders found for this buyer");
+        setOrders([]);
+        setHasOrders(false);
+      } else {
+        console.error("API error:", error.response?.data || error.message);
+        setHasOrders(null);
+      }
     } finally {
       setLoading(false);
       isFetchingRef.current = false;
     }
-  }, [chatId]); // Minimize dependencies even further
+  }, [chatId, refreshTrigger]); // Add refreshTrigger as dependency
   
   // Start fetching immediately when component mounts
   useEffect(() => {
@@ -145,9 +165,15 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
     return `£${price.toFixed(2)}`;
   };
   
-  // Helper function to check if order is underpaid
+  // Helper function to check if order is underpaid (improved)
   const isOrderUnderpaid = (order: Order) => {
-    return order.underpaid === true && order.underpaymentAmount && order.underpaymentAmount > 0;
+    return order.underpaid === true && 
+           order.underpaymentAmount && 
+           order.underpaymentAmount > 0 &&
+           order.status !== "paid" &&
+           order.status !== "completed" &&
+           order.status !== "shipped" &&
+           order.status !== "cancelled";
   };
 
   // Helper function to get underpaid percentage
@@ -196,33 +222,27 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
             )}
           </Button>
         </TooltipTrigger>
-        <TooltipContent 
-          side="left" 
-          className="w-80 p-0"
-        >
+        <TooltipContent side="left" className="p-0 max-w-xs">
           {loading ? (
-            <div className="p-4 flex items-center justify-center">
-              <Loader2 className="h-4 w-4 animate-spin mr-2" />
+            <div className="p-3 flex items-center gap-2">
+              <Loader2 className="h-4 w-4 animate-spin" />
               <span className="text-sm">Loading orders...</span>
             </div>
           ) : orders.length === 0 ? (
-            <div className="p-4 text-center">
-              <Package className="h-8 w-8 mx-auto text-muted-foreground mb-2" />
-              <p className="text-sm text-muted-foreground">No orders found</p>
+            <div className="p-3">
+              <span className="text-sm text-muted-foreground">No orders found</span>
             </div>
           ) : (
             <>
-              <div className="p-3 border-b bg-muted/50">
-                <div className="flex items-center justify-between">
-                  <h4 className="font-medium text-sm">Recent Orders</h4>
-                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                    <Package className="h-3 w-3" />
-                    {orders.length} {orders.length === 1 ? 'order' : 'orders'}
-                  </div>
-                </div>
+              <div className="p-3 border-b">
+                <h4 className="font-medium text-sm">Customer Orders</h4>
+                <p className="text-xs text-muted-foreground">
+                  {orders.length} {orders.length === 1 ? 'order' : 'orders'} • Total: {formatPrice(
+                    orders.reduce((sum, order) => sum + order.totalPrice, 0)
+                  )}
+                </p>
               </div>
               
-              {/* Show orders */}
               <div className="max-h-64 overflow-y-auto divide-y divide-border">
                 {orders.map((order) => (
                   <div