Merge branch 'new-release' into CR/PPn12%

37 files changed, 815 insertions, 440 deletions

diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx
index 2eea5915..d5ff6247 100644
--- a/src/components/ui/HeroBanner.jsx
+++ b/src/components/ui/HeroBanner.jsx
@@ -7,9 +7,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 
 import Image from 'next/image';
 import { useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
 
-import { bannerApi } from '@/api/bannerApi';
 import Link from '@/core/components/elements/Link/Link';
 import DesktopView from '@/core/components/views/DesktopView';
 import MobileView from '@/core/components/views/MobileView';
@@ -52,28 +50,21 @@ const HeroBanner = () => {
     pagination: { dynamicBullets: false, clickable: true },
   };
 
-  const customLoader = ({ src }) => {
-    return src; // Loader yang mengembalikan URL gambar asli
-  };
-
   const BannerComponent = useMemo(() => {
     if (!heroBanner) return null;
 
     return heroBanner.map((banner, index) => (
       <SwiperSlide key={index}>
-        <Link href={banner.url} className='w-full h-auto'>
+        <Link href={banner?.url} aria-label={banner.name}>
           <Image
-            loader={customLoader}
             src={banner.image}
             alt={banner.name}
             width={1152}
             height={768}
-            className='w-full h-auto'
-            priority={index === 0}
-            loading={index === 0 ? 'eager' : 'lazy'}
             placeholder='blur'
             blurDataURL='/images/indoteknik-placeholder.png'
             sizes='(max-width: 768px) 100vw, 50vw'
+            priority={true}
           />
         </Link>
       </SwiperSlide>
diff --git a/src/components/ui/HeroBannerSecondary.jsx b/src/components/ui/HeroBannerSecondary.jsx
index 6074c9a6..0daf9c61 100644
--- a/src/components/ui/HeroBannerSecondary.jsx
+++ b/src/components/ui/HeroBannerSecondary.jsx
@@ -1,10 +1,8 @@
 import Link from '@/core/components/elements/Link/Link';
 import { getRandomInt } from '@/utils/getRandomInt';
 import Image from 'next/image';
-import { useMemo, useEffect, useState } from 'react';
-import { useQuery } from 'react-query';
+import { useEffect, useMemo, useState } from 'react';
 import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton';
-import { bannerApi } from '@/api/bannerApi';
 
 const HeroBannerSecondary = () => {
   const [heroBannerSecondary, setHeroBannerSecondary] = useState([]);
@@ -45,7 +43,7 @@ const HeroBannerSecondary = () => {
           height={1024}
           alt={heroBannerSecondary[randomIndex]?.name}
           className='object-cover object-center h-full'
-          loading='lazy'
+          loading='eager'
           placeholder='blur'
           blurDataURL='/images/indoteknik-placeholder.png'
           sizes='(max-width: 768px) 100vw, 50vw'
diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 05dc4d8c..6434c928 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -224,32 +224,32 @@ const Form = () => (
     <div className={headerClassName}>Formulir</div>
     <ul className='flex flex-col gap-y-3'>
       <li>
-        <InternalItemLink href='/my/request-for-quotation'>
+        <InternalItemLink href='/request-for-quotation'>
           Request for Quotation
         </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/my/kunjungan-sales'>
+        <InternalItemLink href='/kunjungan-sales'>
           Kunjungan Sales
         </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/my/kunjungan-service'>
+        <InternalItemLink href='/kunjungan-service'>
           Kunjungan Service
         </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/my/pembayaran-tempo'>
+        <InternalItemLink href='/pembayaran-tempo'>
           Pembayaran Tempo
         </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/my/surat-dukungan'>
+        <InternalItemLink href='/surat-dukungan'>
           Surat Dukungan
         </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/my/daftar-merchant'>
+        <InternalItemLink href='/daftar-merchant'>
           Daftar Merchant
         </InternalItemLink>
       </li>
diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx
index 57904498..59f743a2 100644
--- a/src/core/components/elements/Navbar/Navbar.jsx
+++ b/src/core/components/elements/Navbar/Navbar.jsx
@@ -3,10 +3,12 @@ import dynamic from 'next/dynamic'
 const NavbarDesktop = dynamic(() => import('./NavbarDesktop'))
 const NavbarMobile = dynamic(() => import('./NavbarMobile'))
 
-const Navbar = () => {
+const Navbar = ({isMobile} ) => {
+  
+  if(isMobile) return <NavbarMobile />
+
   return (
     <>
-      <NavbarMobile />
       <NavbarDesktop />
     </>
   )
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index fa3df5bf..2776c1f3 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -12,12 +12,9 @@ import {
   MenuButton,
   MenuItem,
   MenuList,
-  useDisclosure
+  useDisclosure,
 } from '@chakra-ui/react';
-import {
-  ChevronDownIcon,
-  HeartIcon
-} from '@heroicons/react/24/outline';
+import { ChevronDownIcon, HeartIcon } from '@heroicons/react/24/outline';
 import dynamic from 'next/dynamic';
 import { default as Image, default as NextImage } from 'next/image';
 import { useRouter } from 'next/router';
@@ -81,21 +78,17 @@ const NavbarDesktop = () => {
     };
 
     window.addEventListener('scroll', handleScroll);
+
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
   }, []);
 
   useEffect(() => {
-    const handleScroll = () => {
-      setIsTop(window.scrollY < 100);
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
+    if (auth) {
+      loadCart(auth.id);
+    }
+  }, [auth]);
 
   useEffect(() => {
     setPendingTransactions(data);
@@ -115,20 +108,22 @@ const NavbarDesktop = () => {
   }, [product, router]);
 
   useEffect(() => {
-    const handleCartChange = () => {
-      const cart = async () => {
-        const listCart = await getCountCart();
-        setCartCount(listCart);
-      };
-      cart();
-    };
-    handleCartChange();
-
-    window.addEventListener('localStorageChange', handleCartChange);
-
-    return () => {
-      window.removeEventListener('localStorageChange', handleCartChange);
-    };
+    // const handleCartChange = () => {
+    //   const cart = async () => {
+    //     const listCart = await getCountCart();
+    //     setCartCount(listCart);
+    //   };
+    //   cart();
+    // };
+    // handleCartChange();
+
+    setCartCount(cart?.products?.length);
+
+    // window.addEventListener('localStorageChange', handleCartChange);
+
+    // return () => {
+    //   window.removeEventListener('localStorageChange', handleCartChange);
+    // };
   }, [transactions.data, cart]);
 
   useEffect(() => {
@@ -177,7 +172,7 @@ const NavbarDesktop = () => {
                 <MenuItem as='a' href='/tentang-kami'>
                   Tentang Indoteknik
                 </MenuItem>
-                <MenuItem as='a' href='/my/pembayaran-tempo'>
+                <MenuItem as='a' href='/pembayaran-tempo'>
                   Pembayaran Tempo
                 </MenuItem>
               </MenuList>
@@ -197,12 +192,14 @@ const NavbarDesktop = () => {
 
       <nav className='pt-6 sticky top-0 z-50 bg-white border-b-2 border-danger-500'>
         <div className='container mx-auto flex gap-x-6'>
-          <Link href='/'>
+          <Link href='/' aria-label='Indoteknik Logo'>
             <Image
               src={IndoteknikLogo}
               alt='Indoteknik Logo'
               width={210}
-              height={210 / 3}
+              height={70}
+              loading='eager'
+              priority={true}
             />
           </Link>
           <div className='flex-1 flex items-center'>
@@ -220,6 +217,7 @@ const NavbarDesktop = () => {
               target='_blank'
               rel='noreferrer'
               href='/my/wishlist'
+              aria-label='Wishlist'
               className='flex items-center gap-x-2 !text-gray_r-12/80'
             >
               <HeartIcon className='w-7' />
@@ -227,6 +225,7 @@ const NavbarDesktop = () => {
             </Link>
             <a
               href={whatsappUrl(templateWA, payloadWA, urlPath)}
+              aria-label='Whatsapp'
               target='_blank'
               rel='noreferrer'
               className='flex items-center gap-x-1 !text-gray_r-12/80'
@@ -236,6 +235,7 @@ const NavbarDesktop = () => {
                 alt='Whatsapp'
                 width={48}
                 height={48}
+                loading='eager'
               />
               <div>
                 <div className='font-semibold'>Whatsapp</div>
@@ -268,6 +268,7 @@ const NavbarDesktop = () => {
             <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'>
               <Link
                 href='/shop/promo'
+                aria-label='Promo'
                 className={`${
                   router.asPath === '/shop/promo' && 'bg-gray_r-3'
                 }  flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group relative`} // Added relative position
@@ -284,6 +285,7 @@ const NavbarDesktop = () => {
                       quality={100}
                       // className={`fixed ${isTop ? 'md:top-[145px] lg:top-[160px] ' : 'lg:top-[85px] top-[80px]'} rounded-3xl md:left-1/4 lg:left-1/4 xl:left-1/4 left-2/3 w-40 h-12  p-2 z-50 transition-all duration-300 animate-pulse`}
                       className={`inline-block relative -top-8 transition-all duration-300 z-20 animate-pulse`}
+                      loading='eager'
                     />
                   </div>
                 )}
@@ -301,6 +303,7 @@ const NavbarDesktop = () => {
 
               <Link
                 href='/shop/brands'
+                aria-label='Brand'
                 className={`${
                   router.asPath === '/shop/brands' && 'bg-gray_r-3'
                 } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
@@ -313,6 +316,7 @@ const NavbarDesktop = () => {
               </Link>
               <Link
                 href='/shop/search?orderBy=stock'
+                aria-label='Ready Stock'
                 className={`${
                   router.asPath.includes('/shop/search?orderBy=stock') &&
                   'bg-gray_r-3'
@@ -326,6 +330,7 @@ const NavbarDesktop = () => {
               </Link>
               <Link
                 href='https://blog.indoteknik.com/'
+                aria-label='Blog Indoteknik'
                 className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group'
                 target='_blank'
                 rel='noreferrer noopener'
@@ -349,12 +354,14 @@ const NavbarDesktop = () => {
                 <>
                   <Link
                     href='/login'
+                    aria-label='Login'
                     className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none rounded-t-xl'
                   >
                     Masuk
                   </Link>
                   <Link
                     href='/register'
+                    aria-label='Register'
                     className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none rounded-t-xl'
                   >
                     Daftar
@@ -363,7 +370,11 @@ const NavbarDesktop = () => {
               )}
               {auth && (
                 <>
-                  <div href='/' className='navbar-user-dropdown-button'>
+                  <div
+                    href='/'
+                    className='navbar-user-dropdown-button'
+                    aria-label='User'
+                  >
                     <span>Halo, {auth?.name}</span>
                     <div className='ml-auto'>
                       <ChevronDownIcon className='w-6' />
@@ -388,24 +399,28 @@ const SocialMedias = () => (
         target='_blank'
         rel='noreferrer'
         href='https://www.youtube.com/@indoteknikcom'
+        aria-label='Youtube - Indoteknik.com'
       >
         <NextImage
           src='/images/socials/youtube.webp'
-          // alt='Youtube - Indoteknik.com'
+          alt='Ytube'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
       <a
         target='_blank'
         rel='noreferrer'
         href='https://www.tiktok.com/@indoteknikcom'
+        aria-label='TikTok - Indoteknik.com'
       >
         <NextImage
           src='/images/socials/tiktok.png'
-          // alt='TikTok - Indoteknik.com'
+          alt='TikTok'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
       {/* <a target='_blank' rel='noreferrer' href={whatsappUrl(null)}>
@@ -420,48 +435,56 @@ const SocialMedias = () => (
         target='_blank'
         rel='noreferrer'
         href='https://www.facebook.com/indoteknikcom'
+        aria-label='Facebook - Indoteknik.com'
       >
         <NextImage
           src='/images/socials/Facebook.png'
-          // alt='Facebook - Indoteknik.com'
+          alt='FB'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
       <a
         target='_blank'
         rel='noreferrer'
         href='https://www.instagram.com/indoteknikcom/'
+        aria-label='Instagram - Indoteknik.com'
       >
         <NextImage
           src='/images/socials/Instagram.png'
-          // alt='Instagram - Indoteknik.com'
+          alt='IG'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
       <a
         target='_blank'
         rel='noreferrer'
         href='https://www.linkedin.com/company/pt-indoteknik-dotcom-gemilang/'
+        aria-label='Linkedin - Indoteknik.com'
       >
         <NextImage
           src='/images/socials/Linkedin.png'
-          // alt='Linkedin - Indoteknik.com'
+          alt='Linkedin'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
       <a
         target='_blank'
         rel='noreferrer'
         href='https://goo.gl/maps/GF8EmDjpQTHZPsJ1A'
+        aria-label='Maps - Indoteknik.com'
       >
         <NextImage
           src='/images/socials/g_maps.png'
-          // alt='Maps - Indoteknik.com'
+          alt='Maps'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
     </div>
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index 90314671..47182a47 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -12,30 +12,44 @@ import { useEffect, useState } from 'react';
 import MobileView from '../../views/MobileView';
 import Link from '../Link/Link';
 import TopBanner from './TopBanner';
+import { useCartStore } from '~/modules/cart/stores/useCartStore';
+import useAuth from '@/core/hooks/useAuth';
 
 const Search = dynamic(() => import('./Search'));
 
 const NavbarMobile = () => {
   const { Sidebar, open } = useSidebar();
+  const auth = useAuth();
 
   const [cartCount, setCartCount] = useState(0);
+  const { loadCart, cart, summary, updateCartItem } = useCartStore();
 
-  useEffect(() => {
-    const handleCartChange = () => {
-      const cart = async () => {
-        const listCart = await getCountCart();
-        setCartCount(listCart);
-      };
-      cart();
-    };
-    handleCartChange();
+  // useEffect(() => {
+  //   const handleCartChange = () => {
+  //     const cart = async () => {
+  //       const listCart = await getCountCart();
+  //       setCartCount(listCart);
+  //     };
+  //     cart();
+  //   };
+  //   handleCartChange();
+
+  //   window.addEventListener('localStorageChange', handleCartChange);
 
-    window.addEventListener('localStorageChange', handleCartChange);
+  //   return () => {
+  //     window.removeEventListener('localStorageChange', handleCartChange);
+  //   };
+  // }, []);
 
-    return () => {
-      window.removeEventListener('localStorageChange', handleCartChange);
-    };
-  }, []);
+  useEffect(() => {
+    if(auth){
+      loadCart(auth?.id);
+    }
+  }, [auth]);
+
+  useEffect(() => {
+    setCartCount(cart?.products?.length);
+  }, [cart]);
 
   return (
     <MobileView>
@@ -48,6 +62,7 @@ const NavbarMobile = () => {
               alt='Indoteknik Logo'
               width={120}
               height={40}
+              loading='eager'
             />
           </Link>
           <div className='flex gap-x-3'>
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index 709495ce..7d44846c 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -50,6 +50,7 @@ const TopBanner = ({ onLoad = () => {} }) => {
       <Link
         href={data?.url}
         className='block bg-cover bg-center h-3 md:h-6 lg:h-[36px]'
+        aria-label='panduan pick up barang'
         style={{
           backgroundImage: `url('${data?.image}')`,
         }}
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 1b62bf05..2998fa63 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -112,7 +112,7 @@ const BasicLayout = ({ children }) => {
           onAnimationEnd={() => setHighlight(false)}
         />
       )}
-      <Navbar />
+      <Navbar isMobile = {isMobile} />
       <AnimationLayout>
         {children}
         <div
@@ -149,6 +149,7 @@ const BasicLayout = ({ children }) => {
                 className='block sm:hidden'
                 width={36}
                 height={36}
+                loading='eager'
               />
               <Image
                 src='/images/socials/WHATSAPP.svg'
@@ -156,6 +157,7 @@ const BasicLayout = ({ children }) => {
                 className='hidden sm:block'
                 width={44}
                 height={44}
+                loading='eager'
               />
             </a>
           </div>
diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx
index ebd41a67..dff61b24 100644
--- a/src/lib/brand/components/BrandCard.jsx
+++ b/src/lib/brand/components/BrandCard.jsx
@@ -11,6 +11,7 @@ const BrandCard = ({ brand }) => {
       className={`py-1 px-2  border-gray_r-6 flex justify-center items-center hover:scale-110 transition duration-500 ease-in-out ${
         isMobile ? 'h-16' : 'h-24'
       }`}
+      aria-label={brand.name}
     >
       {brand.logo && (
         <NextImage
@@ -20,6 +21,7 @@ const BrandCard = ({ brand }) => {
           height={500}
           quality={85}
           className='h-full w-[122px] object-contain object-center'
+          loading='eager'
         />
       )}
       {!brand.logo && (
diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx
index 6d90cad7..f4be279e 100644
--- a/src/lib/flashSale/components/FlashSale.jsx
+++ b/src/lib/flashSale/components/FlashSale.jsx
@@ -47,6 +47,7 @@ const FlashSale = () => {
                   width={1080}
                   height={192}
                   className='w-full rounded mb-4 hidden sm:block'
+                  loading='eager'
                 />
                 <Image
                   src={flashSale.bannerMobile}
@@ -54,6 +55,7 @@ const FlashSale = () => {
                   width={256}
                   height={48}
                   className='w-full rounded mb-4 block sm:hidden'
+                  loading='eager'
                 />
                 <FlashSaleProduct
                   flashSaleId={flashSale.pricelistId}
diff --git a/src/lib/form/components/KunjunganSales.jsx b/src/lib/form/components/KunjunganSales.jsx
index ffa8f135..3779b836 100644
--- a/src/lib/form/components/KunjunganSales.jsx
+++ b/src/lib/form/components/KunjunganSales.jsx
@@ -1,17 +1,18 @@
-import odooApi from '@/core/api/odooApi'
-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'
-import PageContent from '@/lib/content/components/PageContent'
-
-import useAuth from '@/core/hooks/useAuth'
-import { useRouter } from 'next/router'
+import odooApi from '@/core/api/odooApi';
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import cityApi from '@/lib/address/api/cityApi';
+import stateApi from '@/lib/address/api/stateApi.js';
+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';
+import PageContent from '@/lib/content/components/PageContent';
+
+import useAuth from '@/core/hooks/useAuth';
+import { useRouter } from 'next/router';
 
 const KunjunganSales = () => {
   const {
@@ -19,44 +20,72 @@ const KunjunganSales = () => {
     handleSubmit,
     formState: { errors },
     control,
-    reset
+    reset,
+    watch,
+    setValue,
   } = useForm({
     resolver: yupResolver(validationSchema),
-    defaultValues
-  })
-  const [cities, setCities] = useState([])
-  const [companyTypes, setCompanyTypes] = useState([])
-  const router = useRouter()
+    defaultValues,
+  });
+  const [cities, setCities] = useState([]);
+  const [state, setState] = useState([]);
+  const [companyTypes, setCompanyTypes] = useState([]);
+  const router = useRouter();
+
+  const auth = useAuth();
 
-  const auth = useAuth()
+  const recaptchaRef = useRef(null);
 
-  
+  if (auth == false) {
+    router.push(`/login?next=${encodeURIComponent('/kunjungan-sales')}`);
+  }
+
+  useEffect(() => {
+    const loadState = async () => {
+      let dataState = await stateApi();
+      dataState = dataState.map((state) => ({
+        value: state.id,
+        label: state.name,
+      }));
+      setState(dataState);
+    };
+    loadState();
+  }, []);
 
-  const recaptchaRef = useRef(null)
+  const watchState = watch('state');
 
   useEffect(() => {
-    if(auth == false) {
-      router.push('/login')
+    if (auth == false) {
+      return;
     }
     const loadCities = async () => {
-      let dataCities = await cityApi()
-      dataCities = dataCities.map((obj) => ({ value: obj.name, label: obj.name }))
-      setCities(dataCities)
-    }
+      setValue('city', '');
+      let dataCities = await cityApi({ stateId: watchState });
+      dataCities = dataCities?.map((obj) => ({
+        value: obj.name,
+        label: obj.name,
+      }));
+      setCities(dataCities);
+    };
     const loadCompanyTypes = async () => {
-      const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type')
-      setCompanyTypes(dataCompanyTypes?.map((obj) => ({ value: obj.name, label: obj.name })))
-    }
+      const dataCompanyTypes = await odooApi(
+        'GET',
+        '/api/v1/partner/company_type'
+      );
+      setCompanyTypes(
+        dataCompanyTypes?.map((obj) => ({ value: obj.name, label: obj.name }))
+      );
+    };
 
-    loadCompanyTypes()
-    loadCities()
-  }, [auth])
+    loadCompanyTypes();
+    loadCities();
+  }, [auth, watchState, setValue]);
 
   const onSubmitHandler = async (values) => {
-    const recaptchaValue = recaptchaRef.current.getValue()
+    const recaptchaValue = recaptchaRef.current.getValue();
     if (!recaptchaValue) {
-      toast.error('Recaptcha harus diisi')
-      return
+      toast.error('Recaptcha harus diisi');
+      return;
     }
 
     const data = {
@@ -71,29 +100,37 @@ const KunjunganSales = () => {
         `Unit Perusahaan: ${values.companyType}`,
         `No. Handphone: ${values.mobile}`,
         `Alamat Email: ${values.email}`,
-        `Keterangan: ${values.description}`
-      ].join('\n')
-    }
+        `Keterangan: ${values.description}`,
+      ].join('\n'),
+    };
 
-    const createLead = await createLeadApi({ data })
+    const createLead = await createLeadApi({ data });
     if (createLead) {
-      toast.success('Berhasil mengirimkan formulir kunjungan sales')
-      reset()
-      recaptchaRef.current.reset()
+      toast.success('Berhasil mengirimkan formulir kunjungan sales');
+      reset();
+      recaptchaRef.current.reset();
     }
+  };
+  if (!auth) {
+    return;
   }
   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'>Kunjungan Sales</h1>
+      <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>
+        Kunjungan Sales
+      </h1>
 
       <div className='w-full grid grid-cols-1 md:grid-cols-2 gap-x-2'>
-        <form onSubmit={handleSubmit(onSubmitHandler)} className='grid grid-cols-1 gap-y-6'>
+        <form
+          onSubmit={handleSubmit(onSubmitHandler)}
+          className='grid grid-cols-1 gap-y-6'
+        >
           <div
             className='flex items-center bg-blue-100 border border-blue-300 text-blue-500 font-medium px-4 py-3 rounded leading-6'
             role='alert'
           >
-            Hubungi kami untuk mendapatkan kunjungan sales kami dan dapatkan berbagai kelebihannya
-            dengan menjadi pelanggan korporat kami.
+            Hubungi kami untuk mendapatkan kunjungan sales kami dan dapatkan
+            berbagai kelebihannya dengan menjadi pelanggan korporat kami.
           </div>
           <div>
             <label className='form-label mb-2'>Nama Perusahan*</label>
@@ -104,7 +141,9 @@ const KunjunganSales = () => {
               className='form-input'
               aria-invalid={errors.company?.message}
             />
-            <div className='text-caption-2 text-danger-500 mt-1'>{errors.company?.message}</div>
+            <div className='text-caption-2 text-danger-500 mt-1'>
+              {errors.company?.message}
+            </div>
           </div>
 
           <div>
@@ -116,7 +155,9 @@ const KunjunganSales = () => {
               className='form-input'
               aria-invalid={errors.phone?.message}
             />
-            <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.message}</div>
+            <div className='text-caption-2 text-danger-500 mt-1'>
+              {errors.phone?.message}
+            </div>
           </div>
 
           <div>
@@ -128,7 +169,21 @@ const KunjunganSales = () => {
               className='form-input'
               aria-invalid={errors.address?.message}
             />
-            <div className='text-caption-2 text-danger-500 mt-1'>{errors.address?.message}</div>
+            <div className='text-caption-2 text-danger-500 mt-1'>
+              {errors.address?.message}
+            </div>
+          </div>
+
+          <div>
+            <label className='form-label mb-2'>Provinsi*</label>
+            <Controller
+              name='state'
+              control={control}
+              render={(props) => <HookFormSelect {...props} options={state} />}
+            />
+            <div className='text-caption-2 text-danger-500 mt-1'>
+              {errors.stateId?.message}
+            </div>
           </div>
 
           <div>
@@ -138,7 +193,9 @@ const KunjunganSales = () => {
               control={control}
               render={(props) => <HookFormSelect {...props} options={cities} />}
             />
-            <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div>
+            <div className='text-caption-2 text-danger-500 mt-1'>
+              {errors.city?.message}
+            </div>
           </div>
 
           <div>
@@ -146,9 +203,13 @@ const KunjunganSales = () => {
             <Controller
               name='companyType'
               control={control}
-              render={(props) => <HookFormSelect {...props} options={companyTypes} />}
+              render={(props) => (
+                <HookFormSelect {...props} options={companyTypes} />
+              )}
             />
-            <div className='text-caption-2 text-danger-500 mt-1'>{errors.companyType?.message}</div>
+            <div className='text-caption-2 text-danger-500 mt-1'>
+              {errors.companyType?.message}
+            </div>
           </div>
 
           <div>
@@ -160,7 +221,9 @@ const KunjunganSales = () => {
               className='form-input'
               aria-invalid={errors.mobile?.message}
             />
-            <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.mobile?.message}
+            </div>
           </div>
 
           <div>
@@ -172,34 +235,49 @@ const KunjunganSales = () => {
               className='form-input'
               aria-invalid={errors.email?.message}
             />
-            <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
+            <div className='text-caption-2 text-danger-500 mt-1'>
+              {errors.email?.message}
+            </div>
           </div>
 
           <div>
             <label className='form-label mb-2'>Keterangan</label>
-            <textarea {...register('description')} type='text' className='form-input' />
+            <textarea
+              {...register('description')}
+              type='text'
+              className='form-input'
+            />
           </div>
 
-          <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
+          <ReCAPTCHA
+            ref={recaptchaRef}
+            sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+          />
 
-          <button type='submit' className='btn-yellow w-full md:w-fit ml-0 md:ml-auto'>
+          <button
+            type='submit'
+            className='btn-yellow w-full md:w-fit ml-0 md:ml-auto'
+          >
             Simpan
           </button>
         </form>
         <PageContent path='/kunjungan-sales' />
       </div>
     </div>
-  )
-}
+  );
+};
 
 const validationSchema = Yup.object().shape({
-  email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
+  email: Yup.string()
+    .email('Format harus seperti contoh@email.com')
+    .required('Harus di-isi'),
   company: Yup.string().required('Harus di-isi'),
   phone: Yup.string().required('Harus di-isi'),
   mobile: Yup.string().required('Harus di-isi'),
   address: Yup.string().required('Harus di-isi'),
-  city: Yup.string().required('Harus dipilih')
-})
+  city: Yup.string().required('Harus dipilih'),
+  state: Yup.string().required('Harus dipilih'),
+});
 
 const defaultValues = {
   email: '',
@@ -208,8 +286,9 @@ const defaultValues = {
   mobile: '',
   address: '',
   city: '',
+  state: '',
   companyType: '',
-  description: ''
-}
+  description: '',
+};
 
-export default KunjunganSales
+export default KunjunganSales;
diff --git a/src/lib/form/components/KunjunganService.jsx b/src/lib/form/components/KunjunganService.jsx
index 5720d14e..e3c83f78 100644
--- a/src/lib/form/components/KunjunganService.jsx
+++ b/src/lib/form/components/KunjunganService.jsx
@@ -1,16 +1,17 @@
-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'
-import PageContent from '@/lib/content/components/PageContent'
-import { useRouter } from 'next/router'
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import cityApi from '@/lib/address/api/cityApi';
+import stateApi from '@/lib/address/api/stateApi.js';
+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';
+import PageContent from '@/lib/content/components/PageContent';
+import { useRouter } from 'next/router';
 
-import useAuth from '@/core/hooks/useAuth'
+import useAuth from '@/core/hooks/useAuth';
 
 const CreateKunjunganService = () => {
   const {
@@ -18,37 +19,61 @@ const CreateKunjunganService = () => {
     handleSubmit,
     formState: { errors },
     control,
-    reset
+    reset,
+    watch,
+    setValue,
   } = useForm({
     resolver: yupResolver(validationSchema),
-    defaultValues
-  })
-  const [cities, setCities] = useState([])
-  const [company_unit, setCompany_unit] = useState([])
-  
-  const router = useRouter()
+    defaultValues,
+  });
+  const [cities, setCities] = useState([]);
+  const [state, setState] = useState([]);
+  const [company_unit, setCompany_unit] = useState([]);
 
-  const auth = useAuth()
+  const router = useRouter();
 
-  const recaptchaRef = useRef(null)
+  const auth = useAuth();
+  if (auth == false) {
+    router.push(`/login?next=${encodeURIComponent('/kunjungan-service')}`);
+  }
+
+  const recaptchaRef = useRef(null);
+
+  useEffect(() => {
+    const loadState = async () => {
+      let dataState = await stateApi();
+      dataState = dataState.map((state) => ({
+        value: state.id,
+        label: state.name,
+      }));
+      setState(dataState);
+    };
+    loadState();
+  }, []);
+
+  const watchState = watch('state');
 
   useEffect(() => {
-    if(auth == false) {
-      router.push('/login')
+    if (auth == false) {
+      return;
     }
     const loadCities = async () => {
-      let dataCities = await cityApi()
-      dataCities = dataCities.map((city) => ({ value: city.id, label: city.name }))
-      setCities(dataCities)
-    }
-    loadCities()
-  }, [auth])
+      setValue('city', '');
+      let dataCities = await cityApi({ stateId: watchState });
+      dataCities = dataCities.map((city) => ({
+        value: city.id,
+        label: city.name,
+      }));
+      setCities(dataCities);
+    };
+    loadCities();
+  }, [auth, watchState, setValue]);
 
   const onSubmitHandler = async (values) => {
-    const recaptchaValue = recaptchaRef.current.getValue()
+    const recaptchaValue = recaptchaRef.current.getValue();
     if (!recaptchaValue) {
-      toast.error('Catcha harus diisi')
-      return
+      toast.error('Catcha harus diisi');
+      return;
     }
     const data = {
       ...values,
@@ -70,164 +95,212 @@ const CreateKunjunganService = () => {
         ' \r\n  Email  : ' +
         values.email +
         ' \r\n Keterangan  : ' +
-        values.description
-    }
+        values.description,
+    };
 
-    const create_leads = await createLeadApi({ data })
+    const create_leads = await createLeadApi({ data });
     if (create_leads) {
-      toast.success('Berhasil menambahkan alamat')
-      reset()
-      recaptchaRef.current.reset()
+      toast.success('Berhasil menambahkan alamat');
+      reset();
+      recaptchaRef.current.reset();
     }
+  };
+  if (!auth) {
+    return;
   }
   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'>Kunjungan Service</h1>
+      <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>
+        Kunjungan Service
+      </h1>
       <div className='w-full  p-4 bg-white border border-gray_r-6 rounded'>
         <div
           className='flex items-center bg-blue-100 border border-blue-400 text-blue-500 font-bold px-4 py-3 mb-4'
           role='alert'
         >
           <p>
-            Tidak punya waktu untuk melakukan service atau perawatan rutin? Silahkan hubungi teknisi
-            kami untuk melakukan kunjungan ke tempat Anda di Jabodetabek.
+            Tidak punya waktu untuk melakukan service atau perawatan rutin?
+            Silahkan hubungi teknisi kami untuk melakukan kunjungan ke tempat
+            Anda di Jabodetabek.
           </p>
         </div>
         <div className='w-full grid grid-cols-2 gap-x-2'>
-
-        <form onSubmit={handleSubmit(onSubmitHandler)}>
-          <div className=''>
-            <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>
+          <form onSubmit={handleSubmit(onSubmitHandler)}>
+            <div className=''>
+              <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>
-          <div className=''>
-            <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 className=''>
+              <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>
-          <div className=''>
-            <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 className=''>
+              <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>
-          <div className=''>
             <div>
-              <label className='form-label mb-2'>Kota*</label>
+              <label className='form-label mb-2'>Provinsi*</label>
               <Controller
-                name='city'
+                name='state'
                 control={control}
-                render={(props) => <HookFormSelect {...props} options={cities} />}
+                render={(props) => (
+                  <HookFormSelect {...props} options={state} />
+                )}
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.state?.message}
+              </div>
             </div>
-          </div>
-          <div className=''>
-            <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 className=''>
+              <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>
-          <div className=''>
-            <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 className=''>
+              <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>
-          <div className=''>
-            <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 className=''>
+              <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>
-          <div className=''>
-            <div>
-              <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}
+            <div className=''>
+              <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>
-          <div className=''>
-            <div>
-              <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
+            <div className=''>
+              <div>
+                <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}
+                </div>
+              </div>
             </div>
-          </div>
-          <div className=''>
-            <div>
-              <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
-                Simpan
-              </button>
+            <div className=''>
+              <div>
+                <ReCAPTCHA
+                  ref={recaptchaRef}
+                  sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+                />
+              </div>
+            </div>
+            <div className=''>
+              <div>
+                <button
+                  type='submit'
+                  className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
+                >
+                  Simpan
+                </button>
+              </div>
             </div>
-          </div>
-        </form>
-        <PageContent path='/kunjungan-service' />
+          </form>
+          <PageContent path='/kunjungan-service' />
         </div>
       </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'),
+  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'),
+  state: Yup.string().required('Harus dipilih'),
   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')
-})
+  address: Yup.string().required('Harus di-isi'),
+});
 const defaultValues = {
   company: '',
   email: '',
   phone: '',
   city: '',
+  state: '',
   cp: '',
   mobile: '',
   email: '',
-  address: ''
-}
+  address: '',
+};
 
-export default CreateKunjunganService
+export default CreateKunjunganService;
diff --git a/src/lib/form/components/Merchant.jsx b/src/lib/form/components/Merchant.jsx
index 85f72bf8..ee7d177d 100644
--- a/src/lib/form/components/Merchant.jsx
+++ b/src/lib/form/components/Merchant.jsx
@@ -1,5 +1,6 @@
 import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
 import cityApi from '@/lib/address/api/cityApi';
+import stateApi from '@/lib/address/api/stateApi.js';
 import { yupResolver } from '@hookform/resolvers/yup';
 import React, { useEffect, useRef, useState } from 'react';
 import ReCAPTCHA from 'react-google-recaptcha';
@@ -9,8 +10,7 @@ import * as Yup from 'yup';
 import createLeadApi from '../api/createLeadApi';
 import PageContent from '@/lib/content/components/PageContent';
 import { useRouter } from 'next/router';
-import useAuth from '@/core/hooks/useAuth'
-
+import useAuth from '@/core/hooks/useAuth';
 
 const CreateMerchant = () => {
   const {
@@ -19,6 +19,8 @@ const CreateMerchant = () => {
     formState: { errors },
     control,
     reset,
+    watch,
+    setValue,
   } = useForm({
     resolver: yupResolver(validationSchema),
     defaultValues,
@@ -50,27 +52,45 @@ const CreateMerchant = () => {
     },
   ];
   const [cities, setCities] = useState([]);
+  const [state, setState] = useState([]);
   const [company_unit, setCompany_unit] = useState(list_unit);
 
   const recaptchaRef = useRef(null);
-  const router = useRouter()
+  const router = useRouter();
+
+  const auth = useAuth();
+  if (auth == false) {
+    router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
+  }
 
-  const auth = useAuth()
+  useEffect(() => {
+    const loadState = async () => {
+      let dataState = await stateApi();
+      dataState = dataState.map((state) => ({
+        value: state.id,
+        label: state.name,
+      }));
+      setState(dataState);
+    };
+    loadState();
+  }, []);
 
+  const watchState = watch('state');
   useEffect(() => {
-    if(auth == false) {
-      router.push('/login')
+    if (auth == false) {
+      return;
     }
     const loadCities = async () => {
-      let dataCities = await cityApi();
-      dataCities = dataCities.map((city) => ({
+      setValue('city', '');
+      let dataCities = await cityApi({ stateId: watchState });
+      dataCities = dataCities?.map((city) => ({
         value: city.id,
         label: city.name,
       }));
       setCities(dataCities);
     };
     loadCities();
-  }, [auth]);
+  }, [auth, watchState, setValue]);
 
   const onSubmitHandler = async (values) => {
     const recaptchaValue = recaptchaRef.current.getValue();
@@ -111,6 +131,9 @@ const CreateMerchant = () => {
       recaptchaRef.current.reset();
     }
   };
+  if (!auth) {
+    return;
+  }
   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'>
@@ -172,6 +195,19 @@ const CreateMerchant = () => {
                 </div>
               </div>
             </div>
+            <div>
+              <label className='form-label mb-2'>Provinsi*</label>
+              <Controller
+                name='state'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect {...props} options={state} />
+                )}
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.state?.message}
+              </div>
+            </div>
             <div className=''>
               <div>
                 <label className='form-label mb-2'>Kota*</label>
@@ -290,6 +326,7 @@ const validationSchema = Yup.object().shape({
     .required('Harus di-isi'),
   phone: Yup.string().required('Harus di-isi'),
   cp: Yup.string().required('Harus di-isi'),
+  state: Yup.string().required('Harus dipilih'),
   city: Yup.string().required('Harus di-isi'),
   company_unit: Yup.string().required('Harus di-isi'),
   address: Yup.string().required('Harus di-isi'),
@@ -300,6 +337,7 @@ const defaultValues = {
   company: '',
   email: '',
   phone: '',
+  state: '',
   city: '',
   company_unit: '',
   cp: '',
diff --git a/src/lib/form/components/RequestForQuotation.jsx b/src/lib/form/components/RequestForQuotation.jsx
index 68b7fa17..170a5c62 100644
--- a/src/lib/form/components/RequestForQuotation.jsx
+++ b/src/lib/form/components/RequestForQuotation.jsx
@@ -1,18 +1,19 @@
-import odooApi from '@/core/api/odooApi'
-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'
-import getFileBase64 from '@/core/utils/getFileBase64'
-import PageContent from '@/lib/content/components/PageContent'
-import { useRouter } from 'next/router'
-
-import useAuth from '@/core/hooks/useAuth'
+import odooApi from '@/core/api/odooApi';
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import cityApi from '@/lib/address/api/cityApi';
+import stateApi from '@/lib/address/api/stateApi.js';
+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';
+import getFileBase64 from '@/core/utils/getFileBase64';
+import PageContent from '@/lib/content/components/PageContent';
+import { useRouter } from 'next/router';
+
+import useAuth from '@/core/hooks/useAuth';
 
 const RequestForQuotation = () => {
   const {
@@ -20,47 +21,69 @@ const RequestForQuotation = () => {
     handleSubmit,
     formState: { errors },
     control,
-    reset
+    reset,
+    watch,
+    setValue,
   } = useForm({
     resolver: yupResolver(validationSchema),
-    defaultValues
-  })
-  const [cities, setCities] = useState([])
+    defaultValues,
+  });
+  const [cities, setCities] = useState([]);
+  const [state, setState] = useState([]);
 
-  const quotationFileRef = useRef(null)
-  const recaptchaRef = useRef(null)
-  const router = useRouter()
+  const quotationFileRef = useRef(null);
+  const recaptchaRef = useRef(null);
+  const router = useRouter();
 
-  const auth = useAuth()
+  const auth = useAuth();
+  if (auth == false) {
+    router.push(`/login?next=${encodeURIComponent('/request-for-quotation')}`);
+  }
 
+  useEffect(() => {
+    const loadState = async () => {
+      let dataState = await stateApi();
+      dataState = dataState.map((state) => ({
+        value: state.id,
+        label: state.name,
+      }));
+      setState(dataState);
+    };
+    loadState();
+  }, []);
 
+  const watchState = watch('state');
   useEffect(() => {
-    if(auth == false) {
-      router.push('/login')
+    if (!auth) {
+      return;
     }
     const loadCities = async () => {
-      let dataCities = await cityApi()
-      dataCities = dataCities.map((obj) => ({ value: obj.name, label: obj.name }))
-      setCities(dataCities)
-    }
-    loadCities()
-  }, [auth])
+      setValue('city', '');
+      let dataCities = await cityApi({ stateId: watchState });
+      dataCities = dataCities?.map((obj) => ({
+        value: obj.name,
+        label: obj.name,
+      }));
+      setCities(dataCities);
+    };
+    loadCities();
+  }, [auth, watchState, setValue]);
 
   const onSubmitHandler = async (values) => {
-    const recaptchaValue = recaptchaRef.current.getValue()
+    const recaptchaValue = recaptchaRef.current.getValue();
     if (!recaptchaValue) {
-      toast.error('Recaptcha harus diisi')
-      return
+      toast.error('Recaptcha harus diisi');
+      return;
     }
 
-    const file = quotationFileRef.current.files[0]
-    let fileBase64 = null
+    const file = quotationFileRef.current.files[0];
+    let fileBase64 = null;
     if (typeof file !== 'undefined') {
       if (file.size > 5000000) {
-        toast.error('Maksimal ukuran file adalah 5MB')
-        return
+        toast.error('Maksimal ukuran file adalah 5MB');
+        return;
       }
-      fileBase64 = await getFileBase64(file)
+      fileBase64 = await getFileBase64(file);
     }
 
     const data = {
@@ -73,33 +96,42 @@ const RequestForQuotation = () => {
         `Kota: ${values.city}`,
         `No. Handphone: ${values.mobile}`,
         `Alamat Email: ${values.email}`,
-        `Keterangan: ${values.description}`
-      ].join('\n')
-    }
+        `Keterangan: ${values.description}`,
+      ].join('\n'),
+    };
 
-    if (fileBase64) data.file_quotation = fileBase64
+    if (fileBase64) data.file_quotation = fileBase64;
 
-    const createLead = await createLeadApi({ data })
+    const createLead = await createLeadApi({ data });
     if (createLead) {
-      toast.success('Berhasil mengirimkan formulir request for quotation')
-      reset()
-      recaptchaRef.current.reset()
+      toast.success('Berhasil mengirimkan formulir request for quotation');
+      reset();
+      recaptchaRef.current.reset();
     }
+  };
+  if (!auth) {
+    return;
   }
   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'>Request for Quotation</h1>
+      <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>
+        Request for Quotation
+      </h1>
 
       <div className='w-full grid grid-cols-1 md:grid-cols-2 gap-x-2'>
-        <form onSubmit={handleSubmit(onSubmitHandler)} className='grid grid-cols-1 gap-y-6'>
+        <form
+          onSubmit={handleSubmit(onSubmitHandler)}
+          className='grid grid-cols-1 gap-y-6'
+        >
           <div
             className='flex items-center bg-blue-100 border border-blue-300 text-blue-500 font-medium px-4 py-3 rounded leading-6'
             role='alert'
           >
-            Halaman untuk pengajuan penawaran harga, lengkapi data di bawah ini dengan jelas untuk
-            mempermudah tim support kami melayani kebutuhan Anda. Tim kami akan sesegera mungkin
-            untuk membuatkan penawaran harga terbaik, hubungi kami melalui telpon jika ada
-            keterlambatan pelayanan.
+            Halaman untuk pengajuan penawaran harga, lengkapi data di bawah ini
+            dengan jelas untuk mempermudah tim support kami melayani kebutuhan
+            Anda. Tim kami akan sesegera mungkin untuk membuatkan penawaran
+            harga terbaik, hubungi kami melalui telpon jika ada keterlambatan
+            pelayanan.
           </div>
           <div>
             <label className='form-label mb-2'>Nama Perusahan*</label>
@@ -110,7 +142,9 @@ const RequestForQuotation = () => {
               className='form-input'
               aria-invalid={errors.company?.message}
             />
-            <div className='text-caption-2 text-danger-500 mt-1'>{errors.company?.message}</div>
+            <div className='text-caption-2 text-danger-500 mt-1'>
+              {errors.company?.message}
+            </div>
           </div>
 
           <div>
@@ -122,7 +156,21 @@ const RequestForQuotation = () => {
               className='form-input'
               aria-invalid={errors.phone?.message}
             />
-            <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.message}</div>
+            <div className='text-caption-2 text-danger-500 mt-1'>
+              {errors.phone?.message}
+            </div>
+          </div>
+
+          <div>
+            <label className='form-label mb-2'>Provinsi*</label>
+            <Controller
+              name='state'
+              control={control}
+              render={(props) => <HookFormSelect {...props} options={state} />}
+            />
+            <div className='text-caption-2 text-danger-500 mt-1'>
+              {errors.state?.message}
+            </div>
           </div>
 
           <div>
@@ -132,7 +180,9 @@ const RequestForQuotation = () => {
               control={control}
               render={(props) => <HookFormSelect {...props} options={cities} />}
             />
-            <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div>
+            <div className='text-caption-2 text-danger-500 mt-1'>
+              {errors.city?.message}
+            </div>
           </div>
 
           <div>
@@ -144,7 +194,9 @@ const RequestForQuotation = () => {
               className='form-input'
               aria-invalid={errors.contactPerson?.message}
             />
-            <div className='text-caption-2 text-danger-500 mt-1'>{errors.contactPerson?.message}</div>
+            <div className='text-caption-2 text-danger-500 mt-1'>
+              {errors.contactPerson?.message}
+            </div>
           </div>
 
           <div>
@@ -156,7 +208,9 @@ const RequestForQuotation = () => {
               className='form-input'
               aria-invalid={errors.mobile?.message}
             />
-            <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.mobile?.message}
+            </div>
           </div>
 
           <div>
@@ -168,39 +222,59 @@ const RequestForQuotation = () => {
               className='form-input'
               aria-invalid={errors.email?.message}
             />
-            <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
+            <div className='text-caption-2 text-danger-500 mt-1'>
+              {errors.email?.message}
+            </div>
           </div>
 
           <div>
             <label className='form-label mb-2'>Keterangan</label>
-            <textarea {...register('description')} type='text' className='form-input' />
+            <textarea
+              {...register('description')}
+              type='text'
+              className='form-input'
+            />
           </div>
 
           <div>
             <label className='form-label mb-2'>File Daftar Produk</label>
-            <input type="file" name="quotationFile" className='form-input' ref={quotationFileRef} />
+            <input
+              type='file'
+              name='quotationFile'
+              className='form-input'
+              ref={quotationFileRef}
+            />
           </div>
 
-          <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
+          <ReCAPTCHA
+            ref={recaptchaRef}
+            sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+          />
 
-          <button type='submit' className='btn-yellow w-full md:w-fit ml-0 md:ml-auto'>
+          <button
+            type='submit'
+            className='btn-yellow w-full md:w-fit ml-0 md:ml-auto'
+          >
             Simpan
           </button>
         </form>
         <PageContent path='/request-for-quotation' />
       </div>
     </div>
-  )
-}
+  );
+};
 
 const validationSchema = Yup.object().shape({
-  email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
+  email: Yup.string()
+    .email('Format harus seperti contoh@email.com')
+    .required('Harus di-isi'),
   company: Yup.string().required('Harus di-isi'),
   phone: Yup.string().required('Harus di-isi'),
   mobile: Yup.string().required('Harus di-isi'),
   city: Yup.string().required('Harus dipilih'),
+  state: Yup.string().required('Harus dipilih'),
   contactPerson: Yup.string().required('Harus dipilih'),
-})
+});
 
 const defaultValues = {
   email: '',
@@ -209,7 +283,8 @@ const defaultValues = {
   mobile: '',
   address: '',
   city: '',
-  description: ''
-}
+  state: '',
+  description: '',
+};
 
-export default RequestForQuotation
+export default RequestForQuotation;
diff --git a/src/lib/form/components/SuratDukungan.jsx b/src/lib/form/components/SuratDukungan.jsx
index 31e7ee83..fadb2c57 100644
--- a/src/lib/form/components/SuratDukungan.jsx
+++ b/src/lib/form/components/SuratDukungan.jsx
@@ -1,5 +1,6 @@
 import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
 import cityApi from '@/lib/address/api/cityApi';
+import stateApi from '@/lib/address/api/stateApi.js';
 import { yupResolver } from '@hookform/resolvers/yup';
 import React, { useEffect, useRef, useState } from 'react';
 import ReCAPTCHA from 'react-google-recaptcha';
@@ -10,7 +11,7 @@ import createLeadsApi from '../api/createLeadApi';
 
 import PageContent from '@/lib/content/components/PageContent';
 
-import useAuth from '@/core/hooks/useAuth'
+import useAuth from '@/core/hooks/useAuth';
 import { useRouter } from 'next/router';
 
 const CreateSuratDukungan = () => {
@@ -20,32 +21,21 @@ const CreateSuratDukungan = () => {
     formState: { errors },
     control,
     reset,
+    watch,
+    setValue,
   } = useForm({
     resolver: yupResolver(validationSchema),
     defaultValues,
   });
-  const [cities, setCities] = useState([]);
   const [company_unit, setCompany_unit] = useState([]);
 
   const recaptchaRef = useRef(null);
-  const router = useRouter()
+  const router = useRouter();
 
-  const auth = useAuth()
-
-  useEffect(() => {
-    if(auth == false) {
-      router.push('/login')
-    }
-    const loadCities = async () => {
-      let dataCities = await cityApi();
-      dataCities = dataCities.map((city) => ({
-        value: city.id,
-        label: city.name,
-      }));
-      setCities(dataCities);
-    };
-    loadCities();
-  }, [auth]);
+  const auth = useAuth();
+  if (auth == false) {
+    router.push(`/login?next=${encodeURIComponent('/surat-dukungan')}`);
+  }
 
   const onSubmitHandler = async (values) => {
     const recaptchaValue = recaptchaRef.current.getValue();
@@ -85,6 +75,9 @@ const CreateSuratDukungan = () => {
       recaptchaRef.current.reset();
     }
   };
+  if (!auth) {
+    return;
+  }
   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'>
@@ -241,7 +234,7 @@ const CreateSuratDukungan = () => {
               </div>
             </form>
           </div>
-          <PageContent path='/surat-dukungan'/>
+          <PageContent path='/surat-dukungan' />
         </div>
       </div>
     </div>
diff --git a/src/lib/home/components/BannerSection.jsx b/src/lib/home/components/BannerSection.jsx
index 303b5c4b..898f1bf5 100644
--- a/src/lib/home/components/BannerSection.jsx
+++ b/src/lib/home/components/BannerSection.jsx
@@ -51,6 +51,7 @@ const BannerSection = () => {
               src={banner.image}
               alt={banner.name}
               className='h-auto w-full rounded'
+              loading='eager'
             />
           </Link>
         ))}
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index d72fe1f1..b6994f60 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -85,6 +85,7 @@ const CategoryDynamic = () => {
                                 width={90}
                                 height={30}
                                 className='object-fit p-4'
+                                loading='eager'
                               />
                               <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
                                 <h2 className='font-semibold text-lg mr-2'>
@@ -127,6 +128,7 @@ const CategoryDynamic = () => {
                                           height={40}
                                           placeholder='blur'
                                           blurDataURL='/icon.jpg'
+                                          loading='eager'
                                         />
                                         <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
                                           <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx
index 67ae6f5f..5d9e872c 100644
--- a/src/lib/home/components/CategoryDynamicMobile.jsx
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -90,6 +90,7 @@ const CategoryDynamicMobile = () => {
                           width={30}
                           height={30}
                           className=''
+                          loading='eager'
                         />
                         <div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'>
                           <h2 className='font-semibold text-[10px] line-clamp-1'>
@@ -123,6 +124,7 @@ const CategoryDynamicMobile = () => {
                             width={40}
                             height={40}
                             className='p-2'
+                            loading='eager'
                           />
                           <div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'>
                             <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index fc23bf78..d8bf3edb 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -69,7 +69,8 @@ const BannerSection = () => {
                 quality={85}
                 src={banner.image}
                 alt={banner.name}
-                className='h-auto  w-full rounded hover:scale-105 transition duration-500 ease-in-out'
+                className='rounded hover:scale-105 transition duration-500 ease-in-out'
+                loading='eager'
               />
             </Link>
           ))}
@@ -82,12 +83,13 @@ const BannerSection = () => {
             <SwiperSlide key={banner.id}>
               <Link key={banner.id} href={banner.url}>
                 <Image
-                  width={439}
-                  height={150}
-                  quality={85}
+                  width={350}
+                  height={100}
+                  quality={70}
                   src={banner.image}
                   alt={banner.name}
-                  className='h-auto  w-full rounded '
+                  className='rounded '
+                  loading='eager'
                 />
               </Link>
             </SwiperSlide>
diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx
index b3cc8fe5..e32e8747 100644
--- a/src/lib/home/components/ServiceList.jsx
+++ b/src/lib/home/components/ServiceList.jsx
@@ -18,6 +18,7 @@ const ServiceList = () => {
                 src='/images/icon_service/ONE-STOP-SOLUTIONS.svg'
                 alt=''
                 className='h-20 w-20 rounded'
+                loading='eager'
               />
             </div>
             <div className=''>
@@ -43,6 +44,7 @@ const ServiceList = () => {
                 src='/images/icon_service/WARRANTY.svg'
                 alt=''
                 className='h-20 w-20 rounded'
+                loading='eager'
               />
             </div>
             <div>
@@ -57,7 +59,7 @@ const ServiceList = () => {
         </div>
         <div className='w-full '>
           <Link
-            href='/pembayaran-tempo'
+            href='/pembayaran-tempo-detail'
             className='border border-gray-200 p-2 flex items-center gap-x-2 rounded-lg'
           >
             <div className=''>
@@ -68,6 +70,7 @@ const ServiceList = () => {
                 src='/images/icon_service/DUE-PAYMENT.svg'
                 alt=''
                 className='h-20 w-20 rounded'
+                loading='eager'
               />
             </div>
             <div>
@@ -93,6 +96,7 @@ const ServiceList = () => {
                 src='/images/icon_service/TAX.svg'
                 alt=''
                 className='h-20 w-20 rounded'
+                loading='eager'
               />
             </div>
             <div>
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 444ddd8e..19e76a2b 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -255,6 +255,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                         >
                           <ImageNext
                             src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                            alt='Flash Sale'
                             width={17}
                             height={10}
                           />
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 113a1e42..4cfd3755 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -219,6 +219,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
                   >
                     <ImageNext
                       src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                      alt='Flash Sale'
                       width={17}
                       height={10}
                     />
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 16e20703..a8ed90a4 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -21,7 +21,6 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
   voucherPastiHemat = product?.newVoucherPastiHemat[0]
     ? product?.newVoucherPastiHemat[0]
     : product?.newVoucherPastiHemat;
-  console.log('voucherPastiHemat', voucherPastiHemat);
 
   const callForPriceWhatsapp = whatsappUrl('product', {
     name: product.name,
@@ -75,7 +74,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
   if (variant == 'vertical') {
     return (
       <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[330px] md:h-[380px]'>
-        <Link href={URL.product} className='border-b border-gray_r-4 relative'>
+        <Link href={URL.product} className='border-b border-gray_r-4 relative'  aria-label='Produk'>
           <div className='relative'>
             <Image
               src={image}
@@ -91,6 +90,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     className='w-4 h-5 object-contain object-top   sm:h-6'
                     width={50}
                     height={50}
+                    loading='eager'
                   />
                 )}
               </div>
@@ -102,6 +102,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     className='w-11 h-6 object-contain object-top  ml-1 mr-1 sm:h-6'
                     width={50}
                     height={50}
+                    loading='eager'
                   />
                 )}
               </div>
@@ -116,6 +117,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   className='h-full'
                   width={1000}
                   height={100}
+                  loading='eager'
                 />
               </div>
               <div className='relative'>
@@ -128,8 +130,10 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   <div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
                     <ImageNext
                       src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                      alt='flash sale'
                       width={13}
                       height={5}
+                      loading='eager'
                     />
                     <span className='text-white text-[9px] md:text-[10px] font-semibold'>
                       {product?.flashSale?.tag != 'false' ||
@@ -151,26 +155,28 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
         <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'>
           <div className='flex justify-between '>
             {product?.manufacture?.name ? (
-              <Link href={URL.manufacture} className='mb-1 mt-1 truncate'>
+              <Link href={URL.manufacture} className='mb-1 mt-1 truncate' aria-label={product.manufacture.name}>
                 {product.manufacture.name}
               </Link>
             ) : (
               <div>-</div>
             )}
             {product?.isInBu && (
-              <Link href='/panduan-pick-up-service' className='group'>
+              <Link href='/panduan-pick-up-service' className='group' aria-label='pickup now'>
                 <Image
                   src='/images/PICKUP-NOW.png'
                   className='group-hover:scale-105 transition-transform duration-200'
                   alt='pickup now'
                   width={90}
                   height={12}
+                  loading='eager'
                 />
               </Link>
             )}
           </div>
           <Link
             href={URL.product}
+            aria-label={product?.name}
             className={`mb-2 !text-gray_r-12 leading-6 block line-clamp-3 h-[64px]`}
             title={product?.name}
           >
@@ -195,6 +201,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     rel='noopener noreferrer'
                     target='_blank'
                     href={callForPriceWhatsapp}
+                    aria-label='Call for Inquiry'
                   >
                     Call for Inquiry
                   </a>
@@ -218,6 +225,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   rel='noopener noreferrer'
                   target='_blank'
                   href={callForPriceWhatsapp}
+                  aria-label='Call for Inquiry'
                 >
                   Call for Inquiry
                 </a>
@@ -252,7 +260,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
     return (
       <div className='flex bg-white'>
         <div className='w-4/12'>
-          <Link href={URL.product} className='relative'>
+          <Link href={URL.product} className='relative' aria-label={product?.name}>
             <div className='relative'>
               <Image
                 src={image}
@@ -268,6 +276,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                       className='w-4 h-5 object-contain object-top   sm:h-6'
                       width={50}
                       height={50}
+                      loading='eager'
                     />
                   )}
                 </div>
@@ -279,6 +288,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                       className='w-11 h-6 object-contain object-top  ml-1 sm:h-6'
                       width={50}
                       height={50}
+                      loading='eager'
                     />
                   )}
                 </div>
@@ -296,8 +306,10 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'>
               <ImageNext
                 src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                alt='flash sae'
                 width={15}
                 height={10}
+                loading='eager'
               />
               <span className='text-white text-xs font-semibold'>
                 {' '}
@@ -309,7 +321,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
           {product?.manufacture?.name ? (
             <div className='flex justify-between'>
-              <Link href={URL.manufacture} className='mb-1'>
+              <Link href={URL.manufacture} className='mb-1' aria-label={product?.manufacture.name}>
                 {product.manufacture.name}
               </Link>
               {/* {product?.is_in_bu && (
@@ -325,6 +337,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
           <Link
             href={URL.product}
+            aria-label={product?.name}
             className={`mb-3 !text-gray_r-12 leading-6 line-clamp-3`}
           >
             {product?.name}
@@ -351,6 +364,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     rel='noopener noreferrer'
                     target='_blank'
                     href={callForPriceWhatsapp}
+                    aria-label='Call for Inquiry'
                   >
                     Call for Inquiry
                   </a>
@@ -374,6 +388,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   rel='noopener noreferrer'
                   target='_blank'
                   href={callForPriceWhatsapp}
+                  aria-label='Call for Inquiry'
                 >
                   Call for Inquiry
                 </a>
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index 54f209cc..91d199a6 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -35,7 +35,7 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
       <>
         {bannerMode && (
           <SwiperSlide>
-            <Link href={products.banner.url} className='w-full h-full block'></Link>
+            <Link href={products.banner.url} className='w-full h-full block' aria-label={products.banner.name}></Link>
           </SwiperSlide>
         )}
         {products?.products?.map((product, index) => (
diff --git a/src/pages/api/flashsale-header.js b/src/pages/api/flashsale-header.js
index 21cb9c9d..578801ae 100644
--- a/src/pages/api/flashsale-header.js
+++ b/src/pages/api/flashsale-header.js
@@ -20,13 +20,19 @@ export default async function handler(req, res) {
     let cachedData = await client.get(cacheKey);
 
     if (cachedData) {
-      const data = JSON.parse(cachedData); 
+      const data = JSON.parse(cachedData);
 
       // Periksa apakah data adalah array dan panjangnya 0
       if (!data || (Array.isArray(data) && data.length === 0)) {
         await client.del(cacheKey); // Hapus kunci jika data kosong
         return res.status(200).json({ data: [] });
       }
+      // Periksa apakah end_date lebih besar dari waktu saat ini
+      const currentTime = new Date();
+      if (data[0].endDate && new Date(data[0].endDate) < currentTime) {
+        await client.del(cacheKey); // Hapus kunci jika end_date lebih kecil dari waktu saat ini
+        return res.status(200).json({ data: [] });
+      }
       return res.status(200).json({ data });
     } else {
       const flashSale = await odooApi('GET', `/api/v1/flashsale/header`);
@@ -37,11 +43,11 @@ export default async function handler(req, res) {
           cacheKey,
           JSON.stringify(flashSale),
           'EX',
-          flashSale.duration 
+          flashSale.duration
         );
 
         cachedData = await client.get(cacheKey);
-        const data = JSON.parse(cachedData); 
+        const data = JSON.parse(cachedData);
         return res.status(200).json({ data });
       }
     }
diff --git a/src/pages/api/hero-banner.js b/src/pages/api/hero-banner.js
index 7a348cfa..b7f3c1c5 100644
--- a/src/pages/api/hero-banner.js
+++ b/src/pages/api/hero-banner.js
@@ -28,6 +28,8 @@ export default async function handler(req, res) {
         `/api/v1/banner?type=${type}`
       );
 
+      if(!dataBannerSections) return res.status(200).json({ data: [] });
+
       // Simpan hasil fetch ke Redis dengan masa kadaluarsa 3 hari (259200 detik)
       await client.set(
         cacheKey,
diff --git a/src/pages/api/search-flashsale.js b/src/pages/api/search-flashsale.js
index d9e56c83..c00f6c64 100644
--- a/src/pages/api/search-flashsale.js
+++ b/src/pages/api/search-flashsale.js
@@ -23,20 +23,28 @@ export default async function handler(req, res) {
 
     if (cachedData) {
       const data = JSON.parse(cachedData);
+      // Periksa apakah data adalah array dan panjangnya 0
+      if (!data || (Array.isArray(data) && data.length === 0)) {
+        await client.del(cacheKey); // Hapus kunci jika data kosong
+        return res.status(200).json({ data: [] });
+      }
       return res.status(200).json({ data });
     } else {
       const dataProductSearch = await axios(
         `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?${query}&operation=${operation}]`
       );
-
-      await client.set(
-        cacheKey,
-        JSON.stringify(dataProductSearch.data),
-        'EX',
-        duration
-      );
-      cachedData = await client.get(cacheKey);
-      return res.status(200).json({ data: cachedData });
+      if (dataProductSearch.data.length === 0) {
+        return res.status(200).json({ data: [] });
+      } else {
+        await client.set(
+          cacheKey,
+          JSON.stringify(dataProductSearch.data),
+          'EX',
+          duration
+        );
+        cachedData = await client.get(cacheKey);
+        return res.status(200).json({ data: cachedData });
+      }
     }
   } catch (error) {
     console.error('Error interacting with Redis or fetching data:', error);
diff --git a/src/pages/my/daftar-merchant.jsx b/src/pages/daftar-merchant.jsx
index e1fa9bcb..e1fa9bcb 100644
--- a/src/pages/my/daftar-merchant.jsx
+++ b/src/pages/daftar-merchant.jsx
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index e685b382..fce2202a 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,23 +1,27 @@
 import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton';
 import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton';
-import odooApi from '@/core/api/odooApi';
 import Seo from '@/core/components/Seo';
 import DelayRender from '@/core/components/elements/DelayRender/DelayRender';
 import DesktopView from '@/core/components/views/DesktopView';
 import MobileView from '@/core/components/views/MobileView';
-import { FlashSaleSkeleton } from '@/lib/flashSale/skeleton/FlashSaleSkeleton';
-import BannerPromoSkeleton from '@/lib/home/components/Skeleton/BannerPromoSkeleton';
 import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBrandSkeleton';
 import dynamic from 'next/dynamic';
-import { useEffect, useRef, useState } from 'react';
+import { useRef } from 'react';
 import { getAuth } from '~/libs/auth';
-import PagePopupIformation from '~/modules/popup-information'; // need change to dynamic and ssr : false
-import CategoryPilihan from '../lib/home/components/CategoryPilihan';
-// import { getAuth } from '~/libs/auth';
 
 const BasicLayout = dynamic(() =>
   import('@/core/components/layouts/BasicLayout')
 );
+
+const PagePopupIformation = dynamic(() =>
+  import('~/modules/popup-information'), {
+    ssr: false
+  }
+);
+
+const CategoryPilihan = dynamic(() =>
+  import('../lib/home/components/CategoryPilihan')
+);
 const HeroBanner = dynamic(() => import('@/components/ui/HeroBanner'), {
   loading: () => <HeroBannerSkeleton />,
 });
diff --git a/src/pages/my/kunjungan-sales.jsx b/src/pages/kunjungan-sales.jsx
index 052991d9..052991d9 100644
--- a/src/pages/my/kunjungan-sales.jsx
+++ b/src/pages/kunjungan-sales.jsx
diff --git a/src/pages/my/kunjungan-service.jsx b/src/pages/kunjungan-service.jsx
index 37de5a0b..37de5a0b 100644
--- a/src/pages/my/kunjungan-service.jsx
+++ b/src/pages/kunjungan-service.jsx
diff --git a/src/pages/my/pembayaran-tempo.jsx b/src/pages/my/pembayaran-tempo.jsx
deleted file mode 100644
index 8947bdd9..00000000
--- a/src/pages/my/pembayaran-tempo.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import Seo from '@/core/components/Seo'
-import BasicLayout from '@/core/components/layouts/BasicLayout'
-import PembayaranTempo from '@/lib/form/components/PembayaranTempo'
-
-export default function pembayaranTempo() {
-  return (
-    <>
-      <Seo title='Pembayaran Tempo - Indoteknik.com' />
-
-      <BasicLayout>
-        <PembayaranTempo />
-      </BasicLayout>
-    </>
-  )
-}
diff --git a/src/pages/pembayaran-tempo-detail.jsx b/src/pages/pembayaran-tempo-detail.jsx
new file mode 100644
index 00000000..363e3099
--- /dev/null
+++ b/src/pages/pembayaran-tempo-detail.jsx
@@ -0,0 +1,13 @@
+import Seo from '@/core/components/Seo'
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import IframeContent from '@/lib/iframe/components/IframeContent'
+
+export default function PembnayaranTempo() {
+  return (
+    <BasicLayout>
+      <Seo title='Pambayaran Tempo - Indoteknik.com' />
+
+      <IframeContent url={`${process.env.NEXT_PUBLIC_ODOO_HOST}/content?url=pembayaran-tempo`} />
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/pembayaran-tempo.jsx b/src/pages/pembayaran-tempo.jsx
index 363e3099..8947bdd9 100644
--- a/src/pages/pembayaran-tempo.jsx
+++ b/src/pages/pembayaran-tempo.jsx
@@ -1,13 +1,15 @@
 import Seo from '@/core/components/Seo'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
-import IframeContent from '@/lib/iframe/components/IframeContent'
+import PembayaranTempo from '@/lib/form/components/PembayaranTempo'
 
-export default function PembnayaranTempo() {
+export default function pembayaranTempo() {
   return (
-    <BasicLayout>
-      <Seo title='Pambayaran Tempo - Indoteknik.com' />
+    <>
+      <Seo title='Pembayaran Tempo - Indoteknik.com' />
 
-      <IframeContent url={`${process.env.NEXT_PUBLIC_ODOO_HOST}/content?url=pembayaran-tempo`} />
-    </BasicLayout>
+      <BasicLayout>
+        <PembayaranTempo />
+      </BasicLayout>
+    </>
   )
 }
diff --git a/src/pages/my/request-for-quotation.jsx b/src/pages/request-for-quotation.jsx
index 40fda009..40fda009 100644
--- a/src/pages/my/request-for-quotation.jsx
+++ b/src/pages/request-for-quotation.jsx
diff --git a/src/pages/sitemap/homepage.xml.js b/src/pages/sitemap/homepage.xml.js
new file mode 100644
index 00000000..fa622d5c
--- /dev/null
+++ b/src/pages/sitemap/homepage.xml.js
@@ -0,0 +1,33 @@
+import { create } from 'xmlbuilder';
+
+export async function getServerSideProps({ res }) {
+  const links = [
+    { label: 'Hubungi Kami', url: 'https://indoteknik.com/hubungi-kami' },
+    { label: 'Tentang Kami', url: 'https://indoteknik.com/tentang-kami' },
+    { label: 'Karir', url: 'https://indoteknik.com/karir' },
+    { label: 'Daftar Tempo', url: 'https://indoteknik.com/pembayaran-tempo' },
+  ];
+  const sitemap = create('urlset', { encoding: 'utf-8' }).att(
+    'xmlns',
+    'http://www.sitemaps.org/schemas/sitemap/0.9'
+  );
+
+  const date = new Date();
+  links.forEach((link) => {
+    const url = sitemap.ele('url');
+    url.ele('loc', link.url);
+    url.ele('lastmod', date.toISOString().slice(0, 10));
+    url.ele('changefreq', 'daily');
+    url.ele('priority', '1.0');
+  });
+
+  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/my/surat-dukungan.jsx b/src/pages/surat-dukungan.jsx
index 8058f34d..8058f34d 100644
--- a/src/pages/my/surat-dukungan.jsx
+++ b/src/pages/surat-dukungan.jsx