fixed some bugs

features/cart/components/CartItemCard.tsx

@@ -1,300 +1,325 @@
-"use client"
-import { useState, useEffect, useRef, useCallback } from "react"
-import Image from "next/image"
-import { Minus, Plus, Trash2, Loader2, AlertTriangle } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
+"use client";
+import { useState, useEffect, useRef, useCallback } from "react";
+import Image from "next/image";
+import { Minus, Plus, Trash2, Loader2, AlertTriangle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
-import { useUpdateCartItemQuantity, useRemoveFromCart } from "@/lib/hooks"
-import { useTranslations } from "next-intl"
-import type { CartItem } from "@/lib/types/api"
+} from "@/components/ui/dialog";
+import { useUpdateCartItemQuantity, useRemoveFromCart } from "@/lib/hooks";
+import { useTranslations } from "next-intl";
+import type { CartItem } from "@/lib/types/api";
 
 interface CartItemCardProps {
-  item: CartItem
-  onUpdate?: () => void
+  item: CartItem;
+  onUpdate?: () => void;
 }
 
 // Session Storage Key
-const PENDING_CART_UPDATES_KEY = 'pendingCartUpdates'
+const PENDING_CART_UPDATES_KEY = "pendingCartUpdates";
 
 interface PendingUpdate {
-  quantity: number
-  timestamp: number
-  retryCount: number
+  quantity: number;
+  timestamp: number;
+  retryCount: number;
 }
 
 export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
-  const t = useTranslations()
-  
-  // Local UI State (Instant feedback)
-  const [localQuantity, setLocalQuantity] = useState(item.quantity)
-  
-  // Sync State
-  const [isSyncing, setIsSyncing] = useState(false)
-  const [syncError, setSyncError] = useState(false)
-  
-  // Stock limit modal
-  const [showStockModal, setShowStockModal] = useState(false)
-  
-  // Refs
-  const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined)
-  const isRequestInFlightRef = useRef(false)
-  const pendingQuantityRef = useRef<number | null>(null)
-  const retryCountRef = useRef(0)
-  const retryTimerRef = useRef<NodeJS.Timeout | undefined>(undefined)
-  
-  // Function refs to solve circular dependency
-  const syncToServerRef = useRef<((quantity: number) => void) | null>(null)
-  const retrySyncRef = useRef<((quantity: number) => void) | null>(null)
+  const t = useTranslations();
 
-  const { mutate: updateQuantity } = useUpdateCartItemQuantity()
-  const { mutate: removeItem, isPending: isRemoving } = useRemoveFromCart()
+  // Local UI State (Instant feedback)
+  const [localQuantity, setLocalQuantity] = useState(item.quantity);
+
+  // Sync State
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [syncError, setSyncError] = useState(false);
+
+  // Stock limit modal
+  const [showStockModal, setShowStockModal] = useState(false);
+
+  // Refs
+  const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const isRequestInFlightRef = useRef(false);
+  const pendingQuantityRef = useRef<number | null>(null);
+  const retryCountRef = useRef(0);
+  const retryTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+  // Function refs to solve circular dependency
+  const syncToServerRef = useRef<((quantity: number) => void) | null>(null);
+  const retrySyncRef = useRef<((quantity: number) => void) | null>(null);
+
+  const { mutate: updateQuantity } = useUpdateCartItemQuantity();
+  const { mutate: removeItem, isPending: isRemoving } = useRemoveFromCart();
 
   // Get available stock
-  const availableStock = item.product.stock || 0
+  const availableStock = item.product.stock || 0;
 
   // Initialize from server state
   useEffect(() => {
-    setLocalQuantity(item.quantity)
-  }, [item.quantity])
+    setLocalQuantity(item.quantity);
+  }, [item.quantity]);
 
   // Save to sessionStorage
-  const savePendingUpdate = useCallback((quantity: number) => {
-    try {
-      const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY)
-      const pending: Record<number, PendingUpdate> = stored ? JSON.parse(stored) : {}
-      
-      pending[item.product_id] = {
-        quantity,
-        timestamp: Date.now(),
-        retryCount: retryCountRef.current
+  const savePendingUpdate = useCallback(
+    (quantity: number) => {
+      try {
+        const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY);
+        const pending: Record<number, PendingUpdate> = stored
+          ? JSON.parse(stored)
+          : {};
+
+        pending[item.product_id] = {
+          quantity,
+          timestamp: Date.now(),
+          retryCount: retryCountRef.current,
+        };
+
+        sessionStorage.setItem(
+          PENDING_CART_UPDATES_KEY,
+          JSON.stringify(pending)
+        );
+      } catch (error) {
+        console.error("Failed to save pending update:", error);
       }
-      
-      sessionStorage.setItem(PENDING_CART_UPDATES_KEY, JSON.stringify(pending))
-    } catch (error) {
-      console.error('Failed to save pending update:', error)
-    }
-  }, [item.product_id])
+    },
+    [item.product_id]
+  );
 
   // Remove from sessionStorage
   const clearPendingUpdate = useCallback(() => {
     try {
-      const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY)
+      const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY);
       if (stored) {
-        const pending: Record<number, PendingUpdate> = JSON.parse(stored)
-        delete pending[item.product_id]
-        
+        const pending: Record<number, PendingUpdate> = JSON.parse(stored);
+        delete pending[item.product_id];
+
         if (Object.keys(pending).length === 0) {
-          sessionStorage.removeItem(PENDING_CART_UPDATES_KEY)
+          sessionStorage.removeItem(PENDING_CART_UPDATES_KEY);
         } else {
-          sessionStorage.setItem(PENDING_CART_UPDATES_KEY, JSON.stringify(pending))
+          sessionStorage.setItem(
+            PENDING_CART_UPDATES_KEY,
+            JSON.stringify(pending)
+          );
         }
       }
     } catch (error) {
-      console.error('Failed to clear pending update:', error)
+      console.error("Failed to clear pending update:", error);
     }
-  }, [item.product_id])
+  }, [item.product_id]);
 
   // Exponential backoff retry
   const retrySync = useCallback((quantity: number) => {
-    const maxRetries = 4
-    const retryCount = retryCountRef.current
+    const maxRetries = 4;
+    const retryCount = retryCountRef.current;
 
     if (retryCount >= maxRetries) {
-      setSyncError(true)
-      setIsSyncing(false)
-      return
+      setSyncError(true);
+      setIsSyncing(false);
+      return;
     }
 
-    const delay = Math.min(1000 * Math.pow(2, retryCount), 16000) // Max 16s
-    retryCountRef.current++
-    
+    const delay = Math.min(1000 * Math.pow(2, retryCount), 16000); // Max 16s
+    retryCountRef.current++;
+
     retryTimerRef.current = setTimeout(() => {
-      syncToServerRef.current?.(quantity)
-    }, delay)
-  }, [])
+      syncToServerRef.current?.(quantity);
+    }, delay);
+  }, []);
 
   // Update ref
-  retrySyncRef.current = retrySync
+  retrySyncRef.current = retrySync;
 
   // Sync to server
-  const syncToServer = useCallback((quantity: number) => {
-    // If already syncing, queue this update
-    if (isRequestInFlightRef.current) {
-      pendingQuantityRef.current = quantity
-      return
-    }
+  const syncToServer = useCallback(
+    (quantity: number) => {
+      // If already syncing, queue this update
+      if (isRequestInFlightRef.current) {
+        pendingQuantityRef.current = quantity;
+        return;
+      }
 
-    // Mark as syncing
-    isRequestInFlightRef.current = true
-    setIsSyncing(true)
-    setSyncError(false)
+      // Mark as syncing
+      isRequestInFlightRef.current = true;
+      setIsSyncing(true);
+      setSyncError(false);
 
-    if (quantity <= 0) {
-      removeItem(item.product_id, {
-        onSuccess: () => {
-          isRequestInFlightRef.current = false
-          setIsSyncing(false)
-          retryCountRef.current = 0
-          clearPendingUpdate()
-          onUpdate?.()
-          
-          // Process queued update if any
-          if (pendingQuantityRef.current !== null) {
-            const nextQuantity = pendingQuantityRef.current
-            pendingQuantityRef.current = null
-            setTimeout(() => syncToServerRef.current?.(nextQuantity), 100)
-          }
-        },
-        onError: (error) => {
-          console.error('Remove failed:', error)
-          isRequestInFlightRef.current = false
-          retrySyncRef.current?.(quantity)
-        }
-      })
-    } else {
-      updateQuantity(
-        { productId: item.product_id, quantity },
-        {
+      if (quantity <= 0) {
+        removeItem(item.product_id, {
           onSuccess: () => {
-            isRequestInFlightRef.current = false
-            setIsSyncing(false)
-            retryCountRef.current = 0
-            clearPendingUpdate()
-            onUpdate?.()
-            
+            isRequestInFlightRef.current = false;
+            setIsSyncing(false);
+            retryCountRef.current = 0;
+            clearPendingUpdate();
+            onUpdate?.();
+
             // Process queued update if any
             if (pendingQuantityRef.current !== null) {
-              const nextQuantity = pendingQuantityRef.current
-              pendingQuantityRef.current = null
-              setTimeout(() => syncToServerRef.current?.(nextQuantity), 100)
+              const nextQuantity = pendingQuantityRef.current;
+              pendingQuantityRef.current = null;
+              setTimeout(() => syncToServerRef.current?.(nextQuantity), 100);
             }
           },
           onError: (error) => {
-            console.error('Update failed:', error)
-            isRequestInFlightRef.current = false
-            
-            // Rollback on error after retries exhausted
-            if (retryCountRef.current >= 3) {
-              setLocalQuantity(item.quantity)
-              clearPendingUpdate()
-            }
-            
-            retrySyncRef.current?.(quantity)
+            console.error("Remove failed:", error);
+            isRequestInFlightRef.current = false;
+            retrySyncRef.current?.(quantity);
+          },
+        });
+      } else {
+        updateQuantity(
+          { productId: item.product_id, quantity },
+          {
+            onSuccess: () => {
+              isRequestInFlightRef.current = false;
+              setIsSyncing(false);
+              retryCountRef.current = 0;
+              clearPendingUpdate();
+              onUpdate?.();
+
+              // Process queued update if any
+              if (pendingQuantityRef.current !== null) {
+                const nextQuantity = pendingQuantityRef.current;
+                pendingQuantityRef.current = null;
+                setTimeout(() => syncToServerRef.current?.(nextQuantity), 100);
+              }
+            },
+            onError: (error) => {
+              console.error("Update failed:", error);
+              isRequestInFlightRef.current = false;
+
+              // Rollback on error after retries exhausted
+              if (retryCountRef.current >= 3) {
+                setLocalQuantity(item.quantity);
+                clearPendingUpdate();
+              }
+
+              retrySyncRef.current?.(quantity);
+            },
           }
-        }
-      )
-    }
-  }, [item.product_id, item.quantity, updateQuantity, removeItem, onUpdate, clearPendingUpdate])
+        );
+      }
+    },
+    [
+      item.product_id,
+      item.quantity,
+      updateQuantity,
+      removeItem,
+      onUpdate,
+      clearPendingUpdate,
+    ]
+  );
 
   // Update ref
-  syncToServerRef.current = syncToServer
+  syncToServerRef.current = syncToServer;
 
   // Load pending updates from sessionStorage on mount
   useEffect(() => {
     const loadPendingUpdates = () => {
       try {
-        const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY)
+        const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY);
         if (stored) {
-          const pending: Record<number, PendingUpdate> = JSON.parse(stored)
-          const productPending = pending[item.product_id]
-          
+          const pending: Record<number, PendingUpdate> = JSON.parse(stored);
+          const productPending = pending[item.product_id];
+
           if (productPending && productPending.quantity !== item.quantity) {
             // Apply pending update
-            setLocalQuantity(productPending.quantity)
-            pendingQuantityRef.current = productPending.quantity
-            retryCountRef.current = productPending.retryCount
-            
+            setLocalQuantity(productPending.quantity);
+            pendingQuantityRef.current = productPending.quantity;
+            retryCountRef.current = productPending.retryCount;
+
             // Trigger sync after a short delay
-            setTimeout(() => syncToServerRef.current?.(productPending.quantity), 500)
+            setTimeout(
+              () => syncToServerRef.current?.(productPending.quantity),
+              500
+            );
           }
         }
       } catch (error) {
-        console.error('Failed to load pending updates:', error)
+        console.error("Failed to load pending updates:", error);
       }
-    }
+    };
 
-    loadPendingUpdates()
-  }, [item.product_id, item.quantity])
+    loadPendingUpdates();
+  }, [item.product_id, item.quantity]);
 
   // Debounced sync
   useEffect(() => {
     // Clear existing timers
     if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current)
+      clearTimeout(debounceTimerRef.current);
     }
 
     // If local quantity matches server, no sync needed
     if (localQuantity === item.quantity) {
-      return
+      return;
     }
 
     // Save to sessionStorage immediately
-    savePendingUpdate(localQuantity)
+    savePendingUpdate(localQuantity);
 
     // Debounce the API call
     debounceTimerRef.current = setTimeout(() => {
-      syncToServerRef.current?.(localQuantity)
-    }, 800)
+      syncToServerRef.current?.(localQuantity);
+    }, 800);
 
     return () => {
       if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current)
+        clearTimeout(debounceTimerRef.current);
       }
-    }
-  }, [localQuantity, item.quantity, savePendingUpdate])
+    };
+  }, [localQuantity, item.quantity, savePendingUpdate]);
 
   // Cleanup
   useEffect(() => {
     return () => {
-      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
-      if (retryTimerRef.current) clearTimeout(retryTimerRef.current)
-    }
-  }, [])
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
+    };
+  }, []);
 
   const handleQuantityIncrease = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    
+    e.preventDefault();
+    e.stopPropagation();
+
     // Check stock limit
     if (localQuantity >= availableStock) {
-      setShowStockModal(true)
-      return
+      setShowStockModal(true);
+      return;
     }
-    
+
     // Optimistic update (instant UI feedback)
-    setLocalQuantity(prev => prev + 1)
-  }
+    setLocalQuantity((prev) => prev + 1);
+  };
 
   const handleQuantityDecrease = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    
+    e.preventDefault();
+    e.stopPropagation();
+
     if (localQuantity <= 1) {
-      handleDelete()
-      return
+      handleDelete();
+      return;
     }
-    
+
     // Optimistic update (instant UI feedback)
-    setLocalQuantity(prev => prev - 1)
-  }
+    setLocalQuantity((prev) => prev - 1);
+  };
 
   const handleDelete = () => {
-    setLocalQuantity(0)
-    clearPendingUpdate()
-  }
+    setLocalQuantity(0);
+    clearPendingUpdate();
+  };
 
   const getImageSrc = () => {
-    if (item.product.image) return item.product.image
-    if (item.product.images && item.product.images.length > 0) return item.product.images[0]
-    return "/placeholder.svg"
-  }
+    if (item.product.image) return item.product.image;
+    if (item.product.images && item.product.images.length > 0)
+      return item.product.images[0];
+    return "/placeholder.svg";
+  };
 
   return (
     <>
@@ -302,11 +327,18 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
         <div className="flex flex-col sm:flex-row gap-4">
           <div className="flex gap-4 flex-1">
             <div className="relative w-[88px] h-[117px] rounded-xl border overflow-hidden flex-shrink-0">
-              <Image src={getImageSrc()} alt={item.product.name} fill className="object-contain" />
+              <Image
+                src={getImageSrc()}
+                alt={item.product.name}
+                fill
+                className="object-contain"
+              />
             </div>
             <div className="flex flex-col gap-2">
               <h3 className="font-semibold text-base">{item.product.name}</h3>
-              <p className="text-sm text-gray-600">{item.seller?.name || "Store"}</p>
+              <p className="text-sm text-gray-600">
+                {item.seller?.name || "Store"}
+              </p>
               {availableStock <= 5 && (
                 <p className="text-xs text-orange-600 font-medium">
                   {t("only_left", { count: availableStock })}
@@ -327,16 +359,25 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
           <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 justify-between">
             <div className="space-y-1">
               <p className="text-sm font-semibold">
-                {t("unit_price")} <span className="text-primary">{item.price_formatted}</span>
+                {t("unit_price")}{" "}
+                <span className="text-primary">{item.price_formatted}</span>
               </p>
-              
-              {item.discount_formatted && item.discount_formatted !== "0 TMT" && (
-                <p className="text-sm font-semibold">{t("discount")} {item.discount_formatted}</p>
-              )}
+
+              {item.discount_formatted &&
+                item.discount_formatted !== "0 TMT" && (
+                  <p className="text-sm font-semibold">
+                    {t("discount")} {item.discount_formatted}
+                  </p>
+                )}
               <div className="flex items-center gap-2">
-                <span className="text-sm font-semibold">{t("total_price")}</span>
+                <span className="text-sm font-semibold">
+                  {t("total_price")}
+                </span>
                 <span className="bg-green-500 text-white px-3 py-1 rounded-lg font-semibold text-base">
-                  {(parseFloat(item.product.price_amount || "0") * localQuantity).toFixed(2)} TMT
+                  {(
+                    parseFloat(item.product.price_amount || "0") * localQuantity
+                  ).toFixed(2)}{" "}
+                  TMT
                 </span>
               </div>
             </div>
@@ -346,28 +387,37 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
                 variant="outline"
                 size="icon"
                 onClick={handleQuantityDecrease}
-                className={` cursor-pointerrounded-xl bg-blue-50 ${isSyncing ? 'opacity-70' : ''}`}
+                className={` cursor-pointerrounded-xl bg-blue-50 ${
+                  isSyncing ? "opacity-70" : ""
+                }`}
               >
                 <Minus className="h-4 w-4" />
               </Button>
-              
+
               <div className="w-12 text-center font-semibold relative">
                 {localQuantity}
                 {isSyncing && (
                   <Loader2 className="h-3 w-3 animate-spin absolute -top-1 -right-3 text-blue-500" />
                 )}
                 {syncError && (
-                  <span className="absolute -top-1 -right-3 h-2 w-2 bg-red-500 rounded-full" title="Sync error" />
+                  <span
+                    className="absolute -top-1 -right-3 h-2 w-2 bg-red-500 rounded-full"
+                    title="Sync error"
+                  />
                 )}
               </div>
-              
+
               <Button
                 variant="outline"
                 size="icon"
                 onClick={handleQuantityIncrease}
-                disabled={localQuantity >= availableStock}
-                className={`rounded-xl cursor-pointer bg-blue-50 ${isSyncing ? 'opacity-70' : ''} ${
-                  localQuantity >= availableStock ? 'opacity-50 cursor-not-allowed' : ''
+                // disabled={localQuantity >= availableStock}
+                className={`rounded-xl cursor-pointer bg-blue-50 ${
+                  isSyncing ? "opacity-70" : ""
+                } ${
+                  localQuantity >= availableStock
+                    ? "opacity-50 cursor-not-allowed"
+                    : ""
                 }`}
               >
                 <Plus className="h-4 w-4 text-[#007AFF]" />
@@ -390,9 +440,9 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
               {t("stock_limit_title")}
             </DialogTitle>
             <DialogDescription className="text-center text-base pt-2">
-              {t("stock_limit_message", { 
+              {t("stock_limit_message", {
                 product: item.product.name,
-                stock: availableStock 
+                stock: availableStock,
               })}
             </DialogDescription>
           </DialogHeader>
@@ -407,5 +457,5 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
         </DialogContent>
       </Dialog>
     </>
-  )
-}
+  );
+}

features/cart/components/CartItemSkeleton.tsx

@@ -1,27 +1,27 @@
-import { Skeleton } from "@/components/ui/skeleton"
-import { Card } from "@/components/ui/card"
+// import { Skeleton } from "@/components/ui/skeleton"
+// import { Card } from "@/components/ui/card"
 
-export default function CartItemSkeleton() {
-  return (
-    <Card className="p-4 rounded-xl">
-      <div className="flex gap-4">
-        {/* Product Image */}
-        <Skeleton className="w-24 h-24 rounded-lg flex-shrink-0 bg-gray-200" />
+// export default function CartItemSkeleton() {
+//   return (
+//     <Card className="p-4 rounded-xl">
+//       <div className="flex gap-4">
+//         {/* Product Image */}
+//         <Skeleton className="w-24 h-24 rounded-lg flex-shrink-0 bg-gray-200" />
 
-        {/* Product Info */}
-        <div className="flex-1 space-y-2">
-          <Skeleton className="h-4 w-3/4 bg-gray-200" />
-          <Skeleton className="h-4 w-1/2 bg-gray-200" />
-          <Skeleton className="h-6 w-20 bg-gray-200 mt-2" />
-        </div>
+//         {/* Product Info */}
+//         <div className="flex-1 space-y-2">
+//           <Skeleton className="h-4 w-3/4 bg-gray-200" />
+//           <Skeleton className="h-4 w-1/2 bg-gray-200" />
+//           <Skeleton className="h-6 w-20 bg-gray-200 mt-2" />
+//         </div>
 
-        {/* Quantity Controls */}
-        <div className="flex items-center gap-2">
-          <Skeleton className="w-8 h-8 rounded-lg bg-gray-200" />
-          <Skeleton className="w-8 h-8 bg-gray-200" />
-          <Skeleton className="w-8 h-8 rounded-lg bg-gray-200" />
-        </div>
-      </div>
-    </Card>
-  )
-}
+//         {/* Quantity Controls */}
+//         <div className="flex items-center gap-2">
+//           <Skeleton className="w-8 h-8 rounded-lg bg-gray-200" />
+//           <Skeleton className="w-8 h-8 bg-gray-200" />
+//           <Skeleton className="w-8 h-8 rounded-lg bg-gray-200" />
+//         </div>
+//       </div>
+//     </Card>
+//   )
+// }

features/cart/components/OrderSummary.tsx

@@ -91,9 +91,9 @@ export default function OrderSummary({
     selectedRegion && selectedProvince && paymentType && phone && name;
 
   return (
-    <Card className="w-full md:w-[380px] p-6 rounded-xl h-fit sticky top-20">
+    <Card className="w-full md:w-[380px] p-4 md:p-6 rounded-xl h-fit sticky top-20">
       {/* Customer Information */}
-      <div className="mb-6">
+      <div className="">
         <h3 className="text-lg font-semibold mb-3">
           {t("customer_information")}
         </h3>
@@ -107,7 +107,7 @@ export default function OrderSummary({
               value={name}
               onChange={(e) => onNameChange(e.target.value)}
               placeholder={t("name")}
-              className="rounded-xl"
+              className="rounded-lg"
             />
           </div>
           <div>
@@ -119,7 +119,7 @@ export default function OrderSummary({
               value={lastName}
               onChange={(e) => onLastNameChange(e.target.value)}
               placeholder={t("last_name")}
-              className="rounded-xl"
+              className="rounded-lg"
             />
           </div>
           <div>
@@ -131,14 +131,14 @@ export default function OrderSummary({
               value={phone}
               onChange={(e) => onPhoneChange(e.target.value)}
               placeholder={t("phone")}
-              className="rounded-xl"
+              className="rounded-lg"
             />
           </div>
         </div>
       </div>
 
       {/* Payment Type */}
-      <div className="mb-6">
+      <div className="">
         <h3 className="text-lg font-semibold mb-3">{t("payment_type")}</h3>
         <div className="flex gap-2">
           {paymentTypes.map((type) => (
@@ -166,13 +166,13 @@ export default function OrderSummary({
       </div>
 
       {/* Delivery Type */}
-      <DeliveryTypeSelector
+      {/* <DeliveryTypeSelector
         selectedType={deliveryType}
         onSelect={onDeliveryTypeChange}
-      />
+      /> */}
 
       {/* Region Selection */}
-      <div className="mb-6">
+      <div className="">
         <Label className="text-lg font-semibold mb-3 block">
           {t("choose_region")}
         </Label>
@@ -204,7 +204,7 @@ export default function OrderSummary({
 
       {/* Province Selection */}
       {selectedRegion && provincesForSelectedRegion.length > 0 && (
-        <div className="mb-6">
+        <div className="">
           <Label className="text-lg font-semibold mb-3 block">
             {t("choose_address")}
           </Label>
@@ -212,7 +212,7 @@ export default function OrderSummary({
             value={selectedProvince?.toString() || ""}
             onValueChange={(value) => onProvinceChange(parseInt(value))}
           >
-            <SelectTrigger className="rounded-xl">
+            <SelectTrigger className="rounded-lg w-full">
               <SelectValue placeholder={t("choose_address")} />
             </SelectTrigger>
             <SelectContent>
@@ -227,7 +227,7 @@ export default function OrderSummary({
       )}
 
       {/* Note */}
-      <div className="mb-6">
+      <div className="">
         <Label className="text-lg font-semibold mb-3 block">{t("note")}</Label>
         <Textarea
           value={note}
@@ -253,7 +253,7 @@ export default function OrderSummary({
 
       <Separator className="my-4" />
 
-      <div className="flex justify-between items-center mb-6">
+      <div className="flex justify-between items-center ">
         <span className="text-lg font-semibold">
           {order.billing.footer.title}:
         </span>

features/cart/hooks/useCart.ts

@@ -14,16 +14,30 @@ interface CartResponse {
   errorDetails?: string;
 }
 
-// Event emitter for cross-component cart updates
+// DEBUG: Enable detailed logging
+const DEBUG = true;
+const log = (...args: any[]) => {
+  if (DEBUG) console.log('[useCart]', ...args);
+};
+
+// CRITICAL: Single source of truth for pending updates
+const pendingUpdates = new Map<number, number>(); // productId -> quantity
+let updateLock = false;
+
 class CartEventEmitter {
   private listeners: Set<() => void> = new Set();
 
   subscribe(callback: () => void) {
+    log('🔔 New subscriber added. Total:', this.listeners.size + 1);
     this.listeners.add(callback);
-    return () => this.listeners.delete(callback);
+    return () => {
+      log('🔕 Subscriber removed. Total:', this.listeners.size - 1);
+      this.listeners.delete(callback);
+    };
   }
 
   emit() {
+    log('📢 Emitting cart event to', this.listeners.size, 'listeners');
     this.listeners.forEach((cb) => cb());
   }
 }
@@ -36,31 +50,22 @@ function transformCartResponse(response: any): CartResponse {
     (response.trim().startsWith("<!DOCTYPE") ||
       response.trim().startsWith("<html"))
   ) {
-    console.error(
-      "Received HTML response instead of JSON:",
-      response.substring(0, 100)
-    );
     return {
       message: "error",
       data: [],
-      errorDetails:
-        "Server returned HTML instead of JSON. The server might be down or experiencing issues.",
+      errorDetails: "Server returned HTML instead of JSON.",
     };
   }
 
   if (typeof response === "object") {
-    if (response.data) {
-      return response;
-    }
+    if (response.data) return response;
     return { message: "success", data: [] };
   }
 
   if (typeof response === "string") {
     try {
-      const parsed = JSON.parse(response);
-      return parsed;
-    } catch (error) {
-      console.error("Failed to parse response:", error);
+      return JSON.parse(response);
+    } catch {
       return { message: "error", data: [] };
     }
   }
@@ -71,34 +76,54 @@ function transformCartResponse(response: any): CartResponse {
 export function useCart(options?: Partial<UseQueryOptions<CartResponse>>) {
   const queryClient = useQueryClient();
 
+  log('🎣 useCart hook called with options:', options);
+
   const query = useQuery({
     queryKey: ["cart"],
     queryFn: async () => {
+      log('🌐 Fetching cart from API...');
       const response = await apiClient.get("/carts");
-      return transformCartResponse(response.data);
+      const transformed = transformCartResponse(response.data);
+      log('✅ Cart fetched:', {
+        itemCount: transformed.data.length,
+        items: transformed.data.map(item => ({
+          productId: item.product?.id,
+          quantity: item.product_quantity
+        }))
+      });
+      return transformed;
     },
-    // REMOVED: Aggressive polling
-    // ADDED: Smart refetching only when needed
-    refetchOnMount: false, // Don't refetch on every mount
-    refetchOnWindowFocus: false, // Don't refetch on tab focus
-    refetchOnReconnect: true, // Only refetch on reconnect
-    staleTime: Infinity, // Data never goes stale automatically
-    gcTime: 1000 * 60 * 5, // Cache for 5 minutes
+    // CRITICAL FIX: Merge options AFTER defaults
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: true,
+    staleTime: Infinity,
+    gcTime: 1000 * 60 * 5,
     retry: 2,
     retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
+    // User options OVERRIDE defaults
     ...options,
   });
 
-  // Subscribe to cart events for cross-component updates
+  log('🔧 Query config after merge:', {
+    refetchOnMount: query.refetch !== undefined,
+    staleTime: query.isStale,
+    dataUpdatedAt: query.dataUpdatedAt
+  });
+
   useEffect(() => {
+    log('🔗 Setting up cart events listener in useCart');
     const unsubscribe = cartEvents.subscribe(() => {
-      // Only update cache, don't refetch
+      log('📥 Cart event received in useCart, invalidating query');
       queryClient.invalidateQueries({
         queryKey: ["cart"],
         refetchType: "none",
       });
     });
-    return unsubscribe;
+    return () => {
+      log('🔌 Cleaning up cart events listener in useCart');
+      unsubscribe();
+    };
   }, [queryClient]);
 
   return query;
@@ -115,6 +140,7 @@ export function useAddToCart() {
       productId: number;
       quantity?: number;
     }) => {
+      log('➕ AddToCart mutation:', { productId, quantity });
       const params = new URLSearchParams({
         product_id: String(productId),
         product_quantity: String(quantity),
@@ -132,10 +158,8 @@ export function useAddToCart() {
 
       if (typeof response.data === "string") {
         try {
-          const parsed = JSON.parse(response.data);
-          return parsed;
-        } catch (error) {
-          console.error("Failed to parse add to cart response:", error);
+          return JSON.parse(response.data);
+        } catch {
           return { message: "success", data: "Added to cart" };
         }
       }
@@ -143,66 +167,89 @@ export function useAddToCart() {
       return { message: "success", data: "Added to cart" };
     },
     onMutate: async ({ productId, quantity }) => {
-      // Cancel outgoing refetches
+      log('🔒 AddToCart onMutate - Waiting for lock...');
+      while (updateLock) {
+        await new Promise(resolve => setTimeout(resolve, 50));
+      }
+      updateLock = true;
+      log('🔓 Lock acquired');
+
       await queryClient.cancelQueries({ queryKey: ["cart"] });
 
-      // Snapshot previous value
       const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
+      log('📸 Previous cart state:', previousCart?.data.length, 'items');
 
-      // Optimistically update cart
       queryClient.setQueryData<CartResponse>(["cart"], (old) => {
         if (!old) return old;
 
-        const existingItem = old.data.find(
+        let updated = { ...old, data: [...old.data] };
+
+        pendingUpdates.forEach((pendingQty, pendingId) => {
+          const idx = updated.data.findIndex(
+            (item: any) => item.product?.id === pendingId
+          );
+          if (idx !== -1) {
+            updated.data[idx] = {
+              ...updated.data[idx],
+              product_quantity: pendingQty,
+            };
+          }
+        });
+
+        const existingItem = updated.data.find(
           (item: any) => item.product?.id === productId
         );
 
         if (existingItem) {
-          // Update existing item quantity
-          return {
-            ...old,
-            data: old.data.map((item: any) =>
-              item.product?.id === productId
-                ? {
-                    ...item,
-                    product_quantity: item.product_quantity + quantity,
-                  }
-                : item
-            ),
-          };
+          updated.data = updated.data.map((item: any) =>
+            item.product?.id === productId
+              ? {
+                  ...item,
+                  product_quantity: item.product_quantity + quantity,
+                }
+              : item
+          );
         } else {
-          // Add new item (we don't have full product data, so we add placeholder)
-          return {
-            ...old,
-            data: [
-              ...old.data,
-              {
-                product: { id: productId },
-                product_quantity: quantity,
-              } as any,
-            ],
-          };
+          updated.data = [
+            ...updated.data,
+            {
+              product: { id: productId },
+              product_quantity: quantity,
+            } as any,
+          ];
         }
+
+        const finalItem = updated.data.find(
+          (item: any) => item.product?.id === productId
+        );
+        if (finalItem) {
+          pendingUpdates.set(productId, finalItem.product_quantity);
+          log('💾 Pending update saved:', productId, '→', finalItem.product_quantity);
+        }
+
+        log('🔄 Cart updated optimistically:', updated.data.length, 'items');
+        return updated;
       });
 
-      // Notify other components
       cartEvents.emit();
+      updateLock = false;
 
       return { previousCart };
     },
     onError: (error, variables, context) => {
-      // Rollback on error
+      log('❌ AddToCart error:', error);
       if (context?.previousCart) {
         queryClient.setQueryData(["cart"], context.previousCart);
+        pendingUpdates.delete(variables.productId);
         cartEvents.emit();
       }
-      console.error("Add to cart error:", error);
     },
-    onSuccess: () => {
-      // Silently refetch in background to sync with server
+    onSuccess: (data, variables) => {
+      log('✅ AddToCart success');
+      pendingUpdates.delete(variables.productId);
       queryClient.invalidateQueries({
         queryKey: ["cart"],
-        refetchType: "active", // Only refetch if actively being watched
+        refetchType: "active",
       });
     },
   });
@@ -213,6 +260,7 @@ export function useRemoveFromCart() {
 
   return useMutation({
     mutationFn: async (productId: number) => {
+      log('🗑️ RemoveFromCart mutation:', productId);
       const params = new URLSearchParams({ product_id: String(productId) });
 
       const response = await apiClient.patch("/carts", params.toString(), {
@@ -229,8 +277,7 @@ export function useRemoveFromCart() {
         try {
           const parsed = JSON.parse(response.data);
           return parsed.data || [];
-        } catch (error) {
-          console.error("Failed to parse cart response:", error);
+        } catch {
           return [];
         }
       }
@@ -238,30 +285,56 @@ export function useRemoveFromCart() {
       return [];
     },
     onMutate: async (productId) => {
+      while (updateLock) {
+        await new Promise(resolve => setTimeout(resolve, 50));
+      }
+      updateLock = true;
+
       await queryClient.cancelQueries({ queryKey: ["cart"] });
 
       const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
 
       queryClient.setQueryData<CartResponse>(["cart"], (old) => {
         if (!old) return old;
-        return {
-          ...old,
-          data: old.data.filter((item: any) => item.product?.id !== productId),
-        };
+
+        let updated = { ...old, data: [...old.data] };
+        pendingUpdates.forEach((pendingQty, pendingId) => {
+          if (pendingId !== productId) {
+            const idx = updated.data.findIndex(
+              (item: any) => item.product?.id === pendingId
+            );
+            if (idx !== -1) {
+              updated.data[idx] = {
+                ...updated.data[idx],
+                product_quantity: pendingQty,
+              };
+            }
+          }
+        });
+
+        updated.data = updated.data.filter(
+          (item: any) => item.product?.id !== productId
+        );
+
+        pendingUpdates.delete(productId);
+        log('🗑️ Item removed optimistically:', productId);
+        return updated;
       });
 
       cartEvents.emit();
+      updateLock = false;
 
       return { previousCart };
     },
     onError: (error, variables, context) => {
+      log('❌ RemoveFromCart error:', error);
       if (context?.previousCart) {
         queryClient.setQueryData(["cart"], context.previousCart);
         cartEvents.emit();
       }
-      console.error("Remove from cart error:", error);
     },
     onSuccess: () => {
+      log('✅ RemoveFromCart success');
       queryClient.invalidateQueries({
         queryKey: ["cart"],
         refetchType: "active",
@@ -275,6 +348,7 @@ export function useCleanCart() {
 
   return useMutation({
     mutationFn: async () => {
+      log('🧹 CleanCart mutation');
       const response = await apiClient.delete("/carts", {
         headers: {
           "Content-Type": "application/x-www-form-urlencoded",
@@ -289,8 +363,7 @@ export function useCleanCart() {
         try {
           const parsed = JSON.parse(response.data);
           return parsed.data || [];
-        } catch (error) {
-          console.error("Failed to parse cart response:", error);
+        } catch {
           return [];
         }
       }
@@ -298,16 +371,23 @@ export function useCleanCart() {
       return [];
     },
     onMutate: async () => {
+      while (updateLock) {
+        await new Promise(resolve => setTimeout(resolve, 50));
+      }
+      updateLock = true;
+
       await queryClient.cancelQueries({ queryKey: ["cart"] });
 
       const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
 
       queryClient.setQueryData<CartResponse>(["cart"], (old) => {
         if (!old) return old;
+        pendingUpdates.clear();
         return { ...old, data: [] };
       });
 
       cartEvents.emit();
+      updateLock = false;
 
       return { previousCart };
     },
@@ -334,6 +414,7 @@ export function useUpdateCartItemQuantity() {
       productId: number;
       quantity: number;
     }) => {
+      log('🔄 UpdateQuantity mutation:', { productId, quantity });
       const params = new URLSearchParams({
         product_id: String(productId),
         product_quantity: String(quantity),
@@ -352,10 +433,8 @@ export function useUpdateCartItemQuantity() {
 
       if (typeof response.data === "string") {
         try {
-          const parsed = JSON.parse(response.data);
-          return parsed;
-        } catch (error) {
-          console.error("Failed to parse update cart response:", error);
+          return JSON.parse(response.data);
+        } catch {
           return { message: "success", data: "Updated cart" };
         }
       }
@@ -363,39 +442,68 @@ export function useUpdateCartItemQuantity() {
       return { message: "success", data: "Updated cart" };
     },
     onMutate: async ({ productId, quantity }) => {
+      log('🔒 UpdateQuantity onMutate - Waiting for lock...');
+      while (updateLock) {
+        await new Promise(resolve => setTimeout(resolve, 50));
+      }
+      updateLock = true;
+      log('🔓 Lock acquired');
+
       await queryClient.cancelQueries({ queryKey: ["cart"] });
 
       const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
+      log('📸 Previous cart state:', previousCart?.data.length, 'items');
 
       queryClient.setQueryData<CartResponse>(["cart"], (old) => {
         if (!old) return old;
-        return {
-          ...old,
-          data: old.data.map((item: any) =>
-            item.product?.id === productId
-              ? { ...item, product_quantity: quantity }
-              : item
-          ),
-        };
+
+        let updated = { ...old, data: [...old.data] };
+
+        pendingUpdates.forEach((pendingQty, pendingId) => {
+          const idx = updated.data.findIndex(
+            (item: any) => item.product?.id === pendingId
+          );
+          if (idx !== -1) {
+            updated.data[idx] = {
+              ...updated.data[idx],
+              product_quantity: pendingQty,
+            };
+          }
+        });
+
+        updated.data = updated.data.map((item: any) =>
+          item.product?.id === productId
+            ? { ...item, product_quantity: quantity }
+            : item
+        );
+
+        pendingUpdates.set(productId, quantity);
+        log('💾 Pending update saved:', productId, '→', quantity);
+
+        log('🔄 Cart updated optimistically:', updated.data.length, 'items');
+        return updated;
       });
 
       cartEvents.emit();
+      updateLock = false;
 
       return { previousCart };
     },
     onError: (error, variables, context) => {
+      log('❌ UpdateQuantity error:', error);
       if (context?.previousCart) {
         queryClient.setQueryData(["cart"], context.previousCart);
+        pendingUpdates.delete(variables.productId);
         cartEvents.emit();
       }
-      console.error("API update failed:", error);
       throw error;
     },
-    onSuccess: () => {
-      // Background sync
+    onSuccess: (data, variables) => {
+      log('✅ UpdateQuantity success');
+      pendingUpdates.delete(variables.productId);
       queryClient.invalidateQueries({
         queryKey: ["cart"],
-        refetchType: "none", // Don't refetch, trust optimistic update
+        refetchType: "none",
       });
     },
   });
@@ -420,7 +528,7 @@ export function useCreateOrder() {
       return response.data;
     },
     onSuccess: () => {
-      // Clear cart after successful order
+      pendingUpdates.clear();
       queryClient.setQueryData<CartResponse>(["cart"], (old) => {
         if (!old) return old;
         return { ...old, data: [] };
@@ -437,7 +545,6 @@ export function useCreateOrder() {
   });
 }
 
-// Hook to get cart count for badges
 export function useCartCount() {
   const { data } = useCart();
   return (
@@ -446,4 +553,4 @@ export function useCartCount() {
       0
     ) || 0
   );
-}
+}

features/home/components/ProductCard.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback, MouseEvent } from "react";
 import { useRouter } from "next/navigation";
-import { Heart, ShoppingCart, Loader2, Plus, Minus } from "lucide-react";
+import { Heart, ShoppingCart, Loader2, Plus, Minus, AlertTriangle } from "lucide-react";
 import { toast } from "sonner";
 import {
   Carousel,
@@ -15,6 +15,13 @@ import {
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { useToggleFavorite, useIsFavorite } from "@/lib/hooks";
 import {
   useAddToCart,
@@ -65,6 +72,7 @@ export default function ProductCard({
   const [current, setCurrent] = useState(0);
   const [localQuantity, setLocalQuantity] = useState(1);
   const [isSyncing, setIsSyncing] = useState(false);
+  const [showStockModal, setShowStockModal] = useState(false);
 
   const autoplayRef = useRef<NodeJS.Timeout | null>(null);
   const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
@@ -77,7 +85,6 @@ export default function ProductCard({
   const isOutOfStock = stock === 0;
   const availableStock = stock || 999;
 
-  // Carousel setup
   useEffect(() => {
     if (!api) return;
     setCurrent(api.selectedScrollSnap());
@@ -88,7 +95,6 @@ export default function ProductCard({
     };
   }, [api]);
 
-  // Autoplay
   useEffect(() => {
     if (!api || !hasMultipleImages) return;
 
@@ -101,12 +107,10 @@ export default function ProductCard({
     };
   }, [api, hasMultipleImages]);
 
-  // Sync local quantity with cart
   useEffect(() => {
     setLocalQuantity(cartItem?.product_quantity || 1);
   }, [cartItem]);
 
-  // Server sync function
   const syncToServer = useCallback(
     async (quantity: number) => {
       if (isRequestInFlightRef.current) {
@@ -140,7 +144,6 @@ export default function ProductCard({
     [id, updateCartMutation, cartItem, refetchCart]
   );
 
-  // Debounced sync
   useEffect(() => {
     if (!isInCart || localQuantity === (cartItem?.product_quantity || 1))
       return;
@@ -180,13 +183,8 @@ export default function ProductCard({
       e.preventDefault();
       e.stopPropagation();
 
-      // Stock kontrolü
       if (localQuantity > availableStock) {
-        toast.error("Insufficient Stock", {
-          description: `Only ${availableStock} items available in stock`,
-          duration: 4000,
-        });
-        setLocalQuantity(availableStock);
+        setShowStockModal(true);
         return;
       }
 
@@ -221,10 +219,7 @@ export default function ProductCard({
       if (newQuantity < 1) return;
 
       if (newQuantity > availableStock) {
-        toast.error("Stock Limit Reached", {
-          description: `Maximum ${availableStock} items available`,
-          duration: 4000,
-        });
+        setShowStockModal(true);
         return;
       }
 
@@ -233,16 +228,24 @@ export default function ProductCard({
     [localQuantity, availableStock]
   );
 
-  const handleCardClick = (e: MouseEvent<HTMLDivElement>) => {
+  const handleCardClick = useCallback((e: MouseEvent<HTMLDivElement>) => {
     const target = e.target as HTMLElement;
+    
+    // Prevent navigation if clicking on buttons or interactive elements
     if (
       target.closest("button") ||
-      target.closest('[data-carousel-control="true"]')
+      target.closest('[data-carousel-control="true"]') ||
+      target.closest('[role="dialog"]')
     ) {
+      e.preventDefault();
+      e.stopPropagation();
       return;
     }
+    
+    // Programmatic navigation
+    e.preventDefault();
     router.push(`/product/${id}`);
-  };
+  }, [router, id]);
 
   const handleNavClick = (e: MouseEvent, action: () => void) => {
     e.preventDefault();
@@ -251,169 +254,203 @@ export default function ProductCard({
   };
 
   return (
-    <div
-      onClick={handleCardClick}
-      className="flex justify-center cursor-pointer"
-    >
-      <Card
-        className="relative gap-2 border-none shadow-none p-0 w-full overflow-hidden rounded-2xl"
-        style={{ height, maxWidth: width }}
+    <>
+      <div
+        onClick={handleCardClick}
+        className="flex justify-center cursor-pointer"
       >
-        <div className="relative w-full h-[260px] group">
-          <Carousel
-            opts={{ align: "start", loop: true, watchDrag: false }}
-            setApi={setApi}
-            className="w-full h-full"
-          >
-            <CarouselContent className="h-[260px] ml-0">
-              {images.map((image, idx) => (
-                <CarouselItem key={idx} className="h-[260px] pl-0">
-                  <div className="h-full flex items-center justify-center">
-                    <img
-                      src={image}
-                      alt={`${name} - ${idx + 1}`}
-                      className="max-w-full max-h-full object-contain"
-                      draggable="false"
-                    />
-                  </div>
-                </CarouselItem>
-              ))}
-            </CarouselContent>
+        <Card
+          className="relative gap-2 border-none shadow-none p-0 w-full overflow-hidden rounded-2xl"
+          style={{ height, maxWidth: width }}
+        >
+          <div className="relative w-full h-[260px] group">
+            <Carousel
+              opts={{ align: "start", loop: true, watchDrag: false }}
+              setApi={setApi}
+              className="w-full h-full"
+            >
+              <CarouselContent className="h-[260px] ml-0">
+                {images.map((image, idx) => (
+                  <CarouselItem key={idx} className="h-[260px] pl-0">
+                    <div className="h-full flex items-center justify-center">
+                      <img
+                        src={image}
+                        alt={`${name} - ${idx + 1}`}
+                        className="max-w-full max-h-full object-contain"
+                        draggable="false"
+                      />
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
 
-            {hasMultipleImages && (
-              <>
-                <CarouselPrevious
-                  data-carousel-control="true"
-                  className="absolute left-2 opacity-0 group-hover:opacity-100 transition-opacity z-20"
-                  onClick={(e) => handleNavClick(e, () => api?.scrollPrev())}
-                />
-                <CarouselNext
-                  data-carousel-control="true"
-                  className="absolute right-2 opacity-0 group-hover:opacity-100 transition-opacity z-20"
-                  onClick={(e) => handleNavClick(e, () => api?.scrollNext())}
-                />
-              </>
-            )}
-          </Carousel>
+              {hasMultipleImages && (
+                <>
+                  <CarouselPrevious
+                    data-carousel-control="true"
+                    className="absolute left-2 opacity-0 group-hover:opacity-100 transition-opacity z-20"
+                    onClick={(e) => handleNavClick(e, () => api?.scrollPrev())}
+                  />
+                  <CarouselNext
+                    data-carousel-control="true"
+                    className="absolute right-2 opacity-0 group-hover:opacity-100 transition-opacity z-20"
+                    onClick={(e) => handleNavClick(e, () => api?.scrollNext())}
+                  />
+                </>
+              )}
+            </Carousel>
 
-          <button
-            onClick={handleFavorite}
-            disabled={isFavoriteToggling || isFavoriteLoading}
-            className="absolute top-3 right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all disabled:opacity-50"
-          >
-            {isFavoriteLoading ? (
-              <div className="w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin" />
-            ) : (
-              <Heart
-                className={`w-5 h-5 ${
-                  isFavorite ? "text-[#005bff] fill-[#005bff]" : "text-gray-700"
-                }`}
-              />
-            )}
-          </button>
-
-          {hasMultipleImages && (
-            <div className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
-              {images.map((_, idx) => (
-                <button
-                  key={idx}
-                  data-carousel-control="true"
-                  onClick={(e) => handleNavClick(e, () => api?.scrollTo(idx))}
-                  className={`h-1.5 rounded-full transition-all ${
-                    idx === current ? "w-6 bg-white" : "w-1.5 bg-white/60"
+            <button
+              onClick={handleFavorite}
+              disabled={isFavoriteToggling || isFavoriteLoading}
+              className="absolute top-3 right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all disabled:opacity-50"
+            >
+              {isFavoriteLoading ? (
+                <div className="w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin" />
+              ) : (
+                <Heart
+                  className={`w-5 h-5 ${
+                    isFavorite ? "text-[#005bff] fill-[#005bff]" : "text-gray-700"
                   }`}
                 />
-              ))}
-            </div>
-          )}
+              )}
+            </button>
 
-          {labels.length > 0 && (
-            <div className="absolute top-2 left-2 flex flex-col gap-1 z-10">
-              {labels.map((label, idx) => (
-                <Badge
-                  key={idx}
-                  className="text-white text-[10px] font-bold uppercase rounded-r-md"
-                  style={{ backgroundColor: label.bg_color }}
-                >
-                  {label.text}
+            {hasMultipleImages && (
+              <div className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
+                {images.map((_, idx) => (
+                  <button
+                    key={idx}
+                    data-carousel-control="true"
+                    onClick={(e) => handleNavClick(e, () => api?.scrollTo(idx))}
+                    className={`h-1.5 rounded-full transition-all ${
+                      idx === current ? "w-6 bg-white" : "w-1.5 bg-white/60"
+                    }`}
+                  />
+                ))}
+              </div>
+            )}
+
+            {labels.length > 0 && (
+              <div className="absolute top-2 left-2 flex flex-col gap-1 z-10">
+                {labels.map((label, idx) => (
+                  <Badge
+                    key={idx}
+                    className="text-white text-[10px] font-bold uppercase rounded-r-md"
+                    style={{ backgroundColor: label.bg_color }}
+                  >
+                    {label.text}
+                  </Badge>
+                ))}
+              </div>
+            )}
+
+            {isOutOfStock && (
+              <div className="absolute inset-0 bg-black/50 flex items-center justify-center z-10">
+                <Badge variant="secondary" className="text-sm font-bold">
+                  Out of Stock
                 </Badge>
-              ))}
-            </div>
-          )}
-
-          {isOutOfStock && (
-            <div className="absolute inset-0 bg-black/50 flex items-center justify-center z-10">
-              <Badge variant="secondary" className="text-sm font-bold">
-                Out of Stock
-              </Badge>
-            </div>
-          )}
-        </div>
-
-        <CardContent className="p-0 space-y-1">
-          <p
-            className="text-sm mx-2 font-medium"
-            style={{ color: price_color }}
-          >
-            {struct_price_text}
-          </p>
-          <p className="text-black text-sm font-semibold leading-normal truncate mx-2">
-            {name}
-          </p>
-        </CardContent>
-
-        {button && !isOutOfStock && (
-          <div className="px-1">
-            {!isInCart ? (
-              <Button
-                onClick={handleAddToCart}
-                disabled={isSyncing}
-                className="w-full rounded-lg gap-2 bg-[#005bff] hover:bg-[#0041c4]"
-                size="sm"
-              >
-                {isSyncing ? (
-                  <>
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                    Adding...
-                  </>
-                ) : (
-                  <>
-                    <ShoppingCart className="h-4 w-4" />
-                    {t("checkout")}
-                  </>
-                )}
-              </Button>
-            ) : (
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={(e) => handleQuantityChange(e, -1)}
-                  disabled={isSyncing || localQuantity <= 1}
-                  className="rounded-lg h-9 w-9 shrink-0"
-                >
-                  <Minus className="h-4 w-4" />
-                </Button>
-                <div className="flex-1 text-center font-semibold text-sm border rounded-lg h-9 flex items-center justify-center bg-white relative">
-                  {localQuantity}
-                  {isSyncing && (
-                    <Loader2 className="h-3 w-3 animate-spin absolute -top-1 -right-1 text-blue-500" />
-                  )}
-                </div>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={(e) => handleQuantityChange(e, 1)}
-                  disabled={localQuantity >= availableStock || isSyncing}
-                  className="rounded-lg h-9 w-9 shrink-0"
-                >
-                  <Plus className="h-4 w-4 text-[#005bff]" />
-                </Button>
               </div>
             )}
           </div>
-        )}
-      </Card>
-    </div>
+
+          <CardContent className="p-0 space-y-1">
+            <p
+              className="text-sm mx-2 font-medium"
+              style={{ color: price_color }}
+            >
+              {struct_price_text}
+            </p>
+            <p className="text-black text-sm font-semibold leading-normal truncate mx-2">
+              {name}
+            </p>
+          </CardContent>
+
+          {button && !isOutOfStock && (
+            <div className="px-1">
+              {!isInCart ? (
+                <Button
+                  onClick={handleAddToCart}
+                  disabled={isSyncing}
+                  className="w-full rounded-lg gap-2 bg-[#005bff] hover:bg-[#0041c4]"
+                  size="sm"
+                >
+                  {isSyncing ? (
+                    <>
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      Adding...
+                    </>
+                  ) : (
+                    <>
+                      <ShoppingCart className="h-4 w-4" />
+                      {t("checkout")}
+                    </>
+                  )}
+                </Button>
+              ) : (
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={(e) => handleQuantityChange(e, -1)}
+                    disabled={isSyncing || localQuantity <= 1}
+                    className="rounded-lg h-9 w-9 shrink-0"
+                  >
+                    <Minus className="h-4 w-4" />
+                  </Button>
+                  <div className="flex-1 text-center font-semibold text-sm border rounded-lg h-9 flex items-center justify-center bg-white relative">
+                    {localQuantity}
+                    {isSyncing && (
+                      <Loader2 className="h-3 w-3 animate-spin absolute -top-1 -right-1 text-blue-500" />
+                    )}
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={(e) => handleQuantityChange(e, 1)}
+                    disabled={isSyncing}
+                    className="rounded-lg h-9 w-9 shrink-0"
+                  >
+                    <Plus className="h-4 w-4 text-[#005bff]" />
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+        </Card>
+      </div>
+
+      <Dialog open={showStockModal} onOpenChange={setShowStockModal}>
+        <DialogContent className="sm:max-w-md" onClick={(e) => e.stopPropagation()}>
+          <DialogHeader>
+            <div className="flex items-center justify-center mb-4">
+              <div className="rounded-full bg-orange-100 p-3">
+                <AlertTriangle className="h-6 w-6 text-orange-600" />
+              </div>
+            </div>
+            <DialogTitle className="text-center text-xl">
+              {t("stock_limit_title")}
+            </DialogTitle>
+            <DialogDescription className="text-center text-base pt-2">
+              {t("stock_limit_message", {
+                product: name,
+                stock: availableStock,
+              })}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-center mt-4">
+            <Button
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowStockModal(false);
+              }}
+              className="w-full rounded-lg"
+            >
+              {t("understood")}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
   );
-}
+}

features/home/components/ProductGrid.tsx

@@ -2,7 +2,7 @@
 import { useRouter } from "next/navigation";
 import { ChevronRight } from "lucide-react";
 import ProductCard from "@/features/home/components/ProductCard";
-import { useCollectionProducts } from "@/lib/hooks";
+import { useCollectionProducts } from "@/features/collections/hooks/useCollections";
 import type { Collection } from "@/lib/types/api";
 
 type Props = {

features/orders/components/OrderPage.tsx

@@ -24,7 +24,7 @@ import {
   CreditCard,
   ShoppingBag,
 } from "lucide-react";
-import { useToast } from "@/hooks/use-toast";
+import { toast } from "sonner";
 import { useOrders, useCancelOrder } from "@/lib/hooks";
 import { useTranslations } from "next-intl";
 import type { Order } from "@/lib/types/api";
@@ -37,7 +37,7 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
   const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false);
   const [orderToCancel, setOrderToCancel] = useState<Order | null>(null);
   const [expandedOrders, setExpandedOrders] = useState<Set<number>>(new Set());
-  const { toast } = useToast();
+
   const t = useTranslations();
 
   const { data: orders, isLoading, isError } = useOrders();
@@ -66,19 +66,12 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
 
     cancelOrder(orderToCancel.id, {
       onSuccess: () => {
-        toast({
-          title: t("order_cancelled"),
-          description: t("order_cancelled_description"),
-        });
+        toast.success(t("order_cancelled"));
         setIsCancelDialogOpen(false);
         setOrderToCancel(null);
       },
       onError: (error: any) => {
-        toast({
-          title: t("error"),
-          description: error.message || t("cancel_order_failed"),
-          variant: "destructive",
-        });
+        toast.error(error.message || t("cancel_order_failed"));
       },
     });
   }, [orderToCancel, cancelOrder, toast, t]);
@@ -168,7 +161,7 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
 
   if (isLoading) {
     return (
-      <div className="container mx-auto p-4 min-h-screen">
+      <div className=" mx-auto p-4 min-h-screen">
         <h1 className="text-3xl font-bold mb-6">{t("my_orders")}</h1>
         <div className="space-y-4">
           {Array.from({ length: 4 }).map((_, i) => (
@@ -186,7 +179,7 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
   }
 
   return (
-    <div className="container mx-auto p-2 lg:p-6 md:p-4 mb-16 min-h-screen">
+    <div className=" mx-auto p-2 lg:p-6 md:p-4 mb-16 min-h-screen">
       <h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6">{t("my_orders")}</h1>
 
       <Tabs defaultValue="active" className="w-full">
@@ -331,7 +324,7 @@ function CompactOrderCard({
           </div>
 
           <div className="flex items-center gap-4">
-            <div className="flex flex-col md:flex-row gap-2 ">
+            <div className="flex flex-col md:flex-row gap-2 items-end">
               
             {getStatusBadge(order.status)}
             <div className="text-right">
@@ -354,7 +347,7 @@ function CompactOrderCard({
         <div className="border-t bg-white">
           {/* Order Info Grid */}
           <div className="p-4 grid grid-cols-1 md:grid-cols-2 gap-4 bg-gray-50">
-            <div className="flex items-start gap-3">
+            {/* <div className="flex items-start gap-3">
               <Calendar className="h-5 w-5 text-blue-500 mt-0.5" />
               <div>
                 <p className="text-sm font-medium text-gray-700">
@@ -365,7 +358,7 @@ function CompactOrderCard({
                   {order.delivery_time}
                 </p>
               </div>
-            </div>
+            </div> */}
 
             <div className="flex items-start gap-3">
               <MapPin className="h-5 w-5 text-red-500 mt-0.5" />

features/orders/hooks/useOrders.ts

@@ -34,33 +34,33 @@ export function useOrder(id: number | string) {
   });
 }
 
-export function useCreateOrder() {
-  const queryClient = useQueryClient();
+// export function useCreateOrder() {
+//   const queryClient = useQueryClient();
 
-  return useMutation({
-    mutationFn: async (orderData: CreateOrderRequest) => {
-      const formData = new URLSearchParams();
+//   return useMutation({
+//     mutationFn: async (orderData: CreateOrderRequest) => {
+//       const formData = new URLSearchParams();
 
-      Object.entries(orderData).forEach(([key, value]) => {
-        if (value !== null && value !== undefined) {
-          formData.append(key, String(value));
-        }
-      });
+//       Object.entries(orderData).forEach(([key, value]) => {
+//         if (value !== null && value !== undefined) {
+//           formData.append(key, String(value));
+//         }
+//       });
 
-      const response = await apiClient.post("/orders", formData, {
-        headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-        },
-      });
+//       const response = await apiClient.post("/orders", formData, {
+//         headers: {
+//           "Content-Type": "application/x-www-form-urlencoded",
+//         },
+//       });
 
-      return response.data;
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["orders"] });
-      queryClient.invalidateQueries({ queryKey: ["cart"] });
-    },
-  });
-}
+//       return response.data;
+//     },
+//     onSuccess: () => {
+//       queryClient.invalidateQueries({ queryKey: ["orders"] });
+//       queryClient.invalidateQueries({ queryKey: ["cart"] });
+//     },
+//   });
+// }
 
 export function useCancelOrder() {
   const queryClient = useQueryClient();

features/products/components/ProductPageContent.tsx

@@ -1,225 +1,281 @@
-"use client";
+"use client"
 
-import { useState, useCallback, useMemo, useRef, useEffect } from "react";
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  useProductsBySlug,
-  useRelatedProducts,
-  useSubmitReview,
-} from "@/features/products/hooks/useProducts";
+import { useState, useCallback, useMemo, useRef, useEffect } from "react"
+import { Skeleton } from "@/components/ui/skeleton"
+import { useProductsBySlug, useRelatedProducts, useSubmitReview } from "@/features/products/hooks/useProducts"
 import {
   useAddToCart,
   useUpdateCartItemQuantity,
   useRemoveFromCart,
   useCart,
-} from "@/features/cart/hooks/useCart";
-import { useTranslations } from "next-intl";
-import { toast } from "sonner";
-import { ProductImageGallery } from "./ProductImageGallery";
-import { ProductInfoCard } from "./ProductInfoCard";
-import { ProductPurchaseCard } from "./ProductPurchaseCard";
-import { ProductReviewsSection } from "./ProductReviewsSection";
-import { RelatedProductsSection } from "./RelatedProductsSection";
-import { ReviewModal } from "./ReviewModal";
-import { StockLimitModal } from "./StockLimitModal";
+  cartEvents,
+} from "@/features/cart/hooks/useCart"
+import { useTranslations } from "next-intl"
+import { toast } from "sonner"
+import { ProductImageGallery } from "./ProductImageGallery"
+import { ProductInfoCard } from "./ProductInfoCard"
+import { ProductPurchaseCard } from "./ProductPurchaseCard"
+import { ProductReviewsSection } from "./ProductReviewsSection"
+import { RelatedProductsSection } from "./RelatedProductsSection"
+import { ReviewModal } from "./ReviewModal"
+import { StockLimitModal } from "./StockLimitModal"
 
 interface ProductDetailProps {
-  slug: string;
+  slug: string
 }
 
-const PENDING_PRODUCT_UPDATES_KEY = "pendingProductUpdates";
+const PENDING_PRODUCT_UPDATES_KEY = "pendingProductUpdates"
 
 interface PendingUpdate {
-  quantity: number;
-  timestamp: number;
-  retryCount: number;
+  quantity: number
+  timestamp: number
+  retryCount: number
+}
+
+const DEBUG = true
+const log = (...args: any[]) => {
+  if (DEBUG) console.log("[ProductPage]", ...args)
 }
 
 export default function ProductPageContent({ slug }: ProductDetailProps) {
-  const [localQuantity, setLocalQuantity] = useState(1);
-  const [isFavorite, setIsFavorite] = useState(false);
-  const [isSyncing, setIsSyncing] = useState(false);
-  const [syncError, setSyncError] = useState(false);
-  const [showStockModal, setShowStockModal] = useState(false);
-  const [showReviewModal, setShowReviewModal] = useState(false);
+  const [localQuantity, setLocalQuantity] = useState(1)
+  const [isFavorite, setIsFavorite] = useState(false)
+  const [isSyncing, setIsSyncing] = useState(false)
+  const [syncError, setSyncError] = useState(false)
+  const [showStockModal, setShowStockModal] = useState(false)
+  const [showReviewModal, setShowReviewModal] = useState(false)
+  const [isInitialized, setIsInitialized] = useState(false) // 🔥 NEW: Track initialization
 
-  const t = useTranslations();
+  const t = useTranslations()
 
-  const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
-  const isRequestInFlightRef = useRef(false);
-  const pendingQuantityRef = useRef<number | null>(null);
-  const retryCountRef = useRef(0);
-  const retryTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
-  const syncToServerRef = useRef<((quantity: number) => void) | null>(null);
-  const retrySyncRef = useRef<((quantity: number) => void) | null>(null);
+  const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined)
+  const isRequestInFlightRef = useRef(false)
+  const pendingQuantityRef = useRef<number | null>(null)
+  const retryCountRef = useRef(0)
+  const retryTimerRef = useRef<NodeJS.Timeout | undefined>(undefined)
+  const syncToServerRef = useRef<((quantity: number) => void) | null>(null)
+  const retrySyncRef = useRef<((quantity: number) => void) | null>(null)
+  const shouldSyncFromCartRef = useRef(true)
+  const lastSyncedQuantityRef = useRef<number | null>(null)
 
-  const {
-    data: product,
-    isLoading: productLoading,
-    error,
-    refetch: refetchProduct,
-  } = useProductsBySlug(slug);
+  const { data: product, isLoading: productLoading, error, refetch: refetchProduct } = useProductsBySlug(slug)
+
+  // 🔥 FIX: Memoize cart options to prevent infinite re-subscriptions
+  const cartOptions = useMemo(
+    () => ({
+      refetchOnMount: true,
+      refetchOnWindowFocus: true,
+      staleTime: 0,
+    }),
+    [],
+  )
+
+  const { data: cartData, refetch: refetchCart, isFetching: isCartFetching } = useCart(cartOptions)
 
-  const { data: cartData, refetch: refetchCart } = useCart();
-  
   const { data: relatedProducts } = useRelatedProducts(product?.id || 0, {
     enabled: !!product?.id,
-  });
+  })
 
-  const addToCartMutation = useAddToCart();
-  const updateCartMutation = useUpdateCartItemQuantity();
-  const removeFromCartMutation = useRemoveFromCart();
-  const submitReviewMutation = useSubmitReview();
+  const addToCartMutation = useAddToCart()
+  const updateCartMutation = useUpdateCartItemQuantity()
+  const removeFromCartMutation = useRemoveFromCart()
+  const submitReviewMutation = useSubmitReview()
 
-  const cartItem = useMemo(
-    () => cartData?.data?.find((item: any) => item.product?.id === product?.id),
-    [cartData, product]
-  );
-  const isInCart = !!cartItem;
-  const availableStock = product?.stock || 0;
+  const cartItem = useMemo(() => {
+    const item = cartData?.data?.find((item: any) => item.product?.id === product?.id)
+    log("🎯 Cart Item Found:", {
+      productId: product?.id,
+      cartItem: item,
+      quantity: item?.product_quantity,
+      isInitialized,
+    })
+    return item
+  }, [cartData, product, isInitialized])
+
+  const isInCart = !!cartItem
+  const availableStock = product?.stock || 0
+
+  log("📊 State:", {
+    isInCart,
+    localQuantity,
+    cartItemQuantity: cartItem?.product_quantity,
+    availableStock,
+    isSyncing,
+    shouldSyncFromCart: shouldSyncFromCartRef.current,
+    isInitialized,
+  })
 
   const imageUrls = useMemo(
-    () =>
-      product?.media?.map(
-        (m) => m.images_800x800 || m.images_720x720 || m.thumbnail
-      ) || [],
-    [product]
-  );
+    () => product?.media?.map((m) => m.images_800x800 || m.images_720x720 || m.thumbnail) || [],
+    [product],
+  )
 
-  // ✅ CORRECT - Use reviews from product data
-  const reviews = useMemo(() => product?.reviews_resources || [], [product]);
+  const reviews = useMemo(() => product?.reviews_resources || [], [product])
   const averageRating = useMemo(
-    () => (product?.reviews?.rating ? parseFloat(product.reviews.rating) : 0),
-    [product]
-  );
+    () => (product?.reviews?.rating ? Number.parseFloat(product.reviews.rating) : 0),
+    [product],
+  )
+
+  // 🔥 FIX: Subscribe to cart events ONCE with stable dependencies
+  useEffect(() => {
+    log("🔔 Setting up cart event subscription")
+    const unsubscribe = cartEvents.subscribe(() => {
+      log("📢 Cart event received! Refetching...")
+      refetchCart()
+    })
+
+    return () => {
+      log("🔕 Cleaning up cart event subscription")
+      unsubscribe()
+    }
+  }, [refetchCart])
+
+  // 🔥 CRITICAL FIX: Initialize localQuantity from cart ONCE on mount
+  useEffect(() => {
+    if (!product?.id || isInitialized) return
+
+    log("🚀 Initializing component with product:", product.id)
+
+    if (cartItem?.product_quantity) {
+      const serverQuantity = cartItem.product_quantity
+      log("✅ Initial cart quantity found:", serverQuantity)
+      setLocalQuantity(serverQuantity)
+      lastSyncedQuantityRef.current = serverQuantity
+    }
+
+    setIsInitialized(true)
+  }, [product?.id, cartItem, isInitialized])
 
   useEffect(() => {
-    if (cartItem?.product_quantity) {
-      setLocalQuantity(cartItem.product_quantity);
-    }
-  }, [cartItem]);
+    setLocalQuantity(cartItem?.product_quantity || 1)
+  }, [cartItem])
 
   const savePendingUpdate = useCallback(
     (quantity: number) => {
-      if (!product?.id) return;
+      if (!product?.id) return
       try {
-        const stored = sessionStorage.getItem(PENDING_PRODUCT_UPDATES_KEY);
-        const pending: Record<number, PendingUpdate> = stored
-          ? JSON.parse(stored)
-          : {};
+        const stored = sessionStorage.getItem(PENDING_PRODUCT_UPDATES_KEY)
+        const pending: Record<number, PendingUpdate> = stored ? JSON.parse(stored) : {}
         pending[product.id] = {
           quantity,
           timestamp: Date.now(),
           retryCount: retryCountRef.current,
-        };
-        sessionStorage.setItem(
-          PENDING_PRODUCT_UPDATES_KEY,
-          JSON.stringify(pending)
-        );
+        }
+        sessionStorage.setItem(PENDING_PRODUCT_UPDATES_KEY, JSON.stringify(pending))
       } catch (error) {
-        console.error("Failed to save pending update:", error);
+        console.error("Failed to save pending update:", error)
       }
     },
-    [product?.id]
-  );
+    [product?.id],
+  )
 
   const clearPendingUpdate = useCallback(() => {
-    if (!product?.id) return;
+    if (!product?.id) return
     try {
-      const stored = sessionStorage.getItem(PENDING_PRODUCT_UPDATES_KEY);
+      const stored = sessionStorage.getItem(PENDING_PRODUCT_UPDATES_KEY)
       if (stored) {
-        const pending: Record<number, PendingUpdate> = JSON.parse(stored);
-        delete pending[product.id];
+        const pending: Record<number, PendingUpdate> = JSON.parse(stored)
+        delete pending[product.id]
         if (Object.keys(pending).length === 0) {
-          sessionStorage.removeItem(PENDING_PRODUCT_UPDATES_KEY);
+          sessionStorage.removeItem(PENDING_PRODUCT_UPDATES_KEY)
         } else {
-          sessionStorage.setItem(
-            PENDING_PRODUCT_UPDATES_KEY,
-            JSON.stringify(pending)
-          );
+          sessionStorage.setItem(PENDING_PRODUCT_UPDATES_KEY, JSON.stringify(pending))
         }
       }
     } catch (error) {
-      console.error("Failed to clear pending update:", error);
+      console.error("Failed to clear pending update:", error)
     }
-  }, [product?.id]);
+  }, [product?.id])
 
   const retrySync = useCallback(
     (quantity: number) => {
-      const maxRetries = 4;
-      const retryCount = retryCountRef.current;
+      const maxRetries = 4
+      const retryCount = retryCountRef.current
 
       if (retryCount >= maxRetries) {
-        setSyncError(true);
-        setIsSyncing(false);
+        setSyncError(true)
+        setIsSyncing(false)
+        shouldSyncFromCartRef.current = true
         toast.error(t("error"), {
           description: t("update_quantity_failed"),
-        });
-        return;
+        })
+        return
       }
 
-      const delay = Math.min(1000 * Math.pow(2, retryCount), 16000);
-      retryCountRef.current++;
+      const delay = Math.min(1000 * Math.pow(2, retryCount), 16000)
+      retryCountRef.current++
 
       retryTimerRef.current = setTimeout(() => {
-        syncToServerRef.current?.(quantity);
-      }, delay);
+        syncToServerRef.current?.(quantity)
+      }, delay)
     },
-    [t]
-  );
+    [t],
+  )
 
-  retrySyncRef.current = retrySync;
+  retrySyncRef.current = retrySync
 
   const syncToServer = useCallback(
     async (quantity: number) => {
-      if (!product?.id) return;
+      if (!product?.id) return
+
+      log("🚀 syncToServer called:", {
+        productId: product.id,
+        quantity,
+        isRequestInFlight: isRequestInFlightRef.current,
+        isInCart,
+      })
 
       if (isRequestInFlightRef.current) {
-        pendingQuantityRef.current = quantity;
-        return;
+        log("⏳ Request in flight, queuing:", quantity)
+        pendingQuantityRef.current = quantity
+        return
       }
 
-      isRequestInFlightRef.current = true;
-      setIsSyncing(true);
-      setSyncError(false);
+      isRequestInFlightRef.current = true
+      setIsSyncing(true)
+      setSyncError(false)
 
       try {
         if (quantity === 0) {
-          await removeFromCartMutation.mutateAsync(product.id);
-          toast.success(t("removed_from_cart"));
+          log("🗑️ Removing from cart")
+          await removeFromCartMutation.mutateAsync(product.id)
+          toast.success(t("removed_from_cart"))
         } else if (isInCart) {
+          log("🔄 Updating cart quantity")
           await updateCartMutation.mutateAsync({
             productId: product.id,
             quantity: quantity,
-          });
+          })
         } else {
+          log("➕ Adding to cart")
           await addToCartMutation.mutateAsync({
             productId: product.id,
             quantity: quantity,
-          });
+          })
         }
 
-        isRequestInFlightRef.current = false;
-        setIsSyncing(false);
-        retryCountRef.current = 0;
-        clearPendingUpdate();
-        await refetchCart();
+        log("✅ Sync successful")
+        await refetchCart()
+        retryCountRef.current = 0
+        clearPendingUpdate()
 
         if (pendingQuantityRef.current !== null) {
-          const nextQuantity = pendingQuantityRef.current;
-          pendingQuantityRef.current = null;
-          setTimeout(() => syncToServerRef.current?.(nextQuantity), 100);
+          const nextQuantity = pendingQuantityRef.current
+          pendingQuantityRef.current = null
+          log("📤 Processing queued update:", nextQuantity)
+          setTimeout(() => syncToServerRef.current?.(nextQuantity), 100)
         }
       } catch (error) {
-        console.error("Sync failed:", error);
-        isRequestInFlightRef.current = false;
+        log("❌ Sync failed:", error)
+        setLocalQuantity(cartItem?.product_quantity || 1)
+        toast.error("Failed to update quantity", {
+          description: "Please try again",
+        })
 
-        if (retryCountRef.current >= 3) {
-          setLocalQuantity(cartItem?.product_quantity || 1);
-          clearPendingUpdate();
-        }
-
-        retrySyncRef.current?.(quantity);
+        retrySyncRef.current?.(quantity)
+      } finally {
+        isRequestInFlightRef.current = false
+        setIsSyncing(false)
       }
     },
     [
@@ -229,127 +285,122 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
       addToCartMutation,
       removeFromCartMutation,
       cartItem,
-      clearPendingUpdate,
       refetchCart,
+      clearPendingUpdate,
       t,
-    ]
-  );
+    ],
+  )
 
-  syncToServerRef.current = syncToServer;
+  syncToServerRef.current = syncToServer
 
   useEffect(() => {
-    if (!product?.id) return;
+    if (!isInCart || !product?.id) return
 
-    const loadPendingUpdates = () => {
-      try {
-        const stored = sessionStorage.getItem(PENDING_PRODUCT_UPDATES_KEY);
-        if (stored) {
-          const pending: Record<number, PendingUpdate> = JSON.parse(stored);
-          const productPending = pending[product.id];
-
-          if (
-            productPending &&
-            productPending.quantity !== (cartItem?.product_quantity || 1)
-          ) {
-            setLocalQuantity(productPending.quantity);
-            pendingQuantityRef.current = productPending.quantity;
-            retryCountRef.current = productPending.retryCount;
-
-            setTimeout(
-              () => syncToServerRef.current?.(productPending.quantity),
-              500
-            );
-          }
-        }
-      } catch (error) {
-        console.error("Failed to load pending updates:", error);
-      }
-    };
-
-    loadPendingUpdates();
-  }, [product?.id, cartItem]);
-
-  useEffect(() => {
-    if (!isInCart || !product?.id) return;
+    // If local matches server, nothing to sync
+    if (localQuantity === (cartItem?.product_quantity || 1)) {
+      return
+    }
 
     if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current);
+      clearTimeout(debounceTimerRef.current)
     }
 
-    if (localQuantity === (cartItem?.product_quantity || 1)) {
-      return;
-    }
-
-    savePendingUpdate(localQuantity);
-
     debounceTimerRef.current = setTimeout(() => {
-      syncToServerRef.current?.(localQuantity);
-    }, 800);
+      syncToServerRef.current?.(localQuantity)
+    }, 800)
 
     return () => {
       if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
+        clearTimeout(debounceTimerRef.current)
       }
-    };
-  }, [localQuantity, isInCart, product?.id, cartItem, savePendingUpdate]);
+    }
+  }, [localQuantity, isInCart, product?.id, cartItem?.product_quantity])
 
+  // Cleanup
   useEffect(() => {
     return () => {
-      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
-      if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
-    };
-  }, []);
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
+      if (retryTimerRef.current) clearTimeout(retryTimerRef.current)
+    }
+  }, [])
 
   const handleAddToCart = useCallback(async () => {
-    if (!product?.id) return;
+    if (!product?.id) return
 
-    setIsSyncing(true);
+    if (localQuantity > availableStock) {
+      setShowStockModal(true)
+      return
+    }
+
+    setIsSyncing(true)
+    shouldSyncFromCartRef.current = false
 
     try {
       await addToCartMutation.mutateAsync({
         productId: product.id,
         quantity: localQuantity,
-      });
+      })
 
-      await refetchCart();
-      setIsSyncing(false);
+      lastSyncedQuantityRef.current = localQuantity
+
+      setTimeout(() => {
+        shouldSyncFromCartRef.current = true
+        refetchCart()
+      }, 150)
+
+      setIsSyncing(false)
 
       toast.success(t("added_to_cart"), {
         description: `${product.name} ${t("added_to_cart_description")}`,
-      });
+      })
     } catch (error) {
-      console.error("Add to cart error:", error);
-      setIsSyncing(false);
+      console.error("Add to cart error:", error)
+      setIsSyncing(false)
+      shouldSyncFromCartRef.current = true
       toast.error(t("error"), {
         description: t("add_to_cart_failed"),
-      });
+      })
     }
-  }, [product, localQuantity, addToCartMutation, refetchCart, t]);
+  }, [product, localQuantity, availableStock, addToCartMutation, refetchCart, t])
 
   const handleQuantityIncrease = useCallback(() => {
+    log("➕ Quantity increase clicked:", {
+      current: localQuantity,
+      availableStock,
+    })
     if (localQuantity >= availableStock) {
-      setShowStockModal(true);
-      return;
+      log("⚠️ Stock limit reached")
+      setShowStockModal(true)
+      return
     }
-    setLocalQuantity((prev) => prev + 1);
-  }, [localQuantity, availableStock]);
+    setLocalQuantity((prev) => {
+      const newVal = prev + 1
+      log("📈 New local quantity:", newVal)
+      return newVal
+    })
+  }, [localQuantity, availableStock])
 
   const handleQuantityDecrease = useCallback(() => {
-    if (localQuantity <= 0) return;
-    setLocalQuantity((prev) => prev - 1);
-  }, [localQuantity]);
+    log("➖ Quantity decrease clicked:", { current: localQuantity })
+    if (localQuantity <= 0) return
+    setLocalQuantity((prev) => {
+      const newVal = prev - 1
+      log("📉 New local quantity:", newVal)
+      return newVal
+    })
+  }, [localQuantity])
 
   const handleToggleFavorite = useCallback(() => {
-    setIsFavorite(!isFavorite);
-  }, [isFavorite]);
+    setIsFavorite(!isFavorite)
+  }, [isFavorite])
 
   const handleSubmitReview = useCallback(
     async (rating: number, text: string) => {
       if (!product?.id || rating === 0 || !text.trim()) {
         toast.error(t("error"), {
           description: "Please provide rating and review text",
-        });
-        return;
+        })
+        return
       }
 
       try {
@@ -358,25 +409,24 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
           rating: rating,
           title: text,
           source: "site",
-        });
+        })
 
-        // ✅ Refetch product to get updated reviews
-        await refetchProduct();
-        
-        toast.success("Review submitted successfully!");
-        setShowReviewModal(false);
+        await refetchProduct()
+
+        toast.success("Review submitted successfully!")
+        setShowReviewModal(false)
       } catch (error) {
         toast.error(t("error"), {
           description: "Failed to submit review",
-        });
+        })
       }
     },
-    [product?.id, submitReviewMutation, refetchProduct, t]
-  );
+    [product?.id, submitReviewMutation, refetchProduct, t],
+  )
 
   const loadingSkeleton = useMemo(
     () => (
-      <div className="container mx-auto px-4 py-8">
+      <div className=" mx-auto px-4 py-8">
         <div className="flex flex-col lg:flex-row gap-8">
           <div className="flex-1 max-w-2xl">
             <Skeleton className="aspect-square w-full rounded-2xl" />
@@ -393,33 +443,25 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
         </div>
       </div>
     ),
-    []
-  );
+    [],
+  )
 
-  if (productLoading) return loadingSkeleton;
+  if (productLoading) return loadingSkeleton
 
   if (error || !product) {
     return (
-      <div className="container mx-auto px-4 py-8 text-center">
-        <h2 className="text-2xl font-bold text-red-600">
-          {t("product_not_found")}
-        </h2>
-        <p className="text-gray-500 mt-2">
-          {t("product_not_found_description")}
-        </p>
+      <div className=" mx-auto px-4 py-8 text-center">
+        <h2 className="text-2xl font-bold text-red-600">{t("product_not_found")}</h2>
+        <p className="text-gray-500 mt-2">{t("product_not_found_description")}</p>
       </div>
-    );
+    )
   }
 
   return (
     <>
       <div className="px-2 md:px-4 lg:px-6 rounded-lg mb-18 space-y-8 max-w-[1504px] mx-auto">
         <div className="flex flex-col lg:flex-row gap-8 rounded-b-lg bg-white p-4">
-          <ProductImageGallery
-            images={imageUrls}
-            productName={product.name}
-            noImageText={t("no_image")}
-          />
+          <ProductImageGallery images={imageUrls} productName={product.name} noImageText={t("no_image")} />
 
           <ProductInfoCard
             brandName={product.brand?.name}
@@ -477,5 +519,5 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
         isSubmitting={submitReviewMutation.isPending}
       />
     </>
-  );
-}
+  )
+}

features/products/components/ProductPurchaseCard.tsx

@@ -94,13 +94,9 @@ export function ProductPurchaseCard({
                   variant="outline"
                   size="icon"
                   onClick={onQuantityIncrease}
-                  disabled={localQuantity >= availableStock || isSyncing}
+                  disabled={isSyncing}
                   className={`rounded-lg h-12 w-12 ${
                     isSyncing ? "opacity-70" : ""
-                  } ${
-                    localQuantity >= availableStock
-                      ? "opacity-50 cursor-not-allowed"
-                      : ""
                   }`}
                 >
                   <Plus className="h-5 w-5" />

features/products/components/ProductReviewsSection.tsx

@@ -51,9 +51,9 @@ export function ProductReviewsSection({
           <h3 className="text-2xl font-bold">{t("customer_reviews")}</h3>
           <div className="flex items-center gap-2 mt-2">
             {renderStars(Math.round(averageRating))}
-            <span className="text-sm text-gray-600">
+            {/* <span className="text-sm text-gray-600">
               {averageRating.toFixed(1)} out of 5
-            </span>
+            </span> */}
           </div>
         </div>
         <Button onClick={onWriteReview} className="rounded-lg bg-[#005bff] hover:bg-[#0041c4]">

features/profile/components/ProfilePageContent.tsx

@@ -14,7 +14,8 @@ import {
 } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useUserProfile, useUpdateProfile } from "@/lib/hooks";
-import { clearAuthToken } from "@/lib/api";
+
+import { useLogout } from "@/lib/hooks/useAuth";
 import { useTranslations } from "next-intl";
 import { toast } from "sonner";
 
@@ -46,9 +47,9 @@ export default function ClientProfilePage(props: ProfilePageProps) {
       });
     }
   }, [user, isEditing]);
-
+  const { mutate: logout, isPending: isLoggingOut } = useLogout();
   const handleLogout = useCallback(() => {
-    clearAuthToken();
+    logout();
     window.location.href = "/";
   }, []);
 
@@ -117,7 +118,7 @@ export default function ClientProfilePage(props: ProfilePageProps) {
   const loadingSkeleton = useMemo(
     () => (
       <div className="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8 pt-20 sm:pt-24">
-        <div className="container mx-auto max-w-4xl">
+        <div className=" mx-auto max-w-4xl">
           <div className="mb-6 sm:mb-8">
             <Skeleton className="h-8 sm:h-10 w-32 sm:w-40 mb-2" />
             <Skeleton className="h-4 w-48 sm:w-64" />
@@ -171,12 +172,12 @@ export default function ClientProfilePage(props: ProfilePageProps) {
 
   return (
     <div className="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8 pb-20 sm:pb-24">
-      <div className="container mx-auto max-w-4xl">
+      <div className=" mx-auto max-w-4xl">
         {/* Header Section */}
         <div className="mb-6 sm:mb-8">
           <div className="flex items-start justify-between gap-4">
             <div className="flex-1 min-w-0">
-              <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-1 sm:mb-2 truncate">
+              <h1 className="text-xl md:text-2xl lg:text-3xl font-bold text-gray-900 mb-1 sm:mb-2 truncate">
                 {t("profile")}
               </h1>
               <p className="text-sm sm:text-base text-gray-600">
@@ -271,58 +272,56 @@ export default function ClientProfilePage(props: ProfilePageProps) {
                   </div>
                 </div>
 
-<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5">
-
-                {/* Phone Field */}
-                <div className="space-y-2">
-                  <Label
-                    htmlFor="phone"
-                    className="text-sm font-medium text-gray-700 flex items-center gap-1.5"
-                  >
-                    <Phone className="h-3.5 w-3.5 text-gray-400" />
-                    {t("phone_number")}
-                  </Label>
-                  <Input
-                    id="phone"
-                    value={formData.phone_number}
-                    onChange={(e) =>
-                      handleInputChange("phone_number", e.target.value)
-                    }
-                    disabled={!isEditing}
-                    className={`h-10 sm:h-11 text-sm sm:text-base ${
-                      isEditing
-                        ? "border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
-                        : "bg-gray-50 border-gray-200 text-gray-700"
-                    }`}
-                    placeholder={t("enter_phone_number")}
-                  />
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5">
+                  {/* Phone Field */}
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="phone"
+                      className="text-sm font-medium text-gray-700 flex items-center gap-1.5"
+                    >
+                      <Phone className="h-3.5 w-3.5 text-gray-400" />
+                      {t("phone_number")}
+                    </Label>
+                    <Input
+                      id="phone"
+                      value={formData.phone_number}
+                      onChange={(e) =>
+                        handleInputChange("phone_number", e.target.value)
+                      }
+                      disabled={!isEditing}
+                      className={`h-10 sm:h-11 text-sm sm:text-base ${
+                        isEditing
+                          ? "border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
+                          : "bg-gray-50 border-gray-200 text-gray-700"
+                      }`}
+                      placeholder={t("enter_phone_number")}
+                    />
+                  </div>
+                  {/* Address Field */}
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="address"
+                      className="text-sm font-medium text-gray-700 flex items-center gap-1.5"
+                    >
+                      <MapPin className="h-3.5 w-3.5 text-gray-400" />
+                      {t("address")}
+                    </Label>
+                    <Input
+                      id="address"
+                      value={formData.address}
+                      onChange={(e) =>
+                        handleInputChange("address", e.target.value)
+                      }
+                      disabled={!isEditing}
+                      className={`h-10 sm:h-11 text-sm sm:text-base ${
+                        isEditing
+                          ? "border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
+                          : "bg-gray-50 border-gray-200 text-gray-700"
+                      }`}
+                      placeholder={t("enter_address")}
+                    />
+                  </div>
                 </div>
-                {/* Address Field */}
-                <div className="space-y-2">
-                  <Label
-                    htmlFor="address"
-                    className="text-sm font-medium text-gray-700 flex items-center gap-1.5"
-                  >
-                    <MapPin className="h-3.5 w-3.5 text-gray-400" />
-                    {t("address")}
-                  </Label>
-                  <Input
-                    id="address"
-                    value={formData.address}
-                    onChange={(e) =>
-                      handleInputChange("address", e.target.value)
-                    }
-                    disabled={!isEditing}
-                    className={`h-10 sm:h-11 text-sm sm:text-base ${
-                      isEditing
-                        ? "border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
-                        : "bg-gray-50 border-gray-200 text-gray-700"
-                    }`}
-                    placeholder={t("enter_address")}
-                  />
-                </div>
-</div>
-
 
                 {/* Action Buttons - Edit Mode */}
                 {isEditing && (