<Miqdad> Major Fix

8 files changed, 70 insertions, 152 deletions

diff --git a/public/images/doc.svg b/public/images/doc.svg
new file mode 100644
index 00000000..5e811ab2
--- /dev/null
+++ b/public/images/doc.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.50009 1.25C6.83704 1.25 6.20116 1.51339 5.73232 1.98223C5.26348 2.45107 5.00009 3.08696 5.00009 3.75V6.25H6.25009V3.75C6.25009 3.41848 6.38178 3.10054 6.6162 2.86612C6.85062 2.6317 7.16857 2.5 7.50009 2.5H11.2501V5.625C11.2501 6.12228 11.4476 6.59919 11.7993 6.95083C12.1509 7.30246 12.6278 7.5 13.1251 7.5H16.2501V16.25C16.2501 16.5815 16.1184 16.8995 15.884 17.1339C15.6495 17.3683 15.3316 17.5 15.0001 17.5H7.50009C7.44576 17.5002 7.39148 17.4969 7.33759 17.49L6.31009 18.4487C6.66384 18.6413 7.06884 18.75 7.50009 18.75H15.0001C15.6631 18.75 16.299 18.4866 16.7679 18.0178C17.2367 17.5489 17.5001 16.913 17.5001 16.25V6.7675C17.5 6.27057 17.3026 5.794 16.9513 5.4425L13.3088 1.79875C12.9573 1.44748 12.4808 1.25011 11.9838 1.25H7.50009ZM15.9913 6.25H13.1263C12.9606 6.25 12.8016 6.18415 12.6844 6.06694C12.5672 5.94973 12.5013 5.79076 12.5013 5.625V2.75875L15.9913 6.25ZM1.87884 15H4.06634L3.32884 17.95C3.17759 18.5525 3.90634 18.9825 4.36134 18.5575L10.4513 12.8725C10.5887 12.7441 10.6843 12.5774 10.7257 12.394C10.7672 12.2106 10.7525 12.019 10.6836 11.8441C10.6147 11.6691 10.4948 11.5189 10.3395 11.413C10.1842 11.3071 10.0006 11.2503 9.81259 11.25H8.44009L9.41634 8.3225C9.44758 8.22869 9.45612 8.12881 9.44126 8.03106C9.4264 7.93331 9.38856 7.84048 9.33085 7.76019C9.27314 7.67991 9.1972 7.61446 9.10928 7.56923C9.02136 7.524 8.92396 7.50027 8.82509 7.5H4.48259C4.35905 7.49992 4.23827 7.53645 4.13548 7.60497C4.0327 7.67349 3.95252 7.77094 3.90509 7.885L1.30134 14.135C1.26186 14.2299 1.24641 14.3331 1.25634 14.4354C1.26627 14.5377 1.30128 14.636 1.35827 14.7215C1.41526 14.8071 1.49246 14.8772 1.58305 14.9258C1.67363 14.9744 1.7748 14.9999 1.87759 15" fill="#9CA3AF"/>
+</svg>
diff --git a/public/images/doc_red.svg b/public/images/doc_red.svg
new file mode 100644
index 00000000..7816ac92
--- /dev/null
+++ b/public/images/doc_red.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M7.50009 1.25C6.83704 1.25 6.20116 1.51339 5.73232 1.98223C5.26348 2.45107 5.00009 3.08696 5.00009 3.75V6.25H6.25009V3.75C6.25009 3.41848 6.38178 3.10054 6.6162 2.86612C6.85062 2.6317 7.16857 2.5 7.50009 2.5H11.2501V5.625C11.2501 6.12228 11.4476 6.59919 11.7993 6.95083C12.1509 7.30246 12.6278 7.5 13.1251 7.5H16.2501V16.25C16.2501 16.5815 16.1184 16.8995 15.884 17.1339C15.6495 17.3683 15.3316 17.5 15.0001 17.5H7.50009C7.44576 17.5002 7.39148 17.4969 7.33759 17.49L6.31009 18.4487C6.66384 18.6413 7.06884 18.75 7.50009 18.75H15.0001C15.6631 18.75 16.299 18.4866 16.7679 18.0178C17.2367 17.5489 17.5001 16.913 17.5001 16.25V6.7675C17.5 6.27057 17.3026 5.794 16.9513 5.4425L13.3088 1.79875C12.9573 1.44748 12.4808 1.25011 11.9838 1.25H7.50009ZM15.9913 6.25H13.1263C12.9606 6.25 12.8016 6.18415 12.6844 6.06694C12.5672 5.94973 12.5013 5.79076 12.5013 5.625V2.75875L15.9913 6.25ZM1.87884 15H4.06634L3.32884 17.95C3.17759 18.5525 3.90634 18.9825 4.36134 18.5575L10.4513 12.8725C10.5887 12.7441 10.6843 12.5774 10.7257 12.394C10.7672 12.2106 10.7525 12.019 10.6836 11.8441C10.6147 11.6691 10.4948 11.5189 10.3395 11.413C10.1842 11.3071 10.0006 11.2503 9.81259 11.25H8.44009L9.41634 8.3225C9.44758 8.22869 9.45612 8.12881 9.44126 8.03106C9.4264 7.93331 9.38856 7.84048 9.33085 7.76019C9.27314 7.67991 9.1972 7.61446 9.10928 7.56923C9.02136 7.524 8.92396 7.50027 8.82509 7.5H4.48259C4.35905 7.49992 4.23827 7.53645 4.13548 7.60497C4.0327 7.67349 3.95252 7.77094 3.90509 7.885L1.30134 14.135C1.26186 14.2299 1.24641 14.3331 1.25634 14.4354C1.26627 14.5377 1.30128 14.636 1.35827 14.7215C1.41526 14.8071 1.49246 14.8772 1.58305 14.9258C1.67363 14.9744 1.7748 14.9999 1.87759 15"
+        fill="#CC2020" />
+</svg>
\ No newline at end of file
diff --git a/public/images/document.png b/public/images/document.png
deleted file mode 100644
index d1772b8c..00000000
--- a/public/images/document.png
+++ /dev/null
diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx
index 9f66345e..1cb58a75 100644
--- a/src-migrate/modules/product-detail/components/AddToCart.tsx
+++ b/src-migrate/modules/product-detail/components/AddToCart.tsx
@@ -1,6 +1,6 @@
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
 import style from '../styles/price-action.module.css';
-import { Button, Link, useToast } from '@chakra-ui/react';
+import { Button, color, Link, useToast } from '@chakra-ui/react';
 import product from 'next-seo/lib/jsonld/product';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -163,13 +163,13 @@ const AddToCart = ({
 
   const btnConfig = {
     add_to_cart: {
-      colorScheme: isDesktop ? 'yellow' : 'red',
-      variant: 'solid',
+      colorScheme: 'red',
+      variant: 'outline',
       text: 'Keranjang',
     },
     buy: {
       colorScheme: 'red',
-      variant: isDesktop ? 'solid' : 'outline',
+      variant: 'solid',
       text: isDesktop ? 'Beli' : 'Beli Sekarang',
     },
   };
@@ -190,6 +190,7 @@ const AddToCart = ({
       <Button
         onClick={handleButton}
         colorScheme={btnConfig[source].colorScheme}
+        variant= {btnConfig[source].variant}
         className='w-full'
       >
         {btnConfig[source].text}
diff --git a/src-migrate/modules/product-detail/components/AddToQuotation.tsx b/src-migrate/modules/product-detail/components/AddToQuotation.tsx
index 17a62eee..ebfcef32 100644
--- a/src-migrate/modules/product-detail/components/AddToQuotation.tsx
+++ b/src-migrate/modules/product-detail/components/AddToQuotation.tsx
@@ -106,12 +106,13 @@ const AddToQuotation = ({
 
   const btnConfig = {
     add_to_cart: {
-      colorScheme: 'yellow',
-
+      colorScheme: 'red',
+      variant: 'outline',
       text: 'Keranjang',
     },
     buy: {
       colorScheme: 'red',
+      variant: 'solid',
       text: 'Beli',
     },
   };
@@ -125,7 +126,7 @@ const AddToQuotation = ({
         className='w-full border-2 p-2 gap-1 hover:bg-slate-100 flex items-center'
       >
         <ImageNext
-          src='/images/document.png'
+          src= {isDesktop ? '/images/doc_red.svg' : '/images/doc.svg'}
           alt='penawaran instan'
           className=''
           width={25}
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
@@ -342,6 +342,13 @@ const PriceAction = ({ product }: Props) => {
             />
           </div>
           <div className='col-span-5'>
+            <AddToCart
+              products={product}
+              variantId={activeVariantId}
+              quantity={Number(quantityInput)}
+            />
+          </div>
+          <div className='col-span-5'>
             {!isApproval && (
               <AddToCart
                 source='buy'
@@ -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>
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 35df97df..79921e22 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -161,7 +161,7 @@ return (
                         <img
                           src={img}
                           alt={`Gambar ${i + 1}`}
-                          className='w-[80%] aspect-square object-contain'
+                          className='w-[85%] aspect-square object-contain'
                           onError={(e) => {
                             (e.target as HTMLImageElement).src =
                               '/path/to/fallback-image.jpg';
@@ -174,7 +174,7 @@ return (
                       <img
                         src={mainImage || '/path/to/fallback-image.jpg'}
                         alt='Gambar produk'
-                        className='w-[80%] aspect-square object-contain'
+                        className='w-[85%] aspect-square object-contain'
                       />
                     </div>
                   )}
diff --git a/src/lib/category/components/Breadcrumb.jsx b/src/lib/category/components/Breadcrumb.jsx
index b369d781..e691e379 100644
--- a/src/lib/category/components/Breadcrumb.jsx
+++ b/src/lib/category/components/Breadcrumb.jsx
@@ -9,106 +9,57 @@ import {
 import Link from 'next/link';
 import React from 'react';
 import { useQuery } from 'react-query';
-import useDevice from '@/core/hooks/useDevice';
 
 const Breadcrumb = ({ categoryId }) => {
-  const { isDesktop, isMobile } = useDevice();
-
   const breadcrumbs = useQuery(
     ['category-breadcrumbs', categoryId],
     async () =>
       await odooApi('GET', `/api/v1/category/${categoryId}/category-breadcrumb`)
   );
 
-  const cats = breadcrumbs.data ?? [];
-  const total = cats.length;
-
-  const showEllipsis = total > 2;
-  const parent = total >= 2 ? cats[total - 2] : null;
-  const last = total ? cats[total - 1] : null;
-  const hiddenText = showEllipsis
-    ? cats
-        .slice(0, total - 2)
-        .map((c) => c.name)
-        .join(' / ')
-    : '';
-
-  // ===== MOBILE: 2 BARIS -> (1) Home/..//Parent  (2) Last (wrap) =====
-  if (isMobile) {
-    return (
-      <div className='container mx-auto py-4 md:py-6'>
-        <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-11/12'>
-          {/* Baris 1 */}
-          <ChakraBreadcrumb>
-            <BreadcrumbItem>
-              <BreadcrumbLink as={Link} href='/' className='!text-danger-500'>
-                Home
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-
-            {showEllipsis && (
-              <BreadcrumbItem>
-                <BreadcrumbLink
-                  className='!text-danger-500'
-                  title={hiddenText}
-                  aria-label='Kategori tersembunyi'
-                >
-                  ..
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-            )}
-
-            {parent && (
-              <BreadcrumbItem>
-                <BreadcrumbLink
-                  as={Link}
-                  href={createSlug('/shop/category/', parent.name, parent.id)}
-                  className='!text-danger-500'
-                >
-                  {parent.name}
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-            )}
-          </ChakraBreadcrumb>
-
-          {/* Baris 2 */}
-          {last && (
-            <ChakraBreadcrumb className='mt-1'>
-              <BreadcrumbItem isCurrentPage>
-                <BreadcrumbLink className='whitespace-normal break-words leading-6'>
-                  {last.name}
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-            </ChakraBreadcrumb>
-          )}
-        </Skeleton>
-      </div>
-    );
-  }
+  const items = breadcrumbs.data ?? [];
+  const lastIdx = items.length - 1;
 
-  // ===== DESKTOP: biarkan seperti semula =====
-  if (isDesktop) {
-    return (
-      <div className='container mx-auto py-4 md:py-6'>
-        <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-2/3'>
-          <ChakraBreadcrumb>
-            <BreadcrumbItem>
-              <BreadcrumbLink
-                as={Link}
-                href='/'
-                className='!text-danger-500 whitespace-nowrap'
-              >
-                Home
-              </BreadcrumbLink>
-            </BreadcrumbItem>
+  return (
+    <div className='container mx-auto py-4 md:py-6'>
+      <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-2/3'>
+        <ChakraBreadcrumb
+          spacing='8px'
+          sx={{
+            // mobile boleh wrap; desktop tetap 1 baris
+            '& ol': {
+              display: 'flex',
+              flexWrap: { base: 'wrap', md: 'nowrap' },
+              alignItems: 'center',
+            },
+            '& li': { display: 'inline-flex', alignItems: 'center' },
+            // semua item sebelum terakhir: jangan pernah wrap (tetap di baris atas)
+            '& li:not(:last-of-type)': {
+              flex: '0 0 auto',
+              whiteSpace: 'nowrap',
+            },
+            // item terakhir: boleh ambil sisa lebar & wrap jika perlu
+            '& li:last-of-type': {
+              flex: '1 1 auto',
+              minWidth: 0,
+            },
+          }}
+        >
+          {/* Home */}
+          <BreadcrumbItem>
+            <BreadcrumbLink as={Link} href='/' className='!text-danger-500'>
+              Home
+            </BreadcrumbLink>
+          </BreadcrumbItem>
 
-            {cats.map((category, index) => (
-              <BreadcrumbItem
-                key={index}
-                isCurrentPage={index === cats.length - 1}
-              >
-                {index === cats.length - 1 ? (
-                  <BreadcrumbLink className='whitespace-nowrap'>
+          {/* Categories */}
+          {items.map((category, index) => {
+            const isLast = index === lastIdx;
+            return (
+              <BreadcrumbItem key={index} isCurrentPage={isLast}>
+                {isLast ? (
+                  // HANYA yang terakhir boleh turun/wrap di mobile
+                  <BreadcrumbLink className='block whitespace-normal break-words md:whitespace-nowrap'>
                     {category.name}
                   </BreadcrumbLink>
                 ) : (
@@ -119,57 +70,14 @@ const Breadcrumb = ({ categoryId }) => {
                       category.name,
                       category.id
                     )}
-                    className='!text-danger-500 whitespace-nowrap'
+                    className='!text-danger-500'
                   >
                     {category.name}
                   </BreadcrumbLink>
                 )}
               </BreadcrumbItem>
-            ))}
-          </ChakraBreadcrumb>
-        </Skeleton>
-      </div>
-    );
-  }
-
-  // Fallback → layout desktop
-  return (
-    <div className='container mx-auto py-4 md:py-6'>
-      <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-2/3'>
-        <ChakraBreadcrumb>
-          <BreadcrumbItem>
-            <BreadcrumbLink
-              as={Link}
-              href='/'
-              className='!text-danger-500 whitespace-nowrap'
-            >
-              Home
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          {cats.map((category, index) => (
-            <BreadcrumbItem
-              key={index}
-              isCurrentPage={index === cats.length - 1}
-            >
-              {index === cats.length - 1 ? (
-                <BreadcrumbLink className='whitespace-nowrap'>
-                  {category.name}
-                </BreadcrumbLink>
-              ) : (
-                <BreadcrumbLink
-                  as={Link}
-                  href={createSlug(
-                    '/shop/category/',
-                    category.name,
-                    category.id
-                  )}
-                  className='!text-danger-500 whitespace-nowrap'
-                >
-                  {category.name}
-                </BreadcrumbLink>
-              )}
-            </BreadcrumbItem>
-          ))}
+            );
+          })}
         </ChakraBreadcrumb>
       </Skeleton>
     </div>