1 files changed, 51 insertions, 15 deletions

diff --git a/src/lib/category/components/Breadcrumb.jsx b/src/lib/category/components/Breadcrumb.jsx
index 50557c3e..8579bb14 100644
--- a/src/lib/category/components/Breadcrumb.jsx
+++ b/src/lib/category/components/Breadcrumb.jsx
@@ -11,17 +11,21 @@ import React from 'react';
 import { useQuery } from 'react-query';
 import useDevice from '@/core/hooks/useDevice';
 
-const Breadcrumb = ({ categoryId }) => {
+const Breadcrumb = ({ categoryId, shortDesc }) => {
   const breadcrumbs = useQuery(
     ['category-breadcrumbs', categoryId],
     async () =>
       await odooApi('GET', `/api/v1/category/${categoryId}/category-breadcrumb`)
   );
+
   const { isDesktop, isMobile } = useDevice();
 
   const items = breadcrumbs.data ?? [];
   const lastIdx = items.length - 1;
 
+  /* =========================
+     DESKTOP
+  ========================= */
   if (isDesktop) {
     return (
       <div className='container mx-auto py-4 md:py-6'>
@@ -79,16 +83,34 @@ const Breadcrumb = ({ categoryId }) => {
             })}
           </ChakraBreadcrumb>
         </Skeleton>
+        {shortDesc && (
+          <div
+            className='
+    w-full mt-2
+    text-sm text-neutral-600
+    leading-7
+    text-justify
+    break-words
+    [hyphens:auto]
+    max-w-none
+  '
+          >
+            {shortDesc}
+          </div>
+        )}
       </div>
     );
   }
 
+  /* =========================
+     MOBILE
+  ========================= */
   if (isMobile) {
-    const items = breadcrumbs.data ?? [];
     const n = items.length;
-    const lastCat = n >= 1 ? items[n - 1] : null; // terakhir (current)
-    const secondLast = n >= 2 ? items[n - 2] : null; // sebelum current
-    const beforeSecond = n >= 3 ? items[n - 3] : null; // sebelum secondLast
+    const lastCat = n >= 1 ? items[n - 1] : null;
+    const secondLast = n >= 2 ? items[n - 2] : null;
+    const beforeSecond = n >= 3 ? items[n - 3] : null;
+
     const hiddenText =
       n >= 3
         ? items
@@ -101,15 +123,15 @@ const Breadcrumb = ({ categoryId }) => {
       <div className='container mx-auto py-2 mt-2'>
         <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-full'>
           <ChakraBreadcrumb
-            separator={<span className='mx-1'>/</span>} // lebih rapat
+            separator={<span className='mx-1'>/</span>}
             spacing='4px'
             sx={{
               '& ol': {
                 display: 'flex',
                 alignItems: 'center',
-                overflow: 'hidden', // untuk ellipsis
-                whiteSpace: 'nowrap', // untuk ellipsis
-                gap: '0', // no extra gap
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                gap: '0',
               },
               '& li': { display: 'inline-flex', alignItems: 'center' },
               '& li:not(:last-of-type)': {
@@ -117,7 +139,7 @@ const Breadcrumb = ({ categoryId }) => {
                 whiteSpace: 'nowrap',
               },
               '& li:last-of-type': {
-                flex: '0 1 auto', // jangan ambil full space biar gak keliatan “space kosong”
+                flex: '0 1 auto',
                 minWidth: 0,
               },
             }}
@@ -130,7 +152,6 @@ const Breadcrumb = ({ categoryId }) => {
               </BreadcrumbLink>
             </BreadcrumbItem>
 
-            {/* Jika ada kategori sebelum secondLast, tampilkan '..' (link ke beforeSecond) */}
             {beforeSecond && (
               <BreadcrumbItem>
                 <BreadcrumbLink
@@ -141,7 +162,6 @@ const Breadcrumb = ({ categoryId }) => {
                     beforeSecond.id
                   )}
                   title={hiddenText}
-                  aria-label={`Kembali ke ${beforeSecond.name}`}
                   className='!text-danger-500'
                 >
                   ..
@@ -149,7 +169,6 @@ const Breadcrumb = ({ categoryId }) => {
               </BreadcrumbItem>
             )}
 
-            {/* secondLast sebagai link (kalau ada) */}
             {secondLast && (
               <BreadcrumbItem>
                 <BreadcrumbLink
@@ -166,12 +185,11 @@ const Breadcrumb = ({ categoryId }) => {
               </BreadcrumbItem>
             )}
 
-            {/* lastCat (current) dengan truncate & lebar dibatasi */}
             {lastCat && (
               <BreadcrumbItem isCurrentPage>
                 <span
                   className='inline-block truncate align-bottom'
-                  style={{ maxWidth: '60vw' }} // batasi lebar supaya gak “makan” baris & keliatan space kosong
+                  style={{ maxWidth: '60vw' }}
                   title={lastCat.name}
                 >
                   {lastCat.name}
@@ -180,9 +198,27 @@ const Breadcrumb = ({ categoryId }) => {
             )}
           </ChakraBreadcrumb>
         </Skeleton>
+
+        {shortDesc && (
+          <div
+            className='
+    w-full mt-2
+    text-sm text-neutral-600
+    leading-7
+    text-justify
+    break-words
+    [hyphens:auto]
+    max-w-none
+  '
+          >
+            {shortDesc}
+          </div>
+        )}
       </div>
     );
   }
+
+  return null;
 };
 
 export default Breadcrumb;