Merge branch 'new-release' into bug-product

8 files changed, 271 insertions, 201 deletions

diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx
index 16bccbd5..e9abe657 100644
--- a/src/core/components/elements/Appbar/Appbar.jsx
+++ b/src/core/components/elements/Appbar/Appbar.jsx
@@ -1,8 +1,16 @@
-import { useRouter } from 'next/router'
-import Link from '../Link/Link'
-import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'
-import { useEffect, useState } from 'react'
-import { getCart, getCountCart } from '@/core/utils/cart'
+import { useRouter } from 'next/router';
+import Link from '../Link/Link';
+import {
+  HomeIcon,
+  Bars3Icon,
+  ShoppingCartIcon,
+  ChevronLeftIcon,
+} from '@heroicons/react/24/outline';
+import { useEffect, useState } from 'react';
+import { getCart, getCountCart } from '@/core/utils/cart';
+import useTransactions from '@/lib/transaction/hooks/useTransactions';
+import { useCartStore } from '~/modules/cart/stores/useCartStore';
+import useAuth from '@/core/hooks/useAuth';
 
 /**
  * The AppBar component is a navigation component used to display a header or toolbar
@@ -13,26 +21,31 @@ import { getCart, getCountCart } from '@/core/utils/cart'
  * @returns {JSX.Element} - Rendered AppBar component.
  */
 const AppBar = ({ title }) => {
-  const router = useRouter()
-
-  const [cartCount, setCartCount] = useState(0)
-
+  const router = useRouter();
+  const auth = useAuth();
+  const { cart } = useCartStore();
+  const query = {
+    context: 'quotation',
+    site: auth?.webRole === null && auth?.site ? auth.site : null,
+  };
+  const [cartCount, setCartCount] = useState(0);
+  const { transactions } = useTransactions({ query });
   useEffect(() => {
     const handleCartChange = () => {
       const cart = async () => {
-        const listCart = await getCountCart()
-        setCartCount(listCart)
-      }
-      cart()
-    }
-    handleCartChange()
+        const listCart = await getCountCart();
+        setCartCount(listCart);
+      };
+      cart();
+    };
+    handleCartChange();
 
-    window.addEventListener('localStorageChange', handleCartChange)
+    window.addEventListener('localStorageChange', handleCartChange);
 
     return () => {
-      window.removeEventListener('localStorageChange', handleCartChange)
-    }
-  }, [])
+      window.removeEventListener('localStorageChange', handleCartChange);
+    };
+  }, [transactions.data, cart]);
 
   return (
     <nav className='sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between'>
@@ -46,9 +59,11 @@ const AppBar = ({ title }) => {
         <Link href='/shop/cart' className='py-4 px-2'>
           <div className='relative'>
             <ShoppingCartIcon className='w-6 text-gray_r-12' />
-            <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
-              {cartCount}
-            </span>
+            {cartCount > 0 && (
+              <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
+                {cartCount}
+              </span>
+            )}
           </div>
         </Link>
         <Link href='/' className='py-4 px-2'>
@@ -59,7 +74,7 @@ const AppBar = ({ title }) => {
         </Link>
       </div>
     </nav>
-  )
-}
+  );
+};
 
-export default AppBar
+export default AppBar;
diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 4beea604..4688b15b 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -210,6 +210,11 @@ const CustomerGuide = () => (
           Panduan Pick Up Service
         </InternalItemLink>
       </li>
+      <li>
+        <InternalItemLink href='/tracking-order'>
+          Tracking Order
+        </InternalItemLink>
+      </li>
     </ul>
   </div>
 );
@@ -390,7 +395,7 @@ const Payments = () => (
       alt='Metode Pembayaran - Indoteknik'
       width={512}
       height={512}
-      quality={100}
+      quality={85}
       className='w-full'
     />
   </div>
@@ -404,7 +409,7 @@ const Shippings = () => (
       alt='Jasa Pengiriman - Indoteknik'
       width={512}
       height={512}
-      quality={100}
+      quality={85}
       className='w-full'
     />
   </div>
@@ -418,7 +423,7 @@ const Secures = () => (
       alt='Keamanan Belanja - Indoteknik'
       width={512}
       height={512}
-      quality={100}
+      quality={85}
       className='w-full'
     />
   </div>
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 2ddf5efe..eebfbcd5 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -5,7 +5,9 @@ import { createSlug } from '@/core/utils/slug';
 import whatsappUrl from '@/core/utils/whatsappUrl';
 import IndoteknikLogo from '@/images/logo.png';
 import Cardheader from '@/lib/cart/components/Cartheader';
+import Quotationheader from '../../../../../src/lib/quotation/components/Quotationheader.jsx';
 import Category from '@/lib/category/components/Category';
+import { useProductCartContext } from '@/contexts/ProductCartContext';
 import {
   ChevronDownIcon,
   DocumentCheckIcon,
@@ -28,7 +30,9 @@ import {
   MenuList,
   useDisclosure,
 } from '@chakra-ui/react';
-import style from "./style/NavbarDesktop.module.css";
+import style from './style/NavbarDesktop.module.css';
+import useTransactions from '@/lib/transaction/hooks/useTransactions';
+import { useCartStore } from '~/modules/cart/stores/useCartStore';
 
 const Search = dynamic(() => import('./Search'), { ssr: false });
 const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false });
@@ -38,16 +42,27 @@ const NavbarDesktop = () => {
   const auth = useAuth();
 
   const [cartCount, setCartCount] = useState(0);
-
+  const [quotationCount, setQuotationCount] = useState(0);
+  const [pendingTransactions, setPendingTransactions] = useState([]);
   const [templateWA, setTemplateWA] = useState(null);
   const [payloadWA, setPayloadWa] = useState(null);
   const [urlPath, setUrlPath] = useState(null);
-
+  const { loadCart, cart, summary, updateCartItem } = useCartStore();
   const router = useRouter();
 
   const { product } = useProductContext();
   const { isOpen, onOpen, onClose } = useDisclosure();
 
+  const query = {
+    context: 'quotation',
+    site: auth?.webRole === null && auth?.site ? auth.site : null,
+  };
+
+  const { transactions } = useTransactions({ query });
+  const data = transactions?.data?.saleOrders.filter(
+    (transaction) => transaction.status === 'draft'
+  );
+
   const [showPopup, setShowPopup] = useState(false);
   const [isTop, setIsTop] = useState(true);
 
@@ -89,6 +104,10 @@ const NavbarDesktop = () => {
   }, []);
 
   useEffect(() => {
+    setPendingTransactions(data);
+  }, [transactions.data]);
+
+  useEffect(() => {
     if (router.pathname === '/shop/product/[slug]') {
       setPayloadWa({
         name: product?.name,
@@ -116,7 +135,23 @@ const NavbarDesktop = () => {
     return () => {
       window.removeEventListener('localStorageChange', handleCartChange);
     };
-  }, []);
+  }, [transactions.data, cart]);
+
+  useEffect(() => {
+    const handleQuotationChange = () => {
+      const quotation = async () => {
+        setQuotationCount(pendingTransactions?.length);
+      };
+      quotation();
+    };
+    handleQuotationChange();
+
+    window.addEventListener('localStorageChange', handleQuotationChange);
+
+    return () => {
+      window.removeEventListener('localStorageChange', handleQuotationChange);
+    };
+  }, [pendingTransactions]);
 
   return (
     <DesktopView>
@@ -137,7 +172,7 @@ const NavbarDesktop = () => {
               >
                 <div className='flex gap-x-1'>
                   <div>Fitur Layanan </div>
-                  <ChevronDownIcon className='w-5'/>
+                  <ChevronDownIcon className='w-5' />
                 </div>
               </MenuButton>
               <MenuList
@@ -180,17 +215,10 @@ const NavbarDesktop = () => {
             <Search />
           </div>
           <div className='flex gap-x-4 items-center'>
-            <Link
-              href='/my/transactions'
-              target='_blank'
-              rel='noreferrer'
-              className='flex items-center gap-x-2 !text-gray_r-12/80'
-            >
-              <DocumentCheckIcon className='w-7' />
-              Daftar
-              <br />
-              Quotation
-            </Link>
+            <Quotationheader
+              quotationCount={quotationCount}
+              data={pendingTransactions}
+            />
 
             <Cardheader cartCount={cartCount} />
 
@@ -225,8 +253,7 @@ const NavbarDesktop = () => {
 
         <div className='container mx-auto mt-6'>
           <div className='flex'>
-            <button
-              type='button'
+            <div
               onClick={() => setIsOpenCategory((isOpen) => !isOpen)}
               onBlur={() => setIsOpenCategory(false)}
               className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-t-xl flex items-center relative'
@@ -243,31 +270,32 @@ const NavbarDesktop = () => {
               >
                 <Category />
               </div>
-            </button>
+            </div>
             <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'>
-            
-            <Link
-                href="/shop/promo"
+              <Link
+                href='/shop/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
-                target="_blank"
-                rel="noreferrer"
+                target='_blank'
+                rel='noreferrer'
               >
-              {showPopup &&  (
-                <div className='w-full h-full relative justify-end items-start'> 
+                {showPopup && (
+                  <div className='w-full h-full relative justify-end items-start'>
                     <Image
-                    src='/images/penawaran-terbatas.jpg'
-                    alt='penawaran terbatas'
-                    width={1440}
-                    height={160}
-                    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`}
-                  />
+                      src='/images/penawaran-terbatas.jpg'
+                      alt='penawaran terbatas'
+                      width={1440}
+                      height={160}
+                      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`}
+                    />
                   </div>
-              )}
-                <p className="absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10">Semua Promo</p>
+                )}
+                <span className='absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10'>
+                  Semua Promo
+                </span>
               </Link>
               {/* {showPopup && router.pathname === '/' && (
                 <div className={`fixed ${isTop ? 'top-[170px]' : 'top-[90px]'} rounded-3xl left-[700px] w-fit object-center bg-green-50 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20 text-center p-2 z-50 transition-all duration-300`}>
@@ -276,28 +304,31 @@ const NavbarDesktop = () => {
                     </p>
                 </div>
               )} */}
-              
 
               <Link
                 href='/shop/brands'
-                className={`${  
+                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`}
                 target='_blank'
                 rel='noreferrer'
               >
-               <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Semua Brand</p>
+                <span className='group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200'>
+                  Semua Brand
+                </span>
               </Link>
               <Link
                 href='/shop/search?orderBy=stock'
                 className={`${
-                  router.asPath === '/shop/search?orderBy=stock' &&
+                  router.asPath.includes('/shop/search?orderBy=stock') &&
                   '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`}
                 target='_blank'
                 rel='noreferrer'
               >
-                <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Ready Stock</p>
+                <span className='group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200'>
+                  Ready Stock
+                </span>
               </Link>
               <Link
                 href='https://blog.indoteknik.com/'
@@ -305,7 +336,9 @@ const NavbarDesktop = () => {
                 target='_blank'
                 rel='noreferrer noopener'
               >
-                <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Blog Indoteknik</p>
+                <span className='group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200'>
+                  Blog Indoteknik
+                </span>
               </Link>
               {/* <Link
                 href='/video'
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index bcf45e0a..90314671 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -11,7 +11,7 @@ import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import MobileView from '../../views/MobileView';
 import Link from '../Link/Link';
-// import TopBanner from './TopBanner';
+import TopBanner from './TopBanner';
 
 const Search = dynamic(() => import('./Search'));
 
@@ -39,7 +39,7 @@ const NavbarMobile = () => {
 
   return (
     <MobileView>
-      {/* <TopBanner /> */}
+      <TopBanner />
       <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
         <div className='flex justify-between items-center mb-2'>
           <Link href='/'>
diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
index 42bdc12a..c0698b6e 100644
--- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
+++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
@@ -1,37 +1,38 @@
-import { deleteAuth } from '@/core/utils/auth'
-import Link from '../Link/Link'
-import { useRouter } from 'next/router'
-import { signOut, useSession } from 'next-auth/react'
-import useAuth from '@/core/hooks/useAuth'
+import { deleteAuth } from '@/core/utils/auth';
+import Link from '../Link/Link';
+import { useRouter } from 'next/router';
+import { signOut, useSession } from 'next-auth/react';
+import useAuth from '@/core/hooks/useAuth';
 
 const NavbarUserDropdown = () => {
-  const router = useRouter()
-  const atuh = useAuth()
+  const router = useRouter();
+  const atuh = useAuth();
 
   const logout = async () => {
     deleteAuth().then(() => {
-      router.push('/login')
-    })
-  }
+      router.push('/login');
+    });
+  };
 
   return (
     <div className='navbar-user-dropdown-wrapper'>
       <div className='navbar-user-dropdown'>
+        <Link href='/my/profile'>Profil Saya</Link>
         <Link href='/my/quotations'>Daftar Quotation</Link>
         <Link href='/my/transactions'>Daftar Transaksi</Link>
         <Link href='/my/shipments'>Daftar Pengiriman</Link>
         <Link href='/my/invoices'>Invoice & Faktur Pajak</Link>
         <Link href='/my/wishlist'>Wishlist</Link>
         <Link href='/my/address'>Daftar Alamat</Link>
-        {!atuh?.external &&
+        {!atuh?.external && (
           <Link href='/my/recomendation'>Dashboard Recomendation</Link>
-        }
+        )}
         <button type='button' onClick={logout}>
           Keluar Akun
         </button>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default NavbarUserDropdown
+export default NavbarUserDropdown;
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index 7bc8fb6a..f438ae67 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,19 +1,20 @@
 import Image from 'next/image';
-import { useQuery } from 'react-query';
-
+import { useQuery } from 'react-query';import useDevice from '@/core/hooks/useDevice'
 import odooApi from '@/core/api/odooApi';
 import SmoothRender from '~/components/ui/smooth-render';
 import Link from '../Link/Link';
+import { background } from '@chakra-ui/react';
 import { useEffect } from 'react';
 
-const TopBanner = ({ onLoad }) => {
+const TopBanner = ({ onLoad = () => {} }) => {
+  const { isDesktop, isMobile } = useDevice()
   const topBanner = useQuery({
     queryKey: 'topBanner',
     queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'),
     refetchOnWindowFocus: false,
   });
 
-  const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
+  // const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
   const hasData = topBanner.data?.length > 0;
   const data = topBanner.data?.[0] || null;
 
@@ -26,21 +27,21 @@ const TopBanner = ({ onLoad }) => {
   return (
     <SmoothRender
       isLoaded={hasData}
-      height='36px'
+      // height='36px'
       duration='700ms'
       delay='300ms'
-      style={{ backgroundColor }}
-    >
-      <Link href={data?.url}>
-        <Image
-          src={data?.image}
-          alt={data?.name}
-          width={1440}
-          height={40}
-          className='object-cover object-center h-full mx-auto'
-        />
-      </Link>
-    </SmoothRender>
+      className='h-auto'
+      >
+      <Link
+          href={data?.url}
+          className="block bg-cover bg-center h-3 md:h-6 lg:h-[36px]"
+          style={{
+            backgroundImage: `url('${data?.image}')`,
+          }}
+        >
+        </Link>
+
+      </SmoothRender>
   );
 };
 
diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 55838890..ddae3e20 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -5,6 +5,8 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { ChevronDownIcon, ChevronUpIcon, CogIcon, UserIcon } from '@heroicons/react/24/outline'
 import { Fragment, useEffect, useState } from 'react'
 import odooApi from '@/core/api/odooApi'
+import { createSlug } from '@/core/utils/slug'
+import Image from 'next/image'
 
 const Sidebar = ({ active, close }) => {
   const auth = useAuth()
@@ -79,7 +81,7 @@ const Sidebar = ({ active, close }) => {
               exit={{ left: '-80%' }}
               transition={transition}
             >
-              <div className='divide-y divide-gray_r-6'>
+              <div className='divide-y divide-gray_r-6 h-full flex flex-col'>
                 <div className='p-4 flex gap-x-3'>
                   {!auth && (
                     <>
@@ -112,104 +114,115 @@ const Sidebar = ({ active, close }) => {
                         href='/my/menu'
                         className='!text-gray_r-11 ml-auto my-auto'
                       > 
-                        <UserIcon class='h-6 w-6 text-gray-500' />
+                        <UserIcon className='h-6 w-6 text-gray-500' />
                       </Link>
                     </>
                   )}
                 </div>
-                <SidebarLink className={itemClassName} href='/shop/promo'>
-                  Semua Promo
-                </SidebarLink>
-                <SidebarLink className={itemClassName} href='/shop/brands'>
-                  Semua Brand
-                </SidebarLink>
-                <SidebarLink
-                  className={itemClassName}
-                  href='https://blog.indoteknik.com/'
-                  target='_blank'
-                  rel='noreferrer noopener'
-                >
-                  Blog Indoteknik
-                </SidebarLink>
-                {/* <SidebarLink className={itemClassName} href='/video'>
-                  Indoteknik TV
-                </SidebarLink> */}
-                <SidebarLink className={itemClassName} href='/tentang-kami'>
-                  Tentang Indoteknik
-                </SidebarLink>
-                <SidebarLink className={itemClassName} href='/contact-us'>
-                  Hubungi Kami
-                </SidebarLink>
-                <button
-                  className={`${itemClassName} w-full text-left flex`}
-                  onClick={() => setOpenCategory(!isOpenCategory)}
-                >
-                  Kategori
-                  <div className='ml-auto'>
-                    {!isOpenCategory && <ChevronDownIcon className='text-gray_r-12 w-5' />}
-                    {isOpenCategory && <ChevronUpIcon className='text-gray_r-12 w-5' />}
-                  </div>
-                </button>
-                {isOpenCategory &&
-                  categories.map((category) => (
-                    <Fragment key={category.id}>
-                      <div className='flex w-full text-gray_r-11 border-b border-gray_r-6 px-4 pl-8 items-center'>
-                        <Link
-                          href={`/shop/search?category=${category.name}`}
-                          className='flex-1 font-normal !text-gray_r-11 py-4'
-                        >
-                          {category.name}
-                        </Link>
-                        <div
-                          className='ml-4 h-full py-4'
-                          onClick={() => toggleCategories(category.id)}
-                        >
-                          {!category.isOpen && <ChevronDownIcon className='text-gray_r-11 w-5' />}
-                          {category.isOpen && <ChevronUpIcon className='text-gray_r-11 w-5' />}
+                <div className='overflow-y-auto flex-1'>
+                  <SidebarLink className={itemClassName} href='/shop/promo'>
+                    Semua Promo
+                  </SidebarLink>
+                  <SidebarLink className={itemClassName} href='/shop/brands'>
+                    Semua Brand
+                  </SidebarLink>
+                  <SidebarLink
+                    className={itemClassName}
+                    href='https://blog.indoteknik.com/'
+                    target='_blank'
+                    rel='noreferrer noopener'
+                  >
+                    Blog Indoteknik
+                  </SidebarLink>
+                  {/* <SidebarLink className={itemClassName} href='/video'>
+                    Indoteknik TV
+                  </SidebarLink> */}
+                  <SidebarLink className={itemClassName} href='/tentang-kami'>
+                    Tentang Indoteknik
+                  </SidebarLink>
+                  <SidebarLink className={itemClassName} href='/contact-us'>
+                    Hubungi Kami
+                  </SidebarLink>
+                  <button
+                    className={`${itemClassName} w-full text-left flex`}
+                    onClick={() => setOpenCategory(!isOpenCategory)}
+                  >
+                    Kategori
+                    <div className='ml-auto'>
+                      {!isOpenCategory && <ChevronDownIcon className='text-gray_r-12 w-5' />}
+                      {isOpenCategory && <ChevronUpIcon className='text-gray_r-12 w-5' />}
+                    </div>
+                  </button>
+                  {isOpenCategory &&
+                    categories.map((category) => (
+                      <Fragment key={category.id}>
+                        <div className='flex w-full text-gray_r-11 border-b border-gray_r-6 px-4 pl-8 items-center'>
+                          <Link
+                            href={createSlug('/shop/category/', category.name, category.id)}
+                            className='flex-1 font-normal !text-gray_r-11 py-4 flex items-center flex-row'
+                          >
+                            <div className='mr-2  flex justify-center items-center'>
+                              <Image src={category.image} alt='' width={25} height={25} />
+                            </div>
+                            {category.name}
+                          </Link>
+                          <div
+                            className='ml-4 h-full py-4'
+                            onClick={() => toggleCategories(category.id)}
+                          >
+                            {!category.isOpen && <ChevronDownIcon className='text-gray_r-11 w-5' />}
+                            {category.isOpen && <ChevronUpIcon className='text-gray_r-11 w-5' />}
+                          </div>
                         </div>
-                      </div>
-                      {category.isOpen &&
-                        category.childs.map((child1Category) => (
-                          <Fragment key={child1Category.id}>
-                            <div
-                              className={`flex w-full !text-gray_r-11 border-b border-gray_r-6 p-4 pl-12 ${
-                                category.isOpen ? 'bg-gray_r-2' : ''
-                              }`}
-                            >
-                              <Link
-                                href={`/shop/search?category=${child1Category.name}`}
-                                className='flex-1 font-normal !text-gray_r-11'
+                        {category.isOpen &&
+                          category.childs.map((child1Category) => (
+                            <Fragment key={child1Category.id}>
+                              <div
+                                className={`flex w-full !text-gray_r-11 border-b border-gray_r-6 p-4 pl-12 ${
+                                  category.isOpen ? 'bg-gray_r-2' : ''
+                                }`}
                               >
-                                {child1Category.name}
-                              </Link>
-                              {child1Category.childs.length > 0 && (
-                                <div
-                                  className='ml-4 h-full'
-                                  onClick={() => toggleCategories(child1Category.id)}
-                                >
-                                  {!child1Category.isOpen && (
-                                    <ChevronDownIcon className='text-gray_r-11 w-5' />
-                                  )}
-                                  {child1Category.isOpen && (
-                                    <ChevronUpIcon className='text-gray_r-11 w-5' />
-                                  )}
-                                </div>
-                              )}
-                            </div>
-                            {child1Category.isOpen &&
-                              child1Category.childs.map((child2Category) => (
                                 <Link
-                                  key={child2Category.id}
-                                  href={`/shop/search?category=${child2Category.name}`}
-                                  className='flex w-full font-normal !text-gray_r-11 border-b border-gray_r-6 p-4 pl-16'
+                                  href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
+                                  className='flex-1 font-normal !text-gray_r-11 flex flex-row items-center'
                                 >
-                                  {child2Category.name}
+                                  <div className='mr-2  flex justify-center items-center'>
+                                    <Image src={`https://erp.indoteknik.com/api/image/product.public.category/image_1920/${child1Category.id}`} alt='' width={25} height={25} />
+                                  </div>
+                                  {child1Category.name}
                                 </Link>
-                              ))}
-                          </Fragment>
-                        ))}
-                    </Fragment>
-                  ))}
+                                {child1Category.childs.length > 0 && (
+                                  <div
+                                    className='ml-4 h-full'
+                                    onClick={() => toggleCategories(child1Category.id)}
+                                  >
+                                    {!child1Category.isOpen && (
+                                      <ChevronDownIcon className='text-gray_r-11 w-5' />
+                                    )}
+                                    {child1Category.isOpen && (
+                                      <ChevronUpIcon className='text-gray_r-11 w-5' />
+                                    )}
+                                  </div>
+                                )}
+                              </div>
+                              {child1Category.isOpen &&
+                                child1Category.childs.map((child2Category) => (
+                                  <Link
+                                    key={child2Category.id}
+                                    href={createSlug('/shop/category/', child2Category.name, child2Category.id)}
+                                    className='flex w-full font-normal !text-gray_r-11 border-b border-gray_r-6 p-4 pl-16 flex-row'
+                                  >
+                                    <div className='mr-2  flex justify-center items-center'>
+                                      <Image src={`https://erp.indoteknik.com/api/image/product.public.category/image_1920/${child2Category.id}`} alt='' width={25} height={25} />
+                                    </div>
+                                    {child2Category.name}
+                                  </Link>
+                                ))}
+                            </Fragment>
+                          ))}
+                      </Fragment>
+                    ))}
+                </div>
               </div>
             </motion.div>
           </>
diff --git a/src/core/components/layouts/AppLayout.jsx b/src/core/components/layouts/AppLayout.jsx
index ebbc1ad5..ec61ca06 100644
--- a/src/core/components/layouts/AppLayout.jsx
+++ b/src/core/components/layouts/AppLayout.jsx
@@ -10,13 +10,15 @@ const BasicFooter = dynamic(() => import('../elements/Footer/BasicFooter'), {
 
 const AppLayout = ({ children, title, withFooter = true }) => {
   return (
-    <>
-      <AnimationLayout>
-        <AppBar title={title} />
-        {children}
-      </AnimationLayout>
-      {withFooter && <BasicFooter />}
-    </>
+    <div className='flex flex-col min-h-screen max-h-screen overflow-y-auto'>
+      <AppBar title={title} />
+      <div className='flex-grow p-4'>{children}</div>
+      {withFooter && (
+        <div className='mt-auto'>
+          <BasicFooter />
+        </div>
+      )}
+    </div>
   );
 };