order status update

src/features/cart/lib/api.ts

@@ -13,7 +13,7 @@ export interface CartItem {
         image: string;
       }[];
       liked: boolean;
-      meansurement: null | string;
+      meansurement: null | { id: number; name: string };
       inventory_id: null | string;
       product_id: string;
       code: string;
@@ -31,6 +31,7 @@ export interface CartItem {
       marketing_group_code: null | string;
       inventory_kinds: { id: number; name: string }[];
       sector_codes: { id: number; code: string }[];
+      balance: number;
       prices: {
         id: number;
         price: string;

src/features/cart/ui/CartPage.tsx

@@ -39,6 +39,12 @@ const CartPage = () => {
   const [quantities, setQuantities] = useState<Record<string, string>>({});
   const debounceRef = useRef<Record<string, NodeJS.Timeout | null>>({});
 
+  // O'lchov birligini formatlash uchun yordamchi funksiya
+  const getQuantityMessage = (qty: number, measurement: string | null) => {
+    if (!measurement) return `${qty} dona`;
+    return `${qty} ${measurement}`;
+  };
+
   useEffect(() => {
     if (!cartItems) return;
     const initialQuantities: Record<string, string> = {};
@@ -57,8 +63,24 @@ const CartPage = () => {
       body: { quantity: number };
       cart_item_id: string;
     }) => cart_api.update_cart_item({ body, cart_item_id }),
-    onSuccess: () =>
+    onSuccess: (_, variables) => {
-      queryClient.invalidateQueries({ queryKey: ['cart_items', cart_id] }),
+      queryClient.invalidateQueries({ queryKey: ['cart_items', cart_id] });
+
+      // Qaysi mahsulot yangilanganini topish
+      const item = cartItems?.find(
+        (i) => String(i.id) === variables.cart_item_id,
+      );
+      if (item) {
+        const measurementName = item.product.meansurement?.name || null;
+        toast.success(
+          `${t('Miqdor')} ${getQuantityMessage(variables.body.quantity, measurementName)} ${t('ga yangilandi')}`,
+          {
+            richColors: true,
+            position: 'top-center',
+          },
+        );
+      }
+    },
     onError: (err: AxiosError) =>
       toast.error(err.message, { richColors: true, position: 'top-center' }),
   });
@@ -66,8 +88,13 @@ const CartPage = () => {
   const { mutate: deleteCartItem } = useMutation({
     mutationFn: ({ cart_item_id }: { cart_item_id: string }) =>
       cart_api.delete_cart_item(cart_item_id),
-    onSuccess: () =>
+    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['cart_items', cart_id] }),
+      queryClient.invalidateQueries({ queryKey: ['cart_items', cart_id] });
+      toast.success(t("Savatdan o'chirildi"), {
+        richColors: true,
+        position: 'top-center',
+      });
+    },
     onError: (err: AxiosError) =>
       toast.error(err.message, { richColors: true, position: 'top-center' }),
   });
@@ -104,15 +131,14 @@ const CartPage = () => {
 
   const subtotal =
     cartItems?.reduce((sum, item) => {
-      if (item.product.prices.length === 0) return sum; // narx yo'q bo'lsa qo'shmaymiz
+      if (item.product.prices.length === 0) return sum;
 
-      // Eng yuqori narxni olish
       const maxPrice = Math.max(
         ...item.product.prices.map((p) => Number(p.price)),
       );
 
       return sum + maxPrice * item.quantity;
-    }, 0) || 0; // cartItems bo'sh bo'lsa 0 qaytaradi
+    }, 0) || 0;
 
   const handleQuantityChange = (itemId: string, value: number) => {
     setQuantities((prev) => ({
@@ -143,107 +169,125 @@ const CartPage = () => {
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2">
           <div className="bg-white rounded-lg shadow-md overflow-hidden">
-            {cartItems.map((item, index) => (
+            {cartItems.map((item, index) => {
-              <div
+              const measurementDisplay =
-                key={item.id}
+                item.product.meansurement?.name || 'шт.';
-                className={`p-6 flex relative gap-4 ${
+
-                  index !== cartItems.length - 1 ? 'border-b' : ''
+              return (
-                }`}
+                <div
-              >
+                  key={item.id}
-                <Button
+                  className={`p-6 flex relative gap-4 ${
-                  variant="destructive"
+                    index !== cartItems.length - 1 ? 'border-b' : ''
-                  size="icon"
+                  }`}
-                  onClick={() =>
-                    deleteCartItem({ cart_item_id: String(item.id) })
-                  }
-                  className="absolute right-2 w-7 h-7 top-2 cursor-pointer"
                 >
-                  <Trash className="size-4" />
+                  <Button
-                </Button>
+                    variant="destructive"
-
+                    size="icon"
-                <div className="w-24 h-40 bg-gray-100 rounded-lg flex-shrink-0 overflow-hidden">
+                    onClick={() =>
-                  <Image
+                      deleteCartItem({ cart_item_id: String(item.id) })
-                    src={
-                      item.product.images.length > 0
-                        ? item.product.images[0].image.includes(BASE_URL)
-                          ? item.product.images[0].image
-                          : BASE_URL + item.product.images[0].image
-                        : ProductBanner
                     }
-                    alt={item.product.name}
+                    className="absolute right-2 w-7 h-7 top-2 cursor-pointer"
-                    width={500}
+                  >
-                    height={500}
+                    <Trash className="size-4" />
-                    unoptimized
+                  </Button>
-                    className="object-cover"
-                    style={{ width: '100%', height: '100%' }}
-                  />
-                </div>
 
-                <div className="flex-1">
+                  <div className="w-24 h-40 bg-gray-100 rounded-lg flex-shrink-0 overflow-hidden">
-                  <h3 className="font-semibold text-lg mb-1">
+                    <Image
-                    {item.product.name}
+                      src={
-                  </h3>
+                        item.product.images.length > 0
-                  <div className="flex items-center gap-2 mb-3 max-lg:flex-col max-lg:items-start max-lg:gap-1">
+                          ? item.product.images[0].image.includes(BASE_URL)
-                    <span className="text-blue-600 font-bold text-xl">
+                            ? item.product.images[0].image
-                      {formatPrice(
+                            : BASE_URL + item.product.images[0].image
-                        item.product.prices.length !== 0
+                          : ProductBanner
-                          ? Math.max(
-                              ...item.product.prices.map((e) =>
-                                Number(e.price),
-                              ),
-                            )
-                          : 0,
-                        true,
-                      )}
-                    </span>
-                  </div>
-
-                  <div className="flex items-center border border-gray-300 rounded-lg w-max">
-                    <button
-                      onClick={() =>
-                        handleQuantityChange(
-                          String(item.id),
-                          Number(quantities[item.id]) - 1,
-                        )
                       }
-                      className="p-2 cursor-pointer transition rounded-lg"
+                      alt={item.product.name}
-                    >
+                      width={500}
-                      <Minus className="w-4 h-4" />
+                      height={500}
-                    </button>
+                      unoptimized
-
+                      className="object-cover"
-                    <Input
+                      style={{ width: '100%', height: '100%' }}
-                      value={quantities[item.id]}
-                      onChange={(e) => {
-                        const val = e.target.value.replace(/\D/g, ''); // faqat raqam
-                        setQuantities((prev) => ({
-                          ...prev,
-                          [item.id]: val,
-                        }));
-
-                        // Debounce bilan update
-                        const valNum = Number(val);
-                        if (!isNaN(valNum))
-                          handleQuantityChange(String(item.id), valNum);
-                      }}
-                      type="text"
-                      className="w-16 text-center"
                     />
+                  </div>
 
-                    <button
+                  <div className="flex-1">
-                      onClick={() =>
+                    <h3 className="font-semibold text-lg mb-1">
-                        handleQuantityChange(
+                      {item.product.name}
-                          String(item.id),
+                    </h3>
-                          Number(quantities[item.id]) + 1,
+                    <div className="flex items-center gap-2 mb-3 max-lg:flex-col max-lg:items-start max-lg:gap-1">
-                        )
+                      <span className="text-blue-600 font-bold text-xl">
-                      }
+                        {formatPrice(
-                      className="p-2 cursor-pointer transition rounded-lg"
+                          item.product.prices.length !== 0
-                    >
+                            ? Math.max(
-                      <Plus className="w-4 h-4" />
+                                ...item.product.prices.map((e) =>
-                    </button>
+                                  Number(e.price),
+                                ),
+                              )
+                            : 0,
+                          true,
+                        )}
+                      </span>
+                      <span className="text-sm text-gray-500">
+                        /{measurementDisplay}
+                      </span>
+                    </div>
+
+                    {/* O'lchov ko'rsatkichi */}
+                    <p className="text-sm text-gray-500 mb-2">
+                      {t('Miqdor')}: {quantities[item.id]} {measurementDisplay}
+                    </p>
+
+                    <div className="flex items-center border border-gray-300 rounded-lg w-max">
+                      <button
+                        onClick={() =>
+                          handleQuantityChange(
+                            String(item.id),
+                            Number(quantities[item.id]) - 1,
+                          )
+                        }
+                        className="p-2 cursor-pointer transition rounded-lg 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]}
+                          onChange={(e) => {
+                            const val = e.target.value.replace(/\D/g, '');
+                            const valNum = Number(val);
+
+                            setQuantities((prev) => ({
+                              ...prev,
+                              [item.id]: val,
+                            }));
+
+                            if (!isNaN(valNum))
+                              handleQuantityChange(String(item.id), valNum);
+                          }}
+                          type="text"
+                          className="w-14 text-center border-none p-0"
+                        />
+                        <span className="text-xs text-gray-500 whitespace-nowrap">
+                          {measurementDisplay}
+                        </span>
+                      </div>
+
+                      <button
+                        onClick={() =>
+                          handleQuantityChange(
+                            String(item.id),
+                            Number(quantities[item.id]) + 1,
+                          )
+                        }
+                        className="p-2 cursor-pointer transition rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                      >
+                        <Plus className="w-4 h-4" />
+                      </button>
+                    </div>
                   </div>
                 </div>
-              </div>
+              );
-            ))}
+            })}
           </div>
         </div>
 

src/features/cart/ui/OrderPage.tsx

@@ -298,7 +298,7 @@ const OrderPage = () => {
             room_code: process.env.NEXT_PUBLIC_ROOM_CODE!,
             deal_time: formatDate.format(new Date(), 'DD.MM.YYYY'),
             robot_code: process.env.NEXT_PUBLIC_ROBOT_CODE!,
-            status: 'B#N',
+            status: 'D',
             sales_manager_code: process.env.NEXT_PUBLIC_SALES_MANAGER_CODE!,
             person_code: user?.username,
             currency_code: '860',

src/features/product/ui/Product.tsx

@@ -48,6 +48,12 @@ const ProductDetail = () => {
   const [selectedImage, setSelectedImage] = useState(0);
   const debounceRef = useRef<NodeJS.Timeout | null>(null);
 
+  // O'lchov birligini formatlash uchun yordamchi funksiya
+  const getQuantityMessage = (qty: number, measurement: string | null) => {
+    if (!measurement) return `${qty} dona`;
+    return `${qty} ${measurement}`;
+  };
+
   /* ---------------- CART ITEMS ---------------- */
   const { data: cartItems } = useQuery({
     queryKey: ['cart_items', cart_id],
@@ -72,7 +78,8 @@ const ProductDetail = () => {
 
   /* ---------------- DERIVED DATA ---------------- */
   const price = Number(data?.prices?.[0]?.price || 0);
-  const maxBalance = data?.balance ?? 0; // <-- balance limit
+  const maxBalance = data?.balance ?? 0;
+  const measurementDisplay = data?.meansurement?.name || 'шт.';
 
   /* ---------------- SYNC CART QUANTITY ---------------- */
   useEffect(() => {
@@ -113,9 +120,16 @@ const ProductDetail = () => {
   const { mutate: addToCart } = useMutation({
     mutationFn: (body: { product: string; quantity: number; cart: string }) =>
       cart_api.cart_item(body),
-    onSuccess: () => {
+    onSuccess: (_, variables) => {
       queryClient.refetchQueries({ queryKey: ['cart_items'] });
-      toast.success(t("Mahsulot savatga qo'shildi"), { richColors: true });
+      const measurementName = data?.meansurement?.name || null;
+      toast.success(
+        `${getQuantityMessage(variables.quantity, measurementName)} ${t("savatga qo'shildi")}`,
+        {
+          richColors: true,
+          position: 'top-center',
+        },
+      );
     },
     onError: (err: AxiosError) => {
       const msg =
@@ -129,7 +143,17 @@ const ProductDetail = () => {
       cart_item_id: string;
       body: { quantity: number };
     }) => cart_api.update_cart_item(payload),
-    onSuccess: () => queryClient.refetchQueries({ queryKey: ['cart_items'] }),
+    onSuccess: (_, variables) => {
+      queryClient.refetchQueries({ queryKey: ['cart_items'] });
+      const measurementName = data?.meansurement?.name || null;
+      toast.success(
+        `${t('Miqdor')} ${getQuantityMessage(variables.body.quantity, measurementName)} ${t('ga yangilandi')}`,
+        {
+          richColors: true,
+          position: 'top-center',
+        },
+      );
+    },
   });
 
   /* ---------------- FAVOURITE ---------------- */
@@ -149,25 +173,12 @@ const ProductDetail = () => {
 
   /* ---------------- HANDLERS ---------------- */
   const handleAddToCart = () => {
-    if (quantity >= maxBalance) {
-      toast.warning(t(`only_available`, { maxBalance }), {
-        richColors: true,
-        position: 'top-center',
-      });
-      return;
-    }
     if (!data || !cart_id) return;
 
     const cartItem = cartItems?.data.cart_item.find(
       (i) => Number(i.product.id) === data.id,
     );
 
-    if (quantity > maxBalance) {
-      toast.error(t(`Faqat ${maxBalance} dona mavjud`), { richColors: true });
-      setQuantity(maxBalance);
-      return;
-    }
-
     if (cartItem) {
       updateCartItem({
         cart_item_id: cartItem.id.toString(),
@@ -183,13 +194,6 @@ const ProductDetail = () => {
   };
 
   const handleIncrease = () => {
-    if (quantity >= maxBalance) {
-      toast.warning(t(`Faqat ${maxBalance} dona mavjud`), {
-        richColors: true,
-        position: 'top-center',
-      });
-      return;
-    }
     setQuantity((q) => q + 1);
   };
 
@@ -281,40 +285,65 @@ const ProductDetail = () => {
         {/* INFO */}
         <div>
           <h1 className="text-3xl font-bold mb-2">{data?.name}</h1>
-          <div className="text-4xl font-bold text-blue-600 mb-4">
+
-            {formatPrice(price, true)}
+          {/* Narx va o'lchov birligi */}
+          <div className="flex items-baseline gap-2 mb-4">
+            <span className="text-4xl font-bold text-blue-600">
+              {formatPrice(price, true)}
+            </span>
+            <span className="text-xl text-gray-500">/{measurementDisplay}</span>
           </div>
+
           <p className="text-gray-600 mb-6">{data?.short_name}</p>
 
           {/* QUANTITY */}
-          <div className="flex items-center gap-4 mb-6">
+          <div className="mb-6">
-            <button onClick={handleDecrease} className="p-2 border rounded">
+            <label className="block text-sm font-medium mb-2">
-              <Minus />
+              {t('Miqdor')}
-            </button>
+            </label>
+            <div className="flex items-center gap-4">
+              <button
+                onClick={handleDecrease}
+                className="p-2 border rounded hover:bg-gray-50"
+              >
+                <Minus />
+              </button>
 
-            <Input
+              <div className="flex items-center gap-2">
-              value={quantity}
+                <Input
-              onChange={(e) => {
+                  value={quantity}
-                let v = Number(e.target.value);
+                  onChange={(e) => {
-                if (v < 1) v = 1;
+                    let v = Number(e.target.value);
-                if (v > maxBalance) {
+                    if (v < 1) v = 1;
-                  toast.warning(t(`Faqat ${maxBalance} dona mavjud`), {
+                    if (v > maxBalance) {
-                    richColors: true,
+                      toast.warning(
-                    position: 'top-center',
+                        `${t('Maksimal')} ${maxBalance} ${measurementDisplay}`,
-                  });
+                        {
-                  v = maxBalance;
+                          richColors: true,
-                }
+                          position: 'top-center',
-                setQuantity(v);
+                        },
-              }}
+                      );
-              className="w-16 text-center"
+                      v = maxBalance;
-            />
+                    }
+                    setQuantity(v);
+                  }}
+                  className="w-20 text-center"
+                />
+                <span className="text-sm text-gray-500">
+                  {measurementDisplay}
+                </span>
+              </div>
 
-            <button onClick={handleIncrease} className="p-2 border rounded">
+              <button
-              <Plus />
+                onClick={handleIncrease}
-            </button>
+                className="p-2 border rounded hover:bg-gray-50"
+              >
+                <Plus />
+              </button>
+            </div>
           </div>
 
-          <div className="mb-6 font-semibold">
+          <div className="mb-6 text-xl font-semibold">
             {t('Jami')}: {formatPrice(price * quantity, true)}
           </div>
 
@@ -322,7 +351,7 @@ const ProductDetail = () => {
           <div className="flex gap-3 mb-6">
             <button
               onClick={handleAddToCart}
-              className="flex-1 bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg flex justify-center items-center gap-2"
+              className="flex-1 bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg flex justify-center items-center gap-2 transition-colors"
             >
               <ShoppingCart />
               {t('Savatga')}
@@ -330,8 +359,10 @@ const ProductDetail = () => {
 
             <button
               onClick={() => favouriteMutation.mutate(String(data?.id))}
-              className={`p-3 rounded-lg border ${
+              className={`p-3 rounded-lg border transition-colors ${
-                data?.liked ? 'border-red-500 bg-red-50' : 'border-gray-300'
+                data?.liked
+                  ? 'border-red-500 bg-red-50 hover:bg-red-100'
+                  : 'border-gray-300 hover:bg-gray-50'
               }`}
             >
               <Heart
@@ -339,7 +370,8 @@ const ProductDetail = () => {
               />
             </button>
           </div>
-          {/* IMPROVED UPDATED_AT WARNING */}
+
+          {/* UPDATED_AT WARNING */}
           {data?.updated_at && data.payment_type === 'cash' && (
             <div className="bg-yellow-50 border border-yellow-400 text-yellow-800 p-3 mb-4 rounded-md">
               <p className="text-xs font-medium">
@@ -352,21 +384,12 @@ const ProductDetail = () => {
           <div className={cn('grid gap-4 mt-6 border-t pt-4', 'grid-cols-2')}>
             <div className="text-center">
               <Truck className="mx-auto mb-1" />
-              {t('Bepul yetkazib berish')}
+              <p className="text-sm">{t('Bepul yetkazib berish')}</p>
             </div>
             <div className="text-center">
               <Shield className="mx-auto mb-1" />
-              {t('Kafolat')}
+              <p className="text-sm">{t('Kafolat')}</p>
             </div>
-            {/* {data?.payment_type && (
-              <div className="text-center">
-                <Banknote className="mx-auto mb-1" size={28} />
-
-                {data.payment_type === 'cash'
-                  ? t('Naqd bilan olinadi')
-                  : t("Pul o'tkazish yo'li bilan olinadi")}
-              </div>
-            )} */}
           </div>
         </div>
       </div>

src/shared/config/api/product/type.ts

@@ -12,7 +12,10 @@ export interface ProductListResult {
   id: number;
   images: { id: number; image: string }[];
   liked: boolean;
-  meansurement: null | string;
+  meansurement: {
+    id: number;
+    name: string;
+  } | null;
   inventory_id: null | string;
   product_id: string;
   code: string;
@@ -99,7 +102,10 @@ export interface FavouriteProductRes {
   id: number;
   images: { id: number; image: string }[];
   liked: boolean;
-  meansurement: null | string;
+  meansurement: {
+    id: number;
+    name: string;
+  } | null;
   inventory_id: null | string;
   product_id: string;
   code: string;

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

@@ -18,7 +18,7 @@ import { Input } from '@/shared/ui/input';
 import { FlyingAnimationPortal } from '@/widgets/animation/FlyingAnimationPortal';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { Heart, Minus, Plus, ShoppingCart } from 'lucide-react';
+import { Heart, Minus, Plus } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
 import { MouseEvent, useEffect, useRef, useState } from 'react';
@@ -42,12 +42,28 @@ export function ProductCard({
   const debounceRef = useRef<NodeJS.Timeout | null>(null);
   const imageRef = useRef<HTMLDivElement>(null);
 
+  // O'lchov birligini formatlash uchun yordamchi funksiya
+  const getQuantityMessage = (qty: number, measurement: string | null) => {
+    if (!measurement) return `${qty} dona`;
+    return `${qty} ${measurement}`;
+  };
+
   const { mutate: addToCart } = useMutation({
     mutationFn: (body: { product: string; quantity: number; cart: string }) =>
       cart_api.cart_item(body),
-    onSuccess: () => {
+    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")}`,
+        {
+          richColors: true,
+          position: 'top-center',
+        },
+      );
     },
     onError: (err: AxiosError) => {
       const detail = (err.response?.data as { detail: string }).detail;
@@ -57,7 +73,6 @@ export function ProductCard({
       });
     },
   });
-  const maxBalance = product.balance ?? 0;
 
   const { mutate: updateCartItem } = useMutation({
     mutationFn: ({
@@ -158,13 +173,6 @@ export function ProductCard({
 
     const current = quantity === '' ? 0 : quantity;
 
-    if (current >= maxBalance) {
-      toast.warning(t(`Faqat ${maxBalance} dona mavjud`), {
-        richColors: true,
-      });
-      return;
-    }
-
     const newQty = current + 1;
     setQuantity(newQty);
 
@@ -181,13 +189,16 @@ export function ProductCard({
     return (
       <Card className="p-4 rounded-xl">
         <Alert variant="destructive">
-          <AlertTitle>Xatolik</AlertTitle>
+          <AlertTitle>{t('Xatolik')}</AlertTitle>
-          <AlertDescription>{t('Mahsulotni yuklab bo‘lmadi')}</AlertDescription>
+          <AlertDescription>{t("Mahsulotni yuklab bo'lmadi")}</AlertDescription>
         </Alert>
       </Card>
     );
   }
 
+  // O'lchov birligini ko'rsatish
+  const measurementDisplay = product.meansurement?.name || 'шт.';
+
   return (
     <>
       <Card
@@ -200,12 +211,6 @@ export function ProductCard({
       >
         <CardContent className="p-0 flex flex-col h-full">
           <div className="relative overflow-hidden">
-            {/* {product. > 0 && (
-            <div className="absolute top-2 left-2 z-10 bg-orange-500 text-white px-2 py-0.5 rounded-full text-xs sm:text-sm font-bold">
-              -{product.discount}%
-            </div>
-          )} */}
-
             <Button
               onClick={(e) => {
                 e.stopPropagation();
@@ -240,117 +245,108 @@ export function ProductCard({
             </div>
           </div>
 
-          <div className="p-3 sm:p-4 space-y-1 flex-1">
+          <div className="p-3 sm:p-4 space-y-2 flex-1">
-            {/* <div className="flex items-center gap-2">
+            {/* Narx va o'lchov birligi */}
-            <Star className="w-3.5 h-3.5 sm:w-4 sm:h-4 fill-orange-400 text-orange-400" />
+            <div className="flex items-baseline gap-1">
-            <span className="text-xs sm:text-sm font-semibold text-orange-600">
+              {product.prices.length > 0 && (
-              {product.rating}
+                <>
-            </span>
+                  <p className="text-lg sm:text-xl font-bold text-slate-900">
-          </div> */}
+                    {formatPrice(
+                      Math.max(...product.prices.map((p) => Number(p.price))),
+                      true,
+                    )}
+                    <span className="text-md text-slate-500 font-medium ml-1">
+                      /{measurementDisplay}
+                    </span>
+                  </p>
+                </>
+              )}
+            </div>
 
-            <h3 className="text-sm sm:text-base font-semibold text-slate-800 line-clamp-1">
+            <h3 className="text-sm sm:text-base font-medium text-slate-800 line-clamp-2">
               {product.name}
             </h3>
-
-            <div>
-              {product.prices.length > 0 && (
-                <span className="text-lg sm:text-xl font-bold text-green-600">
-                  {formatPrice(
-                    Math.max(...product.prices.map((p) => Number(p.price))),
-                    true,
-                  )}
-                </span>
-              )}
-
-              {/* {product. && (
-              <div className="text-xs sm:text-sm text-slate-400 line-through">
-                {formatPrice(product.oldPrice, true)}
-              </div>
-            )} */}
-            </div>
           </div>
-          <div className="p-4 pt-0">
+
+          <div className="p-3 sm:p-4 pt-0">
             {quantity === 0 ? (
               <Button
-                disabled={maxBalance <= 0}
                 onClick={(e) => {
                   e.stopPropagation();
 
-                  if (maxBalance <= 0) {
-                    toast.error(t('Mahsulot mavjud emas'));
-                    return;
-                  }
-
                   addToCart({
                     product: String(product.id),
                     quantity: 1,
                     cart: cart_id!,
                   });
                 }}
-                className="w-full bg-green-600"
+                className="w-full bg-white hover:bg-slate-50 text-slate-700 border border-slate-300 rounded-lg h-10 font-medium"
               >
-                <ShoppingCart className="w-4 h-4 mr-1" />
                 {t('Savatga')}
               </Button>
             ) : (
               <div
                 onClick={(e) => e.stopPropagation()}
-                className="flex items-center justify-between border border-green-500 rounded-lg h-10"
+                className="flex items-center justify-between bg-white border border-slate-300 rounded-lg h-10 overflow-hidden"
               >
-                <Button size="icon" variant="ghost" onClick={decrease}>
+                <Button
-                  <Minus />
+                  size="icon"
+                  variant="ghost"
+                  onClick={decrease}
+                  className="h-full rounded-none hover:bg-slate-100 px-3"
+                >
+                  <Minus className="w-4 h-4" />
                 </Button>
 
-                <Input
+                <div className="flex items-center gap-1 px-2">
-                  value={quantity}
+                  <Input
-                  className="border-none text-center"
+                    value={quantity}
-                  onChange={(e) => {
+                    className="border-none text-center w-12 p-0 h-8 text-sm font-medium"
-                    const v = e.target.value;
+                    onChange={(e) => {
-                    if (!/^\d*$/.test(v)) return;
+                      const v = e.target.value;
+                      if (!/^\d*$/.test(v)) return;
 
-                    if (debounceRef.current) {
+                      if (debounceRef.current) {
-                      clearTimeout(debounceRef.current);
+                        clearTimeout(debounceRef.current);
-                    }
+                      }
 
-                    if (v === '') {
+                      if (v === '') {
-                      setQuantity('');
+                        setQuantity('');
-                      return;
+                        return;
-                    }
+                      }
 
-                    let num = Number(v);
+                      const num = Number(v);
-                    if (num > maxBalance) {
-                      num = maxBalance;
-                      toast.warning(t(`Maksimal ${maxBalance} dona`), {
-                        richColors: true,
-                      });
-                    }
 
-                    setQuantity(num);
+                      setQuantity(num);
 
-                    const id = getCartItemId();
+                      const id = getCartItemId();
-                    if (!id) return;
+                      if (!id) return;
 
-                    if (num === 0) {
+                      if (num === 0) {
-                      deleteCartItem({ cart_item_id: id.toString() });
+                        deleteCartItem({ cart_item_id: id.toString() });
-                      return;
+                        return;
-                    }
+                      }
 
-                    debounceRef.current = setTimeout(() => {
+                      debounceRef.current = setTimeout(() => {
-                      updateCartItem({
+                        updateCartItem({
-                        cart_item_id: id.toString(),
+                          cart_item_id: id.toString(),
-                        body: { quantity: num },
+                          body: { quantity: num },
-                      });
+                        });
-                    }, 500);
+                      }, 500);
-                  }}
+                    }}
-                />
+                  />
+                  <span className="text-xs text-slate-500 whitespace-nowrap">
+                    {measurementDisplay}
+                  </span>
+                </div>
 
                 <Button
                   size="icon"
                   variant="ghost"
                   onClick={increase}
-                  disabled={Number(quantity) >= maxBalance}
+                  className="h-full rounded-none hover:bg-slate-100 px-3"
                 >
-                  <Plus />
+                  <Plus className="w-4 h-4" />
                 </Button>
               </div>
             )}