order status update

src/widgets/categories/ui/product-card.tsx

@@ -42,31 +42,47 @@ export function ProductCard({
   const debounceRef = useRef<NodeJS.Timeout | null>(null);
   const imageRef = useRef<HTMLDivElement>(null);
 
-  // O'lchov birligini formatlash uchun yordamchi funksiya
+  /** ✅ Measurement logic */
+  const measurementName = product.meansurement?.name ?? null;
+  const isGram = measurementName === 'gr';
+
+  // default qo‘shish miqdori
+  const defaultQty = isGram ? 100 : 1;
+
+  // +/- qadam
+  const step = isGram ? 100 : 1;
+
+  const measurementDisplay = measurementName || 'шт.';
+
   const getQuantityMessage = (qty: number, measurement: string | null) => {
     if (!measurement) return `${qty} dona`;
     return `${qty} ${measurement}`;
   };
 
+  /** 🛒 Add to cart */
   const { mutate: addToCart } = useMutation({
     mutationFn: (body: { product: string; quantity: number; cart: string }) =>
       cart_api.cart_item(body),
+
     onSuccess: (_, variables) => {
       queryClient.refetchQueries({ queryKey: ['cart_items'] });
       setAnimated(true);
 
-      // Muvaffaqiyatli qo'shilganda xabar
-      const measurementName = product.meansurement?.name || null;
       toast.success(
-        `${getQuantityMessage(variables.quantity, measurementName)} ${t("savatga qo'shildi")}`,
+        `${getQuantityMessage(
+          variables.quantity,
+          measurementName,
+        )} ${t("savatga qo'shildi")}`,
         {
           richColors: true,
           position: 'top-center',
         },
       );
     },
+
     onError: (err: AxiosError) => {
-      const detail = (err.response?.data as { detail: string }).detail;
+      const detail = (err.response?.data as { detail?: string })?.detail;
+
       toast.error(detail || err.message, {
         richColors: true,
         position: 'top-center',
@@ -74,6 +90,7 @@ export function ProductCard({
     },
   });
 
+  /** 🔄 Update */
   const { mutate: updateCartItem } = useMutation({
     mutationFn: ({
       body,
@@ -82,33 +99,40 @@ export function ProductCard({
       body: { quantity: number };
       cart_item_id: string;
     }) => cart_api.update_cart_item({ body, cart_item_id }),
+
     onSuccess: () => {
       queryClient.refetchQueries({ queryKey: ['cart_items'] });
       setAnimated(true);
     },
+
     onError: (err: AxiosError) => {
-      toast.error(err.message, { richColors: true, position: 'top-center' });
+      toast.error(err.message, { richColors: true });
     },
   });
 
+  /** ❌ Delete */
   const { mutate: deleteCartItem } = useMutation({
     mutationFn: ({ cart_item_id }: { cart_item_id: string }) =>
       cart_api.delete_cart_item(cart_item_id),
+
     onSuccess: () => {
       queryClient.refetchQueries({ queryKey: ['cart_items'] });
       setAnimated(true);
     },
+
     onError: (err: AxiosError) => {
-      toast.error(err.message, { richColors: true, position: 'top-center' });
+      toast.error(err.message, { richColors: true });
     },
   });
 
+  /** 📦 Cart items */
   const { data: cartItems } = useQuery({
     queryKey: ['cart_items', cart_id],
     queryFn: () => cart_api.get_cart_items(cart_id!),
     enabled: !!cart_id,
   });
 
+  /** 🔁 Sync quantity */
   useEffect(() => {
     const item = cartItems?.data?.cart_item?.find(
       (item) => Number(item.product.id) === product.id,
@@ -117,15 +141,62 @@ export function ProductCard({
     setQuantity(item ? item.quantity : 0);
   }, [cartItems, product.id]);
 
+  const getCartItemId = () =>
+    cartItems?.data.cart_item.find(
+      (item) => Number(item.product.id) === product.id,
+    )?.id;
+
+  /** ➖ Decrease */
+  const decrease = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+
+    if (!cartItems) return;
+
+    const currentQty = quantity === '' ? 0 : quantity;
+    const newQty = currentQty - step;
+
+    const id = getCartItemId();
+    if (!id) return;
+
+    if (newQty <= 0) {
+      setQuantity(0);
+      deleteCartItem({ cart_item_id: id.toString() });
+      return;
+    }
+
+    setQuantity(newQty);
+
+    updateCartItem({
+      cart_item_id: id.toString(),
+      body: { quantity: newQty },
+    });
+  };
+
+  /** ➕ Increase */
+  const increase = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+
+    const currentQty = quantity === '' ? 0 : quantity;
+    const newQty = currentQty + step;
+
+    setQuantity(newQty);
+
+    const id = getCartItemId();
+    if (!id) return;
+
+    updateCartItem({
+      cart_item_id: id.toString(),
+      body: { quantity: newQty },
+    });
+  };
+
+  /** ❤️ Favourite */
   const favouriteMutation = useMutation({
     mutationFn: (productId: string) => product_api.favourite(productId),
 
     onSuccess: () => {
       queryClient.refetchQueries({ queryKey: ['product_list'] });
-      queryClient.refetchQueries({ queryKey: ['list'] });
       queryClient.refetchQueries({ queryKey: ['favourite_product'] });
-      queryClient.refetchQueries({ queryKey: ['search'] });
-      queryClient.refetchQueries({ queryKey: ['product_detail', product] });
     },
 
     onError: () => {
@@ -136,55 +207,7 @@ export function ProductCard({
     },
   });
 
-  const decrease = (e: MouseEvent<HTMLButtonElement>) => {
+  /** ❌ Error state */
-    e.stopPropagation();
-
-    if (!cartItems) return;
-
-    const currentQty = quantity === '' ? 0 : quantity;
-    const newQty = currentQty - 1;
-
-    const cartItemId = cartItems.data.cart_item.find(
-      (item) => Number(item.product.id) === product.id,
-    )?.id;
-
-    if (!cartItemId) return;
-
-    if (newQty <= 0) {
-      setQuantity(0);
-      deleteCartItem({ cart_item_id: cartItemId.toString() });
-      return;
-    }
-
-    setQuantity(newQty);
-    updateCartItem({
-      body: { quantity: newQty },
-      cart_item_id: cartItemId.toString(),
-    });
-  };
-
-  const getCartItemId = () =>
-    cartItems?.data.cart_item.find(
-      (item) => Number(item.product.id) === product.id,
-    )?.id;
-
-  const increase = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-
-    const current = quantity === '' ? 0 : quantity;
-
-    const newQty = current + 1;
-    setQuantity(newQty);
-
-    const id = getCartItemId();
-    if (id) {
-      updateCartItem({
-        cart_item_id: id.toString(),
-        body: { quantity: newQty },
-      });
-    }
-  };
-
   if (error) {
     return (
       <Card className="p-4 rounded-xl">
@@ -196,9 +219,6 @@ export function ProductCard({
     );
   }
 
-  // O'lchov birligini ko'rsatish
-  const measurementDisplay = product.meansurement?.name || 'шт.';
-
   return (
     <>
       <Card
@@ -217,13 +237,11 @@ export function ProductCard({
                 favouriteMutation.mutate(String(product.id));
               }}
               aria-label="liked"
-              className="absolute top-2 right-2 z-10 bg-white hover:bg-gray-200 cursor-pointer rounded-full p-1.5 sm:p-2 shadow hover:scale-110"
+              className="absolute top-2 right-2 z-10 bg-white hover:bg-gray-200 rounded-full p-2 shadow"
             >
               <Heart
-                className={`w-4 h-4 sm:w-5 sm:h-5 ${
+                className={`w-4 h-4 ${
-                  product.liked
+                  product.liked ? 'fill-red-500 text-red-500' : 'text-slate-400'
-                    ? 'fill-red-500 text-red-500'
-                    : 'text-slate-400 hover:text-red-400'
                 }`}
               />
             </Button>
@@ -233,7 +251,7 @@ export function ProductCard({
                 fill
                 src={
                   product.images.length > 0
-                    ? product?.images[0].image?.includes(BASE_URL)
+                    ? product.images[0].image?.includes(BASE_URL)
                       ? product.images[0].image
                       : BASE_URL + product.images[0].image
                     : LogosProduct
@@ -246,26 +264,19 @@ export function ProductCard({
           </div>
 
           <div className="p-3 sm:p-4 space-y-2 flex-1">
-            {/* Narx va o'lchov birligi */}
-            <div className="flex items-baseline gap-1">
             {product.prices.length > 0 && (
-                <>
+              <p className="text-lg font-bold">
-                  <p className="text-lg sm:text-xl font-bold text-slate-900">
                 {formatPrice(
                   Math.max(...product.prices.map((p) => Number(p.price))),
                   true,
                 )}
-                    <span className="text-md text-slate-500 font-medium ml-1">
+                <span className="text-sm text-slate-500 ml-1">
                   /{measurementDisplay}
                 </span>
               </p>
-                </>
             )}
-            </div>
 
-            <h3 className="text-sm sm:text-base font-medium text-slate-800 line-clamp-2">
+            <h3 className="text-sm font-medium line-clamp-2">{product.name}</h3>
-              {product.name}
-            </h3>
           </div>
 
           <div className="p-3 sm:p-4 pt-0">
@@ -276,39 +287,33 @@ export function ProductCard({
 
                   addToCart({
                     product: String(product.id),
-                    quantity: 1,
+                    quantity: defaultQty, // ✅ 100gr yoki 1 dona
                     cart: cart_id!,
                   });
                 }}
-                className="w-full bg-white hover:bg-slate-50 text-slate-700 border border-slate-300 rounded-lg h-10 font-medium"
+                className="w-full bg-white border border-slate-300 text-slate-700"
               >
                 {t('Savatga')}
               </Button>
             ) : (
               <div
                 onClick={(e) => e.stopPropagation()}
-                className="flex items-center justify-between bg-white border border-slate-300 rounded-lg h-10 overflow-hidden"
+                className="flex items-center justify-between border border-slate-300 rounded-lg h-10"
-              >
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  onClick={decrease}
-                  className="h-full rounded-none hover:bg-slate-100 px-3"
               >
+                <Button size="icon" variant="ghost" onClick={decrease}>
                   <Minus className="w-4 h-4" />
                 </Button>
 
-                <div className="flex items-center gap-1 px-2">
+                <div className="flex items-center gap-2">
                   <Input
                     value={quantity}
-                    className="border-none text-center w-12 p-0 h-8 text-sm font-medium"
+                    className="border-none text-center w-16"
                     onChange={(e) => {
                       const v = e.target.value;
                       if (!/^\d*$/.test(v)) return;
 
-                      if (debounceRef.current) {
+                      if (debounceRef.current)
                         clearTimeout(debounceRef.current);
-                      }
 
                       if (v === '') {
                         setQuantity('');
@@ -316,13 +321,12 @@ export function ProductCard({
                       }
 
                       const num = Number(v);
-
                       setQuantity(num);
 
                       const id = getCartItemId();
                       if (!id) return;
 
-                      if (num === 0) {
+                      if (num <= 0) {
                         deleteCartItem({ cart_item_id: id.toString() });
                         return;
                       }
@@ -335,17 +339,12 @@ export function ProductCard({
                       }, 500);
                     }}
                   />
-                  <span className="text-xs text-slate-500 whitespace-nowrap">
+                  <span className="text-xs text-slate-500">
                     {measurementDisplay}
                   </span>
                 </div>
 
-                <Button
+                <Button size="icon" variant="ghost" onClick={increase}>
-                  size="icon"
-                  variant="ghost"
-                  onClick={increase}
-                  className="h-full rounded-none hover:bg-slate-100 px-3"
-                >
                   <Plus className="w-4 h-4" />
                 </Button>
               </div>
@@ -353,6 +352,7 @@ export function ProductCard({
           </div>
         </CardContent>
       </Card>
+
       <FlyingAnimationPortal
         product={product}
         animated={animated}