From 95362e32151410f5ae696e4e3b38ef1065024530 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Thu, 23 Oct 2025 09:50:22 +0700
Subject: <Miqdad> cr renca baru

---
 src/lib/product/components/ProductCard.jsx | 188 +++++++++++++----------------
 1 file changed, 86 insertions(+), 102 deletions(-)

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 814ae62d..026de18b 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -79,7 +79,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
     return (
       <>
         <DesktopView>
-          <div className='rounded shadow-sm border border-gray_r-4 bg-white'>
+          <div className='rounded shadow-sm'>
             <Link
               href={URL.product}
               className='border-b border-gray_r-4 relative'
@@ -309,7 +309,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
         </DesktopView>
 
         <MobileView>
-          <div className='rounded bg-white'>
+          <div className='rounded shadow-sm'>
             <Link
               href={URL.product}
               className='border-b border-gray_r-4 relative'
@@ -329,24 +329,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   />
                 </div>
 
-                {/* PICK UP NOW badge (kanan-atas gambar) */}
-                {product?.isInBu && (
-                  <Link
-                    href='/panduan-pick-up-service'
-                    aria-label='Pick Up Now'
-                    className='absolute top-1 right-1 z-10'
-                  >
-                    <Image
-                      src='/images/PICKUP-NOW.png'
-                      alt='Pick Up Now'
-                      width={83}
-                      height={24}
-                      className='drop-shadow-sm'
-                      loading='eager'
-                    />
-                  </Link>
-                )}
-
+                {/* SNI / TKDN (kanan-atas, tetap) */}
                 <div className='absolute top-0 right-0 flex mt-3 z-20'>
                   <div className='gambarB'>
                     {product?.isSni && (
@@ -373,16 +356,37 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     )}
                   </div>
                 </div>
-              </div>
 
-              {/* BADGE DISKON KIRI-ATAS */}
-              {(product?.lowestPrice?.discountPercentage ?? 0) > 0 && (
-                <div className='absolute left-0 top-5 sm:top-5 z-30 translate-y-5 sm:translate-y-5'>
-                  <div className='bg-red-600 text-white px-2 py-1 rounded-r-lg shadow-sm text-xs font-bold leading-none'>
-                    {Math.floor(product.lowestPrice.discountPercentage)}%
+                {/* BADGE DISKON KIRI-ATAS (tetap) */}
+                {(product?.lowestPrice?.discountPercentage ?? 0) > 0 && (
+                  <div className='absolute right-0 top-1.5 '>
+                    <div className='bg-red-600 text-white px-2 py-1 rounded-l-lg shadow-sm text-xs font-bold leading-none'>
+                      {Math.floor(product.lowestPrice.discountPercentage)}%
+                    </div>
                   </div>
-                </div>
-              )}
+                )}
+
+                {/* BOTTOM-LEFT: Varian + PICK UP NOW  */}
+                {(product?.variantTotal > 1 || product?.isInBu) && (
+                  <div className='absolute bottom-0 left-0 z-30 flex items-center gap-2'>
+                    {product?.variantTotal > 1 && (
+                      <div className='badge-gray'>
+                        {product.variantTotal} Varian
+                      </div>
+                    )}
+                    {product?.isInBu && (
+                      <Image
+                        src='/images/PICKUP-NOW.png'
+                        alt='Pick Up Now'
+                        width={83}
+                        height={24}
+                        className='drop-shadow-sm'
+                        loading='eager'
+                      />
+                    )}
+                  </div>
+                )}
+              </div>
 
               {router.pathname != '/' && product?.flashSale?.id > 0 && (
                 <div className='absolute bottom-0 w-full grid z-10'>
@@ -395,19 +399,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                       loading='eager'
                     />
                   </div>
-                  <div className='relative'>
-                    {/* (konten lama dikomentari) */}
-                  </div>
-                </div>
-              )}
-              {product.variantTotal > 1 && (
-                <div className='absolute badge-gray bottom-1.5 left-1.5'>
-                  {product.variantTotal} Varian
                 </div>
               )}
             </Link>
 
-            {/* ⬇️ min-w-0 agar anak flex boleh wrap */}
+            {/* ⬇️ konten bawah (tidak diubah) */}
             <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5 min-w-0'>
               <div className='flex justify-between '>
                 {product?.manufacture?.name ? (
@@ -440,45 +436,36 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
 
               {product?.flashSale?.id > 0 &&
               product?.lowestPrice.discountPercentage > 0 ? (
-                <>
-                  {/* ⬇️ izinkan wrap supaya tidak overflow */}
-                  <div className='flex flex-wrap gap-x-2 mb-1 items-center min-w-0'>
-                    <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2 whitespace-nowrap'>
+                <div className='mb-2'>
+                  <div className='flex items-baseline gap-2 min-w-0'>
+                    <span className='text-danger-500 font-semibold tabular-nums whitespace-nowrap'>
+                      {product?.lowestPrice.priceDiscount > 0 ? (
+                        currencyFormat(product?.lowestPrice.priceDiscount)
+                      ) : (
+                        <a
+                          rel='noopener noreferrer'
+                          target='_blank'
+                          href={callForPriceWhatsapp}
+                          aria-label='Call for Inquiry'
+                        >
+                          Call for Inquiry
+                        </a>
+                      )}
+                    </span>
+                    <span
+                      className='text-gray_r-11 line-through text-[11px] sm:text-caption-2 tabular-nums
+                         whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
+                    >
                       {currencyFormat(product.lowestPrice.price)}
-                    </div>
-                  </div>
-
-                  {/* ⬇️ harga & PPN boleh pindah baris */}
-                  <div className='text-danger-500 font-semibold mb-2 whitespace-normal break-all leading-tight overflow-visible text-clip'>
-                    {product?.lowestPrice.priceDiscount > 0 ? (
-                      <>
-                        {currencyFormat(product?.lowestPrice.priceDiscount)}
-                        <div className='text-gray_r-9 text-[10px] font-normal mt-1 whitespace-normal break-all leading-tight'>
-                          Include PPN:{' '}
-                          {currencyFormat(
-                            product.lowestPrice.priceDiscount *
-                              process.env.NEXT_PUBLIC_PPN
-                          )}
-                        </div>
-                      </>
-                    ) : (
-                      <a
-                        rel='noopener noreferrer'
-                        target='_blank'
-                        href={callForPriceWhatsapp}
-                        aria-label='Call for Inquiry'
-                      >
-                        Call for Inquiry
-                      </a>
-                    )}
+                    </span>
                   </div>
-                </>
+                </div>
               ) : (
-                <div className='text-danger-500 font-semibold mb-2 min-h-[40px]'>
+                <div className='text-danger-500 font-semibold mb-2'>
                   {product?.lowestPrice.price > 0 ? (
                     <>
-                      {currencyFormat(product?.lowestPrice.price)}
-                      <div className='text-gray_r-9 text-[10px] font-normal mt-2'>
+                      {currencyFormat(product?.lowestPrice.priceDiscount)}
+                      <div className='text-gray_r-9 text-[10px] font-normal'>
                         Include PPN:{' '}
                         {currencyFormat(
                           product.lowestPrice.price *
@@ -501,7 +488,6 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
 
               {discount > 0 && (product?.flashSale?.id ?? 0) < 1 && (
                 <div className='mt-1 mb-1'>
-                  {/* ⬇️ gunakan flex-wrap & min-w-0 */}
                   <div className='flex flex-wrap items-center gap-2 text-green-600 min-w-0 mb-2'>
                     <span className='text-xs font-medium'>Voucher</span>
                     <span className='inline-flex items-center gap-1.5 rounded bg-green-50 px-2.5 py-0.5 ring-0 max-w-full'>
@@ -521,7 +507,6 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                       Ready Stock
                     </div>
                   )}
-
                   {product?.qtySold > 0 && (
                     <div className='text-gray_r-9 text-[11px] whitespace-nowrap'>
                       {sellingProductFormat(product?.qtySold)} Terjual
@@ -630,41 +615,40 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           >
             {product?.name}
           </Link>
+
           {product?.flashSale?.id > 0 &&
-          product?.lowestPrice?.discountPercentage > 0 ? (
-            <>
-              {product?.lowestPrice.discountPercentage > 0 && (
-                <div className='flex gap-x-1 mb-1 items-center'>
-                  <div className='badge-solid-red'>
-                    {Math.floor(product?.lowestPrice?.discountPercentage)}%
-                  </div>
-                  <div className='text-gray_r-11 line-through text-caption-2'>
-                    {currencyFormat(product?.lowestPrice?.price)}
-                  </div>
-                </div>
-              )}
+          product?.lowestPrice.discountPercentage > 0 ? (
+            <div className='mb-2'>
+              <div className='flex items-baseline gap-2'>
+                {/* harga sekarang (merah) */}
+                <span className='text-danger-500 font-semibold tabular-nums'>
+                  {product?.lowestPrice.priceDiscount > 0 ? (
+                    currencyFormat(product?.lowestPrice.priceDiscount) // ← perbaikan di sini
+                  ) : (
+                    <a
+                      rel='noopener noreferrer'
+                      target='_blank'
+                      href={callForPriceWhatsapp}
+                      aria-label='Call for Inquiry'
+                    >
+                      Call for Inquiry
+                    </a>
+                  )}
+                </span>
 
-              <div className='text-danger-500 font-semibold mb-2'>
-                {product?.lowestPrice?.priceDiscount > 0 ? (
-                  currencyFormat(product?.lowestPrice?.priceDiscount)
-                ) : (
-                  <a
-                    rel='noopener noreferrer'
-                    target='_blank'
-                    href={callForPriceWhatsapp}
-                    aria-label='Call for Inquiry'
-                  >
-                    Call for Inquiry
-                  </a>
-                )}
+                {/* harga lama (abu, dicoret) */}
+                <span className='text-gray_r-11 line-through text-[11px] sm:text-caption-2 tabular-nums'>
+                  {currencyFormat(product.lowestPrice.price)}
+                </span>
               </div>
-            </>
+            </div>
           ) : (
-            <div className='text-danger-500 font-semibold mb-2 min-h-[40px]'>
+            // === BLOK ELSE PUNYA KAMU, TIDAK DIUBAH ===
+            <div className='text-danger-500 font-semibold mb-2'>
               {product?.lowestPrice.price > 0 ? (
                 <>
-                  {currencyFormat(product?.lowestPrice.price)}
-                  <div className='text-gray_r-9 text-[11px] sm:text-caption-2 font-normal mt-2'>
+                  {currencyFormat(product?.lowestPrice.priceDiscount)}
+                  <div className='text-gray_r-9 text-[10px] font-normal'>
                     Include PPN:{' '}
                     {currencyFormat(
                       product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN
-- 
cgit v1.2.3