Merge branch 'release' into development

# Conflicts:
#	src/pages/shop/product/variant/[slug].jsx

22 files changed, 1718 insertions, 381 deletions

diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 3fe1d3cf..bcb41dd6 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -1,69 +1,99 @@
-import '@/fonts/Inter/inter.css'
-import '@/styles/globals.css'
-import 'react-loading-skeleton/dist/skeleton.css'
+import '@/fonts/Inter/inter.css';
+import '@/styles/globals.css';
+import '@/styles/normalize.css';
+// import 'react-loading-skeleton/dist/skeleton.css';
 
-import NextProgress from 'next-progress'
-import { useRouter, Router } from 'next/router'
-import { AnimatePresence, motion } from 'framer-motion'
-import { Toaster } from 'react-hot-toast'
-import { QueryClient, QueryClientProvider } from 'react-query'
-import useDevice from '@/core/hooks/useDevice'
-import { useEffect, useState } from 'react'
-import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
-import { SessionProvider } from 'next-auth/react'
-import { ProductProvider } from '@/contexts/ProductContext'
-import { ProductCartProvider } from '@/contexts/ProductCartContext'
-import { ChakraProvider } from '@chakra-ui/react'
-import theme from '../../chakra.theme'
+import { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
+import { useRouter, Router } from 'next/router';
+import { AnimatePresence, motion } from 'framer-motion';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
-const queryClient = new QueryClient()
+import useDevice from '@/core/hooks/useDevice';
+import theme from '../../chakra.theme';
+
+const NextProgress = dynamic(() => import('next-progress'), { ssr: false });
+const ChakraProvider = dynamic(
+  () => import('@chakra-ui/react').then((mod) => mod.ChakraProvider),
+  { ssr: false }
+);
+const ProductProvider = dynamic(
+  () => import('@/contexts/ProductContext').then((mod) => mod.ProductProvider),
+  { ssr: false }
+);
+const ProductCartProvider = dynamic(
+  () =>
+    import('@/contexts/ProductCartContext').then(
+      (mod) => mod.ProductCartProvider
+    ),
+  { ssr: false }
+);
+const SessionProvider = dynamic(
+  () => import('next-auth/react').then((mod) => mod.SessionProvider),
+  { ssr: false }
+);
+const LogoSpinner = dynamic(
+  () => import('@/core/components/elements/Spinner/LogoSpinner'),
+  { ssr: false }
+);
+const ScrollToTop = dynamic(() => import('@/core/components/ScrollToTop'), {
+  ssr: false,
+});
+const Toaster = dynamic(
+  () => import('react-hot-toast').then((mod) => mod.Toaster),
+  { ssr: false }
+);
+
+const queryClient = new QueryClient();
 
 function MyApp({ Component, pageProps: { session, ...pageProps } }) {
-  const router = useRouter()
-  const { isMobile } = useDevice()
+  const router = useRouter();
+  const { isMobile } = useDevice();
 
-  const [animateLoader, setAnimateLoader] = useState(false)
+  const [animateLoader, setAnimateLoader] = useState(false);
 
   useEffect(() => {
-    const handleRouteChangeStart = () => setAnimateLoader(true)
-    const handleRouteChangeComplete = () => setAnimateLoader(false)
+    const handleRouteChangeStart = () => setAnimateLoader(true);
+    const handleRouteChangeComplete = () => setAnimateLoader(false);
 
-    Router.events.on('routeChangeStart', handleRouteChangeStart)
-    Router.events.on('routeChangeComplete', handleRouteChangeComplete)
-    Router.events.on('routeChangeError', handleRouteChangeComplete)
+    Router.events.on('routeChangeStart', handleRouteChangeStart);
+    Router.events.on('routeChangeComplete', handleRouteChangeComplete);
+    Router.events.on('routeChangeError', handleRouteChangeComplete);
 
     return () => {
-      Router.events.off('routeChangeStart', handleRouteChangeStart)
-      Router.events.off('routeChangeComplete', handleRouteChangeComplete)
-      Router.events.off('routeChangeError', handleRouteChangeComplete)
-    }
-  }, [])
+      Router.events.off('routeChangeStart', handleRouteChangeStart);
+      Router.events.off('routeChangeComplete', handleRouteChangeComplete);
+      Router.events.off('routeChangeError', handleRouteChangeComplete);
+    };
+  }, []);
 
-  const [toasterStyle, setToasterStyle] = useState({})
+  const [toasterStyle, setToasterStyle] = useState({});
 
   useEffect(() => {
-    let elems = document.querySelectorAll('nav')
-    let totalNavHeight = 0
+    let elems = document.querySelectorAll('nav');
+    let totalNavHeight = 0;
 
     elems.forEach(function (elem) {
-      totalNavHeight += elem.offsetHeight
-    })
+      totalNavHeight += elem.offsetHeight;
+    });
 
     setToasterStyle({
-      marginTop: isMobile ? totalNavHeight - 8 : totalNavHeight
-    })
-  }, [isMobile])
+      marginTop: isMobile ? totalNavHeight - 8 : totalNavHeight,
+    });
+  }, [isMobile]);
 
   return (
     <SessionProvider session={session}>
+      <ScrollToTop />
+      
       <AnimatePresence>
         {animateLoader && (
           <motion.div
-            initial={{ opacity: 0.4 }}
+            initial={{ opacity: 0.25 }}
             animate={{ opacity: 1 }}
-            exit={{ opacity: 0.4 }}
+            exit={{ opacity: 0.25 }}
             transition={{
-              duration: 0.1
+              duration: 0.1,
             }}
             className='fixed w-screen h-screen z-[500] bg-white flex justify-center items-center'
           >
@@ -76,7 +106,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
         containerStyle={toasterStyle}
         toastOptions={{
           duration: 3000,
-          className: 'border border-gray_r-8'
+          className: 'border border-gray_r-8',
         }}
       />
       <NextProgress color='#F01C21' options={{ showSpinner: false }} />
@@ -90,7 +120,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
         </ProductProvider>
       </QueryClientProvider>
     </SessionProvider>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx
index 3762c63b..cd60bd89 100644
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@@ -1,16 +1,34 @@
-import { Html, Head, Main, NextScript } from 'next/document'
-import Script from 'next/script'
+import { Html, Head, Main, NextScript } from 'next/document';
+import Script from 'next/script';
 
 export default function MyDocument() {
-  const env = process.env.NODE_ENV
+  const env = process.env.NODE_ENV;
 
   return (
     <Html>
       <Head>
+        <link rel='preconnect' href='https://connect.facebook.net' />
+        <link rel='dns-prefetch' href='https://connect.facebook.net' />
+
+        <link rel='preconnect' href='https://googleads.g.doubleclick.net' />
+        <link rel='dns-prefetch' href='https://googleads.g.doubleclick.net' />
+
+        <link rel='preconnect' href='https://www.googletagmanager.com' />
+        <link rel='dns-prefetch' href='https://www.googletagmanager.com' />
+
+        <link rel='preconnect' href={process.env.NEXT_PUBLIC_ODOO_API_HOST} />
+        <link rel='dns-prefetch' href={process.env.NEXT_PUBLIC_ODOO_API_HOST} />
+        
+        <link rel='preconnect' href='/images/logo-indoteknik-gear.png' />
+        <link rel='dns-prefetch' href='/images/logo-indoteknik-gear.png' />
+
         <link rel='icon' href='/favicon.ico' />
         <link rel='manifest' href='/manifest.json' />
         <link rel='apple-touch-icon' href='/icon.jpg'></link>
-        <link rel='apple-touch-startup-image' href='/images/splash/launch.png' />
+        <link
+          rel='apple-touch-startup-image'
+          href='/images/splash/launch.png'
+        />
 
         <meta name='mobile-web-app-capable' content='yes' />
         <meta name='apple-mobile-web-app-capable' content='yes' />
@@ -18,9 +36,11 @@ export default function MyDocument() {
         <meta name='apple-mobile-web-app-title' content='Indoteknik.com' />
         <meta name='theme-color' content='#fff' />
 
-        <link rel='prefetch' href='/images/logo-indoteknik-gear.png' />
+        <meta
+          name='facebook-domain-verification'
+          content='328wmjs7hcnz74rwsqzxvq50rmbtm2'
+        />
 
-        <meta name='facebook-domain-verification' content='328wmjs7hcnz74rwsqzxvq50rmbtm2' />
         <Script
           async
           strategy='beforeInteractive'
@@ -28,6 +48,7 @@ export default function MyDocument() {
         />
 
         <Script
+          async
           id='google-analytics-ua'
           strategy='beforeInteractive'
           dangerouslySetInnerHTML={{
@@ -36,7 +57,7 @@ export default function MyDocument() {
               function gtag(){dataLayer.push(arguments);}
               gtag('js', new Date());
               gtag('config', 'UA-10501937-1');
-            `
+            `,
           }}
         />
 
@@ -47,6 +68,7 @@ export default function MyDocument() {
         />
 
         <Script
+          async
           id='google-analytics-ga'
           strategy='beforeInteractive'
           dangerouslySetInnerHTML={{
@@ -55,11 +77,12 @@ export default function MyDocument() {
               function gtag(){dataLayer.push(arguments);}
               gtag('js', new Date());
               gtag('config', 'G-G1W8MNZ11P');
-            `
+            `,
           }}
         />
 
         <Script
+          async
           id='google-tag-manager'
           strategy='afterInteractive'
           dangerouslySetInnerHTML={{
@@ -68,7 +91,7 @@ export default function MyDocument() {
               f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 
               'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
               })(window,document,'script','dataLayer','GTM-PHRB7RP');
-            `
+            `,
           }}
         />
 
@@ -79,6 +102,7 @@ export default function MyDocument() {
         />
 
         <Script
+          async
           id='google-ads'
           strategy='afterInteractive'
           dangerouslySetInnerHTML={{
@@ -87,7 +111,7 @@ export default function MyDocument() {
               function gtag(){dataLayer.push(arguments);}
               gtag('js', new Date());
 
-              gtag('config', 'AW-954540379');`
+              gtag('config', 'AW-954540379');`,
           }}
         />
 
@@ -119,5 +143,5 @@ export default function MyDocument() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/src/pages/api/product-variant/[id].js b/src/pages/api/product-variant/[id].js
new file mode 100644
index 00000000..4186a724
--- /dev/null
+++ b/src/pages/api/product-variant/[id].js
@@ -0,0 +1,2 @@
+import handler from '~/pages/api/product-variant/[id]';
+export default handler;
diff --git a/src/pages/api/product-variant/[id]/promotion/[category].js b/src/pages/api/product-variant/[id]/promotion/[category].js
new file mode 100644
index 00000000..aef03c22
--- /dev/null
+++ b/src/pages/api/product-variant/[id]/promotion/[category].js
@@ -0,0 +1,2 @@
+import handler from '~/pages/api/product-variant/[id]/promotion/[category]';
+export default handler;
diff --git a/src/pages/api/product-variant/[id]/promotion/highlight.js b/src/pages/api/product-variant/[id]/promotion/highlight.js
new file mode 100644
index 00000000..93b1e781
--- /dev/null
+++ b/src/pages/api/product-variant/[id]/promotion/highlight.js
@@ -0,0 +1,2 @@
+import handler from '~/pages/api/product-variant/[id]/promotion/highlight';
+export default handler;
\ No newline at end of file
diff --git a/src/pages/api/promotion-program/[id].js b/src/pages/api/promotion-program/[id].js
new file mode 100644
index 00000000..f2bb550e
--- /dev/null
+++ b/src/pages/api/promotion-program/[id].js
@@ -0,0 +1,2 @@
+import handler from '~/pages/api/promotion-program/[id]';
+export default handler;
diff --git a/src/pages/api/shop/brands.js b/src/pages/api/shop/brands.js
index dbbfcfe3..cc64a7e7 100644
--- a/src/pages/api/shop/brands.js
+++ b/src/pages/api/shop/brands.js
@@ -1,36 +1,37 @@
-import axios from 'axios'
+import axios from 'axios';
+
+const SOLR_HOST = process.env.SOLR_HOST;
 
 export default async function handler(req, res) {
   try {
-    let params = '*:*'
-    let sort = 'sort=if(exists(sequence_i),0,1) asc,sequence_i asc, if(exists(image_s),0,1) asc '
-    let rows = 2000
+    let params = '*:*';
+    let sort =
+      'sort=if(exists(sequence_i),0,1) asc,sequence_i asc, if(exists(image_s),0,1) asc ';
+    let rows = 2000;
 
     if (req.query.params) {
-      rows = 100
+      rows = 100;
       switch (req?.query?.params) {
         case 'level_s':
-          params = 'level_s:prioritas'
-          break
+          params = 'level_s:prioritas';
+          break;
         case 'search':
-          params = `name_s:${req?.query?.q.toLowerCase()}`
-          sort = ''
-          rows = 1
+          params = `name_s:"${req?.query?.q.toLowerCase()}"`;
+          sort = '';
+          rows = 1;
           break;
         default:
-          params = `name_s:${req.query.params}`
+          params = `name_s:${req.query.params}`.toLowerCase();
       }
     }
-    let brands = await axios(
-      process.env.SOLR_HOST +
-        `/solr/brands/select?q=${params}&q.op=OR&indent=true&rows=${rows}&${sort}`
-    )
-    let dataBrands = responseMap(brands.data.response.docs)
+    const url = `${SOLR_HOST}/solr/brands/select?q=${params}&q.op=OR&indent=true&rows=${rows}&${sort}`;
+    let brands = await axios(url);
+    let dataBrands = responseMap(brands.data.response.docs);
 
-    res.status(200).json(dataBrands)
+    res.status(200).json(dataBrands);
   } catch (error) {
-    console.error('Error fetching data from Solr:', error)
-    res.status(500).json({ error: 'Internal Server Error' })
+    console.error('Error fetching data from Solr:', error);
+    res.status(500).json({ error: 'Internal Server Error' });
   }
 }
 
@@ -40,9 +41,9 @@ const responseMap = (brands) => {
       id: brand.id,
       name: brand.display_name_s,
       logo: brand.image_s || '',
-      sequance: brand.sequence_i || ''
-    }
+      sequance: brand.sequence_i || '',
+    };
 
-    return brandMapping
-  })
-}
+    return brandMapping;
+  });
+};
diff --git a/src/pages/api/shop/generate-recomendation.js b/src/pages/api/shop/generate-recomendation.js
new file mode 100644
index 00000000..dce8ae72
--- /dev/null
+++ b/src/pages/api/shop/generate-recomendation.js
@@ -0,0 +1,64 @@
+import { productMappingSolr } from '@/utils/solrMapping'
+import axios from 'axios';
+import camelcaseObjectDeep from 'camelcase-object-deep';
+
+export default async function handler(req, res) {
+  const { q = null, op = 'AND'  } = req.query
+
+  if (!q) {
+    return res.status(422).json({ error: 'parameter missing' })
+  }
+
+  /*let parameter = [
+    `q=${escapeSolrQuery(q)}`,
+    `q.op=${op}`,
+    `indent=true`,
+    `fq=-publish_b:false`,
+    `qf=name_s^2 description_s`,
+    `facetch=true`,
+    `fq=price_tier1_v2_f:[1 TO *]`,
+    `rows=10`,
+    `sort=product_rating_f DESC, price_discount_f DESC`,
+  ];
+  let result = await axios(
+    process.env.SOLR_HOST + '/solr/product/select?' + parameter.join('&')
+  );*/
+  let parameter = [
+    `q=${q}`,
+    `q.op=${op}`,
+    `debugQuery=on`,
+    `defType=edismax`,
+    `df=display_name_s`,
+    `fq=-publish_b:false`,
+    `rows=5`,
+  ];
+  if(op == 'AND'){
+    parameter.push(`sort=product_rating_f DESC, price_discount_f DESC`);
+    parameter.push(`rows=1`);
+  } 
+
+  let result = await axios(
+    process.env.SOLR_HOST + '/solr/recommendation/select?' + parameter.join('&')
+  );
+  try {
+    result.data = camelcaseObjectDeep(result.data)
+    res.status(200).json(result.data)
+  } catch (error) {
+    res.status(400).json({ error: error.message });
+  }
+}
+
+const escapeSolrQuery = (query) => {
+  if (query == '*') return query;
+
+  const specialChars = /([\+\-\!\(\)\{\}\[\]\^"~\*\?:\\\/])/g;
+  const words = query.split(/\s+/);
+  const escapedWords = words.map((word) => {
+    if (specialChars.test(word)) {
+      return `"${word.replace(specialChars, '\\$1')}"`;
+    }
+    return word;
+  });
+
+  return escapedWords.join(' ');
+};
diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index 576d028a..b6b8c795 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -1,6 +1,6 @@
-import { productMappingSolr } from '@/utils/solrMapping'
-import axios from 'axios'
-import camelcaseObjectDeep from 'camelcase-object-deep'
+import { productMappingSolr } from '@/utils/solrMapping';
+import axios from 'axios';
+import camelcaseObjectDeep from 'camelcase-object-deep';
 
 export default async function handler(req, res) {
   const {
@@ -14,35 +14,36 @@ export default async function handler(req, res) {
     operation = 'AND',
     fq = '',
     limit = 30,
-    stock = ''
-  } = req.query
+  } = req.query;
 
-  let paramOrderBy = ''
+  let { stock = '' } = req.query;
+
+  let paramOrderBy = '';
   switch (orderBy) {
     case 'price-asc':
-      paramOrderBy += 'price_tier1_v2_f ASC'
-      break
+      paramOrderBy += 'price_tier1_v2_f ASC';
+      break;
     case 'price-desc':
-      paramOrderBy += 'price_tier1_v2_f DESC'
-      break
+      paramOrderBy += 'price_tier1_v2_f DESC';
+      break;
     case 'popular':
-      paramOrderBy += 'product_rating_f DESC, search_rank_i DESC,'
-      break
+      paramOrderBy += 'product_rating_f DESC, search_rank_i DESC,';
+      break;
     case 'popular-weekly':
-      paramOrderBy += 'search_rank_weekly_i DESC'
-      break
+      paramOrderBy += 'search_rank_weekly_i DESC';
+      break;
     case 'stock':
-      paramOrderBy += 'stock_total_f DESC'
-      break
+      paramOrderBy += 'product_rating_f DESC, stock_total_f DESC';
+      break;
     case 'flashsale-price-asc':
-      paramOrderBy += 'flashsale_price_f ASC'
-      break
+      paramOrderBy += 'flashsale_price_f ASC';
+      break;
     default:
-      paramOrderBy += 'product_rating_f DESC, price_discount_f DESC'
-      break
+      paramOrderBy += 'product_rating_f DESC, price_discount_f DESC';
+      break;
   }
 
-  let offset = (page - 1) * limit
+  let offset = (page - 1) * limit;
   let parameter = [
     'facet.field=manufacture_name_s',
     'facet.field=category_name',
@@ -55,59 +56,82 @@ export default async function handler(req, res) {
     `start=${parseInt(offset)}`,
     `rows=${limit}`,
     `sort=${paramOrderBy}`,
-    `fq=-publish_b:false`
-  ]
+    `fq=-publish_b:false`,
+  ];
 
   if (priceFrom > 0 || priceTo > 0) {
     parameter.push(
       `fq=price_tier1_v2_f:[${priceFrom == '' ? '*' : priceFrom} TO ${
         priceTo == '' ? '*' : priceTo
       }]`
-    )
+    );
+  }
+
+  let { auth } = req.cookies;
+  if (auth) {
+    auth = JSON.parse(auth);
+    if (auth.feature.onlyReadyStock) stock = true;
   }
 
-  if (brand) parameter.push(`fq=${brand.split(',').map(manufacturer => `manufacture_name:"${manufacturer}"`).join(" OR ")}`)
-  if (category) parameter.push(`fq=${category.split(',').map(cat => `category_name:"${cat}"`).join(' OR ')}`)
+  if (brand)
+    parameter.push(
+      `fq=${brand
+        .split(',')
+        .map((manufacturer) => `manufacture_name:"${encodeURIComponent(manufacturer)}"`)
+        .join(' OR ')}`
+    );
+  if (category)
+    parameter.push(
+      `fq=${category
+        .split(',')
+        .map((cat) => `category_name:"${encodeURIComponent(cat)}"`)
+        .join(' OR ')}`
+    );
   // if (category) parameter.push(`fq=category_name:${capitalizeFirstLetter(category.replace(/,/g, ' OR '))}`)
-  if (stock) parameter.push(`fq=stock_total_f:{1 TO *}`)
+  if (stock) parameter.push(`fq=stock_total_f:{1 TO *}`);
 
   // Single fq in url params
-  if (typeof fq === 'string') parameter.push(`fq=${fq}`)
+  if (typeof fq === 'string') parameter.push(`fq=${fq}`);
   // Multi fq in url params
-  if (Array.isArray(fq)) parameter = parameter.concat(fq.map((val) => `fq=${val}`))
+  if (Array.isArray(fq))
+    parameter = parameter.concat(fq.map((val) => `fq=${val}`));
 
-  let result = await axios(process.env.SOLR_HOST + '/solr/product/select?' + parameter.join('&'))
+  let result = await axios(
+    process.env.SOLR_HOST + '/solr/product/select?' + parameter.join('&')
+  );
   try {
-    let { auth } = req.cookies
-    if (auth) auth = JSON.parse(auth)
     result.data.response.products = productMappingSolr(
       result.data.response.docs,
       auth?.pricelist || false
-    )
-    result.data.responseHeader.params.start = parseInt(result.data.responseHeader.params.start)
-    result.data.responseHeader.params.rows = parseInt(result.data.responseHeader.params.rows)
-    delete result.data.response.docs
-    result.data = camelcaseObjectDeep(result.data)
-    res.status(200).json(result.data)
+    );
+    result.data.responseHeader.params.start = parseInt(
+      result.data.responseHeader.params.start
+    );
+    result.data.responseHeader.params.rows = parseInt(
+      result.data.responseHeader.params.rows
+    );
+    delete result.data.response.docs;
+    result.data = camelcaseObjectDeep(result.data);
+    res.status(200).json(result.data);
   } catch (error) {
-    res.status(400).json({ error: error.message })
+    res.status(400).json({ error: error.message });
   }
 }
 
 const escapeSolrQuery = (query) => {
-  if (query == '*') return query
+  if (query == '*') return query;
 
-  const specialChars = /([\+\-\!\(\)\{\}\[\]\^"~\*\?:\\\/])/g
-  const words = query.split(/\s+/)
+  const specialChars = /([\+\-\!\(\)\{\}\[\]\^"~\*\?:\\\/])/g;
+  const words = query.split(/\s+/);
   const escapedWords = words.map((word) => {
     if (specialChars.test(word)) {
-      return `"${word.replace(specialChars, '\\$1')}"`
+      return `"${word.replace(specialChars, '\\$1')}"`;
     }
-    return word
-  })
+    return word;
+  });
 
-  return escapedWords.join(' ')
-}
+  return escapedWords.join(' ');
+};
 
 /*const productResponseMap = (products, pricelist) => {
   return products.map((product) => {
diff --git a/src/pages/api/shop/variant-detail.js b/src/pages/api/shop/variant-detail.js
index fadbe000..08ce75b8 100644
--- a/src/pages/api/shop/variant-detail.js
+++ b/src/pages/api/shop/variant-detail.js
@@ -8,7 +8,10 @@ export default async function handler(req, res) {
         `/solr/variants/select?q=id:${req.query.id}&q.op=OR&indent=true`
     )
     let auth  = req.query.auth === 'false' ? JSON.parse(req.query.auth) : req.query.auth
-    let result = variantsMappingSolr('',productVariants.data.response.docs, auth || false)
+    let productTemplate = await axios(
+      process.env.SOLR_HOST + `/solr/product/select?q=id:${req.query.id}&q.op=OR&indent=true`
+    )
+    let result = variantsMappingSolr(productTemplate.data.response.docs, productVariants.data.response.docs, auth || false)
     
     res.status(200).json(result)
   } catch (error) {
diff --git a/src/pages/google_merchant/products/[page].js b/src/pages/google_merchant/products/[page].js
index c8b4079b..6e0eb703 100644
--- a/src/pages/google_merchant/products/[page].js
+++ b/src/pages/google_merchant/products/[page].js
@@ -1,94 +1,102 @@
-import { createSlug } from '@/core/utils/slug'
-import toTitleCase from '@/core/utils/toTitleCase'
-import productSearchApi from '@/lib/product/api/productSearchApi'
-import variantSearchApi from '@/lib/product/api/variantSearchApi'
-import axios from 'axios'
-import _ from 'lodash-contrib'
-import { create } from 'xmlbuilder'
+import { createSlug } from '@/core/utils/slug';
+import toTitleCase from '@/core/utils/toTitleCase';
+import variantSearchApi from '@/lib/product/api/variantSearchApi';
+import axios from 'axios';
+import _ from 'lodash-contrib';
+import { create } from 'xmlbuilder';
 
 export async function getServerSideProps({ res, query }) {
-  const titleContent = 'Indoteknik.com: B2B Industrial Supply & Solution'
+  const titleContent = 'Indoteknik.com: B2B Industrial Supply & Solution';
   const descriptionContent =
-    'Temukan pilihan produk B2B Industri & Alat Teknik untuk Perusahaan, UMKM & Pemerintah dengan lengkap, mudah dan transparan.'
+    'Temukan pilihan produk B2B Industri & Alat Teknik untuk Perusahaan, UMKM & Pemerintah dengan lengkap, mudah dan transparan.';
 
-  const { page } = query
-  const limit = 5000
+  const { page } = query;
+  const limit = 5000;
   const queries = {
     limit,
     page: page.replace('.xml', ''),
     priceFrom: 1,
     orderBy: 'popular',
-    fq: 'image_s:["" TO *]'
-  }
-  const products = await variantSearchApi({ query: _.toQuery(queries) })
+    fq: 'image_s:["" TO *]',
+  };
+  const products = await variantSearchApi({ query: _.toQuery(queries) });
 
-  const brandsData = {}
-  const categoriesData = {}
+  const brandsData = {};
+  const categoriesData = {};
 
-  const productItems = []
+  const productItems = [];
   for (const product of products.response.products) {
-    const productUrl = createSlug('/shop/product/variant/', product.name, product.id, true)
-    const productId = product.code != '' ? product.code : product.id
-    const regexHtmlTags = /(<([^>]+)>)/gi
-    product.description = product.description?.replace(regexHtmlTags, ' ').trim()
+    const productUrl = createSlug(
+      '/shop/product/variant/',
+      product.name,
+      product.id,
+      true
+    );
+    const productId = product.code != '' ? product.code : product.id;
+    const regexHtmlTags = /(<([^>]+)>)/gi;
+    product.description = product.description
+      ?.replace(regexHtmlTags, ' ')
+      .trim();
     const defaultProductDescription =
-      'Indoteknik.com menawarkan berbagai produk industri, konstruksi, dan teknik terpercaya. Temukan mesin industri, peralatan listrik, alat pengukur, dan banyak lagi. Pengalaman berbelanja mudah dengan deskripsi produk lengkap, spesifikasi teknis, dan gambar jelas. Pembayaran aman, pengiriman cepat ke seluruh Indonesia. Solusi lengkap untuk kebutuhan Kantor, Industri & Teknik Anda.'
+      'Indoteknik.com menawarkan berbagai produk industri, konstruksi, dan teknik terpercaya. Temukan mesin industri, peralatan listrik, alat pengukur, dan banyak lagi. Pengalaman berbelanja mudah dengan deskripsi produk lengkap, spesifikasi teknis, dan gambar jelas. Pembayaran aman, pengiriman cepat ke seluruh Indonesia. Solusi lengkap untuk kebutuhan Kantor, Industri & Teknik Anda.';
 
     if (!product.description) {
-      product.description = defaultProductDescription
+      product.description = defaultProductDescription;
     }
 
-    let categoryName = null
+    let categoryName = null;
 
-    let brandId = product.manufacture?.id ?? null
-    let categoryId = null
+    let brandId = product.manufacture?.id ?? null;
+    let categoryId = null;
 
     if (brandId && brandId in brandsData) {
-      categoryId = brandsData[brandId].category_ids?.[0] ?? null
+      categoryId = brandsData[brandId].category_ids?.[0] ?? null;
     } else {
-      const solrBrand = await getBrandById(brandId)
-      brandsData[brandId] = solrBrand
-      categoryId = solrBrand?.category_ids?.[0] ?? null
+      const solrBrand = await getBrandById(brandId);
+      brandsData[brandId] = solrBrand;
+      categoryId = solrBrand?.category_ids?.[0] ?? null;
     }
 
     if (categoryId && categoryId in categoriesData) {
-      categoryName = categoriesData[categoryId].name_s ?? null
+      categoryName = categoriesData[categoryId].name_s ?? null;
     } else {
-      const solrCategory = await getCategoryById(categoryId)
-      categoriesData[categoryId] = solrCategory
-      categoryName = solrCategory?.name_s ?? null
+      const solrCategory = await getCategoryById(categoryId);
+      categoriesData[categoryId] = solrCategory;
+      categoryName = solrCategory?.name_s ?? null;
     }
 
-    const availability = 'in_stock'
+    const availability = 'in_stock';
 
     const item = {
       'g:id': { '#text': productId },
       'g:title': { '#text': toTitleCase(product.name) },
       'g:description': { '#text': product.description },
       'g:link': { '#text': productUrl },
-      'g:image_link': { '#text': product.image },
+      'g:image_link': { '#text': product.image + '?variant=True' },
       'g:condition': { '#text': 'new' },
       'g:availability': { '#text': availability },
       'g:brand': { '#text': product.manufacture?.name || '' },
-      'g:price': { '#text': `${Math.round(product.lowestPrice.price * 1.11)} IDR` }
-    }
+      'g:price': {
+        '#text': `${Math.round(product.lowestPrice.price * 1.11)} IDR`,
+      },
+    };
 
     if (product.stockTotal == 0) {
-      item['g:custom_label_0'] = { '#text': 'Stok Tidak Tersedia' }
+      item['g:custom_label_0'] = { '#text': 'Stok Tidak Tersedia' };
     } else {
-      item['g:custom_label_1'] = { '#text': 'Stok Tersedia' }
+      item['g:custom_label_1'] = { '#text': 'Stok Tersedia' };
     }
 
     if (categoryName) {
-      item['g:custom_label_2'] = { '#text': categoryName }
+      item['g:custom_label_2'] = { '#text': categoryName };
     }
 
     if (product.lowestPrice.discountPercentage > 0) {
       item['g:sale_price'] = {
-        '#text': `${Math.round(product.lowestPrice.priceDiscount * 1.11)} IDR`
-      }
+        '#text': `${Math.round(product.lowestPrice.priceDiscount * 1.11)} IDR`,
+      };
     }
-    productItems.push(item)
+    productItems.push(item);
   }
 
   const googleMerchant = {
@@ -99,28 +107,32 @@ export async function getServerSideProps({ res, query }) {
         title: { '#text': `<![CDATA[${titleContent}]]>` },
         link: { '#text': process.env.SELF_HOST },
         description: { '#text': `<![CDATA[${descriptionContent}]]>` },
-        item: productItems
-      }
-    }
-  }
+        item: productItems,
+      },
+    },
+  };
 
-  res.setHeader('Content-Type', 'text/xml;charset=iso-8859-1')
-  res.write(create(googleMerchant).end())
-  res.end()
+  res.setHeader('Content-Type', 'text/xml;charset=iso-8859-1');
+  res.write(create(googleMerchant).end());
+  res.end();
 
-  return { props: {} }
+  return { props: {} };
 }
 
 const getBrandById = async (id) => {
-  const brand = await axios(`${process.env.SOLR_HOST}/solr/brands/select?q=id:${id}`)
-  return brand.data.response.docs[0] ?? null
-}
+  const brand = await axios(
+    `${process.env.SOLR_HOST}/solr/brands/select?q=id:${id}`
+  );
+  return brand.data.response.docs[0] ?? null;
+};
 
 const getCategoryById = async (id) => {
-  const category = await axios(`${process.env.SOLR_HOST}/solr/categories/select?q=id:${id}`)
-  return category.data.response.docs[0] ?? null
-}
+  const category = await axios(
+    `${process.env.SOLR_HOST}/solr/categories/select?q=id:${id}`
+  );
+  return category.data.response.docs[0] ?? null;
+};
 
 export default function GoogleMerchantPage() {
-  return null
+  return null;
 }
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 65d953d2..8af963fb 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,15 +1,18 @@
 import dynamic from 'next/dynamic';
-import MobileView from '@/core/components/views/MobileView';
-import DesktopView from '@/core/components/views/DesktopView';
 import { useRef } from 'react';
-import Seo from '@/core/components/Seo';
-import DelayRender from '@/core/components/elements/DelayRender/DelayRender';
+
 import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton';
 import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton';
-import PromotinProgram from '@/lib/promotinProgram/components/HomePage';
-import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBrandSkeleton';
+import Seo from '@/core/components/Seo';
+import DelayRender from '@/core/components/elements/DelayRender/DelayRender';
+import DesktopView from '@/core/components/views/DesktopView';
+import MobileView from '@/core/components/views/MobileView';
 import { FlashSaleSkeleton } from '@/lib/flashSale/skeleton/FlashSaleSkeleton';
+import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBrandSkeleton';
+import PromotinProgram from '@/lib/promotinProgram/components/HomePage';
 import PagePopupIformation from '~/modules/popup-information';
+import useProductDetail from '~/modules/product-detail/stores/useProductDetail';
+import { getAuth } from '~/libs/auth';
 
 const BasicLayout = dynamic(() =>
   import('@/core/components/layouts/BasicLayout')
@@ -40,6 +43,11 @@ const FlashSale = dynamic(
     loading: () => <FlashSaleSkeleton />,
   }
 );
+
+const ProgramPromotion = dynamic(() =>
+  import('@/lib/home/components/PromotionProgram')
+);
+
 const BannerSection = dynamic(() =>
   import('@/lib/home/components/BannerSection')
 );
@@ -55,6 +63,8 @@ export default function Home() {
   const bannerRef = useRef(null);
   const wrapperRef = useRef(null);
 
+  const auth = getAuth();
+
   const handleOnLoad = () => {
     wrapperRef.current.style.height =
       bannerRef.current?.querySelector(':first-child')?.clientHeight + 'px';
@@ -74,8 +84,9 @@ export default function Home() {
         ]}
       />
 
+      <PagePopupIformation />
+
       <DesktopView>
-        <PagePopupIformation />
         <div className='container mx-auto'>
           <div
             className='flex min-h-[400px] h-[460px]'
@@ -95,10 +106,16 @@ export default function Home() {
             </div>
           </div>
 
-          <div className='my-16 flex flex-col gap-y-16'>
+          <div className='my-16 flex flex-col gap-y-8'>
             <ServiceList />
-            <PreferredBrand />
-            <FlashSale />
+            <div id='flashsale'>
+              <PreferredBrand />
+            </div>
+            {!auth?.feature?.soApproval && (
+              <>
+                <ProgramPromotion /> <FlashSale />
+              </>
+            )}
             <PromotinProgram />
             <CategoryHomeId />
             <BannerSection />
@@ -108,7 +125,6 @@ export default function Home() {
       </DesktopView>
 
       <MobileView>
-        <PagePopupIformation />
         <DelayRender renderAfter={200}>
           <HeroBanner />
         </DelayRender>
@@ -117,11 +133,20 @@ export default function Home() {
             <ServiceList />
           </DelayRender>
           <DelayRender renderAfter={400}>
-            <PreferredBrand />
-          </DelayRender>
-          <DelayRender renderAfter={600}>
-            <FlashSale />
+            <div id='flashsale'>
+              <PreferredBrand />
+            </div>
           </DelayRender>
+          {!auth?.feature?.soApproval && (
+            <>
+              <DelayRender renderAfter={400}>
+                <ProgramPromotion />
+              </DelayRender>
+              <DelayRender renderAfter={600}>
+                <FlashSale />
+              </DelayRender>
+            </>
+          )}
           <DelayRender renderAfter={600}>
             <PromotinProgram />
           </DelayRender>
diff --git a/src/pages/my/recomendation/api/recomendation.js b/src/pages/my/recomendation/api/recomendation.js
new file mode 100644
index 00000000..8ff760d0
--- /dev/null
+++ b/src/pages/my/recomendation/api/recomendation.js
@@ -0,0 +1,17 @@
+import axios from 'axios';
+import { useQuery } from 'react-query';
+
+const GenerateRecomendations = ({ query }) => {
+  const queryString = _.toQuery(query);
+  const GenerateRecomendationProducts = async () =>
+    await axios(
+      `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/recomendation?${queryString}`
+    );
+  const productSearch = useQuery(
+    `generateRecomendation-${ququeryStringery}`,
+    GenerateRecomendationProducts
+  );
+
+  return productSearch;
+};
+export default GenerateRecomendations;
diff --git a/src/pages/my/recomendation/components/products-recomendatison.jsx b/src/pages/my/recomendation/components/products-recomendatison.jsx
new file mode 100644
index 00000000..d39d2a99
--- /dev/null
+++ b/src/pages/my/recomendation/components/products-recomendatison.jsx
@@ -0,0 +1,477 @@
+import Menu from '@/lib/auth/components/Menu';
+import { useEffect, useState } from 'react';
+import * as XLSX from 'xlsx';
+import GenerateRecomendations from '../api/recomendation';
+import axios from 'axios';
+import { Button, Link } from '@chakra-ui/react';
+import Image from 'next/image';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import formatCurrency from '~/libs/formatCurrency';
+
+const exportToExcel = (data) => {
+  const worksheet = XLSX.utils.json_to_sheet(data);
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, 'Results');
+
+  // Generate Excel file and trigger download in the browser
+  XLSX.writeFile(workbook, 'ProductRecommendations.xlsx');
+};
+
+const ProductsRecomendation = ({ id }) => {
+  const [excelData, setExcelData] = useState(null);
+  const [products, setProducts] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [variantsOpen, setVariantsOpen] = useState([]);
+  const [otherRec, setOtherRec] = useState(false);
+
+  const mappingProducts = async ({ index, product, result, variants }) => {
+    const resultMapping = {
+      index: index,
+      product: product,
+      result: {
+        id: result?.id || '-',
+        name: result?.nameS || '-',
+        code: result?.defaultCodeS || '-',
+      },
+    };
+
+    return resultMapping;
+  };
+
+  const searchRecomendation = async ({ product, index, operator = 'AND' }) => {
+    let variants = [];
+    let resultMapping = {};
+    const searchProduct = await axios.post(
+      `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/generate-recomendation?q=${product}&op=${operator}`
+    );
+
+    if (operator === 'AND') {
+      const result =
+        searchProduct.data.response.numFound > 0
+          ? searchProduct.data.response.products[0]
+          : null;
+
+      if (result?.variantTotal > 1) {
+        const searchVariants = await axios.post(
+          `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/product-detail?id=${result.id}`
+        );
+        variants = searchVariants.data[0].variants;
+      }
+
+      resultMapping = await mappingProducts({
+        index,
+        product,
+        result,
+        variants,
+      });
+    } else {
+      const result =
+        searchProduct.data.response.numFound > 0
+          ? searchProduct.data.response.products
+          : null;
+
+      result.map((item) => {
+        if (item.variantTotal > 1) {
+          const searchVariants = axios.post(
+            `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/product-detail?id=${item.id}`
+          );
+          variants = searchVariants.data[0].variants;
+        }
+      });
+
+      console.log('ini result', searchProduct.data.response);
+    }
+
+    return resultMapping;
+  };
+
+  const handleSubmit = async (e) => {
+    setIsLoading(true);
+    e.preventDefault();
+    if (excelData) {
+      const results = await Promise.all(
+        excelData.map(async (row, i) => {
+          const index = i + 1;
+          const product = row['product'];
+          return await generateProductRecomendation({ product, index });
+        })
+      );
+
+      const formattedResults = results.map((result) => {
+        const formattedResult = { product: result.product };
+        for (let i = 0; i <= 5; i++) {
+          formattedResult[`recomendation product ${i + 1} - code`] = result.result[i] == null ? '-' :  result.result[i]?.code;
+          formattedResult[`recomendation product ${i + 1} - name`] = result.result[i] == null ? '-' : result.result[i]?.name ;
+        }
+        return formattedResult;
+      });
+
+      exportToExcel(formattedResults);
+      setProducts(results);
+      setIsLoading(false);
+    } else {
+      setIsLoading(false);
+      console.log('No excel data available');
+    }
+  };
+
+  const handleFileChange = (e) => {
+    setIsLoading(true);
+    const file = e.target.files[0];
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const data = new Uint8Array(event.target.result);
+      const workbook = XLSX.read(data, { type: 'array' });
+
+      const firstSheetName = workbook.SheetNames[0];
+      const worksheet = workbook.Sheets[firstSheetName];
+      const jsonData = XLSX.utils.sheet_to_json(worksheet);
+
+      setExcelData(jsonData);
+      console.log('ini json data', jsonData);
+
+      setIsLoading(false);
+    };
+    reader.readAsArrayBuffer(file);
+  };
+
+  const handleVariantsOpen = ({ variants }) => {
+    setVariantsOpen(variants);
+    setIsOpen(true);
+  };
+  const hadnliChooseVariants = ({ id, variant }) => {
+    let foundIndex = products.findIndex((item) => item.result.id === id);
+    if (foundIndex !== -1) {
+      products[foundIndex].result.code = variant?.code;
+      products[foundIndex].result.name = variant?.name;
+    } else {
+      console.log('Data not found.');
+    }
+    setIsOpen(false);
+  };
+
+  const handlingOtherRec = ({ product }) => {
+    console.log('ini product', product);
+    const result = async () =>
+      await searchRecomendation({ product, index: 0, operator: 'OR' });
+
+    result();
+  };
+
+  const generateProductRecomendation = async ({ product, index }) => {
+    let variants = [];
+    let resultMapping = {};
+    const searchProduct = await axios.post(
+      `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/generate-recomendation?q=${product}&op=AND`
+    );
+    const searchProductOR = await axios.post(
+      `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/generate-recomendation?q=${product}&op=OR`
+    );
+    const resultAND =
+      searchProduct.data.response.numFound > 0
+        ? searchProduct.data.response.docs[0]
+        : null; // hasil satu
+    const resultOR =
+      searchProductOR.data.response.numFound > 0
+        ? searchProductOR.data.response.docs
+        : []; // hasil 5
+
+    resultMapping = {
+      index: index,
+      product: product,
+      result: {},
+    };
+
+    // Add resultAND to resultMapping if it exists
+    resultMapping.result[0] = resultAND
+      ? {
+          id: resultAND?.id || '-',
+          name: resultAND?.nameS || '-',
+          code: resultAND?.defaultCodeS || '-',
+        }
+      : null;
+
+    // Add resultOR to resultMapping
+    if (resultOR.length > 0) {
+      resultOR.forEach((item, idx) => {
+        resultMapping.result[idx + 1] = {
+          id: item?.id || '-',
+          name: item?.nameS || '-',
+          code: item?.defaultCodeS || '-',
+        };
+      });
+    } else {
+      for (let i = 0; i <= 5; i++) {
+        resultMapping.result[i + 1] = null;
+      }
+    }
+    return resultMapping;
+  };
+  return (
+    <>
+      <BottomPopup
+        active={isOpen}
+        close={() => setIsOpen(false)}
+        className='w-full md:!w-[60%]'
+        title='List Variants'
+      >
+        <div className='container'>
+          <table className='table-data'>
+            <thead>
+              <tr>
+                <th>Part Number</th>
+                <th>Variants </th>
+                <th>Harga </th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {variantsOpen?.map((variant, index) => (
+                <tr key={index}>
+                  <td>{variant.code}</td>
+                  <td>{variant.attributes.join(', ') || '-'}</td>
+                  <td>
+                    {variant.price.discountPercentage > 0 && (
+                      <div className='flex items-center gap-x-1'>
+                        <div className={style['disc-badge']}>
+                          {Math.floor(variant.price.discountPercentage)}%
+                        </div>
+                        <div className={style['disc-price']}>
+                          Rp {formatCurrency(variant.price.price)}
+                        </div>
+                      </div>
+                    )}
+                    {variant.price.priceDiscount > 0 &&
+                      `Rp ${formatCurrency(variant.price.priceDiscount)}`}
+                    {variant.price.priceDiscount === 0 && '-'}
+                  </td>
+                  <td>
+                    <Button
+                      size='sm'
+                      w='100%'
+                      onClick={() =>
+                        hadnliChooseVariants({
+                          id: variant.parent.id,
+                          variant: variant,
+                        })
+                      }
+                    >
+                      Pilih
+                    </Button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </BottomPopup>
+      <BottomPopup
+        active={otherRec}
+        close={() => setOtherRec(false)}
+        className='w-full md:!w-[60%]'
+        title='Other Recomendations'
+      >
+        <div className='container'>
+          <table className='table-data'>
+            <thead>
+              <tr>
+                <th>Product</th>
+                <th>Item Code </th>
+                <th>Description</th>
+                <th>Brand</th>
+                <th>Price</th>
+                <th>Image</th>
+              </tr>
+            </thead>
+            <tbody>
+              {variantsOpen?.map((variant, index) => (
+                <tr key={index}>
+                  <td>{variant.code}</td>
+                  <td>{variant.attributes.join(', ') || '-'}</td>
+                  <td>
+                    {variant.price.discountPercentage > 0 && (
+                      <div className='flex items-center gap-x-1'>
+                        <div className={style['disc-badge']}>
+                          {Math.floor(variant.price.discountPercentage)}%
+                        </div>
+                        <div className={style['disc-price']}>
+                          Rp {formatCurrency(variant.price.price)}
+                        </div>
+                      </div>
+                    )}
+                    {variant.price.priceDiscount > 0 &&
+                      `Rp ${formatCurrency(variant.price.priceDiscount)}`}
+                    {variant.price.priceDiscount === 0 && '-'}
+                  </td>
+                  <td>
+                    <Button
+                      size='sm'
+                      w='100%'
+                      onClick={() =>
+                        hadnliChooseVariants({
+                          id: variant.parent.id,
+                          variant: variant,
+                        })
+                      }
+                    >
+                      Pilih
+                    </Button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </BottomPopup>
+      <div className='container mx-auto flex py-10'>
+        <div className='w-3/12 pr-4'>
+          <Menu />
+        </div>
+        <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+          <div className='flex mb-6 items-center justify-between'>
+            <h1 className='text-title-sm font-semibold'>
+              Generate Recomendation
+            </h1>
+          </div>
+          <div className='group'>
+            <h1 className='text-sm  font-semibold'>Contoh Excel</h1>
+            <table className='table-data'>
+              <thead>
+                <tr>
+                  <th>Product</th>
+                  <th>Qty</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Tekiro Long Nose Pliers Tang Lancip</td>
+                  <td>10</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div className='container mx-auto mt-8'>
+            <div className='mb-4'>
+              <label htmlFor='excelFile' className='text-sm  font-semibold'>
+                Upload Excel File (.xlsx)
+              </label>
+              <input
+                type='file'
+                id='excelFile'
+                accept='.xlsx'
+                onChange={handleFileChange}
+                className='mt-1 p-2 block w-full border border-gray-300 rounded-md focus:outline-none focus:border-blue-500'
+              />
+            </div>
+            <Button
+              colorScheme='red'
+              w='l'
+              isDisabled={isLoading}
+              onClick={handleSubmit}
+            >
+              Generate
+            </Button>
+          </div>
+          {/* <div className='grup mt-8'>
+            {products && products.length > 0 && (
+              <div className='group'>
+                <table className='table-data'>
+                  <thead>
+                    <tr>
+                      <th>Product</th>
+                      <th>Item Code </th>
+                      <th>Description</th>
+                      <th>Brand</th>
+                      <th>Price</th>
+                      <th>Image</th>
+                      <th>lainnya</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {products.map((product, index) => (
+                      <tr key={index}>
+                        <td>{product?.product}</td>
+                        <td>
+                          {product?.result?.code === '-' &&
+                            product.result.variantTotal > 1 && (
+                              <Button
+                                border='2px'
+                                borderColor='yellow.300'
+                                size='sm'
+                                onClick={() =>
+                                  handleVariantsOpen({
+                                    variants: product?.result?.variants,
+                                  })
+                                }
+                              >
+                                Lihat Variants
+                              </Button>
+                            )}
+                          {product?.result.code !== '-' &&
+                          product?.result.variantTotal > 1 ? (
+                            <>
+                              {product?.result.code}
+                              <Button
+                                variant='link'
+                                colorScheme='yellow'
+                                size='sm'
+                                onClick={() =>
+                                  handleVariantsOpen({
+                                    variants: product?.result?.variants,
+                                  })
+                                }
+                              >
+                                Variants lainya
+                              </Button>
+                            </>
+                          ) : (
+                            <>{product?.result.code}</>
+                          )}
+                        </td>
+                        <td>{product?.result.name}</td>
+                        <td>{product?.result.manufacture}</td>
+                        <td>
+                          {product?.result.price !== '-'
+                            ? `Rp ${formatCurrency(product?.result.price)}`
+                            : '-'}
+                        </td>
+                        <td>
+                          {product?.result.image !== '-' ? (
+                            <Image
+                              src={product?.result.image}
+                              width={100}
+                              height={100}
+                              alt={product?.result.name}
+                            />
+                          ) : (
+                            '-'
+                          )}
+                        </td>
+                        <td>
+                          {' '}
+                          <Button
+                            border='2px'
+                            borderColor='red.500'
+                            size='sm'
+                            onClick={() =>
+                              handlingOtherRec({ product: product.product })
+                            }
+                          >
+                            Other
+                          </Button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div> */}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ProductsRecomendation;
diff --git a/src/pages/my/recomendation/index.jsx b/src/pages/my/recomendation/index.jsx
new file mode 100644
index 00000000..684b30c2
--- /dev/null
+++ b/src/pages/my/recomendation/index.jsx
@@ -0,0 +1,26 @@
+import DesktopView from '@/core/components/views/DesktopView';
+import MobileView from '@/core/components/views/MobileView';
+import IsAuth from '../../../lib/auth/components/IsAuth';
+import AppLayout from '@/core/components/layouts/AppLayout';
+import BasicLayout from '@/core/components/layouts/BasicLayout';
+import dynamic from 'next/dynamic';
+import Seo from '@/core/components/Seo'
+
+const ProductsRecomendation = dynamic(() => import('./components/products-recomendatison'))
+export default function MyRecomendation() {
+  return (
+    <IsAuth>
+      
+      <Seo title='Dashboard Rekomendasi - Indoteknik.com' />
+
+      <MobileView>
+        <AppLayout></AppLayout>
+      </MobileView>
+      <DesktopView>
+        <BasicLayout>
+            <ProductsRecomendation />
+        </BasicLayout>
+      </DesktopView>
+    </IsAuth>
+  );
+}
diff --git a/src/pages/shop/cart.jsx b/src/pages/shop/cart.jsx
index 2da58c96..7475b23d 100644
--- a/src/pages/shop/cart.jsx
+++ b/src/pages/shop/cart.jsx
@@ -1,14 +1,14 @@
-import Seo from '@/core/components/Seo'
-import BasicLayout from '@/core/components/layouts/BasicLayout'
-import DesktopView from '@/core/components/views/DesktopView'
-import MobileView from '@/core/components/views/MobileView'
-import IsAuth from '@/lib/auth/components/IsAuth'
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react'
-import dynamic from 'next/dynamic'
-import Link from 'next/link'
+import Seo from '@/core/components/Seo';
+import BasicLayout from '@/core/components/layouts/BasicLayout';
+import DesktopView from '@/core/components/views/DesktopView';
+import MobileView from '@/core/components/views/MobileView';
+import IsAuth from '@/lib/auth/components/IsAuth';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react';
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
 
-const AppLayout = dynamic(() => import('@/core/components/layouts/AppLayout'))
-const CartComponent = dynamic(() => import('@/lib/cart/components/Cart'))
+const AppLayout = dynamic(() => import('@/core/components/layouts/AppLayout'));
+const CartDetail = dynamic(() => import('~/pages/shop/cart'));
 
 export default function Cart() {
   return (
@@ -18,7 +18,9 @@ export default function Cart() {
       <IsAuth>
         <MobileView>
           <AppLayout title='Keranjang' withFooter={false}>
-            <CartComponent />
+            <div className='p-4'>
+              <CartDetail />
+            </div>
           </AppLayout>
         </MobileView>
 
@@ -27,20 +29,29 @@ export default function Cart() {
             <div className='container mx-auto py-4 md:py-6 pb-0'>
               <Breadcrumb>
                 <BreadcrumbItem>
-                  <BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'>
+                  <BreadcrumbLink
+                    as={Link}
+                    href='/'
+                    className='!text-danger-500 whitespace-nowrap'
+                  >
                     Home
                   </BreadcrumbLink>
                 </BreadcrumbItem>
 
                 <BreadcrumbItem isCurrentPage>
-                  <BreadcrumbLink className='whitespace-nowrap'>Keranjang</BreadcrumbLink>
+                  <BreadcrumbLink className='whitespace-nowrap'>
+                    Keranjang
+                  </BreadcrumbLink>
                 </BreadcrumbItem>
               </Breadcrumb>
+
+              <div className='h-10' />
+
+              <CartDetail />
             </div>
-            <CartComponent />
           </BasicLayout>
         </DesktopView>
       </IsAuth>
     </>
-  )
+  );
 }
diff --git a/src/pages/shop/category/[slug].jsx b/src/pages/shop/category/[slug].jsx
index 6d3985a8..1afe30bf 100644
--- a/src/pages/shop/category/[slug].jsx
+++ b/src/pages/shop/category/[slug].jsx
@@ -1,25 +1,31 @@
-import dynamic from 'next/dynamic'
-import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug'
-import { useRouter } from 'next/router'
-import _ from 'lodash'
-import Seo from '@/core/components/Seo'
-import Breadcrumb from '@/lib/category/components/Breadcrumb'
+import _ from 'lodash';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
 
-const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
-const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch'))
+import Seo from '@/core/components/Seo';
+import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug';
+import Breadcrumb from '@/lib/category/components/Breadcrumb';
+
+const BasicLayout = dynamic(() =>
+  import('@/core/components/layouts/BasicLayout')
+);
+const ProductSearch = dynamic(() =>
+  import('@/lib/product/components/ProductSearch')
+);
 
 export default function CategoryDetail() {
-  const router = useRouter()
-  const { slug = '' } = router.query
+  const router = useRouter();
+  const { slug = '', page = 1 } = router.query;
 
-  const categoryName = getNameFromSlug(slug)
-  const categoryId = getIdFromSlug(slug)
-  const q = router?.query.q || null
+  const categoryName = getNameFromSlug(slug);
+  const categoryId = getIdFromSlug(slug);
+  const q = router?.query.q || null;
   const query = {
-    fq: `category_id_i:${categoryId}`
-  }
+    fq: `category_id_i:${categoryId}`,
+    page,
+  };
   if (q) {
-    query.q = q
+    query.q = q;
   }
 
   return (
@@ -30,8 +36,8 @@ export default function CategoryDetail() {
         additionalMetaTags={[
           {
             property: 'keywords',
-            content: `Jual ${categoryName}, harga ${categoryName}, ${categoryName} murah, toko ${categoryName}, ${categoryName} jakarta, ${categoryName} surabaya`
-          }
+            content: `Jual ${categoryName}, harga ${categoryName}, ${categoryName} murah, toko ${categoryName}, ${categoryName} jakarta, ${categoryName} surabaya`,
+          },
         ]}
       />
 
@@ -41,5 +47,5 @@ export default function CategoryDetail() {
         <ProductSearch query={query} prefixUrl={`/shop/category/${slug}`} />
       )}
     </BasicLayout>
-  )
+  );
 }
diff --git a/src/pages/shop/product/[slug].jsx b/src/pages/shop/product/[slug].jsx
index d8366d3c..73e8987c 100644
--- a/src/pages/shop/product/[slug].jsx
+++ b/src/pages/shop/product/[slug].jsx
@@ -1,110 +1,6 @@
-import Seo from '@/core/components/Seo'
-import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
-import { getIdFromSlug } from '@/core/utils/slug'
-import productApi from '@/lib/product/api/productApi'
-import PageNotFound from '@/pages/404'
-import dynamic from 'next/dynamic'
-import { useRouter } from 'next/router'
-import cookie from 'cookie'
-import axios from 'axios'
-import { useProductContext } from '@/contexts/ProductContext'
-import { useEffect } from 'react'
-import { updateItemCart } from '@/core/utils/cart'
+import ProductDetailPage, {
+  getServerSideProps,
+} from '~/pages/shop/product/[slug]';
 
-const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
-const Product = dynamic(() => import('@/lib/product/components/Product/Product'))
-
-export async function getServerSideProps(context) {
-  const { slug } = context.query
-  const cookies = context.req.headers.cookie
-  const cookieObj = cookies ? cookie.parse(cookies) : {}
-  const auth = cookieObj.auth ? JSON.parse(cookieObj.auth) : {}
-  const tier = auth.pricelist ? auth.pricelist : false
-  const authToken = auth?.token || ''
-
-  let response = await axios(
-    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/product-detail?id=` +
-      getIdFromSlug(slug) +
-      '&auth=' +
-      tier
-  )
-  let product = response.data
-  // let productSolr = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } })
-  // let productSolr = null
-  if (product?.length == 1) {
-    product = product[0]
-  } else {
-    product = null
-  }
-
-  return {
-    props: { product }
-  }
-}
-
-export default function ProductDetail({ product }) {
-  const router = useRouter()
-  const { setProduct } = useProductContext()
-
-  useEffect(() => {
-    if (product) {
-      setProduct(product)
-    }
-  }, [product, setProduct])
-
-  useEffect(() => {
-    const { action, variantId, qty } = router.query
-    const addToCart = async () => {
-      const data = {
-        productId: variantId,
-        quantity: qty,
-        selected: true,
-        programLineId: null,
-        source: action
-      }
-      console.log('data dr test', data)
-      await updateItemCart(data)
-      const redirectURL = action === 'buy' ? '/shop/checkout?source=buy' : '/shop/cart'
-      router.push(redirectURL)
-    }
-
-    if (action && variantId && qty) {
-      addToCart()
-    }
-  }, [router])
-
-  if (!product) return <PageNotFound />
-
-  return (
-    <BasicLayout>
-      <Seo
-        title={product?.name || '' + ' - Indoteknik.com' || ''}
-        description='Temukan pilihan produk B2B Industri &amp; Alat Teknik untuk Perusahaan, UMKM &amp; Pemerintah dengan lengkap, mudah dan transparan.'
-        openGraph={{
-          url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath,
-          images: [
-            {
-              url: product?.image,
-              width: 800,
-              height: 800,
-              alt: product?.name
-            }
-          ],
-          type: 'product'
-        }}
-        additionalMetaTags={[
-          {
-            name: 'keywords',
-            content: `${product?.name}, Harga ${product?.name}, Beli ${product?.name}, Spesifikasi ${product?.name}`
-          }
-        ]}
-      />
-      {!product && (
-        <div className='container mx-auto flex justify-center pt-10'>
-          <LogoSpinner width={36} height={36} />
-        </div>
-      )}
-      {product && <Product product={product} />}
-    </BasicLayout>
-  )
-}
+export { getServerSideProps };
+export default ProductDetailPage;
diff --git a/src/pages/shop/product/variant/[slug].jsx b/src/pages/shop/product/variant/[slug].jsx
index 401bce82..cb335e0a 100644
--- a/src/pages/shop/product/variant/[slug].jsx
+++ b/src/pages/shop/product/variant/[slug].jsx
@@ -1,37 +1,41 @@
-import Seo from '@/core/components/Seo'
-import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
-import { getIdFromSlug } from '@/core/utils/slug'
-import PageNotFound from '@/pages/404'
-import dynamic from 'next/dynamic'
-import { useRouter } from 'next/router'
-import cookie from 'cookie'
-import variantApi from '@/lib/product/api/variantApi'
-import axios from 'axios'
-import { useProductContext } from '@/contexts/ProductContext'
-import { useEffect } from 'react'
+import axios from 'axios';
+import cookie from 'cookie';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 
-const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
-const Product = dynamic(() => import('@/lib/product/components/Product/Product'))
+import { useProductContext } from '@/contexts/ProductContext';
+import Seo from '@/core/components/Seo';
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner';
+import { getIdFromSlug } from '@/core/utils/slug';
+import PageNotFound from '@/pages/404';
+
+const BasicLayout = dynamic(() =>
+  import('@/core/components/layouts/BasicLayout')
+);
+const Product = dynamic(() =>
+  import('@/lib/product/components/Product/Product')
+);
 
 export async function getServerSideProps(context) {
-  const { slug } = context.query
-  const cookies = context.req.headers.cookie
-  const cookieObj = cookies ? cookie.parse(cookies) : {}
-  const auth = cookieObj.auth ? JSON.parse(cookieObj.auth) : {}
-  const tier = auth.pricelist ? auth.pricelist : false
-  const authToken = auth?.token || ''
+  const { slug } = context.query;
+  const cookies = context.req.headers.cookie;
+  const cookieObj = cookies ? cookie.parse(cookies) : {};
+  const auth = cookieObj.auth ? JSON.parse(cookieObj.auth) : {};
+  const tier = auth.pricelist ? auth.pricelist : false;
+  const authToken = auth?.token || '';
 
   let response = await axios(
     `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/variant-detail?id=` +
       getIdFromSlug(slug) +
       '&auth=' +
       tier
-  )
-  let product = response.data
+  );
+  let product = response.data;
   // let product = await variantApi({ id: getIdFromSlug(slug), headers: { Token: authToken } })
 
   if (product?.length == 1) {
-    product = product[0]
+    product = product[0];
     /* const regexHtmlTags = /(<([^>]+)>)/gi
     const regexHtmlTagsExceptP = /<\/?(?!p\b)[^>]*>/g
     product.description = product.description
@@ -39,26 +43,26 @@ export async function getServerSideProps(context) {
       .replace(regexHtmlTags, ' ')
       .trim()*/
   } else {
-    product = null
+    product = null;
   }
 
   return {
-    props: { product }
-  }
+    props: { product },
+  };
 }
 
 export default function ProductDetail({ product }) {
-  const router = useRouter()
+  const router = useRouter();
 
-  const { setProduct } = useProductContext()
+  const { setProduct } = useProductContext();
 
   useEffect(() => {
     if (product) {
-      setProduct(product)
+      setProduct(product);
     }
-  }, [product, setProduct])
+  }, [product, setProduct]);
 
-  if (!product) return <PageNotFound />
+  if (!product) return <PageNotFound />;
 
   return (
     <BasicLayout>
@@ -72,16 +76,16 @@ export default function ProductDetail({ product }) {
               url: product?.image,
               width: 800,
               height: 800,
-              alt: product?.name
-            }
+              alt: product?.name,
+            },
           ],
-          type: 'product'
+          type: 'product',
         }}
         additionalMetaTags={[
           {
             name: 'keywords',
-            content: `${product?.name}, Harga ${product?.name}, Beli ${product?.name}, Spesifikasi ${product?.name}`
-          }
+            content: `${product?.name}, Harga ${product?.name}, Beli ${product?.name}, Spesifikasi ${product?.name}`,
+          },
         ]}
       />
       {!product && (
@@ -91,5 +95,5 @@ export default function ProductDetail({ product }) {
       )}
       {product && <Product product={product} isVariant={true} />}
     </BasicLayout>
-  )
+  );
 }
diff --git a/src/pages/shop/promo/[slug].tsx b/src/pages/shop/promo/[slug].tsx
new file mode 100644
index 00000000..bd69c071
--- /dev/null
+++ b/src/pages/shop/promo/[slug].tsx
@@ -0,0 +1,523 @@
+import dynamic from 'next/dynamic'
+import NextImage from 'next/image';
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import Seo from '../../../core/components/Seo'
+import Promocrumb from '../../../lib/promo/components/Promocrumb'
+import { fetchPromoItemsSolr, fetchVariantSolr } from '../../../api/promoApi'
+import LogoSpinner from '../../../core/components/elements/Spinner/LogoSpinner.jsx'
+import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card'
+import { IPromotion } from '../../../../src-migrate/types/promotion'
+import React from 'react'
+import { SolrResponse } from "../../../../src-migrate/types/solr.ts";
+import DesktopView from '../../../core/components/views/DesktopView';
+import MobileView from '../../../core/components/views/MobileView';
+import 'swiper/swiper-bundle.css';
+import useDevice from '../../../core/hooks/useDevice'
+import ProductFilterDesktop from '../../../lib/product/components/ProductFilterDesktopPromotion';
+import ProductFilter from '../../../lib/product/components/ProductFilter';
+import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react';
+import { formatCurrency } from '../../../core/utils/formatValue';
+import Pagination from '../../../core/components/elements/Pagination/Pagination';
+import SideBanner from '../../../../src-migrate/modules/side-banner';
+import whatsappUrl from '../../../core/utils/whatsappUrl';
+import { cons, toQuery } from 'lodash-contrib';
+import _ from 'lodash';
+import useActive from '../../../core/hooks/useActive';
+
+const BasicLayout = dynamic(() => import('../../../core/components/layouts/BasicLayout'))
+
+export default function PromoDetail() {
+  const router = useRouter()
+  const { slug = '', brand ='', category='', priceFrom = '', priceTo = '', page = '1' } = router.query
+  const [promoItems, setPromoItems] = useState<any[]>([])
+  const [promoData, setPromoData] = useState<IPromotion[] | null>(null)
+  const [currentPage, setCurrentPage] = useState(parseInt(page as string, 10) || 1);
+  const itemsPerPage = 12; // Jumlah item yang ingin ditampilkan per halaman
+  const [loading, setLoading] = useState(true);
+  const { isMobile, isDesktop } = useDevice()
+  const [brands, setBrands] = useState<Brand[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [brandValues, setBrandValues] = useState<string[]>([]);
+  const [categoryValues, setCategoryValues] = useState<string[]>([]);
+  const [orderBy, setOrderBy] = useState(router.query?.orderBy || 'popular');
+  const popup = useActive();
+  const prefixUrl = `/shop/promo/${slug}`
+
+  useEffect(() => {
+    if (router.query.brand) {
+      let brandsArray: string[] = [];
+      if (Array.isArray(router.query.brand)) {
+        brandsArray = router.query.brand;
+      } else if (typeof router.query.brand === 'string') {
+        brandsArray = router.query.brand.split(',').map((brand) => brand.trim());
+      }
+      setBrandValues(brandsArray);
+    } else {
+      setBrandValues([]);
+    }
+
+    if (router.query.category) {
+      let categoriesArray: string[] = [];
+
+      if (Array.isArray(router.query.category)) {
+        categoriesArray = router.query.category;
+      } else if (typeof router.query.category === 'string') {
+        categoriesArray = router.query.category.split(',').map((category) => category.trim());
+      }
+      setCategoryValues(categoriesArray);
+    } else {
+      setCategoryValues([]);
+    }
+  }, [router.query.brand, router.query.category]);
+
+  interface Brand {
+    brand: string;
+    qty: number;
+  }
+
+  interface Category {
+    name: string;
+    qty: number;
+  }
+
+  useEffect(() => {
+    const loadPromo = async () => {
+      setLoading(true);
+      const brandsData: Brand[] = [];
+      const categoriesData: Category[] = [];
+      
+      const pageNumber = Array.isArray(page) ? parseInt(page[0], 10) : parseInt(page, 10);
+      setCurrentPage(pageNumber)
+      
+      try {
+        const items = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug}`);
+        setPromoItems(items);
+        
+        if (items.length === 0) {
+          setPromoData([])
+          setLoading(false);
+          return;
+          }
+          
+          const brandArray = Array.isArray(brand) ? brand : brand.split(',');
+          const categoryArray = Array.isArray(category) ? category : category.split(',');
+          
+          const promoDataPromises = items.map(async (item) => {
+            
+            try { 
+              let brandQuery = '';
+              if (brand) {
+                brandQuery = brandArray.map(b => `manufacture_name_s:${b}`).join(' OR ');
+                brandQuery = `(${brandQuery})`;
+              }
+  
+              let categoryQuery = '';
+              if (category) {
+                categoryQuery = categoryArray.map(c => `category_name:${c}`).join(' OR ');
+                categoryQuery = `(${categoryQuery})`;
+              }
+  
+              let priceQuery = '';
+              if (priceFrom && priceTo) {
+                priceQuery = `price_f:[${priceFrom} TO ${priceTo}]`;
+              } else if (priceFrom) {
+                priceQuery = `price_f:[${priceFrom} TO *]`;
+              } else if (priceTo) {
+                priceQuery = `price_f:[* TO ${priceTo}]`;
+              }
+  
+              let combinedQuery = '';
+              let combinedQueryPrice = `${priceQuery}`;
+              if (brand && category && priceFrom || priceTo) {
+                combinedQuery = `${brandQuery} AND ${categoryQuery} `;
+              } else if (brand && category) {
+                combinedQuery = `${brandQuery} AND ${categoryQuery}`;
+              } else if (brand && priceFrom || priceTo) {
+                combinedQuery = `${brandQuery}`;
+              } else if (category && priceFrom || priceTo) {
+                combinedQuery = `${categoryQuery}`;
+              } else if (brand) {
+                combinedQuery = brandQuery;
+              } else if (category) {
+                combinedQuery = categoryQuery;
+              }
+  
+              if (combinedQuery && priceFrom || priceTo) {
+                const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`);
+                const product = response.response.docs[0];
+                const product_id = product.id;
+                const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} AND ${combinedQueryPrice}`);  
+                return response2;
+              }else if(combinedQuery){
+                const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`);
+                const product = response.response.docs[0];
+                const product_id = product.id;
+                const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} `); 
+                return response2;
+              } else {
+                const response = await fetchPromoItemsSolr(`id:${item.id}`);
+                return response;
+              }
+            } catch (fetchError) {
+              return [];
+            }
+          });
+
+        const promoDataArray = await Promise.all(promoDataPromises);
+        const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+        setPromoData(mergedPromoData);
+
+        const dataBrandCategoryPromises = promoDataArray.map(async (promoData) => {
+          if (promoData) {
+            const dataBrandCategory = promoData.map(async (item) => {
+              let response;
+              if(category){
+                const categoryQuery = categoryArray.map(c => `category_name:${c}`).join(' OR ');
+                response = await fetchVariantSolr(`id:${item.products[0].product_id} AND (${categoryQuery})`);
+              }else{
+                response = await fetchVariantSolr(`id:${item.products[0].product_id}`)    
+              }
+              
+
+              if (response.response?.docs?.length > 0) {
+                const product = response.response.docs[0];
+                const manufactureNameS = product.manufacture_name;
+                if (Array.isArray(manufactureNameS)) {
+                  for (let i = 0; i < manufactureNameS.length; i += 2) {
+                    const brand = manufactureNameS[i];
+                    const qty = 1;
+                    const existingBrandIndex = brandsData.findIndex(b => b.brand === brand);
+                    if (existingBrandIndex !== -1) {
+                      brandsData[existingBrandIndex].qty += qty;
+                    } else {
+                      brandsData.push({ brand, qty });
+                    }
+                  }
+                }
+
+                const categoryNameS = product.category_name;
+                if (Array.isArray(categoryNameS)) {
+                  for (let i = 0; i < categoryNameS.length; i += 2) {
+                    const name = categoryNameS[i];
+                    const qty = 1;
+                    const existingCategoryIndex = categoriesData.findIndex(c => c.name === name);
+                    if (existingCategoryIndex !== -1) {
+                      categoriesData[existingCategoryIndex].qty += qty;
+                    } else {
+                      categoriesData.push({ name, qty });
+                    }
+                  }
+                }
+              }
+            });
+
+            return Promise.all(dataBrandCategory);
+          }
+        });
+
+        await Promise.all(dataBrandCategoryPromises);
+        setBrands(brandsData);
+        setCategories(categoriesData);
+        setLoading(false);
+
+      } catch (loadError) {
+        // console.error("Error loading promo items:", loadError)
+        setLoading(false);
+      }
+    }
+
+    if (slug) {
+      loadPromo()
+    }
+  },[slug, brand, category, priceFrom, priceTo, currentPage]);
+
+
+  function capitalizeFirstLetter(string) {
+    string = string.replace(/_/g, ' ');
+    return string.replace(/(^\w|\s\w)/g, function(match) {
+        return match.toUpperCase();
+    });
+  }
+
+  const handleDeleteFilter = async (source, value) => {
+    let params = {
+      q: router.query.q,
+      orderBy: '',
+      brand: brandValues.join(','),
+      category: categoryValues.join(','),
+      priceFrom: priceFrom || '',
+      priceTo: priceTo || '',
+    };
+
+    let brands = brandValues;
+    let catagories = categoryValues;
+    switch (source) {
+      case 'brands':
+        brands = brandValues.filter((item) => item !== value);
+        params.brand = brands.join(',');
+        await setBrandValues(brands);
+        break;
+      case 'category':
+        catagories = categoryValues.filter((item) => item !== value);
+        params.category = catagories.join(',');
+        await setCategoryValues(catagories);
+        break;
+      case 'price':
+        params.priceFrom = '';
+      params.priceTo = '';    
+      break;
+      case 'delete':
+        params = {
+          q: router.query.q,
+          orderBy: '',
+          brand: '',
+          category: '',
+          priceFrom: '',
+          priceTo: '',
+        };
+        break;
+    }
+
+    handleSubmitFilter(params);
+  };
+  const handleSubmitFilter = (params) => {
+    params = _.pickBy(params, _.identity);
+    params = toQuery(params);
+    router.push(`${slug}?${params}`);
+  };
+ 
+  const visiblePromotions = promoData?.slice( (currentPage-1) * itemsPerPage, currentPage * 12)
+
+  const toQuery = (obj) => {
+    const str = Object.keys(obj)
+      .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
+      .join('&')
+    return str
+  }
+ 
+  const whatPromo = capitalizeFirstLetter(slug)
+  const queryWithoutSlug = _.omit(router.query, ['slug'])
+  const queryString = toQuery(queryWithoutSlug)
+  
+  return (
+    <BasicLayout>
+      <Seo
+        title={`Promo ${Array.isArray(slug) ? slug[0] : slug} Terkini`} 
+        description='B2B Marketplace MRO & Industri dengan Layanan Pembayaran Tempo, Faktur Pajak, Online Quotation, Garansi Resmi & Harga Kompetitif'
+      />
+      <Promocrumb brandName={whatPromo} />
+      <MobileView>
+        <div className='p-4 pt-0'>
+          <h1 className='mb-2 font-semibold text-h-sm'>Promo {whatPromo}</h1>
+      
+            <FilterChoicesComponent
+                  brandValues={brandValues}
+                  categoryValues={categoryValues}
+                  priceFrom={priceFrom}
+                  priceTo={priceTo}
+                  handleDeleteFilter={handleDeleteFilter}
+                />
+            {promoItems.length >= 1 && (
+            <div className='flex items-center gap-x-2 mb-5 justify-between'>
+              <div>
+                <button
+                  className='btn-light py-2 px-5 h-[40px]'
+                  onClick={popup.activate}
+                >
+                  Filter
+                </button>
+              </div>
+            </div>
+          )}
+          
+          {loading ? (
+                <div className='container flex justify-center my-4'>
+                  <LogoSpinner width={48} height={48} />
+                </div>
+              ) : promoData && promoItems.length >= 1 ? (
+                <>
+                <div className='grid grid-cols-1 gap-x-1 gap-y-1'>
+                  {visiblePromotions?.map((promotion) => (
+                    <div key={promotion.id} className="min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4 ">
+                      <ProductPromoCard promotion={promotion}/>
+                    </div>
+                  ))}
+                </div>
+              </>
+              ) : (
+                <div className="text-center my-8">
+                  <p>Belum ada promo pada kategori ini</p>
+                </div>
+              )}  
+
+              <Pagination
+                  pageCount={Math.ceil((promoData?.length ?? 0) / itemsPerPage)}
+                  currentPage={currentPage}
+                  url={`${prefixUrl}?${toQuery(_.omit(queryWithoutSlug, ['page']))}`}
+                  className='mt-6 mb-2'
+                />
+              <ProductFilter
+                active={popup.active}
+                close={popup.deactivate}
+                brands={brands || []}
+                categories={categories || []}
+                prefixUrl={router.asPath.includes('?') ? `${router.asPath}` : `${router.asPath}?`}
+                defaultBrand={null}
+              />
+        </div>
+
+      </MobileView>
+      <DesktopView>
+        <div className='container mx-auto flex mb-3 flex-col'>
+          <div className='w-full pl-6'>
+            <h1 className='text-2xl mb-2 font-semibold'>Promo {whatPromo}</h1>
+              <div className=' w-full h-full flex flex-row items-center '>
+                
+                    <div className='detail-filter w-1/2 flex justify-start items-center  mt-4'>
+
+                  <FilterChoicesComponent
+                    brandValues={brandValues}
+                    categoryValues={categoryValues}
+                    priceFrom={priceFrom}
+                    priceTo={priceTo}
+                    handleDeleteFilter={handleDeleteFilter}
+                  />
+                    </div>
+                    <div className='Filter w-1/2 flex flex-col'>
+
+                    <ProductFilterDesktop
+                          brands={brands || []}
+                          categories={categories || []}  
+                          prefixUrl={'/shop/promo'}
+                          // defaultBrand={null}
+                        />
+                    </div>
+                </div>
+              {loading ? (
+                <div className='container flex justify-center my-4'>
+                  <LogoSpinner width={48} height={48} />
+                </div>
+              ) : promoData && promoItems.length >= 1 ? (
+                <>
+                <div className='grid grid-cols-1 gap-x-6  sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3'>
+                  {visiblePromotions?.map((promotion) => (
+                    <div key={promotion.id} className="min-w-[400px] max-w-[400px]  mb-[20px] sm:min-w-[350px] md:min-w-[380px] lg:min-w-[400px] xl:min-w-[400px] ">
+                      <ProductPromoCard promotion={promotion}/>
+                    </div>
+                  ))}
+                </div>
+              </>
+              ) : (
+                <div className="text-center my-8">
+                  <p>Belum ada promo pada kategori ini</p>
+                </div>
+              )}          
+              <div className='flex justify-between items-center mt-6 mb-2'>
+                <div className='pt-2 pb-6 flex items-center gap-x-3'>
+                  <NextImage
+                    src='/images/logo-question.png'
+                    alt='Logo Question Indoteknik'
+                    width={60}
+                    height={60}
+                  />
+                  <div className='text-gray_r-12/90'>
+                    <span>
+                      Barang yang anda cari tidak ada?{' '}
+                      <a
+                        href={
+                          router.query?.q
+                            ? whatsappUrl('productSearch', {
+                                name: router.query.q,
+                              })
+                            : whatsappUrl()
+                        }
+                        className='text-danger-500'
+                      >
+                        Hubungi Kami
+                      </a>
+                    </span>
+                  </div>
+                </div>
+
+                
+                
+                <Pagination
+                  pageCount={Math.ceil((promoData?.length ?? 0) / itemsPerPage)}
+                  currentPage={currentPage}
+                  url={`${prefixUrl}?${toQuery(_.omit(queryWithoutSlug, ['page']))}`}
+                  className='mt-6 mb-2'
+                />
+              </div>
+
+          </div>
+        </div>
+      </DesktopView>
+    </BasicLayout>
+  )
+  }
+  
+const FilterChoicesComponent = ({
+  brandValues,
+  categoryValues,
+  priceFrom,
+  priceTo,
+  handleDeleteFilter,
+  }) => (
+  <div className='flex items-center mb-4'>
+    <HStack spacing={2} className='flex-wrap'>
+      {brandValues?.map((value, index) => (
+        <Tag
+          size='lg'
+          key={index}
+          borderRadius='lg'
+          variant='outline'
+          colorScheme='gray'
+          >
+          <TagLabel>{value}</TagLabel>
+          <TagCloseButton onClick={() => handleDeleteFilter('brands', value)} />
+        </Tag>
+      ))}
+
+      {categoryValues?.map((value, index) => (
+        <Tag
+          size='lg'
+          key={index}
+          borderRadius='lg'
+          variant='outline'
+          colorScheme='gray'
+          >
+          <TagLabel>{value}</TagLabel>
+          <TagCloseButton
+            onClick={() => handleDeleteFilter('category', value)}
+            />
+        </Tag>
+      ))}
+      {priceFrom && priceTo && (
+        <Tag size='lg' borderRadius='lg' variant='outline' colorScheme='gray'>
+          <TagLabel>
+            {formatCurrency(priceFrom) + '-' + formatCurrency(priceTo)}
+          </TagLabel>
+          <TagCloseButton
+            onClick={() => handleDeleteFilter('price', priceFrom)}
+            />
+        </Tag>
+      )}
+      {brandValues?.length > 0 ||
+      categoryValues?.length > 0 ||
+      priceFrom ||
+      priceTo ? (
+        <span>
+          <button
+            className='btn-transparent py-2 px-5 h-[40px] text-red-700'
+            onClick={() => handleDeleteFilter('delete')}
+            >
+            Hapus Semua
+          </button>
+        </span>
+      ) : (
+        ''
+        )}
+    </HStack>
+  </div>
+);
diff --git a/src/pages/shop/promo/index.tsx b/src/pages/shop/promo/index.tsx
new file mode 100644
index 00000000..7ec4f6b0
--- /dev/null
+++ b/src/pages/shop/promo/index.tsx
@@ -0,0 +1,186 @@
+import dynamic from 'next/dynamic'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import Seo from '../../../core/components/Seo.jsx'
+import Promocrumb from '../../../lib/promo/components/Promocrumb.jsx'
+import { fetchPromoItemsSolr } from '../../../api/promoApi.js'
+import LogoSpinner from '../../../core/components/elements/Spinner/LogoSpinner.jsx'
+import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card.tsx'
+import { IPromotion } from '../../../../src-migrate/types/promotion.ts'
+import React from 'react'
+import { SolrResponse } from "../../../../src-migrate/types/solr.ts";
+
+const BasicLayout = dynamic(() => import('../../../core/components/layouts/BasicLayout.jsx'))
+
+export default function Promo() {
+  const router = useRouter()
+  const { slug = '' } = router.query
+  const [promoItems, setPromoItems] = useState<any[]>([])
+  const [promoData, setPromoData] = useState<IPromotion[] | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [currentPage, setCurrentPage] = useState(1)
+  const [fetchingData, setFetchingData] = useState(false)
+
+  useEffect(() => {
+    const loadPromo = async () => {
+      try {
+        const items = await fetchPromoItemsSolr(`*:*`)
+        
+        
+        setPromoItems(items)
+        
+
+        if (items.length === 0) {
+          setPromoData([])
+          setLoading(false);
+          return;
+        }
+
+        const promoDataPromises = items.map(async (item) => {
+          const queryParams = new URLSearchParams({ q: `id:${item.id}` })
+          
+
+          try {
+            const response = await fetch(`/solr/promotion_program_lines/select?${queryParams.toString()}`)
+            
+            if (!response.ok) {
+              throw new Error(`HTTP error! status: ${response.status}`)
+            }
+
+            const data: SolrResponse<any[]> = await response.json()
+            
+            
+            const promotions = await map(data.response.docs)
+            return promotions;
+          } catch (fetchError) {
+            console.error("Error fetching promotion data:", fetchError)
+            return [];
+          }
+        });
+
+        const promoDataArray = await Promise.all(promoDataPromises);
+        const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+        setPromoData(mergedPromoData);
+        setTimeout(() => setLoading(false), 120); // Menambahkan delay 200ms sebelum mengubah status loading
+      } catch (loadError) {
+        console.error("Error loading promo items:", loadError)
+        setLoading(false);
+      }
+    }
+
+    if (slug) {
+      loadPromo()
+    }
+  }, [slug])
+
+  const map = async (promotions: any[]): Promise<IPromotion[]> => {
+    const result: IPromotion[] = []
+  
+    for (const promotion of promotions) {
+      const data: IPromotion = {
+        id: promotion.id,
+        program_id: promotion.program_id_i,
+        name: promotion.name_s,
+        type: {
+          value: promotion.type_value_s,
+          label: promotion.type_label_s,
+        },
+        limit: promotion.package_limit_i,
+        limit_user: promotion.package_limit_user_i,
+        limit_trx: promotion.package_limit_trx_i,
+        price: promotion.price_f,
+        total_qty: promotion.total_qty_i,
+        products: JSON.parse(promotion.products_s),
+        free_products: JSON.parse(promotion.free_products_s),
+      }
+  
+      result.push(data)
+    }
+  
+    return result
+  }
+
+  
+  
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (
+        !fetchingData &&
+        window.innerHeight + document.documentElement.scrollTop >= 0.95 * document.documentElement.offsetHeight
+      ) {
+        // User has scrolled to 95% of page height
+        
+        setTimeout(() => setFetchingData(true), 120);
+        setCurrentPage((prevPage) => prevPage + 1)
+      }
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [fetchingData])
+
+  useEffect(() => {
+    if (fetchingData) {
+      // Fetch more data
+      // You may need to adjust this logic according to your API
+      fetchMoreData()
+    }
+  }, [fetchingData])
+
+  const fetchMoreData = async () => {
+    try {
+      // Add a delay of approximately 150ms
+      setTimeout(async () => {
+        // Fetch more data
+        // Update promoData state with the new data
+      }, 150)
+    } catch (error) {
+      console.error('Error fetching more data:', error)
+    } finally {
+      setTimeout(() => setFetchingData(false), 120);
+      
+    }
+  }
+
+  const visiblePromotions = promoData?.slice(0, currentPage * 12)
+
+  return (
+    <BasicLayout>
+      <Seo
+        title={`Promo ${Array.isArray(slug) ? slug[0] : slug} Terkini`} 
+        description='B2B Marketplace MRO & Industri dengan Layanan Pembayaran Tempo, Faktur Pajak, Online Quotation, Garansi Resmi & Harga Kompetitif'
+      />
+      {/* <Promocrumb brandName={capitalizeFirstLetter(Array.isArray(slug) ? slug[0] : slug)} />  */}
+      <div className='container mx-auto mt-1 flex mb-1'>
+        <div className=''>
+          <h1 className='font-semibold'>Semua Promo di Indoteknik</h1>
+        </div>
+      </div>
+      {loading ? (
+        <div className='container flex justify-center my-4'>
+          <LogoSpinner width={48} height={48} />
+        </div>
+      ) : promoData && promoItems.length >= 1 ? (
+        <>
+          <div className='flex flex-wrap justify-center'>
+            {visiblePromotions?.map((promotion) => (
+              <div key={promotion.id} className="min-w-[40px] max-w-[400px] mr-[20px] mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
+                <ProductPromoCard promotion={promotion}  />
+              </div>
+            ))}
+          </div>
+          {fetchingData && (
+            <div className='container flex justify-center my-4'>
+              <LogoSpinner width={48} height={48} />
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="text-center my-8">
+          <p>Belum ada promo pada kategori ini</p>
+        </div>
+      )}
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/video.jsx b/src/pages/video.jsx
index 61790dbb..7d1f8372 100644
--- a/src/pages/video.jsx
+++ b/src/pages/video.jsx
@@ -44,7 +44,7 @@ export default function Video() {
                 </LazyLoadComponent>
                 <div className='p-3'>
                   <a
-                    href='https://www.youtube.com/@indoteknikb2bindustriale-c778'
+                    href='https://www.youtube.com/@indoteknikcom'
                     className='text-danger-500 mb-2 block'
                   >
                     {video.channelName}