added zoom function, fixed cart quantitu bug

features/cart/components/CartItemCard.tsx

@@ -48,6 +48,7 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
   const pendingQuantityRef = useRef<number | null>(null);
   const retryCountRef = useRef(0);
   const retryTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const isInitializedRef = useRef(false); // Track if component has been initialized
 
   // Function refs to solve circular dependency
   const syncToServerRef = useRef<((quantity: number) => void) | null>(null);
@@ -62,6 +63,10 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
   // Initialize from server state
   useEffect(() => {
     setLocalQuantity(item.quantity);
+    // Mark as initialized after first render
+    if (!isInitializedRef.current) {
+      isInitializedRef.current = true;
+    }
   }, [item.quantity]);
 
   // Save to sessionStorage
@@ -81,13 +86,13 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
 
         sessionStorage.setItem(
           PENDING_CART_UPDATES_KEY,
-          JSON.stringify(pending)
+          JSON.stringify(pending),
         );
       } catch (error) {
         console.error("Failed to save pending update:", error);
       }
     },
-    [item.product_id]
+    [item.product_id],
   );
 
   // Remove from sessionStorage
@@ -103,7 +108,7 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
         } else {
           sessionStorage.setItem(
             PENDING_CART_UPDATES_KEY,
-            JSON.stringify(pending)
+            JSON.stringify(pending),
           );
         }
       }
@@ -200,7 +205,7 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
 
               retrySyncRef.current?.(quantity);
             },
-          }
+          },
         );
       }
     },
@@ -211,13 +216,16 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
       removeItem,
       onUpdate,
       clearPendingUpdate,
-    ]
+    ],
   );
 
   // Update ref
   syncToServerRef.current = syncToServer;
 
   // Load pending updates from sessionStorage on mount
+  // DISABLED: This was causing automatic sync on mount, sending 0 quantity to server
+  // Users should manually refresh or re-add items if there were pending updates
+  /*
   useEffect(() => {
     const loadPendingUpdates = () => {
       try {
@@ -246,9 +254,15 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
 
     loadPendingUpdates();
   }, [item.product_id, item.quantity]);
+  */
 
   // Debounced sync
   useEffect(() => {
+    // Don't sync on initial mount - only sync after user interaction
+    if (!isInitializedRef.current) {
+      return;
+    }
+
     // Clear existing timers
     if (debounceTimerRef.current) {
       clearTimeout(debounceTimerRef.current);
@@ -259,6 +273,14 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
       return;
     }
 
+    // Don't sync if quantity is 0 or invalid (unless it's a delete operation)
+    if (localQuantity <= 0 && item.quantity > 0) {
+      // This is a delete operation, allow it
+    } else if (localQuantity <= 0) {
+      // Invalid state, don't sync
+      return;
+    }
+
     // Save to sessionStorage immediately
     savePendingUpdate(localQuantity);
 
@@ -336,14 +358,14 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
             </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">
+              {/* <p className="text-sm text-gray-600">
                 {item.seller?.name || "Store"}
-              </p>
-              {availableStock <= 5 && (
+              </p> */}
+              {/* {availableStock <= 5 && (
                 <p className="text-xs text-orange-600 font-medium">
                   {t("only_left", { count: availableStock })}
                 </p>
-              )}
+              )} */}
               <Button
                 variant="ghost"
                 size="sm"