2 files changed, 48 insertions, 13 deletions
diff --git a/src/lib/category/components/Breadcrumb.jsx b/src/lib/category/components/Breadcrumb.jsx
index acd2cbff..fa2846e4 100644
--- a/src/lib/category/components/Breadcrumb.jsx
+++ b/src/lib/category/components/Breadcrumb.jsx
@@ -11,11 +11,14 @@ import React from 'react';
 import { useQuery } from 'react-query';
 import useDevice from '@/core/hooks/useDevice';
 
-const Breadcrumb = ({ categoryId, currentLabel }) => {
+const Breadcrumb = ({ categoryId, shortDesc }) => {
   const breadcrumbs = useQuery(
     ['category-breadcrumbs', categoryId],
     async () =>
-      await odooApi('GET', `/api/v1/category/${categoryId}/category-breadcrumb`)
+      await odooApi(
+        'GET',
+        `/api/v1/category/${categoryId}/category-breadcrumb`,
+      ),
   );
 
   const { isDesktop, isMobile } = useDevice();
@@ -23,7 +26,7 @@ const Breadcrumb = ({ categoryId, currentLabel }) => {
 
   /* =========================
      DESKTOP
-  ========================== */
+  ========================= */
   if (isDesktop) {
     return (
       <div className='container mx-auto py-4 md:py-6'>
@@ -67,7 +70,7 @@ const Breadcrumb = ({ categoryId, currentLabel }) => {
                       href={createSlug(
                         '/shop/category/',
                         category.name,
-                        category.id
+                        category.id,
                       )}
                       className='!text-danger-500'
                     >
@@ -92,13 +95,28 @@ const Breadcrumb = ({ categoryId, currentLabel }) => {
             )}
           </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 n = items.length;
     const lastCat = n >= 1 ? items[n - 1] : null;
@@ -148,7 +166,7 @@ const Breadcrumb = ({ categoryId, currentLabel }) => {
               </BreadcrumbLink>
             </BreadcrumbItem>
 
-            {/* Ellipsis */}
+            {/* Jika ada kategori sebelum secondLast, tampilkan '..' (link ke beforeSecond) */}
             {beforeSecond && (
               <BreadcrumbItem>
                 <BreadcrumbLink
@@ -156,10 +174,9 @@ const Breadcrumb = ({ categoryId, currentLabel }) => {
                   href={createSlug(
                     '/shop/category/',
                     beforeSecond.name,
-                    beforeSecond.id
+                    beforeSecond.id,
                   )}
                   title={hiddenText}
-                  aria-label={`Kembali ke ${beforeSecond.name}`}
                   className='!text-danger-500'
                 >
                   ..
@@ -167,7 +184,6 @@ const Breadcrumb = ({ categoryId, currentLabel }) => {
               </BreadcrumbItem>
             )}
 
-            {/* Second last category */}
             {secondLast && (
               <BreadcrumbItem>
                 <BreadcrumbLink
@@ -175,7 +191,7 @@ const Breadcrumb = ({ categoryId, currentLabel }) => {
                   href={createSlug(
                     '/shop/category/',
                     secondLast.name,
-                    secondLast.id
+                    secondLast.id,
                   )}
                   className='!text-danger-500'
                 >
@@ -184,13 +200,13 @@ const Breadcrumb = ({ categoryId, currentLabel }) => {
               </BreadcrumbItem>
             )}
 
-            {/* Current */}
-            {finalLabel && (
+            {/* lastCat (current) dengan truncate & lebar dibatasi */}
+            {lastCat && (
               <BreadcrumbItem isCurrentPage>
                 <span
                   className='inline-block truncate align-bottom'
                   style={{ maxWidth: '60vw' }}
-                  title={finalLabel}
+                  title={lastCat.name}
                 >
                   {finalLabel}
                 </span>
@@ -198,6 +214,22 @@ const Breadcrumb = ({ categoryId, currentLabel }) => {
             )}
           </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>
     );
   }
diff --git a/src/lib/category/components/styles/breadcrumb.module.css b/src/lib/category/components/styles/breadcrumb.module.css
new file mode 100644
index 00000000..dee4e1b4
--- /dev/null
+++ b/src/lib/category/components/styles/breadcrumb.module.css
@@ -0,0 +1,3 @@
+.category-short-desc {
+    flex: 0 0 100%;
+}