quantity

2026-02-23 09:30:27 +05:00
parent ef55c1ecd8
commit 09290cc352
3 changed files with 220 additions and 183 deletions
--- a/src/features/cart/ui/CartPage.tsx
+++ b/src/features/cart/ui/CartPage.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import ProductBanner from '@/assets/product.png';
 import { cart_api } from '@/features/cart/lib/api';
 import { BASE_URL } from '@/shared/config/api/URLs';
@@ -36,21 +37,28 @@ const CartPage = () => {
    select: (data) => data.data.cart_item,
  });

+  // Haqiqiy raqamlar (hisob-kitob uchun)
  const [quantities, setQuantities] = useState<Record<string, number>>({});
+  // Input ko'rinishi uchun string (nuqta bilan yozish imkonini beradi)
+  const [inputValues, setInputValues] = useState<Record<string, string>>({});
+
  const debounceRef = useRef<Record<string, NodeJS.Timeout | null>>({});

-  // Initial state
+  // Initial quantities
  useEffect(() => {
    if (!cartItems) return;
    const initialQuantities: Record<string, number> = {};
+    const initialInputValues: Record<string, string> = {};
    cartItems.forEach((item) => {
      initialQuantities[item.id] = item.quantity;
+      initialInputValues[item.id] = String(item.quantity);
      debounceRef.current[item.id] = null;
    });
    setQuantities(initialQuantities);
+    setInputValues(initialInputValues);
  }, [cartItems]);

-  // Update cart item mutation
+  // Update mutation
  const { mutate: updateCartItem } = useMutation({
    mutationFn: ({
      body,
@@ -61,14 +69,13 @@ const CartPage = () => {
    }) => cart_api.update_cart_item({ body, cart_item_id }),
    onSuccess: (_, variables) => {
      queryClient.invalidateQueries({ queryKey: ['cart_items', cart_id] });
-
      const item = cartItems?.find(
        (i) => String(i.id) === variables.cart_item_id,
      );
      if (item) {
-        const measurementName = item.product.meansurement?.name || null;
+        const measurementName = item.product.meansurement?.name || 'шт.';
        toast.success(
-          `${t('Miqdor')} ${variables.body.quantity} ${measurementName || 'шт.'} ${t('ga yangilandi')}`,
+          `${t('Miqdor')} ${variables.body.quantity} ${measurementName} ${t('ga yangilandi')}`,
          { richColors: true, position: 'top-center' },
        );
      }
@@ -77,7 +84,7 @@ const CartPage = () => {
      toast.error(err.message, { richColors: true, position: 'top-center' }),
  });

-  // Delete cart item mutation
+  // Delete mutation
  const { mutate: deleteCartItem } = useMutation({
    mutationFn: ({ cart_item_id }: { cart_item_id: string }) =>
      cart_api.delete_cart_item(cart_item_id),
@@ -94,6 +101,51 @@ const CartPage = () => {

  const handleCheckout = () => router.push('/cart/order');

+  const handleQuantityChange = (
+    itemId: number,
+    delta: number = 0,
+    newValue?: number,
+  ) => {
+    setQuantities((prev) => {
+      const item = cartItems?.find((i) => i.id === itemId);
+      if (!item) return prev;
+
+      const isGram = item.product.meansurement?.name?.toLowerCase() === 'gr';
+      const STEP = isGram ? 100 : 1;
+      const MIN_QTY = isGram ? 100 : 0.5;
+
+      let updatedQty: number;
+      if (newValue !== undefined) {
+        updatedQty = newValue;
+      } else {
+        updatedQty = (prev[itemId] ?? MIN_QTY) + delta * STEP;
+        if (updatedQty < MIN_QTY) updatedQty = MIN_QTY;
+      }
+
+      // inputValues ni ham yangilash
+      setInputValues((prevInput) => ({
+        ...prevInput,
+        [itemId]: String(updatedQty),
+      }));
+
+      if (debounceRef.current[itemId])
+        clearTimeout(debounceRef.current[itemId]!);
+
+      debounceRef.current[itemId] = setTimeout(() => {
+        if (updatedQty <= 0) {
+          deleteCartItem({ cart_item_id: itemId.toString() });
+        } else {
+          updateCartItem({
+            body: { quantity: updatedQty },
+            cart_item_id: itemId.toString(),
+          });
+        }
+      }, 500);
+
+      return { ...prev, [itemId]: updatedQty };
+    });
+  };
+
  if (isLoading)
    return (
      <div className="min-h-screen flex items-center justify-center">
@@ -125,53 +177,13 @@ const CartPage = () => {
  const subtotal =
    cartItems.reduce((sum, item) => {
      if (!item.product.prices.length) return sum;
-      const maxPrice = Math.min(
+      const price = Math.min(
        ...item.product.prices.map((p) => Number(p.price)),
      );
-      return sum + maxPrice * (quantities[item.id] || item.quantity);
+      const qty = quantities[item.id] ?? item.quantity;
+      return sum + price * qty;
    }, 0) || 0;

-  const handleQuantityChange = (
-    itemId: number,
-    delta: number = 0,
-    newValue?: number,
-  ) => {
-    setQuantities((prev) => {
-      const item = cartItems?.find((i) => i.id === Number(itemId));
-      if (!item) return prev;
-
-      const isGram = item.product.meansurement?.name?.toLowerCase() === 'gr';
-      const STEP = isGram ? 100 : 1;
-      const MIN_QTY = isGram ? 100 : 1;
-
-      let updatedQty;
-
-      if (newValue !== undefined) {
-        // Input'dan kiritilgan qiymat - minimal limitni qo'llash shart emas
-        updatedQty = newValue;
-      } else {
-        // +/- tugmalar bosilganda - STEP qo'llash va minimal limit
-        updatedQty = (prev[itemId] ?? MIN_QTY) + delta * STEP;
-        if (updatedQty < MIN_QTY) updatedQty = MIN_QTY;
-      }
-
-      // Debounce server update
-      if (debounceRef.current[itemId])
-        clearTimeout(debounceRef.current[itemId]!);
-      debounceRef.current[itemId] = setTimeout(() => {
-        if (updatedQty <= 0)
-          deleteCartItem({ cart_item_id: itemId.toString() });
-        else
-          updateCartItem({
-            body: { quantity: updatedQty },
-            cart_item_id: itemId.toString(),
-          });
-      }, 500);
-
-      return { ...prev, [itemId]: updatedQty };
-    });
-  };
-
  return (
    <div className="custom-container mb-6">
      <div className="mb-6">
@@ -187,6 +199,10 @@ const CartPage = () => {
            {cartItems.map((item, index) => {
              const measurementDisplay =
                item.product.meansurement?.name || 'шт.';
+              const quantity = quantities[item.id] ?? item.quantity;
+              // Input uchun string qiymat (nuqta bilan yozish imkonini beradi)
+              const inputValue = inputValues[item.id] ?? String(item.quantity);
+
              return (
                <div
                  key={item.id}
@@ -198,12 +214,12 @@ const CartPage = () => {
                    onClick={() =>
                      deleteCartItem({ cart_item_id: String(item.id) })
                    }
-                    className="absolute right-2 w-7 h-7 top-2 cursor-pointer"
+                    className="absolute right-2 w-7 h-7 top-2"
                  >
                    <Trash className="size-4" />
                  </Button>

-                  <div className="w-24 h-40 bg-gray-100 rounded-lg flex-shrink-0 overflow-hidden">
+                  <div className="w-24 h-40 bg-gray-100 rounded-lg overflow-hidden">
                    <Image
                      src={
                        item.product.images.length > 0
@@ -213,11 +229,10 @@ const CartPage = () => {
                          : ProductBanner
                      }
                      alt={item.product.name}
-                      width={500}
-                      height={500}
+                      width={300}
+                      height={300}
                      unoptimized
-                      className="object-cover"
-                      style={{ width: '100%', height: '100%' }}
+                      className="object-cover w-full h-full"
                    />
                  </div>

@@ -225,7 +240,8 @@ const CartPage = () => {
                    <h3 className="font-semibold text-lg mb-1">
                      {item.product.name}
                    </h3>
-                    <div className="flex items-center gap-2 mb-3 max-lg:flex-col max-lg:items-start max-lg:gap-1">
+
+                    <div className="flex items-center gap-2 mb-3">
                      <span className="text-blue-600 font-bold text-xl">
                        {formatPrice(
                          Math.min(
@@ -240,36 +256,90 @@ const CartPage = () => {
                    </div>

                    <p className="text-sm text-gray-500 mb-2">
-                      {t('Miqdor')}: {quantities[item.id]} {measurementDisplay}
+                      {t('Miqdor')}: {quantity} {measurementDisplay}
                    </p>

-                    <div className="flex items-center border border-gray-300 rounded-lg w-max">
+                    <div className="flex items-center border rounded-lg w-max">
                      <button
                        onClick={() => handleQuantityChange(item.id, -1)}
-                        className="p-2 cursor-pointer transition rounded-lg hover:bg-gray-50"
+                        className="p-2 hover:bg-gray-50"
                      >
                        <Minus className="w-4 h-4" />
                      </button>

                      <div className="flex items-center gap-1 px-2">
                        <Input
-                          value={quantities[item.id] || ''}
+                          value={inputValue}
                          onChange={(e) => {
-                            const cleaned = e.target.value.replace(/\D/g, '');
-                            const val = cleaned === '' ? 0 : Number(cleaned);
-                            handleQuantityChange(item.id, 0, val);
+                            const v = e.target.value;
+
+                            // Faqat raqamlar va bitta nuqtaga ruxsat (vergul ham)
+                            if (!/^\d*[.,]?\d*$/.test(v)) return;
+
+                            // String sifatida saqlash (nuqta yo'qolmasin)
+                            setInputValues((prev) => ({
+                              ...prev,
+                              [item.id]: v,
+                            }));
+
+                            // Bo'sh yoki faqat nuqta bo'lsa raqamga o'tkazmaymiz
+                            if (v === '' || v === '.' || v === ',') return;
+
+                            const parsed = parseFloat(v.replace(',', '.'));
+                            if (isNaN(parsed)) return;
+
+                            // quantities ni yangilash
+                            setQuantities((prev) => ({
+                              ...prev,
+                              [item.id]: parsed,
+                            }));
+
+                            // Debounce bilan API ga yuborish
+                            if (debounceRef.current[item.id])
+                              clearTimeout(debounceRef.current[item.id]!);
+
+                            debounceRef.current[item.id] = setTimeout(() => {
+                              if (parsed <= 0) {
+                                deleteCartItem({
+                                  cart_item_id: String(item.id),
+                                });
+                              } else {
+                                updateCartItem({
+                                  body: { quantity: parsed },
+                                  cart_item_id: String(item.id),
+                                });
+                              }
+                            }, 500);
+                          }}
+                          onBlur={() => {
+                            // Blur bo'lganda noto'g'ri qiymatlarni tuzatish
+                            const isGram =
+                              item.product.meansurement?.name?.toLowerCase() ===
+                              'gr';
+                            const MIN_QTY = isGram ? 100 : 0.5;
+                            let value = quantities[item.id] ?? item.quantity;
+
+                            if (!value || isNaN(value) || value < MIN_QTY)
+                              value = MIN_QTY;
+
+                            setInputValues((prev) => ({
+                              ...prev,
+                              [item.id]: String(value),
+                            }));
+                            handleQuantityChange(item.id, 0, value);
                          }}
                          type="text"
-                          className="w-14 text-center border-none p-0"
+                          inputMode="decimal"
+                          className="w-16 text-center border-none p-0"
                        />
-                        <span className="text-xs text-gray-500 whitespace-nowrap">
+                        <span className="text-xs text-gray-500">
                          {measurementDisplay}
                        </span>
                      </div>

                      <button
                        onClick={() => handleQuantityChange(item.id, 1)}
-                        className="p-2 cursor-pointer transition rounded-lg hover:bg-gray-50"
+                        className="p-2 hover:bg-gray-50"
                      >
                        <Plus className="w-4 h-4" />
                      </button>
@@ -295,10 +365,8 @@ const CartPage = () => {
                <span className="flex items-center gap-1">
                  <Truck className="w-4 h-4" /> {t('Yetkazib berish')}:
                </span>
-                <span>
-                  <span className="text-green-600 font-semibold">
-                    {t('Bepul')}
-                  </span>
+                <span className="text-green-600 font-semibold">
+                  {t('Bepul')}
                </span>
              </div>
            </div>
@@ -322,7 +390,7 @@ const CartPage = () => {

            <button
              onClick={() => router.push('/')}
-              className="w-full border-2 border-gray-300 cursor-pointer text-gray-700 py-3 rounded-lg font-semibold hover:bg-gray-50 transition flex items-center justify-center gap-2"
+              className="w-full border-2 border-gray-300 text-gray-700 py-3 rounded-lg font-semibold hover:bg-gray-50 transition flex items-center justify-center gap-2"
            >
              <ArrowLeft className="w-5 h-5" /> {t('Xaridni davom ettirish')}
            </button>
--- a/src/features/product/ui/Product.tsx
+++ b/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" />
--- a/src/widgets/categories/ui/product-card.tsx
+++ b/src/widgets/categories/ui/product-card.tsx
@@ -33,33 +33,24 @@ export function ProductCard({
  error?: boolean;
 }) {
  const { setProduct } = useProductStore();
-  const [quantity, setQuantity] = useState<number | ''>(0);
+  const [quantity, setQuantity] = useState<number | string>(0);
  const router = useRouter();
  const queryClient = useQueryClient();
  const t = useTranslations();
  const { cart_id } = useCartId();
-  const [animated, setAnimated] = useState<boolean>(false);
+  const [animated, setAnimated] = useState(false);
  const debounceRef = useRef<NodeJS.Timeout | null>(null);
  const imageRef = useRef<HTMLDivElement>(null);

-  /** ✅ Measurement logic */
+  /** ✅ Measurement */
  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 */
+  /** 🛒 Add */
  const { mutate: addToCart } = useMutation({
    mutationFn: (body: { product: string; quantity: number; cart: string }) =>
      cart_api.cart_item(body),
@@ -69,14 +60,8 @@ export function ProductCard({
      setAnimated(true);

      toast.success(
-        `${getQuantityMessage(
-          variables.quantity,
-          measurementName,
-        )} ${t("savatga qo'shildi")}`,
-        {
-          richColors: true,
-          position: 'top-center',
-        },
+        `${variables.quantity} ${measurementDisplay} ${t("savatga qo'shildi")}`,
+        { richColors: true, position: 'top-center' },
      );
    },

@@ -104,10 +89,6 @@ export function ProductCard({
      queryClient.refetchQueries({ queryKey: ['cart_items'] });
      setAnimated(true);
    },
-
-    onError: (err: AxiosError) => {
-      toast.error(err.message, { richColors: true });
-    },
  });

  /** ❌ Delete */
@@ -119,20 +100,16 @@ export function ProductCard({
      queryClient.refetchQueries({ queryKey: ['cart_items'] });
      setAnimated(true);
    },
-
-    onError: (err: AxiosError) => {
-      toast.error(err.message, { richColors: true });
-    },
  });

-  /** 📦 Cart items */
+  /** 📦 Cart */
  const { data: cartItems } = useQuery({
    queryKey: ['cart_items', cart_id],
    queryFn: () => cart_api.get_cart_items(cart_id!),
    enabled: !!cart_id,
  });

-  /** 🔁 Sync quantity */
+  /** 🔁 Sync */
  useEffect(() => {
    const item = cartItems?.data?.cart_item?.find(
      (item) => Number(item.product.id) === product.id,
@@ -146,15 +123,17 @@ export function ProductCard({
      (item) => Number(item.product.id) === product.id,
    )?.id;

+  const numericQty =
+    quantity === '' || quantity === '.' || quantity === ','
+      ? 0
+      : Number(String(quantity).replace(',', '.'));
+
  /** ➖ Decrease */
  const decrease = (e: MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
-
    if (!cartItems) return;

-    const currentQty = quantity === '' ? 0 : quantity;
-    const newQty = currentQty - step;
-
+    const newQty = numericQty - step;
    const id = getCartItemId();
    if (!id) return;

@@ -176,14 +155,12 @@ export function ProductCard({
  const increase = (e: MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();

-    const currentQty = quantity === '' ? 0 : quantity;
-    const newQty = currentQty + step;
-
-    setQuantity(newQty);
-
+    const newQty = numericQty + step;
    const id = getCartItemId();
    if (!id) return;

+    setQuantity(newQty);
+
    updateCartItem({
      cart_item_id: id.toString(),
      body: { quantity: newQty },
@@ -196,8 +173,6 @@ export function ProductCard({

    onSuccess: () => {
      queryClient.refetchQueries({ queryKey: ['product_list'] });
-      queryClient.refetchQueries({ queryKey: ['list'] });
-      queryClient.refetchQueries({ queryKey: ['all_products'] });
      queryClient.refetchQueries({ queryKey: ['favourite_product'] });
    },

@@ -209,7 +184,7 @@ export function ProductCard({
    },
  });

-  /** ❌ Error state */
+  /** ❌ Error */
  if (error) {
    return (
      <Card className="p-4 rounded-xl">
@@ -238,7 +213,6 @@ export function ProductCard({
                e.stopPropagation();
                favouriteMutation.mutate(String(product.id));
              }}
-              aria-label="liked"
              className="absolute top-2 right-2 z-10 bg-white hover:bg-gray-200 rounded-full p-2 shadow"
            >
              <Heart
@@ -282,14 +256,13 @@ export function ProductCard({
          </div>

          <div className="p-3 sm:p-4 pt-0">
-            {quantity === 0 ? (
+            {typeof quantity === 'number' && quantity === 0 ? (
              <Button
                onClick={(e) => {
                  e.stopPropagation();
-
                  addToCart({
                    product: String(product.id),
-                    quantity: defaultQty, // ✅ 100gr yoki 1 dona
+                    quantity: defaultQty,
                    cart: cart_id!,
                  });
                }}
@@ -312,32 +285,31 @@ export function ProductCard({
                    className="border-none text-center w-16"
                    onChange={(e) => {
                      const v = e.target.value;
-                      if (!/^\d*$/.test(v)) return;
+
+                      /** ✅ Decimal + comma */
+                      if (!/^\d*([.,]\d*)?$/.test(v)) return;

                      if (debounceRef.current)
                        clearTimeout(debounceRef.current);

-                      if (v === '') {
-                        setQuantity('');
-                        return;
-                      }
-
-                      const num = Number(v);
-                      setQuantity(num);
+                      setQuantity(v);

                      const id = getCartItemId();
                      if (!id) return;

-                      if (num <= 0) {
-                        deleteCartItem({ cart_item_id: id.toString() });
-                        return;
-                      }
+                      const num = Number(v.replace(',', '.'));

                      debounceRef.current = setTimeout(() => {
-                        updateCartItem({
-                          cart_item_id: id.toString(),
-                          body: { quantity: num },
-                        });
+                        if (num === 0) {
+                          deleteCartItem({
+                            cart_item_id: id.toString(),
+                          });
+                        } else if (!isNaN(num)) {
+                          updateCartItem({
+                            cart_item_id: id.toString(),
+                            body: { quantity: num },
+                          });
+                        }
                      }, 500);
                    }}
                  />