bug fixed

src/features/product/ui/Product.tsx

@@ -56,9 +56,11 @@ const ProductDetail = () => {
     select: (res) => res.data.results,
   });
 
-  /* ---------------- PRICE ---------------- */
+  /* ---------------- DERIVED DATA ---------------- */
   const price = Number(data?.prices?.[0]?.price || 0);
 
+  const category = 'Ichimliklar'; // default category
+
   /* ---------------- SYNC CART QUANTITY ---------------- */
   useEffect(() => {
     if (!data || !cartItems) return;
@@ -103,8 +105,8 @@ const ProductDetail = () => {
       toast.success(t("Mahsulot savatga qo'shildi"), { richColors: true });
     },
     onError: (err: AxiosError) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const msg = (err.response?.data as any)?.detail || err.message;
+      const msg =
+        (err.response?.data as { detail: string })?.detail || err.message;
       toast.error(msg, { richColors: true });
     },
   });
@@ -124,6 +126,12 @@ const ProductDetail = () => {
       queryClient.invalidateQueries({ queryKey: ['product_detail'] });
       queryClient.invalidateQueries({ queryKey: ['product_list'] });
     },
+    onError: () => {
+      toast.error(t('Tizimga kirilmagan'), {
+        richColors: true,
+        position: 'top-center',
+      });
+    },
   });
 
   /* ---------------- HANDLERS ---------------- */
@@ -168,20 +176,20 @@ const ProductDetail = () => {
             unoptimized
             height={500}
             src={
-              data && data?.images?.length !== 0
+              data?.images?.length
                 ? BASE_URL + data.images[selectedImage]?.image
-                : data?.images[selectedImage]?.image
-                  ? BASE_URL + data.images[selectedImage]?.image
-                  : '/placeholder.svg'
+                : '/placeholder.svg'
             }
             alt={data?.name || 'logo'}
             className="w-full h-[400px] object-contain"
           />
-
           <Carousel className="mt-4">
             <CarouselContent>
-              {data?.images?.map((img, i) => (
-                <CarouselItem key={img.id} className="basis-1/4">
+              {(data?.images?.length
+                ? data.images
+                : [{ id: 0, image: '/placeholder.svg' }]
+              ).map((img, i) => (
+                <CarouselItem key={i} className="basis-1/4">
                   <button
                     onClick={() => setSelectedImage(i)}
                     className={`border rounded-lg p-1 ${
@@ -191,12 +199,12 @@ const ProductDetail = () => {
                     }`}
                   >
                     <Image
-                      src={BASE_URL + img.image}
-                      alt=""
-                      unoptimized
+                      src={img.image!}
+                      alt={data?.name || 'Mahsulot rasmi'}
                       width={120}
                       height={120}
                       className="object-contain"
+                      unoptimized
                     />
                   </button>
                 </CarouselItem>
@@ -215,7 +223,13 @@ const ProductDetail = () => {
 
           <p className="text-gray-600 mb-6">{data?.short_name}</p>
 
-          {/* QUANTITY */}
+          <div className="grid grid-cols-2 gap-4 mb-6">
+            <div>
+              <span className="text-gray-500">Kategoriya:</span>
+              <p className="font-semibold">{category}</p>
+            </div>
+          </div>
+
           <div className="flex items-center gap-4 mb-6">
             <button
               onClick={() => setQuantity((q) => Math.max(1, q - 1))}
@@ -246,7 +260,7 @@ const ProductDetail = () => {
           </div>
 
           {/* ACTIONS */}
-          <div className="flex gap-3">
+          <div className="flex gap-3 mb-6">
             <button
               onClick={handleAddToCart}
               className="flex-1 bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg flex justify-center items-center gap-2"
@@ -256,7 +270,7 @@ const ProductDetail = () => {
             </button>
 
             <button
-              onClick={() => favouriteMutation.mutate(product)}
+              onClick={() => favouriteMutation.mutate(String(data?.id))}
               className={`p-3 rounded-lg border ${
                 data?.liked ? 'border-red-500 bg-red-50' : 'border-gray-300'
               }`}