<iman> update category management

4 files changed, 140 insertions, 30 deletions

diff --git a/src/lib/category/api/popularProduct.js b/src/lib/category/api/popularProduct.js
new file mode 100644
index 00000000..2298f6fa
--- /dev/null
+++ b/src/lib/category/api/popularProduct.js
@@ -0,0 +1,36 @@
+
+export const fetchPromoItemsSolr = 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&${sort}`);
+        console.log("queryParams",queryParams)
+        
+        // const response = await fetch(`/solr/product/select?${queryParams.toString()}`);
+        const response = await fetch(`/solr/promotion_program_lines/select?${queryParams.toString()}&rows=10&start=0&${sort}`);
+        console.log("response",response)
+        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 c147a3b3..1f3d7a51 100644
--- a/src/lib/category/components/Category.jsx
+++ b/src/lib/category/components/Category.jsx
@@ -5,6 +5,7 @@ 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'
 
 const Category = () => {
   const [categories, setCategories] = useState([])
@@ -30,6 +31,7 @@ const Category = () => {
     }
     loadCategories()
   }, [])
+  console.log("categories",categories)
 
   return (
     <DesktopView>
@@ -38,8 +40,11 @@ const Category = () => {
           <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'>
@@ -80,33 +85,7 @@ const Category = () => {
                 ))}
               </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>
+              <PopularBrand category={category} />
                 <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>
diff --git a/src/lib/category/components/PopularBrand.jsx b/src/lib/category/components/PopularBrand.jsx
new file mode 100644
index 00000000..32623f91
--- /dev/null
+++ b/src/lib/category/components/PopularBrand.jsx
@@ -0,0 +1,96 @@
+import odooApi from '@/core/api/odooApi'
+import {React } 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 {fetchPromoItemsSolr} from '../api/popularProduct'
+const SOLR_HOST = process.env.SOLR_HOST
+
+const PopularBrand = ({ category }) => {
+
+    const queryFinal = {
+        fq: `category_id_ids:(${category.categoryDataIds.join(' OR ')})`,
+        fl: 'manufacture_name_s,qty_sold_f',
+        sort: 'qty_sold_f desc',
+        rows: '2000'
+    };
+    
+    // Konversi objek queryFinal menjadi string query
+    // const queryString = new URLSearchParams(queryFinal).toString();
+    
+    async function fetchTopBrands() {
+        try {
+            // const items = await fetchPromoItemsSolr(`category_id_ids:(${category.categoryDataIds.join(' OR ')})`); 
+            const items = await fetchPromoItemsSolr(`type_value_s:discount_loading`);
+
+            console.log("queryFinal", queryFinal);
+            console.log("items", items);
+    
+            // Fungsi untuk deduplikasi dan mengambil 12 nama brand teratas
+            function getTop12UniqueBrands(products) {
+                const brandSet = new Set();
+                const topBrands = [];
+    
+                for (const product of products) {
+                    if (!brandSet.has(product.manufacture_name_s)) {
+                        brandSet.add(product.manufacture_name_s);
+                        topBrands.push(product.manufacture_name_s);
+                    }
+                    if (topBrands.length === 12) break;
+                }
+    
+                return topBrands;
+            }
+    
+            // Menggunakan hasil pencarian produk
+            const products = items;
+            const top12UniqueBrands = getTop12UniqueBrands(products);
+    
+            console.log('top12UniqueBrands',top12UniqueBrands);
+            return top12UniqueBrands;
+        } catch (error) {
+            console.error("Error fetching data from Solr", error);
+            throw error;
+        }
+    }
+    
+    fetchTopBrands();
+
+
+  return (
+    <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>
+  )
+}
+
+export default PopularBrand
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index f2d1a16f..0cc43d91 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -33,9 +33,8 @@ const CategoryDynamic = () => {
     };
 
     fetchCategoryData();
-  }, [categoryManagement, categoryData]);
+  }, [categoryManagement.isLoading]);
  
-
   return (
     <div>
         {categoryManagement && categoryManagement.data?.map((category) => {