Merge branch 'master' into development_tri/implementasi_raja_ongkir

# Conflicts:
#	src/lib/checkout/components/Checkout.jsx

95 files changed, 2035 insertions, 504 deletions

diff --git a/src/core/api/searchSpellApi.js b/src/core/api/searchSpellApi.js
new file mode 100644
index 00000000..4794c3e1
--- /dev/null
+++ b/src/core/api/searchSpellApi.js
@@ -0,0 +1,14 @@
+import axios from 'axios'
+
+const searchSpellApi = async ({ query }) => {
+  const dataSearchSpell = await axios(
+    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/spell?q=${query.trim()}`
+  )
+  return dataSearchSpell
+}
+
+searchSpellApi.defaultProps = {
+  query: ''
+}
+
+export default searchSpellApi
diff --git a/src/core/api/searchSuggestApi.js b/src/core/api/searchSuggestApi.js
index 3dabfbd6..c65405e3 100644
--- a/src/core/api/searchSuggestApi.js
+++ b/src/core/api/searchSuggestApi.js
@@ -1,8 +1,10 @@
 import axios from 'axios'
 
 const searchSuggestApi = async ({ query }) => {
+  query = query.replace('&', '').trim()
+  if (!query) return {}
   const dataSearchSuggest = await axios(
-    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/suggest?q=${query.trim()}`
+    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/suggest?q=${query}`
   )
   return dataSearchSuggest
 }
diff --git a/src/core/components/elements/CountDown/CountDown.jsx b/src/core/components/elements/CountDown/CountDown.jsx
new file mode 100644
index 00000000..91a1f68e
--- /dev/null
+++ b/src/core/components/elements/CountDown/CountDown.jsx
@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react'
+
+const CountDown = ({ initialTime }) => {
+  const days = Math.floor(initialTime / 86400)
+  const hours = Math.floor((initialTime % 86400) / 3600)
+  const minutes = Math.floor((initialTime % 3600) / 60)
+  const seconds = initialTime % 60
+
+  const [timeLeft, setTimeLeft] = useState({
+    day: days,
+    hour: hours,
+    minute: minutes,
+    second: seconds
+  })
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const totalSeconds =
+        timeLeft.day * 86400 + timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second
+      const secondsLeft = totalSeconds - 1
+      if (secondsLeft < 0) {
+        clearInterval(timer)
+      } else {
+        const days = Math.floor(secondsLeft / 86400)
+        const hours = Math.floor((secondsLeft % 86400) / 3600)
+        const minutes = Math.floor((secondsLeft % 3600) / 60)
+        const seconds = secondsLeft % 60
+        setTimeLeft({ day: days, hour: hours, minute: minutes, second: seconds })
+      }
+    }, 1000)
+    return () => clearInterval(timer)
+  }, [timeLeft])
+
+  return (
+    <div className='flex gap-x-2.5 w-fit'>
+      <div className='flex flex-col items-center'>
+        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>
+          {timeLeft.day.toString().padStart(2, '0')}
+        </span>
+        <span className='text-caption-1 text-gray-700 mt-1'>Hari</span>
+      </div>
+      <div className='flex flex-col items-center'>
+        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>
+          {timeLeft.hour.toString().padStart(2, '0')}
+        </span>
+        <span className='text-caption-1 text-gray-700 mt-1'>Jam</span>
+      </div>
+      <div className='flex flex-col items-center'>
+        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>
+          {timeLeft.minute.toString().padStart(2, '0')}
+        </span>
+        <span className='text-caption-1 text-gray-700 mt-1'>Menit</span>
+      </div>
+      <div className='flex flex-col items-center'>
+        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>
+          {timeLeft.second.toString().padStart(2, '0')}
+        </span>
+        <span className='text-caption-1 text-gray-700 mt-1'>Detik</span>
+      </div>
+    </div>
+  )
+}
+
+export default CountDown
diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 42698cb2..d340ff3e 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -8,6 +8,7 @@ import {
 import Link from '../Link/Link'
 import MobileView from '../../views/MobileView'
 import DesktopView from '../../views/DesktopView'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const BasicFooter = () => {
   return (
@@ -22,6 +23,7 @@ const BasicFooter = () => {
             </div>
 
             <OfficeLocation />
+            <AboutUs />
             {/* <WarehouseLocation /> */}
             <InformationCenter />
             <OpenHours />
@@ -29,7 +31,7 @@ const BasicFooter = () => {
           </div>
 
           <div className='w-1/2 flex flex-col gap-y-4 pl-1.5'>
-            <AboutUs />
+            <Form />
             <CustomerGuide />
             <Payments />
           </div>
@@ -49,6 +51,7 @@ const BasicFooter = () => {
               <InformationCenter />
             </div>
             <CustomerGuide />
+            <Form />
             <AboutUs />
             <div className='w-3/12'>
               <div className='grid grid-cols-1 gap-y-4'>
@@ -99,31 +102,22 @@ const AboutUs = () => (
     <div className={`${headerClassName} mb-3`}>Tentang Kami</div>
     <ul className='flex flex-col gap-y-2'>
       <li>
-        <InternalItemLink href='/'>Company Profile</InternalItemLink>
-      </li>
-      <li>
-        <InternalItemLink href='/'>Karir</InternalItemLink>
-      </li>
-      <li>
-        <InternalItemLink href='/'>Pelanggan Kami</InternalItemLink>
+        <InternalItemLink href='/tentang-kami'>Company Profile</InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/'>Menjadi Supplier</InternalItemLink>
+        <InternalItemLink href='/pelanggan-kami'>Pelanggan Kami</InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/'>Garansi dan Pengembalian</InternalItemLink>
+        <InternalItemLink href='/hubungi-kami'>Hubungi Kami</InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/'>Metode Pembayaran</InternalItemLink>
+        <InternalItemLink href='/karir'>Karir</InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/'>Metode Pengiriman</InternalItemLink>
+        <InternalItemLink href='/syarat-ketentuan'>Syarat & Ketentuan</InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/'>Testimonial</InternalItemLink>
-      </li>
-      <li>
-        <InternalItemLink href='/'>Kebijakan Privacy</InternalItemLink>
+        <InternalItemLink href='/kebijakan-privasi'>Kebijakan Privasi</InternalItemLink>
       </li>
     </ul>
   </div>
@@ -131,34 +125,53 @@ const AboutUs = () => (
 
 const CustomerGuide = () => (
   <div>
-    <div className={`${headerClassName} mb-3`}>Panduan Pelanggan</div>
+    <div className={`${headerClassName} mb-3`}>Bantuan & Panduan</div>
     <ul className='flex flex-col gap-y-2'>
       <li>
-        <InternalItemLink href='/'>Panduan Belanja</InternalItemLink>
+        <InternalItemLink href='/metode-pembayaran'>Metode Pembayaran</InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/'>F.A.Q</InternalItemLink>
+        <InternalItemLink href='/metode-pengiriman'>Metode Pengiriman</InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/'>Kebijakan Privasi</InternalItemLink>
+        <InternalItemLink href='/panduan-belanja'>Panduan Belanja</InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/'>Pengajuan Tempo</InternalItemLink>
+        <InternalItemLink href='/panduan-quotation'>Panduan Quotation</InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/'>Garansi Produk</InternalItemLink>
+        <InternalItemLink href='/pengembalian-barang-dana'>
+          Pengembalian Barang & Dana
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/'>Online Quotation</InternalItemLink>
+        <InternalItemLink href='/informasi-garansi'>Informasi Garansi</InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/'>Pengiriman</InternalItemLink>
+        <InternalItemLink href='/panduan-pick-up-service'>Panduan Pick Up Service</InternalItemLink>
+      </li>
+    </ul>
+  </div>
+)
+
+const Form = () => (
+  <div>
+    <div className={`${headerClassName} mb-3`}>Formulir</div>
+    <ul className='flex flex-col gap-y-2'>
+      <li>
+        <InternalItemLink href='/my/kunjungan-sales'>Kunjungan Sales</InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/'>Pembayaran</InternalItemLink>
+        <InternalItemLink href='/my/kunjungan-service'>Kunjungan Service</InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/'>Syarat & Ketentuan</InternalItemLink>
+        <InternalItemLink href='/my/pembayaran-tempo'>Pembayaran Tempo</InternalItemLink>
+      </li>
+      <li>
+        <InternalItemLink href='/my/surat-dukungan'>Surat Dukungan</InternalItemLink>
+      </li>
+      <li>
+        <InternalItemLink href='/my/daftar-merchant'>Daftar Merchant</InternalItemLink>
       </li>
     </ul>
   </div>
@@ -178,7 +191,7 @@ const InformationCenter = () => (
       </li>
       <li className='text-gray_r-12/80 flex items-center'>
         <DevicePhoneMobileIcon className='w-[18px] mr-2' />
-        <a href='https://wa.me/628128080622' target='_blank' rel='noreferrer'>
+        <a href={whatsappUrl()} target='_blank' rel='noreferrer'>
           0812-8080-622
         </a>
       </li>
@@ -205,7 +218,7 @@ const OpenHours = () => (
 const SocialMedias = () => (
   <div>
     <div className={headerClassName + 'block md:hidden'}>Temukan Kami</div>
-    <div className='flex flex-wrap gap-2'>
+    <div className='flex flex-wrap gap-2 mt-2'>
       <NextImage src='/images/socials/Whatsapp.png' alt='Whatsapp Logo' width={24} height={24} />
       <NextImage src='/images/socials/Facebook.png' alt='Facebook Logo' width={24} height={24} />
       <NextImage src='/images/socials/Twitter.png' alt='Twitter Logo' width={24} height={24} />
diff --git a/src/core/components/elements/Footer/SimpleFooter.jsx b/src/core/components/elements/Footer/SimpleFooter.jsx
index 41ca6094..26f7f786 100644
--- a/src/core/components/elements/Footer/SimpleFooter.jsx
+++ b/src/core/components/elements/Footer/SimpleFooter.jsx
@@ -1,3 +1,4 @@
+import whatsappUrl from '@/core/utils/whatsappUrl'
 import {
   DevicePhoneMobileIcon,
   EnvelopeIcon,
@@ -20,7 +21,7 @@ const SimpleFooter = () => (
         </li>
         <li className='text-gray_r-12/80 flex items-center'>
           <DevicePhoneMobileIcon className='w-[18px] mr-2' />
-          <a href='https://wa.me/628128080622' target='_blank' rel='noreferrer'>
+          <a href={whatsappUrl()} target='_blank' rel='noreferrer'>
             0812-8080-622
           </a>
         </li>
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 837d436c..3da0035a 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -14,6 +14,8 @@ import { useEffect, useState } from 'react'
 import useAuth from '@/core/hooks/useAuth'
 import NavbarUserDropdown from './NavbarUserDropdown'
 import { getCart } from '@/core/utils/cart'
+import TopBanner from './TopBanner'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const Search = dynamic(() => import('./Search'))
 
@@ -38,19 +40,17 @@ const NavbarDesktop = () => {
 
   return (
     <DesktopView>
+      <TopBanner />
       <div className='py-3 bg-warning-400' id='desktop-nav-top'>
         <div className='container mx-auto flex justify-between'>
-          <Link href='/' className='!text-gray_r-12'>
+          <Link href='/tentang-kami' className='!text-gray_r-12'>
             Tentang Indoteknik.com
           </Link>
           <div className='flex gap-x-6'>
-            <Link href='/' className='!text-gray_r-12'>
+            <Link href='/my/pembayaran-tempo' className='!text-gray_r-12'>
               Pembayaran Tempo
             </Link>
             <Link href='/' className='!text-gray_r-12'>
-              F.A.Q
-            </Link>
-            <Link href='/' className='!text-gray_r-12'>
               Fitur Layanan
             </Link>
           </div>
@@ -90,7 +90,7 @@ const NavbarDesktop = () => {
               Wishlist
             </Link>
             <a
-              href='https://wa.me/628128080622'
+              href={whatsappUrl()}
               target='_blank'
               rel='noreferrer'
               className='flex items-center gap-x-1 !text-gray_r-12/80'
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index 0502dba5..7ac967fa 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -7,6 +7,7 @@ import dynamic from 'next/dynamic'
 import IndoteknikLogo from '@/images/logo.png'
 import { useEffect, useState } from 'react'
 import { getCart } from '@/core/utils/cart'
+import TopBanner from './TopBanner'
 
 const Search = dynamic(() => import('./Search'))
 
@@ -30,6 +31,7 @@ const NavbarMobile = () => {
 
   return (
     <MobileView>
+      <TopBanner />
       <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
         <div className='flex justify-between items-center mb-2'>
           <Link href='/'>
@@ -45,7 +47,7 @@ const NavbarMobile = () => {
                 {cartCount}
               </span>
             </Link>
-            <button type='button' onClick={open}>
+            <button type='button' aria-label='sidebarMenuButton' onClick={open}>
               <Bars3Icon className='w-6 text-gray_r-12' />
             </button>
           </div>
diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
index 1d2429a7..7848124c 100644
--- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
+++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
@@ -13,6 +13,7 @@ const NavbarUserDropdown = () => {
   return (
     <div className='navbar-user-dropdown-wrapper'>
       <div className='navbar-user-dropdown'>
+        <Link href='/my/quotations'>Daftar Quotation</Link>
         <Link href='/my/transactions'>Daftar Transaksi</Link>
         <Link href='/my/invoices'>Invoice & Faktur Pajak</Link>
         <Link href='/my/wishlist'>Wishlist</Link>
diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx
index 3046782b..47a9c235 100644
--- a/src/core/components/elements/Navbar/Search.jsx
+++ b/src/core/components/elements/Navbar/Search.jsx
@@ -13,7 +13,7 @@ const Search = () => {
   const loadSuggestion = useCallback(() => {
     if (query && document.activeElement == queryRef.current) {
       searchSuggestApi({ query }).then((response) => {
-        setSuggestions(response.data.suggestions)
+        setSuggestions(response.data?.suggestions || [])
       })
     } else {
       setSuggestions([])
@@ -56,11 +56,15 @@ const Search = () => {
           onBlur={onInputBlur}
           onFocus={loadSuggestion}
         />
-        <button type='submit' className='rounded-r border border-l-0 border-gray_r-6 px-2'>
+        <button
+          type='submit'
+          aria-label='SearchButton'
+          className='rounded-r border border-l-0 border-gray_r-6 px-2'
+        >
           <MagnifyingGlassIcon className='w-6' />
         </button>
 
-        {suggestions.length > 1 && (
+        {suggestions.length > 0 && (
           <>
             <div className='absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6 z-50'>
               {suggestions.map((suggestion, index) => (
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
new file mode 100644
index 00000000..48b23a3d
--- /dev/null
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -0,0 +1,25 @@
+import odooApi from '@/core/api/odooApi'
+import { useQuery } from 'react-query'
+import Image from 'next/image'
+
+const TopBanner = () => {
+  const fetchTopBanner = async () => await odooApi('GET', '/api/v1/banner?type=top-banner')
+  const topBanner = useQuery('topBanner', fetchTopBanner)
+
+  return (
+    topBanner.isFetched &&
+    topBanner.data?.length > 0 && (
+      <div style={{ backgroundColor: topBanner.data[0]?.backgroundColor || 'transparent' }}>
+        <Image
+          src={topBanner.data[0].image}
+          alt={topBanner.data[0].name}
+          width={1440}
+          height={40}
+          className='object-cover object-center h-full mx-auto'
+        />
+      </div>
+    )
+  )
+}
+
+export default TopBanner
diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index c8fd8bab..7ea8f7c4 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -126,12 +126,9 @@ const Sidebar = ({ active, close }) => {
                 <SidebarLink className={itemClassName} href='/video'>
                   Indoteknik TV
                 </SidebarLink>
-                <SidebarLink className={itemClassName} href='/about-us'>
+                <SidebarLink className={itemClassName} href='/tentang-kami'>
                   Tentang Indoteknik
                 </SidebarLink>
-                <SidebarLink className={itemClassName} href='/faqs'>
-                  F.A.Q
-                </SidebarLink>
                 <SidebarLink className={itemClassName} href='/contact-us'>
                   Hubungi Kami
                 </SidebarLink>
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 1a7185cd..df42e403 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -1,5 +1,7 @@
 import dynamic from 'next/dynamic'
 import BasicFooter from '../elements/Footer/BasicFooter'
+import Image from 'next/image'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const Navbar = dynamic(() => import('../elements/Navbar/Navbar'))
 const AnimationLayout = dynamic(() => import('./AnimationLayout'))
@@ -8,7 +10,31 @@ const BasicLayout = ({ children }) => {
   return (
     <>
       <Navbar />
-      <AnimationLayout>{children}</AnimationLayout>
+      <AnimationLayout>
+        {children}
+        <div className='fixed bottom-4 right-4 sm:bottom-10 sm:right-8 z-50'>
+          <a
+            href={whatsappUrl(null)}
+            className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center'
+          >
+            <Image
+              src='/images/socials/WHATSAPP.svg'
+              alt='Whatsapp'
+              className='block sm:hidden'
+              width={36}
+              height={36}
+            />
+            <Image
+              src='/images/socials/WHATSAPP.svg'
+              alt='Whatsapp'
+              className='hidden sm:block'
+              width={44}
+              height={44}
+            />
+            <span className='text-white font-bold ml-1.5'>Whatsapp</span>
+          </a>
+        </div>
+      </AnimationLayout>
       <BasicFooter />
     </>
   )
diff --git a/src/core/utils/slug.js b/src/core/utils/slug.js
index d5eecd3e..e91bcf83 100644
--- a/src/core/utils/slug.js
+++ b/src/core/utils/slug.js
@@ -9,7 +9,7 @@ import toTitleCase from './toTitleCase'
  * @param {number} id - The ID to be appended to the slug.
  * @returns {string} - The generated slug with the prefix, name, and ID.
  */
-const createSlug = (prefix, name, id) => {
+const createSlug = (prefix, name, id, withHost = false) => {
   let slug =
     name
       ?.trim()
@@ -19,7 +19,9 @@ const createSlug = (prefix, name, id) => {
     id
   let splitSlug = slug.split('-')
   let filterSlugFromEmptyChar = splitSlug.filter((x) => x != '')
-  return prefix + filterSlugFromEmptyChar.join('-')
+  slug = prefix + filterSlugFromEmptyChar.join('-')
+  if (withHost) slug = process.env.NEXT_PUBLIC_SELF_HOST + slug
+  return slug
 }
 
 /**
diff --git a/src/core/utils/whatsappUrl.js b/src/core/utils/whatsappUrl.js
new file mode 100644
index 00000000..6ca9722b
--- /dev/null
+++ b/src/core/utils/whatsappUrl.js
@@ -0,0 +1,24 @@
+const whatsappUrl = (template = 'default', payload) => {
+  let url = 'https://wa.me/628128080622'
+  let text = ''
+  switch (template) {
+    case 'product':
+      text = `Halo, saya mau tanya ${payload.name}, bisa tolong bantu saya?\n\nBerikut ini linknya: ${payload.url}`
+      break
+    case 'productWeight':
+      text = `Mau tanya untuk berat ${payload.name}, bisa minta tolong informasikan beratnya?\n\nBerikut ini linknya: ${payload.url}`
+      break
+    case 'productSearch':
+      text = `Saya lagi cari-cari produk ${payload.name}, bisa bantu saya cari produknya?`
+      break
+    case null:
+      break;
+    default:
+      text = 'Halo, saya mau tanya-tanya seputar produk, bisa tolong bantu saya?'
+      break
+  }
+  if (text) url += `?text=${encodeURI(text)}`
+  return url
+}
+
+export default whatsappUrl
diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx
index 854aa246..13d4a194 100644
--- a/src/lib/auth/components/CompanyProfile.jsx
+++ b/src/lib/auth/components/CompanyProfile.jsx
@@ -76,7 +76,7 @@ const CompanyProfile = () => {
             Dibawah ini adalah data usaha yang anda masukkan, periksa kembali data usaha anda.
           </div>
         </div>
-        <div className='p-2 bg-gray_r-3 rounded'>
+        <div className='ml-2 p-2 bg-gray_r-3 rounded'>
           {!isOpen && <ChevronDownIcon className='w-6' />}
           {isOpen && <ChevronUpIcon className='w-6' />}
         </div>
diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index 9a73609d..8a8e2e8a 100644
--- a/src/lib/auth/components/Menu.jsx
+++ b/src/lib/auth/components/Menu.jsx
@@ -9,10 +9,13 @@ const Menu = () => {
   return (
     <div className='grid grid-cols-1 bg-white border border-gray_r-6 rounded py-2 px-4'>
       <div className='mt-4 mb-1 font-medium'>Menu</div>
-      <LinkItem href='/my/transactions' active={routeStartWith('/my/transaction')}>
+      <LinkItem href='/my/quotations' active={routeStartWith('/my/quotations')}>
+        Daftar Quotation
+      </LinkItem>
+      <LinkItem href='/my/transactions' active={routeStartWith('/my/transactions')}>
         Daftar Transaksi
       </LinkItem>
-      <LinkItem href='/my/invoices' active={routeStartWith('/my/invoice')}>
+      <LinkItem href='/my/invoices' active={routeStartWith('/my/invoices')}>
         Invoice & Faktur Pajak
       </LinkItem>
       <LinkItem href='/my/wishlist' active={routeStartWith('/my/wishlist')}>
diff --git a/src/lib/auth/components/PersonalProfile.jsx b/src/lib/auth/components/PersonalProfile.jsx
index 4a533ae9..bca54e24 100644
--- a/src/lib/auth/components/PersonalProfile.jsx
+++ b/src/lib/auth/components/PersonalProfile.jsx
@@ -9,7 +9,7 @@ import editPersonalProfileApi from '../api/editPersonalProfileApi'
 
 const PersonalProfile = () => {
   const auth = useAuth()
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(true)
   const toggle = () => setIsOpen(!isOpen)
   const { register, setValue, handleSubmit } = useForm({
     defaultValues: {
@@ -54,7 +54,7 @@ const PersonalProfile = () => {
             Dibawah ini adalah data diri yang anda masukan, periksa kembali data diri anda
           </div>
         </div>
-        <div className='p-2 bg-gray_r-3 rounded'>
+        <div className='ml-2 p-2 bg-gray_r-3 rounded'>
           {!isOpen && <ChevronDownIcon className='w-6' />}
           {isOpen && <ChevronUpIcon className='w-6' />}
         </div>
diff --git a/src/lib/auth/components/RegisterDesktop.jsx b/src/lib/auth/components/RegisterDesktop.jsx
index 482a9ce3..f624fba7 100644
--- a/src/lib/auth/components/RegisterDesktop.jsx
+++ b/src/lib/auth/components/RegisterDesktop.jsx
@@ -4,6 +4,7 @@ import Link from '@/core/components/elements/Link/Link'
 import Alert from '@/core/components/elements/Alert/Alert'
 import PageContent from '@/lib/content/components/PageContent'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import ReCAPTCHA from 'react-google-recaptcha'
 
 const RegisterDesktop = () => {
   const {
@@ -16,6 +17,7 @@ const RegisterDesktop = () => {
     fullnameRef,
     emailRef,
     passwordRef,
+    recaptchaRef,
     tnd,
     setTnd
   } = useRegister()
@@ -89,6 +91,7 @@ const RegisterDesktop = () => {
                   placeholder='••••••••••••'
                 />
               </div>
+              <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
               <div class='flex items-center mt-4 '>
                 <input
                   type='checkbox'
@@ -96,11 +99,12 @@ const RegisterDesktop = () => {
                   className='form-input flex items-start w-fit mr-2'
                   required
                 />
-                <label
-                  onClick={() => setTnd(true)}
-                  className='inline cursor-pointer text-danger-500'
-                >
-                  Syarat dan Ketentuan
+                <label className='inline'>
+                  Dengan ini saya menyetujui{' '}
+                  <span onClick={() => setTnd(true)} className='cursor-pointer text-danger-500'>
+                    syarat dan ketentuan
+                  </span>{' '}
+                  yang berlaku
                 </label>
               </div>
               <button
diff --git a/src/lib/auth/components/RegisterMobile.jsx b/src/lib/auth/components/RegisterMobile.jsx
index f5c818e7..80ea6ab0 100644
--- a/src/lib/auth/components/RegisterMobile.jsx
+++ b/src/lib/auth/components/RegisterMobile.jsx
@@ -6,6 +6,7 @@ import useRegister from '../hooks/useRegister'
 import MobileView from '@/core/components/views/MobileView'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import PageContent from '@/lib/content/components/PageContent'
+import ReCAPTCHA from 'react-google-recaptcha'
 
 const RegisterMobile = () => {
   const {
@@ -18,6 +19,7 @@ const RegisterMobile = () => {
     fullnameRef,
     emailRef,
     passwordRef,
+    recaptchaRef,
     tnd,
     setTnd
   } = useRegister()
@@ -93,6 +95,7 @@ const RegisterMobile = () => {
               placeholder='••••••••••••'
             />
           </div>
+          <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
           <div class='flex items-center mt-4 '>
             <input
               type='checkbox'
@@ -100,8 +103,12 @@ const RegisterMobile = () => {
               className='form-input flex items-start w-fit mr-2'
               required
             />
-            <label onClick={() => setTnd(true)} className='inline cursor-pointer text-danger-500'>
-              Syarat dan Ketentuan
+            <label className='inline'>
+              Dengan ini saya menyetujui{' '}
+              <span onClick={() => setTnd(true)} className='cursor-pointer text-danger-500'>
+                syarat dan ketentuan
+              </span>{' '}
+              yang berlaku
             </label>
           </div>
           <button type='submit' className='btn-yellow w-full mt-2' disabled={!isValid || isLoading}>
diff --git a/src/lib/auth/hooks/useRegister.js b/src/lib/auth/hooks/useRegister.js
index 4b0b0d60..1a9412f8 100644
--- a/src/lib/auth/hooks/useRegister.js
+++ b/src/lib/auth/hooks/useRegister.js
@@ -33,8 +33,20 @@ const useRegister = () => {
     companyNameRef.current.value = ''
   }
 
+  const recaptchaRef = useRef(null)
+
   const handleSubmit = async (e) => {
     e.preventDefault()
+
+    const recaptchaValue = recaptchaRef.current.getValue()
+    if (!recaptchaValue) {
+      setAlert({
+        children: 'ReCaptcha harus diisi',
+        type: 'info'
+      })
+      return
+    }
+
     setAlert(null)
     setIsLoading(true)
     const { fullname, email, password, companyName } = inputVal()
@@ -75,6 +87,7 @@ const useRegister = () => {
     fullnameRef,
     emailRef,
     passwordRef,
+    recaptchaRef,
     tnd,
     setTnd
   }
diff --git a/src/lib/brand/components/Brand.jsx b/src/lib/brand/components/Brand.jsx
index 6ebb8aa7..3c411969 100644
--- a/src/lib/brand/components/Brand.jsx
+++ b/src/lib/brand/components/Brand.jsx
@@ -1,5 +1,5 @@
 import useBrand from '../hooks/useBrand'
-import Image from '@/core/components/elements/Image/Image'
+import Image from 'next/image'
 
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { Pagination, Autoplay } from 'swiper'
@@ -29,6 +29,15 @@ const Brand = ({ id }) => {
         <>
           <div>
             {brand.isLoading && <ImageSkeleton />}
+            {brand.data?.banners?.length == 0 && (
+              <Image
+                src='/images/default-banner-brand.jpg'
+                alt='Brand - Indoteknik'
+                width={1024}
+                height={512}
+                className='w-full h-auto'
+              />
+            )}
             {brand.data && (
               <>
                 <Swiper
@@ -43,6 +52,8 @@ const Brand = ({ id }) => {
                       <Image
                         src={banner}
                         alt={`Brand ${brand.data?.name} - Indoteknik`}
+                        width={1024}
+                        height={512}
                         className='w-full h-auto'
                       />
                     </SwiperSlide>
@@ -55,6 +66,8 @@ const Brand = ({ id }) => {
                       src={brand?.data?.logo}
                       alt={brand?.data?.name}
                       className='w-32 p-2 border borde-gray_r-6 rounded'
+                      width={256}
+                      height={128}
                     />
                   )}
                   {!brand?.data?.logo && (
@@ -69,10 +82,20 @@ const Brand = ({ id }) => {
           <Divider />
         </>
       </MobileView>
+
       <DesktopView>
         <div className='container mx-auto mt-10 mb-3'>
           <div className='min-h-[150px]'>
             {brand.isLoading && <ImageSkeleton />}
+            {brand.data?.banners?.length == 0 && (
+              <Image
+                src='/images/default-banner-brand.jpg'
+                alt='Brand - Indoteknik'
+                width={1024}
+                height={512}
+                className='w-full h-auto'
+              />
+            )}
             {brand.data && (
               <>
                 <Swiper
@@ -87,6 +110,8 @@ const Brand = ({ id }) => {
                       <Image
                         src={banner}
                         alt={`Brand ${brand.data?.name} - Indoteknik`}
+                        width={1024}
+                        height={512}
                         className='w-full h-auto'
                       />
                     </SwiperSlide>
@@ -99,6 +124,8 @@ const Brand = ({ id }) => {
                       src={brand?.data?.logo}
                       alt={brand?.data?.name}
                       className='w-32 p-2 border borde-gray_r-6 rounded'
+                      width={1024}
+                      height={512}
                     />
                   )}
                   {!brand?.data?.logo && (
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index d0685fe3..1008bffc 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -16,6 +16,7 @@ import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
 import ProductCard from '@/lib/product/components/ProductCard'
 import productSearchApi from '@/lib/product/api/productSearchApi'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const Cart = () => {
   const router = useRouter()
@@ -72,7 +73,7 @@ const Cart = () => {
   }, [products])
 
   useEffect(() => {
-    const LoadProductSImilar = async () => {
+    const LoadProductSimilar = async () => {
       const randProductIndex = Math.floor(Math.random() * products.length)
       const productLoad = await productSearchApi({
         query: `q=${products?.[randProductIndex].parent.name}&limit=10`
@@ -80,8 +81,8 @@ const Cart = () => {
 
       setProductRecomendation(productLoad)
     }
-    if (products?.length > 0) LoadProductSImilar()
-  }, [products])
+    if (products?.length > 0 && !productRecomendation) LoadProductSimilar()
+  }, [products, productRecomendation])
 
   const updateQuantity = (value, productId, operation = '') => {
     let productIndex = products.findIndex((product) => product.id == productId)
@@ -329,91 +330,92 @@ const Cart = () => {
                     <td colSpan={6}>Keranjang belanja anda masih kosong</td>
                   </tr>
                 )}
-                {products && products?.map((product) => (
-                  <tr key={product.id}>
-                    <td>
-                      <input
-                        type='checkbox'
-                        onClick={() => toggleSelected(product.id)}
-                        checked={product?.selected}
-                        className='accent-danger-500 w-4'
-                      />
-                    </td>
-                    <td className='flex'>
-                      <Link
-                        href={createSlug(
-                          '/shop/product/',
-                          product?.parent.name,
-                          product?.parent.id
-                        )}
-                        className='w-[20%] flex-shrink-0'
-                      >
-                        <Image
-                          src={product?.parent?.image}
-                          alt={product?.name}
-                          className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
+                {products &&
+                  products?.map((product) => (
+                    <tr key={product.id}>
+                      <td>
+                        <input
+                          type='checkbox'
+                          onClick={() => toggleSelected(product.id)}
+                          checked={product?.selected}
+                          className='accent-danger-500 w-4'
                         />
-                      </Link>
-                      <div className='px-2 text-left'>
+                      </td>
+                      <td className='flex'>
                         <Link
                           href={createSlug(
                             '/shop/product/',
                             product?.parent.name,
                             product?.parent.id
                           )}
-                          className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                          className='w-[20%] flex-shrink-0'
                         >
-                          {product?.parent?.name}
+                          <Image
+                            src={product?.parent?.image}
+                            alt={product?.name}
+                            className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
+                          />
                         </Link>
-                        <div className='text-gray_r-11 mt-2'>
-                          {product?.code}{' '}
-                          {product?.attributes.length > 0
-                            ? `| ${product?.attributes.join(', ')}`
-                            : ''}
-                        </div>
-                      </div>
-                    </td>
-                    <td>
-                      <input
-                        className='form-input w-16 py-2 text-center bg-gray_r-1'
-                        type='number'
-                        value={product?.quantity}
-                        onChange={(e) => updateQuantity(e.target.value, product?.id)}
-                        onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
-                      />
-                    </td>
-                    <td>
-                      {product?.price?.discountPercentage > 0 && (
-                        <div className='flex gap-x-1 items-center justify-center mt-3'>
-                          <div className='text-gray_r-11 line-through text-caption-1'>
-                            {currencyFormat(product?.price?.price)}
+                        <div className='px-2 text-left'>
+                          <Link
+                            href={createSlug(
+                              '/shop/product/',
+                              product?.parent.name,
+                              product?.parent.id
+                            )}
+                            className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                          >
+                            {product?.parent?.name}
+                          </Link>
+                          <div className='text-gray_r-11 mt-2'>
+                            {product?.code}{' '}
+                            {product?.attributes.length > 0
+                              ? `| ${product?.attributes.join(', ')}`
+                              : ''}
                           </div>
-                          <div className='badge-solid-red'>
-                            {product?.price?.discountPercentage}%
+                        </div>
+                      </td>
+                      <td>
+                        <input
+                          className='form-input w-16 py-2 text-center bg-gray_r-1'
+                          type='number'
+                          value={product?.quantity}
+                          onChange={(e) => updateQuantity(e.target.value, product?.id)}
+                          onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
+                        />
+                      </td>
+                      <td>
+                        {product?.price?.discountPercentage > 0 && (
+                          <div className='flex gap-x-1 items-center justify-center mt-3'>
+                            <div className='text-gray_r-11 line-through text-caption-1'>
+                              {currencyFormat(product?.price?.price)}
+                            </div>
+                            <div className='badge-solid-red'>
+                              {product?.price?.discountPercentage}%
+                            </div>
                           </div>
+                        )}
+                        <div className='font-normal mt-1'>
+                          {currencyFormat(product?.price?.priceDiscount)}
                         </div>
-                      )}
-                      <div className='font-normal mt-1'>
-                        {currencyFormat(product?.price?.priceDiscount)}
-                      </div>
-                    </td>
-                    <td>
-                      <div className='text-danger-500 font-medium'>
-                        {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
-                      </div>
-                    </td>
-                    <td>
-                      <div className='flex justify-center items-center h-full'>
-                        <button
-                          className='btn-red p-1 ml-1'
-                          onClick={() => setDeleteConfirmation(product)}
-                        >
-                          <TrashIcon className='w-4' />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                ))}
+                      </td>
+                      <td>
+                        <div className='text-danger-500 font-medium'>
+                          {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
+                        </div>
+                      </td>
+                      <td>
+                        <div className='flex justify-center items-center h-full'>
+                          <button
+                            className='btn-red p-1 ml-1'
+                            onClick={() => setDeleteConfirmation(product)}
+                          >
+                            <TrashIcon className='w-4' />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
               </tbody>
             </table>
 
@@ -428,7 +430,7 @@ const Cart = () => {
                 Tanya stock untuk pembelian anda sebelum melanjutkan pembayaran!
                 <span>
                   {' '}
-                  <a href='https://wa.me/628128080622' className='text-danger-500'>
+                  <a href={whatsappUrl()} className='text-danger-500'>
                     Hubungi Kami
                   </a>
                 </span>
diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx
index 9f34362c..884a871f 100644
--- a/src/lib/category/components/Category.jsx
+++ b/src/lib/category/components/Category.jsx
@@ -1,6 +1,7 @@
 import odooApi from '@/core/api/odooApi'
 import Link from '@/core/components/elements/Link/Link'
 import DesktopView from '@/core/components/views/DesktopView'
+import { createSlug } from '@/core/utils/slug'
 import { useEffect, useState } from 'react'
 
 const Category = () => {
@@ -32,7 +33,7 @@ const Category = () => {
         {categories.map((category) => (
           <div key={category.id}>
             <Link
-              href={`/shop/search?category=${category.name}`}
+              href={createSlug('/shop/category/', category.name, category.id)}
               className='category-mega-box__parent'
             >
               {category.name}
@@ -42,7 +43,7 @@ const Category = () => {
                 {category.childs.map((child1Category) => (
                   <div key={child1Category.id}>
                     <Link
-                      href={`/shop/search?category=${child1Category.name}`}
+                      href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
                       className='category-mega-box__child-one mb-4'
                     >
                       {child1Category.name}
@@ -50,7 +51,11 @@ const Category = () => {
                     <div className='flex flex-col gap-y-3'>
                       {child1Category.childs.map((child2Category) => (
                         <Link
-                          href={`/shop/search?category=${child2Category.name}`}
+                          href={createSlug(
+                            '/shop/category/',
+                            child2Category.name,
+                            child2Category.id
+                          )}
                           className='category-mega-box__child-two'
                           key={child2Category.id}
                         >
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 111117c9..f777a3a8 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -20,6 +20,8 @@ import Image from '@/core/components/elements/Image/Image'
 import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
 import ExpedisiList from '../api/ExpedisiList'
+import whatsappUrl from '@/core/utils/whatsappUrl'
+import { createSlug } from '@/core/utils/slug'
 
 const Checkout = () => {
   const router = useRouter()
@@ -166,8 +168,8 @@ const Checkout = () => {
       quantity: product.quantity
     }))
     let data = {
-      partner_shipping_id: selectedAddress.shipping.id,
-      partner_invoice_id: selectedAddress.invoicing.id,
+      partner_shipping_id: auth.partnerId,
+      partner_invoice_id: auth.partnerId,
       order_line: JSON.stringify(productOrder),
       delivery_amount : biayaKirim,
       type: 'sale_order'
@@ -342,7 +344,7 @@ const Checkout = () => {
           <div className='px-4 mb-4'>
             <span className='text-danger-500'>
               *) Terdapat produk yang belum memiliki harga,{' '}
-              <a href='https://wa.me/628128080622' className='underline'>
+              <a href={whatsappUrl()} className='underline'>
                 Hubungi Kami untuk meminta harga.
               </a>
             </span>
@@ -465,7 +467,13 @@ const Checkout = () => {
                           {product.price.priceDiscount > 0 ? (
                             currencyFormat(product?.price?.priceDiscount * product?.quantity)
                           ) : (
-                            <a href='https://wa.me/628128080622' className='underline'>
+                            <a
+                              href={whatsappUrl('product', {
+                                name: product.name,
+                                url: createSlug('/shop/product/', product.name, product.id, true)
+                              })}
+                              className='underline'
+                            >
                               Call For Price{' '}
                             </a>
                           )}
@@ -562,7 +570,7 @@ const Checkout = () => {
                 <div className='mt-4'>
                   <span className='text-danger-500'>
                     *) Terdapat produk yang belum memiliki harga,{' '}
-                    <a href='https://wa.me/628128080622' className='underline'>
+                    <a href={whatsappUrl()} className='underline'>
                       Hubungi Kami untuk meminta harga.
                     </a>
                   </span>
diff --git a/src/lib/checkout/components/FinishCheckout.jsx b/src/lib/checkout/components/FinishCheckout.jsx
index cd93e3a4..92245e31 100644
--- a/src/lib/checkout/components/FinishCheckout.jsx
+++ b/src/lib/checkout/components/FinishCheckout.jsx
@@ -14,7 +14,7 @@ const FinishCheckout = ({ query }) => {
           <p className='text-caption-2 text-warning-800'>No. Transaksi</p>
         </div>
         <Link
-          href='/my/transactions'
+          href='/my/quotations'
           className='bg-warning-400 text-warning-900 rounded-b-xl py-4 block'
         >
           Lihat detail pembelian Anda disini
diff --git a/src/lib/checkout/email/FinishCheckoutEmail.jsx b/src/lib/checkout/email/FinishCheckoutEmail.jsx
index e8f63afa..d40ce7d4 100644
--- a/src/lib/checkout/email/FinishCheckoutEmail.jsx
+++ b/src/lib/checkout/email/FinishCheckoutEmail.jsx
@@ -1,5 +1,6 @@
 import currencyFormat from '@/core/utils/currencyFormat'
 import toTitleCase from '@/core/utils/toTitleCase'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 import {
   Body,
   Column,
@@ -255,7 +256,7 @@ const FinishCheckoutEmail = ({ transaction, payment, statusPayment }) => {
                 Jika ada pertanyaan seputar teknis pembayaran {transaction.address.customer.name}{' '}
                 dapat hubungi kami melalui Email{' '}
                 <a href='mailto:sales@indoteknik.com'>(sales@indoteknik.com)</a> atau Whatsapp{' '}
-                <a href='https://wa.me/628128080622' target='_blank' rel='noreferrer'>
+                <a href={whatsappUrl()} target='_blank' rel='noreferrer'>
                   (+62 812-8080-622)
                 </a>
                 .
diff --git a/src/lib/content/components/PageContent.jsx b/src/lib/content/components/PageContent.jsx
index 61e5381d..8c467999 100644
--- a/src/lib/content/components/PageContent.jsx
+++ b/src/lib/content/components/PageContent.jsx
@@ -6,13 +6,21 @@ const PageContent = ({ path }) => {
   const fetchContent = async () => await pageContentApi({ path })
   const content = useQuery(`content-${path}`, fetchContent)
 
+  if (content.isLoading) {
+    return (
+      <div className='flex justify-center my-6'>
+        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+      </div>
+    )
+  }
+
   if (content.data?.id) {
     let parsedContent = content.data.content
     parsedContent = parsedContent.replaceAll(
       'src="/web/image',
       `src="${process.env.NEXT_PUBLIC_ODOO_API_HOST}/web/image`
     )
-    const contentClassNames = ` 
+    const contentClassNames = `
       prose 
       prose-gray 
       prose-a:text-danger-500 
@@ -23,19 +31,12 @@ const PageContent = ({ path }) => {
       prose-img:mb-1 
       prose-img:inline-block
       prose-hr:my-3
+      max-w-none
     `
 
     return <div className={contentClassNames} dangerouslySetInnerHTML={{ __html: parsedContent }} />
   }
 
-  if (content.isLoading) {
-    return (
-      <div className='flex justify-center my-6'>
-        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
-      </div>
-    )
-  }
-
   return <></>
 }
 
diff --git a/src/lib/flashSale/api/flashSaleApi.js b/src/lib/flashSale/api/flashSaleApi.js
new file mode 100644
index 00000000..115b07dc
--- /dev/null
+++ b/src/lib/flashSale/api/flashSaleApi.js
@@ -0,0 +1,8 @@
+import odooApi from '@/core/api/odooApi'
+
+const flashSaleApi = async () => {
+  const flashSale = await odooApi('GET', '/api/v1/flashsale/header')
+  return flashSale
+}
+
+export default flashSaleApi
diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx
new file mode 100644
index 00000000..e4a4a25c
--- /dev/null
+++ b/src/lib/flashSale/components/FlashSale.jsx
@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react'
+import flashSaleApi from '../api/flashSaleApi'
+import Image from '@/core/components/elements/Image/Image'
+import CountDown from '@/core/components/elements/CountDown/CountDown'
+import productSearchApi from '@/lib/product/api/productSearchApi'
+import ProductSlider from '@/lib/product/components/ProductSlider'
+
+const FlashSale = () => {
+  const [flashSales, setFlashSales] = useState(null)
+
+  useEffect(() => {
+    const loadFlashSales = async () => {
+      const dataFlashSales = await flashSaleApi()
+      setFlashSales(dataFlashSales)
+    }
+    loadFlashSales()
+  }, [])
+
+  return (
+    flashSales?.length > 0 && (
+      <div className='px-4 sm:px-0 grid grid-cols-1 gap-y-8'>
+        {flashSales.map((flashSale, index) => (
+          <div key={index}>
+            <div className='flex gap-x-3 mb-4 justify-between sm:justify-start'>
+              <div className='font-medium sm:text-h-lg mt-1.5'>{flashSale.name}</div>
+              <CountDown initialTime={flashSale.duration} />
+            </div>
+
+            <div className='relative'>
+              <Image
+                src={flashSale.banner}
+                alt={flashSale.name}
+                className='w-full rounded mb-4 hidden sm:block'
+              />
+              <Image
+                src={flashSale.bannerMobile}
+                alt={flashSale.name}
+                className='w-full rounded mb-4 block sm:hidden'
+              />
+              <FlashSaleProduct flashSaleId={flashSale.pricelistId} />
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  )
+}
+
+const FlashSaleProduct = ({ flashSaleId }) => {
+  const [products, setProducts] = useState(null)
+
+  useEffect(() => {
+    const loadProducts = async () => {
+      const dataProducts = await productSearchApi({
+        query: `fq=flashsale_id_i:${flashSaleId}&fq=flashsale_price_f:[1 TO *]&limit=500`,
+        operation: 'AND'
+      })
+      setProducts(dataProducts.response)
+    }
+    loadProducts()
+  }, [flashSaleId])
+
+  return <ProductSlider products={products} />
+}
+
+export default FlashSale
diff --git a/src/lib/form/components/KunjunganService.jsx b/src/lib/form/components/KunjunganService.jsx
index dfe5873e..076f6814 100644
--- a/src/lib/form/components/KunjunganService.jsx
+++ b/src/lib/form/components/KunjunganService.jsx
@@ -6,7 +6,7 @@ import ReCAPTCHA from 'react-google-recaptcha'
 import { Controller, useForm } from 'react-hook-form'
 import { toast } from 'react-hot-toast'
 import * as Yup from 'yup'
-import createLeadsApi from '../api/createLeadsApi'
+import createLeadApi from '../api/createLeadApi'
 
 const CreateKunjunganService = () => {
   const {
@@ -41,18 +41,32 @@ const CreateKunjunganService = () => {
     }
     const data = {
       ...values,
-      name : 'Pengajuan Kunjungan Service - ' + values.company,
-      contact_name : values.cp,
-      email_from : values.email,
-      phone : values.mobile,
-      description :  "\r\n Nama Perusahaan : " + values.company + " \r\n  Alamat  : " + values.address + " \r\n  Propinsi  : " + values.city + " \r\n  Telepon: " + values.phone + " \r\n  Handphone : " + values.mobile +" \r\n  Email  : " + values.email + " \r\n Keterangan  : " + values.description ,
+      name: 'Pengajuan Kunjungan Service - ' + values.company,
+      contact_name: values.cp,
+      email_from: values.email,
+      phone: values.mobile,
+      description:
+        '\r\n Nama Perusahaan : ' +
+        values.company +
+        ' \r\n  Alamat  : ' +
+        values.address +
+        ' \r\n  Propinsi  : ' +
+        values.city +
+        ' \r\n  Telepon: ' +
+        values.phone +
+        ' \r\n  Handphone : ' +
+        values.mobile +
+        ' \r\n  Email  : ' +
+        values.email +
+        ' \r\n Keterangan  : ' +
+        values.description
     }
 
-    const create_leads = await createLeadsApi({ data })
+    const create_leads = await createLeadApi({ data })
     if (create_leads) {
       toast.success('Berhasil menambahkan alamat')
       reset()
-     recaptchaRef.current.reset()
+      recaptchaRef.current.reset()
     }
   }
   return (
@@ -125,9 +139,7 @@ const CreateKunjunganService = () => {
                 type='text'
                 className='form-input'
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.cp?.message}
-              </div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.cp?.message}</div>
             </div>
           </div>
           <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
@@ -156,7 +168,9 @@ const CreateKunjunganService = () => {
           </div>
           <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
             <div>
-              <label className='form-label mb-2'>Sebutkan: Merek, Tipe, Permasalahan, Service, Perawatan</label>
+              <label className='form-label mb-2'>
+                Sebutkan: Merek, Tipe, Permasalahan, Service, Perawatan
+              </label>
               <textarea {...register('description')} type='text' className='form-input' />
               <div className='text-caption-2 text-danger-500 mt-1'>
                 {errors.description?.message}
@@ -181,24 +195,24 @@ const CreateKunjunganService = () => {
   )
 }
 const validationSchema = Yup.object().shape({
-    company: Yup.string().required('Harus di-isi'),
-    email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
-    phone: Yup.string().required('Harus di-isi'),
-    city: Yup.string().required('Harus di-isi'),
-    cp: Yup.string().required('Harus di-isi'),
-    mobile: Yup.string().required('Harus di-isi'),
-    email: Yup.string().required('Harus di-isi'),
-    address: Yup.string().required('Harus di-isi')
+  company: Yup.string().required('Harus di-isi'),
+  email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
+  phone: Yup.string().required('Harus di-isi'),
+  city: Yup.string().required('Harus di-isi'),
+  cp: Yup.string().required('Harus di-isi'),
+  mobile: Yup.string().required('Harus di-isi'),
+  email: Yup.string().required('Harus di-isi'),
+  address: Yup.string().required('Harus di-isi')
 })
 const defaultValues = {
-    company:'',
-    email: '',
-    phone: '',
-    city: '',
-    cp: '',
-    mobile: '',
-    email: '',
-    address: ''
+  company: '',
+  email: '',
+  phone: '',
+  city: '',
+  cp: '',
+  mobile: '',
+  email: '',
+  address: ''
 }
 
 export default CreateKunjunganService
diff --git a/src/lib/form/components/MediaRelations.jsx b/src/lib/form/components/MediaRelations.jsx
new file mode 100644
index 00000000..05ae7e03
--- /dev/null
+++ b/src/lib/form/components/MediaRelations.jsx
@@ -0,0 +1,237 @@
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
+import cityApi from '@/lib/address/api/cityApi'
+import { yupResolver } from '@hookform/resolvers/yup'
+import React, { useEffect, useRef, useState } from 'react'
+import ReCAPTCHA from 'react-google-recaptcha'
+import { Controller, useForm } from 'react-hook-form'
+import { toast } from 'react-hot-toast'
+import * as Yup from 'yup'
+import createLeadApi from '../api/createLeadApi'
+
+const CreateMediaRelations = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    control,
+    reset
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+    defaultValues
+  })
+  const list_unit = [
+    {
+      value: 'Media Cetak',
+      label: 'Media Cetak'
+    },
+    {
+      value: 'Media',
+      label: 'Hospitality'
+    },
+    {
+      value: 'Automotive',
+      label: 'Automotive'
+    },
+    {
+      value: 'Retail',
+      label: 'Retail'
+    },
+    {
+      value: 'Maining',
+      label: 'Maining'
+    },
+    {
+      value: 'Lain - Lain',
+      label: 'Lain - Lain'
+    }
+  ]
+  const [cities, setCities] = useState([])
+  const [company_unit, setCompany_unit] = useState(list_unit)
+
+  const recaptchaRef = useRef(null)
+
+  useEffect(() => {
+    const loadCities = async () => {
+      let dataCities = await cityApi()
+      dataCities = dataCities.map((city) => ({ value: city.id, label: city.name }))
+      setCities(dataCities)
+    }
+    loadCities()
+  }, [])
+
+  const onSubmitHandler = async (values) => {
+    const attachment = document.getElementById('attachment').files[0]
+
+    const recaptchaValue = recaptchaRef.current.getValue()
+    if (!recaptchaValue) {
+      toast.error('Catcha harus diisi')
+      return
+    }
+    const data = {
+      ...values,
+      name: 'Form Merchant - ' + values.company,
+      contact_name: values.cp,
+      email_from: values.email,
+      phone: values.phone,
+      description:
+        'Nama Perusahaan : ' +
+        values.company +
+        ' \r\n  Alamat  : ' +
+        values.address +
+        ' \r\n  Kota  : ' +
+        values.city +
+        ' \r\n  Unit Perusahaan  : ' +
+        values.company_unit +
+        ' \r\n  Telepon: ' +
+        values.phone +
+        ' \r\n  Email  : ' +
+        values.email +
+        ' \r\n  Website : ' +
+        values.website +
+        ' \r\n No Hp : ' +
+        values.mobile +
+        'Keterangan  : ' +
+        values.description
+    }
+    const create_leads = await createLeadApi({ data })
+    if (create_leads) {
+      toast.success('Berhasil menambahkan data')
+      reset()
+      recaptchaRef.current.reset()
+    }
+  }
+  return (
+    <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
+      <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Form Media dan Relasi</h1>
+      <div className='w-full  p-4 bg-white border border-gray_r-6 rounded'>
+        <form onSubmit={handleSubmit(onSubmitHandler)}>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Nama Lengkap *</label>
+              <input
+                {...register('name')}
+                placeholder='Jhone Doe'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Nama Perusahan *</label>
+              <input
+                {...register('company')}
+                placeholder='PT.Indoteknik'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.company?.message}</div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Alamat Email *</label>
+              <input
+                {...register('email')}
+                placeholder='contoh@email.com'
+                type='email'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>No. Telp *</label>
+              <input
+                {...register('phone')}
+                placeholder='021-XXXX'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.message}</div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Jenis Media / Partnetship *</label>
+              <Controller
+                name='company_unit'
+                control={control}
+                render={(props) => <HookFormSelect {...props} options={company_unit} />}
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.company_unit?.message}
+              </div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Jika anda memiliki media lain, sebutkan </label>
+              <input
+                {...register('other_media')}
+                placeholder='021-XXXX'
+                type='text'
+                className='form-input'
+              />
+            </div>
+          </div>
+
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>
+                Lampiran (Company Peofile, Proposal Kerjasama, dll)
+              </label>
+              <input
+                {...register('attachment')}
+                type='file'
+                className='form-input'
+                accept='application/pdf'
+                id='attachment'
+                placeholder='Hello'
+              />
+            </div>
+          </div>
+
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
+                Simpan
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+const validationSchema = Yup.object().shape({
+  company: Yup.string().required('Harus di-isi'),
+  email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
+  phone: Yup.string().required('Harus di-isi'),
+  cp: Yup.string().required('Harus di-isi'),
+  city: Yup.string().required('Harus di-isi'),
+  company_unit: Yup.string().required('Harus di-isi'),
+  address: Yup.string().required('Harus di-isi'),
+  website: Yup.string().required('Harus di-isi'),
+  mobile: Yup.string().required('Harus di-isi')
+})
+const defaultValues = {
+  company: '',
+  email: '',
+  phone: '',
+  city: '',
+  company_unit: '',
+  cp: '',
+  address: '',
+  website: '',
+  mobile: ''
+}
+
+export default CreateMediaRelations
diff --git a/src/lib/form/components/Merchant.jsx b/src/lib/form/components/Merchant.jsx
new file mode 100644
index 00000000..75b4e132
--- /dev/null
+++ b/src/lib/form/components/Merchant.jsx
@@ -0,0 +1,264 @@
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
+import cityApi from '@/lib/address/api/cityApi'
+import { yupResolver } from '@hookform/resolvers/yup'
+import React, { useEffect, useRef, useState } from 'react'
+import ReCAPTCHA from 'react-google-recaptcha'
+import { Controller, useForm } from 'react-hook-form'
+import { toast } from 'react-hot-toast'
+import * as Yup from 'yup'
+import createLeadApi from '../api/createLeadApi'
+
+const CreateMerchant = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    control,
+    reset
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+    defaultValues
+  })
+  const list_unit = [
+    {
+      value: 'Manufacturing',
+      label: 'Manufacturing'
+    },
+    {
+      value: 'Hospitality',
+      label: 'Hospitality'
+    },
+    {
+      value: 'Automotive',
+      label: 'Automotive'
+    },
+    {
+      value: 'Retail',
+      label: 'Retail'
+    },
+    {
+      value: 'Maining',
+      label: 'Maining'
+    },
+    {
+      value: 'Lain - Lain',
+      label: 'Lain - Lain'
+    }
+  ]
+  const [cities, setCities] = useState([])
+  const [company_unit, setCompany_unit] = useState(list_unit)
+
+  const recaptchaRef = useRef(null)
+
+  useEffect(() => {
+    const loadCities = async () => {
+      let dataCities = await cityApi()
+      dataCities = dataCities.map((city) => ({ value: city.id, label: city.name }))
+      setCities(dataCities)
+    }
+    loadCities()
+  }, [])
+
+  const onSubmitHandler = async (values) => {
+    const recaptchaValue = recaptchaRef.current.getValue()
+    if (!recaptchaValue) {
+      toast.error('Catcha harus diisi')
+      return
+    }
+    const data = {
+      ...values,
+      name: 'Form Merchant - ' + values.company,
+      contact_name: values.cp,
+      email_from: values.email,
+      phone: values.phone,
+      description:
+        'Nama Perusahaan : ' +
+        values.company +
+        ' \r\n  Alamat  : ' +
+        values.address +
+        ' \r\n  Kota  : ' +
+        values.city +
+        ' \r\n  Unit Perusahaan  : ' +
+        values.company_unit +
+        ' \r\n  Telepon: ' +
+        values.phone +
+        ' \r\n  Email  : ' +
+        values.email +
+        ' \r\n  Website : ' +
+        values.website +
+        ' \r\n No Hp : ' +
+        values.mobile +
+        'Keterangan  : ' +
+        values.description
+    }
+    const create_leads = await createLeadApi({ data })
+    if (create_leads) {
+      toast.success('Berhasil menambahkan data')
+      reset()
+      recaptchaRef.current.reset()
+    }
+  }
+  return (
+    <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
+      <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Form Merchant</h1>
+      <div className='w-full  p-4 bg-white border border-gray_r-6 rounded'>
+        <div
+          class='flex items-center bg-blue-100 border border-blue-400 text-blue-500 font-bold px-4 py-3 mb-4'
+          role='alert'
+        >
+          <p>
+            Penjualan online adalah hal yang HARUS dilakukan mulai sekarang. Perubahan dalam banyak
+            industri dan pola pembelian. Gabung dengan platform kami dan mulai penjualan lansung di
+            ribuan perusahaan d seluruh Indonesia.{' '}
+          </p>
+        </div>
+        <form onSubmit={handleSubmit(onSubmitHandler)}>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Nama Perusahan *</label>
+              <input
+                {...register('company')}
+                placeholder='PT.Indoteknik'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.company?.message}</div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Alamat*</label>
+              <input
+                {...register('address')}
+                placeholder='jl. Bandengan no.31 '
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.address?.message}</div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>No. Telp *</label>
+              <input
+                {...register('phone')}
+                placeholder='021-XXXX'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.message}</div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Kota*</label>
+              <Controller
+                name='city'
+                control={control}
+                render={(props) => <HookFormSelect {...props} options={cities} />}
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Unit Perusahaan*</label>
+              <Controller
+                name='company_unit'
+                control={control}
+                render={(props) => <HookFormSelect {...props} options={company_unit} />}
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.company_unit?.message}
+              </div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Website *</label>
+              <input
+                {...register('website')}
+                placeholder='https://indoteknik.com'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.website?.message}</div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Contact Person*</label>
+              <input
+                {...register('cp')}
+                placeholder='Jhone doe'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.cp?.message}</div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>No HP *</label>
+              <input
+                {...register('mobile')}
+                placeholder='628XXXXXXX'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Alamat Email *</label>
+              <input
+                {...register('email')}
+                placeholder='contoh@email.com'
+                type='email'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
+                Simpan
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+const validationSchema = Yup.object().shape({
+  company: Yup.string().required('Harus di-isi'),
+  email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
+  phone: Yup.string().required('Harus di-isi'),
+  cp: Yup.string().required('Harus di-isi'),
+  city: Yup.string().required('Harus di-isi'),
+  company_unit: Yup.string().required('Harus di-isi'),
+  address: Yup.string().required('Harus di-isi'),
+  website: Yup.string().required('Harus di-isi'),
+  mobile: Yup.string().required('Harus di-isi')
+})
+const defaultValues = {
+  company: '',
+  email: '',
+  phone: '',
+  city: '',
+  company_unit: '',
+  cp: '',
+  address: '',
+  website: '',
+  mobile: ''
+}
+
+export default CreateMerchant
diff --git a/src/lib/form/components/PembayaranTempo.jsx b/src/lib/form/components/PembayaranTempo.jsx
index 5f32753e..ffdb0961 100644
--- a/src/lib/form/components/PembayaranTempo.jsx
+++ b/src/lib/form/components/PembayaranTempo.jsx
@@ -52,7 +52,7 @@ const PembayaranTempo = () => {
   return (
     <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
       <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Pembayaran Tempo</h1>
-      
+
       <div className='w-full grid grid-cols-1 md:grid-cols-2'>
         <form onSubmit={handleSubmit(onSubmitHandler)} className='grid grid-cols-1 gap-y-6'>
           <div>
diff --git a/src/lib/form/components/SuratDukungan.jsx b/src/lib/form/components/SuratDukungan.jsx
index 22452b3c..0eab84a4 100644
--- a/src/lib/form/components/SuratDukungan.jsx
+++ b/src/lib/form/components/SuratDukungan.jsx
@@ -6,7 +6,7 @@ import ReCAPTCHA from 'react-google-recaptcha'
 import { Controller, useForm } from 'react-hook-form'
 import { toast } from 'react-hot-toast'
 import * as Yup from 'yup'
-import createLeadsApi from '../api/createLeadsApi'
+import createLeadsApi from '../api/createLeadApi'
 
 const CreateSuratDukungan = () => {
   const {
@@ -41,18 +41,34 @@ const CreateSuratDukungan = () => {
     }
     const data = {
       ...values,
-      name : 'Pengajuan Kunjungan Service - ' + values.company,
-      contact_name : values.cp,
-      email_from : values.email,
-      phone : values.mobile,
-      description :  "\r\n Nama Perusahaan : " + values.company + " \r\n  Alamat  : " + values.address + " \r\n  Propinsi  : " + values.city + " \r\n  Telepon: " + values.phone + " \r\n  Handphone : " + values.mobile +" \r\n  Email  : " + values.email + " \r\n Keterangan  : " + values.description ,
+      name: 'Permintaan Surat Dukungan - ' + values.company,
+      contact_name: values.company,
+      email_from: values.email,
+      phone: values.phone,
+      description:
+        'Nama Perusahaan : ' +
+        values.company +
+        ' \r\n  Alamat  : ' +
+        values.address +
+        ' \r\n  Npwp  : ' +
+        values.npwp +
+        ' \r\n  Telepon: ' +
+        values.phone +
+        ' \r\n  Email  : ' +
+        values.email +
+        ' \r\n  Pengadaan : ' +
+        values.pengadaan +
+        ' \r\n  Alamat 2 : ' +
+        values.address2 +
+        'Keterangan  : ' +
+        values.description
     }
 
     const create_leads = await createLeadsApi({ data })
     if (create_leads) {
       toast.success('Berhasil menambahkan alamat')
       reset()
-     recaptchaRef.current.reset()
+      recaptchaRef.current.reset()
     }
   }
   return (
@@ -63,9 +79,10 @@ const CreateSuratDukungan = () => {
           class='flex items-center bg-blue-100 border border-blue-400 text-blue-500 font-bold px-4 py-3 mb-4'
           role='alert'
         >
-          <p>
-          Lengkapi form berikut untuk melakukan konfirmasi pembayaran.
-          </p>
+          <p>Lengkapi form berikut untuk melakukan konfirmasi pembayaran.</p>
+        </div>
+        <div className=' w-full md:w-[50%] p-4 bg-gray-50 border border-gray_r-6 rounded text-center'>
+          <h1>Data Peserta</h1>
         </div>
         <form onSubmit={handleSubmit(onSubmitHandler)}>
           <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
@@ -82,18 +99,6 @@ const CreateSuratDukungan = () => {
           </div>
           <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
             <div>
-              <label className='form-label mb-2'>No. Telp *</label>
-              <input
-                {...register('phone')}
-                placeholder='021-XXXX'
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.message}</div>
-            </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
               <label className='form-label mb-2'>Alamat*</label>
               <input
                 {...register('address')}
@@ -106,39 +111,26 @@ const CreateSuratDukungan = () => {
           </div>
           <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
             <div>
-              <label className='form-label mb-2'>Kota*</label>
-              <Controller
-                name='city'
-                control={control}
-                render={(props) => <HookFormSelect {...props} options={cities} />}
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div>
-            </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>Contact Person*</label>
+              <label className='form-label mb-2'>No. Telp *</label>
               <input
-                {...register('cp')}
-                placeholder='Jhone doe'
+                {...register('phone')}
+                placeholder='021-XXXX'
                 type='text'
                 className='form-input'
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.cp?.message}
-              </div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.message}</div>
             </div>
           </div>
           <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
             <div>
-              <label className='form-label mb-2'>No HP *</label>
+              <label className='form-label mb-2'>NPWP *</label>
               <input
-                {...register('mobile')}
-                placeholder='628XXXXXXX'
+                {...register('npwp')}
+                placeholder='npwp number'
                 type='text'
                 className='form-input'
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.npwp?.message}</div>
             </div>
           </div>
           <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
@@ -153,10 +145,36 @@ const CreateSuratDukungan = () => {
               <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
             </div>
           </div>
+          <div className='w-[50%] mt-10 p-4 bg-gray-50 border border-gray_r-6 rounded text-center'>
+            <h1>Data Peserta</h1>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Pengadaan *</label>
+              <input {...register('pengadaan')} placeholder='' type='text' className='form-input' />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.pengadaan?.message}</div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Alamat *</label>
+              <textarea
+                {...register('address2')}
+                placeholder=''
+                type='text'
+                className='form-input  h-[120px]'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.address2?.message}</div>
+            </div>
+          </div>
+          <div className='w-[50%] mt-10 p-4 bg-gray-50 border border-gray_r-6 rounded text-center'>
+            <h1>Data Produk</h1>
+          </div>
+
           <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
             <div>
-              <label className='form-label mb-2'>Sebutkan: Merek, Tipe, Permasalahan, Service, Perawatan</label>
-              <textarea {...register('description')} type='text' className='form-input' />
+              <label className='form-label mb-2'>Produk</label>
+              <textarea {...register('description')} type='text' className='form-input h-[120px]' />
               <div className='text-caption-2 text-danger-500 mt-1'>
                 {errors.description?.message}
               </div>
@@ -180,24 +198,24 @@ const CreateSuratDukungan = () => {
   )
 }
 const validationSchema = Yup.object().shape({
-    company: Yup.string().required('Harus di-isi'),
-    email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
-    phone: Yup.string().required('Harus di-isi'),
-    city: Yup.string().required('Harus di-isi'),
-    cp: Yup.string().required('Harus di-isi'),
-    mobile: Yup.string().required('Harus di-isi'),
-    email: Yup.string().required('Harus di-isi'),
-    address: Yup.string().required('Harus di-isi')
+  company: Yup.string().required('Harus di-isi'),
+  email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
+  phone: Yup.string().required('Harus di-isi'),
+  npwp: Yup.string().required('Harus di-isi'),
+  pengadaan: Yup.string().required('Harus di-isi'),
+  email: Yup.string().required('Harus di-isi'),
+  address: Yup.string().required('Harus di-isi'),
+  address2: Yup.string().required('Harus di-isi')
 })
 const defaultValues = {
-    company:'',
-    email: '',
-    phone: '',
-    city: '',
-    cp: '',
-    mobile: '',
-    email: '',
-    address: ''
+  company: '',
+  email: '',
+  phone: '',
+  pengadaan: '',
+  npwp: '',
+  email: '',
+  address: '',
+  address2: ''
 }
 
 export default CreateSuratDukungan
diff --git a/src/lib/home/components/HeroBanner.jsx b/src/lib/home/components/HeroBanner.jsx
index e6136e03..50cfc0ff 100644
--- a/src/lib/home/components/HeroBanner.jsx
+++ b/src/lib/home/components/HeroBanner.jsx
@@ -10,6 +10,7 @@ import 'swiper/css/pagination'
 import 'swiper/css/autoplay'
 import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
+import Link from '@/core/components/elements/Link/Link'
 
 const HeroBanner = () => {
   const { heroBanners } = useHeroBanner()
@@ -41,7 +42,9 @@ const HeroBanner = () => {
             <Swiper slidesPerView={1} className='border border-gray_r-6' {...swiperBannerMobile}>
               {heroBanners.data?.map((banner, index) => (
                 <SwiperSlide key={index}>
-                  <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
+                  <Link href={banner.url || ''} className='w-full h-auto'>
+                    <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
+                  </Link>
                 </SwiperSlide>
               ))}
             </Swiper>
@@ -50,7 +53,9 @@ const HeroBanner = () => {
             <Swiper slidesPerView={1} className='border border-gray_r-6' {...swiperBannerDesktop}>
               {heroBanners.data?.map((banner, index) => (
                 <SwiperSlide key={index}>
-                  <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
+                  <Link href={banner.url || ''} className='w-full h-auto'>
+                    <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
+                  </Link>
                 </SwiperSlide>
               ))}
             </Swiper>
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
index f97943cb..34c50220 100644
--- a/src/lib/home/components/PreferredBrand.jsx
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -14,7 +14,7 @@ const PreferredBrand = () => {
       <div className='flex justify-between items-center mb-4'>
         <div className='font-medium sm:text-h-lg'>Brand Pilihan</div>
         {isDesktop && (
-          <Link href='/' className='btn-yellow !text-gray_r-12'>
+          <Link href='/shop/brands' className='btn-yellow !text-gray_r-12'>
             Lihat Semua
           </Link>
         )}
diff --git a/src/lib/invoice/components/Invoices.jsx b/src/lib/invoice/components/Invoices.jsx
index 6f7d54a0..96686bbb 100644
--- a/src/lib/invoice/components/Invoices.jsx
+++ b/src/lib/invoice/components/Invoices.jsx
@@ -24,7 +24,7 @@ const Invoices = () => {
   const router = useRouter()
   const { q = '', page = 1 } = router.query
 
-  const limit = 10
+  const limit = 15
 
   const query = {
     name: q,
@@ -36,7 +36,7 @@ const Invoices = () => {
   const [inputQuery, setInputQuery] = useState(q)
   const [toOthers, setToOthers] = useState(null)
 
-  const pageCount = Math.ceil(invoices?.data?.saleOrderTotal / limit)
+  const pageCount = Math.ceil(invoices?.data?.invoiceTotal / limit)
   let pageQuery = _.omit(query, ['limit', 'offset'])
   pageQuery = _.pickBy(pageQuery, _.identity)
   pageQuery = toQuery(pageQuery)
@@ -78,7 +78,7 @@ const Invoices = () => {
           {invoices.data?.invoices?.map((invoice, index) => (
             <div className='p-4 shadow border border-gray_r-3 rounded-md' key={index}>
               <div className='grid grid-cols-2'>
-                <Link href={`/my/invoice/${invoice.id}`}>
+                <Link href={`${router.pathname}/${invoice.id}`}>
                   <span className='text-caption-2 text-gray_r-11'>No. Invoice</span>
                   <h2 className='text-danger-500 mt-1'>{invoice.name}</h2>
                 </Link>
@@ -91,7 +91,7 @@ const Invoices = () => {
                   <EllipsisVerticalIcon className='w-5 h-5' onClick={() => setToOthers(invoice)} />
                 </div>
               </div>
-              <Link href={`/my/invoice/${invoice.id}`}>
+              <Link href={`${router.pathname}/${invoice.id}`}>
                 <div className='grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal'>
                   <p>{invoice.invoiceDate}</p>
                   <p className='text-right'>{invoice.paymentTerm}</p>
@@ -214,7 +214,7 @@ const Invoices = () => {
                 {invoices.data?.invoices?.map((invoice) => (
                   <tr key={invoice.id}>
                     <td>
-                      <Link href={`/my/invoice/${invoice.id}`}>{invoice.name}</Link>
+                      <Link href={`${router.pathname}/${invoice.id}`}>{invoice.name}</Link>
                     </td>
                     <td>{invoice.purchaseOrderName || '-'}</td>
                     <td>{invoice.invoiceDate}</td>
@@ -235,7 +235,7 @@ const Invoices = () => {
             <Pagination
               pageCount={pageCount}
               currentPage={parseInt(page)}
-              url={`/my/transactions${pageQuery}`}
+              url={`/my/invoices${pageQuery}`}
               className='mt-2 mb-2'
             />
           </div>
diff --git a/src/lib/product/api/productApi.js b/src/lib/product/api/productApi.js
index 8156d1ec..33f1265c 100644
--- a/src/lib/product/api/productApi.js
+++ b/src/lib/product/api/productApi.js
@@ -1,8 +1,8 @@
 import odooApi from '@/core/api/odooApi'
 
-const productApi = async ({ id }) => {
+const productApi = async ({ id, headers = {} }) => {
   if (!id) return
-  const dataProduct = await odooApi('GET', `/api/v2/product/${id}`)
+  const dataProduct = await odooApi('GET', `/api/v2/product/${id}`, {}, headers)
   return dataProduct
 }
 
diff --git a/src/lib/product/api/productSearchApi.js b/src/lib/product/api/productSearchApi.js
index 71fb72e6..1626b7b7 100644
--- a/src/lib/product/api/productSearchApi.js
+++ b/src/lib/product/api/productSearchApi.js
@@ -1,9 +1,9 @@
 import _ from 'lodash-contrib'
 import axios from 'axios'
 
-const productSearchApi = async ({ query }) => {
+const productSearchApi = async ({ query, operation = 'AND' }) => {
   const dataProductSearch = await axios(
-    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?${query}&operation=OR`
+    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?${query}&operation=${operation}`
   )
   return dataProductSearch.data
 }
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index bb2b2db9..8ce6da00 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -11,7 +11,9 @@ import { updateItemCart } from '@/core/utils/cart'
 import { useRouter } from 'next/router'
 import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
-import { Toast } from 'flowbite-react'
+import ProductCard from '../ProductCard'
+import productSimilarApi from '../../api/productSimilarApi'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -59,7 +61,6 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
       selected: true
     })
     setAddCartAlert(true)
-    // toast.success('Berhasil menambahkan ke keranjang')
   }
 
   const handleBuy = (variantId) => {
@@ -85,61 +86,117 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     `fq=-manufacture_id_i:${product.manufacture?.id || 0}`
   ].join('&')
 
+  const [productSimilarInBrand, setProductSimilarInBrand] = useState(null)
+
+  useEffect(() => {
+    const loadProductSimilarInBrand = async () => {
+      const productSimilarQuery = [product?.name, `fq=-product_id_i:${product.id}`].join('&')
+      const dataProductSimilar = await productSimilarApi({ query: productSimilarQuery })
+      setProductSimilarInBrand(dataProductSimilar.products)
+    }
+    if (!productSimilarInBrand) loadProductSimilarInBrand()
+  }, [product, productSimilarInBrand])
+
   return (
     <DesktopView>
       <div className='container mx-auto pt-10'>
         <div className='flex'>
-          <div className='w-[30%]'>
-            <Image
-              src={product.image}
-              alt={product.name}
-              className='h-96 object-contain object-center w-full border border-gray_r-4'
-            />
-          </div>
-          <div className='w-[50%] px-4'>
-            <h1 className='text-title-md leading-10 font-medium'>{product?.name}</h1>
-            <div className='mt-10'>
-              <div className='flex p-3'>
-                <div className='w-1/4 text-gray_r-12/70'>Nomor SKU</div>
-                <div className='w-3/4'>SKU-{product.id}</div>
-              </div>
-              <div className='flex p-3 bg-gray_r-4'>
-                <div className='w-1/4 text-gray_r-12/70'>Part Number</div>
-                <div className='w-3/4'>{product.code || '-'}</div>
+          <div className='w-full flex flex-wrap'>
+            <div className='w-5/12'>
+              <Image
+                src={product.image}
+                alt={product.name}
+                className='h-96 object-contain object-center w-full border border-gray_r-4'
+              />
+            </div>
+
+            <div className='w-7/12 px-4'>
+              <h1 className='text-title-md leading-10 font-medium'>{product?.name}</h1>
+              <div className='mt-10'>
+                <div className='flex p-3'>
+                  <div className='w-1/4 text-gray_r-12/70'>Nomor SKU</div>
+                  <div className='w-3/4'>SKU-{product.id}</div>
+                </div>
+                <div className='flex p-3 bg-gray_r-4'>
+                  <div className='w-1/4 text-gray_r-12/70'>Part Number</div>
+                  <div className='w-3/4'>{product.code || '-'}</div>
+                </div>
+                <div className='flex p-3'>
+                  <div className='w-1/4 text-gray_r-12/70'>Manufacture</div>
+                  <div className='w-3/4'>
+                    {product.manufacture?.name ? (
+                      <Link
+                        href={createSlug(
+                          '/shop/brands/',
+                          product.manufacture?.name,
+                          product.manufacture?.id
+                        )}
+                      >
+                        {product.manufacture?.name}
+                      </Link>
+                    ) : (
+                      <div>-</div>
+                    )}
+                  </div>
+                </div>
+                <div className='flex p-3 bg-gray_r-4'>
+                  <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div>
+                  <div className='w-3/4'>
+                    {product?.weight > 0 && <span>{product?.weight} KG</span>}
+                    {product?.weight == 0 && (
+                      <a
+                        href={whatsappUrl('productWeight', {
+                          name: product.name,
+                          url: createSlug('/shop/product/', product.name, product.id, true)
+                        })}
+                        className='text-danger-500 font-medium'
+                      >
+                        Tanya Berat
+                      </a>
+                    )}
+                  </div>
+                </div>
               </div>
-              <div className='flex p-3'>
-                <div className='w-1/4 text-gray_r-12/70'>Manufacture</div>
-                <div className='w-3/4'>
-                  {product.manufacture?.name ? (
-                    <Link
-                      href={createSlug(
-                        '/shop/brands/',
-                        product.manufacture?.name,
-                        product.manufacture?.id
-                      )}
+            </div>
+
+            <div className='w-full'>
+              <div className='mt-12'>
+                <div className='text-h-lg font-semibold'>Informasi Produk</div>
+                <div className='flex gap-x-4 mt-6 mb-4'>
+                  {informationTabOptions.map((option) => (
+                    <TabButton
+                      value={option.value}
+                      key={option.value}
+                      active={informationTab == option.value}
+                      onClick={() => setInformationTab(option.value)}
                     >
-                      {product.manufacture?.name}
-                    </Link>
-                  ) : (
-                    <div>-</div>
-                  )}
+                      {option.label}
+                    </TabButton>
+                  ))}
                 </div>
-              </div>
-              <div className='flex p-3 bg-gray_r-4'>
-                <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div>
-                <div className='w-3/4'>
-                  {product?.weight > 0 && <span>{product?.weight} KG</span>}
-                  {product?.weight == 0 && (
-                    <a href='https://wa.me' className='text-danger-500 font-medium'>
-                      Tanya Berat
-                    </a>
-                  )}
+                <div className='flex'>
+                  <div className='w-3/4 leading-7 product__description'>
+                    <TabContent active={informationTab == 'description'}>
+                      <span
+                        dangerouslySetInnerHTML={{
+                          __html:
+                            product.description != ''
+                              ? product.description
+                              : 'Belum ada deskripsi produk.'
+                        }}
+                      />
+                    </TabContent>
+
+                    <TabContent active={informationTab == 'information'}>
+                      Belum ada informasi.
+                    </TabContent>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
 
-          <div className='w-[20%]'>
+          <div className='w-[25%]'>
             {product.variants.length > 1 && product.lowestPrice.priceDiscount > 0 && (
               <div className='text-gray_r-12/80'>Harga mulai dari: </div>
             )}
@@ -160,7 +217,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
               ) : (
                 <span className='text-gray_r-12/90 font-normal text-h-sm'>
                   Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-                  <a href='https://wa.me/' className='text-danger-500 underline'>
+                  <a
+                    href={whatsappUrl('product', {
+                      name: product.name,
+                      url: createSlug('/shop/product/', product.name, product.id, true)
+                    })}
+                    className='text-danger-500 underline'
+                  >
                     klik disini
                   </a>
                 </span>
@@ -209,6 +272,20 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 Wishlist
               </button>
             </div>
+
+            <div className='border border-gray_r-6 overflow-auto mt-4'>
+              <div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>
+                Produk Serupa
+              </div>
+              <div className='h-full divide-y divide-gray_r-6 max-h-96'>
+                {productSimilarInBrand &&
+                  productSimilarInBrand?.map((product) => (
+                    <div className='py-2' key={product.id}>
+                      <ProductCard product={product} variant='horizontal' />
+                    </div>
+                  ))}
+              </div>
+            </div>
           </div>
         </div>
 
@@ -244,7 +321,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                           {variant.price.priceDiscount > 0 ? (
                             currencyFormat(variant.price.priceDiscount)
                           ) : (
-                            <a href='https://wa.me/' className='text-red_r-11'>
+                            <a
+                              href={whatsappUrl('product', {
+                                name: variant.name,
+                                url: createSlug('/shop/product/', product.name, product.id, true)
+                              })}
+                              className='text-red_r-11'
+                            >
                               Call for price
                             </a>
                           )}
@@ -283,38 +366,6 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
           </div>
         )}
 
-        <div className='mt-12'>
-          <div className='text-h-lg font-semibold'>Informasi Produk</div>
-          <div className='flex gap-x-4 mt-6 mb-4'>
-            {informationTabOptions.map((option) => (
-              <TabButton
-                value={option.value}
-                key={option.value}
-                active={informationTab == option.value}
-                onClick={() => setInformationTab(option.value)}
-              >
-                {option.label}
-              </TabButton>
-            ))}
-          </div>
-          <div className='flex'>
-            <div className='w-3/4 leading-7 product__description'>
-              <TabContent active={informationTab == 'description'}>
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html:
-                      product.description != ''
-                        ? product.description
-                        : 'Belum ada deskripsi produk.'
-                  }}
-                />
-              </TabContent>
-
-              <TabContent active={informationTab == 'information'}>Belum ada informasi.</TabContent>
-            </div>
-          </div>
-        </div>
-
         <div className='my-12'>
           <div className='text-h-lg font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
           <LazyLoad>
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index b75a191b..426fe1b8 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -13,6 +13,7 @@ import MobileView from '@/core/components/views/MobileView'
 import { toast } from 'react-hot-toast'
 import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -152,7 +153,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           ) : (
             <span className='text-gray_r-11 leading-6 font-normal'>
               Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-              <a href='https://wa.me/' className='text-danger-500 underline'>
+              <a
+                href={whatsappUrl('product', {
+                  name: product.name,
+                  url: createSlug('/shop/product/', product.name, product.id, true)
+                })}
+                className='text-danger-500 underline'
+              >
                 klik disini
               </a>
             </span>
@@ -236,7 +243,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
               </span>
             )}
             {activeVariant?.stock == 0 && (
-              <a href='https://wa.me' className='text-danger-500 font-medium'>
+              <a
+                href={whatsappUrl('product', {
+                  name: product.name,
+                  url: createSlug('/shop/product/', product.name, product.id, true)
+                })}
+                className='text-danger-500 font-medium'
+              >
                 Tanya Stok
               </a>
             )}
@@ -244,7 +257,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           <SpecificationContent label='Berat Barang'>
             {activeVariant?.weight > 0 && <span>{activeVariant?.weight} KG</span>}
             {activeVariant?.weight == 0 && (
-              <a href='https://wa.me' className='text-danger-500 font-medium'>
+              <a
+                href={whatsappUrl('productWeight', {
+                  name: product.name,
+                  url: createSlug('/shop/product/', product.name, product.id, true)
+                })}
+                className='text-danger-500 font-medium'
+              >
                 Tanya Berat
               </a>
             )}
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index a1c30d00..9300643e 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -2,8 +2,14 @@ import Image from '@/core/components/elements/Image/Image'
 import Link from '@/core/components/elements/Link/Link'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { createSlug } from '@/core/utils/slug'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
+  const callForPriceWhatsapp = whatsappUrl('product', {
+    name: product.name,
+    url: createSlug('/shop/product/', product.name, product.id, true)
+  })
+
   if (variant == 'vertical') {
     return (
       <div className='rounded shadow-sm border border-gray_r-4 h-full bg-white'>
@@ -58,7 +64,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             {product?.lowestPrice.priceDiscount > 0 ? (
               currencyFormat(product?.lowestPrice.priceDiscount)
             ) : (
-              <a href='https://wa.me/'>Call for price</a>
+              <a href={callForPriceWhatsapp}>Call for price</a>
             )}
           </div>
 
@@ -130,7 +136,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             {product?.lowestPrice?.priceDiscount > 0 ? (
               currencyFormat(product?.lowestPrice?.priceDiscount)
             ) : (
-              <a href='https://wa.me/'>Call for price</a>
+              <a href={callForPriceWhatsapp}>Call for price</a>
             )}
           </div>
 
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 81e7948b..cc85589d 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import useProductSearch from '../hooks/useProductSearch'
 import ProductCard from './ProductCard'
 import Pagination from '@/core/components/elements/Pagination/Pagination'
@@ -12,6 +12,9 @@ import DesktopView from '@/core/components/views/DesktopView'
 import NextImage from 'next/image'
 import ProductFilterDesktop from './ProductFilterDesktop'
 import { useRouter } from 'next/router'
+import searchSpellApi from '@/core/api/searchSpellApi'
+import Link from '@/core/components/elements/Link/Link'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const router = useRouter()
@@ -19,6 +22,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   if (defaultBrand) query.brand = defaultBrand.toLowerCase()
   const { productSearch } = useProductSearch({ query })
   const [products, setProducts] = useState(null)
+  const [spellings, setSpellings] = useState(null)
   const popup = useActive()
 
   const pageCount = Math.ceil(
@@ -28,6 +32,30 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const productRows = productSearch.data?.responseHeader.params.rows
   const productFound = productSearch.data?.response.numFound
 
+  useEffect(() => {
+    if (productFound == 0 && query.q) {
+      searchSpellApi({ query: query.q }).then((response) => {
+        const oddIndexSuggestions = response.data.spellcheck.suggestions.filter(
+          (_, index) => index % 2 === 1
+        )
+        const oddIndexCollations = response.data.spellcheck.collations.filter(
+          (_, index) => index % 2 === 1
+        )
+        const dataSpellings = oddIndexSuggestions.reduce((acc, curr) => {
+          oddIndexCollations.forEach((collation) => {
+            acc.push(collation.collationQuery)
+          })
+          curr.suggestion.forEach((s) => {
+            if (!acc.includes(s.word)) acc.push(s.word)
+          })
+          return acc
+        }, [])
+
+        setSpellings(dataSpellings)
+      })
+    }
+  }, [productFound, query])
+
   const brands = productSearch.data?.facetCounts?.facetFields?.manufactureName?.filter(
     (value, index) => {
       if (index % 2 === 0) {
@@ -66,6 +94,20 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
     }
   }, [query, products, productSearch])
 
+  const SpellingComponent = useMemo(() => {
+    return (
+      <>
+        Mungkin yang anda cari{' '}
+        {spellings?.map((spelling, i) => (
+          <Link href={`/shop/search?q=${spelling}`} key={i} className='inline'>
+            {spelling}
+            {i + 1 < spellings.length ? ', ' : ''}
+          </Link>
+        ))}
+      </>
+    )
+  }, [spellings])
+
   return (
     <>
       <MobileView>
@@ -97,13 +139,15 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                 )}
               </>
             ) : (
-              'Mungkin yang anda cari'
+              SpellingComponent
             )}
           </div>
 
-          <button className='btn-light mb-6 py-2 px-5' onClick={popup.activate}>
-            Filter
-          </button>
+          {productFound > 0 && (
+            <button className='btn-light mb-6 py-2 px-5' onClick={popup.activate}>
+              Filter
+            </button>
+          )}
 
           <div className='grid grid-cols-2 gap-3'>
             {products &&
@@ -127,6 +171,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
           />
         </div>
       </MobileView>
+
       <DesktopView>
         <div className='container mx-auto mt-10 flex mb-3'>
           <div className='w-3/12'>
@@ -164,7 +209,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                     )}
                   </>
                 ) : (
-                  'Mungkin yang anda cari'
+                  SpellingComponent
                 )}
               </div>
               <div className='justify-end flex '>
@@ -202,7 +247,12 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                 <div className='text-gray_r-12/90'>
                   <span>
                     Barang yang anda cari tidak ada?{' '}
-                    <a href='#' className='text-danger-500'>
+                    <a
+                      href={whatsappUrl('productSearch', {
+                        name: query.q
+                      })}
+                      className='text-danger-500'
+                    >
                       Hubungi Kami
                     </a>
                   </span>
diff --git a/src/lib/quotation/components/Quotation.jsx b/src/lib/quotation/components/Quotation.jsx
index a68889f5..6ff40327 100644
--- a/src/lib/quotation/components/Quotation.jsx
+++ b/src/lib/quotation/components/Quotation.jsx
@@ -15,7 +15,6 @@ import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
 import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
 import Image from '@/core/components/elements/Image/Image'
-import variantPriceApi from '@/lib/variant/api/variantPriceApi'
 
 const Quotation = () => {
   const router = useRouter()
@@ -32,15 +31,9 @@ const Quotation = () => {
         .map((o) => o.productId)
         .join(',')
       const dataProducts = await CartApi({ variantIds })
-      const productsWithQuantity = dataProducts?.map(async (product) => {
-        const productPrice = await variantPriceApi({ id: product.id })
+      const productsWithQuantity = dataProducts?.map((product) => {
         return {
           ...product,
-          price: {
-            price: productPrice.priceExclude,
-            discountPercentage: productPrice.discount,
-            priceDiscount: productPrice.priceExcludeAfterDiscount
-          },
           quantity: getItemCart({ productId: product.id }).quantity
         }
       })
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 3e3f2cc7..30bb454a 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -2,7 +2,7 @@ import Spinner from '@/core/components/elements/Spinner/Spinner'
 import useTransaction from '../hooks/useTransaction'
 import TransactionStatusBadge from './TransactionStatusBadge'
 import Divider from '@/core/components/elements/Divider/Divider'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { downloadPurchaseOrder, downloadQuotation } from '../utils/transactions'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import uploadPoApi from '../api/uploadPoApi'
diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index 13417707..bfb8c66b 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -19,15 +19,16 @@ import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
 import Menu from '@/lib/auth/components/Menu'
 
-const Transactions = () => {
+const Transactions = ({ context = '' }) => {
   const router = useRouter()
   const { q = '', page = 1 } = router.query
 
-  const limit = 10
+  const limit = 15
 
   const query = {
     name: q,
     offset: (page - 1) * limit,
+    context,
     limit
   }
   const { transactions } = useTransactions({ query })
@@ -48,13 +49,13 @@ const Transactions = () => {
   }
 
   const pageCount = Math.ceil(transactions?.data?.saleOrderTotal / limit)
-  let pageQuery = _.omit(query, ['limit', 'offset'])
+  let pageQuery = _.omit(query, ['limit', 'offset', 'context'])
   pageQuery = _.pickBy(pageQuery, _.identity)
   pageQuery = toQuery(pageQuery)
 
   const handleSubmit = (e) => {
     e.preventDefault()
-    router.push(`/my/transactions?q=${inputQuery}`)
+    router.push(`${router.pathname}?q=${inputQuery}`)
   }
 
   return (
@@ -89,7 +90,7 @@ const Transactions = () => {
           {transactions.data?.saleOrders?.map((saleOrder, index) => (
             <div className='p-4 shadow border border-gray_r-3 rounded-md' key={index}>
               <div className='grid grid-cols-2'>
-                <Link href={`/my/transaction/${saleOrder.id}`}>
+                <Link href={`${router.pathname}/${saleOrder.id}`}>
                   <span className='text-caption-2 text-gray_r-11'>No. Transaksi</span>
                   <h2 className='text-danger-500 mt-1'>{saleOrder.name}</h2>
                 </Link>
@@ -101,7 +102,7 @@ const Transactions = () => {
                   />
                 </div>
               </div>
-              <Link href={`/my/transaction/${saleOrder.id}`}>
+              <Link href={`${router.pathname}/${saleOrder.id}`}>
                 <div className='grid grid-cols-2 mt-3'>
                   <div>
                     <span className='text-caption-2 text-gray_r-11'>No. Purchase Order</span>
@@ -135,7 +136,7 @@ const Transactions = () => {
           <Pagination
             pageCount={pageCount}
             currentPage={parseInt(page)}
-            url={`/my/transactions${pageQuery}`}
+            url={router.pathname + pageQuery}
             className='mt-2 mb-2'
           />
 
@@ -249,7 +250,7 @@ const Transactions = () => {
                 {transactions.data?.saleOrders?.map((saleOrder) => (
                   <tr key={saleOrder.id}>
                     <td>
-                      <Link href={`/my/transaction/${saleOrder.id}`}>{saleOrder.name}</Link>
+                      <Link href={`${router.pathname}/${saleOrder.id}`}>{saleOrder.name}</Link>
                     </td>
                     <td>-</td>
                     <td className='!text-left'>{saleOrder.sales}</td>
@@ -267,7 +268,7 @@ const Transactions = () => {
             <Pagination
               pageCount={pageCount}
               currentPage={parseInt(page)}
-              url={`/my/transactions${pageQuery}`}
+              url={router.pathname + pageQuery}
               className='mt-2 mb-2'
             />
           </div>
diff --git a/src/lib/variant/components/VariantCard.jsx b/src/lib/variant/components/VariantCard.jsx
index 28f3e193..0f9f02f6 100644
--- a/src/lib/variant/components/VariantCard.jsx
+++ b/src/lib/variant/components/VariantCard.jsx
@@ -6,6 +6,7 @@ import Link from '@/core/components/elements/Link/Link'
 import { createSlug } from '@/core/utils/slug'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { updateItemCart } from '@/core/utils/cart'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const VariantCard = ({ product, openOnClick = true, buyMore = false }) => {
   const router = useRouter()
@@ -60,7 +61,13 @@ const VariantCard = ({ product, openOnClick = true, buyMore = false }) => {
           {product.price.priceDiscount > 0 ? (
             currencyFormat(product.quantity * product.price.priceDiscount)
           ) : (
-            <a href='https://wa.me/628128080622' className='underline text-danger-500'>
+            <a
+              href={whatsappUrl('product', {
+                name: product.name,
+                url: createSlug('/shop/product/', product.name, product.id, true)
+              })}
+              className='underline text-danger-500'
+            >
               Call For Price{' '}
             </a>
           )}
diff --git a/src/pages/404.jsx b/src/pages/404.jsx
new file mode 100644
index 00000000..f73e6383
--- /dev/null
+++ b/src/pages/404.jsx
@@ -0,0 +1,22 @@
+import Seo from '@/core/components/Seo'
+import Link from '@/core/components/elements/Link/Link'
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import Image from 'next/image'
+
+export default function PageNotFound() {
+  return (
+    <BasicLayout>
+      <Seo title='Halaman tidak ditemukan - Indoteknik.com' />
+      <div className='container mx-auto'>
+        <Image
+          src='/images/page-not-found.svg'
+          alt='Page not found - Indoteknik'
+          className='w-full'
+          width={1024}
+          height={512}
+        />
+        <Link href='/' className='btn-yellow text-black mx-auto mt-4'>Kembali ke halaman utama</Link>
+      </div>
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 3c93d27f..2d74d8b7 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -1,7 +1,7 @@
 import '../styles/globals.css'
 import NextProgress from 'next-progress'
 import { useRouter, Router } from 'next/router'
-import { AnimatePresence } from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
 import { Toaster } from 'react-hot-toast'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import useDevice from '@/core/hooks/useDevice'
@@ -17,12 +17,17 @@ function MyApp({ Component, pageProps }) {
   const [animateLoader, setAnimateLoader] = useState(false)
 
   useEffect(() => {
-    Router.events.on('routeChangeStart', () => setAnimateLoader(true))
-    Router.events.on('routeChangeComplete', () => 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)
 
     return () => {
-      Router.events.off('routeChangeStart', () => setAnimateLoader(true))
-      Router.events.off('routeChangeComplete', () => setAnimateLoader(false))
+      Router.events.off('routeChangeStart', handleRouteChangeStart)
+      Router.events.off('routeChangeComplete', handleRouteChangeComplete)
+      Router.events.off('routeChangeError', handleRouteChangeComplete)
     }
   }, [])
 
@@ -43,11 +48,21 @@ function MyApp({ Component, pageProps }) {
 
   return (
     <>
-      {animateLoader && (
-        <div className='w-screen h-screen z-[500] flex justify-center items-center backdrop-blur'>
-          <LogoSpinner />
-        </div>
-      )}
+      <AnimatePresence>
+        {animateLoader && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{
+              duration: 0.1
+            }}
+            className='fixed w-screen h-screen z-[500] bg-white flex justify-center items-center'
+          >
+            <LogoSpinner />
+          </motion.div>
+        )}
+      </AnimatePresence>
       <Toaster
         position='top-center'
         containerStyle={toasterStyle}
diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx
index ff205a38..dbe210aa 100644
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@@ -2,9 +2,13 @@ import { Html, Head, Main, NextScript } from 'next/document'
 import Script from 'next/script'
 
 export default function MyDocument() {
+  const env = process.env.NODE_ENV
+
   return (
     <Html>
       <Head>
+        <link rel='icon' href='/favicon.ico' />
+
         <meta name='facebook-domain-verification' content='328wmjs7hcnz74rwsqzxvq50rmbtm2' />
         <Script
           async
@@ -57,6 +61,24 @@ export default function MyDocument() {
           }}
         />
 
+        {/* <Script
+          id='tawk-script-tag'
+          strategy='afterInteractive'
+          dangerouslySetInnerHTML={{
+            __html: `
+              var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
+              (function(){
+              var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
+              s1.async=true;
+              s1.src='https://embed.tawk.to/643e00614247f20fefec36c5/1gu932vhh';
+              s1.charset='UTF-8';
+              s1.setAttribute('crossorigin','*');
+              s0.parentNode.insertBefore(s1,s0);
+              })();
+            `
+          }}
+        /> */}
+
         <meta
           name='google-site-verification'
           content='uHuW_mZhjv_fUg3do-lV8Mo7R2vVjF4MPQhTXFP3jH4'
diff --git a/src/pages/activate.jsx b/src/pages/activate.jsx
index 48d9c4d3..8e9d8fbb 100644
--- a/src/pages/activate.jsx
+++ b/src/pages/activate.jsx
@@ -1,9 +1,11 @@
 import Seo from '@/core/components/Seo'
-import SimpleFooter from '@/core/components/elements/Footer/SimpleFooter'
-import BasicLayout from '@/core/components/layouts/BasicLayout'
 import DesktopView from '@/core/components/views/DesktopView'
 import MobileView from '@/core/components/views/MobileView'
-import ActivateComponent from '@/lib/auth/components/Activate'
+import dynamic from 'next/dynamic'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const ActivateComponent = dynamic(() => import('@/lib/auth/components/Activate'))
+const SimpleFooter = dynamic(() => import('@/core/components/elements/Footer/SimpleFooter'))
 
 export default function Activate() {
   return (
diff --git a/src/pages/api/shop/finish-checkout.js b/src/pages/api/shop/finish-checkout.js
index 04e82118..9eaa36db 100644
--- a/src/pages/api/shop/finish-checkout.js
+++ b/src/pages/api/shop/finish-checkout.js
@@ -46,7 +46,7 @@ export default async function handler(req, res) {
     }
   }
 
-  const query = `name=${orderName.replaceAll('-', '/')}&limit=1`
+  const query = `name=${orderName.replaceAll('-', '/')}&limit=1&context=quotation`
   const searchTransaction = await odooApi(
     'GET',
     `/api/v1/partner/${auth.partnerId}/sale_order?${query}`,
diff --git a/src/pages/api/shop/midtrans-payment.js b/src/pages/api/shop/midtrans-payment.js
index 1772e9e0..12aaa51f 100644
--- a/src/pages/api/shop/midtrans-payment.js
+++ b/src/pages/api/shop/midtrans-payment.js
@@ -22,6 +22,7 @@ export default async function handler(req, res) {
     {},
     { Token: auth.token }
   )
+
   if (!transaction?.id) {
     return res.status(400).json({ error: 'No Data' })
   }
@@ -48,7 +49,7 @@ export default async function handler(req, res) {
   const parameter = {
     transaction_details: {
       order_id: transaction.name?.replaceAll('/', '-'),
-      gross_amount: transaction.amountTotal
+      gross_amount: Math.floor(transaction.amountTotal)
     },
     credit_card: {
       secure: true
@@ -56,17 +57,7 @@ export default async function handler(req, res) {
     customer_details: {
       first_name: transaction.address.customer.name,
       email: transaction.address.customer.email || '',
-      phone: transaction.address.customer.phone || '',
-      billing_address: {
-        first_name: transaction.address.invoice.name,
-        email: transaction.address.invoice.email || '',
-        phone: transaction.address.invoice.phone || ''
-      },
-      shipping_address: {
-        first_name: transaction.address.shipping.name,
-        email: transaction.address.shipping.email || '',
-        phone: transaction.address.shipping.phone || ''
-      }
+      phone: transaction.address.customer.phone || ''
     }
   }
 
diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index 19b9655a..2e6764fd 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -29,6 +29,9 @@ export default async function handler(req, res) {
     case 'stock':
       paramOrderBy += 'stock_total_f DESC'
       break
+    default:
+      paramOrderBy += 'product_rating_f DESC, price_discount_f DESC'
+      break
   }
 
   let offset = (page - 1) * limit
@@ -43,10 +46,17 @@ export default async function handler(req, res) {
     'qf=name_s',
     `start=${offset}`,
     `rows=${limit}`,
-    `sort=${paramOrderBy}`,
-    `fq=price_discount_f:[${priceFrom == '' ? '*' : priceFrom} TO ${priceTo == '' ? '*' : priceTo}]`
+    `sort=${paramOrderBy}`
   ]
 
+  if (priceFrom > 0 || priceTo > 0) {
+    parameter.push(
+      `fq=price_discount_f:[${priceFrom == '' ? '*' : priceFrom} TO ${
+        priceTo == '' ? '*' : priceTo
+      }]`
+    )
+  }
+
   if (brand) parameter.push(`fq=manufacture_name:${brand}`)
   if (category) parameter.push(`fq=category_name:${category}`)
 
@@ -57,7 +67,12 @@ export default async function handler(req, res) {
 
   let result = await axios(process.env.SOLR_HOST + '/solr/product/select?' + parameter.join('&'))
   try {
-    result.data.response.products = productResponseMap(result.data.response.docs)
+    let { auth } = req.cookies
+    if (auth) auth = JSON.parse(auth)
+    result.data.response.products = productResponseMap(
+      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
@@ -83,23 +98,42 @@ const escapeSolrQuery = (query) => {
   return escapedWords.join(' ')
 }
 
-const productResponseMap = (products) => {
+const productResponseMap = (products, pricelist) => {
   return products.map((product) => {
+    let price = product.price_f || 0
+    let priceDiscount = product.price_discount_f || 0
+    let discountPercentage = product.discount_f || 0
+
+    if (pricelist) {
+      const pricelistDiscount = product?.[`price_${pricelist}_f`] || false
+      const pricelistDiscountPerc = product?.[`discount_${pricelist}_f`] || false
+
+      if (pricelistDiscount && pricelistDiscount > 0) priceDiscount = pricelistDiscount
+      if (pricelistDiscountPerc && pricelistDiscountPerc > 0)
+        discountPercentage = pricelistDiscountPerc
+    }
+
+    if (product?.flashsale_id_i > 0) {
+      price = product?.flashsale_base_price_f || 0
+      priceDiscount = product?.flashsale_price_f || 0
+      discountPercentage = product?.flashsale_discount_f || 0
+    }
+
     let productMapped = {
       id: product.product_id_i || '',
       image: product.image_s || '',
       code: product.default_code_s || '',
       name: product.name_s || '',
-      lowestPrice: {
-        price: product.price_f || 0,
-        priceDiscount: product.price_discount_f || 0,
-        discountPercentage: product.discount_f || 0
-      },
+      lowestPrice: { price, priceDiscount, discountPercentage },
       variantTotal: product.variant_total_i || 0,
       stockTotal: product.stock_total_f || 0,
       weight: product.weight_f || 0,
       manufacture: {},
-      categories: []
+      categories: [],
+      flashSale: {
+        id: product?.flashsale_id_i,
+        name: product?.product?.flashsale_name_s
+      }
     }
 
     if (product.manufacture_id_i && product.manufacture_name_s) {
diff --git a/src/pages/api/shop/spell.js b/src/pages/api/shop/spell.js
new file mode 100644
index 00000000..4c01765c
--- /dev/null
+++ b/src/pages/api/shop/spell.js
@@ -0,0 +1,18 @@
+import axios from 'axios'
+
+export default async function handler(req, res) {
+  const { q = '' } = req.query
+
+  let result = await axios(
+    process.env.SOLR_HOST + `/solr/product/spell?indent=true&q.op=AND&q=${q}`
+  )
+
+  try {
+    res.status(200).json(result.data)
+  } catch (error) {
+    res.status(400).json({
+      numFound: 0,
+      suggestions: []
+    })
+  }
+}
diff --git a/src/pages/blog/[slug].jsx b/src/pages/blog/[slug].jsx
index 9305411d..39c0bb50 100644
--- a/src/pages/blog/[slug].jsx
+++ b/src/pages/blog/[slug].jsx
@@ -1,10 +1,11 @@
 import Seo from '@/core/components/Seo'
-import Link from '@/core/components/elements/Link/Link'
 import Spinner from '@/core/components/elements/Spinner/Spinner'
-import BasicLayout from '@/core/components/layouts/BasicLayout'
-import { createSlug, getIdFromSlug } from '@/core/utils/slug'
+import { getIdFromSlug } from '@/core/utils/slug'
 import useBlog from '@/lib/blog/hooks/useBlog'
 import { useRouter } from 'next/router'
+import dynamic from 'next/dynamic'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
 
 export default function BlogDetail() {
   const router = useRouter()
diff --git a/src/pages/blog/index.jsx b/src/pages/blog/index.jsx
index c65fe07d..17446935 100644
--- a/src/pages/blog/index.jsx
+++ b/src/pages/blog/index.jsx
@@ -1,12 +1,14 @@
-import BasicLayout from '@/core/components/layouts/BasicLayout'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { createSlug } from '@/core/utils/slug'
-import Image from '@/core/components/elements/Image/Image'
 import useBlogs from '@/lib/blog/hooks/useBlogs'
-import { useRouter } from 'next/router'
-import Pagination from '@/core/components/elements/Pagination/Pagination'
-import Spinner from '@/core/components/elements/Spinner/Spinner'
 import Seo from '@/core/components/Seo'
+import dynamic from 'next/dynamic'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const Pagination = dynamic(() => import('@/core/components/elements/Pagination/Pagination'))
+const Spinner = dynamic(() => import('@/core/components/elements/Spinner/Spinner'))
+const Image = dynamic(() => import('@/core/components/elements/Image/Image'))
 
 export default function Blogs() {
   const router = useRouter()
diff --git a/src/pages/contact-us.jsx b/src/pages/contact-us.jsx
deleted file mode 100644
index adbf9439..00000000
--- a/src/pages/contact-us.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Seo from '@/core/components/Seo'
-import BasicLayout from '@/core/components/layouts/BasicLayout'
-import PageContent from '@/lib/content/components/PageContent'
-
-export default function ContactUs() {
-  return (
-    <BasicLayout>
-      <Seo title='Hubungi Indoteknik.com' />
-      <PageContent path='/contact-us' />
-    </BasicLayout>
-  )
-}
diff --git a/src/pages/faqs.jsx b/src/pages/faqs.jsx
deleted file mode 100644
index e8ffb4e3..00000000
--- a/src/pages/faqs.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Seo from '@/core/components/Seo'
-import BasicLayout from '@/core/components/layouts/BasicLayout'
-import PageContent from '@/lib/content/components/PageContent'
-
-export default function ContactUs() {
-  return (
-    <BasicLayout>
-      <Seo title='FAQS Indoteknik.com' />
-      <PageContent path='/faqs' />
-    </BasicLayout>
-  )
-}
diff --git a/src/pages/hubungi-kami.jsx b/src/pages/hubungi-kami.jsx
new file mode 100644
index 00000000..a246b515
--- /dev/null
+++ b/src/pages/hubungi-kami.jsx
@@ -0,0 +1,17 @@
+import Seo from '@/core/components/Seo'
+import dynamic from 'next/dynamic'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const PageContent = dynamic(() => import('@/lib/content/components/PageContent'))
+
+export default function HubungiKami() {
+  return (
+    <BasicLayout>
+      <Seo title='Hubungi Kami - Indoteknik.com' />
+
+      <article className='container mx-auto py-6 px-4 sm:px-0'>
+        <PageContent path='/hubungi-kami' />
+      </article>
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 2a996b5d..5ca7b939 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -3,33 +3,29 @@ import ImageSkeleton from '@/core/components/elements/Skeleton/ImageSkeleton'
 import PopularProductSkeleton from '@/lib/home/components/Skeleton/PopularProductSkeleton'
 import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
-import { useEffect, useRef, useState } from 'react'
-import { NextSeo } from 'next-seo'
+import { useRef } from 'react'
 import Seo from '@/core/components/Seo'
 import { useQuery } from 'react-query'
 import odooApi from '@/core/api/odooApi'
-import Image from '@/core/components/elements/Image/Image'
+import Image from 'next/image'
 
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
-
+const FlashSale = dynamic(() => import('@/lib/flashSale/components/FlashSale'))
 const HeroBanner = dynamic(() => import('@/lib/home/components/HeroBanner'), {
   loading: () => <ImageSkeleton />
 })
-
 const PreferredBrand = dynamic(() => import('@/lib/home/components/PreferredBrand'), {
   loading: () => <PopularProductSkeleton />
 })
-
 const PopularProduct = dynamic(() => import('@/lib/home/components/PopularProduct'), {
   loading: () => <PopularProductSkeleton />
 })
-
 const CategoryHomeId = dynamic(() => import('@/lib/home/components/CategoryHomeId'), {
   loading: () => <PopularProductSkeleton />
 })
 
 export default function Home() {
-  const fetchSecondHeroBanner = async () => await odooApi('GET', '/api/v1/banner?type=index-b-2')
+  const fetchSecondHeroBanner = async () => await odooApi('GET', '/api/v1/banner?type=index-a-2')
   const secondHeroBanner = useQuery('secondHeroBanner', fetchSecondHeroBanner)
 
   const bannerRef = useRef(null)
@@ -57,12 +53,18 @@ export default function Home() {
       <DesktopView>
         <div className='container mx-auto'>
           <div className='flex h-[360px]' ref={wrapperRef} onLoad={handleOnLoad}>
-            <div className='w-3/12'>
+            <div className='w-2/12'>
               {secondHeroBanner.isFetched && (
-                <Image src={secondHeroBanner.data[0].image} alt={secondHeroBanner.data[0].name} />
+                <Image
+                  src={secondHeroBanner.data[0].image}
+                  width={512}
+                  height={1024}
+                  alt={secondHeroBanner.data[0].name}
+                  className='object-cover object-center h-full'
+                />
               )}
             </div>
-            <div className='w-6/12 px-1' ref={bannerRef}>
+            <div className='w-7/12 px-1' ref={bannerRef}>
               <HeroBanner />
             </div>
             <div className='w-3/12'>
@@ -72,6 +74,7 @@ export default function Home() {
 
           <div className='my-16 flex flex-col gap-y-10'>
             <PreferredBrand />
+            <FlashSale />
             <CategoryHomeId />
           </div>
         </div>
@@ -81,6 +84,7 @@ export default function Home() {
         <HeroBanner />
         <div className='flex flex-col gap-y-6 my-6'>
           <PreferredBrand />
+          <FlashSale />
           <PopularProduct />
           <CategoryHomeId />
         </div>
diff --git a/src/pages/informasi-garansi.jsx b/src/pages/informasi-garansi.jsx
new file mode 100644
index 00000000..c4511d30
--- /dev/null
+++ b/src/pages/informasi-garansi.jsx
@@ -0,0 +1,17 @@
+import Seo from '@/core/components/Seo'
+import dynamic from 'next/dynamic'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const PageContent = dynamic(() => import('@/lib/content/components/PageContent'))
+
+export default function InformasiGaransi() {
+  return (
+    <BasicLayout>
+      <Seo title='Informasi Garansi - Indoteknik.com' />
+
+      <article className='container mx-auto py-6 px-4 sm:px-0'>
+        <PageContent path='/informasi-garansi' />
+      </article>
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/karir.jsx b/src/pages/karir.jsx
new file mode 100644
index 00000000..406397d9
--- /dev/null
+++ b/src/pages/karir.jsx
@@ -0,0 +1,17 @@
+import Seo from '@/core/components/Seo'
+import dynamic from 'next/dynamic'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const PageContent = dynamic(() => import('@/lib/content/components/PageContent'))
+
+export default function KebijakanPrivasi() {
+  return (
+    <BasicLayout>
+      <Seo title='Karir - Indoteknik.com' />
+
+      <article className='container mx-auto py-6 px-4 sm:px-0'>
+        <PageContent path='/karir' />
+      </article>
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/kebijakan-privasi.jsx b/src/pages/kebijakan-privasi.jsx
new file mode 100644
index 00000000..8662d56d
--- /dev/null
+++ b/src/pages/kebijakan-privasi.jsx
@@ -0,0 +1,17 @@
+import Seo from '@/core/components/Seo'
+import dynamic from 'next/dynamic'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const PageContent = dynamic(() => import('@/lib/content/components/PageContent'))
+
+export default function KebijakanPrivasi() {
+  return (
+    <BasicLayout>
+      <Seo title='Kebijakan Privasi - Indoteknik.com' />
+
+      <article className='container mx-auto py-6 px-4 sm:px-0'>
+        <PageContent path='/kebijakan-privasi' />
+      </article>
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/metode-pembayaran.jsx b/src/pages/metode-pembayaran.jsx
new file mode 100644
index 00000000..8e5d6467
--- /dev/null
+++ b/src/pages/metode-pembayaran.jsx
@@ -0,0 +1,17 @@
+import Seo from '@/core/components/Seo'
+import dynamic from 'next/dynamic'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const PageContent = dynamic(() => import('@/lib/content/components/PageContent'))
+
+export default function MetodePembayaran() {
+  return (
+    <BasicLayout>
+      <Seo title='Metode Pembayaran - Indoteknik.com' />
+
+      <article className='container mx-auto py-6 px-4 sm:px-0'>
+        <PageContent path='/metode-pembayaran' />
+      </article>
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/metode-pengiriman.jsx b/src/pages/metode-pengiriman.jsx
new file mode 100644
index 00000000..2b0b65fa
--- /dev/null
+++ b/src/pages/metode-pengiriman.jsx
@@ -0,0 +1,17 @@
+import Seo from '@/core/components/Seo'
+import dynamic from 'next/dynamic'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const PageContent = dynamic(() => import('@/lib/content/components/PageContent'))
+
+export default function MetodePengiriman() {
+  return (
+    <BasicLayout>
+      <Seo title='Metode Pengiriman - Indoteknik.com' />
+
+      <article className='container mx-auto py-6 px-4 sm:px-0'>
+        <PageContent path='/metode-pengiriman' />
+      </article>
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/my/daftar-merchant.jsx b/src/pages/my/daftar-merchant.jsx
new file mode 100644
index 00000000..e1fa9bcb
--- /dev/null
+++ b/src/pages/my/daftar-merchant.jsx
@@ -0,0 +1,15 @@
+import Seo from '@/core/components/Seo'
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import CreateMerchant from '@/lib/form/components/Merchant'
+
+export default function DaftarMerchant() {
+  return (
+    <>
+      <Seo title='Daftar Merchant - Indoteknik.com' />
+
+      <BasicLayout>
+        <CreateMerchant></CreateMerchant>
+      </BasicLayout>
+    </>
+  )
+}
diff --git a/src/pages/my/invoice/[id].jsx b/src/pages/my/invoices/[id].jsx
index 740819cc..5972b382 100644
--- a/src/pages/my/invoice/[id].jsx
+++ b/src/pages/my/invoices/[id].jsx
@@ -6,7 +6,7 @@ import IsAuth from '@/lib/auth/components/IsAuth'
 import InvoiceComponent from '@/lib/invoice/components/Invoice'
 import { useRouter } from 'next/router'
 
-export default function Invoice() {
+export default function MyInvoice() {
   const router = useRouter()
 
   return (
diff --git a/src/pages/my/invoices.jsx b/src/pages/my/invoices/index.jsx
index 59059b2e..73c7b9fe 100644
--- a/src/pages/my/invoices.jsx
+++ b/src/pages/my/invoices/index.jsx
@@ -5,7 +5,7 @@ import MobileView from '@/core/components/views/MobileView'
 import IsAuth from '@/lib/auth/components/IsAuth'
 import InvoicesComponent from '@/lib/invoice/components/Invoices'
 
-export default function Invoices() {
+export default function MyInvoices() {
   return (
     <IsAuth>
       <MobileView>
diff --git a/src/pages/my/kunjungan-sales.jsx b/src/pages/my/kunjungan-sales.jsx
index 63e95837..052991d9 100644
--- a/src/pages/my/kunjungan-sales.jsx
+++ b/src/pages/my/kunjungan-sales.jsx
@@ -2,7 +2,7 @@ import Seo from '@/core/components/Seo'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import KunjunganSales from '@/lib/form/components/KunjunganSales'
 
-export default function pembayaran_tempo() {
+export default function kunjungan_sales() {
   return (
     <>
       <Seo title='Kunjungan Sales - Indoteknik.com' />
diff --git a/src/pages/my/kunjungan-service.jsx b/src/pages/my/kunjungan-service.jsx
index 80d1ecbc..37de5a0b 100644
--- a/src/pages/my/kunjungan-service.jsx
+++ b/src/pages/my/kunjungan-service.jsx
@@ -2,8 +2,7 @@ import Seo from '@/core/components/Seo'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import CreateKunjunganService from '@/lib/form/components/KunjunganService'
 
-export default function pembayaran_tempo() {
- 
+export default function kunjungan_service() {
   return (
     <>
       <Seo title='Kunjungan Service - Indoteknik.com' />
diff --git a/src/pages/my/media-relations.jsx b/src/pages/my/media-relations.jsx
new file mode 100644
index 00000000..a965f39a
--- /dev/null
+++ b/src/pages/my/media-relations.jsx
@@ -0,0 +1,15 @@
+import Seo from '@/core/components/Seo'
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import CreateMediaRelations from '@/lib/form/components/MediaRelations'
+
+export default function media_relations() {
+  return (
+    <>
+      <Seo title='Media Relations - Indoteknik.com' />
+
+      <BasicLayout>
+        <CreateMediaRelations></CreateMediaRelations>
+      </BasicLayout>
+    </>
+  )
+}
diff --git a/src/pages/my/menu.jsx b/src/pages/my/menu.jsx
index e7ae27fd..c8e1e7e9 100644
--- a/src/pages/my/menu.jsx
+++ b/src/pages/my/menu.jsx
@@ -40,6 +40,7 @@ export default function Menu() {
             <MenuHeader>Aktivitas Pembelian</MenuHeader>
 
             <div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
+              <LinkItem href='/my/quotations'>Daftar Quotation</LinkItem>
               <LinkItem href='/my/transactions'>Daftar Transaksi</LinkItem>
               <LinkItem href='/my/invoices'>Invoice & Faktur Pajak</LinkItem>
               <LinkItem href='/my/wishlist'>Wishlist</LinkItem>
diff --git a/src/pages/my/pembayaran-tempo.jsx b/src/pages/my/pembayaran-tempo.jsx
index 1e4fc80d..8947bdd9 100644
--- a/src/pages/my/pembayaran-tempo.jsx
+++ b/src/pages/my/pembayaran-tempo.jsx
@@ -2,7 +2,7 @@ import Seo from '@/core/components/Seo'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import PembayaranTempo from '@/lib/form/components/PembayaranTempo'
 
-export default function pembayaran_tempo() {
+export default function pembayaranTempo() {
   return (
     <>
       <Seo title='Pembayaran Tempo - Indoteknik.com' />
diff --git a/src/pages/my/transaction/[id].jsx b/src/pages/my/quotations/[id].jsx
index c3283783..1fbbf34a 100644
--- a/src/pages/my/transaction/[id].jsx
+++ b/src/pages/my/quotations/[id].jsx
@@ -6,7 +6,7 @@ import IsAuth from '@/lib/auth/components/IsAuth'
 import TransactionComponent from '@/lib/transaction/components/Transaction'
 import { useRouter } from 'next/router'
 
-export default function Transaction() {
+export default function MyQuotation() {
   const router = useRouter()
 
   return (
diff --git a/src/pages/my/quotations/index.jsx b/src/pages/my/quotations/index.jsx
new file mode 100644
index 00000000..bd91d9d0
--- /dev/null
+++ b/src/pages/my/quotations/index.jsx
@@ -0,0 +1,26 @@
+import AppLayout from '@/core/components/layouts/AppLayout'
+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 dynamic from 'next/dynamic'
+
+const TransactionsComponent = dynamic(() => import('@/lib/transaction/components/Transactions'))
+
+export default function MyQuotations() {
+  return (
+    <IsAuth>
+      <MobileView>
+        <AppLayout title='Quotation'>
+          <TransactionsComponent context='quotation' />
+        </AppLayout>
+      </MobileView>
+
+      <DesktopView>
+        <BasicLayout>
+          <TransactionsComponent context='quotation' />
+        </BasicLayout>
+      </DesktopView>
+    </IsAuth>
+  )
+}
diff --git a/src/pages/my/surat-dukungan.jsx b/src/pages/my/surat-dukungan.jsx
index 8c469d02..8058f34d 100644
--- a/src/pages/my/surat-dukungan.jsx
+++ b/src/pages/my/surat-dukungan.jsx
@@ -3,8 +3,7 @@ import BasicLayout from '@/core/components/layouts/BasicLayout'
 import CreateKunjunganService from '@/lib/form/components/KunjunganService'
 import CreateSuratDukungan from '@/lib/form/components/SuratDukungan'
 
-export default function pembayaran_tempo() {
- 
+export default function surat_dukungan() {
   return (
     <>
       <Seo title='Surat Dukungan - Indoteknik.com' />
diff --git a/src/pages/my/transactions/[id].jsx b/src/pages/my/transactions/[id].jsx
new file mode 100644
index 00000000..e36c1ca4
--- /dev/null
+++ b/src/pages/my/transactions/[id].jsx
@@ -0,0 +1,27 @@
+import AppLayout from '@/core/components/layouts/AppLayout'
+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 TransactionComponent from '@/lib/transaction/components/Transaction'
+import { useRouter } from 'next/router'
+
+export default function MyTransaction() {
+  const router = useRouter()
+
+  return (
+    <IsAuth>
+      <MobileView>
+        <AppLayout title='Transaksi'>
+          <TransactionComponent id={router.query.id} />
+        </AppLayout>
+      </MobileView>
+
+      <DesktopView>
+        <BasicLayout>
+          <TransactionComponent id={router.query.id} />
+        </BasicLayout>
+      </DesktopView>
+    </IsAuth>
+  )
+}
diff --git a/src/pages/my/transactions.jsx b/src/pages/my/transactions/index.jsx
index a8ca78b8..91482a39 100644
--- a/src/pages/my/transactions.jsx
+++ b/src/pages/my/transactions/index.jsx
@@ -7,7 +7,7 @@ import dynamic from 'next/dynamic'
 
 const TransactionsComponent = dynamic(() => import('@/lib/transaction/components/Transactions'))
 
-export default function Transactions() {
+export default function MyTransactions() {
   return (
     <IsAuth>
       <MobileView>
diff --git a/src/pages/panduan-belanja.jsx b/src/pages/panduan-belanja.jsx
new file mode 100644
index 00000000..27be13da
--- /dev/null
+++ b/src/pages/panduan-belanja.jsx
@@ -0,0 +1,17 @@
+import Seo from '@/core/components/Seo'
+import dynamic from 'next/dynamic'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const PageContent = dynamic(() => import('@/lib/content/components/PageContent'))
+
+export default function PanduanBelanja() {
+  return (
+    <BasicLayout>
+      <Seo title='Panduan Belanja - Indoteknik.com' />
+
+      <article className='container mx-auto py-6 px-4 sm:px-0'>
+        <PageContent path='/panduan-belanja' />
+      </article>
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/panduan-pick-up-service.jsx b/src/pages/panduan-pick-up-service.jsx
new file mode 100644
index 00000000..57f78a4c
--- /dev/null
+++ b/src/pages/panduan-pick-up-service.jsx
@@ -0,0 +1,17 @@
+import Seo from '@/core/components/Seo'
+import dynamic from 'next/dynamic'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const PageContent = dynamic(() => import('@/lib/content/components/PageContent'))
+
+export default function PanduanPickUpService() {
+  return (
+    <BasicLayout>
+      <Seo title='Panduan Pick Up Service - Indoteknik.com' />
+
+      <article className='container mx-auto py-6 px-4 sm:px-0'>
+        <PageContent path='/panduan-pick-up-service' />
+      </article>
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/panduan-quotation.jsx b/src/pages/panduan-quotation.jsx
new file mode 100644
index 00000000..e4ecdd95
--- /dev/null
+++ b/src/pages/panduan-quotation.jsx
@@ -0,0 +1,17 @@
+import Seo from '@/core/components/Seo'
+import dynamic from 'next/dynamic'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const PageContent = dynamic(() => import('@/lib/content/components/PageContent'))
+
+export default function PanduanQuotation() {
+  return (
+    <BasicLayout>
+      <Seo title='Panduan Quotation - Indoteknik.com' />
+
+      <article className='container mx-auto py-6 px-4 sm:px-0'>
+        <PageContent path='/panduan-quotation' />
+      </article>
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/pelanggan-kami.jsx b/src/pages/pelanggan-kami.jsx
new file mode 100644
index 00000000..48b92339
--- /dev/null
+++ b/src/pages/pelanggan-kami.jsx
@@ -0,0 +1,17 @@
+import Seo from '@/core/components/Seo'
+import dynamic from 'next/dynamic'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const PageContent = dynamic(() => import('@/lib/content/components/PageContent'))
+
+export default function PelangganKami() {
+  return (
+    <BasicLayout>
+      <Seo title='Pelanggan Kami - Indoteknik.com' />
+
+      <article className='container mx-auto py-6 px-4 sm:px-0'>
+        <PageContent path='/pelanggan-kami' />
+      </article>
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/pengembalian-barang-dana.jsx b/src/pages/pengembalian-barang-dana.jsx
new file mode 100644
index 00000000..57b5c9c5
--- /dev/null
+++ b/src/pages/pengembalian-barang-dana.jsx
@@ -0,0 +1,17 @@
+import Seo from '@/core/components/Seo'
+import dynamic from 'next/dynamic'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const PageContent = dynamic(() => import('@/lib/content/components/PageContent'))
+
+export default function PengembalianBarangDana() {
+  return (
+    <BasicLayout>
+      <Seo title='Pengembalian Barang & Dana - Indoteknik.com' />
+
+      <article className='container mx-auto py-6 px-4 sm:px-0'>
+        <PageContent path='/pengembalian-barang-dana' />
+      </article>
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/shop/category/[slug].jsx b/src/pages/shop/category/[slug].jsx
new file mode 100644
index 00000000..dbc17c06
--- /dev/null
+++ b/src/pages/shop/category/[slug].jsx
@@ -0,0 +1,37 @@
+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'
+
+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 categoryName = getNameFromSlug(slug)
+  const categoryId = getIdFromSlug(slug)
+  const query = {
+    fq: `manufacture_id_i:${categoryId}`
+  }
+  return (
+    <BasicLayout>
+      <Seo
+        title={`Beli ${categoryName} di Indoteknik`}
+        description={`Jual ${categoryName} Kirim Jakarta Surabaya Semarang Makassar Manado Denpasar Balikpapan Medan Palembang Lampung Bali Bandung Makassar Manado.`}
+        additionalMetaTags={[
+          {
+            property: 'keywords',
+            content: `Jual ${categoryName}, harga ${categoryName}, ${categoryName} murah, toko ${categoryName}, ${categoryName} jakarta, ${categoryName} surabaya`
+          }
+        ]}
+      />
+
+      {!_.isEmpty(router.query) && (
+        <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 84b848f0..5d706dec 100644
--- a/src/pages/shop/product/[slug].jsx
+++ b/src/pages/shop/product/[slug].jsx
@@ -1,48 +1,75 @@
 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'
 
 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
-  let product = await productApi({ id: getIdFromSlug(slug) })
+  const cookies = context.req.headers.cookie
+  const cookieObj = cookies ? cookie.parse(cookies) : {}
+  const auth = cookieObj.auth ? JSON.parse(cookieObj.auth) : {}
+  const authToken = auth?.token || ''
+
+  let product = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } })
   if (product?.length == 1) {
     product = product[0]
     const regexHtmlTags = /(<([^>]+)>)/gi
     const regexHtmlTagsExceptP = /<\/?(?!p\b)[^>]*>/g
-    if (product.description.replace(regexHtmlTags, ' ').trim() == '') {
-      product.description = ''
-    }
-    product.description = product.description.replace(regexHtmlTagsExceptP, ' ')
-    product.description = product.description.trim()
+    product.description = product.description
+      .replace(regexHtmlTagsExceptP, ' ')
+      .replace(regexHtmlTags, ' ')
+      .trim()
+  } else {
+    product = null
+  }
+
+  return {
+    props: { product }
   }
-  return { props: { product } }
 }
 
 export default function ProductDetail({ product }) {
   const router = useRouter()
+
+  if (!product) return <PageNotFound />
+
   return (
     <BasicLayout>
       <Seo
-        title={product?.name + ' - Indoteknik.com' || ''}
+        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,
-          image: product.image,
+          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}`
+            content: `${product?.name}, Harga ${product?.name}, Beli ${product?.name}, Spesifikasi ${product?.name}`
           }
         ]}
       />
-      <Product product={product} />
+      {!product && (
+        <div className='container mx-auto flex justify-center pt-10'>
+          <LogoSpinner width={36} height={36} />
+        </div>
+      )}
+      {product && <Product product={product} />}
     </BasicLayout>
   )
 }
diff --git a/src/pages/shop/quotation/finish.jsx b/src/pages/shop/quotation/finish.jsx
index 0e9c5672..3850fef8 100644
--- a/src/pages/shop/quotation/finish.jsx
+++ b/src/pages/shop/quotation/finish.jsx
@@ -30,7 +30,7 @@ export default function FinishQuotation() {
               </p>
               {id && (
                 <Link
-                  href={`/my/transaction/${id}`}
+                  href={`/my/quotations/${id}`}
                   className='btn-yellow !text-gray_r-12 mt-6 w-full md:w-1/3 md:mx-auto'
                 >
                   Lihat Penawaran
diff --git a/src/pages/sitemap/blogs.xml.js b/src/pages/sitemap/blogs.xml.js
new file mode 100644
index 00000000..7f41ad0f
--- /dev/null
+++ b/src/pages/sitemap/blogs.xml.js
@@ -0,0 +1,31 @@
+import { createSlug } from '@/core/utils/slug'
+import blogsApi from '@/lib/blog/api/blogsApi'
+import { create } from 'xmlbuilder'
+
+export async function getServerSideProps({ res }) {
+  const baseUrl = process.env.SELF_HOST + '/blog/'
+  const blogs = await blogsApi({ limit: 0, offset: 0 })
+  const sitemap = create('urlset', { encoding: 'utf-8' }).att(
+    'xmlns',
+    'http://www.sitemaps.org/schemas/sitemap/0.9'
+  )
+
+  const date = new Date()
+  blogs.blogs.forEach((blog) => {
+    const url = sitemap.ele('url')
+    url.ele('loc', createSlug(baseUrl, blog.title, blog.id))
+    url.ele('lastmod', date.toISOString().slice(0, 10))
+    url.ele('changefreq', 'weekly')
+    url.ele('priority', '0.6')
+  })
+
+  res.setHeader('Content-Type', 'text/xml')
+  res.write(sitemap.end())
+  res.end()
+
+  return { props: {} }
+}
+
+export default function SitemapProducts() {
+  return null
+}
diff --git a/src/pages/sitemap/brands.xml.js b/src/pages/sitemap/brands.xml.js
new file mode 100644
index 00000000..c85c40e9
--- /dev/null
+++ b/src/pages/sitemap/brands.xml.js
@@ -0,0 +1,31 @@
+import { create } from 'xmlbuilder'
+import { createSlug } from '@/core/utils/slug'
+import odooApi from '@/core/api/odooApi'
+
+export async function getServerSideProps({ res }) {
+  const baseUrl = process.env.SELF_HOST + '/shop/brands/'
+  const brands = await odooApi('GET', `/api/v1/manufacture?limit=0`)
+  const sitemap = create('urlset', { encoding: 'utf-8' }).att(
+    'xmlns',
+    'http://www.sitemaps.org/schemas/sitemap/0.9'
+  )
+
+  const date = new Date()
+  brands.manufactures.forEach((brand) => {
+    const url = sitemap.ele('url')
+    url.ele('loc', createSlug(baseUrl, brand.name, brand.id))
+    url.ele('lastmod', date.toISOString().slice(0, 10))
+    url.ele('changefreq', 'weekly')
+    url.ele('priority', '0.6')
+  })
+
+  res.setHeader('Content-Type', 'text/xml')
+  res.write(sitemap.end())
+  res.end()
+
+  return { props: {} }
+}
+
+export default function SitemapProducts() {
+  return null
+}
diff --git a/src/pages/sitemap/categories.xml.js b/src/pages/sitemap/categories.xml.js
new file mode 100644
index 00000000..1c684576
--- /dev/null
+++ b/src/pages/sitemap/categories.xml.js
@@ -0,0 +1,41 @@
+import { create } from 'xmlbuilder'
+import { createSlug } from '@/core/utils/slug'
+import odooApi from '@/core/api/odooApi'
+
+export async function getServerSideProps({ res }) {
+  const categories = await odooApi('GET', '/api/v1/category/tree')
+  const sitemap = create('urlset', { encoding: 'utf-8' }).att(
+    'xmlns',
+    'http://www.sitemaps.org/schemas/sitemap/0.9'
+  )
+
+  categories.forEach((category) => {
+    addUrlToSitemap(sitemap, category.name, category.id)
+    category.childs.forEach((child1Category) => {
+      addUrlToSitemap(sitemap, child1Category.name, child1Category.id)
+      child1Category.childs.forEach((child2Category) => {
+        addUrlToSitemap(sitemap, child2Category.name, child2Category.id)
+      })
+    })
+  })
+
+  res.setHeader('Content-Type', 'text/xml')
+  res.write(sitemap.end())
+  res.end()
+
+  return { props: {} }
+}
+
+function addUrlToSitemap(sitemap, name, id) {
+  const baseUrl = process.env.SELF_HOST + '/shop/category/'
+  const date = new Date()
+  const url = sitemap.ele('url')
+  url.ele('loc', createSlug(baseUrl, name, id))
+  url.ele('lastmod', date.toISOString().slice(0, 10))
+  url.ele('changefreq', 'weekly')
+  url.ele('priority', '0.6')
+}
+
+export default function SitemapProducts() {
+  return null
+}
diff --git a/src/pages/sitemap/products.xml.js b/src/pages/sitemap/products.xml.js
index e5fc8029..a2067308 100644
--- a/src/pages/sitemap/products.xml.js
+++ b/src/pages/sitemap/products.xml.js
@@ -9,7 +9,10 @@ export async function getServerSideProps({ res }) {
   const products = await productSearchApi({ query: _.toQuery(query) })
   const pageCount = Math.ceil(products.response.numFound / limit)
   const pages = Array.from({ length: pageCount }, (_, i) => i + 1)
-  const sitemapIndex = create('sitemapindex', { encoding: 'UTF-8' })
+  const sitemapIndex = create('sitemapindex', { encoding: 'UTF-8' }).att(
+    'xmlns',
+    'http://www.sitemaps.org/schemas/sitemap/0.9'
+  )
 
   const date = new Date()
   pages.forEach((page) => {
diff --git a/src/pages/sitemap/products/[id].xml.js b/src/pages/sitemap/products/[id].xml.js
deleted file mode 100644
index 98c2bf40..00000000
--- a/src/pages/sitemap/products/[id].xml.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import productSearchApi from '@/lib/product/api/productSearchApi'
-import { create } from 'xmlbuilder'
-import _ from 'lodash-contrib'
-import { createSlug } from '@/core/utils/slug'
-
-export async function getServerSideProps({ res }) {
-  const baseUrl = process.env.SELF_HOST + '/shop/product'
-  const limit = 2500
-  const query = { limit }
-  const products = await productSearchApi({ query: _.toQuery(query) })
-  console.log(products)
-  // const sitemap = create('urlset', { encoding: 'UTF-8' })
-
-  // const date = new Date()
-  // pages.forEach((page) => {
-  //   const url = sitemap.ele('url')
-  //   url.ele('loc', createSlug(baseUrl, '', ''))
-  //   url.ele('lastmod', date.toISOString().slice(0, 10))
-  //   url.ele('changefreq', 'weekly')
-  //   url.ele('priority', '0.8')
-  // })
-
-  // res.setHeader('Content-Type', 'text/xml')
-  // res.write(sitemap.end())
-  // res.end()
-
-  return { props: {} }
-}
-
-export default function SitemapProducts() {
-  return <></>
-}
diff --git a/src/pages/sitemap/products/[page].js b/src/pages/sitemap/products/[page].js
new file mode 100644
index 00000000..2f9c3198
--- /dev/null
+++ b/src/pages/sitemap/products/[page].js
@@ -0,0 +1,35 @@
+import productSearchApi from '@/lib/product/api/productSearchApi'
+import { create } from 'xmlbuilder'
+import _ from 'lodash-contrib'
+import { createSlug } from '@/core/utils/slug'
+
+export async function getServerSideProps({ query, res }) {
+  const baseUrl = process.env.SELF_HOST + '/shop/product/'
+  const { page } = query
+  const limit = 2500
+  const queries = { limit, page: page.replace('.xml', '') }
+  const products = await productSearchApi({ query: _.toQuery(queries) })
+  const sitemap = create('urlset', { encoding: 'utf-8' }).att(
+    'xmlns',
+    'http://www.sitemaps.org/schemas/sitemap/0.9'
+  )
+
+  const date = new Date()
+  products.response.products.forEach((product) => {
+    const url = sitemap.ele('url')
+    url.ele('loc', createSlug(baseUrl, product.name, product.id))
+    url.ele('lastmod', date.toISOString().slice(0, 10))
+    url.ele('changefreq', 'weekly')
+    url.ele('priority', '0.8')
+  })
+
+  res.setHeader('Content-Type', 'text/xml')
+  res.write(sitemap.end())
+  res.end()
+
+  return { props: {} }
+}
+
+export default function SitemapProducts() {
+  return null
+}
diff --git a/src/pages/syarat-ketentuan.jsx b/src/pages/syarat-ketentuan.jsx
new file mode 100644
index 00000000..20a3aa63
--- /dev/null
+++ b/src/pages/syarat-ketentuan.jsx
@@ -0,0 +1,17 @@
+import Seo from '@/core/components/Seo'
+import dynamic from 'next/dynamic'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const PageContent = dynamic(() => import('@/lib/content/components/PageContent'))
+
+export default function SyaratKetentuan() {
+  return (
+    <BasicLayout>
+      <Seo title='Syarat & Ketentuan - Indoteknik.com' />
+
+      <article className='container mx-auto py-6 px-4 sm:px-0'>
+        <PageContent path='/syarat-ketentuan' />
+      </article>
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/about-us.jsx b/src/pages/tentang-kami.jsx
index c7e546df..d7029a50 100644
--- a/src/pages/about-us.jsx
+++ b/src/pages/tentang-kami.jsx
@@ -2,7 +2,7 @@ import Seo from '@/core/components/Seo'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import IframeContent from '@/lib/iframe/components/IframeContent'
 
-export default function AboutUs() {
+export default function TentangKami() {
   return (
     <BasicLayout>
       <Seo title='Tentang Indoteknik.com' />