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/lib/category')

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