1 files changed, 40 insertions, 25 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;