From a1b0e672387747085c85c6c446cea49f09af7719 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Sat, 23 Aug 2025 08:49:46 +0700
Subject: <Miqdad> Move stock position mobile

---
 .../product-detail/components/PriceAction.tsx      | 43 ++++++++++++++++------
 1 file changed, 31 insertions(+), 12 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/PriceAction.tsx')

diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 850c2d9d..f5c2d7b3 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -17,7 +17,9 @@ 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,
@@ -104,6 +106,21 @@ const PriceAction = ({ product }: Props) => {
             Termasuk PPN: Rp{' '}
             {formatCurrency(Math.round(activePrice.price_discount * PPN))}
           </div>
+          {isMobile && (
+          <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>
+          )}
         </>
       )}
 
@@ -149,19 +166,21 @@ const PriceAction = ({ product }: Props) => {
           </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' : ''}>
+        {isDesktop && (
+          <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>
+        )}
         <div>
           {qtyPickUp > 0 && (
             <Link href='/panduan-pick-up-service' className='group'>
-- 
cgit v1.2.3


From 47cc09c7f74b2c37f0fc1a98e50f7d76774ea4a4 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Sat, 23 Aug 2025 08:55:34 +0700
Subject: <Miqdad> Move price

---
 .../product-detail/components/PriceAction.tsx      | 30 +++++++++++-----------
 1 file changed, 15 insertions(+), 15 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/PriceAction.tsx')

diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index f5c2d7b3..7548e016 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -92,13 +92,13 @@ const PriceAction = ({ product }: Props) => {
                 <div className={style['disc-badge']}>
                   {Math.floor(activePrice.discount_percentage)}%
                 </div>
-                <div className={style['disc-price']}>
-                  Rp {formatCurrency(activePrice.price || 0)}
+                <div className={style['main-price']}>
+                  Rp {formatCurrency(activePrice.price_discount || 0)}
                 </div>
               </>
             )}
-            <div className={style['main-price']}>
-              Rp {formatCurrency(activePrice.price_discount || 0)}
+            <div className={style['disc-price']}>
+              Rp {formatCurrency(activePrice.price || 0)}
             </div>
           </div>
           <div className='h-1' />
@@ -107,19 +107,19 @@ const PriceAction = ({ product }: Props) => {
             {formatCurrency(Math.round(activePrice.price_discount * PPN))}
           </div>
           {isMobile && (
-          <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' : ''}>
+            <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>
           )}
         </>
       )}
-- 
cgit v1.2.3


From bb2763a47ae15b718b9ed532b4b3bdd68d0d8867 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Sat, 23 Aug 2025 09:32:03 +0700
Subject: <Miqdad> Button Position

---
 .../product-detail/components/PriceAction.tsx      | 68 ++++++++++++++++------
 1 file changed, 50 insertions(+), 18 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/PriceAction.tsx')

diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 7548e016..9d45a7c3 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -12,6 +12,8 @@ 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;
@@ -201,30 +203,60 @@ const PriceAction = ({ product }: Props) => {
         </div>
       )}
       <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'>
+            {!isApproval && (
+              <AddToCart
+                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>
+      </MobileView>
     </div>
   );
 };
-- 
cgit v1.2.3


From d61567c690970806273e40ee4748856d65a43d14 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Sat, 23 Aug 2025 10:21:38 +0700
Subject: <Miqdad> More mobile change

---
 .../product-detail/components/PriceAction.tsx      | 44 +++++++++++++++-------
 1 file changed, 31 insertions(+), 13 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/PriceAction.tsx')

diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 9d45a7c3..2cdfc9a2 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -89,19 +89,37 @@ 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['main-price']}>
-                  Rp {formatCurrency(activePrice.price_discount || 0)}
-                </div>
-              </>
-            )}
-            <div className={style['disc-price']}>
-              Rp {formatCurrency(activePrice.price || 0)}
-            </div>
+            <MobileView>
+              {activePrice.discount_percentage > 0 && (
+                <>
+                  <div className={style['disc-badge']}>
+                    {Math.floor(activePrice.discount_percentage)}%
+                  </div>
+                  <div className={style['main-price']}>
+                    Rp {formatCurrency(activePrice.price_discount || 0)}
+                  </div>
+                </>
+              )}
+              <div className={style['disc-price']}>
+                Rp {formatCurrency(activePrice.price || 0)}
+              </div>
+            </MobileView>
+            <DesktopView>
+              {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>
+            </DesktopView>
           </div>
           <div className='h-1' />
           <div className={style['secondary-text']}>
-- 
cgit v1.2.3


From 8067589f21bc41b651622240c491bf1a9e5e9d51 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Sat, 23 Aug 2025 11:21:21 +0700
Subject: <Miqdad> Done

---
 .../product-detail/components/PriceAction.tsx      | 227 +++++++++++++--------
 1 file changed, 147 insertions(+), 80 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/PriceAction.tsx')

diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 2cdfc9a2..a90faee0 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -88,59 +88,49 @@ const PriceAction = ({ product }: Props) => {
     >
       {!!activePrice && activePrice.price > 0 && (
         <>
-          <div className='flex items-end gap-x-2'>
-            <MobileView>
+          <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['main-price']}>
-                    Rp {formatCurrency(activePrice.price_discount || 0)}
+                  <div className={style['disc-price']}>
+                    Rp {formatCurrency(activePrice.price || 0)}
                   </div>
                 </>
               )}
-              <div className={style['disc-price']}>
-                Rp {formatCurrency(activePrice.price || 0)}
+              <div className={style['main-price']}>
+                Rp {formatCurrency(activePrice.price_discount || 0)}
               </div>
-            </MobileView>
-            <DesktopView>
+            </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>
-
-                  <div className={style['disc-price']}>
-                    Rp {formatCurrency(activePrice.price || 0)}
+                  </div>{' '}
+                  <div className={style['main-price']}>
+                    Rp {formatCurrency(activePrice.price_discount || 0)}
                   </div>
                 </>
               )}
-              <div className={style['main-price']}>
-                Rp {formatCurrency(activePrice.price_discount || 0)}
+              <div className={style['disc-price']}>
+                Rp {formatCurrency(activePrice.price || 0)}
               </div>
-            </DesktopView>
-          </div>
-          <div className='h-1' />
-          <div className={style['secondary-text']}>
-            Termasuk PPN: Rp{' '}
-            {formatCurrency(Math.round(activePrice.price_discount * PPN))}
-          </div>
-          {isMobile && (
-            <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 className='text-md text-gray-500 shadow-0'>
+                Termasuk PPN: Rp{' '}
+              {formatCurrency(Math.round(activePrice.price_discount * PPN))}
+            </div>
+          </MobileView>
         </>
       )}
 
@@ -157,70 +147,147 @@ const PriceAction = ({ product }: Props) => {
         </span>
       )}
 
+      <DesktopView>
       <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>
+        <div className='flex gap-x-5 items-center'>
+          {/* Qty */}
+          <div className='inline-flex items-center border rounded-md overflow-hidden'>
+            <button
+              type='button'
+              className='px-3 py-1 text-gray-500 hover:bg-gray-100'
+              onClick={() =>
+                setQuantityInput(String(Math.max(1, Number(quantityInput) - 1)))
+              }
+              aria-label='Kurangi'
+            >
+              –
+            </button>
+            <input
+              type='number'
+              id='quantity'
+              min={1}
+              value={quantityInput}
+              onChange={(e) => setQuantityInput(e.target.value)}
+              className='w-12 text-center outline-none border-x'
+            />
+            <button
+              type='button'
+              className='px-3 py-1 text-gray-500 hover:bg-gray-100'
+              onClick={() =>
+                setQuantityInput(String(Number(quantityInput) + 1))
+              }
+              aria-label='Tambah'
+            >
+              +
+            </button>
+          </div>
 
-        {isDesktop && (
+          {/* Stok */}
           <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}
+
+          {/* Pickup badge */}
+          <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>
+            )}
+          </div>
+        </div>
+      </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'>
+            <Skeleton
+              isLoaded={sla}
+              h='21px'
+              className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}
+            >
+              Stock : {sla?.qty}{' '}
+            </Skeleton>
+
+            {qtyPickUp > 0 && (
+              <div className='mt-1'>
+                <Link
+                  href='/panduan-pick-up-service'
+                  className='inline-block 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 className='text-[12px] mt-1 text-red-500 italic'>
+                  * {qtyPickUp} barang bisa di pickup
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Kanan: hanya qty, rata kanan */}
+          <div className='col-span-4 flex justify-end'>
+            <div className='inline-flex items-center border rounded-md overflow-hidden'>
+              <button
+                type='button'
+                className='px-3 py-1 text-gray-500 hover:bg-gray-100'
+                onClick={() =>
+                  setQuantityInput(
+                    String(Math.max(1, Number(quantityInput) - 1))
+                  )
+                }
+                aria-label='Kurangi'
+              >
+                –
+              </button>
+              <input
+                type='number'
+                id='quantity'
+                min={1}
+                value={quantityInput}
+                onChange={(e) => setQuantityInput(e.target.value)}
+                className='w-12 text-center outline-none border-x'
               />
-            </Link>
-          )}
+              <button
+                type='button'
+                className='px-3 py-1 text-gray-500 hover:bg-gray-100'
+                onClick={() =>
+                  setQuantityInput(String(Number(quantityInput) + 1))
+                }
+                aria-label='Tambah'
+              >
+                +
+              </button>
+            </div>
+          </div>
         </div>
-      </div>
+      </MobileView>
       {qtyPickUp > 0 && (
         <div className='text-[12px] mt-1 text-red-500 italic'>
           * {qtyPickUp} barang bisa di pickup
         </div>
       )}
       <div className='h-4' />
+
       <DesktopView>
         <div className={`${style['action-wrapper']}`}>
           <AddToCart
-- 
cgit v1.2.3


From 1dccd128c70696fa096128b0383d84b826595ee7 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Sat, 23 Aug 2025 12:04:15 +0700
Subject: <Miqdad> Fix Price

---
 .../product-detail/components/PriceAction.tsx      | 26 +++++++++++++++-------
 1 file changed, 18 insertions(+), 8 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/PriceAction.tsx')

diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index a90faee0..25a1aa47 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -112,22 +112,32 @@ const PriceAction = ({ product }: Props) => {
           </DesktopView>
           <MobileView>
             <div className='flex items-end gap-x-2'>
-              {activePrice.discount_percentage > 0 && (
+              {activePrice.discount_percentage > 0 ? (
                 <>
                   <div className={style['disc-badge']}>
                     {Math.floor(activePrice.discount_percentage)}%
-                  </div>{' '}
+                  </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['disc-price']}>
-                Rp {formatCurrency(activePrice.price || 0)}
-              </div>
             </div>
-              <div className='text-md text-gray-500 shadow-0'>
-                Termasuk PPN: Rp{' '}
+
+            <div className='text-md text-gray-500 shadow-0'>
+              Termasuk PPN: Rp{' '}
               {formatCurrency(Math.round(activePrice.price_discount * PPN))}
             </div>
           </MobileView>
@@ -148,7 +158,7 @@ const PriceAction = ({ product }: Props) => {
       )}
 
       <DesktopView>
-      <div className='h-4' />
+        <div className='h-4' />
         <div className='flex gap-x-5 items-center'>
           {/* Qty */}
           <div className='inline-flex items-center border rounded-md overflow-hidden'>
-- 
cgit v1.2.3


From 7911c3d291b322a9832f9f4c65392552c11c8d10 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Tue, 26 Aug 2025 09:35:51 +0700
Subject: <Miqdad> Fix

---
 .../product-detail/components/PriceAction.tsx      | 28 +++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/PriceAction.tsx')

diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 25a1aa47..60834880 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -206,18 +206,23 @@ const PriceAction = ({ product }: Props) => {
           {/* Pickup badge */}
           <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>
+              <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>
+        <span className='text-[12px] text-red-500 italic'>
+          * {qtyPickUp} barang bisa di pickup
+        </span>
       </DesktopView>
 
       {/* ===== MOBILE: grid kiri-kanan, kanan hanya qty ===== */}
@@ -291,11 +296,6 @@ const PriceAction = ({ product }: Props) => {
           </div>
         </div>
       </MobileView>
-      {qtyPickUp > 0 && (
-        <div className='text-[12px] mt-1 text-red-500 italic'>
-          * {qtyPickUp} barang bisa di pickup
-        </div>
-      )}
       <div className='h-4' />
 
       <DesktopView>
-- 
cgit v1.2.3


From 28f9a1235fcf6fdde1983d0a4cf88fc3ba4fbdd2 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Tue, 26 Aug 2025 09:53:09 +0700
Subject: <Miqdad> Fix lg

---
 .../product-detail/components/PriceAction.tsx      | 54 +++++++++++++---------
 1 file changed, 32 insertions(+), 22 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/PriceAction.tsx')

diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 60834880..2c678c6b 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -229,42 +229,47 @@ const PriceAction = ({ product }: Props) => {
       <MobileView>
         <div className='grid grid-cols-12 items-start gap-3'>
           {/* Kiri */}
-          <div className='col-span-8'>
-            <Skeleton
-              isLoaded={sla}
-              h='21px'
-              className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}
-            >
-              Stock : {sla?.qty}{' '}
-            </Skeleton>
+          <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 && (
-              <div className='mt-1'>
+              {qtyPickUp > 0 && (
                 <Link
                   href='/panduan-pick-up-service'
-                  className='inline-block group'
+                  className='inline-block shrink-0'
                 >
                   <Image
                     src='/images/PICKUP-NOW.png'
-                    className='group-hover:scale-105 transition-transform duration-200'
+                    className='align-middle'
                     alt='pickup now'
-                    width={100}
+                    width={90}
                     height={12}
                   />
                 </Link>
-                <div className='text-[12px] mt-1 text-red-500 italic'>
-                  * {qtyPickUp} barang bisa di pickup
-                </div>
+              )}
+            </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-center border rounded-md overflow-hidden'>
+            <div className='inline-flex items-stretch border rounded-xl overflow-hidden'>
               <button
                 type='button'
-                className='px-3 py-1 text-gray-500 hover:bg-gray-100'
+                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))
@@ -272,25 +277,30 @@ const PriceAction = ({ product }: Props) => {
                 }
                 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='w-12 text-center outline-none border-x'
+                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='px-3 py-1 text-gray-500 hover:bg-gray-100'
+                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>
-- 
cgit v1.2.3


From 8e92e0b4bfb74ebdf99fbc9d4ca7d47e2513c4e0 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Tue, 26 Aug 2025 10:42:38 +0700
Subject: <Miqdad> bring back old set qty for desktop view

---
 .../modules/product-detail/components/PriceAction.tsx        | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/PriceAction.tsx')

diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 2c678c6b..5daf5bed 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -161,16 +161,15 @@ const PriceAction = ({ product }: Props) => {
         <div className='h-4' />
         <div className='flex gap-x-5 items-center'>
           {/* Qty */}
-          <div className='inline-flex items-center border rounded-md overflow-hidden'>
+          <div className='relative flex items-center'>
             <button
               type='button'
-              className='px-3 py-1 text-gray-500 hover:bg-gray-100'
+              className='absolute left-0 px-2 py-1 h-full text-gray-500'
               onClick={() =>
                 setQuantityInput(String(Math.max(1, Number(quantityInput) - 1)))
               }
-              aria-label='Kurangi'
             >
-              –
+              -
             </button>
             <input
               type='number'
@@ -178,15 +177,14 @@ const PriceAction = ({ product }: Props) => {
               min={1}
               value={quantityInput}
               onChange={(e) => setQuantityInput(e.target.value)}
-              className='w-12 text-center outline-none border-x'
+              className={style['quantity-input']}
             />
             <button
               type='button'
-              className='px-3 py-1 text-gray-500 hover:bg-gray-100'
+              className='absolute right-0 px-2 py-1 h-full text-gray-500'
               onClick={() =>
                 setQuantityInput(String(Number(quantityInput) + 1))
               }
-              aria-label='Tambah'
             >
               +
             </button>
-- 
cgit v1.2.3


From 37bda78dec58cb8c218849a77620d95682b201b9 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Tue, 26 Aug 2025 15:38:29 +0700
Subject: <Miqdad> Major Fix

---
 .../modules/product-detail/components/PriceAction.tsx      | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/PriceAction.tsx')

diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 5daf5bed..ffc9ba40 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -341,6 +341,13 @@ const PriceAction = ({ product }: Props) => {
               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
@@ -351,13 +358,6 @@ const PriceAction = ({ product }: Props) => {
               />
             )}
           </div>
-          <div className='col-span-5'>
-            <AddToCart
-              products={product}
-              variantId={activeVariantId}
-              quantity={Number(quantityInput)}
-            />
-          </div>
         </div>
       </MobileView>
     </div>
-- 
cgit v1.2.3