Merged in master (pull request #8)

Master

31 files changed, 264 insertions, 129 deletions

diff --git a/src/core/components/elements/DelayRender/DelayRender.jsx b/src/core/components/elements/DelayRender/DelayRender.jsx
new file mode 100644
index 00000000..2d412be7
--- /dev/null
+++ b/src/core/components/elements/DelayRender/DelayRender.jsx
@@ -0,0 +1,19 @@
+const { useState, useEffect } = require('react')
+
+const DelayRender = ({ renderAfter = 200, children }) => {
+  const [renderComponent, setRenderComponent] = useState(false)
+
+  useEffect(() => {
+    const renderTimeout = setTimeout(() => {
+      setRenderComponent(true)
+    }, renderAfter)
+
+    return () => {
+      clearTimeout(renderTimeout)
+    }
+  }, [renderAfter])
+
+  return renderComponent && children
+}
+
+export default DelayRender
diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 75e9926d..9f68c2f7 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -15,7 +15,7 @@ const BasicFooter = () => {
     <>
       <MobileView>
         <footer className='flex flex-wrap p-4 bg-gray_r-3 text-caption-1'>
-          <div className='w-1/2 flex flex-col gap-y-4 pr-1.5'>
+          <div className='w-1/2 flex flex-col gap-y-8 pr-2'>
             <div>
               <NextImage src={IndoteknikLogo} alt='Logo Indoteknik' width={90} height={30} />
 
@@ -30,13 +30,13 @@ const BasicFooter = () => {
             <SocialMedias />
           </div>
 
-          <div className='w-1/2 flex flex-col gap-y-4 pl-1.5'>
+          <div className='w-1/2 flex flex-col gap-y-8 pl-2'>
             <Form />
             <CustomerGuide />
             <Payments />
           </div>
 
-          <div className='w-full mt-4 leading-5 text-caption-2 text-gray_r-12/80'>
+          <div className='w-full mt-8 leading-5 text-caption-2 text-gray_r-12/80'>
             Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik Dotcom Gemilang
           </div>
         </footer>
@@ -77,7 +77,7 @@ const BasicFooter = () => {
   )
 }
 
-const headerClassName = 'font-semibold mb-2'
+const headerClassName = 'font-semibold mb-4'
 
 const OfficeLocation = () => (
   <div>
@@ -99,8 +99,8 @@ const WarehouseLocation = () => (
 
 const AboutUs = () => (
   <div>
-    <div className={`${headerClassName} mb-3`}>Tentang Kami</div>
-    <ul className='flex flex-col gap-y-2'>
+    <div className={headerClassName}>Tentang Kami</div>
+    <ul className='flex flex-col gap-y-3'>
       <li>
         <InternalItemLink href='/tentang-kami'>Company Profile</InternalItemLink>
       </li>
@@ -125,8 +125,8 @@ const AboutUs = () => (
 
 const CustomerGuide = () => (
   <div>
-    <div className={`${headerClassName} mb-3`}>Bantuan & Panduan</div>
-    <ul className='flex flex-col gap-y-2'>
+    <div className={headerClassName}>Bantuan & Panduan</div>
+    <ul className='flex flex-col gap-y-3'>
       <li>
         <InternalItemLink href='/metode-pembayaran'>Metode Pembayaran</InternalItemLink>
       </li>
@@ -156,8 +156,8 @@ const CustomerGuide = () => (
 
 const Form = () => (
   <div>
-    <div className={`${headerClassName} mb-3`}>Formulir</div>
-    <ul className='flex flex-col gap-y-2'>
+    <div className={headerClassName}>Formulir</div>
+    <ul className='flex flex-col gap-y-3'>
       <li>
         <InternalItemLink href='/my/request-for-quotation'>Request for Quotation</InternalItemLink>
       </li>
@@ -182,8 +182,8 @@ const Form = () => (
 
 const InformationCenter = () => (
   <div>
-    <div className={`${headerClassName} mb-3`}>Layanan Informasi</div>
-    <ul className='flex flex-col gap-y-2'>
+    <div className={headerClassName}>Layanan Informasi</div>
+    <ul className='flex flex-col gap-y-3'>
       <li className='text-gray_r-12/80 flex items-center'>
         <PhoneArrowUpRightIcon className='w-[18px] mr-2' />
         <a href='tel:02129338828'>(021) 2933-8828 / 29</a>
@@ -205,7 +205,7 @@ const InformationCenter = () => (
 const OpenHours = () => (
   <div>
     <div className={headerClassName}>Jam Operasional</div>
-    <ul className='flex flex-col gap-y-1'>
+    <ul className='flex flex-col gap-y-3'>
       <li className='block md:flex md:gap-x-2'>
         <div className='text-gray_r-12'>Senin - Jumat:</div>
         <div className='text-gray_r-12/80'>08:30 - 17:00</div>
@@ -221,7 +221,7 @@ const OpenHours = () => (
 const SocialMedias = () => (
   <div>
     <div className={headerClassName + 'block md:hidden'}>Temukan Kami</div>
-    <div className='flex flex-wrap gap-2 mt-2'>
+    <div className='flex flex-wrap gap-3 mt-2'>
       <a target='_blank' rel='noreferrer' href={whatsappUrl(null)}>
         <NextImage src='/images/socials/Whatsapp.png' alt='Whatsapp Logo' width={24} height={24} />
       </a>
diff --git a/src/core/components/elements/Spinner/LogoSpinner.jsx b/src/core/components/elements/Spinner/LogoSpinner.jsx
index 73b84e84..94da5f1d 100644
--- a/src/core/components/elements/Spinner/LogoSpinner.jsx
+++ b/src/core/components/elements/Spinner/LogoSpinner.jsx
@@ -1,9 +1,8 @@
 import Image from 'next/image'
-import IndoteknikLogo from '@/images/LOGO-INDOTEKNIK-GEAR.png'
 
 const LogoSpinner = ({ ...props }) => (
   <Image
-    src={IndoteknikLogo}
+    src='/images/logo-indoteknik-gear.png'
     alt='Indoteknik Logo'
     width={64}
     height={64}
diff --git a/src/core/components/layouts/AnimationLayout.jsx b/src/core/components/layouts/AnimationLayout.jsx
index 7acf21dc..eeaa8751 100644
--- a/src/core/components/layouts/AnimationLayout.jsx
+++ b/src/core/components/layouts/AnimationLayout.jsx
@@ -1,9 +1,6 @@
-import useDevice from '@/core/hooks/useDevice'
 import { motion } from 'framer-motion'
 
 const AnimationLayout = ({ children, ...props }) => {
-  const { isMobile } = useDevice()
-
   const initialConfig = {
     opacity: 0,
     x: 0,
@@ -19,7 +16,7 @@ const AnimationLayout = ({ children, ...props }) => {
 
   const exitConfig = {
     opacity: 0,
-    x: isMobile ? 30 : 0,
+    x: 0,
     y: 0,
     transition: { duration: 0.2, ease: 'easeInOut' }
   }
diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx
index 13d4a194..ff673953 100644
--- a/src/lib/auth/components/CompanyProfile.jsx
+++ b/src/lib/auth/components/CompanyProfile.jsx
@@ -60,7 +60,6 @@ const CompanyProfile = () => {
     }
     const isUpdated = await odooApi('PUT', `/api/v1/partner/${auth.parentId}`, data)
     if (isUpdated?.id) {
-      setIsOpen(false)
       toast.success('Berhasil mengubah profil', { duration: 1500 })
       return
     }
@@ -69,59 +68,58 @@ const CompanyProfile = () => {
 
   return (
     <>
-      <button type='button' onClick={toggle} className='p-4 flex items-center text-left'>
+      <button type='button' onClick={toggle} className='p-4 flex items-center text-left w-full'>
         <div>
           <div className='font-semibold mb-2'>Informasi Usaha</div>
           <div className='text-gray_r-11'>
             Dibawah ini adalah data usaha yang anda masukkan, periksa kembali data usaha anda.
           </div>
         </div>
-        <div className='ml-2 p-2 bg-gray_r-3 rounded'>
+        <div className='ml-auto p-2 bg-gray_r-3 rounded'>
           {!isOpen && <ChevronDownIcon className='w-6' />}
           {isOpen && <ChevronUpIcon className='w-6' />}
         </div>
       </button>
 
       {isOpen && (
-        <form
-          className='p-4 border-t border-gray_r-6 flex flex-col gap-y-4'
-          onSubmit={handleSubmit(onSubmitHandler)}
-        >
-          <div>
-            <label className='block mb-3'>Klasifikasi Jenis Usaha</label>
-            <Controller
-              name='industry'
-              control={control}
-              render={(props) => <HookFormSelect {...props} options={industries} />}
-            />
-          </div>
-          <div className='flex flex-wrap'>
-            <div className='w-full mb-3'>Nama Usaha</div>
-            <div className='w-3/12 pr-1'>
+        <form className='p-4 border-t border-gray_r-6' onSubmit={handleSubmit(onSubmitHandler)}>
+          <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
+            <div>
+              <label className='block mb-3'>Klasifikasi Jenis Usaha</label>
               <Controller
-                name='companyType'
+                name='industry'
                 control={control}
-                render={(props) => <HookFormSelect {...props} options={companyTypes} />}
+                render={(props) => <HookFormSelect {...props} options={industries} />}
               />
             </div>
-            <div className='w-9/12 pl-1'>
-              <input
-                {...register('name')}
-                type='text'
-                className='form-input'
-                placeholder='Cth: Indoteknik Dotcom Gemilang'
-              />
+            <div className='flex flex-wrap'>
+              <div className='w-full mb-3'>Nama Usaha</div>
+              <div className='w-3/12 pr-1'>
+                <Controller
+                  name='companyType'
+                  control={control}
+                  render={(props) => <HookFormSelect {...props} options={companyTypes} />}
+                />
+              </div>
+              <div className='w-9/12 pl-1'>
+                <input
+                  {...register('name')}
+                  type='text'
+                  className='form-input'
+                  placeholder='Cth: Indoteknik Dotcom Gemilang'
+                />
+              </div>
+            </div>
+            <div>
+              <label>Nama Wajib Pajak</label>
+              <input {...register('taxName')} type='text' className='form-input mt-3' />
+            </div>
+            <div>
+              <label>Nomor NPWP</label>
+              <input {...register('npwp')} type='text' className='form-input mt-3' />
             </div>
           </div>
-          <div>
-            <label>Nama Wajib Pajak</label>
-            <input {...register('taxName')} type='text' className='form-input mt-3' />
-          </div>
-          <div>
-            <label>Nomor NPWP</label>
-            <input {...register('npwp')} type='text' className='form-input mt-3' />
-          </div>
-          <button type='submit' className='btn-yellow w-full mt-2'>
+          <button type='submit' className='btn-yellow w-full mt-6'>
             Simpan
           </button>
         </form>
diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index 8a8e2e8a..386b817c 100644
--- a/src/lib/auth/components/Menu.jsx
+++ b/src/lib/auth/components/Menu.jsx
@@ -7,7 +7,7 @@ const Menu = () => {
   const routeStartWith = (route) => router.pathname.startsWith(route)
 
   return (
-    <div className='grid grid-cols-1 bg-white border border-gray_r-6 rounded py-2 px-4'>
+    <div className='grid grid-cols-1 bg-white border border-gray_r-6 rounded py-2 px-4 sticky top-48'>
       <div className='mt-4 mb-1 font-medium'>Menu</div>
       <LinkItem href='/my/quotations' active={routeStartWith('/my/quotations')}>
         Daftar Quotation
@@ -29,6 +29,9 @@ const Menu = () => {
       <LinkItem href='/my/address' active={routeStartWith('/my/address')}>
         Daftar Alamat
       </LinkItem>
+      <LinkItem href='/my/profile' active={routeStartWith('/my/profile')}>
+        Profil Saya
+      </LinkItem>
       <button type='button' className='text-gray_r-12/80 p-2 text-left'>
         Keluar Akun
       </button>
diff --git a/src/lib/auth/components/PersonalProfile.jsx b/src/lib/auth/components/PersonalProfile.jsx
index bca54e24..b9fb3f5f 100644
--- a/src/lib/auth/components/PersonalProfile.jsx
+++ b/src/lib/auth/components/PersonalProfile.jsx
@@ -38,7 +38,6 @@ const PersonalProfile = () => {
     if (isUpdated?.user) {
       setAuth(isUpdated.user)
       setValue('password', '')
-      setIsOpen(false)
       toast.success('Berhasil mengubah profil', { duration: 1500 })
       return
     }
@@ -47,46 +46,45 @@ const PersonalProfile = () => {
 
   return (
     <>
-      <button type='button' onClick={toggle} className='p-4 flex items-center text-left'>
+      <button type='button' onClick={toggle} className='p-4 flex items-center text-left w-full'>
         <div>
           <div className='font-semibold mb-2'>Informasi Akun</div>
           <div className='text-gray_r-11'>
             Dibawah ini adalah data diri yang anda masukan, periksa kembali data diri anda
           </div>
         </div>
-        <div className='ml-2 p-2 bg-gray_r-3 rounded'>
+        <div className='ml-auto p-2 bg-gray_r-3 rounded'>
           {!isOpen && <ChevronDownIcon className='w-6' />}
           {isOpen && <ChevronUpIcon className='w-6' />}
         </div>
       </button>
 
       {isOpen && (
-        <form
-          className='p-4 border-t border-gray_r-6 flex flex-col gap-y-4'
-          onSubmit={handleSubmit(onSubmitHandler)}
-        >
-          <div>
-            <label>Email</label>
-            <input {...register('email')} type='text' disabled className='form-input mt-3' />
+        <form className='p-4 border-t border-gray_r-6' onSubmit={handleSubmit(onSubmitHandler)}>
+          <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
+            <div>
+              <label>Email</label>
+              <input {...register('email')} type='text' disabled className='form-input mt-3' />
+            </div>
+            <div>
+              <label>Nama Lengkap</label>
+              <input {...register('name')} type='text' className='form-input mt-3' />
+            </div>
+            <div>
+              <label>No. Handphone</label>
+              <input {...register('mobile')} type='tel' className='form-input mt-3' />
+            </div>
+            <div>
+              <label>Kata Sandi</label>
+              <input
+                {...register('password')}
+                type='password'
+                className='form-input mt-3'
+                placeholder='Isi jika ingin mengubah kata sandi'
+              />
+            </div>
           </div>
-          <div>
-            <label>Nama Lengkap</label>
-            <input {...register('name')} type='text' className='form-input mt-3' />
-          </div>
-          <div>
-            <label>No. Handphone</label>
-            <input {...register('mobile')} type='tel' className='form-input mt-3' />
-          </div>
-          <div>
-            <label>Kata Sandi</label>
-            <input
-              {...register('password')}
-              type='password'
-              className='form-input mt-3'
-              placeholder='Isi jika ingin mengubah kata sandi'
-            />
-          </div>
-          <button type='submit' className='btn-yellow w-full mt-2'>
+          <button type='submit' className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6'>
             Simpan
           </button>
         </form>
diff --git a/src/lib/home/components/CategoryHome.jsx b/src/lib/home/components/CategoryHome.jsx
index 8fe3788c..4566bc4b 100644
--- a/src/lib/home/components/CategoryHome.jsx
+++ b/src/lib/home/components/CategoryHome.jsx
@@ -6,7 +6,7 @@ const CategoryHome = ({ id }) => {
   const { categoryHome } = useCategoryHome({ id })
 
   return (
-    <div className='p-4 sm:py-8 relative bg-warning-100 border border-warning-300'>
+    <div className='p-4 sm:py-8 relative bg-warning-100 border border-warning-300 min-h-[240px]'>
       {categoryHome.data ? (
         <ProductSlider
           products={{
diff --git a/src/lib/home/components/CategoryHomeId.jsx b/src/lib/home/components/CategoryHomeId.jsx
index c37a6af7..4899f216 100644
--- a/src/lib/home/components/CategoryHomeId.jsx
+++ b/src/lib/home/components/CategoryHomeId.jsx
@@ -6,7 +6,7 @@ const CategoryHomeId = () => {
   const { categoryHomeIds } = useCategoryHomeId()
 
   return (
-    <div className='flex flex-col gap-y-6'>
+    <div className='flex flex-col gap-y-10'>
       {categoryHomeIds.data?.map((id) => (
         <LazyLoadComponent key={id}>
           <CategoryHome id={id} />
diff --git a/src/lib/home/components/HeroBanner.jsx b/src/lib/home/components/HeroBanner.jsx
index 50cfc0ff..889bb2ce 100644
--- a/src/lib/home/components/HeroBanner.jsx
+++ b/src/lib/home/components/HeroBanner.jsx
@@ -15,22 +15,23 @@ import Link from '@/core/components/elements/Link/Link'
 const HeroBanner = () => {
   const { heroBanners } = useHeroBanner()
 
-  const swiperBannerMobile = {
-    pagination: { dynamicBullets: true, clickable: true },
+  const swiperBanner = {
     autoplay: {
       delay: 6000,
       disableOnInteraction: false
     },
-    modules: [Pagination, Autoplay]
+    modules: [Pagination, Autoplay],
+    loop: true
+  }
+
+  const swiperBannerMobile = {
+    ...swiperBanner,
+    pagination: { dynamicBullets: true, clickable: true }
   }
 
   const swiperBannerDesktop = {
-    pagination: { dynamicBullets: false, clickable: true },
-    autoplay: {
-      delay: 6000,
-      disableOnInteraction: false
-    },
-    modules: [Pagination, Autoplay]
+    ...swiperBanner,
+    pagination: { dynamicBullets: false, clickable: true }
   }
 
   return (
diff --git a/src/lib/invoice/components/Invoices.jsx b/src/lib/invoice/components/Invoices.jsx
index 96686bbb..5edcfdbf 100644
--- a/src/lib/invoice/components/Invoices.jsx
+++ b/src/lib/invoice/components/Invoices.jsx
@@ -71,7 +71,7 @@ const Invoices = () => {
 
           {!invoices.isLoading && invoices.data?.invoices?.length === 0 && (
             <Alert type='info' className='text-center'>
-              Tidak ada data invoice
+              Tidak ada invoice
             </Alert>
           )}
 
@@ -198,7 +198,7 @@ const Invoices = () => {
               <tbody>
                 {invoices.isLoading && (
                   <tr>
-                    <td colSpan={5}>
+                    <td colSpan={6}>
                       <div className='flex justify-center my-2'>
                         <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
                       </div>
@@ -208,7 +208,7 @@ const Invoices = () => {
                 {!invoices.isLoading &&
                   (!invoices?.data?.invoices || invoices?.data?.invoices?.length == 0) && (
                     <tr>
-                      <td colSpan={6}>Tidak ada data invoice</td>
+                      <td colSpan={6}>Tidak ada invoice</td>
                     </tr>
                   )}
                 {invoices.data?.invoices?.map((invoice) => (
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 8ce6da00..75b37b9d 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -106,7 +106,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
               <Image
                 src={product.image}
                 alt={product.name}
-                className='h-96 object-contain object-center w-full border border-gray_r-4'
+                className='h-[430px] object-contain object-center w-full border border-gray_r-4'
               />
             </div>
 
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 9a5fe9a2..8b48cf06 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -36,7 +36,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 product?.manufacture?.name,
                 product?.manufacture.id
               )}
-              className='mb-1 font-normal'
+              className='mb-1'
             >
               {product.manufacture.name}
             </Link>
@@ -45,7 +45,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
           <Link
             href={createSlug('/shop/product/', product?.name, product?.id)}
-            className={`font-normal mb-2 !text-gray_r-12 leading-6 block ${
+            className={`mb-2 !text-gray_r-12 leading-6 block ${
               simpleTitle ? 'line-clamp-2 h-12' : 'line-clamp-3 h-[64px]'
             }`}
             title={product?.name}
@@ -108,7 +108,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 product?.manufacture?.name,
                 product?.manufacture.id
               )}
-              className='mb-1 font-normal'
+              className='mb-1'
             >
               {product.manufacture.name}
             </Link>
@@ -117,7 +117,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
           <Link
             href={createSlug('/shop/product/', product?.name, product?.id)}
-            className={`font-normal mb-2 !text-gray_r-12 ${
+            className={`mb-2 !text-gray_r-12 leading-6 ${
               simpleTitle ? 'line-clamp-2' : 'line-clamp-3'
             }`}
           >
diff --git a/src/lib/review/components/CustomerReviews.jsx b/src/lib/review/components/CustomerReviews.jsx
index 935d4a3d..5cc179e9 100644
--- a/src/lib/review/components/CustomerReviews.jsx
+++ b/src/lib/review/components/CustomerReviews.jsx
@@ -2,6 +2,7 @@ import DesktopView from '@/core/components/views/DesktopView'
 import MobileView from '@/core/components/views/MobileView'
 import Image from 'next/image'
 import { Swiper, SwiperSlide } from 'swiper/react'
+import { Autoplay } from 'swiper'
 
 const { useQuery } = require('react-query')
 const { getCustomerReviews } = require('../api/customerReviewsApi')
@@ -14,7 +15,7 @@ const CustomerReviews = () => {
       <div className='font-medium sm:text-h-lg mb-4'>Ulasan Konsumen Kami</div>
 
       <DesktopView>
-        <Swiper slidesPerView={3.2} spaceBetween={16}>
+        <Swiper slidesPerView={3.2} spaceBetween={16} {...swiperProps}>
           {customerReviews &&
             customerReviews?.map((customerReview) => (
               <SwiperSlide className='pb-4' key={customerReview.id}>
@@ -25,7 +26,7 @@ const CustomerReviews = () => {
       </DesktopView>
 
       <MobileView>
-        <Swiper slidesPerView={1.1} spaceBetween={8}>
+        <Swiper slidesPerView={1.1} spaceBetween={8} {...swiperProps}>
           {customerReviews &&
             customerReviews?.map((customerReview) => (
               <SwiperSlide className='pb-4' key={customerReview.id}>
@@ -38,6 +39,15 @@ const CustomerReviews = () => {
   )
 }
 
+const swiperProps = {
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  loop: true,
+  modules: [Autoplay]
+}
+
 const Card = ({ customerReview }) => (
   <div className='bg-gray-200 rounded-md px-5 py-6 shadow-md shadow-gray-500/20 h-full'>
     <div className='flex items-center space-x-3 mb-4'>
diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index c1c27a51..642881a6 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -83,7 +83,7 @@ const Transactions = ({ context = '' }) => {
 
           {!transactions.isLoading && transactions.data?.saleOrders?.length === 0 && (
             <Alert type='info' className='text-center'>
-              Tidak ada data transaksi
+              Tidak ada transaksi
             </Alert>
           )}
 
@@ -246,7 +246,7 @@ const Transactions = ({ context = '' }) => {
                   (!transactions?.data?.saleOrders ||
                     transactions?.data?.saleOrders?.length == 0) && (
                     <tr>
-                      <td colSpan={7}>Tidak ada data transaksi</td>
+                      <td colSpan={7}>Tidak ada transaksi</td>
                     </tr>
                   )}
                 {transactions.data?.saleOrders?.map((saleOrder) => (
diff --git a/src/pages/404.jsx b/src/pages/404.jsx
index f73e6383..18560999 100644
--- a/src/pages/404.jsx
+++ b/src/pages/404.jsx
@@ -15,7 +15,9 @@ export default function PageNotFound() {
           width={1024}
           height={512}
         />
-        <Link href='/' className='btn-yellow text-black mx-auto mt-4'>Kembali ke halaman utama</Link>
+        <Link href='/' className='btn-yellow !text-black mx-auto mt-4'>
+          Kembali ke halaman utama
+        </Link>
       </div>
     </BasicLayout>
   )
diff --git a/src/pages/500.jsx b/src/pages/500.jsx
new file mode 100644
index 00000000..314714e0
--- /dev/null
+++ b/src/pages/500.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 PageError() {
+  return (
+    <BasicLayout>
+      <Seo title='Internal Server Error - Indoteknik.com' />
+      <div className='container mx-auto'>
+        <Image
+          src='/images/page-error.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 2d74d8b7..4c4fed89 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -74,7 +74,7 @@ function MyApp({ Component, pageProps }) {
       <NextProgress color='#F01C21' options={{ showSpinner: false }} />
       <QueryClientProvider client={queryClient}>
         <AnimatePresence
-          mode={isMobile ? 'wait' : 'sync'}
+          mode='popLayout'
           initial={false}
           onExitComplete={() => window.scrollTo(0, 0)}
         >
diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx
index dbe210aa..2130c097 100644
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@@ -8,6 +8,17 @@ export default function MyDocument() {
     <Html>
       <Head>
         <link rel='icon' href='/favicon.ico' />
+        <link rel='manifest' href='/manifest.json' />
+        <link rel='apple-touch-icon' href='/icon.jpg'></link>
+        <link rel='apple-touch-startup-image' href='/images/splash/launch.png' />
+
+        <meta name='mobile-web-app-capable' content='yes' />
+        <meta name='apple-mobile-web-app-capable' content='yes' />
+        <meta name='apple-mobile-web-app-status-bar-style' content='default' />
+        <meta name='apple-mobile-web-app-title' content='Indoteknik.com' />
+        <meta name='theme-color' content='#fff' />
+
+        <link rel='prefetch' href='/images/logo-indoteknik-gear.png' />
 
         <meta name='facebook-domain-verification' content='328wmjs7hcnz74rwsqzxvq50rmbtm2' />
         <Script
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 1fe0e65a..31c6b240 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -8,7 +8,7 @@ import Seo from '@/core/components/Seo'
 import { useQuery } from 'react-query'
 import odooApi from '@/core/api/odooApi'
 import Image from 'next/image'
-import CustomerReviews from '@/lib/review/components/CustomerReviews'
+import DelayRender from '@/core/components/elements/DelayRender/DelayRender'
 
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
 const FlashSale = dynamic(() => import('@/lib/flashSale/components/FlashSale'))
@@ -24,6 +24,7 @@ const PopularProduct = dynamic(() => import('@/lib/home/components/PopularProduc
 const CategoryHomeId = dynamic(() => import('@/lib/home/components/CategoryHomeId'), {
   loading: () => <PopularProductSkeleton />
 })
+const CustomerReviews = dynamic(() => import('@/lib/review/components/CustomerReviews'))
 
 export default function Home() {
   const fetchSecondHeroBanner = async () => await odooApi('GET', '/api/v1/banner?type=index-a-2')
@@ -69,27 +70,49 @@ export default function Home() {
               <HeroBanner />
             </div>
             <div className='w-3/12'>
-              <PopularProduct />
+              <DelayRender renderAfter={200}>
+                <PopularProduct />
+              </DelayRender>
             </div>
           </div>
 
-          <div className='my-16 flex flex-col gap-y-10'>
-            <PreferredBrand />
-            <FlashSale />
-            <CategoryHomeId />
-            <CustomerReviews />
+          <div className='my-16 flex flex-col gap-y-16'>
+            <DelayRender renderAfter={400}>
+              <PreferredBrand />
+            </DelayRender>
+            <DelayRender renderAfter={600}>
+              <FlashSale />
+            </DelayRender>
+            <DelayRender renderAfter={1000}>
+              <CategoryHomeId />
+            </DelayRender>
+            <DelayRender renderAfter={1200}>
+              <CustomerReviews />
+            </DelayRender>
           </div>
         </div>
       </DesktopView>
 
       <MobileView>
-        <HeroBanner />
-        <div className='flex flex-col gap-y-6 my-6'>
-          <PreferredBrand />
-          <FlashSale />
-          <PopularProduct />
-          <CategoryHomeId />
-          <CustomerReviews />
+        <DelayRender renderAfter={200}>
+          <HeroBanner />
+        </DelayRender>
+        <div className='flex flex-col gap-y-12 my-6'>
+          <DelayRender renderAfter={400}>
+            <PreferredBrand />
+          </DelayRender>
+          <DelayRender renderAfter={600}>
+            <FlashSale />
+          </DelayRender>
+          <DelayRender renderAfter={800}>
+            <PopularProduct />
+          </DelayRender>
+          <DelayRender renderAfter={1000}>
+            <CategoryHomeId />
+          </DelayRender>
+          <DelayRender renderAfter={1200}>
+            <CustomerReviews />
+          </DelayRender>
         </div>
       </MobileView>
     </BasicLayout>
diff --git a/src/pages/my/address/[id]/edit.jsx b/src/pages/my/address/[id]/edit.jsx
index 6706b458..bd680b90 100644
--- a/src/pages/my/address/[id]/edit.jsx
+++ b/src/pages/my/address/[id]/edit.jsx
@@ -1,3 +1,4 @@
+import Seo from '@/core/components/Seo'
 import AppLayout from '@/core/components/layouts/AppLayout'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import DesktopView from '@/core/components/views/DesktopView'
@@ -9,6 +10,8 @@ import IsAuth from '@/lib/auth/components/IsAuth'
 export default function EditAddress({ id, defaultValues }) {
   return (
     <IsAuth>
+      <Seo title='Address - Indoteknik.com' />
+
       <MobileView>
         <AppLayout title='Ubah Alamat'>
           <EditAddressComponent id={id} defaultValues={defaultValues} />
diff --git a/src/pages/my/address/create.jsx b/src/pages/my/address/create.jsx
index be645853..774e4327 100644
--- a/src/pages/my/address/create.jsx
+++ b/src/pages/my/address/create.jsx
@@ -1,3 +1,4 @@
+import Seo from '@/core/components/Seo'
 import AppLayout from '@/core/components/layouts/AppLayout'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import DesktopView from '@/core/components/views/DesktopView'
@@ -8,6 +9,8 @@ import IsAuth from '@/lib/auth/components/IsAuth'
 export default function CreateAddress() {
   return (
     <IsAuth>
+      <Seo title='Address - Indoteknik.com' />
+
       <MobileView>
         <AppLayout title='Tambah Alamat'>
           <CreateAddressComponent />
diff --git a/src/pages/my/address/index.jsx b/src/pages/my/address/index.jsx
index 61d72a41..bd8b3ac3 100644
--- a/src/pages/my/address/index.jsx
+++ b/src/pages/my/address/index.jsx
@@ -1,3 +1,4 @@
+import Seo from '@/core/components/Seo'
 import AppLayout from '@/core/components/layouts/AppLayout'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import DesktopView from '@/core/components/views/DesktopView'
@@ -8,6 +9,8 @@ import IsAuth from '@/lib/auth/components/IsAuth'
 export default function Addresses() {
   return (
     <IsAuth>
+      <Seo title='Address - Indoteknik.com' />
+
       <MobileView>
         <AppLayout title='Daftar Alamat'>
           <AddressesComponent />
diff --git a/src/pages/my/invoices/[id].jsx b/src/pages/my/invoices/[id].jsx
index 5972b382..c8f39acf 100644
--- a/src/pages/my/invoices/[id].jsx
+++ b/src/pages/my/invoices/[id].jsx
@@ -1,3 +1,4 @@
+import Seo from '@/core/components/Seo'
 import AppLayout from '@/core/components/layouts/AppLayout'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import DesktopView from '@/core/components/views/DesktopView'
@@ -11,6 +12,8 @@ export default function MyInvoice() {
 
   return (
     <IsAuth>
+      <Seo title='Invoice - Indoteknik.com' />
+
       <MobileView>
         <AppLayout title='Invoice & Faktur Pajak'>
           <InvoiceComponent id={router.query.id} />
diff --git a/src/pages/my/invoices/index.jsx b/src/pages/my/invoices/index.jsx
index 73c7b9fe..a2eeceaa 100644
--- a/src/pages/my/invoices/index.jsx
+++ b/src/pages/my/invoices/index.jsx
@@ -1,3 +1,4 @@
+import Seo from '@/core/components/Seo'
 import AppLayout from '@/core/components/layouts/AppLayout'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import DesktopView from '@/core/components/views/DesktopView'
@@ -8,6 +9,8 @@ import InvoicesComponent from '@/lib/invoice/components/Invoices'
 export default function MyInvoices() {
   return (
     <IsAuth>
+      <Seo title='Invoices - Indoteknik.com' />
+
       <MobileView>
         <AppLayout title='Invoice & Faktur Pajak'>
           <InvoicesComponent />
diff --git a/src/pages/my/profile.jsx b/src/pages/my/profile.jsx
index 72a1ee3c..25c3a608 100644
--- a/src/pages/my/profile.jsx
+++ b/src/pages/my/profile.jsx
@@ -1,19 +1,41 @@
 import Divider from '@/core/components/elements/Divider/Divider'
 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 useAuth from '@/core/hooks/useAuth'
 import CompanyProfile from '@/lib/auth/components/CompanyProfile'
 import IsAuth from '@/lib/auth/components/IsAuth'
+import Menu from '@/lib/auth/components/Menu'
 import PersonalProfile from '@/lib/auth/components/PersonalProfile'
 
 export default function Profile() {
   const auth = useAuth()
   return (
     <IsAuth>
-      <AppLayout title='Akun Saya'>
-        <PersonalProfile />
-        <Divider />
-        {auth?.parentId && <CompanyProfile />}
-      </AppLayout>
+      <MobileView>
+        <AppLayout title='Akun Saya'>
+          <PersonalProfile />
+          <Divider />
+          {auth?.parentId && <CompanyProfile />}
+        </AppLayout>
+      </MobileView>
+
+      <DesktopView>
+        <BasicLayout>
+        <div className='container mx-auto flex py-10'>
+          <div className='w-3/12 pr-4'>
+            <Menu />
+          </div>
+          <div className='w-9/12 bg-white border border-gray_r-6 rounded'>
+            <PersonalProfile />
+            <Divider />
+            {auth?.parentId && <CompanyProfile />}
+
+          </div>
+          </div>
+        </BasicLayout>
+      </DesktopView>
     </IsAuth>
   )
 }
diff --git a/src/pages/my/quotations/[id].jsx b/src/pages/my/quotations/[id].jsx
index 1fbbf34a..3ddf939d 100644
--- a/src/pages/my/quotations/[id].jsx
+++ b/src/pages/my/quotations/[id].jsx
@@ -1,3 +1,4 @@
+import Seo from '@/core/components/Seo'
 import AppLayout from '@/core/components/layouts/AppLayout'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import DesktopView from '@/core/components/views/DesktopView'
@@ -11,6 +12,8 @@ export default function MyQuotation() {
 
   return (
     <IsAuth>
+      <Seo title='Quotation - Indoteknik.com' />
+
       <MobileView>
         <AppLayout title='Transaksi'>
           <TransactionComponent id={router.query.id} />
diff --git a/src/pages/my/quotations/index.jsx b/src/pages/my/quotations/index.jsx
index bd91d9d0..f850de76 100644
--- a/src/pages/my/quotations/index.jsx
+++ b/src/pages/my/quotations/index.jsx
@@ -1,3 +1,4 @@
+import Seo from '@/core/components/Seo'
 import AppLayout from '@/core/components/layouts/AppLayout'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import DesktopView from '@/core/components/views/DesktopView'
@@ -10,6 +11,8 @@ const TransactionsComponent = dynamic(() => import('@/lib/transaction/components
 export default function MyQuotations() {
   return (
     <IsAuth>
+      <Seo title='Quotations - Indoteknik.com' />
+
       <MobileView>
         <AppLayout title='Quotation'>
           <TransactionsComponent context='quotation' />
diff --git a/src/pages/my/transactions/[id].jsx b/src/pages/my/transactions/[id].jsx
index e36c1ca4..31c2cd63 100644
--- a/src/pages/my/transactions/[id].jsx
+++ b/src/pages/my/transactions/[id].jsx
@@ -1,3 +1,4 @@
+import Seo from '@/core/components/Seo'
 import AppLayout from '@/core/components/layouts/AppLayout'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import DesktopView from '@/core/components/views/DesktopView'
@@ -11,6 +12,8 @@ export default function MyTransaction() {
 
   return (
     <IsAuth>
+      <Seo title='Transaction - Indoteknik.com' />
+
       <MobileView>
         <AppLayout title='Transaksi'>
           <TransactionComponent id={router.query.id} />
diff --git a/src/pages/my/transactions/index.jsx b/src/pages/my/transactions/index.jsx
index 91482a39..c1fb9a67 100644
--- a/src/pages/my/transactions/index.jsx
+++ b/src/pages/my/transactions/index.jsx
@@ -1,3 +1,4 @@
+import Seo from '@/core/components/Seo'
 import AppLayout from '@/core/components/layouts/AppLayout'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import DesktopView from '@/core/components/views/DesktopView'
@@ -10,6 +11,8 @@ const TransactionsComponent = dynamic(() => import('@/lib/transaction/components
 export default function MyTransactions() {
   return (
     <IsAuth>
+      <Seo title='Transactions - Indoteknik.com' />
+
       <MobileView>
         <AppLayout title='Transaksi'>
           <TransactionsComponent />
diff --git a/src/pages/my/wishlist.jsx b/src/pages/my/wishlist.jsx
index 7d9ad0d7..52b70ae2 100644
--- a/src/pages/my/wishlist.jsx
+++ b/src/pages/my/wishlist.jsx
@@ -1,3 +1,4 @@
+import Seo from '@/core/components/Seo'
 import AppLayout from '@/core/components/layouts/AppLayout'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import DesktopView from '@/core/components/views/DesktopView'
@@ -8,6 +9,8 @@ import Wishlists from '@/lib/wishlist/components/Wishlists'
 export default function Wishlist() {
   return (
     <IsAuth>
+      <Seo title='Wishlist - Indoteknik.com' />
+
       <MobileView>
         <AppLayout title='Wishlist'>
           <Wishlists />