bug fix

src/app/[locale]/product/[product]/page.tsx

@@ -22,11 +22,11 @@ export async function generateMetadata({
     return {
       title: `${res.data.name} - Gastro Market`,
       description:
-        res.data.description || `Gastro Market mahsuloti: ${res.data.name}`,
+        res.data.short_name || `Gastro Market mahsuloti: ${res.data.name}`,
       openGraph: {
         title: `${res.data.name} - Gastro Market`,
         description:
-          res.data.description || `Gastro Market mahsuloti: ${res.data.name}`,
+          res.data.short_name || `Gastro Market mahsuloti: ${res.data.name}`,
         type: 'website',
         images: [
           {
@@ -45,7 +45,7 @@ export async function generateMetadata({
         card: 'summary_large_image',
         title: `${res.data.name} - Gastro Market`,
         description:
-          res.data.description || `Gastro Market mahsuloti: ${res.data.name}`,
+          res.data.short_name || `Gastro Market mahsuloti: ${res.data.name}`,
         images:
           res.data.images && res.data.images.length > 0
             ? [

src/features/about/ui/AboutPage.tsx

@@ -90,7 +90,7 @@ export function PartnershipForm() {
       form.reset();
     },
     onError: () => {
-      toast.error('Xatolik yuz berdi', {
+      toast.error(t('Xatolik yuz berdi'), {
         richColors: true,
         position: 'top-center',
       });

src/features/cart/lib/api.ts

@@ -2,7 +2,7 @@ import httpClient from '@/shared/config/api/httpClient';
 import { API_URLS } from '@/shared/config/api/URLs';
 import { AxiosResponse } from 'axios';
 
-interface CartItem {
+export interface CartItem {
   id: string;
   cart_item: {
     id: number;

src/features/cart/ui/OrderPage.tsx

@@ -25,6 +25,7 @@ import {
   SelectValue,
 } from '@/shared/ui/select';
 import { Textarea } from '@/shared/ui/textarea';
+import { userStore } from '@/widgets/welcome/lib/hook';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Map,
@@ -72,6 +73,7 @@ const deliveryTimeSlots = [
 
 const OrderPage = () => {
   const t = useTranslations();
+  const { user } = userStore();
   const form = useForm<z.infer<typeof orderForm>>({
     resolver: zodResolver(orderForm),
     defaultValues: {
@@ -103,7 +105,7 @@ const OrderPage = () => {
 
         queryClinet.refetchQueries({ queryKey: ['cart_items'] });
       } else {
-        toast.error('Xatolik yuz berdi', {
+        toast.error(t('Xatolik yuz berdi'), {
           richColors: true,
           position: 'top-center',
         });
@@ -235,7 +237,7 @@ const OrderPage = () => {
 
   function onSubmit(value: z.infer<typeof orderForm>) {
     if (!cartItems || cartItems.length === 0) {
-      toast.error("Savatcha bo'sh", {
+      toast.error(t("Savatcha bo'sh"), {
         richColors: true,
         position: 'top-center',
       });
@@ -244,7 +246,7 @@ const OrderPage = () => {
 
     // Yetkazib berish vaqtini tekshirish
     if (!deliveryDate) {
-      toast.error('Yetkazib berish sanasini tanlang', {
+      toast.error(t('Yetkazib berish sanasini tanlang'), {
         richColors: true,
         position: 'top-center',
       });
@@ -252,7 +254,7 @@ const OrderPage = () => {
     }
 
     if (!selectedTimeSlot) {
-      toast.error('Yetkazib berish vaqtini tanlang', {
+      toast.error(t('Yetkazib berish vaqtini tanlang'), {
         richColors: true,
         position: 'top-center',
       });
@@ -276,25 +278,31 @@ const OrderPage = () => {
         product_price: item.product.prices![0].price,
         warehouse_code: 'wh1',
       }));
-
+    if (user) {
-    mutate({
+      mutate({
-      order: [
+        order: [
-        {
+          {
-          filial_code: 'dodge',
+            filial_code: 'dodge',
-          delivery_date: formatDate.format(deliveryDate, 'DD.MM.YYYY'),
+            delivery_date: formatDate.format(deliveryDate, 'DD.MM.YYYY'),
-          room_code: '100',
+            room_code: '100',
-          deal_time: formatDate.format(deliveryDate, 'DD.MM.YYYY'),
+            deal_time: formatDate.format(deliveryDate, 'DD.MM.YYYY'),
-          robot_code: 'r2',
+            robot_code: 'r2',
-          status: 'B#N',
+            status: 'B#N',
-          sales_manager_code: '1',
+            sales_manager_code: '1',
-          person_code: '12345678',
+            person_code: user?.person_id.toString(),
-          currency_code: '860',
+            currency_code: '860',
-          owner_person_code: '1234567',
+            owner_person_code: user?.person_id.toString(),
-          note: value.comment,
+            note: value.comment,
-          order_products: order_products,
+            order_products: order_products,
-        },
+          },
-      ],
+        ],
-    });
+      });
+    } else {
+      toast.error(t('Xatolik yuz berdi'), {
+        richColors: true,
+        position: 'top-center',
+      });
+    }
   }
 
   if (orderSuccess) {

src/features/favourite/ui/Favourite.tsx

@@ -110,7 +110,7 @@ export default function Favourite() {
           {favourite &&
             !isLoading &&
             favourite?.results
-              .filter((product) => product.is_active)
+              .filter((product) => product.state === 'A')
               .map((product) => (
                 <ProductCard key={product.id} product={product} />
               ))}

src/features/product/ui/Product.tsx

@@ -5,7 +5,6 @@ import { product_api } from '@/shared/config/api/product/api';
 import { BASE_URL } from '@/shared/config/api/URLs';
 import { useCartId } from '@/shared/hooks/cartId';
 import formatPrice from '@/shared/lib/formatPrice';
-import { Card } from '@/shared/ui/card';
 import {
   Carousel,
   CarouselContent,
@@ -27,432 +26,284 @@ import { toast } from 'sonner';
 
 const ProductDetail = () => {
   const t = useTranslations();
-  const [quantity, setQuantity] = useState<number>(1);
+  const { product } = useParams<{ product: string }>();
-  const { product } = useParams();
   const queryClient = useQueryClient();
-  const [selectedImage, setSelectedImage] = useState<number>(0);
-  const debounceRef = useRef<NodeJS.Timeout | null>(null);
   const { cart_id } = useCartId();
 
+  const [quantity, setQuantity] = useState(1);
+  const [selectedImage, setSelectedImage] = useState(0);
+  const debounceRef = useRef<NodeJS.Timeout | null>(null);
+
+  /* ---------------- CART ITEMS ---------------- */
   const { data: cartItems } = useQuery({
     queryKey: ['cart_items', cart_id],
     queryFn: () => cart_api.get_cart_items(cart_id!),
     enabled: !!cart_id,
   });
 
+  /* ---------------- PRODUCT DETAIL ---------------- */
   const { data, isLoading } = useQuery({
     queryKey: ['product_detail', product],
-    queryFn: () => {
+    queryFn: () => product_api.detail(product),
-      if (product) return product_api.detail(product.toString());
+    select: (res) => res.data,
-    },
-    select(data) {
-      return data?.data;
-    },
     enabled: !!product,
   });
 
-  const { data: recomendation, isLoading: proLoad } = useQuery({
+  /* ---------------- RECOMMENDATION ---------------- */
+  const { data: recomendation, isLoading: recLoad } = useQuery({
     queryKey: ['product_list'],
     queryFn: () => product_api.list({ page: 1, page_size: 12 }),
-    select(data) {
+    select: (res) => res.data.results,
-      return data.data.results;
-    },
   });
 
+  /* ---------------- PRICE ---------------- */
+  const price = Number(data?.prices?.[0]?.price || 0);
+
+  /* ---------------- SYNC CART QUANTITY ---------------- */
   useEffect(() => {
     if (!data || !cartItems) return;
 
-    const item = cartItems?.data.cart_item.find(
+    const item = cartItems.data.cart_item.find(
-      (item) => Number(item.product.id) === data?.id,
+      (i) => Number(i.product.id) === data.id,
     );
 
-    if (item) {
+    setQuantity(item ? item.quantity : 1);
-      setQuantity(item.quantity);
-    } else {
-      setQuantity(1);
-    }
   }, [data, cartItems]);
 
+  /* ---------------- DEBOUNCE UPDATE ---------------- */
   useEffect(() => {
-    if (!cart_id || !data || !cartItems) return;
+    if (!cart_id || !data || !cartItems || quantity <= 0) return;
-    if (quantity <= 0) return;
 
-    const cartItem = cartItems?.data?.cart_item.find(
+    const cartItem = cartItems.data.cart_item.find(
-      (item) => Number(item.product.id) === data?.id,
+      (i) => Number(i.product.id) === data.id,
     );
 
-    if (!cartItem) return;
+    if (!cartItem || cartItem.quantity === quantity) return;
-    if (cartItem.quantity === quantity) return;
 
     if (debounceRef.current) clearTimeout(debounceRef.current);
 
     debounceRef.current = setTimeout(() => {
       updateCartItem({
-        body: { quantity },
         cart_item_id: cartItem.id.toString(),
+        body: { quantity },
       });
     }, 500);
 
     return () => {
       if (debounceRef.current) clearTimeout(debounceRef.current);
     };
-  }, [quantity, cart_id, data, cartItems]);
+  }, [quantity]);
 
-  const { mutate } = useMutation({
+  /* ---------------- ADD TO CART ---------------- */
+  const { mutate: addToCart } = useMutation({
     mutationFn: (body: { product: string; quantity: number; cart: string }) =>
       cart_api.cart_item(body),
     onSuccess: () => {
       queryClient.refetchQueries({ queryKey: ['cart_items'] });
-      toast.success(t("Mahsulot savatga qo'shildi"), {
+      toast.success(t("Mahsulot savatga qo'shildi"), { richColors: true });
-        richColors: true,
-        position: 'top-center',
-      });
     },
     onError: (err: AxiosError) => {
-      const detail = (err.response?.data as { detail: string }).detail;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      toast.error(detail || err.message, {
+      const msg = (err.response?.data as any)?.detail || err.message;
-        richColors: true,
+      toast.error(msg, { richColors: true });
-        position: 'top-center',
-      });
     },
   });
 
   const { mutate: updateCartItem } = useMutation({
-    mutationFn: ({
+    mutationFn: (payload: {
-      body,
-      cart_item_id,
-    }: {
-      body: { quantity: number };
       cart_item_id: string;
-    }) => cart_api.update_cart_item({ body, cart_item_id }),
+      body: { quantity: number };
-    onSuccess: () => {
+    }) => cart_api.update_cart_item(payload),
-      queryClient.refetchQueries({ queryKey: ['cart_items'] });
+    onSuccess: () => queryClient.refetchQueries({ queryKey: ['cart_items'] }),
-    },
-    onError: (err: AxiosError) => {
-      toast.error(err.message, { richColors: true, position: 'top-center' });
-    },
   });
 
+  /* ---------------- FAVOURITE ---------------- */
   const favouriteMutation = useMutation({
-    mutationFn: (productId: string) => product_api.favourite(productId),
+    mutationFn: (id: string) => product_api.favourite(id),
     onSuccess: () => {
-      queryClient.refetchQueries({ queryKey: ['product_list'] });
+      queryClient.invalidateQueries({ queryKey: ['product_detail'] });
-      queryClient.refetchQueries({ queryKey: ['product_detail', product] });
+      queryClient.invalidateQueries({ queryKey: ['product_list'] });
     },
   });
 
-  const handleQuantityChange = (type: string) => {
+  /* ---------------- HANDLERS ---------------- */
-    if (type === 'increase') {
-      setQuantity(quantity + 1);
-    } else if (type === 'decrease' && quantity > 1) {
-      setQuantity(quantity - 1);
-    }
-  };
-
   const handleAddToCart = () => {
     if (!data || !cart_id) return;
 
     const cartItem = cartItems?.data.cart_item.find(
-      (e) => Number(e.product.id) === data.id,
+      (i) => Number(i.product.id) === data.id,
     );
 
     if (cartItem) {
       updateCartItem({
-        body: { quantity: quantity },
         cart_item_id: cartItem.id.toString(),
+        body: { quantity },
       });
     } else {
-      mutate({
+      addToCart({
         product: String(data.id),
         cart: cart_id,
-        quantity: quantity,
+        quantity,
       });
     }
   };
 
+  /* ---------------- LOADING ---------------- */
   if (isLoading) {
     return (
-      <div className="custom-container pb-5">
+      <div className="custom-container py-6">
-        <div className="w-full max-w-4xl space-y-6">
+        <Skeleton className="h-[400px] w-full rounded-lg" />
-          <div className="h-[400px] bg-gray-100 animate-pulse rounded-lg"></div>
-          <div className="h-8 bg-gray-100 animate-pulse rounded w-3/4"></div>
-          <div className="h-6 bg-gray-100 animate-pulse rounded w-1/4"></div>
-          <div className="h-4 bg-gray-100 animate-pulse rounded w-full"></div>
-          <div className="h-4 bg-gray-100 animate-pulse rounded w-5/6"></div>
-          <div className="flex gap-4 mt-4">
-            <div className="h-10 bg-gray-100 animate-pulse rounded flex-1"></div>
-            <div className="h-10 bg-gray-100 animate-pulse rounded w-12"></div>
-          </div>
-        </div>
       </div>
     );
   }
 
+  /* ===================== RENDER ===================== */
   return (
-    <div className="custom-container pb-5">
+    <div className="custom-container pb-8">
-      <div className="">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 bg-white p-6 rounded-lg shadow">
-        <div className="bg-white rounded-lg shadow-md p-6 mb-8">
+        {/* IMAGES */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div>
-            <div>
+          <Image
-              <div className="relative rounded-lg overflow-hidden mb-4">
+            width={500}
-                {data && (
+            height={500}
-                  <Image
+            src={
-                    width={500}
+              data && data?.images?.length !== 0
-                    height={500}
+                ? BASE_URL + data.images[selectedImage]?.image
-                    src={
+                : data?.images[selectedImage]?.image
-                      data.images.length > 0
+                  ? BASE_URL + data.images[selectedImage]?.image
-                        ? data.images[selectedImage].image
+                  : '/placeholder.svg'
-                        : data.image || '/placeholder.svg'
+            }
-                    }
+            alt={data?.name || 'logo'}
-                    alt={data.name}
+            className="w-full h-[400px] object-contain"
-                    className="w-full h-[400px] object-contain"
+          />
-                  />
-                )}
-              </div>
 
-              <Carousel
+          <Carousel className="mt-4">
-                opts={{
+            <CarouselContent>
-                  align: 'start',
+              {data?.images?.map((img, i) => (
-                  dragFree: true,
+                <CarouselItem key={img.id} className="basis-1/4">
-                }}
+                  <button
-                className="w-full"
+                    onClick={() => setSelectedImage(i)}
-              >
+                    className={`border rounded-lg p-1 ${
-                <CarouselContent className="-ml-2 pr-[15%] sm:pr-0">
+                      i === selectedImage
-                  {data && data.images.length > 0 ? (
+                        ? 'border-blue-500'
-                    data.images.map((img, index) => (
+                        : 'border-gray-200'
-                      <CarouselItem
-                        key={img.id}
-                        className="pl-2 basis-1/3 sm:basis-1/4 md:basis-1/5 lg:basis-1/6"
-                      >
-                        <button
-                          onClick={() => setSelectedImage(index)}
-                          className={`aspect-square w-full rounded-lg border-2 overflow-hidden transition ${
-                            selectedImage === index
-                              ? 'border-blue-500'
-                              : 'border-gray-200 hover:border-blue-300'
-                          }`}
-                        >
-                          <Image
-                            src={
-                              img.image.includes(BASE_URL)
-                                ? img.image
-                                : BASE_URL + img.image || '/placeholder.svg'
-                            }
-                            alt={BASE_URL + data?.image}
-                            width={150}
-                            height={150}
-                            className="w-full h-full object-contain"
-                          />
-                        </button>
-                      </CarouselItem>
-                    ))
-                  ) : (
-                    <CarouselItem className="pl-2 basis-1/3 sm:basis-1/4 md:basis-1/5 lg:basis-1/6">
-                      <button
-                        className={`aspect-square w-full rounded-lg border-2 overflow-hidden transition ${'border-blue-500'}`}
-                      >
-                        <Image
-                          src={
-                            data?.image.includes(BASE_URL)
-                              ? data.image
-                              : BASE_URL + data?.image || '/placeholder.svg'
-                          }
-                          alt={BASE_URL + data?.image}
-                          width={150}
-                          height={150}
-                          className="w-full h-full object-contain"
-                        />
-                      </button>
-                    </CarouselItem>
-                  )}
-                </CarouselContent>
-              </Carousel>
-            </div>
-
-            {/* Product Info */}
-            <div>
-              <h1 className="text-3xl font-bold text-gray-800 mb-2">
-                {data?.name}
-              </h1>
-
-              {/* Price */}
-              <div className="mb-6">
-                <div className="flex items-center gap-3 max-lg:flex-col max-lg:items-start">
-                  <span className="text-4xl font-bold text-blue-600">
-                    {data && formatPrice(data.price, true)}
-                  </span>
-                </div>
-              </div>
-
-              {/* Description */}
-              <p className="text-gray-600 mb-6">{data?.description}</p>
-
-              {/* Quantity Selector */}
-              <div className="mb-6">
-                <label className="text-gray-700 font-medium mb-2 block">
-                  {t('Miqdor')}:
-                </label>
-                <div className="flex items-center gap-4 max-lg:flex-col max-lg:items-start">
-                  <div className="flex items-center border border-gray-300 rounded-lg">
-                    <button
-                      onClick={() => handleQuantityChange('decrease')}
-                      className="p-3 hover:bg-gray-100 transition rounded-lg"
-                      disabled={quantity <= 1}
-                    >
-                      <Minus className="w-5 h-5" />
-                    </button>
-                    <Input
-                      value={quantity}
-                      onChange={(e) => {
-                        const v = e.target.value;
-                        if (!/^\d*$/.test(v)) return;
-                        const num = Number(v);
-                        if (num > 0) {
-                          setQuantity(num);
-                        }
-                      }}
-                      inputMode="numeric"
-                      className="w-14 h-12 border-none text-center text-sm !p-0 focus-visible:ring-0"
-                    />
-                    <button
-                      onClick={() => handleQuantityChange('increase')}
-                      className="p-3 hover:bg-gray-100 transition rounded-lg"
-                    >
-                      <Plus className="w-5 h-5" />
-                    </button>
-                  </div>
-                  <span className="text-gray-600">
-                    {t('Jami')}:{' '}
-                    <span className="font-bold text-lg">
-                      {data && formatPrice(data.price * quantity, true)}
-                    </span>
-                  </span>
-                </div>
-              </div>
-
-              {/* Action Buttons */}
-              <div className="flex gap-4 mb-6">
-                <button
-                  onClick={handleAddToCart}
-                  className="flex-1 py-4 rounded-lg cursor-pointer font-semibold text-white flex items-center justify-center gap-2 transition bg-green-600 hover:bg-green-700"
-                >
-                  <ShoppingCart className="w-5 h-5" />
-                  {t('Savatga')}
-                </button>
-                <button
-                  onClick={() => {
-                    if (product) {
-                      favouriteMutation.mutate(product.toString());
-                    }
-                  }}
-                  disabled={favouriteMutation.isPending}
-                  className={`p-4 rounded-lg border-2 transition ${
-                    data?.liked
-                      ? 'border-red-500 bg-red-50'
-                      : 'border-gray-300 hover:border-red-500'
-                  }`}
-                >
-                  <Heart
-                    className={`w-6 h-6 ${
-                      data?.liked
-                        ? 'fill-red-500 text-red-500'
-                        : 'text-gray-600'
                     }`}
-                  />
-                </button>
-              </div>
-
-              {/* Features */}
-              <div className="grid grid-cols-2 gap-4 border-t pt-6">
-                <div className="flex flex-col items-center text-center">
-                  <Truck className="w-8 h-8 text-blue-600 mb-2" />
-                  <span className="text-sm text-gray-600">
-                    {t('Bepul yetkazib berish')}
-                  </span>
-                </div>
-                <div className="flex flex-col items-center text-center">
-                  <Shield className="w-8 h-8 text-blue-600 mb-2" />
-                  <span className="text-sm text-gray-600">{t('Kafolat')}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Specifications */}
-        <div className="bg-white rounded-lg shadow-md p-6 mb-8">
-          <h2 className="text-2xl font-bold mb-4">{t('Xususiyatlari')}</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="flex justify-between border-b pb-2 gap-4">
-              <span className="text-gray-600">{t('Qadoq turi')}:</span>
-              <span className="font-semibold text-right">
-                {data?.unity.name}
-              </span>
-            </div>
-            {data?.brand && (
-              <div className="flex justify-between border-b pb-2 gap-4">
-                <span className="text-gray-600">{t('Brandi')}:</span>
-                <span className="font-semibold text-right">{data?.brand}</span>
-              </div>
-            )}
-            {data?.manufacturer && (
-              <div className="flex justify-between border-b pb-2 gap-4">
-                <span className="text-gray-600">
-                  {t('Ishlab chiqaruvchi')}:
-                </span>
-                <span className="font-semibold text-right">
-                  {data?.manufacturer}
-                </span>
-              </div>
-            )}
-            {data?.volume && (
-              <div className="flex justify-between border-b pb-2 gap-4">
-                <span className="text-gray-600">{t('Hajmi')}:</span>
-                <span className="font-semibold text-right">{data?.volume}</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Related Products */}
-        <div className="bg-white rounded-lg shadow-md p-6">
-          <h2 className="text-2xl font-bold mb-6">
-            {t("O'xshash mahsulotlar")}
-          </h2>
-          <Carousel className="w-full">
-            <CarouselContent className="pr-[12%] sm:pr-0">
-              {proLoad &&
-                Array.from({ length: 6 }).map((__, index) => (
-                  <CarouselItem
-                    key={index}
-                    className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
                   >
-                    <Card className="p-3 space-y-3 rounded-xl">
+                    <Image
-                      <Skeleton className="h-40 sm:h-48 md:h-56 w-full rounded-lg" />
+                      src={BASE_URL + img.image}
-                      <Skeleton className="h-4 w-3/4" />
+                      alt=""
-                      <Skeleton className="h-4 w-1/2" />
+                      width={120}
-                      <Skeleton className="h-10 w-full rounded-lg" />
+                      height={120}
-                    </Card>
+                      className="object-contain"
-                  </CarouselItem>
+                    />
-                ))}
+                  </button>
-              {recomendation &&
+                </CarouselItem>
-                !proLoad &&
+              ))}
-                recomendation
-                  .filter((product) => product.state === 'A')
-                  .map((product) => (
-                    <CarouselItem
-                      key={product.id}
-                      className="basis-1/2 sm:basis-1/3 md:basis-1/3 lg:basis-1/5 xl:basis-1/6 pb-2"
-                    >
-                      <ProductCard product={product} />
-                    </CarouselItem>
-                  ))}
             </CarouselContent>
-
-            <CarouselPrevious className="hidden lg:flex -top-12 right-12 w-9 h-9 bg-blue-600 text-white border-0" />
-            <CarouselNext className="hidden lg:flex -top-12 right-0 w-9 h-9 bg-blue-600 text-white border-0" />
           </Carousel>
         </div>
+
+        {/* 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>
+
+          {/* QUANTITY */}
+          <div className="flex items-center gap-4 mb-6">
+            <button
+              onClick={() => setQuantity((q) => Math.max(1, q - 1))}
+              className="p-2 border rounded"
+            >
+              <Minus />
+            </button>
+
+            <Input
+              value={quantity}
+              onChange={(e) => {
+                const v = Number(e.target.value);
+                if (v > 0) setQuantity(v);
+              }}
+              className="w-16 text-center"
+            />
+
+            <button
+              onClick={() => setQuantity((q) => q + 1)}
+              className="p-2 border rounded"
+            >
+              <Plus />
+            </button>
+          </div>
+
+          <div className="mb-6 font-semibold">
+            {t('Jami')}: {formatPrice(price * quantity, true)}
+          </div>
+
+          {/* ACTIONS */}
+          <div className="flex gap-3">
+            <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"
+            >
+              <ShoppingCart />
+              {t('Savatga')}
+            </button>
+
+            <button
+              onClick={() => favouriteMutation.mutate(product)}
+              className={`p-3 rounded-lg border ${
+                data?.liked ? 'border-red-500 bg-red-50' : 'border-gray-300'
+              }`}
+            >
+              <Heart
+                className={data?.liked ? 'fill-red-500 text-red-500' : ''}
+              />
+            </button>
+          </div>
+
+          {/* FEATURES */}
+          <div className="grid grid-cols-2 gap-4 mt-6 border-t pt-4">
+            <div className="text-center">
+              <Truck className="mx-auto mb-1" />
+              {t('Bepul yetkazib berish')}
+            </div>
+            <div className="text-center">
+              <Shield className="mx-auto mb-1" />
+              {t('Kafolat')}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* RELATED */}
+      <div className="mt-10 bg-white p-6 rounded-lg shadow">
+        <h2 className="text-2xl font-bold mb-4">{t("O'xshash mahsulotlar")}</h2>
+
+        <Carousel>
+          <CarouselContent>
+            {recLoad &&
+              Array.from({ length: 6 }).map((_, i) => (
+                <CarouselItem key={i} className="basis-1/5">
+                  <Skeleton className="h-60 w-full" />
+                </CarouselItem>
+              ))}
+
+            {recomendation
+              ?.filter((p) => p.state === 'A')
+              .map((p) => (
+                <CarouselItem key={p.id} className="basis-1/5">
+                  <ProductCard product={p} />
+                </CarouselItem>
+              ))}
+          </CarouselContent>
+
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
       </div>
     </div>
   );

src/features/profile/lib/order.ts

@@ -1,16 +1,16 @@
 // store/orderStore.ts
+import { CartItem } from '@/features/cart/lib/api';
 import { create } from 'zustand';
-import { OrderListRes } from './api';
 
 type State = {
-  order: OrderListRes | null;
+  order: CartItem | null;
 };
 
 type Actions = {
-  setOrder: (order: OrderListRes) => void;
+  setOrder: (order: CartItem) => void;
 };
 
-const getInitialOrder = (): OrderListRes | null => {
+const getInitialOrder = (): CartItem | null => {
   if (typeof window === 'undefined') return null; // SSR check
   const stored = localStorage.getItem('order');
   if (!stored) return null;
@@ -24,7 +24,7 @@ const getInitialOrder = (): OrderListRes | null => {
 
 const useOrderStore = create<State & Actions>((set) => ({
   order: getInitialOrder(),
-  setOrder: (order: OrderListRes) => {
+  setOrder: (order: CartItem) => {
     if (typeof window !== 'undefined') {
       localStorage.setItem('order', JSON.stringify(order));
     }

src/features/profile/ui/History.tsx

@@ -18,12 +18,10 @@ import { useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { order_api, OrderListRes } from '../lib/api';
-import useOrderStore from '../lib/order';
 
 const HistoryTabs = () => {
   const t = useTranslations();
   const searchParams = useSearchParams();
-  const { setOrder } = useOrderStore();
   const [page, setPage] = useState(1);
   const PAGE_SIZE = 36;
   const router = useRouter();
@@ -218,7 +216,7 @@ const HistoryTabs = () => {
                       size="sm"
                       onClick={() => {
                         router.push('/profile/refresh-order');
-                        setOrder(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"
                     >

src/features/profile/ui/RefreshOrder.tsx

@@ -73,15 +73,12 @@ const RefreshOrder = () => {
   const t = useTranslations();
   const queryClient = useQueryClient();
 
-  const initialCartItems = initialValues?.items.map((item) => ({
+  const initialCartItems = initialValues?.cart_item.map((item) => ({
     id: item.id,
     product_id: item.product.id,
     product_name: item.product.name,
-    product_price: item.price,
+    product_price: item.product.prices[0].price,
-    product_image:
+    product_image: item.product.images[0].image || '/placeholder.svg',
-      item.product.image ||
-      item.product.images?.[0]?.image ||
-      '/placeholder.svg',
     quantity: item.quantity,
   }));
 
@@ -90,7 +87,7 @@ const RefreshOrder = () => {
   const form = useForm<z.infer<typeof orderForm>>({
     resolver: zodResolver(orderForm),
     defaultValues: {
-      comment: initialValues?.comment,
+      comment: '',
       lat: '41.311081',
       long: '69.240562',
     },
@@ -100,7 +97,7 @@ const RefreshOrder = () => {
 
   const subtotal = cartItems
     ? cartItems.reduce(
-        (sum, item) => sum + item.product_price * item.quantity,
+        (sum, item) => sum + Number(item.product_price) * item.quantity,
         0,
       )
     : 0;
@@ -114,7 +111,7 @@ const RefreshOrder = () => {
       queryClient.refetchQueries({ queryKey: ['cart_items'] });
     },
     onError: () => {
-      toast.error('Xatolik yuz berdi', {
+      toast.error(t('Xatolik yuz berdi'), {
         richColors: true,
         position: 'top-center',
       });
@@ -205,7 +202,7 @@ const RefreshOrder = () => {
 
   const onSubmit = (value: z.infer<typeof orderForm>) => {
     if (!deliveryDate) {
-      toast.error('Yetkazib berish sanasini tanlang', {
+      toast.error(t('Yetkazib berish sanasini tanlang'), {
         richColors: true,
         position: 'top-center',
       });
@@ -213,7 +210,7 @@ const RefreshOrder = () => {
     }
 
     if (!selectedTimeSlot) {
-      toast.error('Yetkazib berish vaqtini tanlang', {
+      toast.error(t('Yetkazib berish vaqtini tanlang'), {
         richColors: true,
         position: 'top-center',
       });
@@ -221,25 +218,48 @@ const RefreshOrder = () => {
     }
 
     if (initialValues === null) {
-      toast.error('Savatcha bo‘sh', {
+      toast.error(t('Savatcha bo‘sh'), {
         richColors: true,
         position: 'top-center',
       });
       return;
     }
 
-    const items = initialValues.items.map((item) => ({
+    const order_products = initialValues.cart_item
-      product_id: Number(item.product.id),
+      .filter(
-      quantity: item.quantity,
+        (item) =>
-    }));
+          item.product.prices &&
+          item.product.prices.length > 0 &&
+          item.product.prices[0].price_type?.code &&
+          item.product.prices[0].price,
+      )
+      .map((item) => ({
+        inventory_kind: 'G',
+        product_code: item.product.code,
+        on_balance: 'Y',
+        order_quant: item.quantity,
+        price_type_code: item.product.prices![0].price_type.code,
+        product_price: item.product.prices![0].price,
+        warehouse_code: 'wh1',
+      }));
 
     mutate({
-      comment: value.comment,
+      order: [
-      items: items,
+        {
-      long: Number(value.long),
+          filial_code: 'dodge',
-      lat: Number(value.lat),
+          delivery_date: formatDate.format(deliveryDate, 'DD.MM.YYYY'),
-      date: formatDate.format(deliveryDate, 'YYYY-MM-DD'),
+          room_code: '100',
-      time: selectedTimeSlot,
+          deal_time: formatDate.format(deliveryDate, 'DD.MM.YYYY'),
+          robot_code: 'r2',
+          status: 'B#N',
+          sales_manager_code: '1',
+          person_code: '12345678',
+          currency_code: '860',
+          owner_person_code: '1234567',
+          note: value.comment,
+          order_products: order_products,
+        },
+      ],
     });
   };
 
@@ -513,7 +533,7 @@ const RefreshOrder = () => {
                           </p>
                           <p className="font-semibold text-sm">
                             {formatPrice(
-                              item.product_price * item.quantity,
+                              Number(item.product_price) * item.quantity,
                               true,
                             )}
                           </p>

src/features/search/ui/Search.tsx

@@ -1,10 +1,7 @@
 'use client';
 
 import { product_api } from '@/shared/config/api/product/api';
-import {
+import { ProductListResult } from '@/shared/config/api/product/type';
-  ProductListResult,
-  SearchDataPro,
-} from '@/shared/config/api/product/type';
 import { useRouter } from '@/shared/config/i18n/navigation';
 import { Input } from '@/shared/ui/input';
 import { ProductCard } from '@/widgets/categories/ui/product-card';
@@ -18,65 +15,73 @@ const SearchResult = () => {
   const router = useRouter();
   const t = useTranslations();
   const searchParams = useSearchParams();
-  const query = searchParams.get('q') || '';
-  const [searchRes, setSearchRes] = useState<
-    ProductListResult[] | SearchDataPro[] | []
-  >([]);
 
-  const { data: product } = useQuery({
+  const query = searchParams.get('q') || '';
+  const [inputValue, setInputValue] = useState(query);
+
+  /* 🔹 Input va URL sync */
+  useEffect(() => {
+    setInputValue(query);
+  }, [query]);
+
+  /* 🔹 Default product list */
+  const { data: productList, isLoading: listLoading } = useQuery({
     queryKey: ['product_list'],
     queryFn: () => product_api.list({ page: 1, page_size: 12 }),
-    select(data) {
+    select: (res) => res.data.results,
-      return data.data.results;
+    enabled: !query,
-    },
   });
 
-  const { data, isLoading } = useQuery({
+  /* 🔹 Search query */
+  const { data: searchList, isLoading: searchLoading } = useQuery({
     queryKey: ['search', query],
-    queryFn: () => product_api.search({ search: query, page: 1, page_szie: 5 }),
+    queryFn: () =>
-    select(data) {
+      product_api.search({
-      return data.data.products;
+        search: query,
+        page: 1,
+        page_size: 12,
+      }),
+    select: (res) => {
+      return res.data.products;
     },
     enabled: !!query,
   });
 
-  useEffect(() => {
+  const data = query ? (searchList ?? []) : (productList ?? []);
-    if (data) {
+  const isLoading = query ? searchLoading : listLoading;
-      setSearchRes(data);
-    } else if (query.length === 0 && product && product.length > 0) {
-      setSearchRes(product);
-    } else {
-      setSearchRes([]);
-    }
-  }, [product, data]);
 
+  /* 🔹 Handlers */
   const handleSearch = (value: string) => {
+    setInputValue(value);
+
     if (!value.trim()) {
       router.push('/search');
       return;
     }
+
     router.push(`/search?q=${encodeURIComponent(value)}`);
   };
 
   const clearSearch = () => {
+    setInputValue('');
     router.push('/search');
   };
 
   return (
     <div className="custom-container min-h-screen">
-      {/* Search input (mobile) */}
+      {/* 🔍 Search input */}
-      <div className="lg:hidden mb-6">
+      <div className="mb-6">
         <div className="relative">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
 
           <Input
-            value={query}
+            value={inputValue}
             placeholder={t('Mahsulot nomi')}
             onChange={(e) => handleSearch(e.target.value)}
             className="w-full pl-10 pr-10 h-12"
           />
 
-          {query && (
+          {inputValue && (
             <button
               onClick={clearSearch}
               className="absolute right-3 top-1/2 -translate-y-1/2"
@@ -87,15 +92,17 @@ const SearchResult = () => {
         </div>
       </div>
 
+      {/* 🔹 Content */}
       {isLoading ? (
-        <div className="text-center py-20">{t('Yuklanmoqda')}</div>
+        <div className="text-center py-20">{t('Yuklanmoqda')}...</div>
-      ) : searchRes && searchRes.length > 0 ? (
+      ) : data.length > 0 ? (
         <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
-          {searchRes
+          {data.map((products) => (
-            .filter((product) => product.is_active)
+            <ProductCard
-            .map((product) => (
+              product={products as ProductListResult}
-              <ProductCard key={product.id} product={product} />
+              key={(products as ProductListResult).id}
-            ))}
+            />
+          ))}
         </div>
       ) : (
         <div className="text-center py-20">{t('Natija topilmadi')}</div>

src/shared/config/api/URLs.ts

@@ -22,4 +22,5 @@ export const API_URLS = {
   CreateOrder: `${API_V}orders/order/create/`,
   OrderList: `${API_V}orders/order/list/`,
   Refresh_Token: `${API_V}accounts/refresh/token/`,
+  Get_Me: `${API_V}accounts/me/`,
 };

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

@@ -42,7 +42,7 @@ export const product_api = {
   async search(params: {
     search?: string;
     page?: number;
-    page_szie?: number;
+    page_size?: number;
   }): Promise<AxiosResponse<SearchData>> {
     const res = await httpClient.get(`${API_URLS.Search_Product}`, { params });
     return res;

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

@@ -41,27 +41,35 @@ export interface ProductListResult {
 }
 
 export interface ProductDetail {
-  brand: string;
-  description: string;
-  expires_date: null | string;
   id: number;
-  image: string;
+  images: { id: number; image: string }[];
-  images: {
-    id: string;
-    image: string;
-  }[];
-  is_active: boolean;
   liked: boolean;
-  manufacturer: string;
+  meansurement: null | string;
-  min_quantity: number;
+  inventory_id: null | string;
+  product_id: string;
+  code: string;
   name: string;
-  price: number;
+  short_name: string;
-  return_date: null | string;
+  weight_netto: null | string;
-  volume: string;
+  weight_brutto: null | string;
-  unity: {
+  litr: null | string;
-    id: string;
+  box_type_code: null | string;
-    name: string;
+  box_quant: null | string;
-  };
+  groups: number[];
+  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 }[];
+  prices: {
+    id: number;
+    price: string;
+    price_type: {
+      id: number;
+      name: string;
+    };
+  }[];
 }
 
 export interface SearchData {
@@ -69,18 +77,7 @@ export interface SearchData {
 }
 
 export interface SearchDataPro {
-  id: number;
+  products: ProductListResult;
-  name: string;
-  image: string;
-  price: number;
-  description: string;
-  liked: boolean;
-  unity: {
-    id: string;
-    name: string;
-  };
-  min_quantity: number;
-  is_active: boolean;
 }
 
 export interface FavouriteProduct {
@@ -95,21 +92,32 @@ export interface FavouriteProduct {
 
 export interface FavouriteProductRes {
   id: number;
-  name: string;
+  images: { id: number; image: string }[];
-  image: string;
-  price: number;
-  description: string;
-  unity: {
-    id: string;
-    name: string;
-  };
-  min_quantity: number;
-  is_active: boolean;
   liked: boolean;
-  brand: null | string;
+  meansurement: null | string;
-  return_date: null | string;
+  inventory_id: null | string;
-  expires_date: null | string;
+  product_id: string;
-  manufacturer: null | string;
+  code: string;
-  volume: null | string;
+  name: string;
-  images: { id: string; image: string }[];
+  short_name: string;
+  weight_netto: null | string;
+  weight_brutto: null | string;
+  litr: null | string;
+  box_type_code: null | string;
+  box_quant: null | string;
+  groups: number[];
+  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 }[];
+  prices: {
+    id: number;
+    price: string;
+    price_type: {
+      id: number;
+      name: string;
+    };
+  }[];
 }

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

@@ -128,12 +128,22 @@
   "Tez yetkazib berish 1-2 kun ichida": "Быстрая доставка в течение 1-2 дней",
   "Xavfsiz to'lov usullari": "Безопасные способы оплаты",
   "Buyurtma qabul qilindi!": "Заказ принят!",
+  "Xatolik yuz berdi": "Произошла ошибка",
   "Buyurtma raqami": "Номер заказа",
   "Buyurtmangiz muvaffaqiyatli qabul qilindi": "Ваш заказ успешно принят.",
   "Bosh sahifaga qaytish": "Вернуться на главную",
   "Ma'lumotlaringizni to'ldiring": "Заполните ваши данные",
   "Shaxsiy ma'lumotlar": "Личные данные",
   "Ism": "Имя",
+  "Savatcha bo'sh": "Корзина пустая",
+  "Yetkazib berish sanasini tanlang": "Выберите дату доставки",
+  "Yetkazib berish vaqtini tanlang": "Выберите время доставки",
+  "Yetkazib berish vaqti": "Время доставки",
+  "Tanlangan yetkazib berish vaqti": "Выбранное время доставки",
+  "Vaqt oralig'i": "Интервал времени",
+  "Vaqtni tanlang": "Выберите время",
+  "Sanani tanlang": "Выберите дату",
+  "Yetkazib berish sanasi": "Дата доставки",
   "Ismingiz": "Ваше имя",
   "Familiya": "Имя Фамилия",
   "Familiyangiz": "Ваше имя и фамилия",

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

@@ -163,7 +163,16 @@ declare const messages: {
   'Majburiy maydon': 'Majburiy maydon';
   'Xato raqam kiritildi': 'Xato raqam kiritildi';
   Orqaga: 'Orqaga';
-
+  'Xatolik yuz berdi': 'Xatolik yuz berdi';
+  "Savatcha bo'sh": "Savatcha bo'sh";
+  'Sanani tanlang': 'Sanani tanlang';
+  'Vaqtni tanlang': 'Vaqtni tanlang';
+  'Yetkazib berish sanasi': 'Yetkazib berish sanasi';
+  'Yetkazib berish sanasini tanlang': 'Yetkazib berish sanasini tanlang';
+  'Yetkazib berish vaqtini tanlang': 'Yetkazib berish vaqtini tanlang';
+  'Tanlangan yetkazib berish vaqti': 'Tanlangan yetkazib berish vaqti';
+  'Yetkazib berish vaqti': 'Yetkazib berish vaqti';
+  "Vaqt oralig'i": "Vaqt oralig'i";
   "Sevimlilar bo'sh": "Sevimlilar bo'sh";
   "Hali hech qanday mahsulotni sevimlilarga qo'shmadingiz": "Hali hech qanday mahsulotni sevimlilarga qo'shmadingiz. Mahsulotlar ro'yxatiga o'ting va yoqqan mahsulotlaringizni saqlang.";
   'Sevimli mahsulotlar': 'Sevimli mahsulotlar';

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

@@ -160,7 +160,16 @@
   "Majburiy maydon": "Majburiy maydon",
   "Xato raqam kiritildi": "Xato raqam kiritildi",
   "Orqaga": "Orqaga",
-
+  "Xatolik yuz berdi": "Xatolik yuz berdi",
+  "Savatcha bo'sh": "Savatcha bo'sh",
+  "Sanani tanlang": "Sanani tanlang",
+  "Vaqtni tanlang": "Vaqtni tanlang",
+  "Yetkazib berish sanasi": "Yetkazib berish sanasi",
+  "Yetkazib berish sanasini tanlang": "Yetkazib berish sanasini tanlang",
+  "Yetkazib berish vaqtini tanlang": "Yetkazib berish vaqtini tanlang",
+  "Tanlangan yetkazib berish vaqti": "Tanlangan yetkazib berish vaqti",
+  "Yetkazib berish vaqti": "Yetkazib berish vaqti",
+  "Vaqt oralig'i": "Vaqt oralig'i",
   "Sevimlilar bo'sh": "Sevimlilar bo'sh",
   "Hali hech qanday mahsulotni sevimlilarga qo'shmadingiz": "Hali hech qanday mahsulotni sevimlilarga qo'shmadingiz. Mahsulotlar ro'yxatiga o'ting va yoqqan mahsulotlaringizni saqlang.",
   "Sevimli mahsulotlar": "Sevimli mahsulotlar",

src/widgets/categories/lib/hook.ts

@@ -0,0 +1,19 @@
+import {
+  FavouriteProductRes,
+  ProductListResult,
+} from '@/shared/config/api/product/type';
+import { create } from 'zustand';
+
+type State = {
+  product: ProductListResult | FavouriteProductRes | null;
+};
+
+type Actions = {
+  setProduct: (product: ProductListResult | FavouriteProductRes) => void;
+};
+
+export const useProductStore = create<State & Actions>((set) => ({
+  product: null,
+  setProduct: (product: ProductListResult | FavouriteProductRes) =>
+    set(() => ({ product })),
+}));

src/widgets/categories/ui/animation.tsx

@@ -186,9 +186,9 @@ const Animation: React.FC<AnimationProps> = ({
         <div className="relative w-full h-full bg-white">
           <Image
             src={
-              product?.image?.includes(BASE_URL)
+              product?.images[0].image?.includes(BASE_URL)
-                ? product.image
+                ? product.images[0].image
-                : BASE_URL + product.image
+                : BASE_URL + product.images[0].image
             }
             width={500}
             height={500}

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

@@ -1,8 +1,12 @@
 'use client';
 
+import LogosProduct from '@/assets/product.png';
 import { cart_api } from '@/features/cart/lib/api';
 import { product_api } from '@/shared/config/api/product/api';
-import { ProductListResult } from '@/shared/config/api/product/type';
+import {
+  FavouriteProductRes,
+  ProductListResult,
+} from '@/shared/config/api/product/type';
 import { BASE_URL } from '@/shared/config/api/URLs';
 import { useRouter } from '@/shared/config/i18n/navigation';
 import { useCartId } from '@/shared/hooks/cartId';
@@ -19,15 +23,16 @@ import { useTranslations } from 'next-intl';
 import Image from 'next/image';
 import { MouseEvent, useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import LogosProduct from '@/assets/product.png';
+import { useProductStore } from '../lib/hook';
 
 export function ProductCard({
   product,
   error,
 }: {
-  product: ProductListResult;
+  product: ProductListResult | FavouriteProductRes;
   error?: boolean;
 }) {
+  const { setProduct } = useProductStore();
   const [quantity, setQuantity] = useState<number | ''>(0);
   const router = useRouter();
   const queryClient = useQueryClient();
@@ -101,6 +106,7 @@ export function ProductCard({
 
     onSuccess: () => {
       queryClient.refetchQueries({ queryKey: ['product_list'] });
+      queryClient.refetchQueries({ queryKey: ['list'] });
       queryClient.refetchQueries({ queryKey: ['favourite_product'] });
       queryClient.refetchQueries({ queryKey: ['search'] });
       queryClient.refetchQueries({ queryKey: ['product_detail', product] });
@@ -126,7 +132,7 @@ export function ProductCard({
       if (cartItemId) {
         updateCartItem({
           body: { quantity: newQty },
-          cart_item_id: cartItemId,
+          cart_item_id: cartItemId.toString(),
         });
       }
     }
@@ -141,21 +147,21 @@ export function ProductCard({
     const newQty = currentQty - 1;
 
     const cartItemId = cartItems.data.cart_item.find(
-      (item) => Number(item.product_id) === product.id,
+      (item) => Number(item.product.id) === product.id,
     )?.id;
 
     if (!cartItemId) return;
 
     if (newQty <= 0) {
       setQuantity(0);
-      deleteCartItem({ cart_item_id: cartItemId });
+      deleteCartItem({ cart_item_id: cartItemId.toString() });
       return;
     }
 
     setQuantity(newQty);
     updateCartItem({
       body: { quantity: newQty },
-      cart_item_id: cartItemId,
+      cart_item_id: cartItemId.toString(),
     });
   };
 
@@ -176,6 +182,7 @@ export function ProductCard({
         onClick={(e) => {
           e.stopPropagation();
           router.push(`/product/${product.id}`);
+          setProduct(product);
         }}
         className="group relative p-0 h-full flex flex-col overflow-hidden border border-slate-200 bg-white shadow-sm hover:shadow-lg transition-all rounded-xl sm:rounded-2xl hover:border-green-400"
       >
@@ -299,14 +306,14 @@ export function ProductCard({
                     if (!cartItems) return;
 
                     const cartItemId = cartItems.data.cart_item.find(
-                      (item) => Number(item.product_id) === product.id,
+                      (item) => Number(item.product.id) === product.id,
                     )?.id;
 
                     if (!cartItemId) return;
 
                     // ❗ 0 bo‘lsa — DELETE (darhol)
                     if (num === 0) {
-                      deleteCartItem({ cart_item_id: cartItemId });
+                      deleteCartItem({ cart_item_id: cartItemId.toString() });
                       return;
                     }
 
@@ -314,7 +321,7 @@ export function ProductCard({
                     debounceRef.current = setTimeout(() => {
                       updateCartItem({
                         body: { quantity: num },
-                        cart_item_id: cartItemId,
+                        cart_item_id: cartItemId.toString(),
                       });
                     }, 500);
                   }}

src/widgets/navbar/ui/SearchResult.tsx

@@ -1,3 +1,6 @@
+'use client';
+
+import LogosProduct from '@/assets/product.png';
 import { product_api } from '@/shared/config/api/product/api';
 import {
   ProductListResult,
@@ -11,7 +14,6 @@ import { useQuery } from '@tanstack/react-query';
 import { PackageOpen } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
-import { Fragment, useEffect, useState } from 'react';
 
 type SearchResultProps = {
   query: string;
@@ -20,55 +22,54 @@ type SearchResultProps = {
 export const SearchResult = ({ query }: SearchResultProps) => {
   const router = useRouter();
   const t = useTranslations();
-  const [searchRes, setSearchRes] = useState<
-    ProductListResult[] | SearchDataPro[] | []
-  >([]);
 
-  const { data: product } = useQuery({
+  /* 🔹 Default products - query bo'lmaganda */
+  const { data: products, isLoading: isLoadingDefault } = useQuery<
+    ProductListResult[]
+  >({
     queryKey: ['product_list'],
-    queryFn: () => product_api.list({ page: 1, page_size: 99 }),
+    queryFn: async () => {
-    select(data) {
+      const res = await product_api.list({ page: 1, page_size: 10 });
-      return data.data.results;
+      return res.data.results;
     },
+    enabled: !query,
   });
 
-  const { data, isLoading } = useQuery({
+  /* 🔹 Search - query bo'lganda */
+  const { data: searchData, isLoading: isLoadingSearch } = useQuery<
+    ProductListResult[]
+  >({
     queryKey: ['search', query],
-    queryFn: () => product_api.search({ search: query, page: 1, page_szie: 5 }),
+    queryFn: async () => {
-    select(data) {
+      const res = await product_api.search({
-      return data.data.products;
+        search: query,
+        page: 1,
+        page_size: 10,
+      });
+      // API response strukturasiga qarab to'g'rilash kerak
+      // Agar res.data.products array bo'lsa:
+
+      return Array.isArray(res.data.products)
+        ? res.data.products
+        : (res.data.products as SearchDataPro[]).map(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (item: any) => item.products || item,
+          );
     },
-    enabled: !!query,
+    enabled: !!query && query.trim().length > 0,
   });
 
-  useEffect(() => {
+  const isLoading = query ? isLoadingSearch : isLoadingDefault;
-    if (data) {
+  const list: ProductListResult[] = query
-      setSearchRes(data);
+    ? (searchData ?? [])
-    } else if (product && product.length > 0) {
+    : (products ?? []);
-      setSearchRes(product);
-    } else {
-      setSearchRes([]);
-    }
-  }, [product, data]);
-
-  if (searchRes && searchRes.length === 0) {
-    return (
-      <div className="flex flex-col justify-center items-center min-h-[300px] max-h-[600px] gap-2">
-        <PackageOpen className="size-22 text-muted-foreground" />
-        <p className="text-lg text-muted-foreground text-center">
-          {t('Hech narsa topilmadi')}
-        </p>
-      </div>
-    );
-  }
 
   if (isLoading) {
     return (
       <div className="space-y-3">
         {Array.from({ length: 5 }).map((_, i) => (
-          <div key={i} className="flex items-center gap-3 p-2 rounded-lg">
+          <div key={i} className="flex items-center gap-3 p-2">
             <Skeleton className="w-16 h-16 rounded-md" />
-
             <div className="flex-1 space-y-2">
               <Skeleton className="h-4 w-[70%]" />
               <Skeleton className="h-3 w-[40%]" />
@@ -79,45 +80,62 @@ export const SearchResult = ({ query }: SearchResultProps) => {
     );
   }
 
+  if (!list.length) {
+    return (
+      <div className="flex flex-col justify-center items-center min-h-[300px] gap-2">
+        <PackageOpen className="size-20 text-muted-foreground" />
+        <p className="text-lg text-muted-foreground">
+          {query ? t('Hech narsa topilmadi') : t('Mahsulotlar mavjud emas')}
+        </p>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-3">
-      <p className="text-sm font-semibold text-foreground">
+      <p className="text-sm font-semibold text-slate-700">
-        {query.length > 0 ? t('Qidiruv natijalari') : t('Tavsiya etiladi')}
+        {query ? t('Qidiruv natijalari') : t('Tavsiya etiladi')}
       </p>
 
-      {searchRes &&
+      {list
-        searchRes
+        .filter((item) => item.state === 'A')
-          .filter((product) => product.is_active)
+        .slice(0, 5)
-          .slice(0, 5)
+        .map((product) => {
-          .map((product, index) => (
+          const image =
-            <Fragment key={index}>
+            product.images.length > 0
-              <div
+              ? product?.images[0].image?.includes(BASE_URL)
-                className="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-100 cursor-pointer transition"
+                ? product.images[0].image
-                onClick={() => router.push(`/product/${product.id}`)}
+                : BASE_URL + product.images[0].image
-              >
+              : LogosProduct;
-                <Image
+          const price = product.prices?.[0]?.price;
-                  width={500}
-                  height={500}
-                  src={
-                    product.image.includes(BASE_URL)
-                      ? product.image
-                      : BASE_URL + product.image
-                  }
-                  alt={product.name}
-                  className="w-16 h-16 rounded-md object-contain"
-                />
 
-                <div className="flex-1">
+          return (
-                  <p className="text-sm font-medium text-slate-800">
+            <div
-                    {product.name}
+              key={product.id}
+              className="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-100 cursor-pointer transition-colors"
+              onClick={() => router.push(`/product/${product.id}`)}
+            >
+              <Image
+                src={image}
+                alt={product.name}
+                width={64}
+                height={64}
+                className="w-16 h-16 rounded-md object-contain bg-white border border-slate-100"
+              />
+
+              <div className="flex-1">
+                <p className="text-sm font-medium text-slate-900 line-clamp-2">
+                  {product.name}
+                </p>
+                {price && (
+                  <p className="text-sm font-semibold text-[#57A595] mt-1">
+                    {formatPrice(price)}
                   </p>
-                  <p className="text-xs text-slate-600">
+                )}
-                    {formatPrice(product.price)}
-                  </p>
-                </div>
               </div>
-            </Fragment>
+            </div>
-          ))}
+          );
+        })}
     </div>
   );
 };

src/widgets/navbar/ui/index.tsx

@@ -17,7 +17,9 @@ import {
   SheetTitle,
   SheetTrigger,
 } from '@/shared/ui/sheet';
+import { banner_api } from '@/widgets/welcome/lib/api';
 import { categoryList } from '@/widgets/welcome/lib/data';
+import { userStore } from '@/widgets/welcome/lib/hook';
 import { PopoverTrigger } from '@radix-ui/react-popover';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import {
@@ -53,6 +55,7 @@ const Navbar = () => {
   const { cart_id } = useCartId();
   const [cartQuenty, setCartQuenty] = useState<number>(0);
   const { setCartId } = useCartId();
+  const { setUser } = userStore();
 
   const { mutate: cart } = useMutation({
     mutationFn: () => cart_api.create(),
@@ -61,6 +64,17 @@ const Navbar = () => {
     },
   });
 
+  const { data: me } = useQuery({
+    queryKey: ['get_me'],
+    queryFn: () => banner_api.getMe(),
+  });
+
+  useEffect(() => {
+    if (me) {
+      setUser(me.data);
+    }
+  }, [me]);
+
   useEffect(() => {
     if (token) {
       cart();

src/widgets/welcome/lib/api.ts

@@ -3,9 +3,36 @@ import { API_URLS } from '@/shared/config/api/URLs';
 import { AxiosResponse } from 'axios';
 import { BannerRes } from './type';
 
+export interface UserRes {
+  address: null | string;
+  created_at: string;
+  date_joined: string;
+  email: string;
+  first_name: string;
+  gender: 'M' | 'F';
+  groups: [];
+  id: null;
+  is_active: boolean;
+  is_staff: boolean;
+  is_superuser: boolean;
+  last_login: null | string;
+  last_name: string;
+  middle_name: null | string;
+  password: string;
+  person_id: number;
+  region: null | string;
+  tg_id: null | string;
+  user_permissions: [];
+  username: string;
+}
+
 export const banner_api = {
   async getBanner(): Promise<AxiosResponse<BannerRes[]>> {
     const res = await httpClient.get(API_URLS.Banner);
     return res;
   },
+  async getMe(): Promise<AxiosResponse<UserRes>> {
+    const res = await httpClient.get(API_URLS.Get_Me);
+    return res;
+  },
 };

src/widgets/welcome/lib/hook.ts

@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+import { UserRes } from './api';
+
+type State = {
+  user: UserRes | null;
+};
+
+type Actions = {
+  setUser: (qty: UserRes) => void;
+};
+
+export const userStore = create<State & Actions>((set) => ({
+  user: null,
+  setUser: (user: UserRes) => set(() => ({ user })),
+}));

src/widgets/welcome/ui/index.tsx

@@ -1,10 +1,13 @@
 'use client';
 
+import CategoryImage from '@/assets/water-bottle.png';
 import { category_api } from '@/shared/config/api/category/api';
+import { product_api } from '@/shared/config/api/product/api';
 import { BASE_URL } from '@/shared/config/api/URLs';
 import { Link } from '@/shared/config/i18n/navigation';
 import { AspectRatio } from '@/shared/ui/aspect-ratio';
 import { Button } from '@/shared/ui/button';
+import { Card } from '@/shared/ui/card';
 import {
   Carousel,
   CarouselContent,
@@ -13,13 +16,13 @@ import {
 } from '@/shared/ui/carousel';
 import { Skeleton } from '@/shared/ui/skeleton';
 import { CategoryCarousel } from '@/widgets/categories/ui/category-carousel';
+import { ProductCard } from '@/widgets/categories/ui/product-card';
 import { useQuery } from '@tanstack/react-query';
 import { AlertCircle, ChevronLeft, ChevronRight } from 'lucide-react';
 import Image from 'next/image';
 import { useState } from 'react';
 import 'swiper/css';
 import { banner_api } from '../lib/api';
-import CategoryImage from '@/assets/water-bottle.png';
 
 const Welcome = () => {
   const [api, setApi] = useState<CarouselApi>();
@@ -65,6 +68,18 @@ const Welcome = () => {
     apiCat?.scrollNext();
   };
 
+  const { data: product, isLoading: productLoading } = useQuery({
+    queryKey: ['list'],
+    queryFn: () =>
+      product_api.list({
+        page: 1,
+        page_size: 16,
+      }),
+    select(data) {
+      return data.data;
+    },
+  });
+
   return (
     <>
       <div className="custom-container">
@@ -166,6 +181,39 @@ const Welcome = () => {
           </Button>
         </Carousel>
       </div>
+      <section className="relative custom-container mt-5 justify-center items-center border-b border-slate-200">
+        <Carousel className="w-full mt-2" setApi={setApi}>
+          <CarouselContent className="pr-[12%] sm:pr-0">
+            {productLoading &&
+              Array.from({ length: 6 }).map((__, index) => (
+                <CarouselItem
+                  key={index}
+                  className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
+                >
+                  <Card className="p-3 space-y-3 rounded-xl">
+                    <Skeleton className="h-40 sm:h-48 md:h-56 w-full rounded-lg" />
+                    <Skeleton className="h-4 w-3/4" />
+                    <Skeleton className="h-4 w-1/2" />
+                    <Skeleton className="h-10 w-full rounded-lg" />
+                  </Card>
+                </CarouselItem>
+              ))}
+            {product &&
+              !isLoading &&
+              product.results
+                .filter((product) => product.state === 'A')
+                .map((product) => (
+                  <CarouselItem
+                    key={product.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={product} />
+                  </CarouselItem>
+                ))}
+          </CarouselContent>
+        </Carousel>
+      </section>
+
       {category &&
         category
           .slice(0, 6)