<Miqdad> cr renca manufacture logo

5 files changed, 145 insertions, 112 deletions

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index fd73d8b6..d6959aa8 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -187,6 +187,27 @@ const Information = ({ product }: Props) => {
         <div className={style['value']}>{selectedVariant?.code}</div>
       </div>
       <div className={style['row']}>
+        <div className={style['label']}>Berat Barang</div>
+        <div className={style['value']}>
+          {selectedVariant?.weight > 0 ? `${selectedVariant?.weight} Kg` : '-'}
+        </div>
+      </div>
+      <div className={style['row']}>
+        <div className={style['label']}>Terjual</div>
+        <div className={style['value']}>
+          {product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}
+        </div>
+      </div>
+      <div className={style['row']}>
+        <div className={style['label']}>Persiapan Barang</div>
+        {isLoading && (
+          <div className={style['value']}>
+            <Skeleton height={5} width={100} />
+          </div>
+        )}
+        {!isLoading && <div className={style['value']}>{sla?.sla_date}</div>}
+      </div>
+      <div className={style['row']}>
         <div className={`${style['label']} items-center `}>Manufacture</div>
         <div className={style['value']}>
           {!!product.manufacture.name ? (
@@ -216,27 +237,6 @@ const Information = ({ product }: Props) => {
           )}
         </div>
       </div>
-      <div className={style['row']}>
-        <div className={style['label']}>Berat Barang</div>
-        <div className={style['value']}>
-          {selectedVariant?.weight > 0 ? `${selectedVariant?.weight} Kg` : '-'}
-        </div>
-      </div>
-      <div className={style['row']}>
-        <div className={style['label']}>Terjual</div>
-        <div className={style['value']}>
-          {product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}
-        </div>
-      </div>
-      <div className={style['row']}>
-        <div className={style['label']}>Persiapan Barang</div>
-        {isLoading && (
-          <div className={style['value']}>
-            <Skeleton height={5} width={100} />
-          </div>
-        )}
-        {!isLoading && <div className={style['value']}>{sla?.sla_date}</div>}
-      </div>
     </div>
   );
 };
diff --git a/src-migrate/modules/product-detail/styles/information.module.css b/src-migrate/modules/product-detail/styles/information.module.css
index 5aa64fe5..b1a8b256 100644
--- a/src-migrate/modules/product-detail/styles/information.module.css
+++ b/src-migrate/modules/product-detail/styles/information.module.css
@@ -6,7 +6,7 @@
     @apply flex p-4 rounded-sm bg-gray-100;
 }
 
-.row:nth-child(odd) {
+.row:nth-child(even) {
     @apply bg-white;
 }
 
diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index bc07507b..24a8498a 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -401,34 +401,10 @@ const ProductDesktopVariant = ({
                 {product?.name}
               </h1>
               <div className='mt-10'>
-                <div className='flex p-3 bg-gray_r-4'>
+                <div className='flex p-3'>
                   <div className='w-4/12 text-gray_r-12/70'>Item Code</div>
                   <div className='w-8/12'>{product.code}</div>
                 </div>
-                <div className='flex p-3 items-center '>
-                  <div className='w-4/12 text-gray_r-12/70'>Manufacture</div>
-                  <div className='w-8/12'>
-                    <Link
-                      href={createSlug(
-                        '/shop/brands/',
-                        product.manufacture.name,
-                        product.manufacture.id.toString()
-                      )}
-                    >
-                      {product?.manufacture.logo ? (
-                        <Image
-                          width={100}
-                          src={product.manufacture.logo}
-                          alt={product.manufacture.name}
-                        />
-                      ) : (
-                        <p className='font-bold text-red-500'>
-                          {product.manufacture.name}
-                        </p>
-                      )}
-                    </Link>
-                  </div>
-                </div>
 
                 <div className='flex p-3 bg-gray_r-4 '>
                   <div className='w-4/12 text-gray_r-12/70'>Berat Barang</div>
@@ -479,6 +455,30 @@ const ProductDesktopVariant = ({
                     )}
                   </div>
                 </div>
+                <div className='flex p-3 items-center '>
+                  <div className='w-4/12 text-gray_r-12/70'>Manufacture</div>
+                  <div className='w-8/12'>
+                    <Link
+                      href={createSlug(
+                        '/shop/brands/',
+                        product.manufacture.name,
+                        product.manufacture.id.toString()
+                      )}
+                    >
+                      {product?.manufacture.logo ? (
+                        <Image
+                          width={100}
+                          src={product.manufacture.logo}
+                          alt={product.manufacture.name}
+                        />
+                      ) : (
+                        <p className='font-bold text-red-500'>
+                          {product.manufacture.name}
+                        </p>
+                      )}
+                    </Link>
+                  </div>
+                </div>
               </div>
             </div>
 
diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
index c44de561..acacb535 100644
--- a/src/lib/product/components/Product/ProductMobileVariant.jsx
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -405,28 +405,6 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
           <SpecificationContent label='Item Code'>
             <span>{activeVariant?.code || '-'}</span>
           </SpecificationContent>
-          <SpecificationContent label='Manufacture'>
-            <Link
-              href={createSlug(
-                '/shop/brands/',
-                product.manufacture.name,
-                product.manufacture.id.toString()
-              )}
-            >
-              {product?.manufacture.logo ? (
-                <Image
-                  width={55}
-                  objectFit='contain'
-                  src={product.manufacture.logo}
-                  alt={product.manufacture.name}
-                />
-              ) : (
-                <p className='font-bold text-red-500'>
-                  {product.manufacture.name}
-                </p>
-              )}
-            </Link>
-          </SpecificationContent>{' '}
           <SpecificationContent label='Terjual'>
             <span className='text-sm'>{product.qtySold || '-'}</span>
           </SpecificationContent>{' '}
@@ -495,6 +473,28 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
               )}
             </span>
           </SpecificationContent>
+          <SpecificationContent label='Manufacture'>
+            <Link
+              href={createSlug(
+                '/shop/brands/',
+                product.manufacture.name,
+                product.manufacture.id.toString()
+              )}
+            >
+              {product?.manufacture.logo ? (
+                <Image
+                  width={100}
+                  objectFit='contain'
+                  src={product.manufacture.logo}
+                  alt={product.manufacture.name}
+                />
+              ) : (
+                <p className='font-bold text-red-500'>
+                  {product.manufacture.name}
+                </p>
+              )}
+            </Link>
+          </SpecificationContent>{' '}
         </TabContent>
 
         <TabContent
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 7a0d1cc1..b86200ae 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -688,14 +688,15 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             {product?.name}
           </Link>
 
+          {/* ---------- HARGA ---------- */}
           {product?.flashSale?.id > 0 &&
           product?.lowestPrice.discountPercentage > 0 ? (
+            // ===== CASE FLASH SALE =====
             <div className='mb-2'>
-              <div className='flex items-baseline gap-1'>
-                {/* harga sekarang (merah) */}
-                <span className='text-danger-500 font-semibold text-sm'>
+              <div className='flex items-baseline gap-1 min-w-0'>
+                <span className='text-danger-500 text-sm font-semibold whitespace-nowrap'>
                   {product?.lowestPrice.priceDiscount > 0 ? (
-                    currencyFormat(product?.lowestPrice.priceDiscount) // ← perbaikan di sini
+                    currencyFormat(product?.lowestPrice.priceDiscount)
                   ) : (
                     <a
                       rel='noopener noreferrer'
@@ -708,52 +709,84 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   )}
                 </span>
 
-                {/* harga lama (abu, dicoret) */}
-                <span className='text-gray_r-11 line-through text-xs sm:text-caption-2 '>
+                <span
+                  className='text-gray_r-11 line-through text-xs sm:text-caption-2 
+           whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
+                >
                   {currencyFormat(product.lowestPrice.price)}
                 </span>
               </div>
             </div>
           ) : (
-            // === BLOK ELSE PUNYA KAMU, TIDAK DIUBAH ===
-            <div className='text-danger-500 font-semibold mb-2'>
-              {product?.lowestPrice.price > 0 ? (
-                <>
-                  {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
-                    )}
-                  </div>
-                </>
-              ) : (
-                <a
-                  rel='noopener noreferrer'
-                  target='_blank'
-                  href={callForPriceWhatsapp}
-                  aria-label='Call for Inquiry'
-                >
-                  Call for Inquiry
-                </a>
-              )}
-            </div>
-          )}
+            // ===== BUKAN FLASH SALE =====
+            (() => {
+              const basePrice = product?.lowestPrice?.priceDiscount || 0;
+              const voucherCut = discount || 0;
+              const finalAfterVoucher = Math.max(basePrice - voucherCut, 0);
+
+              // CASE 1: ada harga (>0)
+              if (product?.lowestPrice?.price > 0) {
+                if (voucherCut > 0) {
+                  return (
+                    <div className='mb-2'>
+                      {/* baris harga sekarang + harga coret */}
+                      <div className='flex items-baseline gap-1 min-w-0'>
+                        {/* harga setelah voucher */}
+                        <span className='inline-flex items-center gap-1 text-danger-500 font-semibold text-xs whitespace-nowrap rounded bg-red-50 px-2.5 py-0.5 border border-solid border-danger-500'>
+                          <TicketIcon className='h-4 w-4 shrink-0 text-danger-500' />
+                          {currencyFormat(finalAfterVoucher)}
+                        </span>
 
-          {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'>
-                  <TicketIcon className='h-3.5 w-3.5 shrink-0' />
-                  <span className='text-xs font-medium  break-all'>
-                    {currencyFormat(discount)}
-                  </span>
-                </span>
-              </div>
-            </div>
+                        {/* harga sebelum voucher, dicoret, truncate kalau kepanjangan */}
+                        {/* <span
+                              className='text-gray_r-11 line-through text-[11px] leading-snug 
+                     whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
+                            >
+                              {currencyFormat(basePrice)}
+                            </span> */}
+                      </div>
+
+                      {/* PPN pakai harga finalAfterVoucher */}
+                      <div className='text-gray_r-9 text-[10px] font-normal'>
+                        Include PPN:{' '}
+                        {currencyFormat(
+                          finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
+                        )}
+                      </div>
+                    </div>
+                  );
+                }
+
+                // CASE 1b: ga ada voucher
+                return (
+                  <div className='text-danger-500 font-semibold mb-2'>
+                    {currencyFormat(basePrice)}
+                    <div className='text-gray_r-9 text-[10px] font-normal'>
+                      Include PPN:{' '}
+                      {currencyFormat(
+                        product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN
+                      )}
+                    </div>
+                  </div>
+                );
+              }
+
+              // CASE 2: harga 0 → call for inquiry
+              return (
+                <div className='text-danger-500 font-semibold mb-2'>
+                  <a
+                    rel='noopener noreferrer'
+                    target='_blank'
+                    href={callForPriceWhatsapp}
+                    aria-label='Call for Inquiry'
+                  >
+                    Call for Inquiry
+                  </a>
+                </div>
+              );
+            })()
           )}
+          {/* ---------- /HARGA ---------- */}
 
           <div className='flex w-full items-center gap-x-1 '>
             {product?.stockTotal > 0 && (