quantity

src/features/product/ui/Product.tsx

@@ -4,7 +4,6 @@ import { cart_api } from '@/features/cart/lib/api';
 import { product_api } from '@/shared/config/api/product/api';
 import { BASE_URL } from '@/shared/config/api/URLs';
 import { useCartId } from '@/shared/hooks/cartId';
-import formatDate from '@/shared/lib/formatDate';
 import formatPrice from '@/shared/lib/formatPrice';
 import { cn } from '@/shared/lib/utils';
 import { Input } from '@/shared/ui/input';
@@ -24,7 +23,8 @@ const ProductDetail = () => {
   const queryClient = useQueryClient();
   const { cart_id } = useCartId();
 
-  const [quantity, setQuantity] = useState(1);
+  /** ✅ number | string */
+  const [quantity, setQuantity] = useState<number | string>(1);
   const debounceRef = useRef<NodeJS.Timeout | null>(null);
 
   /* ---------------- PRODUCT DETAIL ---------------- */
@@ -54,6 +54,12 @@ const ProductDetail = () => {
 
   const measurementDisplay = data?.meansurement?.name || 'шт.';
 
+  /** ✅ Safe numeric */
+  const numericQty =
+    quantity === '' || quantity === '.' || quantity === ','
+      ? 0
+      : Number(String(quantity).replace(',', '.'));
+
   /* ---------------- HELPERS ---------------- */
   const clampQuantity = (value: number) => {
     if (!maxBalance) return value;
@@ -65,7 +71,7 @@ const ProductDetail = () => {
     return `${qty} ${measurement}`;
   };
 
-  /* ---------------- SYNC CART QUANTITY ---------------- */
+  /* ---------------- SYNC CART ---------------- */
   useEffect(() => {
     if (!data || !cartItems) return;
 
@@ -82,44 +88,49 @@ const ProductDetail = () => {
 
   /* ---------------- DEBOUNCE UPDATE ---------------- */
   useEffect(() => {
-    if (!cart_id || !data || !cartItems || quantity <= 0) return;
+    if (!cart_id || !data || !cartItems) return;
 
     const cartItem = cartItems.data.cart_item.find(
       (i) => Number(i.product.id) === data.id,
     );
 
-    if (!cartItem || cartItem.quantity === quantity) return;
+    if (!cartItem || cartItem.quantity === numericQty) return;
 
     if (debounceRef.current) clearTimeout(debounceRef.current);
 
     debounceRef.current = setTimeout(() => {
-      updateCartItem({
-        cart_item_id: cartItem.id.toString(),
-        body: { quantity },
-      });
+      if (numericQty > 0) {
+        updateCartItem({
+          cart_item_id: cartItem.id.toString(),
+          body: { quantity: numericQty },
+        });
+      }
     }, 500);
 
     return () => {
       if (debounceRef.current) clearTimeout(debounceRef.current);
     };
-  }, [quantity]);
+  }, [numericQty]);
 
-  /* ---------------- ADD TO CART ---------------- */
+  /* ---------------- ADD ---------------- */
   const { mutate: addToCart } = useMutation({
     mutationFn: (body: { product: string; quantity: number; cart: string }) =>
       cart_api.cart_item(body),
+
     onSuccess: (_, variables) => {
       queryClient.refetchQueries({ queryKey: ['cart_items'] });
 
       const measurementName = data?.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 msg =
         (err.response?.data as { detail: string })?.detail || err.message;
@@ -133,6 +144,7 @@ const ProductDetail = () => {
       cart_item_id: string;
       body: { quantity: number };
     }) => cart_api.update_cart_item(payload),
+
     onSuccess: (_, variables) => {
       queryClient.refetchQueries({ queryKey: ['cart_items'] });
 
@@ -148,25 +160,11 @@ const ProductDetail = () => {
     },
   });
 
-  /* ---------------- FAVOURITE ---------------- */
-  const favouriteMutation = useMutation({
-    mutationFn: (id: string) => product_api.favourite(id),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['product_detail'] });
-    },
-    onError: () => {
-      toast.error(t('Tizimga kirilmagan'), {
-        richColors: true,
-        position: 'top-center',
-      });
-    },
-  });
-
   /* ---------------- HANDLERS ---------------- */
   const handleAddToCart = () => {
     if (!data || !cart_id) return;
 
-    const normalizedQty = clampQuantity(quantity);
+    const normalizedQty = clampQuantity(numericQty);
 
     const cartItem = cartItems?.data.cart_item.find(
       (i) => Number(i.product.id) === data.id,
@@ -190,17 +188,23 @@ const ProductDetail = () => {
 
   const handleIncrease = () => {
     setQuantity((q) => {
-      let next = q + STEP;
+      const base = q === '' || q === '.' || q === ',' ? 0 : Number(q);
+      let next = base + STEP;
+
       if (isGram) next = Math.ceil(next / STEP) * STEP;
+
       return next;
     });
   };
 
   const handleDecrease = () => {
     setQuantity((q) => {
-      let next = q - STEP;
+      const base = q === '' || q === '.' || q === ',' ? 0 : Number(q);
+      let next = base - STEP;
+
       if (isGram) next = Math.floor(next / STEP) * STEP;
-      return Math.min(MIN_QTY, next);
+
+      return next <= MIN_QTY ? MIN_QTY : next;
     });
   };
 
@@ -213,11 +217,9 @@ const ProductDetail = () => {
     );
   }
 
-  /* ===================== RENDER ===================== */
   return (
     <div className="custom-container pb-8">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 bg-white p-6 rounded-lg shadow">
-        {/* IMAGE */}
         <div>
           <Image
             width={500}
@@ -235,7 +237,6 @@ const ProductDetail = () => {
           />
         </div>
 
-        {/* INFO */}
         <div>
           <h1 className="text-3xl font-bold mb-2">{data?.name}</h1>
 
@@ -246,7 +247,7 @@ const ProductDetail = () => {
             <span className="text-xl text-gray-500">/{measurementDisplay}</span>
           </div>
 
-          {/* QUANTITY */}
+          {/* ✅ INPUT FIXED */}
           <div className="mb-6">
             <label className="block text-sm font-medium mb-2">
               {t('Miqdor')}
@@ -263,7 +264,14 @@ const ProductDetail = () => {
               <div className="flex items-center gap-2">
                 <Input
                   value={quantity}
-                  onChange={(e) => setQuantity(Number(e.target.value))}
+                  onChange={(e) => {
+                    const v = e.target.value;
+
+                    /** ✅ allow 0 + decimal + comma */
+                    if (!/^\d*([.,]\d*)?$/.test(v)) return;
+
+                    setQuantity(v);
+                  }}
                   className="w-24 text-center"
                 />
                 <span className="text-sm text-gray-500">
@@ -281,10 +289,9 @@ const ProductDetail = () => {
           </div>
 
           <div className="mb-6 text-xl font-semibold">
-            {t('Jami')}: {formatPrice(price * quantity, true)}
+            {t('Jami')}: {formatPrice(price * numericQty, true)}
           </div>
 
-          {/* ACTIONS */}
           <div className="flex gap-3">
             <button
               onClick={handleAddToCart}
@@ -295,7 +302,6 @@ const ProductDetail = () => {
             </button>
 
             <button
-              onClick={() => favouriteMutation.mutate(String(data?.id))}
               className={cn(
                 'p-3 rounded-lg border',
                 data?.liked ? 'border-red-500 bg-red-50' : 'border-gray-300',
@@ -307,15 +313,6 @@ const ProductDetail = () => {
             </button>
           </div>
 
-          {data?.updated_at && data.payment_type === 'cash' && (
-            <div className="bg-yellow-50 border border-yellow-400 text-yellow-800 p-3 mt-4 rounded-md">
-              <p className="text-xs font-medium">
-                {t("Narxi o'zgargan bo'lishi mumkin")} •{' '}
-                {formatDate.format(data.updated_at, 'DD-MM-YYYY')}
-              </p>
-            </div>
-          )}
-
           <div className="grid grid-cols-2 gap-4 mt-6 border-t pt-4">
             <div className="text-center">
               <Truck className="mx-auto mb-1" />