Merged in Feature/category-management (pull request #248)

Feature/category management

24 files changed, 1100 insertions, 81 deletions

diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index bcf45e0a..90314671 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -11,7 +11,7 @@ import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import MobileView from '../../views/MobileView';
 import Link from '../Link/Link';
-// import TopBanner from './TopBanner';
+import TopBanner from './TopBanner';
 
 const Search = dynamic(() => import('./Search'));
 
@@ -39,7 +39,7 @@ const NavbarMobile = () => {
 
   return (
     <MobileView>
-      {/* <TopBanner /> */}
+      <TopBanner />
       <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
         <div className='flex justify-between items-center mb-2'>
           <Link href='/'>
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index 7bc8fb6a..5ea8f635 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,19 +1,20 @@
 import Image from 'next/image';
-import { useQuery } from 'react-query';
-
+import { useQuery } from 'react-query';import useDevice from '@/core/hooks/useDevice'
 import odooApi from '@/core/api/odooApi';
 import SmoothRender from '~/components/ui/smooth-render';
 import Link from '../Link/Link';
+import { background } from '@chakra-ui/react';
 import { useEffect } from 'react';
 
 const TopBanner = ({ onLoad }) => {
+  const { isDesktop, isMobile } = useDevice()
   const topBanner = useQuery({
     queryKey: 'topBanner',
     queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'),
     refetchOnWindowFocus: false,
   });
 
-  const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
+  // const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
   const hasData = topBanner.data?.length > 0;
   const data = topBanner.data?.[0] || null;
 
@@ -26,21 +27,21 @@ const TopBanner = ({ onLoad }) => {
   return (
     <SmoothRender
       isLoaded={hasData}
-      height='36px'
+      // height='36px'
       duration='700ms'
       delay='300ms'
-      style={{ backgroundColor }}
-    >
-      <Link href={data?.url}>
-        <Image
-          src={data?.image}
-          alt={data?.name}
-          width={1440}
-          height={40}
-          className='object-cover object-center h-full mx-auto'
-        />
-      </Link>
-    </SmoothRender>
+      className='h-auto'
+      >
+      <Link
+          href={data?.url}
+          className="block bg-cover bg-center h-3 md:h-6 lg:h-[36px]"
+          style={{
+            backgroundImage: `url('${data?.image}')`,
+          }}
+        >
+        </Link>
+
+      </SmoothRender>
   );
 };
 
diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx
index 731214ff..2d78d956 100644
--- a/src/lib/brand/components/BrandCard.jsx
+++ b/src/lib/brand/components/BrandCard.jsx
@@ -8,7 +8,7 @@ const BrandCard = ({ brand }) => {
   return (
     <Link
       href={createSlug('/shop/brands/', brand.name, brand.id)}
-      className={`py-1 px-2 rounded border border-gray_r-6 flex justify-center items-center ${
+      className={`py-1 px-2  border-gray_r-6 flex justify-center items-center hover:scale-110 transition duration-500 ease-in-out ${
         isMobile ? 'h-16' : 'h-24'
       }`}
     >
@@ -16,9 +16,9 @@ const BrandCard = ({ brand }) => {
         <Image
           src={brand.logo}
           alt={brand.name}
-          width={128}
-          height={128}
-          className='h-full w-full object-contain object-center'
+          width={50}
+          height={50}
+          className='h-full w-[122px] object-contain object-center'
         />
       )}
       {!brand.logo && (
diff --git a/src/lib/category/api/popularProduct.js b/src/lib/category/api/popularProduct.js
new file mode 100644
index 00000000..48f8a2a0
--- /dev/null
+++ b/src/lib/category/api/popularProduct.js
@@ -0,0 +1,31 @@
+
+export const fetchPopulerProductSolr = async (category_id_ids) => {
+    let sort ='sort=qty_sold_f desc';
+    try {
+        const queryParams = new URLSearchParams({ q: category_id_ids });
+        const response = await fetch(`/solr/product/select?${queryParams.toString()}&rows=2000&fl=manufacture_name_s,manufacture_id_i,id,display_name_s,qty_sold_f&${sort}`);
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+      const promotions = await map(data.response.docs);
+      return promotions;
+    } catch (error) {
+      console.error("Error fetching promotion data:", error);
+      return [];
+    }
+  };
+
+  const map = async (promotions) => {
+    const result = [];
+    for (const promotion of promotions) {
+      const data = {
+        id: promotion.id,
+        name: promotion.display_name_s,
+        manufacture_name: promotion.manufacture_name_s,
+        manufacture_id: promotion.manufacture_id_i,
+      };
+      result.push(data);
+    }
+    return result;
+  };
\ No newline at end of file
diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx
index e6ea5acf..374cdf78 100644
--- a/src/lib/category/components/Category.jsx
+++ b/src/lib/category/components/Category.jsx
@@ -2,11 +2,21 @@ import odooApi from '@/core/api/odooApi'
 import Link from '@/core/components/elements/Link/Link'
 import DesktopView from '@/core/components/views/DesktopView'
 import { createSlug } from '@/core/utils/slug'
+import { ChevronRightIcon } from '@heroicons/react/24/outline'
+import Image from 'next/image'
 import { useEffect, useState } from 'react'
+import PopularBrand from './PopularBrand'
+import { bannerApi } from '@/api/bannerApi';
+const { useQuery } = require('react-query')
 
 const Category = () => {
   const [categories, setCategories] = useState([])
+  const [openCategories, setOpenCategory] = useState([]);
+  const [banner, setBanner] = useState([]);
 
+  const promotionProgram = useQuery('banner-promo-category-card', bannerApi({ type: 'banner-promo-category-card' }));
+  // const promotionProgram = useQuery('promotionProgram', bannerApi({ type: 'banner-promotion' }));
+  
   useEffect(() => {
     const loadCategories = async () => {
       let dataCategories = await odooApi('GET', '/api/v1/category/tree')
@@ -27,45 +37,87 @@ const Category = () => {
     loadCategories()
   }, [])
 
+  // useEffect(() => {
+  //   const loadCategories = async () => {
+  //     let dataCategories = await odooApi('GET', '/api/v1/category/tree')
+  //     dataCategories = dataCategories?.map((category) => {
+  //       category.childs = category.childs.map((child1Category) => {
+  //         return {
+  //           ...child1Category,
+  //           isOpen: false
+  //         }
+  //       })
+  //       return {
+  //         ...category,
+  //         isOpen: false
+  //       }
+  //     })
+  //     setCategories(dataCategories)
+  //   }
+  //   loadCategories()
+  // }, [])
+  // console.log("categories",categories)
+
   return (
     <DesktopView>
       <div className='category-mega-box'>
         {categories?.map((category) => (
-          <div key={category.id}>
+          <div key={category.id} className='flex'>
             <Link
               href={createSlug('/shop/category/', category.name, category.id)}
-              className='category-mega-box__parent'
+              className='category-mega-box__parent flex items-center'
             >
+              <div className='w-6 h-6 border mr-2 rounded-full flex justify-center items-center'>
+                <Image src={category.image} alt='' width={16} height={16} />
+              </div>
               {category.name}
             </Link>
             <div className='category-mega-box__child-wrapper'>
-              <div className='grid grid-cols-3 gap-x-4 gap-y-6 max-h-full overflow-auto'>
+              <div className='grid grid-cols-3 gap-x-4 gap-y-6 max-h-full !w-[590px] overflow-auto'>
                 {category.childs.map((child1Category) => (
-                  <div key={child1Category.id}>
+                  <div key={child1Category.id} className='w-full'>
                     <Link
                       href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
-                      className='category-mega-box__child-one mb-4'
+                      className='category-mega-box__child-one mb-4 w-full h-8 flex justify-center line-clamp-2'
                     >
                       {child1Category.name}
                     </Link>
-                    <div className='flex flex-col gap-y-3'>
-                      {child1Category.childs.map((child2Category) => (
-                        <Link
-                          href={createSlug(
-                            '/shop/category/',
-                            child2Category.name,
-                            child2Category.id
-                          )}
-                          className='category-mega-box__child-two'
-                          key={child2Category.id}
-                        >
-                          {child2Category.name}
-                        </Link>
+                    <div className='flex flex-col gap-y-3 w-full'>
+                      {child1Category.childs.map((child2Category, index) => (
+                        (index < 4) && (
+                          <Link
+                            href={createSlug('/shop/category/', child2Category.name, child2Category.id)}
+                            className='category-mega-box__child-two truncate'
+                            key={child2Category.id}
+                          >
+                            {child2Category.name}
+                          </Link>
+                        )
                       ))}
+                      {child1Category.childs.length > 5 && (
+                        <div className='flex hover:bg-gray_r-8/35 rounded-10'>
+                          <Link
+                            href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
+                            className='category-mega-box__child-one flex items-center gap-4 font-bold hover:ml-4'
+                          >
+                            <p className='mt-2 mb-0 text-danger-500 font-semibold'>Lihat Semua</p>
+                            <ChevronRightIcon className='w-4 text-danger-500 font-bold' />
+                          </Link>
+                        </div>
+                      )}
                     </div>
                   </div>
                 ))}
               </div>
+              <div className='category-mega-box__child-wrapper !w-[260px] !flex !flex-col !gap-4'>
+              <PopularBrand category={category} />
+              {promotionProgram?.data[0]?.map((banner, index)=>(
+                <div key={index} className='flex w-60 h-20 object-cover'>
+                  {/* <Image src='https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/397' alt='' width={275} height={4} /> */}
+                  <Image src={`${banner.image}`} alt={`${banner.name}`} width={275} height={4} />
+                </div>
+              ))}
+              </div>
             </div>
           </div>
         ))}
diff --git a/src/lib/category/components/PopularBrand.jsx b/src/lib/category/components/PopularBrand.jsx
new file mode 100644
index 00000000..f0b12e2c
--- /dev/null
+++ b/src/lib/category/components/PopularBrand.jsx
@@ -0,0 +1,83 @@
+import odooApi from '@/core/api/odooApi'
+import React, { useEffect, useState } from 'react'
+import axios from 'axios';
+import { useQuery } from 'react-query'
+import Link from '@/core/components/elements/Link/Link'
+import { createSlug } from '@/core/utils/slug'
+import Image from 'next/image'
+import { ChevronRightIcon } from '@heroicons/react/24/outline'
+import useProductSearch from '../../../lib/product/hooks/useProductSearch';
+import { SolrResponse } from "~/types/solr";
+import { fetchPopulerProductSolr } from '../api/popularProduct'
+
+const SOLR_HOST = process.env.SOLR_HOST
+
+const PopularBrand = ({ category }) => {
+    const [topBrands, setTopBrands] = useState([]);
+
+    const fetchTopBrands = async () => {
+        try {
+            const items = await fetchPopulerProductSolr(`category_id_ids:(${category?.categoryDataIds?.join(' OR ')})`);
+            // console.log("id",items)
+            // Fungsi untuk deduplikasi dan mengambil 12 nama brand teratas
+            const getTop12UniqueBrands = (prod) => {
+                const brandSet = new Set();
+                const topBrands = [];
+                
+                for (const product of prod) {
+                    if (!brandSet.has(product.manufacture_name)) {
+                        brandSet.add(product.manufacture_name);
+                        topBrands.push({ name: product.manufacture_name, id: product.manufacture_id });
+                    }else{
+                    }
+                    if (topBrands.length === 18) break;
+                }
+                return topBrands;
+            }
+
+            // Menggunakan hasil pencarian produk
+            const products = items;
+            const top12UniqueBrands = getTop12UniqueBrands(products);
+
+            // console.log('top12UniqueBrands', top12UniqueBrands);
+            setTopBrands(top12UniqueBrands);
+        } catch (error) {
+            console.error("Error fetching data from Solr", error);
+            throw error;
+        }
+    }
+
+    useEffect(() => {
+        fetchTopBrands();
+    }, [category]);
+
+    return (
+        <div className='flex flex-col'>
+            <div className='grid grid-cols-3 max-h-full w-full gap-2'>
+                {topBrands.map((brand, index) => (
+                    <div key={index} className='w-full flex items-center justify-center pb-2'>
+                        <Link
+                            href={createSlug('/shop/brands/', brand.name, brand.id)}
+                            className='category-mega-box__child-one w-8 h-full flex items-center justify-center '
+                        >
+                            <Image src={`https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/${brand.id}` } alt={`${brand.name}`} width={104} height={44} objectFit='cover' />
+                        </Link>
+                    </div>
+                ))}
+            </div>
+            {/* {topBrands.length > 8 && (
+                <div className='flex hover:bg-gray_r-8/35 rounded-10'>
+                    <Link
+                        href={createSlug('/shop/category/', category.name, category.id)}
+                        className='category-mega-box__child-one flex items-center gap-4 font-bold hover:ml-4'
+                    >
+                        <p className='mt-2 mb-0 text-danger-500 font-semibold'>Lihat Semua Brand</p>
+                        <ChevronRightIcon className='w-4 text-danger-500 font-bold' />
+                    </Link>
+                </div>
+            )} */}
+        </div>
+    )
+}
+
+export default PopularBrand;
diff --git a/src/lib/home/api/CategoryPilihanApi.js b/src/lib/home/api/CategoryPilihanApi.js
new file mode 100644
index 00000000..8a0b38d3
--- /dev/null
+++ b/src/lib/home/api/CategoryPilihanApi.js
@@ -0,0 +1,8 @@
+import odooApi from '@/core/api/odooApi'
+
+const categoryPilihanApi = async () => {
+    const dataCategoryPilihan = await odooApi('GET', '/api/v1/lob_homepage')
+    return dataCategoryPilihan
+}
+
+export default categoryPilihanApi
diff --git a/src/lib/home/api/categoryManagementApi.js b/src/lib/home/api/categoryManagementApi.js
new file mode 100644
index 00000000..b70d60ce
--- /dev/null
+++ b/src/lib/home/api/categoryManagementApi.js
@@ -0,0 +1,8 @@
+import odooApi from '@/core/api/odooApi'
+
+const categoryManagementApi = async () => {
+    const dataCategoryManagement = await odooApi('GET', '/api/v1/categories_management')
+    return dataCategoryManagement
+}
+
+export default categoryManagementApi
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
new file mode 100644
index 00000000..0cc43d91
--- /dev/null
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from 'react';
+import useCategoryManagement from '../hooks/useCategoryManagement';
+import NextImage from 'next/image';
+import Link from "next/link";
+import { createSlug } from '@/core/utils/slug';
+import odooApi from '@/core/api/odooApi';
+import { Skeleton} from '@chakra-ui/react'
+
+const CategoryDynamic = () => {
+  const { categoryManagement } = useCategoryManagement();
+  const [categoryData, setCategoryData] = useState({});
+  const [subCategoryData, setSubCategoryData] = useState({});
+  
+  useEffect(() => {
+    const fetchCategoryData = async () => {
+      if (categoryManagement && categoryManagement.data) {
+        const updatedCategoryData = {};
+        const updatedSubCategoryData = {};
+        
+        for (const category of categoryManagement.data) {
+          const countLevel1 = await odooApi('GET', `/api/v1/category/numFound?parent_id=${category.categoryIdI}`);
+          
+          updatedCategoryData[category.categoryIdI] = countLevel1?.numFound;
+          
+          for (const subCategory of countLevel1.children) {
+            updatedSubCategoryData[subCategory.id] = subCategory.numFound;
+          }
+        }
+
+        setCategoryData(updatedCategoryData);
+        setSubCategoryData(updatedSubCategoryData);
+      }
+    };
+
+    fetchCategoryData();
+  }, [categoryManagement.isLoading]);
+ 
+  return (
+    <div>
+        {categoryManagement && categoryManagement.data?.map((category) => {
+          const countLevel1 = categoryData[category.categoryIdI] || 0;
+          
+          return (
+            <Skeleton key={category.id} isLoaded={categoryManagement}>
+            <div key={category.id}>
+              <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
+                <div className='font-semibold sm:text-h-lg mr-2'>{category.name}</div>
+                <Skeleton isLoaded={countLevel1 !=0}>
+                  <p className={`text-gray_r-10 text-sm`}>{countLevel1} Produk tersedia</p>
+                </Skeleton>
+                <Link href={createSlug('/shop/category/', category?.name, category?.categoryIdI)} className="!text-red-500 font-semibold">Lihat Semua</Link>
+              </div>
+              <div className='grid grid-cols-3 gap-2'>
+                {category.categories.map((subCategory) => {
+                  const countLevel2 = subCategoryData[subCategory.idLevel2] || 0;
+
+                  return (
+                    <div key={subCategory.id} className='border rounded justify-start items-start'>
+                      <div className='p-3'>
+                        <div className='flex flex-row border rounded mb-2 justify-start items-center'>
+                          <NextImage
+                            src={subCategory.image ? subCategory.image : "/images/noimage.jpeg"}
+                            alt={subCategory.name}
+                            width={90}
+                            height={30}
+                            className='object-fit'
+                          />
+                          <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
+                            <div className='font-semibold text-lg mr-2'>{subCategory.name}</div>
+                            <Skeleton isLoaded={countLevel2 != 0}>
+                            <p className={`text-gray_r-10 text-sm`}>
+                              {countLevel2} Produk tersedia
+                            </p>
+                            </Skeleton>
+                            <Link href={createSlug('/shop/category/', subCategory?.name, subCategory?.idLevel2)} className="!text-red-500 font-semibold">Lihat Semua</Link>
+                          </div>
+                        </div>
+                        <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px]'>
+                          {subCategory.childFrontendIdI.map((childCategory) => (
+                            <div key={childCategory.id}>
+                              <Link href={createSlug('/shop/category/', childCategory?.name, childCategory?.idLevel3)} className="flex flex-row gap-2 border rounded group hover:border-red-500">
+                                <NextImage
+                                  src={childCategory.image ? childCategory.image : "/images/noimage.jpeg"}
+                                  alt={childCategory.name}
+                                  width={40}
+                                  height={40}
+                                />
+                                <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
+                                  <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>{childCategory.name}</div>
+                                </div>
+                              </Link>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </Skeleton>
+          );
+        })}
+    </div>
+  );
+};
+
+export default CategoryDynamic;
diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx
new file mode 100644
index 00000000..c1433a2d
--- /dev/null
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import useCategoryManagement  from '../hooks/useCategoryManagement';
+import NextImage from 'next/image';
+import Link from "next/link";
+import { createSlug } from '@/core/utils/slug';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+
+const CategoryDynamicMobile = () => {
+  const { categoryManagement } = useCategoryManagement()
+  const [selectedCategory, setSelectedCategory] = useState({});
+
+  useEffect(() => {
+    const loadPromo = async () => {
+      try {
+        if (categoryManagement.data?.length > 0) {
+          const initialSelections = categoryManagement.data.reduce((acc, category) => {
+            if (category.categories.length > 0) {
+              acc[category.id] = category.categories[0].idLevel2;
+            }
+            return acc;
+          }, {});
+          setSelectedCategory(initialSelections);
+        }
+      } catch (loadError) {
+        // console.error("Error loading promo items:", loadError);
+      }
+    };
+
+    loadPromo();
+  }, [categoryManagement.data]);
+
+  const handleCategoryLevel2Click = (categoryIdI, idLevel2) => {
+    setSelectedCategory(prev => ({
+      ...prev,
+      [categoryIdI]: idLevel2
+    }));
+  };
+ 
+  return (
+    <div className='p-4'>
+      {categoryManagement.data && categoryManagement.data.map((category) => (
+        <div key={category.id}>
+          <div className='bagian-judul flex flex-row justify-between items-center gap-3 mb-4 mt-4'>
+            <div className='font-semibold sm:text-h-sm mr-2'>{category.name}</div>
+            <Link href={createSlug('/shop/category/', category?.name, category?.categoryIdI)} className="!text-red-500 font-semibold text-sm">Lihat Semua</Link>
+          </div>
+          <Swiper slidesPerView={2.3} spaceBetween={10}>
+            {category.categories.map((index) => (
+              <SwiperSlide key={index.id}>
+                <div
+                  onClick={() => handleCategoryLevel2Click(category.id, index?.idLevel2)}
+                  className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${selectedCategory[category.id] === index?.idLevel2 ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+                >
+                  <div className='p-1 flex justify-start items-center'>
+                    <div className='flex flex-row justify-center items-center'>
+                      <NextImage
+                        src={index.image ? index.image : "/images/noimage.jpeg"}
+                        alt={index.name}
+                        width={30}
+                        height={30}
+                        className='object-'
+                      />
+                      <div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'>
+                        <div className='font-semibold text-[10px] line-clamp-1'>{index.name}</div>
+                        <p className='text-gray_r-10 text-[10px]'>999 rb+ Produk</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+          <div className='p-3 mt-2 border'>
+            <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px]'>
+              {category.categories.map((index) => (
+                selectedCategory[category.id] === index?.idLevel2 && index.childFrontendIdI.map((x) => (
+                  <div key={x.id}>
+                    <Link href={createSlug('/shop/category/', x?.name, x?.idLevel3)} className="flex flex-row gap-1 border rounded group hover:border-red-500">
+                      <NextImage
+                        src={x.image ? x.image : "/images/noimage.jpeg"}
+                        alt={x.name}
+                        width={40}
+                        height={40}
+                      />
+                      <div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'>
+                        <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>{x.name}</div>
+                      </div>
+                    </Link>
+                  </div>
+                ))
+              ))}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default CategoryDynamicMobile;
diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
new file mode 100644
index 00000000..6dbf771e
--- /dev/null
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -0,0 +1,123 @@
+import Image from 'next/image'
+import useCategoryHome from '../hooks/useCategoryHome'
+import Link from '@/core/components/elements/Link/Link'
+import { createSlug } from '@/core/utils/slug'
+import { useEffect, useState } from 'react';
+import { bannerApi } from '../../../api/bannerApi';
+const { useQuery } = require('react-query')
+import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton';
+import useCategoryPilihan from '../hooks/useCategoryPilihan';
+import useDevice from '@/core/hooks/useDevice'
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+
+const CategoryPilihan = ({ id, categories }) => {
+    const { isDesktop, isMobile } = useDevice()
+    const { categoryPilihan } = useCategoryPilihan();
+    const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' }));
+      return (
+        categoryPilihan.length > 0 && (
+          <section>
+            {isDesktop && (
+                <div>
+                    <div className='flex flex-row items-center mb-4'>
+                        <div className='font-semibold sm:text-h-lg mr-2'>LOB Kategori Pilihan</div>
+                        <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p>
+                    </div>
+                        {heroBanner.data &&
+                            heroBanner.data?.length > 0 && (
+                                <div className='flex w-full h-full justify-center mb-4 bg-cover bg-center'>
+                                        <Link  key={heroBanner.data[0].id} href={heroBanner.data[0].url}>
+                                            <Image
+                                            width={1260}
+                                            height={170}
+                                            quality={100}
+                                            src={heroBanner.data[0].image}
+                                            alt={heroBanner.data[0].name}
+                                            className='h-full object-cover w-full'
+                                            />
+                                        </Link>
+                            </div>
+                            )}
+                    <div className="group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 ">
+                            {categoryPilihan?.data?.map((category) => (
+                                <div key={category.id} className="KartuInti h-48 w-60 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
+                                    <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '>
+                                        <div className="group/edit flex items-center justify-end h-48 w-60  flex-col group-hover/item:visible">
+                                            <div className=' h-36 flex justify-end items-end'>
+                                                <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image? category?.image : '/images/noimage.jpeg'}  width={120} height={120} alt={category?.name} />
+                                            </div>
+                                            <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center">{category?.industries}</h2>
+                                        </div>
+                                    </div>
+                                    <div className='KartuA relative inset-0  flex h-36 w-60   items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
+                                        <Link
+                                            href={createSlug('/shop/lob/', category?.industries, category?.id)}
+                                            className='category-mega-box__parent text-white   rounded-lg'
+                                        >
+                                            Lihat semua
+                                        </Link>
+                                    </div>
+                                </div>
+                            ))}
+                    </div>
+                </div>
+            )}
+            {isMobile && (
+                <div className='p-4'>
+                    <div className='flex flex-row items-center mb-4'>
+                        <div className='font-semibold sm:text-h-md mr-2'>LOB Kategori Pilihan</div>
+                        {/* <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p> */}
+                    </div>
+                    <div className='flex'>
+                        {heroBanner.data &&
+                            heroBanner.data?.length > 0 && (
+                                <div className=' object-fill '>
+                                        <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}>
+                                            <Image
+                                            width={439}
+                                            height={150}
+                                            quality={100}
+                                            src={heroBanner.data[0].image}
+                                            alt={heroBanner.data[0].name}
+                                            className='object-cover'
+                                            />
+                                        </Link>
+                                </div>
+                            )}
+                    </div>
+                        <Swiper slidesPerView={2.1} spaceBetween={10}>
+                            {categoryPilihan?.data?.map((category) => (
+                                <SwiperSlide key={category.id}>
+                                    <div key={category.id} className="KartuInti mt-2 h-48 w-48 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
+                                        <div className='KartuB absolute h-48 w-48 inset-0 flex items-center justify-center '>
+                                            <div className="group/edit flex items-center justify-end h-48 w-48  flex-col group-hover/item:visible">
+                                                <div className=' h-36 flex justify-end items-end'>
+                                                    <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image? category?.image : '/images/noimage.jpeg'}  width={120} height={120} alt={category?.name} />
+                                                </div>
+                                                <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-48 border-gray-200 font-normal text-sm text-center">{category?.industries}</h2>
+                                            </div>
+                                        </div>
+                                        <div className='KartuA relative inset-0  flex h-36 w-48   items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
+                                            <Link
+                                                href={createSlug('/shop/lob/', category?.industries, category?.id)}
+                                                className='category-mega-box__parent text-white   rounded-lg'
+                                            >
+                                                Lihat semua
+                                            </Link>
+                                        </div>
+                                    </div>
+                                </SwiperSlide>
+                            ))}
+
+                        </Swiper>
+                    
+                </div>
+            )}
+            </section>
+
+        )
+  )
+}
+
+export default CategoryPilihan
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
index 6b64a444..fdefb526 100644
--- a/src/lib/home/components/PreferredBrand.jsx
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -1,4 +1,5 @@
 import { Swiper, SwiperSlide } from 'swiper/react'
+import  { Navigation, Pagination, Autoplay } from 'swiper';
 import { useCallback, useEffect, useState } from 'react'
 import usePreferredBrand from '../hooks/usePreferredBrand'
 import PreferredBrandSkeleton from './Skeleton/PreferredBrandSkeleton'
@@ -38,7 +39,23 @@ const PreferredBrand = () => {
 
   const { preferredBrands } = usePreferredBrand(query)
   const { isMobile, isDesktop } = useDevice()
-
+  const swiperBanner = {
+    modules:[Navigation, Pagination, Autoplay],
+    autoplay: {
+      delay: 4000,
+      disableOnInteraction: false
+    },
+    loop: true,
+    className: 'h-[70px] md:h-[100px] w-full',
+    slidesPerView: isMobile ? 4 : 8,
+    spaceBetween: isMobile ? 12 : 0,
+    pagination: {
+      dynamicBullets: true,
+      dynamicMainBullets: isMobile ? 6 : 8,
+      clickable: true,
+    }
+  }
+  const preferredBrandsData = manufactures ? manufactures.slice(0, 20) : []
   return (
     <div className='px-4 sm:px-0'>
       <div className='flex justify-between items-center mb-4'>
@@ -54,18 +71,20 @@ const PreferredBrand = () => {
           </Link>
         )}
       </div>
-      {manufactures.isLoading && <PreferredBrandSkeleton />}
-      {!manufactures.isLoading && (
-        <Swiper slidesPerView={isMobile ? 3.5 : 7.5} spaceBetween={isMobile ? 12 : 24} freeMode>
-          {manufactures.map((manufacture) => (
-            <SwiperSlide key={manufacture.id}>
-              <BrandCard brand={manufacture} />
-            </SwiperSlide>
-          ))}
-        </Swiper>
-      )}
+      <div className='border rounded border-gray_r-6'>
+        {manufactures.isLoading && <PreferredBrandSkeleton />}
+        {!manufactures.isLoading && (
+          <Swiper {...swiperBanner}>
+            {preferredBrandsData.map((manufacture) => (
+              <SwiperSlide key={manufacture.id}>
+                <BrandCard brand={manufacture} />
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        )}
+      </div>
     </div>
   )
 }
 
-export default PreferredBrand
+export default PreferredBrand
\ No newline at end of file
diff --git a/src/lib/home/hooks/useCategoryManagement.js b/src/lib/home/hooks/useCategoryManagement.js
new file mode 100644
index 00000000..c1dda585
--- /dev/null
+++ b/src/lib/home/hooks/useCategoryManagement.js
@@ -0,0 +1,13 @@
+import categoryManagementApi from '../api/categoryManagementApi'
+import { useQuery } from 'react-query'
+
+const useCategoryManagement = () => {
+  const fetchCategoryManagement = async () => await categoryManagementApi()
+  const { isLoading, data } = useQuery('categoryManagementApi', fetchCategoryManagement)
+
+  return {
+    categoryManagement: { data, isLoading }
+  }
+}
+
+export default useCategoryManagement
\ No newline at end of file
diff --git a/src/lib/home/hooks/useCategoryPilihan.js b/src/lib/home/hooks/useCategoryPilihan.js
new file mode 100644
index 00000000..12a86f7e
--- /dev/null
+++ b/src/lib/home/hooks/useCategoryPilihan.js
@@ -0,0 +1,13 @@
+import categoryPilihanApi from '../api/CategoryPilihanApi'
+import { useQuery } from 'react-query'
+
+const useCategoryPilihan = () => {
+  const fetchCategoryPilihan = async () => await categoryPilihanApi()
+  const { isLoading, data } = useQuery('categoryPilihanApi', fetchCategoryPilihan)
+
+  return {
+    categoryPilihan: { data, isLoading }
+  }
+}
+
+export default useCategoryPilihan
\ No newline at end of file
diff --git a/src/lib/lob/components/Breadcrumb.jsx b/src/lib/lob/components/Breadcrumb.jsx
new file mode 100644
index 00000000..5722fd39
--- /dev/null
+++ b/src/lib/lob/components/Breadcrumb.jsx
@@ -0,0 +1,55 @@
+import odooApi from '@/core/api/odooApi'
+import { createSlug } from '@/core/utils/slug'
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Skeleton
+} from '@chakra-ui/react'
+import Link from 'next/link'
+import React from 'react'
+import { useQuery } from 'react-query'
+
+/**
+ * Render a breadcrumb component.
+ *
+ * @param {object} categoryId - The ID of the category.
+ * @return {JSX.Element} The breadcrumb component.
+ */
+const Breadcrumb = ({ categoryId }) => {
+    const breadcrumbs = useQuery(
+        `lob-breadcrumbs/${categoryId}`,
+        async () => await odooApi('GET', `/api/v1/lob_homepage/${categoryId}/category_id`)
+    )
+  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>
+
+          {breadcrumbs?.data?.map((category, index) => (
+            <BreadcrumbItem key={index} isCurrentPage={index === breadcrumbs.data.length - 1}>
+              {index === breadcrumbs.data.length - 1 ? (
+                <BreadcrumbLink className='whitespace-nowrap'>{category.industries}</BreadcrumbLink>
+              ) : (
+                <BreadcrumbLink
+                  as={Link}
+                  href={createSlug('/shop/lob/', category.industries, category.id)}
+                  className='!text-danger-500 whitespace-nowrap'
+                >
+                  {category.industries}
+                </BreadcrumbLink>
+              )}
+            </BreadcrumbItem>
+          ))}
+        </ChakraBreadcrumb>
+      </Skeleton>
+    </div>
+  )
+}
+
+export default Breadcrumb
diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx
new file mode 100644
index 00000000..2af3db10
--- /dev/null
+++ b/src/lib/product/components/CategorySection.jsx
@@ -0,0 +1,104 @@
+import Image from "next/image";
+import Link from 'next/link';
+import { createSlug } from '@/core/utils/slug';
+import useDevice from '@/core/hooks/useDevice';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+import { useQuery } from 'react-query';
+import { useRouter } from 'next/router';
+import {
+    ChevronDownIcon,
+    ChevronUpIcon, // Import ChevronUpIcon for toggling
+    DocumentCheckIcon,
+    HeartIcon,
+} from '@heroicons/react/24/outline';
+import { useState } from 'react'; // Import useState
+import { getIdFromSlug } from '@/core/utils/slug'
+
+const CategorySection = ({ categories }) => {
+    const { isDesktop, isMobile } = useDevice();
+    const [isOpenCategory, setIsOpenCategory] = useState(false); // State to manage category visibility
+
+    const handleToggleCategories = () => {
+        setIsOpenCategory(!isOpenCategory);
+    };
+    
+
+    const displayedCategories = isOpenCategory ? categories : categories.slice(0, 10);
+
+    return (
+        <section>
+            {isDesktop && (
+                <div className="group/item grid grid-cols-5 gap-y-2 gap-x-2 w-full h-full col-span-2 ">
+                    {displayedCategories.map((category) => (
+                        <Link href={createSlug('/shop/category/', category?.name, category?.id)} key={category?.id} passHref>
+                            <div className="group transition-colors duration-300 ">
+                                <div className="KartuInti h-12 w-26 max-w-sm lg:max-w-full flex flex-col border-[2px] border-gray-200 group-hover:border-red-400 rounded relative ">
+                                    <div className="flex items-center justify-start h-full px-1 flex-row ">
+                                        <Image className="h-full" src={category?.image1920 ? category?.image1920 : '/images/noimage.jpeg'} width={56} height={48} alt={category?.name} />
+                                        <h2 className="text-gray-700 group-hover:text-[#E20613] line-clamp-2 content-center h-fit w-60 px-1 font-semibold text-sm text-start">{category?.name}</h2>
+                                    </div>
+                                </div>
+                            </div>
+                        </Link>
+                    ))}
+                </div>
+            )}
+            {isDesktop && categories.length > 10 && (
+                <div className="w-full flex justify-center mt-4">
+                    <button
+                        onClick={handleToggleCategories}
+                        className="flex justify-end mt-4 text-red-500 font-bold px-4 py-2 rounded"
+                    >
+                        {isOpenCategory ? 'Sembunyikan' : 'Lihat semua'}
+                        {isOpenCategory ? (
+                            <ChevronUpIcon className="ml-auto w-5 font-bold" />
+                        ) : (
+                            <ChevronDownIcon className="ml-auto w-5 font-bold" />
+                        )}
+                    </button>
+                </div>
+            )}
+
+            {isMobile && (
+                <div className="py-4">
+                    <Swiper slidesPerView={2.3} spaceBetween={10}>
+                        {displayedCategories.map((category) => (
+                            <SwiperSlide key={category?.id}>
+                                <Link href={createSlug('/shop/category/', category?.name, category?.id)} passHref>
+                                    <div className="group transition-colors duration-300">
+                                        <div className="KartuInti min-h-16 max-h-16 w-26 max-w-sm lg:max-w-full flex flex-col border-[2px] border-gray-200 group-hover:bg-red-200 group-hover:border-red-400 rounded relative">
+                                            <div className="flex items-center justify-center h-full px-1 flex-row">
+                                                <Image
+                                                    src={category?.image1920 ? category?.image1920 : '/images/noimage.jpeg'}
+                                                    width={56}
+                                                    height={48}
+                                                    alt={category?.name}
+                                                />
+                                                <h2 className="text-gray-700 group-hover:text-[#E20613] line-clamp-2 content-center h-fit w-60 px-1 font-semibold text-sm text-start">
+                                                    {category?.name}
+                                                </h2>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </Link>
+                            </SwiperSlide>
+                        ))}
+                    </Swiper>
+                    {categories.length > 10 && (
+                        <div className="w-full flex justify-end mt-4">
+                            <button
+                                onClick={handleToggleCategories}
+                                className="flex justify-end mt-4 bg-red-500 text-white text-sm px-4 py-2 rounded"
+                            >
+                                {isOpenCategory ? 'Sembunyikan Semua' : 'Lihat Semua'}
+                            </button>
+                        </div>
+                    )}
+                </div>
+            )}
+        </section>
+    )
+}
+
+export default CategorySection
diff --git a/src/lib/product/components/LobSectionCategory.jsx b/src/lib/product/components/LobSectionCategory.jsx
new file mode 100644
index 00000000..5cd467e9
--- /dev/null
+++ b/src/lib/product/components/LobSectionCategory.jsx
@@ -0,0 +1,80 @@
+import Image from "next/image";
+import Link from 'next/link';
+import { createSlug } from '@/core/utils/slug';
+import useDevice from '@/core/hooks/useDevice';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+import { useQuery } from 'react-query';
+import { useRouter } from 'next/router';
+import {
+    ChevronDownIcon,
+    ChevronUpIcon, // Import ChevronUpIcon for toggling
+    DocumentCheckIcon,
+    HeartIcon,
+} from '@heroicons/react/24/outline';
+import { useState } from 'react'; // Import useState
+import { getIdFromSlug } from '@/core/utils/slug'
+
+const LobSectionCategory = ({ categories }) => {
+    const { isDesktop, isMobile } = useDevice();
+    const [isOpenCategory, setIsOpenCategory] = useState(false); // State to manage category visibility
+
+    const handleToggleCategories = () => {
+        setIsOpenCategory(!isOpenCategory);
+    };
+
+    const displayedCategories = categories[0]?.categoryIds;
+    return (
+        <section>
+            {isDesktop && (
+                <div className="group/item grid grid-flow-col gap-y-2 gap-x-4 w-full h-full">
+                    {displayedCategories?.map((category) => (
+                        <Link
+                        href={createSlug('/shop/category/', category?.name, category?.id)}
+                        key={category?.id}
+                        passHref
+                        className="block hover:scale-105 transition-transform duration-300 bg-cover bg-center h-[144px]"
+                        style={{
+                          backgroundImage: `url('${category?.image ? category?.image : 'https://erp.indoteknik.com/web/image?model=x_banner.banner&id=5&field=x_banner_image&unique=09202023100557'}')`,
+                        }}
+                      >
+                      </Link>
+                    ))}
+                </div>
+            )}
+
+            {isMobile && (
+                <div className="py-4">
+                    <Swiper slidesPerView={1.2} spaceBetween={10}>
+                        {displayedCategories?.map((category) => (
+                            <SwiperSlide key={category?.id}>
+                                <Link
+                                    href={createSlug('/shop/category/', category?.name, category?.id)}
+                                    key={category?.id}
+                                    passHref
+                                    className="block  bg-cover bg-center h-[144px]"
+                                    style={{
+                                    backgroundImage: `url('${category?.image ? category?.image : 'https://erp.indoteknik.com/web/image?model=x_banner.banner&id=5&field=x_banner_image&unique=09202023100557'}')`,
+                                    }}
+                                >
+                                </Link>
+                            </SwiperSlide>
+                        ))}
+                    </Swiper>
+                    {categories.length > 10 && (
+                        <div className="w-full flex justify-end mt-4">
+                            <button
+                                onClick={handleToggleCategories}
+                                className="flex justify-end mt-4 bg-red-500 text-white text-sm px-4 py-2 rounded"
+                            >
+                                {isOpenCategory ? 'Sembunyikan Semua' : 'Lihat Semua'}
+                            </button>
+                        </div>
+                    )}
+                </div>
+            )}
+        </section>
+    )
+}
+
+export default LobSectionCategory
diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx
index a8073036..73fecab5 100644
--- a/src/lib/product/components/ProductFilterDesktop.jsx
+++ b/src/lib/product/components/ProductFilterDesktop.jsx
@@ -22,6 +22,7 @@ import { formatCurrency } from '@/core/utils/formatValue'
 
 const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = null }) => {
   
+  
   const router = useRouter()
   const { query } = router
   const [order, setOrder] = useState(query?.orderBy)
@@ -107,7 +108,11 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
     const slug = Array.isArray(router.query.slug) ? router.query.slug[0] : router.query.slug;
 
     if (slug) {
-      router.push(`${prefixUrl}/${slug}?${params}`)
+      if(prefixUrl.includes('category') || prefixUrl.includes('lob')){
+        router.push(`${prefixUrl}?${params}`)
+      }else{
+        router.push(`${prefixUrl}/${slug}?${params}`)
+      }
     } else {
       router.push(`${prefixUrl}?${params}`)
     }
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index fb9017f4..9f19aced 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -26,6 +26,10 @@ import ProductSearchSkeleton from './Skeleton/ProductSearchSkeleton';
 
 import SideBanner from '~/modules/side-banner';
 import FooterBanner from '~/modules/footer-banner';
+import CategorySection from './CategorySection';
+import LobSectionCategory from './LobSectionCategory';
+import { getIdFromSlug } from '@/core/utils/slug'
+import { data } from 'autoprefixer';
 
 const ProductSearch = ({
   query,
@@ -37,11 +41,109 @@ const ProductSearch = ({
   const { page = 1 } = query;
   const [q, setQ] = useState(query?.q || '*');
   const [search, setSearch] = useState(query?.q || '*');
-  const [limit, setLimit] = useState(query?.limit || 30);
-  const [orderBy, setOrderBy] = useState(router.query?.orderBy);
+  const [limit, setLimit] = useState(router.query?.limit || 30);
+  const [orderBy, setOrderBy] = useState(router.query?.orderBy || 'popular');
+  const [finalQuery, setFinalQuery] = useState({});
+  const [queryFinal, setQueryFinal] = useState({});
+  const [dataCategoriesProduct, setDataCategoriesProduct] = useState([])
+  const [dataCategoriesLob, setDataCategoriesLob] = useState([])
+  const categoryId = getIdFromSlug(prefixUrl)
+  const [data, setData] = useState([])
+  const [dataLob, setDataLob] = useState([]);
   if (defaultBrand) query.brand = defaultBrand.toLowerCase();
+  const dataIdCategories = []
+  useEffect(() => {
+    if(prefixUrl.includes('category')){
+      const loadProduct = async () => {
+        const getCategoriesId = await odooApi('GET', `/api/v1/category/numFound?parent_id=${categoryId}`);
+        if (getCategoriesId) {
+          setDataCategoriesProduct(getCategoriesId);
+        }
+      };
+      loadProduct();
+    }else if(prefixUrl.includes('lob')){
+      const loadProduct = async () => {
+        const lobData = await odooApi('GET', `/api/v1/lob_homepage/${categoryId}/category_id`);
+         
+        if (lobData) {
+          setDataLob(lobData);
+        }
+      };
+      loadProduct();
+      
+    }
+  }, [categoryId]);
+  
+  const collectIds = (category) => {
+    const ids = [];
+    function recurse(cat) {
+      if (cat && cat.id) {
+        ids.push(cat.id);
+      }
+      if (Array.isArray(cat.children)) {
+        cat.children.forEach(recurse);
+      }
+    }
+    recurse(category);
+    return ids;
+  };
+  
+  useEffect(() => {
+    if(prefixUrl.includes('category')){
+      const ids = collectIds(dataCategoriesProduct);
+      const newQuery = {
+        fq: `category_id_ids:(${ids.join(' OR ')})`,
+        page : router.query.page? router.query.page : 1,
+        brand : router.query.brand? router.query.brand : '',
+        category : router.query.category? router.query.category : '',
+        priceFrom : router.query.priceFrom? router.query.priceFrom : '',
+        priceTo : router.query.priceTo? router.query.priceTo : '',
+        limit : router.query.limit? router.query.limit : '',
+        orderBy : router.query.orderBy? router.query.orderBy : ''
+      };
+      setFinalQuery(newQuery);
+    } else if (prefixUrl.includes('lob')){
+      
+      const fetchCategoryData = async () => {
+        if (dataLob[0]?.categoryIds) {
+          
+          for (const cate of dataLob[0].categoryIds) {
+           
+            dataIdCategories.push(cate.childId)
+          }
+          
+        
+          const mergedArray = dataIdCategories.flat();
+         
+          const newQuery = {
+            fq: `category_id_ids:(${mergedArray.join(' OR ')})`,
+            category : router.query.category? router.query.category : '',
+            page : router.query.page? router.query.page : 1,
+            brand : router.query.brand? router.query.brand : '',
+            priceFrom : router.query.priceFrom? router.query.priceFrom : '',
+            priceTo : router.query.priceTo? router.query.priceTo : '',
+            limit : router.query.limit? router.query.limit : '',
+            orderBy : router.query.orderBy? router.query.orderBy : ''
+          };
+       
+          setFinalQuery(newQuery);
+         
+        }
+      };
+      fetchCategoryData();
+    }
+  }, [dataCategoriesProduct, dataLob]);
+
+  useEffect(() => {
+    if (prefixUrl.includes('category') || prefixUrl.includes('lob')) {
+      setQueryFinal({ ...finalQuery, q, limit, orderBy });
+    } else {
+      setQueryFinal({ ...query, q, limit, orderBy });
+    }
+  }, [prefixUrl,dataCategoriesProduct, query, finalQuery]);
+
   const { productSearch } = useProductSearch({
-    query: { ...query, q, limit, orderBy },
+    query: queryFinal,
     operation: 'AND',
   });
   const [products, setProducts] = useState(null);
@@ -53,22 +155,24 @@ const ProductSearch = ({
   const numRows = [30, 50, 80, 100];
   const [brandValues, setBrand] = useState(
     !router.pathname.includes('brands')
-      ? query.brand
-        ? query.brand.split(',')
+      ? router.query.brand
+        ? router.query.brand.split(',')
         : []
       : []
   );
   const [categoryValues, setCategory] = useState(
-    query?.category?.split(',') || []
+    router.query?.category?.split(',') || router.query?.category?.split(',')
   );
-  const [priceFrom, setPriceFrom] = useState(query?.priceFrom || null);
-  const [priceTo, setPriceTo] = useState(query?.priceTo || null);
+  
+  const [priceFrom, setPriceFrom] = useState(router.query?.priceFrom || null);
+  const [priceTo, setPriceTo] = useState(router.query?.priceTo || null);
 
   const pageCount = Math.ceil(productSearch.data?.response.numFound / limit);
   const productStart = productSearch.data?.responseHeader.params.start;
   const productRows = limit;
   const productFound = productSearch.data?.response.numFound;
-
+  const [dataCategories, setDataCategories] = useState([])
+  
   useEffect(() => {
     if (productFound == 0 && query.q && !spellings) {
       searchSpellApi({ query: query.q }).then((response) => {
@@ -98,7 +202,7 @@ const ProductSearch = ({
       });
     }
   }, [productFound, query, spellings]);
-
+  let id = []
   useEffect(() => {
     const checkIfBrand = async () => {
       const brand = await axios(
@@ -115,6 +219,21 @@ const ProductSearch = ({
       checkIfBrand();
     }
   }, [q]);
+ 
+  useEffect(() => {
+    if(prefixUrl.includes('category')){
+      const loadCategories = async () => {
+        const getCategories = await odooApi('GET', `/api/v1/category/child?parent_id=${categoryId}`)
+       if(getCategories){
+        setDataCategories(getCategories)
+       }
+      }
+      loadCategories()
+    }
+  }, [])
+
+
+
 
   const brands = [];
   for (
@@ -224,7 +343,7 @@ const ProductSearch = ({
       q: router.query.q,
       orderBy: orderBy,
       brand: brandValues.join(','),
-      category: categoryValues.join(','),
+      category: categoryValues?.join(','),
       priceFrom,
       priceTo,
     };
@@ -263,7 +382,6 @@ const ProductSearch = ({
   };
 
   const isNotReadyStockPage = router.asPath !== '/shop/search?orderBy=stock';
-
   return (
     <>
       <MobileView>
@@ -324,6 +442,8 @@ const ProductSearch = ({
               SpellingComponent
             )}
           </div>
+          <LobSectionCategory categories={dataLob}/>
+          <CategorySection categories={dataCategories}/>
 
           {productFound > 0 && (
             <div className='flex items-center gap-x-2 mb-5 justify-between'>
@@ -364,6 +484,7 @@ const ProductSearch = ({
             pageCount={pageCount}
             currentPage={parseInt(page)}
             url={`${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
+            // url={prefixUrl.includes('category') || prefixUrl.includes('lob')? `${prefixUrl}?${toQuery(_.omit(finalQuery, ['page']))}` : `${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
             className='mt-6 mb-2'
           />
 
@@ -412,7 +533,10 @@ const ProductSearch = ({
 
             <SideBanner />
           </div>
+
           <div className='w-9/12 pl-6'>
+            <LobSectionCategory categories={dataLob}/>
+            <CategorySection categories={dataCategories}/>
             {bannerPromotionHeader && bannerPromotionHeader?.image && (
               <div className='mb-3'>
                 <Image
@@ -550,6 +674,7 @@ const ProductSearch = ({
                 pageCount={pageCount}
                 currentPage={parseInt(page)}
                 url={`${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
+                // url={prefixUrl.includes('category') || prefixUrl.includes('lob')? `${prefixUrl}?${toQuery(_.omit(finalQuery, ['page']))}` : `${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
                 className='!justify-end'
               />
             </div>
diff --git a/src/pages/api/shop/product-homepage.js b/src/pages/api/shop/product-homepage.js
index 02c01ee0..61732c77 100644
--- a/src/pages/api/shop/product-homepage.js
+++ b/src/pages/api/shop/product-homepage.js
@@ -36,7 +36,8 @@ const respoonseMap = (productHomepage, products) => {
     name: productHomepage.name_s,
     image: productHomepage.image_s,
     url: productHomepage.url_s,
-    products: products
+    products: products,
+    categoryIds: productHomepage.category_id_ids,
   }
 
   return productMapped
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 4493fe31..4d6e59e0 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,6 +1,5 @@
 import dynamic from 'next/dynamic';
-import { useRef } from 'react';
-
+import { useEffect, useRef, useState } from 'react';
 import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton';
 import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton';
 import Seo from '@/core/components/Seo';
@@ -12,8 +11,11 @@ import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBran
 import BannerPromoSkeleton from '@/lib/home/components/Skeleton/BannerPromoSkeleton';
 import PromotinProgram from '@/lib/promotinProgram/components/HomePage';
 import PagePopupIformation from '~/modules/popup-information';
-import useProductDetail from '~/modules/product-detail/stores/useProductDetail';
+import CategoryPilihan from '../lib/home/components/CategoryPilihan';
+import odooApi from '@/core/api/odooApi';
 import { getAuth } from '~/libs/auth';
+// import { getAuth } from '~/libs/auth';
+import useProductDetail from '~/modules/product-detail/stores/useProductDetail';
 
 const BasicLayout = dynamic(() =>
   import('@/core/components/layouts/BasicLayout')
@@ -58,12 +60,23 @@ const BannerSection = dynamic(() =>
 const CategoryHomeId = dynamic(() =>
   import('@/lib/home/components/CategoryHomeId')
 );
+
+const CategoryDynamic = dynamic(() =>
+  import('@/lib/home/components/CategoryDynamic')
+);
+
+const CategoryDynamicMobile = dynamic(() =>
+  import('@/lib/home/components/CategoryDynamicMobile')
+);
+
 const CustomerReviews = dynamic(() =>
   import('@/lib/review/components/CustomerReviews')
 );
 const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList'));
 
-export default function Home() {
+
+
+export default function Home({categoryId}) {
   const bannerRef = useRef(null);
   const wrapperRef = useRef(null);
 
@@ -74,7 +87,19 @@ export default function Home() {
       bannerRef.current?.querySelector(':first-child')?.clientHeight + 'px';
   };
 
+  useEffect(() => {
+    const loadCategories = async () => {
+     const getCategories = await odooApi('GET', '/api/v1/category/child?partner_id='+{categoryId})
+     if(getCategories){
+      setDataCategories(getCategories)
+     }
+    }
+    loadCategories()
+  }, [])
+
+  const [dataCategories, setDataCategories] = useState([])
   return (
+    <>
     <BasicLayout>
       <Seo
         title='Indoteknik.com: B2B Industrial Supply & Solution'
@@ -82,11 +107,9 @@ export default function Home() {
         additionalMetaTags={[
           {
             name: 'keywords',
-            content:
-              'indoteknik, indoteknik.com, toko teknik, toko perkakas, jual genset, jual fogging, jual krisbow, harga krisbow, harga alat safety, harga pompa air',
+            content: 'indoteknik, indoteknik.com, toko teknik, toko perkakas, jual genset, jual fogging, jual krisbow, harga krisbow, harga alat safety, harga pompa air',
           },
-        ]}
-      />
+        ]} />
 
       <PagePopupIformation />
 
@@ -126,18 +149,21 @@ export default function Home() {
               </>
             )}
             <PromotinProgram />
+            {dataCategories &&(
+              <CategoryPilihan categories={dataCategories} />
+            )}
+            <CategoryDynamic />
             <CategoryHomeId />
             <BannerSection />
             <CustomerReviews />
           </div>
         </div>
-      </DesktopView>
-
-      <MobileView>
+    </DesktopView>
+    <MobileView>
         <DelayRender renderAfter={200}>
           <HeroBanner />
         </DelayRender>
-        <div className='flex flex-col gap-y-12 my-6'>
+        <div className='flex flex-col gap-y-4 my-6'>
           <DelayRender renderAfter={400}>
             <ServiceList />
           </DelayRender>
@@ -159,6 +185,12 @@ export default function Home() {
           <DelayRender renderAfter={600}>
             <PromotinProgram />
           </DelayRender>
+          <DelayRender renderAfter={600}>
+            {dataCategories &&(
+              <CategoryPilihan categories={dataCategories} />
+            )}
+            <CategoryDynamicMobile />
+          </DelayRender>
           <DelayRender renderAfter={800}>
             <PopularProduct />
           </DelayRender>
@@ -172,5 +204,6 @@ export default function Home() {
         </div>
       </MobileView>
     </BasicLayout>
+  </>
   );
 }
\ No newline at end of file
diff --git a/src/pages/shop/category/[slug].jsx b/src/pages/shop/category/[slug].jsx
index 1afe30bf..11840d47 100644
--- a/src/pages/shop/category/[slug].jsx
+++ b/src/pages/shop/category/[slug].jsx
@@ -5,6 +5,8 @@ import { useRouter } from 'next/router';
 import Seo from '@/core/components/Seo';
 import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug';
 import Breadcrumb from '@/lib/category/components/Breadcrumb';
+import { useEffect, useState } from 'react';
+import odooApi from '@/core/api/odooApi';
 
 const BasicLayout = dynamic(() =>
   import('@/core/components/layouts/BasicLayout')
@@ -12,10 +14,14 @@ const BasicLayout = dynamic(() =>
 const ProductSearch = dynamic(() =>
   import('@/lib/product/components/ProductSearch')
 );
+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 categoryName = getNameFromSlug(slug);
   const categoryId = getIdFromSlug(slug);
@@ -43,8 +49,9 @@ export default function CategoryDetail() {
 
       <Breadcrumb categoryId={categoryId} />
 
+
       {!_.isEmpty(router.query) && (
-        <ProductSearch query={query} prefixUrl={`/shop/category/${slug}`} />
+        <ProductSearch query={query} categories ={categoryId} prefixUrl={`/shop/category/${slug}`} />
       )}
     </BasicLayout>
   );
diff --git a/src/pages/shop/lob/[slug].jsx b/src/pages/shop/lob/[slug].jsx
new file mode 100644
index 00000000..d939c25c
--- /dev/null
+++ b/src/pages/shop/lob/[slug].jsx
@@ -0,0 +1,48 @@
+import _ from 'lodash';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+import Seo from '@/core/components/Seo';
+import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug';
+import Breadcrumb from '../../../lib/lob/components/Breadcrumb';
+import { useEffect, useState } from 'react';
+import odooApi from '@/core/api/odooApi';
+import { div } from 'lodash-contrib';
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'));
+const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch'));
+const CategorySection = dynamic(() => import('@/lib/product/components/CategorySection'));
+
+export default function CategoryDetail() {
+  const router = useRouter();
+  const { slug = '', page = 1 } = router.query;
+  const [dataLob, setDataLob] = useState([]);
+  const [finalQuery, setFinalQuery] = useState({});
+  const [dataCategoriesProduct, setDataCategoriesProduct] = useState([])
+  const [data, setData] = useState([])
+  const dataIdCategories = []
+  
+  const categoryName = getNameFromSlug(slug);
+  const lobId = getIdFromSlug(slug);
+  const q = router?.query.q || null;
+
+  return (
+    <BasicLayout>
+      <Seo
+        title={`Beli ${categoryName} di Indoteknik`}
+        description={`Jual ${categoryName} Kirim Jakarta Surabaya Semarang Makassar Manado Denpasar Balikpapan Medan Palembang Lampung Bali Bandung Makassar Manado.`}
+        additionalMetaTags={[
+          {
+            property: 'keywords',
+            content: `Jual ${categoryName}, harga ${categoryName}, ${categoryName} murah, toko ${categoryName}, ${categoryName} jakarta, ${categoryName} surabaya`,
+          },
+        ]}
+      />
+
+      <Breadcrumb categoryId={getIdFromSlug(slug)} />
+
+      {!_.isEmpty(router.query) && (
+        <ProductSearch query={router.query} categories={getIdFromSlug(slug)} prefixUrl={`/shop/lob/${slug}`} />
+      )}
+    </BasicLayout>
+  );
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index f6561b00..505dcab4 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -583,12 +583,11 @@ button {
     @apply absolute 
         left-[100%] 
         top-12
-        w-[40vw] 
         bg-gray_r-1/90
         backdrop-blur-md
         border 
         border-gray_r-6 
-        p-6 
+        p-6
         opacity-0
         h-full 
         transition-all
@@ -604,6 +603,7 @@ button {
         transition-colors 
         ease-linear 
         duration-100 
+        w-fit
         font-semibold;
 }
 
@@ -613,6 +613,7 @@ button {
         transition-colors 
         ease-linear 
         duration-100 
+        w-full
         font-normal;
 }