complated

src/features/product/ui/Product.tsx

@@ -4,20 +4,32 @@ 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 { Button } from '@/shared/ui/button';
 import {
   Carousel,
+  CarouselApi,
   CarouselContent,
   CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
 } from '@/shared/ui/carousel';
 import { Input } from '@/shared/ui/input';
 import { Skeleton } from '@/shared/ui/skeleton';
 import { ProductCard } from '@/widgets/categories/ui/product-card';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { Heart, Minus, Plus, Shield, ShoppingCart, Truck } from 'lucide-react';
+import {
+  Banknote,
+  ChevronLeft,
+  ChevronRight,
+  Heart,
+  Minus,
+  Plus,
+  Shield,
+  ShoppingCart,
+  Truck,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
 import { useParams } from 'next/navigation';
@@ -29,6 +41,9 @@ const ProductDetail = () => {
   const { product } = useParams<{ product: string }>();
   const queryClient = useQueryClient();
   const { cart_id } = useCartId();
+  const [api, setApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
 
   const [quantity, setQuantity] = useState(1);
   const [selectedImage, setSelectedImage] = useState(0);
@@ -58,6 +73,7 @@ const ProductDetail = () => {
 
   /* ---------------- DERIVED DATA ---------------- */
   const price = Number(data?.prices?.[0]?.price || 0);
+  const maxBalance = data?.balance ?? 0; // <-- balance limit
 
   /* ---------------- SYNC CART QUANTITY ---------------- */
   useEffect(() => {
@@ -134,12 +150,25 @@ 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(),
@@ -154,6 +183,43 @@ const ProductDetail = () => {
     }
   };
 
+  const handleIncrease = () => {
+    if (quantity >= maxBalance) {
+      toast.warning(t(`Faqat ${maxBalance} dona mavjud`), {
+        richColors: true,
+        position: 'top-center',
+      });
+      return;
+    }
+    setQuantity((q) => q + 1);
+  };
+
+  const handleDecrease = () => {
+    setQuantity((q) => Math.max(1, q - 1));
+  };
+
+  /* ---------------- CAROUSEL ---------------- */
+  useEffect(() => {
+    if (!api) return;
+
+    const updateButtons = () => {
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    };
+
+    updateButtons();
+    api.on('select', updateButtons);
+    api.on('reInit', updateButtons);
+
+    return () => {
+      api.off('select', updateButtons);
+      api.off('reInit', updateButtons);
+    };
+  }, [api]);
+
+  const scrollPrev = () => api?.scrollPrev();
+  const scrollNext = () => api?.scrollNext();
+
   /* ---------------- LOADING ---------------- */
   if (isLoading) {
     return (
@@ -216,41 +282,51 @@ 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)}
           </div>
-
           <p className="text-gray-600 mb-6">{data?.short_name}</p>
 
-          <div className="grid grid-cols-2 gap-4 mb-6">
-            <div>
-              <span className="text-gray-500">Kategoriya:</span>
-              <p className="font-semibold">{data?.groups[0].name}</p>
-            </div>
+          {/* IMPROVED UPDATED_AT WARNING */}
+          {data?.updated_at && (
+            <div className="bg-yellow-50 border-2 border-yellow-500 text-yellow-900 p-4 mb-6 rounded-lg shadow-sm">
+              <p className="text-base font-bold mb-2 flex items-center gap-2">
+                <span className="text-yellow-600">⚠️</span>
+                {t("Diqqat! Mahsulot narxi o'zgargan bo'lishi mumkin")}
+              </p>
+              <p className="text-sm font-medium text-gray-700">
+                {t("So'nggi yangilanish:")}{' '}
+                <span className="font-semibold text-gray-900">
+                  {formatDate.format(data.updated_at, 'DD-MM-YYYY')}
+                </span>
+              </p>
             </div>
+          )}
 
+          {/* QUANTITY */}
           <div className="flex items-center gap-4 mb-6">
-            <button
-              onClick={() => setQuantity((q) => Math.max(1, q - 1))}
-              className="p-2 border rounded"
-            >
+            <button onClick={handleDecrease} className="p-2 border rounded">
               <Minus />
             </button>
 
             <Input
               value={quantity}
               onChange={(e) => {
-                const v = Number(e.target.value);
-                if (v > 0) setQuantity(v);
+                let v = Number(e.target.value);
+                if (v < 1) v = 1;
+                if (v > maxBalance) {
+                  toast.warning(t(`Faqat ${maxBalance} dona mavjud`), {
+                    richColors: true,
+                    position: 'top-center',
+                  });
+                  v = maxBalance;
+                }
+                setQuantity(v);
               }}
               className="w-16 text-center"
             />
 
-            <button
-              onClick={() => setQuantity((q) => q + 1)}
-              className="p-2 border rounded"
-            >
+            <button onClick={handleIncrease} className="p-2 border rounded">
               <Plus />
             </button>
           </div>
@@ -280,9 +356,12 @@ const ProductDetail = () => {
               />
             </button>
           </div>
-
-          {/* FEATURES */}
-          <div className="grid grid-cols-2 gap-4 mt-6 border-t pt-4">
+          <div
+            className={cn(
+              'grid gap-4 mt-6 border-t pt-4',
+              data?.payment_type ? 'grid-cols-3' : 'grid-cols-2',
+            )}
+          >
             <div className="text-center">
               <Truck className="mx-auto mb-1" />
               {t('Bepul yetkazib berish')}
@@ -291,19 +370,41 @@ const ProductDetail = () => {
               <Shield className="mx-auto mb-1" />
               {t('Kafolat')}
             </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>
 
-      {/* RELATED */}
-      <div className="mt-10 bg-white p-6 rounded-lg shadow">
+      {/* RELATED PRODUCTS */}
+      <div className="mt-10 bg-white p-6 rounded-lg shadow relative">
+        <Button
+          onClick={scrollPrev}
+          disabled={!canScrollPrev}
+          className="absolute top-1/2 left-0 -translate-x-1/2 z-20 rounded-full"
+          size={'icon'}
+          variant={'outline'}
+        >
+          <ChevronLeft size={32} />
+        </Button>
+
         <h2 className="text-2xl font-bold mb-4">{t("O'xshash mahsulotlar")}</h2>
 
-        <Carousel>
+        <Carousel setApi={setApi}>
           <CarouselContent>
             {recLoad &&
               Array.from({ length: 6 }).map((_, i) => (
-                <CarouselItem key={i} className="basis-1/5">
+                <CarouselItem
+                  key={i}
+                  className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
+                >
                   <Skeleton className="h-60 w-full" />
                 </CarouselItem>
               ))}
@@ -311,15 +412,25 @@ const ProductDetail = () => {
             {recomendation
               ?.filter((p) => p.state === 'A')
               .map((p) => (
-                <CarouselItem key={p.id} className="basis-1/5">
+                <CarouselItem
+                  key={p.id}
+                  className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
+                >
                   <ProductCard product={p} />
                 </CarouselItem>
               ))}
           </CarouselContent>
-
-          <CarouselPrevious />
-          <CarouselNext />
         </Carousel>
+
+        <Button
+          onClick={scrollNext}
+          disabled={!canScrollNext}
+          className="absolute top-1/2 -translate-x-1/2 z-20 -right-10 rounded-full"
+          size={'icon'}
+          variant={'outline'}
+        >
+          <ChevronRight size={32} />
+        </Button>
       </div>
     </div>
   );

src/features/profile/lib/api.ts

@@ -3,13 +3,58 @@ import { API_URLS } from '@/shared/config/api/URLs';
 import { AxiosResponse } from 'axios';
 
 export interface OrderList {
-  total: number;
-  page: number;
-  page_size: number;
-  total_pages: number;
-  has_next: boolean;
-  has_previous: boolean;
-  results: OrderListRes[];
+  id: number;
+  user: number;
+  comment: string;
+  delivery_date: string;
+  items: {
+    id: number;
+    quantity: number;
+    price: string;
+    product: {
+      id: number;
+      images: { id: number; images: string | null }[];
+      liked: false;
+      meansurement: null | string;
+      inventory_id: null | string;
+      product_id: string;
+      code: string;
+      name: string;
+      short_name: string;
+      weight_netto: null | number;
+      weight_brutto: null | number;
+      litr: null | number;
+      box_type_code: null | number;
+      box_quant: null | number;
+      groups: {
+        id: number;
+        name: string;
+      }[];
+      state: 'A' | 'P';
+      barcodes: string;
+      article_code: null | string;
+      marketing_group_code: null | string;
+      inventory_kinds: {
+        id: number;
+        name: string;
+      }[];
+
+      sector_codes: [];
+      prices: {
+        id: number;
+        price: string;
+        price_type: {
+          id: number;
+          name: string;
+          code: string;
+        };
+      }[];
+
+      payment_type: null | string;
+      balance: number;
+      updated_at: string;
+    };
+  }[];
 }
 
 export interface OrderListRes {
@@ -41,12 +86,10 @@ export interface OrderListRes {
         expires_date: string;
         manufacturer: string;
         volume: string;
-        images: [
-          {
+        images: {
           id: string;
           image: string;
-          },
-        ];
+        }[];
       };
       price: number;
       quantity: number;
@@ -57,11 +100,8 @@ export interface OrderListRes {
 }
 
 export const order_api = {
-  async list(params: {
-    page: number;
-    page_size: number;
-  }): Promise<AxiosResponse<OrderList>> {
-    const res = await httpClient.get(API_URLS.OrderList, { params });
+  async list(): Promise<AxiosResponse<OrderList[]>> {
+    const res = await httpClient.get(API_URLS.OrderList);
     return res;
   },
 };

src/features/profile/ui/History.tsx

@@ -1,38 +1,35 @@
-import { usePathname, useRouter } from '@/shared/config/i18n/navigation';
-import formatDate from '@/shared/lib/formatDate';
+'use client';
+
+import { BASE_URL } from '@/shared/config/api/URLs';
+import { useRouter } from '@/shared/config/i18n/navigation';
 import formatPrice from '@/shared/lib/formatPrice';
-import { cn } from '@/shared/lib/utils';
 import { Button } from '@/shared/ui/button';
 import { Card, CardContent } from '@/shared/ui/card';
-import { GlobalPagination } from '@/shared/ui/global-pagination';
 import { useQuery } from '@tanstack/react-query';
 import {
   Calendar,
-  CheckCircle,
-  Clock,
   Loader2,
+  MessageSquare,
   Package,
   RefreshCw,
+  ShoppingBag,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import Image from 'next/image';
 import { useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { order_api, OrderListRes } from '../lib/api';
+import { order_api, OrderList } from '../lib/api';
 
 const HistoryTabs = () => {
   const t = useTranslations();
   const searchParams = useSearchParams();
   const [page, setPage] = useState(1);
-  const PAGE_SIZE = 36;
   const router = useRouter();
-  const pathname = usePathname();
 
   const { data, isLoading } = useQuery({
     queryKey: ['order_list', page],
-    queryFn: () => order_api.list({ page, page_size: PAGE_SIZE }),
-    select(data) {
-      return data.data;
-    },
+    queryFn: () => order_api.list(),
+    select: (res) => res.data,
   });
 
   useEffect(() => {
@@ -40,206 +37,257 @@ const HistoryTabs = () => {
     setPage(urlPage);
   }, [searchParams]);
 
-  const handlePageChange = (newPage: number) => {
-    const params = new URLSearchParams(searchParams.toString());
-    params.set('page', newPage.toString());
-
-    router.push(`${pathname}?${params.toString()}`, {
-      scroll: true,
-    });
-  };
-
-  const getStatusConfig = (status: 'NEW' | 'DONE') => {
-    return status === 'DONE'
-      ? {
-          bgColor: 'bg-emerald-100',
-          textColor: 'text-emerald-600',
-          icon: CheckCircle,
-          text: 'Yetkazildi',
-        }
-      : {
-          bgColor: 'bg-yellow-100',
-          textColor: 'text-yellow-600',
-          icon: Clock,
-          text: 'Kutilmoqda',
-        };
-  };
-
-  const getPaymentTypeText = (type: 'CASH' | 'ACCOUNT_NUMBER') => {
-    return type === 'CASH' ? 'Naqd pul' : 'Hisob raqami';
-  };
-
   if (isLoading) {
     return (
       <div className="flex items-center justify-center py-12">
-        <Loader2 className="w-8 h-8 animate-spin text-primary" />
+        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
       </div>
     );
   }
 
-  if (!data?.results || data.results.length === 0) {
+  if (!data || data.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center py-12 text-center">
-        <Package className="w-16 h-16 text-muted-foreground mb-4" />
-        <p className="text-lg font-semibold text-foreground mb-2">
+      <div className="flex flex-col items-center justify-center py-16 text-center">
+        <div className="bg-gray-100 p-6 rounded-full mb-4">
+          <Package className="w-16 h-16 text-gray-400" />
+        </div>
+        <p className="text-xl font-bold text-gray-800 mb-2">
           {t('Buyurtmalar topilmadi')}
         </p>
-        <p className="text-sm text-muted-foreground">
-          {t('Hali buyurtma qilmagansiz')}
+        <p className="text-sm text-gray-500 max-w-md">
+          {t(
+            "Hali buyurtma qilmagansiz. Mahsulotlarni ko'rib chiqing va birinchi buyurtmangizni bering!",
+          )}
         </p>
+        <Button onClick={() => router.push('/')} className="mt-6">
+          <ShoppingBag className="w-4 h-4 mr-2" />
+          {t('Xarid qilish')}
+        </Button>
       </div>
     );
   }
 
   return (
-    <>
-      <div className="flex items-center justify-between mb-4 md:mb-6">
-        <h2 className="text-xl md:text-2xl font-bold text-foreground">
+    <div className="max-w-5xl mx-auto">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6 pb-4 border-b">
+        <div>
+          <h2 className="text-2xl md:text-3xl font-bold text-gray-900">
             {t('Buyurtmalar tarixi')}
           </h2>
-        <div className="text-sm text-muted-foreground">
-          {data.results.length} ta buyurtma
+          <p className="text-sm text-gray-500 mt-1">
+            {data.length} {t('ta buyurtma')}
+          </p>
         </div>
       </div>
 
-      <div className="space-y-3 md:space-y-4">
-        {data.results.map((order: OrderListRes, idx: number) => {
-          const statusConfig = getStatusConfig(order.status);
-          const StatusIcon = statusConfig.icon;
+      {/* Orders List */}
+      <div className="space-y-6">
+        {data.map((order: OrderList) => {
+          const totalPrice = order.items.reduce(
+            (sum, item) => sum + Number(item.price) * item.quantity,
+            0,
+          );
 
           return (
-            <div key={order.id} className="flex gap-3 md:gap-4">
-              {/* Status Timeline */}
-              <div className="flex flex-col items-center">
-                <div
-                  className={cn(
-                    'w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center shrink-0',
-                    statusConfig.bgColor,
-                  )}
+            <Card
+              key={order.id}
+              className="border-2 border-gray-200 hover:border-blue-400 transition-all duration-200 shadow-sm hover:shadow-lg"
             >
-                  <StatusIcon
-                    className={cn(
-                      'w-4 h-4 md:w-5 md:h-5',
-                      statusConfig.textColor,
+              <CardContent className="p-0">
+                {/* Order Header */}
+                <div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border-b-2 border-gray-200">
+                  <div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
+                    <div className="flex items-center gap-3">
+                      <div className="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-bold">
+                        #{order.id}
+                      </div>
+                      <div>
+                        <p className="text-xs text-gray-500">
+                          {t('Buyurtma raqami')}
+                        </p>
+                      </div>
+                    </div>
+
+                    {order.delivery_date && (
+                      <div className="flex items-center gap-2 bg-white px-3 py-2 rounded-lg shadow-sm">
+                        <Calendar className="w-4 h-4 text-blue-600" />
+                        <div>
+                          <p className="text-xs text-gray-500">
+                            {t('Yetkazib berish')}
+                          </p>
+                          <p className="text-sm font-semibold text-gray-800">
+                            {order.delivery_date}
+                          </p>
+                        </div>
+                      </div>
                     )}
+                  </div>
+
+                  {/* Comment */}
+                  {order.comment && (
+                    <div className="mt-3 bg-white p-3 rounded-lg shadow-sm border border-gray-200">
+                      <div className="flex items-start gap-2">
+                        <MessageSquare className="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0" />
+                        <div className="flex-1">
+                          <p className="text-xs font-medium text-gray-500 mb-1">
+                            {t('Izoh')}:
+                          </p>
+                          <p className="text-sm text-gray-700 leading-relaxed">
+                            {order.comment}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Products */}
+                <div className="p-4 space-y-3">
+                  {order.items.map((item, index) => {
+                    const product = item.product;
+
+                    // Get product image
+                    const productImage = product.images?.[0]?.images
+                      ? product.images[0].images.includes(BASE_URL)
+                        ? product.images[0].images
+                        : BASE_URL + product.images[0].images
+                      : '/placeholder.svg';
+
+                    return (
+                      <div
+                        key={item.id}
+                        className="border-2 border-gray-100 rounded-xl p-4 bg-gradient-to-br from-white to-gray-50 hover:shadow-md transition-shadow"
+                      >
+                        {/* Product Header with Image */}
+                        <div className="flex gap-4 mb-3">
+                          {/* Product Image */}
+                          <div className="flex-shrink-0">
+                            <div className="w-20 h-20 md:w-24 md:h-24 bg-gray-100 rounded-lg overflow-hidden border-2 border-gray-200">
+                              <Image
+                                src={productImage}
+                                alt={product.name}
+                                width={96}
+                                height={96}
+                                className="w-full h-full object-contain"
+                                unoptimized
                               />
                             </div>
-
-                {idx < data.results.length - 1 && (
-                  <div className="w-0.5 flex-1 bg-slate-200 my-2" />
-                )}
                           </div>
 
-              {/* Order Card */}
-              <Card className="flex-1 border-0 shadow-sm hover:shadow-md transition-shadow">
-                <CardContent className="p-3 md:p-4">
-                  {/* Header */}
-                  <div className="flex flex-col md:flex-row md:items-start justify-between mb-3 gap-2">
-                    <div className="flex-1">
-                      <div className="flex items-center gap-2 mb-1">
-                        <p className="font-semibold text-sm md:text-base text-foreground">
-                          #{order.order_number}
+                          {/* Product Info */}
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-start justify-between gap-3 mb-2">
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2 mb-2">
+                                  <span className="bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded">
+                                    {index + 1}
+                                  </span>
+                                  <h3 className="font-bold text-base md:text-lg text-gray-900 truncate">
+                                    {product.name}
+                                  </h3>
+                                </div>
+                                {product.short_name && (
+                                  <p className="text-sm text-gray-600 line-clamp-2">
+                                    {product.short_name}
                                   </p>
-                        <span
-                          className={cn(
-                            'text-xs px-2 py-0.5 rounded-full',
-                            statusConfig.bgColor,
-                            statusConfig.textColor,
                                 )}
-                        >
-                          {statusConfig.text}
+                              </div>
+                              <div className="text-right flex-shrink-0">
+                                <p className="text-xs text-gray-500 mb-1">
+                                  {t('Mahsulotlar narxi')}
+                                </p>
+                                <p className="text-lg font-bold text-blue-600">
+                                  {formatPrice(Number(item.price), true)}
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Product Details Grid */}
+                        <div className="grid grid-cols-2 gap-3 p-3 bg-white rounded-lg border border-gray-200">
+                          <div className="flex flex-col">
+                            <span className="text-xs text-gray-500 mb-1">
+                              {t('Miqdor')}
+                            </span>
+                            <span className="text-base font-bold text-gray-900">
+                              {item.quantity}{' '}
+                              {product.meansurement || t('dona')}
                             </span>
                           </div>
-                      <div className="flex items-center gap-2 text-xs md:text-sm text-muted-foreground flex-wrap">
-                        <span className="flex items-center gap-1">
-                          <Calendar className="w-3 h-3 md:w-4 md:h-4" />
-                          {formatDate.format(
-                            order.created_at,
-                            'DD.MM.YYYY HH:mm',
-                          )}
+                          <div className="flex flex-col items-end">
+                            <span className="text-xs text-gray-500 mb-1">
+                              {t('Jami')}
                             </span>
-                      </div>
-                    </div>
-                    <div className="text-right">
-                      <p className="font-bold text-base md:text-lg text-foreground">
+                            <span className="text-base font-bold text-green-600">
                               {formatPrice(
-                          order.total_price + order.delivery_price,
-                          true,
-                        )}
-                      </p>
-                      <p className="text-xs text-muted-foreground">
-                        {getPaymentTypeText(order.payment_type)}
-                      </p>
-                    </div>
-                  </div>
-
-                  {order.comment && (
-                    <div className="mb-3 p-2 bg-slate-50 rounded-lg">
-                      <p className="text-xs text-muted-foreground mb-1">
-                        Izoh:
-                      </p>
-                      <p className="text-sm text-foreground">{order.comment}</p>
-                    </div>
-                  )}
-
-                  {/* Total Price Breakdown */}
-                  <div className="border-t pt-3 mb-3 space-y-1 text-sm">
-                    <div className="flex justify-between">
-                      <span className="text-muted-foreground">
-                        Mahsulotlar narxi:
-                      </span>
-                      <span className="font-medium">
-                        {formatPrice(order.total_price, true)}
-                      </span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-muted-foreground">Yetkazish:</span>
-                      <span className="font-medium">
-                        {formatPrice(order.delivery_price, true)}
-                      </span>
-                    </div>
-                    <div className="flex justify-between font-bold text-base pt-1 border-t">
-                      <span>Jami:</span>
-                      <span>
-                        {formatPrice(
-                          order.total_price + order.delivery_price,
+                                Number(item.price) * item.quantity,
                                 true,
                               )}
                             </span>
                           </div>
                         </div>
-
-                  {/* Actions */}
-                  <div className="flex gap-2">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => {
-                        router.push('/profile/refresh-order');
-                        // setOrder(order);
-                      }}
-                      className="bg-transparent gap-1 md:gap-2 text-xs md:text-sm h-8 md:h-9 px-2 md:px-3"
-                    >
-                      <RefreshCw className="w-3 h-3 md:w-4 md:h-4" />
-                      {t('Qayta buyurtma')}
-                    </Button>
-                  </div>
-                </CardContent>
-              </Card>
                       </div>
                     );
                   })}
                 </div>
 
-      <div className="w-full flex justify-end mt-5">
-        <GlobalPagination
-          onChange={handlePageChange}
-          page={page}
-          total={data.total_pages}
-          pageSize={PAGE_SIZE}
-        />
+                {/* Order Footer */}
+                <div className="bg-gradient-to-r from-gray-50 to-blue-50 p-4 border-t-2 border-gray-200">
+                  {/* Price Breakdown */}
+                  <div className="mb-4 space-y-2">
+                    <div className="flex justify-between text-sm text-gray-600">
+                      <span>{t('Mahsulotlar narxi')}:</span>
+                      <span className="font-semibold">
+                        {formatPrice(totalPrice, true)}
+                      </span>
+                    </div>
+                    <div className="flex justify-between text-sm text-gray-600">
+                      <span>{t('Mahsulotlar soni')}:</span>
+                      <span className="font-semibold">
+                        {order.items.reduce(
+                          (sum, item) => sum + item.quantity,
+                          0,
+                        )}
+                        {t('dona')}
+                      </span>
+                    </div>
+                    <div className="border-t-2 border-dashed border-gray-300 pt-2 mt-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-base font-bold text-gray-800">
+                          {t('Umumiy summa')}:
+                        </span>
+                        <span className="text-2xl font-bold text-green-600">
+                          {formatPrice(totalPrice, true)}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+                    {/* Actions */}
+                    <div className="flex gap-2 w-full md:w-auto">
+                      <Button
+                        variant="outline"
+                        size="default"
+                        onClick={() =>
+                          router.push(`/profile/refresh-order?id=${order.id}`)
+                        }
+                        className="flex-1 md:flex-none gap-2 font-semibold hover:bg-blue-50 hover:text-blue-600 hover:border-blue-600 transition-colors"
+                      >
+                        <RefreshCw className="w-4 h-4" />
+                        {t('Qayta buyurtma')}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
     </div>
-    </>
   );
 };
 

src/features/profile/ui/RefreshOrder.tsx

@@ -2,6 +2,7 @@
 
 import { cart_api, OrderCreateBody } from '@/features/cart/lib/api';
 import { orderForm } from '@/features/cart/lib/form';
+import { BASE_URL } from '@/shared/config/api/URLs';
 import formatDate from '@/shared/lib/formatDate';
 import formatPrice from '@/shared/lib/formatPrice';
 import { cn } from '@/shared/lib/utils';
@@ -33,7 +34,7 @@ import {
   YMaps,
   ZoomControl,
 } from '@pbe/react-yandex-maps';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
   Calendar as CalIcon,
   CheckCircle2,
@@ -41,15 +42,18 @@ import {
   Loader2,
   LocateFixed,
   MapPin,
+  Package,
+  ShoppingBag,
   User,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
+import { useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import z from 'zod';
-import useOrderStore from '../lib/order';
+import { order_api } from '../lib/api';
 
 const deliveryTimeSlots = [
   { id: 1, label: '09:00 - 11:00', start: '09:00', end: '11:00' },
@@ -69,46 +73,43 @@ interface CoordsData {
 const RefreshOrder = () => {
   const [deliveryDate, setDeliveryDate] = useState<Date>();
   const [selectedTimeSlot, setSelectedTimeSlot] = useState<string>('');
-  const { order: initialValues } = useOrderStore();
   const t = useTranslations();
   const queryClient = useQueryClient();
+  const searchParams = useSearchParams();
+  const id = searchParams.get('id');
 
-  const initialCartItems = initialValues?.cart_item.map((item) => ({
-    id: item.id,
-    product_id: item.product.id,
-    product_name: item.product.name,
-    product_price: item.product.prices[0].price,
-    product_image: item.product.images[0].image || '/placeholder.svg',
-    quantity: item.quantity,
-  }));
+  const { data, isLoading } = useQuery({
+    queryKey: ['order_list'],
+    queryFn: () => order_api.list(),
+    select: (res) => res.data,
+  });
 
-  const cartItems = initialCartItems;
+  const initialValues = data?.find((e) => e.id === Number(id));
 
   const form = useForm<z.infer<typeof orderForm>>({
     resolver: zodResolver(orderForm),
     defaultValues: {
-      comment: '',
+      comment: initialValues?.comment || '',
       lat: '41.311081',
       long: '69.240562',
     },
   });
 
+  // Update form when initialValues loads
+  useEffect(() => {
+    if (initialValues?.comment) {
+      form.setValue('comment', initialValues.comment);
+    }
+  }, [initialValues, form]);
+
   const [orderSuccess, setOrderSuccess] = useState(false);
 
-  const subtotal = cartItems
-    ? cartItems.reduce(
-        (sum, item) => sum + Number(item.product_price) * item.quantity,
-        0,
-      )
-    : 0;
-
-  const total = subtotal;
-
   const { mutate, isPending } = useMutation({
     mutationFn: (body: OrderCreateBody) => cart_api.createOrder(body),
     onSuccess: () => {
       setOrderSuccess(true);
       queryClient.refetchQueries({ queryKey: ['cart_items'] });
+      queryClient.refetchQueries({ queryKey: ['order_list'] });
     },
     onError: () => {
       toast.error(t('Xatolik yuz berdi'), {
@@ -164,7 +165,7 @@ const RefreshOrder = () => {
 
   const handleShowMyLocation = () => {
     if (!navigator.geolocation) {
-      alert('Sizning brauzeringiz geolokatsiyani qo‘llab-quvvatlamaydi');
+      alert("Sizning brauzeringiz geolokatsiyani qo'llab-quvvatlamaydi");
       return;
     }
     navigator.geolocation.getCurrentPosition(
@@ -217,15 +218,15 @@ const RefreshOrder = () => {
       return;
     }
 
-    if (initialValues === null) {
-      toast.error(t('Savatcha bo‘sh'), {
+    if (!initialValues) {
+      toast.error(t('Buyurtma topilmadi'), {
         richColors: true,
         position: 'top-center',
       });
       return;
     }
 
-    const order_products = initialValues.cart_item
+    const order_products = initialValues.items
       .filter(
         (item) =>
           item.product.prices &&
@@ -263,6 +264,41 @@ const RefreshOrder = () => {
     });
   };
 
+  // Calculate total price
+  const totalPrice =
+    initialValues?.items.reduce(
+      (sum, item) => sum + Number(item.price) * item.quantity,
+      0,
+    ) || 0;
+
+  const totalItems =
+    initialValues?.items.reduce((sum, item) => sum + item.quantity, 0) || 0;
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <Loader2 className="w-12 h-12 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  if (!initialValues) {
+    return (
+      <div className="flex flex-col items-center justify-center h-screen">
+        <Package className="w-20 h-20 text-gray-400 mb-4" />
+        <h2 className="text-2xl font-bold text-gray-800 mb-2">
+          {t('Buyurtma topilmadi')}
+        </h2>
+        <p className="text-gray-500 mb-6">
+          {t("Ushbu buyurtma mavjud emas yoki o'chirilgan")}
+        </p>
+        <Button onClick={() => (window.location.href = '/profile/history')}>
+          {t('Buyurtmalar tarixiga qaytish')}
+        </Button>
+      </div>
+    );
+  }
+
   if (orderSuccess) {
     return (
       <div className="flex justify-center items-center h-screen">
@@ -274,7 +310,7 @@ const RefreshOrder = () => {
             {t('Buyurtma qabul qilindi!')}
           </h2>
           <p className="text-gray-500 mb-6">
-            {t('Buyurtmangiz muvaffaqiyatli qabul qilindi')}
+            {t('Buyurtmangiz muvaffaqiyatli qayta qabul qilindi')}
           </p>
           <button
             onClick={() => (window.location.href = '/')}
@@ -293,9 +329,12 @@ const RefreshOrder = () => {
         {/* Header */}
         <div className="mb-6">
           <h1 className="text-3xl font-bold text-gray-800 mb-2">
-            {t('Buyurtmani rasmiylashtirish')}
+            {t('Buyurtmani qayta rasmiylashtirish')}
           </h1>
-          <p className="text-gray-600">{t("Ma'lumotlaringizni to'ldiring")}</p>
+          <p className="text-gray-600">
+            {t('Buyurtma')} #{initialValues.id}{' '}
+            {t("uchun ma'lumotlarni yangilang")}
+          </p>
         </div>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
@@ -409,7 +448,7 @@ const RefreshOrder = () => {
                   </div>
                 </div>
 
-                {/* Yetkazib berish vaqti - Yangilangan versiya */}
+                {/* Yetkazib berish vaqti */}
                 <div className="bg-white rounded-lg shadow-md p-6">
                   <div className="flex items-center gap-2 mb-4">
                     <Clock className="w-5 h-5 text-blue-600" />
@@ -510,44 +549,70 @@ const RefreshOrder = () => {
               {/* Right Column - Order Summary */}
               <div className="lg:col-span-1">
                 <div className="bg-white rounded-lg shadow-md p-6 sticky top-4">
-                  <h3 className="text-xl font-bold mb-4">{t('Mahsulotlar')}</h3>
+                  <div className="flex items-center gap-2 mb-4">
+                    <ShoppingBag className="w-5 h-5 text-blue-600" />
+                    <h3 className="text-xl font-bold">
+                      {t('Buyurtma tafsilotlari')}
+                    </h3>
+                  </div>
 
                   {/* Cart Items */}
-                  <div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
-                    {cartItems?.map((item) => (
-                      <div key={item.id} className="flex gap-3 pb-3 border-b">
+                  <div className="space-y-3 mb-4 max-h-96 overflow-y-auto">
+                    {initialValues.items.map((item) => {
+                      const productImage = item.product.images?.[0]?.images
+                        ? item.product.images[0].images.includes(BASE_URL)
+                          ? item.product.images[0].images
+                          : BASE_URL + item.product.images[0].images
+                        : '/placeholder.svg';
+
+                      return (
+                        <div
+                          key={item.id}
+                          className="flex gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200"
+                        >
+                          <div className="w-16 h-16 flex-shrink-0 bg-white rounded-lg overflow-hidden border">
                             <Image
-                          width={500}
-                          height={500}
-                          src={item.product_image}
-                          alt={item.product_name}
+                              src={productImage}
+                              alt={item.product.name}
+                              width={64}
+                              height={64}
+                              className="w-full h-full object-contain"
                               unoptimized
-                          className="w-16 h-16 object-contain bg-gray-100 rounded"
                             />
-                        <div className="flex-1">
-                          <h4 className="font-medium text-sm">
-                            {item.product_name}
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <h4 className="font-semibold text-sm text-gray-900 truncate">
+                              {item.product.name}
                             </h4>
-                          <p className="text-sm text-gray-500">
-                            {item.quantity} x{' '}
-                            {formatPrice(item.product_price, true)}
+                            <p className="text-xs text-gray-500 mt-1">
+                              {item.quantity} ×{' '}
+                              {formatPrice(Number(item.price), true)}
                             </p>
-                          <p className="font-semibold text-sm">
+                            <p className="text-sm font-bold text-blue-600 mt-1">
                               {formatPrice(
-                              Number(item.product_price) * item.quantity,
+                                Number(item.price) * item.quantity,
                                 true,
                               )}
                             </p>
                           </div>
                         </div>
-                    ))}
+                      );
+                    })}
                   </div>
 
                   {/* Pricing */}
                   <div className="space-y-2 mb-4 pt-4 border-t">
                     <div className="flex justify-between text-gray-600">
-                      <span>{t('Mahsulotlar')}:</span>
-                      <span>{subtotal && formatPrice(subtotal, true)}</span>
+                      <span>{t('Mahsulotlar soni')}:</span>
+                      <span className="font-semibold">
+                        {totalItems} {t('dona')}
+                      </span>
+                    </div>
+                    <div className="flex justify-between text-gray-600">
+                      <span>{t('Mahsulotlar narxi')}:</span>
+                      <span className="font-semibold">
+                        {formatPrice(totalPrice, true)}
+                      </span>
                     </div>
                   </div>
 
@@ -556,8 +621,8 @@ const RefreshOrder = () => {
                       <span className="text-lg font-semibold">
                         {t('Jami')}:
                       </span>
-                      <span className="text-2xl font-bold text-blue-600">
-                        {total && formatPrice(total, true)}
+                      <span className="text-2xl font-bold text-green-600">
+                        {formatPrice(totalPrice, true)}
                       </span>
                     </div>
                   </div>
@@ -570,6 +635,7 @@ const RefreshOrder = () => {
                     {isPending ? (
                       <span className="flex items-center justify-center gap-2">
                         <Loader2 className="animate-spin" />
+                        {t('Yuklanmoqda...')}
                       </span>
                     ) : (
                       t('Buyurtmani tasdiqlash')

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

@@ -25,6 +25,7 @@ export interface ProductListResult {
   box_quant: null | string;
   groups: number[];
   state: 'A' | 'P';
+  payment_type: 'cash' | 'card' | null;
   barcodes: string;
   article_code: null | string;
   marketing_group_code: null | string;
@@ -38,6 +39,7 @@ export interface ProductListResult {
       name: string;
     };
   }[];
+  balance: number;
 }
 
 export interface ProductDetail {
@@ -62,6 +64,9 @@ export interface ProductDetail {
   marketing_group_code: null | string;
   inventory_kinds: { id: number; name: string }[];
   sector_codes: { id: number; code: string }[];
+  payment_type: null | 'cash' | 'card';
+  balance: number;
+  updated_at: string;
   prices: {
     id: number;
     price: string;
@@ -106,12 +111,14 @@ export interface FavouriteProductRes {
   box_type_code: null | string;
   box_quant: null | string;
   groups: number[];
+  payment_type: 'cash' | 'card' | null;
   state: 'A' | 'P';
   barcodes: string;
   article_code: null | string;
   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/shared/config/i18n/messages/ru.json

@@ -209,5 +209,18 @@
   "Bu kategoriyada hozircha mahsulot yo‘q": "В этой категории пока нет товаров",
   "Tez orada qo‘shiladi": "Скоро будет добавлено",
   "Hozirchali bu kategoriyada mahsulot yo'q": "Пока нет товаров в этой категории",
-  "Kataloglar": "Каталог"
+  "Kataloglar": "Каталог",
+
+  "Naqd bilan olinadi": "Получено наличными",
+  "Pul o'tkazish yo'li bilan olinadi": "Получено путём перевода денег",
+  "Diqqat! Mahsulot narxi o'zgargan bo'lishi mumkin": "Внимание! Цена продукта может измениться",
+  "So'nggi yangilanish:": "Последнее обновление",
+  "only_available": "Доступно только {maxBalance} штук",
+  "Buyurtmalar topilmadi": "Заказов не найдено",
+  "Hali buyurtma qilmagansiz": "Вы ещё не сделали заказ",
+  "ta buyurtma": "Заказы",
+  "Mahsulotlar soni": "Количество товаров",
+  "dona": "шт",
+  "Umumiy summa": "Общая сумма",
+  "Qayta buyurtma": "Заказать заново"
 }

src/shared/config/i18n/messages/uz.d.json.ts

@@ -209,5 +209,18 @@ declare const messages: {
   'Tez orada qo‘shiladi': 'Tez orada qo‘shiladi';
   "Hozirchali bu kategoriyada mahsulot yo'q": "Hozirchali bu kategoriyada mahsulot yo'q";
   Kataloglar: 'Kataloglar';
+  'Naqd bilan olinadi': 'Naqd bilan olinadi';
+  "Pul o'tkazish yo'li bilan olinadi": "Pul o'tkazish yo'li bilan olinadi";
+
+  "Diqqat! Mahsulot narxi o'zgargan bo'lishi mumkin": "Diqqat! Mahsulot narxi o'zgargan bo'lishi mumkin";
+  "So'nggi yangilanish:": "So'nggi yangilanish";
+  only_available: 'Faqat {maxBalance} dona mavjud';
+  'Buyurtmalar topilmadi': 'Buyurtmalar topilmadi';
+  'Hali buyurtma qilmagansiz': 'Hali buyurtma qilmagansiz';
+  'ta buyurtma': 'ta buyurtma';
+  'Mahsulotlar soni': 'Mahsulotlar soni';
+  dona: 'dona';
+  'Umumiy summa': 'Umumiy summa';
+  'Qayta buyurtma': 'Qayta buyurtma';
 };
 export default messages;

src/shared/config/i18n/messages/uz.json

@@ -205,5 +205,18 @@
   "Bu kategoriyada hozircha mahsulot yo‘q": "Bu kategoriyada hozircha mahsulot yo‘q",
   "Tez orada qo‘shiladi": "Tez orada qo‘shiladi",
   "Hozirchali bu kategoriyada mahsulot yo'q": "Hozirchali bu kategoriyada mahsulot yo'q",
-  "Kataloglar": "Kataloglar"
+  "Kataloglar": "Kataloglar",
+  "Naqd bilan olinadi": "Naqd bilan olinadi",
+  "Pul o'tkazish yo'li bilan olinadi": "Pul o'tkazish yo'li bilan olinadi",
+
+  "Diqqat! Mahsulot narxi o'zgargan bo'lishi mumkin": "Diqqat! Mahsulot narxi o'zgargan bo'lishi mumkin",
+  "So'nggi yangilanish:": "So'nggi yangilanish",
+  "only_available": "Faqat {maxBalance} dona mavjud",
+  "Buyurtmalar topilmadi": "Buyurtmalar topilmadi",
+  "Hali buyurtma qilmagansiz": "Hali buyurtma qilmagansiz",
+  "ta buyurtma": "ta buyurtma",
+  "Mahsulotlar soni": "Mahsulotlar soni",
+  "dona": "dona",
+  "Umumiy summa": "Umumiy summa",
+  "Qayta buyurtma": "Qayta buyurtma"
 }

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

@@ -42,7 +42,7 @@ export function ProductCard({
   const debounceRef = useRef<NodeJS.Timeout | null>(null);
   const imageRef = useRef<HTMLDivElement>(null);
 
-  const { mutate } = useMutation({
+  const { mutate: addToCart } = useMutation({
     mutationFn: (body: { product: string; quantity: number; cart: string }) =>
       cart_api.cart_item(body),
     onSuccess: () => {
@@ -57,6 +57,7 @@ export function ProductCard({
       });
     },
   });
+  const maxBalance = product.balance ?? 0;
 
   const { mutate: updateCartItem } = useMutation({
     mutationFn: ({
@@ -120,24 +121,6 @@ export function ProductCard({
     },
   });
 
-  const increase = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    const newQty = (quantity === '' ? 0 : quantity) + 1;
-    setQuantity(newQty);
-
-    if (newQty > 1) {
-      const cartItemId = cartItems?.data?.cart_item.find(
-        (item) => Number(item.product.id) === product.id,
-      )?.id;
-      if (cartItemId) {
-        updateCartItem({
-          body: { quantity: newQty },
-          cart_item_id: cartItemId.toString(),
-        });
-      }
-    }
-  };
-
   const decrease = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
 
@@ -165,6 +148,35 @@ export function ProductCard({
     });
   };
 
+  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;
+
+    if (current >= maxBalance) {
+      toast.warning(t(`Faqat ${maxBalance} dona mavjud`), {
+        richColors: true,
+      });
+      return;
+    }
+
+    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">
@@ -257,18 +269,25 @@ export function ProductCard({
             )} */}
             </div>
           </div>
-          <div className="p-3 sm:p-4 pt-0">
+          <div className="p-4 pt-0">
             {quantity === 0 ? (
               <Button
+                disabled={maxBalance <= 0}
                 onClick={(e) => {
                   e.stopPropagation();
-                  mutate({
+
+                  if (maxBalance <= 0) {
+                    toast.error(t('Mahsulot mavjud emas'));
+                    return;
+                  }
+
+                  addToCart({
                     product: String(product.id),
                     quantity: 1,
                     cart: cart_id!,
                   });
                 }}
-                className="w-full h-9 sm:h-11 text-sm bg-green-600 hover:bg-green-600/80"
+                className="w-full bg-green-600"
               >
                 <ShoppingCart className="w-4 h-4 mr-1" />
                 {t('Savatga')}
@@ -276,61 +295,62 @@ export function ProductCard({
             ) : (
               <div
                 onClick={(e) => e.stopPropagation()}
-                className="flex items-center justify-between border border-green-500 rounded-lg h-9 sm:h-11"
+                className="flex items-center justify-between border border-green-500 rounded-lg h-10"
               >
                 <Button size="icon" variant="ghost" onClick={decrease}>
-                  <Minus className="w-4 h-4" />
+                  <Minus />
                 </Button>
 
                 <Input
                   value={quantity}
-                  className="border-none text-center focus-visible:border-none focus-visible:ring-0"
+                  className="border-none text-center"
                   onChange={(e) => {
                     const v = e.target.value;
-
-                    // ❌ faqat raqam
                     if (!/^\d*$/.test(v)) return;
 
-                    // ⛔ oldingi debounce'ni tozalaymiz
                     if (debounceRef.current) {
                       clearTimeout(debounceRef.current);
                     }
 
-                    // bo‘sh input — faqat UI
                     if (v === '') {
                       setQuantity('');
                       return;
                     }
 
-                    const num = Number(v);
+                    let num = Number(v);
+                    if (num > maxBalance) {
+                      num = maxBalance;
+                      toast.warning(t(`Maksimal ${maxBalance} dona`), {
+                        richColors: true,
+                      });
+                    }
+
                     setQuantity(num);
 
-                    if (!cartItems) return;
+                    const id = getCartItemId();
+                    if (!id) return;
 
-                    const cartItemId = cartItems.data.cart_item.find(
-                      (item) => Number(item.product.id) === product.id,
-                    )?.id;
-
-                    if (!cartItemId) return;
-
-                    // ❗ 0 bo‘lsa — DELETE (darhol)
                     if (num === 0) {
-                      deleteCartItem({ cart_item_id: cartItemId.toString() });
+                      deleteCartItem({ cart_item_id: id.toString() });
                       return;
                     }
 
-                    // 🕒 debounce bilan UPDATE
                     debounceRef.current = setTimeout(() => {
                       updateCartItem({
+                        cart_item_id: id.toString(),
                         body: { quantity: num },
-                        cart_item_id: cartItemId.toString(),
                       });
                     }, 500);
                   }}
                 />
 
-                <Button size="icon" variant="ghost" onClick={increase}>
-                  <Plus className="w-4 h-4" />
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  onClick={increase}
+                  disabled={Number(quantity) >= maxBalance}
+                >
+                  <Plus />
                 </Button>
               </div>
             )}