<Miqdad> don cart

3 files changed, 44 insertions, 21 deletions

diff --git a/src-migrate/modules/cart/components/CartSummaryMobile.tsx b/src-migrate/modules/cart/components/CartSummaryMobile.tsx
index 02258204..7a334fed 100644
--- a/src-migrate/modules/cart/components/CartSummaryMobile.tsx
+++ b/src-migrate/modules/cart/components/CartSummaryMobile.tsx
@@ -29,7 +29,7 @@ const CartSummaryMobile = ({
   isLoaded = false,
 }: Props) => {
   const [showPopup, setShowPopup] = useState(false);
-  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;
   return (
     <>
       <BottomPopup
@@ -88,22 +88,30 @@ const CartSummaryMobile = ({
         </div>
       </BottomPopup>
       <div className='flex flex-col gap-y-3'>
-        <Skeleton isLoaded={isLoaded} className={style.line}>
-          <span className={clsxm(style.label, style.grandTotal)}>
+        <Skeleton
+          isLoaded={isLoaded}
+          className={clsxm(style.line, 'flex items-center justify-between !py-2')}
+        >
+          {/* Left: label */}
+          <span className={clsxm(style.label, style.grandTotal, 'leading-tight')}>
             Grand Total
           </span>
-          <button
-            onClick={() => setShowPopup(true)}
-            className='bg-gray-300 w-6 h-6 items-center justify-center cursor-pointer hover:bg-red-400 md:hidden '
-          >
-            <ChevronDownIcon className='h-6 w-6 text-white' />
-          </button>
-        </Skeleton>
-        <Skeleton isLoaded={isLoaded} className={style.line}>
-          <span className={style.value}>
-            Rp {formatCurrency(grandTotal || 0)}
-          </span>
+
+          {/* Right: amount + chevron */}
+          <div className="flex items-center gap-2">
+            <span className={clsxm(style.value, 'whitespace-nowrap tabular-nums leading-tight')}>
+              Rp {formatCurrency(grandTotal || 0)}
+            </span>
+            <button
+              onClick={() => setShowPopup(true)}
+              aria-label="Expand ringkasan"
+              className="md:hidden flex w-5 h-5 items-center justify-center rounded bg-gray-300 hover:bg-gray-400"
+            >
+              <ChevronDownIcon className="h-4 w-4 text-white" />
+            </button>
+          </div>
         </Skeleton>
+
       </div>
     </>
   );
diff --git a/src-migrate/pages/shop/cart/cart.module.css b/src-migrate/pages/shop/cart/cart.module.css
index b756fb15..af5a2abc 100644
--- a/src-migrate/pages/shop/cart/cart.module.css
+++ b/src-migrate/pages/shop/cart/cart.module.css
@@ -3,7 +3,7 @@
 }
 
 .content {
-    @apply flex flex-wrap ;
+    @apply flex flex-wrap;
 }
 
 .item-wrapper {
@@ -33,3 +33,15 @@
 .summary-buttons-step-approval {
     @apply grid grid-cols-1 gap-y-3 mt-6;
 }
+
+@media (max-width: 768px) {
+    .item-wrapper {
+        /* adjust if your bar is taller/shorter */
+        padding-bottom: calc(env(safe-area-inset-bottom) + 9rem);
+    }
+
+    .summary-wrapper {
+        @apply fixed inset-x-0 bottom-0 z-50 md:sticky w-full;
+    }
+    
+}
\ No newline at end of file
diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx
index 795dfa72..031aa45b 100644
--- a/src-migrate/pages/shop/cart/index.tsx
+++ b/src-migrate/pages/shop/cart/index.tsx
@@ -301,9 +301,8 @@ const CartPage: React.FC = () => {
     <>
       {/* Sticky Header */}
       <div
-        className={`${
-          isTop ? 'border-b-[0px]' : 'border-b-[1px]'
-        } sticky md:top-[157px] flex-col bg-white py-4 border-gray-300 z-50 sm:w-full md:w-3/4`}
+        className={`${isTop ? 'border-b-[0px]' : 'border-b-[1px]'
+          } sticky md:top-[157px] flex-col bg-white py-4 border-gray-300 z-50 sm:w-full md:w-3/4`}
       >
         <div className='flex items-center justify-between mb-2'>
           <h1 className={style.title}>Keranjang Belanja</h1>
@@ -392,13 +391,17 @@ const CartPage: React.FC = () => {
           </div>
         </div>
 
+        <div
+          className="md:hidden"
+          style={{ height: 'calc(var(--mobile-actions-h) + var(--mobile-total-h))' }}
+        />
+
         {/* Cart Summary */}
         <div
-          className={`${style['summary-wrapper']} ${
-            device.isMobile && (!cart || cart?.product_total === 0)
+          className={`${style['summary-wrapper']} ${device.isMobile && (!cart || cart?.product_total === 0)
               ? 'hidden'
               : ''
-          }`}
+            }`}
         >
           <div className={style.summary}>
             {device.isMobile ? (