From a078561462fb33f24d838c974894b3fc7d6c9eb7 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Tue, 26 Aug 2025 12:54:05 +0700
Subject: <Miqdad> sementara

---
 src/lib/category/components/Breadcrumb.jsx | 177 ++++++++++++++++++++++++-----
 1 file changed, 150 insertions(+), 27 deletions(-)

(limited to 'src')

diff --git a/src/lib/category/components/Breadcrumb.jsx b/src/lib/category/components/Breadcrumb.jsx
index 127904ee..b369d781 100644
--- a/src/lib/category/components/Breadcrumb.jsx
+++ b/src/lib/category/components/Breadcrumb.jsx
@@ -1,45 +1,168 @@
-import odooApi from '@/core/api/odooApi'
-import { createSlug } from '@/core/utils/slug'
+import odooApi from '@/core/api/odooApi';
+import { createSlug } from '@/core/utils/slug';
 import {
   Breadcrumb as ChakraBreadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
-  Skeleton
-} from '@chakra-ui/react'
-import Link from 'next/link'
-import React from 'react'
-import { useQuery } from 'react-query'
-
-/**
- * Render a breadcrumb component.
- *
- * @param {object} categoryId - The ID of the category.
- * @return {JSX.Element} The breadcrumb component.
- */
+  Skeleton,
+} from '@chakra-ui/react';
+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`)
-  )
+    ['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>
+    );
+  }
+
+  // ===== 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>
+
+            {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>
+    );
+  }
+
+  // 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'>
+            <BreadcrumbLink
+              as={Link}
+              href='/'
+              className='!text-danger-500 whitespace-nowrap'
+            >
               Home
             </BreadcrumbLink>
           </BreadcrumbItem>
-
-          {breadcrumbs.data?.map((category, index) => (
-            <BreadcrumbItem key={index} isCurrentPage={index === breadcrumbs.data.length - 1}>
-              {index === breadcrumbs.data.length - 1 ? (
-                <BreadcrumbLink className='whitespace-nowrap'>{category.name}</BreadcrumbLink>
+          {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)}
+                  href={createSlug(
+                    '/shop/category/',
+                    category.name,
+                    category.id
+                  )}
                   className='!text-danger-500 whitespace-nowrap'
                 >
                   {category.name}
@@ -50,7 +173,7 @@ const Breadcrumb = ({ categoryId }) => {
         </ChakraBreadcrumb>
       </Skeleton>
     </div>
-  )
-}
+  );
+};
 
-export default Breadcrumb
+export default Breadcrumb;
-- 
cgit v1.2.3


From 37bda78dec58cb8c218849a77620d95682b201b9 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Tue, 26 Aug 2025 15:38:29 +0700
Subject: <Miqdad> Major Fix

---
 src/lib/category/components/Breadcrumb.jsx | 180 +++++++----------------------
 1 file changed, 44 insertions(+), 136 deletions(-)

(limited to 'src')

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>
-- 
cgit v1.2.3