From bcf7be5a0c1d9635383605afc0600386b0b356ea Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Tue, 26 Aug 2025 11:41:54 +0700
Subject: <Miqdad>Push

---
 .../product-detail/components/Breadcrumb.tsx       | 79 +++++++++++++++-------
 1 file changed, 54 insertions(+), 25 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Breadcrumb.tsx')

diff --git a/src-migrate/modules/product-detail/components/Breadcrumb.tsx b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
index f41859a9..ba53aca4 100644
--- a/src-migrate/modules/product-detail/components/Breadcrumb.tsx
+++ b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
@@ -1,41 +1,70 @@
-import React, { Fragment } from 'react'
-import { useQuery } from 'react-query'
-import { getProductCategoryBreadcrumb } from '~/services/product'
-import Link from 'next/link'
-import { createSlug } from '~/libs/slug'
+import React, { Fragment } from 'react';
+import { useQuery } from 'react-query';
+import { getProductCategoryBreadcrumb } from '~/services/product';
+import Link from 'next/link';
+import { createSlug } from '~/libs/slug';
 
 type Props = {
-  id: number,
-  name: string
-}
+  id: number;
+  name: string;
+};
+
+const MAX_VISIBLE_CATEGORIES = 2; // tampilkan 2 level terakhir
 
 const Breadcrumb = ({ id, name }: Props) => {
-  const query = useQuery({
-    queryKey: ['product-category-breadcrumb'],
+  const { data: breadcrumbs = [] } = useQuery({
+    queryKey: ['product-category-breadcrumb', id], // penting: ikutkan id
     queryFn: () => getProductCategoryBreadcrumb(id),
-    refetchOnWindowFocus: false
-  })
+    refetchOnWindowFocus: false,
+  });
 
-  const breadcrumbs = query.data || []
+  const total = breadcrumbs.length;
+  const showEllipsis = total > MAX_VISIBLE_CATEGORIES;
+  const visible = showEllipsis
+    ? breadcrumbs.slice(total - MAX_VISIBLE_CATEGORIES)
+    : breadcrumbs;
+  const hiddenText = showEllipsis
+    ? breadcrumbs
+        .slice(0, total - MAX_VISIBLE_CATEGORIES)
+        .map((c) => c.name)
+        .join(' / ')
+    : '';
 
   return (
-    <div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'>
-      <Link href='/' className='text-danger-500'>Home</Link>
-      <span className='mx-2'>/</span>
-      {breadcrumbs.map((category, index) => (
-        <Fragment key={index}>
+    <div className='flex items-center whitespace-nowrap overflow-hidden text-caption-1 leading-7'>
+      <Link href='/' className='text-danger-500 shrink-0'>
+        Home
+      </Link>
+      <span className='mx-2 shrink-0'>/</span>
+
+      {showEllipsis && (
+        <>
+          <span className='text-danger-500 shrink-0' title={hiddenText}>
+            …
+          </span>
+          <span className='mx-2 shrink-0'>/</span>
+        </>
+      )}
+
+      {visible.map((category, index) => (
+        <Fragment key={category.id ?? index}>
           <Link
-            href={createSlug('/shop/category/', category.name, category.id.toString())}
-            className='text-danger-500'
+            href={createSlug(
+              '/shop/category/',
+              category.name,
+              String(category.id)
+            )}
+            className='text-danger-500 shrink-0'
           >
             {category.name}
           </Link>
-          <span className='mx-2'>/</span>
+          <span className='mx-2 shrink-0'>/</span>
         </Fragment>
       ))}
-      <span>{name}</span>
+
+      <span className='truncate min-w-0 flex-1'>{name}</span>
     </div>
-  )
-}
+  );
+};
 
-export default Breadcrumb
\ No newline at end of file
+export default Breadcrumb;
-- 
cgit v1.2.3


From 2403eae1686c565364691022d294123a16f4f031 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Tue, 26 Aug 2025 12:04:46 +0700
Subject: <Miqdad> Fix Breadcrumb & image

---
 .../product-detail/components/Breadcrumb.tsx       | 139 ++++++++++++++++-----
 1 file changed, 106 insertions(+), 33 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Breadcrumb.tsx')

diff --git a/src-migrate/modules/product-detail/components/Breadcrumb.tsx b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
index ba53aca4..d495b77b 100644
--- a/src-migrate/modules/product-detail/components/Breadcrumb.tsx
+++ b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
@@ -1,68 +1,141 @@
 import React, { Fragment } from 'react';
 import { useQuery } from 'react-query';
-import { getProductCategoryBreadcrumb } from '~/services/product';
 import Link from 'next/link';
+import { getProductCategoryBreadcrumb } from '~/services/product';
 import { createSlug } from '~/libs/slug';
+import useDevice from '@/core/hooks/useDevice';
 
-type Props = {
-  id: number;
-  name: string;
-};
-
-const MAX_VISIBLE_CATEGORIES = 2; // tampilkan 2 level terakhir
+type Props = { id: number; name: string };
 
 const Breadcrumb = ({ id, name }: Props) => {
+  const { isDesktop, isMobile } = useDevice();
+
   const { data: breadcrumbs = [] } = useQuery({
-    queryKey: ['product-category-breadcrumb', id], // penting: ikutkan id
+    queryKey: ['product-category-breadcrumb', id],
     queryFn: () => getProductCategoryBreadcrumb(id),
     refetchOnWindowFocus: false,
   });
 
   const total = breadcrumbs.length;
-  const showEllipsis = total > MAX_VISIBLE_CATEGORIES;
-  const visible = showEllipsis
-    ? breadcrumbs.slice(total - MAX_VISIBLE_CATEGORIES)
-    : breadcrumbs;
-  const hiddenText = showEllipsis
+  const lastCat = total ? breadcrumbs[total - 1] : null;
+  const hasHidden = total > 1;
+  const hiddenText = hasHidden
     ? breadcrumbs
-        .slice(0, total - MAX_VISIBLE_CATEGORIES)
+        .slice(0, total - 1)
         .map((c) => c.name)
         .join(' / ')
     : '';
 
-  return (
-    <div className='flex items-center whitespace-nowrap overflow-hidden text-caption-1 leading-7'>
-      <Link href='/' className='text-danger-500 shrink-0'>
+  // ===== MOBILE: Home + .. + lastCat + product (truncate) =====
+  if (isMobile) {
+    const crumbsMobile: React.ReactNode[] = [];
+
+    // Home
+    crumbsMobile.push(
+      <Link href='/' className='text-danger-500 shrink-0' key='home'>
         Home
       </Link>
-      <span className='mx-2 shrink-0'>/</span>
+    );
+
+    // Indicator kategori tersembunyi (tanpa slash bawaan)
+    if (hasHidden) {
+      crumbsMobile.push(
+        <span
+          className='text-danger-500 shrink-0'
+          title={hiddenText}
+          aria-label='Kategori tersembunyi'
+          key='hidden'
+        >
+          ..
+        </span>
+      );
+    }
 
-      {showEllipsis && (
-        <>
-          <span className='text-danger-500 shrink-0' title={hiddenText}>
-            …
-          </span>
-          <span className='mx-2 shrink-0'>/</span>
-        </>
-      )}
+    // Kategori terakhir
+    if (lastCat) {
+      crumbsMobile.push(
+        <Link
+          key={`cat-${lastCat.id}`}
+          href={createSlug('/shop/category/', lastCat.name, String(lastCat.id))}
+          className='text-danger-500 shrink-0'
+        >
+          {lastCat.name}
+        </Link>
+      );
+    }
 
-      {visible.map((category, index) => (
-        <Fragment key={category.id ?? index}>
+    // Nama produk (dipotong bila tidak muat)
+    crumbsMobile.push(
+      <span className='truncate min-w-0 flex-1' title={name} key='product'>
+        {name}
+      </span>
+    );
+
+    return (
+      <div className='flex items-center whitespace-nowrap overflow-hidden text-caption-1 leading-7'>
+        {crumbsMobile.map((node, i) => (
+          <Fragment key={i}>
+            {node}
+            {i < crumbsMobile.length - 1 && (
+              <span className='mx-2 shrink-0'>/</span>
+            )}
+          </Fragment>
+        ))}
+      </div>
+    );
+  }
+
+  // ===== DESKTOP: biarkan seperti semula =====
+  if (isDesktop) {
+    return (
+      <div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'>
+        <Link href='/' className='text-danger-500'>
+          Home
+        </Link>
+        <span className='mx-2'>/</span>
+        {breadcrumbs.map((category, index) => (
+          <Fragment key={index}>
+            <Link
+              href={createSlug(
+                '/shop/category/',
+                category.name,
+                category.id.toString()
+              )}
+              className='text-danger-500'
+            >
+              {category.name}
+            </Link>
+            <span className='mx-2'>/</span>
+          </Fragment>
+        ))}
+        <span>{name}</span>
+      </div>
+    );
+  }
+
+  // Fallback → layout desktop
+  return (
+    <div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'>
+      <Link href='/' className='text-danger-500'>
+        Home
+      </Link>
+      <span className='mx-2'>/</span>
+      {breadcrumbs.map((category, index) => (
+        <Fragment key={index}>
           <Link
             href={createSlug(
               '/shop/category/',
               category.name,
-              String(category.id)
+              category.id.toString()
             )}
-            className='text-danger-500 shrink-0'
+            className='text-danger-500'
           >
             {category.name}
           </Link>
-          <span className='mx-2 shrink-0'>/</span>
+          <span className='mx-2'>/</span>
         </Fragment>
       ))}
-
-      <span className='truncate min-w-0 flex-1'>{name}</span>
+      <span>{name}</span>
     </div>
   );
 };
-- 
cgit v1.2.3


From 8290efa6a098cdef393c255b8384de9c60803f04 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Tue, 26 Aug 2025 12:29:24 +0700
Subject: <Miqdad> Detail product done

---
 src-migrate/modules/product-detail/components/Breadcrumb.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Breadcrumb.tsx')

diff --git a/src-migrate/modules/product-detail/components/Breadcrumb.tsx b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
index d495b77b..0e263fe9 100644
--- a/src-migrate/modules/product-detail/components/Breadcrumb.tsx
+++ b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
@@ -26,18 +26,15 @@ const Breadcrumb = ({ id, name }: Props) => {
         .join(' / ')
     : '';
 
-  // ===== MOBILE: Home + .. + lastCat + product (truncate) =====
   if (isMobile) {
     const crumbsMobile: React.ReactNode[] = [];
 
-    // Home
     crumbsMobile.push(
       <Link href='/' className='text-danger-500 shrink-0' key='home'>
         Home
       </Link>
     );
 
-    // Indicator kategori tersembunyi (tanpa slash bawaan)
     if (hasHidden) {
       crumbsMobile.push(
         <span
@@ -64,7 +61,7 @@ const Breadcrumb = ({ id, name }: Props) => {
       );
     }
 
-    // Nama produk (dipotong bila tidak muat)
+    // Nama produk (dipotong kalau gk muat)
     crumbsMobile.push(
       <span className='truncate min-w-0 flex-1' title={name} key='product'>
         {name}
@@ -85,7 +82,7 @@ const Breadcrumb = ({ id, name }: Props) => {
     );
   }
 
-  // ===== DESKTOP: biarkan seperti semula =====
+  // ===== DESKTOP =====
   if (isDesktop) {
     return (
       <div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'>
@@ -113,7 +110,6 @@ const Breadcrumb = ({ id, name }: Props) => {
     );
   }
 
-  // Fallback → layout desktop
   return (
     <div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'>
       <Link href='/' className='text-danger-500'>
-- 
cgit v1.2.3