[agnes] - Feature category management

4 files changed, 136 insertions, 17 deletions

diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx
index e6ea5acf..c147a3b3 100644
--- a/src/lib/category/components/Category.jsx
+++ b/src/lib/category/components/Category.jsx
@@ -2,10 +2,14 @@ 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'
 
 const Category = () => {
   const [categories, setCategories] = useState([])
+  const [openCategories, setOpenCategory] = useState([]);
+  
 
   useEffect(() => {
     const loadCategories = async () => {
@@ -31,7 +35,7 @@ const Category = () => {
     <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'
@@ -39,33 +43,74 @@ const Category = () => {
               {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'>
+                <div className='flex flex-col'>
+                  <div className='grid grid-cols-2 max-h-full w-full gap-2'>
+                    {category.childs.map((brand, index) => (
+                      (index < 8 ) && (
+                        <div key={brand.id} className='w-full flex items-center justify-center pb-2'>
+                          <Link
+                            href={createSlug('/shop/category/', brand.name, brand.id)}
+                            className='category-mega-box__child-one w-fit h-full flex items-center justify-center '
+                          >
+                            <Image src='https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/661' alt='' width={104} height={44} objectFit='cover' />
+                          </Link>
+                        </div>
+                      )
+                    ))}
+                  </div>
+                  {category.childs.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>
+                <div 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} />
+                </div>
+              </div>
             </div>
           </div>
         ))}
diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
new file mode 100644
index 00000000..c506ef29
--- /dev/null
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -0,0 +1,32 @@
+import Image from 'next/image'
+import useCategoryHome from '../hooks/useCategoryHome'
+
+const CategoryPilihan = ({ id, categories }) => {
+  const { categoryHome } = useCategoryHome({ id })
+
+  return (
+    <section>
+        <div className='flex flex-row items-center gap-4'>
+            <h1>Kategori Pilihan</h1>
+            <p className='text-gray_r-10'>total produk</p>
+        </div>
+        <div className="group/item grid grid-cols-6 gap-2 w-full h-full col-span-2 border">
+                {categories.map((category) => (
+                    <div className="max-w-sm w-full gap-4 lg:max-w-full flex flex-col bg-white px-4 py-2 border-2 border-gray_r-8 rounded-lg">
+                        <div className="group/edit flex items-center justify-center group-hover/item:visible">
+                            <Image src='group-hover/ https://erp.indoteknik.com/api/image/product.template/image_256/544371?ratio=square' width={80} height={80} alt={category?.name} />
+                            <a class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..." href="tel:{person.phone}">
+                                <span class="group-hover/edit:text-gray-700 ...">Call</span>
+                            </a>
+                        </div>
+                        <div className="flex flex-col justify-center leading-normal items-center">
+                            <h2 className="text-gray-900 font-bold text-sm items-center text-center">{category?.name}</h2>
+                        </div>
+                    </div>
+                ))}
+            </div>
+    </section>
+  )
+}
+
+export default CategoryPilihan
diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx
new file mode 100644
index 00000000..7c347fe8
--- /dev/null
+++ b/src/lib/product/components/CategorySection.jsx
@@ -0,0 +1,22 @@
+import Image from "next/image"
+
+const CategorySection = ({ categories }) => {
+    return (
+        <section className="items-center bg-danger-100">
+            <div className="grid grid-cols-4 gap-2 w-full h-full col-span-2">
+                {categories.map((category) => (
+                    <div class="max-w-sm w-fit gap-4 lg:max-w-full lg:flex bg-white px-4 py-2 border-2 border-gray_r-8 rounded-lg">
+                        <div className="flex items-center justify-center">
+                            <Image src='https://erp.indoteknik.com/api/image/product.template/image_256/544371?ratio=square' width={80} height={80} alt={category?.name} />
+                        </div>
+                        <div class="flex flex-col justify-center leading-normal">
+                            <h2 class="text-gray-900 font-bold text-sm">{category?.name}</h2>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </section>
+    )
+}
+
+export default CategorySection
\ No newline at end of file
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 08b64c13..253c3703 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -26,6 +26,8 @@ import ProductSearchSkeleton from './Skeleton/ProductSearchSkeleton';
 
 import SideBanner from '~/modules/side-banner';
 import FooterBanner from '~/modules/footer-banner';
+import CategorySection from './CategorySection';
+import { getIdFromSlug } from '@/core/utils/slug'
 
 const ProductSearch = ({
   query,
@@ -68,6 +70,10 @@ const ProductSearch = ({
   const productStart = productSearch.data?.responseHeader.params.start;
   const productRows = limit;
   const productFound = productSearch.data?.response.numFound;
+  const [dataCategories, setDataCategories] = useState([])
+
+  const categoryId = getIdFromSlug(prefixUrl)
+
 
   useEffect(() => {
     if (productFound == 0 && query.q && !spellings) {
@@ -116,6 +122,18 @@ const ProductSearch = ({
     }
   }, [q]);
 
+  useEffect(() => {
+    const loadCategories = async () => {
+     const getCategories = await odooApi('GET', '/api/v1/category/child?partner_id='+{categoryId})
+     if(getCategories){
+      setDataCategories(getCategories)
+     }
+    }
+    loadCategories()
+  }, [])
+  
+  console.log('Data Category : ', dataCategories)
+
   const brands = [];
   for (
     let i = 0;
@@ -409,7 +427,9 @@ const ProductSearch = ({
 
             <SideBanner />
           </div>
+
           <div className='w-9/12 pl-6'>
+            <CategorySection categories={dataCategories}/>
             {bannerPromotionHeader && bannerPromotionHeader?.image && (
               <div className='mb-3'>
                 <Image