<Miqdad> Done

1 files changed, 147 insertions, 80 deletions

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