3 files changed, 79 insertions, 20 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;
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%;
+}
diff --git a/src/pages/shop/category/[slug].jsx b/src/pages/shop/category/[slug].jsx
index 11840d47..e515e3f4 100644
--- a/src/pages/shop/category/[slug].jsx
+++ b/src/pages/shop/category/[slug].jsx
@@ -16,13 +16,14 @@ const ProductSearch = dynamic(() =>
 );
 const CategorySection = dynamic(() =>
   import('@/lib/product/components/CategorySection')
-)
+);
 
 export default function CategoryDetail() {
   const router = useRouter();
   const { slug = '', page = 1 } = router.query;
-  const [dataCategories, setDataCategories] = useState([])
+  const [dataCategories, setDataCategories] = useState([]);
 
+  const [shortDesc, setShortDesc] = useState('');
   const categoryName = getNameFromSlug(slug);
   const categoryId = getIdFromSlug(slug);
   const q = router?.query.q || null;
@@ -33,6 +34,22 @@ export default function CategoryDetail() {
   if (q) {
     query.q = q;
   }
+  useEffect(() => {
+    if (!router.isReady) return;
+    if (!categoryId) return;
+
+    const loadShortDesc = async () => {
+      const res = await odooApi(
+        'GET',
+        `/api/v1/category/${categoryId}/short-desc`
+      );
+
+      const desc = res?.shortDesc || '';
+      setShortDesc(desc);
+    };
+
+    loadShortDesc();
+  }, [router.isReady, categoryId]);
 
   return (
     <BasicLayout>
@@ -47,11 +64,14 @@ export default function CategoryDetail() {
         ]}
       />
 
-      <Breadcrumb categoryId={categoryId} />
-
+      <Breadcrumb categoryId={categoryId} shortDesc={shortDesc} />
 
       {!_.isEmpty(router.query) && (
-        <ProductSearch query={query} categories ={categoryId} prefixUrl={`/shop/category/${slug}`} />
+        <ProductSearch
+          query={query}
+          categories={categoryId}
+          prefixUrl={`/shop/category/${slug}`}
+        />
       )}
     </BasicLayout>
   );