Merged in cr/prod-detail (pull request #449)

Cr/prod detail

5 files changed, 624 insertions, 250 deletions

diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx
index 95bc1d88..1cb58a75 100644
--- a/src-migrate/modules/product-detail/components/AddToCart.tsx
+++ b/src-migrate/modules/product-detail/components/AddToCart.tsx
@@ -1,6 +1,6 @@
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
 import style from '../styles/price-action.module.css';
-import { Button, Link, useToast } from '@chakra-ui/react';
+import { Button, color, Link, useToast } from '@chakra-ui/react';
 import product from 'next-seo/lib/jsonld/product';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -17,6 +17,9 @@ import formatCurrency from '~/libs/formatCurrency';
 import { useProductDetail } from '../stores/useProductDetail';
 import { gtagAddToCart } from '@/core/utils/googleTag';
 import axios from 'axios';
+import useDevice from '@/core/hooks/useDevice';
+import MobileView from '@/core/components/views/MobileView';
+import DesktopView from '@/core/components/views/DesktopView';
 type Props = {
   variantId: number | null;
   quantity?: number;
@@ -39,6 +42,8 @@ const AddToCart = ({
     isClosable: true,
   });
 
+  const { isMobile, isDesktop } = useDevice();
+
   const { askAdminUrl } = useProductDetail();
 
   const [product, setProducts] = useState(products);
@@ -158,24 +163,39 @@ const AddToCart = ({
 
   const btnConfig = {
     add_to_cart: {
-      colorScheme: 'yellow',
+      colorScheme: 'red',
+      variant: 'outline',
       text: 'Keranjang',
     },
     buy: {
       colorScheme: 'red',
-      text: 'Beli',
+      variant: 'solid',
+      text: isDesktop ? 'Beli' : 'Beli Sekarang',
     },
   };
 
   return (
     <div className='w-full'>
+      <MobileView>
+      <Button
+        onClick={handleButton}
+        colorScheme={btnConfig[source].colorScheme}
+        variant= {btnConfig[source].variant}
+        className='w-full'
+      >
+        {btnConfig[source].text}
+      </Button>
+      </MobileView>
+      <DesktopView>
       <Button
         onClick={handleButton}
         colorScheme={btnConfig[source].colorScheme}
+        variant= {btnConfig[source].variant}
         className='w-full'
       >
         {btnConfig[source].text}
       </Button>
+      </DesktopView>
       <BottomPopup
         className='!container'
         title='Berhasil Ditambahkan'
diff --git a/src-migrate/modules/product-detail/components/AddToQuotation.tsx b/src-migrate/modules/product-detail/components/AddToQuotation.tsx
index f9b6c2b3..ebfcef32 100644
--- a/src-migrate/modules/product-detail/components/AddToQuotation.tsx
+++ b/src-migrate/modules/product-detail/components/AddToQuotation.tsx
@@ -16,6 +16,7 @@ import { useProductCartContext } from '@/contexts/ProductCartContext';
 import { createSlug } from '~/libs/slug';
 import formatCurrency from '~/libs/formatCurrency';
 import { useProductDetail } from '../stores/useProductDetail';
+import useDevice from '@/core/hooks/useDevice';
 
 type Props = {
   variantId: number | null;
@@ -40,6 +41,7 @@ const AddToQuotation = ({
   });
 
   const { askAdminUrl } = useProductDetail();
+  const { isMobile, isDesktop } = useDevice();
 
   const [product, setProducts] = useState(products);
   const [status, setStatus] = useState<Status>('idle');
@@ -104,12 +106,13 @@ const AddToQuotation = ({
 
   const btnConfig = {
     add_to_cart: {
-      colorScheme: 'yellow',
-
+      colorScheme: 'red',
+      variant: 'outline',
       text: 'Keranjang',
     },
     buy: {
       colorScheme: 'red',
+      variant: 'solid',
       text: 'Beli',
     },
   };
@@ -123,13 +126,13 @@ const AddToQuotation = ({
         className='w-full border-2 p-2 gap-1 hover:bg-slate-100 flex items-center'
       >
         <ImageNext
-          src='/images/writing.png'
+          src= {isDesktop ? '/images/doc_red.svg' : '/images/doc.svg'}
           alt='penawaran instan'
           className=''
           width={25}
           height={25}
         />
-        Penawaran Harga Instan
+        {isDesktop ? 'Penawaran Harga Instan' : ''}
       </Button>
       <BottomPopup
         className='!container'
diff --git a/src-migrate/modules/product-detail/components/Breadcrumb.tsx b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
index f41859a9..0e263fe9 100644
--- a/src-migrate/modules/product-detail/components/Breadcrumb.tsx
+++ b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
@@ -1,31 +1,129 @@
-import React, { Fragment } from 'react'
-import { useQuery } from 'react-query'
-import { getProductCategoryBreadcrumb } from '~/services/product'
-import Link from 'next/link'
-import { createSlug } from '~/libs/slug'
+import React, { Fragment } from 'react';
+import { useQuery } from 'react-query';
+import Link from 'next/link';
+import { getProductCategoryBreadcrumb } from '~/services/product';
+import { createSlug } from '~/libs/slug';
+import useDevice from '@/core/hooks/useDevice';
 
-type Props = {
-  id: number,
-  name: string
-}
+type Props = { id: number; name: string };
 
 const Breadcrumb = ({ id, name }: Props) => {
-  const query = useQuery({
-    queryKey: ['product-category-breadcrumb'],
+  const { isDesktop, isMobile } = useDevice();
+
+  const { data: breadcrumbs = [] } = useQuery({
+    queryKey: ['product-category-breadcrumb', id],
     queryFn: () => getProductCategoryBreadcrumb(id),
-    refetchOnWindowFocus: false
-  })
+    refetchOnWindowFocus: false,
+  });
+
+  const total = breadcrumbs.length;
+  const lastCat = total ? breadcrumbs[total - 1] : null;
+  const hasHidden = total > 1;
+  const hiddenText = hasHidden
+    ? breadcrumbs
+        .slice(0, total - 1)
+        .map((c) => c.name)
+        .join(' / ')
+    : '';
+
+  if (isMobile) {
+    const crumbsMobile: React.ReactNode[] = [];
+
+    crumbsMobile.push(
+      <Link href='/' className='text-danger-500 shrink-0' key='home'>
+        Home
+      </Link>
+    );
+
+    if (hasHidden) {
+      crumbsMobile.push(
+        <span
+          className='text-danger-500 shrink-0'
+          title={hiddenText}
+          aria-label='Kategori tersembunyi'
+          key='hidden'
+        >
+          ..
+        </span>
+      );
+    }
+
+    // Kategori terakhir
+    if (lastCat) {
+      crumbsMobile.push(
+        <Link
+          key={`cat-${lastCat.id}`}
+          href={createSlug('/shop/category/', lastCat.name, String(lastCat.id))}
+          className='text-danger-500 shrink-0'
+        >
+          {lastCat.name}
+        </Link>
+      );
+    }
+
+    // Nama produk (dipotong kalau gk muat)
+    crumbsMobile.push(
+      <span className='truncate min-w-0 flex-1' title={name} key='product'>
+        {name}
+      </span>
+    );
+
+    return (
+      <div className='flex items-center whitespace-nowrap overflow-hidden text-caption-1 leading-7'>
+        {crumbsMobile.map((node, i) => (
+          <Fragment key={i}>
+            {node}
+            {i < crumbsMobile.length - 1 && (
+              <span className='mx-2 shrink-0'>/</span>
+            )}
+          </Fragment>
+        ))}
+      </div>
+    );
+  }
 
-  const breadcrumbs = query.data || []
+  // ===== DESKTOP =====
+  if (isDesktop) {
+    return (
+      <div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'>
+        <Link href='/' className='text-danger-500'>
+          Home
+        </Link>
+        <span className='mx-2'>/</span>
+        {breadcrumbs.map((category, index) => (
+          <Fragment key={index}>
+            <Link
+              href={createSlug(
+                '/shop/category/',
+                category.name,
+                category.id.toString()
+              )}
+              className='text-danger-500'
+            >
+              {category.name}
+            </Link>
+            <span className='mx-2'>/</span>
+          </Fragment>
+        ))}
+        <span>{name}</span>
+      </div>
+    );
+  }
 
   return (
     <div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'>
-      <Link href='/' className='text-danger-500'>Home</Link>
+      <Link href='/' className='text-danger-500'>
+        Home
+      </Link>
       <span className='mx-2'>/</span>
       {breadcrumbs.map((category, index) => (
         <Fragment key={index}>
           <Link
-            href={createSlug('/shop/category/', category.name, category.id.toString())}
+            href={createSlug(
+              '/shop/category/',
+              category.name,
+              category.id.toString()
+            )}
             className='text-danger-500'
           >
             {category.name}
@@ -35,7 +133,7 @@ const Breadcrumb = ({ id, name }: Props) => {
       ))}
       <span>{name}</span>
     </div>
-  )
-}
+  );
+};
 
-export default Breadcrumb
\ No newline at end of file
+export default Breadcrumb;
diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 850c2d9d..ffc9ba40 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -12,12 +12,16 @@ import { getAuth } from '~/libs/auth';
 import useDevice from '@/core/hooks/useDevice';
 import odooApi from '~/libs/odooApi';
 import { Button, Skeleton } from '@chakra-ui/react';
+import DesktopView from '@/core/components/views/DesktopView';
+import MobileView from '@/core/components/views/MobileView';
 
 type Props = {
   product: IProductDetail;
 };
 
-const PPN : number = process.env.NEXT_PUBLIC_PPN ? parseFloat(process.env.NEXT_PUBLIC_PPN) : 0;
+const PPN: number = process.env.NEXT_PUBLIC_PPN
+  ? parseFloat(process.env.NEXT_PUBLIC_PPN)
+  : 0;
 const PriceAction = ({ product }: Props) => {
   const {
     activePrice,
@@ -84,26 +88,59 @@ const PriceAction = ({ product }: Props) => {
     >
       {!!activePrice && activePrice.price > 0 && (
         <>
-          <div className='flex items-end gap-x-2'>
-            {activePrice.discount_percentage > 0 && (
-              <>
-                <div className={style['disc-badge']}>
-                  {Math.floor(activePrice.discount_percentage)}%
-                </div>
-                <div className={style['disc-price']}>
+          <DesktopView>
+            <div className='flex items-end gap-x-2'>
+              {activePrice.discount_percentage > 0 && (
+                <>
+                  <div className={style['disc-badge']}>
+                    {Math.floor(activePrice.discount_percentage)}%
+                  </div>
+                  <div className={style['disc-price']}>
+                    Rp {formatCurrency(activePrice.price || 0)}
+                  </div>
+                </>
+              )}
+              <div className={style['main-price']}>
+                Rp {formatCurrency(activePrice.price_discount || 0)}
+              </div>
+            </div>
+            <div className='h-1' />
+            <div className={style['secondary-text']}>
+              Termasuk PPN: Rp{' '}
+              {formatCurrency(Math.round(activePrice.price_discount * PPN))}
+            </div>
+          </DesktopView>
+          <MobileView>
+            <div className='flex items-end gap-x-2'>
+              {activePrice.discount_percentage > 0 ? (
+                <>
+                  <div className={style['disc-badge']}>
+                    {Math.floor(activePrice.discount_percentage)}%
+                  </div>
+
+                  {/* harga setelah diskon (main-price) di kiri */}
+                  <div className={style['main-price']}>
+                    Rp {formatCurrency(activePrice.price_discount || 0)}
+                  </div>
+
+                  {/* harga coret di kanan */}
+                  <div className={style['disc-price']}>
+                    Rp {formatCurrency(activePrice.price || 0)}
+                  </div>
+                </>
+              ) : (
+                // kalau tidak ada diskon, tampilkan harga normal saja
+                <div className={style['main-price']}>
                   Rp {formatCurrency(activePrice.price || 0)}
                 </div>
-              </>
-            )}
-            <div className={style['main-price']}>
-              Rp {formatCurrency(activePrice.price_discount || 0)}
+              )}
             </div>
-          </div>
-          <div className='h-1' />
-          <div className={style['secondary-text']}>
-            Termasuk PPN: Rp{' '}
-            {formatCurrency(Math.round(activePrice.price_discount * PPN))}
-          </div>
+
+            <div className='text-md text-gray-500 shadow-0'>
+              Termasuk PPN: Rp{' '}
+              {formatCurrency(Math.round(activePrice.price_discount * PPN))}
+            </div>
+          </MobileView>
         </>
       )}
 
@@ -120,92 +157,209 @@ const PriceAction = ({ product }: Props) => {
         </span>
       )}
 
-      <div className='h-4' />
-      <div className='flex gap-x-5 items-center'>
-        <div className='relative flex items-center'>
-          <button
-            type='button'
-            className='absolute left-0 px-2 py-1 h-full text-gray-500'
-            onClick={() =>
-              setQuantityInput(String(Math.max(1, Number(quantityInput) - 1)))
-            }
-          >
-            -
-          </button>
-          <input
-            type='number'
-            id='quantity'
-            min={1}
-            value={quantityInput}
-            onChange={(e) => setQuantityInput(e.target.value)}
-            className={style['quantity-input']}
-          />
-          <button
-            type='button'
-            className='absolute right-0 px-2 py-1 h-full text-gray-500'
-            onClick={() => setQuantityInput(String(Number(quantityInput) + 1))}
-          >
-            +
-          </button>
-        </div>
+      <DesktopView>
+        <div className='h-4' />
+        <div className='flex gap-x-5 items-center'>
+          {/* Qty */}
+          <div className='relative flex items-center'>
+            <button
+              type='button'
+              className='absolute left-0 px-2 py-1 h-full text-gray-500'
+              onClick={() =>
+                setQuantityInput(String(Math.max(1, Number(quantityInput) - 1)))
+              }
+            >
+              -
+            </button>
+            <input
+              type='number'
+              id='quantity'
+              min={1}
+              value={quantityInput}
+              onChange={(e) => setQuantityInput(e.target.value)}
+              className={style['quantity-input']}
+            />
+            <button
+              type='button'
+              className='absolute right-0 px-2 py-1 h-full text-gray-500'
+              onClick={() =>
+                setQuantityInput(String(Number(quantityInput) + 1))
+              }
+            >
+              +
+            </button>
+          </div>
 
-        <div>
-          <Skeleton
-            isLoaded={sla}
-            h='21px'
-            // w={16}
-            className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}
-          >
-            Stock : {sla?.qty}{' '}
-          </Skeleton>
-          {/* <span className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}>
-            {' '}
-          </span> */}
-        </div>
-        <div>
-          {qtyPickUp > 0 && (
-            <Link href='/panduan-pick-up-service' className='group'>
-              <Image
-                src='/images/PICKUP-NOW.png'
-                className='group-hover:scale-105 transition-transform duration-200'
-                alt='pickup now'
-                width={100}
-                height={12}
-              />
-            </Link>
-          )}
+          {/* Stok */}
+          <div>
+            <Skeleton
+              isLoaded={sla}
+              h='21px'
+              className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}
+            >
+              Stock : {sla?.qty}{' '}
+            </Skeleton>
+          </div>
+
+          {/* Pickup badge */}
+          <div>
+            {qtyPickUp > 0 && (
+              <div className='flex items-center gap-2'>
+                <Link href='/panduan-pick-up-service' className='group'>
+                  <Image
+                    src='/images/PICKUP-NOW.png'
+                    className='group-hover:scale-105 transition-transform duration-200'
+                    alt='pickup now'
+                    width={100}
+                    height={12}
+                  />
+                </Link>
+              </div>
+            )}
+          </div>
         </div>
-      </div>
-      {qtyPickUp > 0 && (
-        <div className='text-[12px] mt-1 text-red-500 italic'>
+        <span className='text-[12px] text-red-500 italic'>
           * {qtyPickUp} barang bisa di pickup
+        </span>
+      </DesktopView>
+
+      {/* ===== MOBILE: grid kiri-kanan, kanan hanya qty ===== */}
+      <MobileView>
+        <div className='grid grid-cols-12 items-start gap-3'>
+          {/* Kiri */}
+          <div className='col-span-8 mt-2'>
+            <div className='flex items-center gap-1'>
+              <Skeleton
+                isLoaded={sla}
+                h='21px'
+                w='auto' // ⬅️ penting: biar selebar konten
+                display='inline-block' // ⬅️ penting: jangan full width
+                className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}
+              >
+                Stock : {sla?.qty}
+              </Skeleton>
+
+              {qtyPickUp > 0 && (
+                <Link
+                  href='/panduan-pick-up-service'
+                  className='inline-block shrink-0'
+                >
+                  <Image
+                    src='/images/PICKUP-NOW.png'
+                    className='align-middle'
+                    alt='pickup now'
+                    width={90}
+                    height={12}
+                  />
+                </Link>
+              )}
+            </div>
+
+            {qtyPickUp > 0 && (
+              <div className='text-[12px] mt-1 text-red-500 italic'>
+                * {qtyPickUp} barang bisa di pickup
+              </div>
+            )}
+          </div>
+
+          {/* Kanan: hanya qty, rata kanan */}
+          <div className='col-span-4 flex justify-end'>
+            <div className='inline-flex items-stretch border rounded-xl overflow-hidden'>
+              <button
+                type='button'
+                className='h-11 w-11 md:h-12 md:w-12 grid place-items-center text-gray-700 hover:bg-gray-100 active:scale-95 select-none touch-manipulation focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500'
+                onClick={() =>
+                  setQuantityInput(
+                    String(Math.max(1, Number(quantityInput) - 1))
+                  )
+                }
+                aria-label='Kurangi'
+              >
+                <span className='text-2xl leading-none'>–</span>
+              </button>
+
+              <input
+                type='number'
+                id='quantity'
+                min={1}
+                value={quantityInput}
+                onChange={(e) => setQuantityInput(e.target.value)}
+                className='h-11 md:h-12 w-16 md:w-20 text-center text-lg md:text-xl outline-none border-x
+               [appearance:textfield] 
+               [&::-webkit-outer-spin-button]:appearance-none 
+               [&::-webkit-inner-spin-button]:appearance-none'
+              />
+
+              <button
+                type='button'
+                className='h-11 w-11 md:h-12 md:w-12 grid place-items-center text-gray-700 hover:bg-gray-100 active:scale-95 select-none touch-manipulation focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500'
+                onClick={() =>
+                  setQuantityInput(String(Number(quantityInput) + 1))
+                }
+                aria-label='Tambah'
+              >
+                <span className='text-2xl leading-none'>+</span>
+              </button>
+            </div>
+          </div>
         </div>
-      )}
+      </MobileView>
       <div className='h-4' />
 
-      <div className={`${style['action-wrapper']}`}>
-        <AddToCart
-          products={product}
-          variantId={activeVariantId}
-          quantity={Number(quantityInput)}
-        />
-        {!isApproval && (
+      <DesktopView>
+        <div className={`${style['action-wrapper']}`}>
           <AddToCart
+            products={product}
+            variantId={activeVariantId}
+            quantity={Number(quantityInput)}
+          />
+          {!isApproval && (
+            <AddToCart
+              source='buy'
+              products={product}
+              variantId={activeVariantId}
+              quantity={Number(quantityInput)}
+            />
+          )}
+        </div>
+        <div className='mt-4'>
+          <AddToQuotation
             source='buy'
             products={product}
             variantId={activeVariantId}
             quantity={Number(quantityInput)}
           />
-        )}
-      </div>
-      <div className='mt-4'>
-        <AddToQuotation
-          source='buy'
-          products={product}
-          variantId={activeVariantId}
-          quantity={Number(quantityInput)}
-        />
-      </div>
+        </div>
+      </DesktopView>
+      <MobileView>
+        <div className='grid grid-cols-12 gap-2'>
+          <div className='col-span-2'>
+            <AddToQuotation
+              source='buy'
+              products={product}
+              variantId={activeVariantId}
+              quantity={Number(quantityInput)}
+            />
+          </div>
+          <div className='col-span-5'>
+            <AddToCart
+              products={product}
+              variantId={activeVariantId}
+              quantity={Number(quantityInput)}
+            />
+          </div>
+          <div className='col-span-5'>
+            {!isApproval && (
+              <AddToCart
+                source='buy'
+                products={product}
+                variantId={activeVariantId}
+                quantity={Number(quantityInput)}
+              />
+            )}
+          </div>
+        </div>
+      </MobileView>
     </div>
   );
 };
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 192e1dc3..79921e22 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -2,7 +2,7 @@ import style from '../styles/product-detail.module.css';
 
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState, UIEvent } from 'react';
 
 import { Button } from '@chakra-ui/react';
 import { MessageCircleIcon, Share2Icon } from 'lucide-react';
@@ -35,6 +35,7 @@ const ProductDetail = ({ product }: Props) => {
   const { isDesktop, isMobile } = useDevice();
   const router = useRouter();
   const auth = getAuth();
+
   const {
     setAskAdminUrl,
     askAdminUrl,
@@ -71,179 +72,277 @@ const ProductDetail = ({ product }: Props) => {
       product?.variants?.find((variant) => variant.is_in_bu) ||
       product?.variants?.[0];
     setSelectedVariant(selectedVariant);
-    // setSelectedVariant(product?.variants[0])
   }, []);
 
   // Gabungkan semua gambar produk (utama + tambahan)
-  const allImages = product.image_carousel ? [...product.image_carousel] : [];
-
-  if (product.image) {
-    allImages.unshift(product.image); // Tambahkan gambar utama di awal array
-  }
-  console.log(product);
+  const allImages = (() => {
+    const arr: string[] = [];
+    if (product?.image) arr.push(product.image); // selalu masukkan utama, baik mobile maupun desktop
+    if (
+      Array.isArray(product?.image_carousel) &&
+      product.image_carousel.length
+    ) {
+      // hindari duplikat jika image utama juga ada di carousel
+      const set = new Set(arr);
+      for (const img of product.image_carousel) {
+        if (!set.has(img)) {
+          arr.push(img);
+          set.add(img);
+        }
+      }
+    }
+    return arr;
+  })();
 
   const [mainImage, setMainImage] = useState(allImages[0] || '');
 
-  return (
-    <>
-      <div className='md:flex md:flex-wrap'>
-        <div className='w-full mb-4 md:mb-0 px-4 md:px-0'>
-          <Breadcrumb id={product.id} name={product.name} />
-        </div>
-        <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'>
-          <div className='md:flex md:flex-wrap'>
-            <div className='md:w-4/12'>
-              <ProductImage product={{ ...product, image: mainImage }} />
-
-              {/* Carousel horizontal */}
-              {allImages.length > 0 && (
-                <div className='mt-4 overflow-x-auto'>
-                  <div className='flex space-x-3 pb-3'>
-                    {allImages.map((img, index) => (
+  useEffect(() => {
+    // update mainImage jika sumber gambar berubah dan mainImage tidak ada di daftar
+    if (!allImages.includes(mainImage)) {
+      setMainImage(allImages[0] || '');
+    }
+  }, [allImages]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ===== Slider mobile (tanpa dependency) =====
+  const sliderRef = useRef<HTMLDivElement | null>(null);
+  const [currentIdx, setCurrentIdx] = useState(0);
+
+  const handleMobileScroll = (e: UIEvent<HTMLDivElement>) => {
+    const el = e.currentTarget;
+    if (!el) return;
+    const idx = Math.round(el.scrollLeft / el.clientWidth);
+    if (idx !== currentIdx) {
+      setCurrentIdx(idx);
+      setMainImage(allImages[idx] || '');
+    }
+  };
+
+  const scrollToIndex = (i: number) => {
+    const el = sliderRef.current;
+    if (!el) return;
+    el.scrollTo({ left: i * el.clientWidth, behavior: 'smooth' });
+    setCurrentIdx(i);
+    setMainImage(allImages[i] || '');
+  };
+  // ============================================
+
+return (
+  <>
+    <div className='md:flex md:flex-wrap'>
+      <div className='w-full mb-4 md:mb-0 px-4 md:px-0'>
+        <Breadcrumb id={product.id} name={product.name} />
+      </div>
+
+      <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'>
+        <div className='md:flex md:flex-wrap'>
+          {/* ===== Kolom kiri: gambar ===== */}
+          <div className='md:w-4/12'>
+            {/* === MOBILE: Slider swipeable, tanpa thumbnail carousel === */}
+            {isMobile ? (
+              <div className='relative'>
+                <div
+                  ref={sliderRef}
+                  onScroll={handleMobileScroll}
+                  className='flex overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar'
+                  style={{
+                    scrollBehavior: 'smooth',
+                    msOverflowStyle: 'none',
+                    scrollbarWidth: 'none',
+                  }}
+                >
+                  {allImages.length > 0 ? (
+                    allImages.map((img, i) => (
+                      // slide tetap selebar viewport untuk snap mulus
                       <div
-                        key={index}
-                        className={`flex-shrink-0 w-16 h-16 cursor-pointer border-2 rounded-md transition-colors ${
-                          mainImage === img
-                            ? 'border-red-500 ring-2 ring-red-200'
-                            : 'border-gray-200 hover:border-gray-300'
-                        }`}
-                        onClick={() => setMainImage(img)}
+                        key={i}
+                        className='w-full flex-shrink-0 snap-center flex justify-center items-center'
                       >
+                        {/* gambar diperkecil */}
                         <img
                           src={img}
-                          alt={`Thumbnail ${index + 1}`}
-                          className='w-full h-full object-cover rounded-sm'
-                          loading='lazy'
+                          alt={`Gambar ${i + 1}`}
+                          className='w-[85%] aspect-square object-contain'
                           onError={(e) => {
                             (e.target as HTMLImageElement).src =
                               '/path/to/fallback-image.jpg';
                           }}
                         />
                       </div>
-                    ))}
-                  </div>
+                    ))
+                  ) : (
+                    <div className='w-full flex-shrink-0 snap-center flex justify-center items-center'>
+                      <img
+                        src={mainImage || '/path/to/fallback-image.jpg'}
+                        alt='Gambar produk'
+                        className='w-[85%] aspect-square object-contain'
+                      />
+                    </div>
+                  )}
                 </div>
-              )}
-            </div>
-
-            <div className='md:w-8/12 px-4 md:pl-6'>
-              <div className='h-6 md:h-0' />
-
-              <h1 className={style['title']}>{product.name}</h1>
-
-              <div className='h-3 md:h-0' />
-
-              <Information product={product} />
-
-              <div className='h-6' />
-            </div>
-          </div>
 
-          <div className='h-full'>
-            {isMobile && (
-              <div className='px-4 pt-6'>
-                <PriceAction product={product} />
+                {/* Dots indicator */}
+                {allImages.length > 1 && (
+                  <div className='absolute bottom-2 left-0 right-0 flex justify-center gap-2'>
+                    {allImages.map((_, i) => (
+                      <button
+                        key={i}
+                        aria-label={`Ke slide ${i + 1}`}
+                        className={`w-2 h-2 rounded-full ${
+                          currentIdx === i ? 'bg-gray-800' : 'bg-gray-300'
+                        }`}
+                        onClick={() => scrollToIndex(i)}
+                      />
+                    ))}
+                  </div>
+                )}
               </div>
+            ) : (
+              <>
+                {/* === DESKTOP: Tetap seperti sebelumnya === */}
+                <ProductImage product={{ ...product, image: mainImage }} />
+
+                {/* Carousel horizontal (thumbnail) – hanya desktop */}
+                {allImages.length > 0 && (
+                  <div className='mt-4 overflow-x-auto'>
+                    <div className='flex space-x-3 pb-3'>
+                      {allImages.map((img, index) => (
+                        <div
+                          key={index}
+                          className={`flex-shrink-0 w-16 h-16 cursor-pointer border-2 rounded-md transition-colors ${
+                            mainImage === img
+                              ? 'border-red-500 ring-2 ring-red-200'
+                              : 'border-gray-200 hover:border-gray-300'
+                          }`}
+                          onClick={() => setMainImage(img)}
+                        >
+                          <img
+                            src={img}
+                            alt={`Thumbnail ${index + 1}`}
+                            className='w-full h-full object-cover rounded-sm'
+                            loading='lazy'
+                            onError={(e) => {
+                              (e.target as HTMLImageElement).src =
+                                '/path/to/fallback-image.jpg';
+                            }}
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </>
             )}
+          </div>
+          {/* <<=== TUTUP kolom kiri */}
+
+          {/* ===== Kolom kanan: info ===== */}
+          <div className='md:w-8/12 px-4 md:pl-6'>
+            <div className='h-6 md:h-0' />
+            <h1 className={style['title']}>{product.name}</h1>
+            <div className='h-3 md:h-0' />
+            <Information product={product} />
+            <div className='h-6' />
+          </div>
+        </div>
 
-            <div className='h-4 md:h-10' />
-            {!!activeVariantId && !isApproval && (
-              <ProductPromoSection
-                product={product}
-                productId={activeVariantId}
-              />
-            )}
+        <div className='h-full'>
+          {isMobile && (
+            <div className='px-4 pt-6'>
+              <PriceAction product={product} />
+            </div>
+          )}
 
-            {/* <div className={style['section-card']}>
-              <h2 className={style['heading']}>
-                Variant ({product.variant_total})
-              </h2>
-              <div className='h-4' />
-              <VariantList variants={product.variants} />
-            </div> */}
+          <div className='h-4 md:h-10' />
+          {!!activeVariantId && !isApproval && (
+            <ProductPromoSection
+              product={product}
+              productId={activeVariantId}
+            />
+          )}
 
-            <div className='h-0 md:h-6' />
+          <div className='h-0 md:h-6' />
 
-            <div className={style['section-card']}>
-              <h2 className={style['heading']}>Informasi Produk</h2>
-              <div className='h-4' />
-              <div className='overflow-x-auto'>
-                <div
-                  className={style['description']}
-                  dangerouslySetInnerHTML={{
-                    __html:
-                      !product.description ||
-                      product.description == '<p><br></p>'
-                        ? 'Belum ada deskripsi'
-                        : product.description,
-                  }}
-                />
-              </div>
+          <div className={style['section-card']}>
+            <h2 className={style['heading']}>Informasi Produk</h2>
+            <div className='h-4' />
+            <div className='overflow-x-auto'>
+              <div
+                className={style['description']}
+                dangerouslySetInnerHTML={{
+                  __html:
+                    !product.description || product.description == '<p><br></p>'
+                      ? 'Belum ada deskripsi'
+                      : product.description,
+                }}
+              />
             </div>
           </div>
         </div>
+      </div>
 
-        {isDesktop && (
-          <div className='md:w-3/12'>
-            <PriceAction product={product} />
-            <div className='flex gap-x-5 items-center justify-center'>
+      {isDesktop && (
+        <div className='md:w-3/12'>
+          <PriceAction product={product} />
+          <div className='flex gap-x-5 items-center justify-center'>
+            <Button
+              as={Link}
+              href={askAdminUrl}
+              variant='link'
+              target='_blank'
+              colorScheme='gray'
+              leftIcon={<MessageCircleIcon size={18} />}
+            >
+              Ask Admin
+            </Button>
+
+            <span>|</span>
+
+            <AddToWishlist productId={product.id} />
+
+            <span>|</span>
+
+            <RWebShare
+              data={{
+                text: 'Check out this product',
+                title: `${product.name} - Indoteknik.com`,
+                url: SELF_HOST + router.asPath,
+              }}
+            >
               <Button
-                as={Link}
-                href={askAdminUrl}
                 variant='link'
-                target='_blank'
                 colorScheme='gray'
-                leftIcon={<MessageCircleIcon size={18} />}
+                leftIcon={<Share2Icon size={18} />}
               >
-                Ask Admin
+                Share
               </Button>
+            </RWebShare>
+          </div>
 
-              <span>|</span>
-
-              <AddToWishlist productId={product.id} />
-
-              <span>|</span>
+          <div className='h-6' />
+          <div className={style['heading']}>Produk Serupa</div>
 
-              <RWebShare
-                data={{
-                  text: 'Check out this product',
-                  title: `${product.name} - Indoteknik.com`,
-                  url: SELF_HOST + router.asPath,
-                }}
-              >
-                <Button
-                  variant='link'
-                  colorScheme='gray'
-                  leftIcon={<Share2Icon size={18} />}
-                >
-                  Share
-                </Button>
-              </RWebShare>
-            </div>
+          <div className='h-4' />
 
-            <div className='h-6' />
-            <div className={style['heading']}>Produk Serupa</div>
+          <SimilarSide product={product} />
+        </div>
+      )}
 
-            <div className='h-4' />
+      <div className='md:w-full pt-4 md:py-10 px-4 md:px-0'>
+        <div className={style['heading']}>Kamu Mungkin Juga Suka</div>
 
-            <SimilarSide product={product} />
-          </div>
-        )}
+        <div className='h-6' />
 
-        <div className='md:w-full pt-4 md:py-10 px-4 md:px-0'>
-          <div className={style['heading']}>Kamu Mungkin Juga Suka</div>
+        <LazyLoadComponent>
+          <SimilarBottom product={product} />
+        </LazyLoadComponent>
+      </div>
 
-          <div className='h-6' />
+      <div className='h-6 md:h-0' />
+    </div>
+  </>
+);
 
-          <LazyLoadComponent>
-            <SimilarBottom product={product} />
-          </LazyLoadComponent>
-        </div>
 
-        <div className='h-6 md:h-0' />
-      </div>
-    </>
-  );
 };
 
 export default ProductDetail;