Merge branch 'Feature/new-cart-popup' into backup-release

21 files changed, 908 insertions, 103 deletions

diff --git a/src-migrate/modules/cart/components/ItemAction.tsx b/src-migrate/modules/cart/components/ItemAction.tsx
index e5e7f314..7220e362 100644
--- a/src-migrate/modules/cart/components/ItemAction.tsx
+++ b/src-migrate/modules/cart/components/ItemAction.tsx
@@ -13,7 +13,6 @@ import { useDebounce } from 'usehooks-ts'
 import { useCartStore } from '../stores/useCartStore'
 import { useProductCartContext } from '@/contexts/ProductCartContext'
 
-
 type Props = {
   item: CartItem
 }
diff --git a/src-migrate/modules/cart/stores/useCartStore.ts b/src-migrate/modules/cart/stores/useCartStore.ts
index 3b50ec32..c2ebf50f 100644
--- a/src-migrate/modules/cart/stores/useCartStore.ts
+++ b/src-migrate/modules/cart/stores/useCartStore.ts
@@ -54,7 +54,7 @@ export const useCartStore = create<State & Action>((set, get) => ({
 const computeSummary = (cart: CartProps) => {
   let subtotal = 0;
   let discount = 0;
-  for (const item of cart.products) {
+  for (const item of cart?.products) {
     if (!item.selected) continue;
 
     let price = 0;
@@ -71,4 +71,4 @@ const computeSummary = (cart: CartProps) => {
   let grandTotal = total + tax;
 
   return { subtotal, discount, total, tax, grandTotal };
-};
+};
\ No newline at end of file
diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx
index 097db98a..a5284637 100644
--- a/src-migrate/modules/product-detail/components/AddToCart.tsx
+++ b/src-migrate/modules/product-detail/components/AddToCart.tsx
@@ -1,19 +1,35 @@
-import { Button, useToast } from '@chakra-ui/react'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import style from '../styles/price-action.module.css';
+import { Button, Link, useToast } from '@chakra-ui/react'
+import product from 'next-seo/lib/jsonld/product'
 import { useRouter } from 'next/router'
-
+import { useEffect, useState } from 'react'
+import Image from '~/components/ui/image'
 import { getAuth } from '~/libs/auth'
 import { upsertUserCart } from '~/services/cart'
+import LazyLoad from 'react-lazy-load';
+import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar';
+import { IProductDetail } from '~/types/product';
+import ImageNext from 'next/image';
+import { useProductCartContext } from '@/contexts/ProductCartContext'
+import { createSlug } from '~/libs/slug'
+import formatCurrency from '~/libs/formatCurrency'
+import { useProductDetail } from '../stores/useProductDetail';
 
 type Props = {
   variantId: number | null,
   quantity?: number;
   source?: 'buy' | 'add_to_cart';
+  products : IProductDetail
 }
 
+type Status = 'idle' | 'loading' | 'success'
+
 const AddToCart = ({
   variantId,
   quantity = 1,
-  source = 'add_to_cart'
+  source = 'add_to_cart',
+  products
 }: Props) => {
   const auth = getAuth()
   const router = useRouter()
@@ -22,40 +38,65 @@ const AddToCart = ({
     isClosable: true
   })
 
-  const handleClick = async () => {
+  const {
+    askAdminUrl,
+  } = useProductDetail();
+
+  const [product, setProducts] = useState(products);
+  const [status, setStatus] = useState<Status>('idle')
+  const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } =
+    useProductCartContext()
+
+  const productSimilarQuery = [
+    product?.name,
+    `fq=-product_id_i:${product.id}`,
+    `fq=-manufacture_id_i:${product.manufacture?.id || 0}`,
+  ].join('&');
+  const [addCartAlert, setAddCartAlert] = useState(false);
+
+  const handleButton = async () => {
     if (typeof auth !== 'object') {
       const currentUrl = encodeURIComponent(router.asPath)
       router.push(`/login?next=${currentUrl}`)
       return;
     }
-
+    
     if (
       !variantId ||
       isNaN(quantity) ||
       typeof auth !== 'object'
     ) return;
-
-    toast.promise(
-      upsertUserCart({
-        userId: auth.id,
+    if (status === 'success') return
+    setStatus('loading')
+    await upsertUserCart({
+      userId: auth.id,
         type: 'product',
         id: variantId,
         qty: quantity,
         selected: true,
         source: source,
         qtyAppend: true
-      }),
-      {
-        loading: { title: 'Menambahkan ke keranjang', description: 'Mohon tunggu...' },
-        success: { title: 'Menambahkan ke keranjang', description: 'Berhasil menambahkan ke keranjang belanja' },
-        error: { title: 'Menambahkan ke keranjang', description: 'Gagal menambahkan ke keranjang belanja' },
-      }
-    )
-
+    })
+    setStatus('idle')
+    setRefreshCart(true);
+    setAddCartAlert(true);
+    
+    toast({
+      title: 'Tambah ke keranjang',
+      description: 'Berhasil menambahkan barang ke keranjang belanja',
+      status: 'success',
+      duration: 3000,
+      isClosable: true,
+      position: 'top',
+    })
+    
     if (source === 'buy') {
       router.push('/shop/checkout?source=buy')
     }
   }
+  useEffect(() => {
+    if (status === 'success') setTimeout(() => { setStatus('idle') }, 3000)
+  }, [status])
 
   const btnConfig = {
     'add_to_cart': {
@@ -69,10 +110,98 @@ const AddToCart = ({
   }
 
   return (
-    <Button onClick={handleClick} colorScheme={btnConfig[source].colorScheme} className='w-full'>
-      {btnConfig[source].text}
-    </Button>
+    <div className='w-full'>
+      <Button onClick={handleButton} colorScheme={btnConfig[source].colorScheme} className='w-full'>
+        {btnConfig[source].text}
+      </Button>
+      <BottomPopup
+          className='!container'
+          title='Berhasil Ditambahkan'
+          active={addCartAlert}
+          close={() => {
+            setAddCartAlert(false);
+          }}
+        >
+          <div className='flex mt-4'>
+            <div className='w-[10%]'>
+              <ImageNext
+                  src={product.image}
+                  alt={product.name}
+                  className='h-32 object-contain object-center w-full border border-gray_r-4'
+                  width={80}
+                  height={80}
+                />
+            </div>
+            <div className='ml-3 flex flex-1 items-start font-medium justify-center flex-col gap-y-1'>
+              {!!product.manufacture.name ? (
+                  <Link
+                  href={createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString())}
+                  className=' hover:underline'
+                  color={"red"}
+                  >
+                    {product.manufacture.name}
+                  </Link>
+                ) : '-'}
+              <p className='text-ellipsis overflow-hidden'>
+                {product.name}
+                </p>
+                <p>
+                  {product.code}
+                </p>
+                {!!product.lowest_price && product.lowest_price.price > 0 && (
+                    <>
+                      <div className='flex items-end gap-x-2'>
+                        {product.lowest_price.discount_percentage > 0 && (
+                          <>
+                            <div className='badge-solid-red'>
+                              {Math.floor(product.lowest_price.discount_percentage)}%
+                            </div>
+                            <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                              Rp {formatCurrency(product.lowest_price.price || 0)}
+                            </div>
+                          </>
+                        )}
+                        <div className='text-danger-500 font-semibold'>
+                          Rp {formatCurrency(product.lowest_price.price_discount || 0)}
+                        </div>
+                      </div>
+                    </>
+                  )}
+
+                  {!!product.lowest_price && product.lowest_price.price === 0 && (
+                    <span>
+                      Hubungi kami untuk dapatkan harga terbaik,{' '}
+                      <Link
+                        href={askAdminUrl}
+                        target='_blank'
+                        className='font-medium underline'
+                        color={'red'}
+                      >
+                        klik disini
+                      </Link>
+                    </span>
+                  )}
+            </div>
+            <div className='ml-3 flex items-center font-normal'>
+              <Link
+                href='/shop/cart'
+                className='flex-1 py-2 text-gray_r-12 btn-yellow'
+              >
+                Lihat Keranjang
+              </Link>
+            </div>
+          </div>
+          <div className='mt-8 mb-4'>
+            <div className='text-h-sm font-semibold mb-6'>
+              Kamu Mungkin Juga Suka
+            </div>
+            <LazyLoad>
+              <ProductSimilar query={productSimilarQuery} />
+            </LazyLoad>
+          </div>
+        </BottomPopup>
+    </div>
   )
 }
 
-export default AddToCart
\ No newline at end of file
+export default AddToCart	
\ No newline at end of file
diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 81271f6e..9021264e 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -97,12 +97,14 @@ const PriceAction = ({ product }: Props) => {
           className={style['quantity-input']}
         />
         <AddToCart
+          products={product}
           variantId={activeVariantId}
           quantity={Number(quantityInput)}
         />
         {!isApproval && (
           <AddToCart
             source='buy'
+            products={product}
             variantId={activeVariantId}
             quantity={Number(quantityInput)}
           />
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index fad35a7d..e4555913 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -129,7 +129,7 @@ const ProductDetail = ({ product }: Props) => {
             )}
 
             <div className='h-4 md:h-10' />
-            {!!activeVariantId && !isApproval && <ProductPromoSection productId={activeVariantId} />}
+            {!!activeVariantId && !isApproval && <ProductPromoSection product={product} productId={activeVariantId} />}
 
             <div className={style['section-card']}>
               <h2 className={style['heading']}>
diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx
index 87017c14..7b3863f9 100644
--- a/src-migrate/modules/product-promo/components/AddToCart.tsx
+++ b/src-migrate/modules/product-promo/components/AddToCart.tsx
@@ -5,53 +5,71 @@ import { useEffect, useState } from 'react'
 
 import { getAuth } from '~/libs/auth'
 import { upsertUserCart } from '~/services/cart'
-import { IPromotion } from '~/types/promotion'
+import { IPromotion, IProductVariantPromo } from '~/types/promotion'
 
 import DesktopView from '../../../../src/core/components/views/DesktopView';
 import MobileView from '../../../../src/core/components/views/MobileView';
-
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import ImageNext from 'next/image';
+import Link from 'next/link'
+import LazyLoad from 'react-lazy-load'
+import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar';
+import { IProductDetail } from '~/types/product';
+import { useProductCartContext } from '@/contexts/ProductCartContext'
+import { createSlug } from '~/libs/slug'
+import formatCurrency from '~/libs/formatCurrency'
+import { useProductDetail } from '../../product-detail/stores/useProductDetail';
 type Props = {
   promotion: IPromotion
+  product: IProductDetail
+  variant: IProductVariantPromo,
 }
 
 type Status = 'idle' | 'loading' | 'success'
 
-const ProductPromoAddToCart = ({ promotion }: Props) => {
+const ProductPromoAddToCart = ({product, promotion, variant }: Props) => {
   const auth = getAuth()
   const toast = useToast()
   const router = useRouter()
-
+  const {askAdminUrl} = useProductDetail();
   const [status, setStatus] = useState<Status>('idle')
-
+  const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } =
+    useProductCartContext()
+  const productSimilarQuery = [
+    promotion?.name,
+    `fq=-product_id_i:${promotion.products[0].product_id}`,
+  ].join('&');
+  const [addCartAlert, setAddCartAlert] = useState(false);
+  
   const handleButton = async () => {
     if (typeof auth !== 'object') {
-      const currentUrl = encodeURIComponent(router.asPath)
-      router.push(`/login?next=${currentUrl}`)
-      return
-    }
-    if (status === 'success') return
-
-    setStatus('loading')
-    await upsertUserCart({
-      userId: auth.id,
-      type: 'promotion',
-      id: promotion.id,
-      qty: 1,
-      selected: true,
-      source: 'add_to_cart',
-      qtyAppend: true
-    })
-    setStatus('idle')
-
-    toast({
-      title: 'Tambah ke keranjang',
-      description: 'Berhasil menambahkan barang ke keranjang belanja',
-      status: 'success',
-      duration: 3000,
-      isClosable: true,
-      position: 'top',
-    })
+    const currentUrl = encodeURIComponent(router.asPath)
+    router.push(`/login?next=${currentUrl}`)
+    return
   }
+  if (status === 'success') return
+  setStatus('loading')
+  await upsertUserCart({
+    userId: auth.id,
+    type: 'promotion',
+    id: promotion.id,
+    qty: 1,
+    selected: true,
+    source: 'add_to_cart',
+    qtyAppend: true
+  })
+  setStatus('idle')
+  setRefreshCart(true);
+  setAddCartAlert(true);
+  toast({
+    title: 'Tambah ke keranjang',
+    description: 'Berhasil menambahkan barang ke keranjang belanja',
+    status: 'success',
+    duration: 3000,
+    isClosable: true,
+    position: 'top',
+  })
+}
 
   useEffect(() => {
     if (status === 'success') setTimeout(() => { setStatus('idle') }, 3000)
@@ -92,6 +110,97 @@ const ProductPromoAddToCart = ({ promotion }: Props) => {
           {status === 'success' && <span>Berhasil</span>}
           {status !== 'success' && <span>Keranjang</span>}
         </Button>
+        <BottomPopup
+          className='!container'
+          title='Berhasil Ditambahkan'
+          active={addCartAlert}
+          close={() => {
+            setAddCartAlert(false);
+          }}
+        >
+          <div className='flex mt-4'>
+            <div className='w-[10%]'>
+            <ImageNext
+                src={
+                  product?.image
+                    ? product?.image
+                    : variant?.image || '' 
+                }
+                alt={product?.name ? product?.name : variant?.display_name || ''}
+                className='h-32 object-contain object-center w-full border border-gray_r-4'
+                width={80}
+                height={80}
+              />
+
+            </div>
+            <div className='ml-3 flex flex-1 items-start font-medium justify-center flex-col gap-y-1'>
+              {!!product?.manufacture?.name || variant?.manufacture && (
+                  <Link
+                  href={createSlug('/shop/brands/', product?.manufacture?.name? product?.manufacture?.name : variant?.manufacture?.manufacture_name, product?.manufacture?.id? product?.manufacture?.id.toString() : variant?.manufacture?.manufacture_id.toString())}
+                  className=' hover:underline text-red-500'
+                  color={"red"}
+                  >
+                    {product?.manufacture?.name ? product?.manufacture?.name : variant?.manufacture?.manufacture_name}
+                  </Link>
+                )}
+              <p className='text-ellipsis overflow-hidden'>
+                {product?.name ? product?.name : variant?.name}
+                </p>
+                <p>
+                  {product?.code}
+                </p>
+                {(!!product?.lowest_price && product?.lowest_price?.price > 0) || variant?.price?.price > 0 && (
+                    <>
+                      <div className='flex items-end gap-x-2'>
+                        {(product?.lowest_price?.discount_percentage > 0) || variant?.price?.discount_percentage > 0 && (
+                          <>
+                            <div className='badge-solid-red'>
+                              {Math.floor(product?.lowest_price?.discount_percentage ? product?.lowest_price?.discount_percentage : variant?.price?.discount_percentage)}%
+                            </div>
+                            <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                              Rp {formatCurrency(product?.lowest_price?.price ? product?.lowest_price?.price || 0 : variant?.price?.price || 0)}
+                            </div>
+                          </>
+                        )}
+                        <div className='text-danger-500 font-semibold'>
+                          Rp {formatCurrency(product?.lowest_price?.price_discount? product?.lowest_price?.price_discount || 0 : variant?.price?.price_discount)}
+                        </div>
+                      </div>
+                    </>
+                  )}
+
+                  {(!!product?.lowest_price && product?.lowest_price?.price === 0) || variant?.price?.price === 0 && (
+                    <span>
+                      Hubungi kami untuk dapatkan harga terbaik,{' '}
+                      <Link
+                        href={askAdminUrl}
+                        target='_blank'
+                        className='font-medium underline'
+                        color={'red'}
+                      >
+                        klik disini
+                      </Link>
+                    </span>
+                  )}
+            </div>
+            <div className='ml-3 flex items-center font-normal'>
+              <Link
+                href='/shop/cart'
+                className='flex-1 py-2 text-gray_r-12 btn-yellow'
+              >
+                Lihat Keranjang
+              </Link>
+            </div>
+          </div>
+          <div className='mt-8 mb-4'>
+            <div className='text-h-sm font-semibold mb-6'>
+              Kamu Mungkin Juga Suka
+            </div>
+            <LazyLoad>
+              <ProductSimilar query={productSimilarQuery} />
+            </LazyLoad>
+          </div>
+        </BottomPopup>
       </DesktopView>
     </div>
   )
diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx
index 728d23ca..b8abe5ec 100644
--- a/src-migrate/modules/product-promo/components/Card.tsx
+++ b/src-migrate/modules/product-promo/components/Card.tsx
@@ -15,16 +15,16 @@ import clsxm from '~/libs/clsxm'
 import ProductPromoItem from './Item'
 import ProductPromoAddToCart from "./AddToCart"
 import ProductPromoCardCountdown from "./CardCountdown"
-
+import { IProductDetail } from '~/types/product';
 import MobileView from '../../../../src/core/components/views/MobileView';
 import DesktopView from '../../../../src/core/components/views/DesktopView';
 
 type Props = {
   promotion: IPromotion
-  
+  product: IProductDetail
 }
 
-const ProductPromoCard = ({ promotion}: Props) => {
+const ProductPromoCard = ({product, promotion}: Props) => {
   const [products, setProducts] = useState<IProductVariantPromo[]>([])
   const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([])
   const [error, setError] = useState<string | null>(null)
@@ -132,7 +132,7 @@ const ProductPromoCard = ({ promotion}: Props) => {
               
             </div>
             <div>
-              <ProductPromoAddToCart promotion={promotion} />
+            <ProductPromoAddToCart product={product} promotion={promotion} variant={products[0]} />
             </div>
 
           </div>
@@ -189,7 +189,7 @@ const ProductPromoCard = ({ promotion}: Props) => {
               </div>
             </div>
             <div>
-              <ProductPromoAddToCart promotion={promotion} />
+            <ProductPromoAddToCart product={product} promotion={promotion} variant={products[0]}/>
             </div>
 
           </div>
diff --git a/src-migrate/modules/product-promo/components/Modal.tsx b/src-migrate/modules/product-promo/components/Modal.tsx
index 0de672c2..1722b9df 100644
--- a/src-migrate/modules/product-promo/components/Modal.tsx
+++ b/src-migrate/modules/product-promo/components/Modal.tsx
@@ -3,8 +3,12 @@ import { Modal } from "~/components/ui/modal"
 import { useModalStore } from '../stores/useModalStore'
 import ProductPromoCategoryTab from './CategoryTab'
 import ProductPromoModalContent from './ModalContent'
+import { IProductDetail } from '~/types/product';
 
-const ProductPromoModal = () => {
+type Props = {
+  product: IProductDetail
+}
+const ProductPromoModal = ({product}:Props) => {
   const { active, closeModal } = useModalStore()
 
   return (
@@ -17,7 +21,7 @@ const ProductPromoModal = () => {
 
       <div className='h-4' />
 
-      <ProductPromoModalContent />
+      <ProductPromoModalContent product={product} />
     </Modal>
   )
 }
diff --git a/src-migrate/modules/product-promo/components/ModalContent.tsx b/src-migrate/modules/product-promo/components/ModalContent.tsx
index ab5129f8..256ef61a 100644
--- a/src-migrate/modules/product-promo/components/ModalContent.tsx
+++ b/src-migrate/modules/product-promo/components/ModalContent.tsx
@@ -6,7 +6,11 @@ import { getVariantPromoByCategory } from "~/services/productVariant"
 import { useModalStore } from "../stores/useModalStore"
 import ProductPromoCard from "./Card"
 
-const ProductPromoModalContent = () => {
+import { IProductDetail } from '~/types/product';
+type Props = {
+  product: IProductDetail
+}
+const ProductPromoModalContent = ({product}:Props) => {
   const { activeTab, variantId } = useModalStore()
 
   const promotionsQuery = useQuery(
@@ -24,7 +28,7 @@ const ProductPromoModalContent = () => {
     <Skeleton isLoaded={!promotionsQuery.isLoading} className='min-h-[70vh] max-h-[70vh]'>
       <div className="grid grid-cols-1 gap-y-6 pb-6">
         {promotions?.data.map((promo) => (
-          <ProductPromoCard key={promo.id} promotion={promo} />
+          <ProductPromoCard key={promo.id} promotion={promo} product={product} />
         ))}
         {promotions?.data.length === 0 && (
           <div className="py-10 rounded-lg h-fit text-center text-body-1 font-semibold text-gray-800 bg-gray-200">Belum ada promo pada kategori ini</div>
diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index 4e8a7dd5..e1719998 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -9,12 +9,14 @@ import { IPromotion } from '~/types/promotion'
 import { useModalStore } from "../stores/useModalStore"
 import ProductPromoCard from './Card'
 import ProductPromoModal from "./Modal"
+import { IProductDetail } from '~/types/product';
 
 type Props = {
   productId: number;
+  product: IProductDetail;
 }
 
-const ProductPromoSection = ({ productId }: Props) => {
+const ProductPromoSection = ({ product, productId }: Props) => {
   const promotionsQuery = useQuery({
     queryKey: [`promotions.highlight`, productId],
     queryFn: async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] }
@@ -23,14 +25,13 @@ const ProductPromoSection = ({ productId }: Props) => {
   const promotions = promotionsQuery.data
 
   const { openModal } = useModalStore()
-
   return (
     <SmoothRender
       isLoaded={(promotions?.data && promotions?.data.length > 0) || false}
       height='450px'
       duration='700ms'
     >
-      <ProductPromoModal />
+      <ProductPromoModal product={product}/>
 
       {promotions?.data && promotions?.data.length > 0 && (
         <div className={style.titleWrapper}>
@@ -50,7 +51,7 @@ const ProductPromoSection = ({ productId }: Props) => {
       >
         {promotions?.data.map((promotion) => (
           <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
-            <ProductPromoCard promotion={promotion}  />
+            <ProductPromoCard product={product} promotion={promotion}  />
           </div>
         ))}
       </Skeleton>
diff --git a/src-migrate/modules/promo/components/PromoList.tsx b/src-migrate/modules/promo/components/PromoList.tsx
index 69a5ef48..d59d1867 100644
--- a/src-migrate/modules/promo/components/PromoList.tsx
+++ b/src-migrate/modules/promo/components/PromoList.tsx
@@ -114,7 +114,7 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => {
                       {promoData?.map((promotion: IPromotion) => (
                       <SwiperSlide key={promotion.id}>
                         <div className="min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-full lg:w-full xl:w-full">
-                          <ProductPromoCard promotion={promotion} />
+                          <ProductPromoCard product={promoItems} promotion={promotion} />
                         </div>
                       </SwiperSlide>
                     ))}
@@ -122,7 +122,7 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => {
         )}
         {isMobile && (promoData?.map((promotion: IPromotion) => (
           <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
-            <ProductPromoCard promotion={promotion}  />
+            <ProductPromoCard product={promoItems} promotion={promotion}  />
           </div>
         )))}
         
diff --git a/src-migrate/pages/api/product-variant/[id].tsx b/src-migrate/pages/api/product-variant/[id].tsx
index 955fde6a..2c46ac89 100644
--- a/src-migrate/pages/api/product-variant/[id].tsx
+++ b/src-migrate/pages/api/product-variant/[id].tsx
@@ -38,6 +38,7 @@ const map = async (variant: any, price_tier: string) => {
   data.name = variant.name_s
   data.default_code = variant.default_code_s
   data.price = { discount_percentage: 0, price, price_discount: price }
+  data.manufacture = {manufacture_name: variant.manufacture_name_s, manufacture_id:variant.manufacture_id_i}
 
   return data
 }
diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx
index 7f955a5a..4768f62d 100644
--- a/src-migrate/pages/shop/cart/index.tsx
+++ b/src-migrate/pages/shop/cart/index.tsx
@@ -315,4 +315,4 @@ const CartPage = () => {
   );
 };
 
-export default CartPage;
+export default CartPage;
\ No newline at end of file
diff --git a/src-migrate/types/promotion.ts b/src-migrate/types/promotion.ts
index 85190aad..dce442ad 100644
--- a/src-migrate/types/promotion.ts
+++ b/src-migrate/types/promotion.ts
@@ -10,15 +10,18 @@ export interface IPromotion {
   limit_user: number;
   limit_trx: number;
   price: number;
+  image: string;
   total_qty: number;
   products: {
     product_id: number;
     qty: number;
+    name: string;
   }[];
   free_products: {
     product_id: number;
     qty: number;
   }[];
+  
 }
 
 export interface IProductVariantPromo {
@@ -34,6 +37,10 @@ export interface IProductVariantPromo {
     price_discount: number;
   };
   qty: number;
+  manufacture: {
+    manufacture_name: string;
+    manufacture_id:number;
+  }
 }
 
 export type CategoryPromo = 'bundling' | 'discount_loading' | 'merchandise';
diff --git a/src/contexts/ProductCartContext.js b/src/contexts/ProductCartContext.js
index 06e97563..3a21d2e0 100644
--- a/src/contexts/ProductCartContext.js
+++ b/src/contexts/ProductCartContext.js
@@ -6,10 +6,11 @@ export const ProductCartProvider = ({ children }) => {
   const [productCart, setProductCart] = useState(null)
   const [refreshCart, setRefreshCart] = useState(false)
   const [isLoading, setIsloading] = useState(false)
+  const [productQuotation, setProductQuotation] = useState(null)
 
   return (
     <ProductCartContext.Provider
-      value={{ productCart, setProductCart, refreshCart, setRefreshCart, isLoading, setIsloading }}
+      value={{ productCart, setProductCart, refreshCart, setRefreshCart, isLoading, setIsloading, productQuotation, setProductQuotation}}
     >
       {children}
     </ProductCartContext.Provider>
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index d3f53950..ebbcf857 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,
@@ -29,6 +31,8 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 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,15 +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 +105,11 @@ const NavbarDesktop = () => {
   }, []);
 
   useEffect(() => {
+    setPendingTransactions(data);
+  }, [transactions.data]);
+  
+  
+  useEffect(() => {
     if (router.pathname === '/shop/product/[slug]') {
       setPayloadWa({
         name: product?.name,
@@ -96,11 +117,11 @@ const NavbarDesktop = () => {
         url: createSlug('/shop/product/', product?.name, product?.id, true),
       });
       setTemplateWA('product');
-
+      
       setUrlPath(router.asPath);
     }
   }, [product, router]);
-
+  
   useEffect(() => {
     const handleCartChange = () => {
       const cart = async () => {
@@ -109,15 +130,31 @@ const NavbarDesktop = () => {
       };
       cart();
     };
-    handleCartChange();
-
+    handleCartChange(); 
+    
     window.addEventListener('localStorageChange', handleCartChange);
-
+    
     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>
       <TopBanner onLoad={handleTopBannerLoad} />
@@ -180,17 +217,7 @@ 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} />
 
diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index 19f79bc9..ddb77c1f 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -1,14 +1,20 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { getCartApi } from '../api/CartApi'
+import currencyFormat from '@/core/utils/currencyFormat'
+import { createSlug } from '@/core/utils/slug'
 import useAuth from '@/core/hooks/useAuth'
 import { useRouter } from 'next/router'
 import odooApi from '@/core/api/odooApi'
 import { useProductCartContext } from '@/contexts/ProductCartContext'
-
+import Image from '@/core/components/elements/Image/Image'
+import whatsappUrl from '@/core/utils/whatsappUrl'
+import { AnimatePresence, motion } from 'framer-motion'
+import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css'
 const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline')
 const { default: Link } = require('next/link')
 
 const Cardheader = (cartCount) => {
+  
   const router = useRouter()
   const [subTotal, setSubTotal] = useState(null)
   const [buttonLoading, SetButtonTerapkan] = useState(false)
@@ -19,7 +25,7 @@ const Cardheader = (cartCount) => {
     useProductCartContext()
 
   const [isHovered, setIsHovered] = useState(false)
-
+  const [isTop, setIsTop] = useState(true)
   const products = useMemo(() => {
     return productCart?.products || []
   }, [productCart])
@@ -42,7 +48,7 @@ const Cardheader = (cartCount) => {
     setIsloading(true)
     let cart = await getCartApi()
     setProductCart(cart)
-    setCountCart(cart.productTotal)
+    setCountCart(cart?.productTotal)
     setIsloading(false)
   }, [setProductCart, setIsloading])
 
@@ -75,14 +81,26 @@ const Cardheader = (cartCount) => {
 
   useEffect(() => {
     setCountCart(cartCount.cartCount)
+    setRefreshCart(false)
   }, [cartCount])
 
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsTop(window.scrollY === 0)
+    }
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
   const handleCheckout = async () => {
     SetButtonTerapkan(true)
     let checkoutAll = await odooApi('POST', `/api/v1/user/${auth.id}/cart/select-all`)
     router.push('/shop/checkout')
   }
 
+
   return (
     <div className='relative group'>
       <div>
@@ -109,6 +127,246 @@ const Cardheader = (cartCount) => {
           </span>
         </Link>
       </div>
+      <AnimatePresence>
+        {isHovered && (
+          <>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, top: isTop ? 230 : 155 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.15, top: { duration: 0.3 } }}
+              className={`fixed left-0 w-full h-full bg-black/50 z-10`}
+            />
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, transition: { duration: 0.2 } }}
+              exit={{ opacity: 0, transition: { duration: 0.3 } }}
+              className='absolute z-10 left-0 w-96'
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <motion.div
+                initial={{ height: 0 }}
+                animate={{ height: 'auto' }}
+                exit={{ height: 0 }}
+                className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow overflow-hidden'
+              >
+                <div className='p-2 flex justify-between items-center'>
+                  <h5 className='text-base font-semibold leading-none'>Keranjang Belanja</h5>
+                  <Link href='/shop/cart' class='text-sm font-medium text-red-600 underline'>
+                    Lihat Semua
+                  </Link>
+                </div>
+                <hr className='mt-3 mb-3 border border-gray-100' />
+                <div className='flow-root max-h-[250px] overflow-y-auto'>
+                  {!auth && (
+                    <div className='justify-center p-4'>
+                      <p className='text-gray-500 text-center '>
+                        Silahkan{' '}
+                        <Link href='/login' className='text-red-600 underline leading-6'>
+                          Login
+                        </Link>{' '}
+                        Untuk Melihat Daftar Keranjang Belanja Anda
+                      </p>
+                    </div>
+                  )}
+                  {isLoading &&
+                    itemLoading.map((item) => (
+                      <div key={item} role='status' className='max-w-sm animate-pulse'>
+                        <div className='flex items-center space-x-4 mb- 2'>
+                          <div className='flex-shrink-0'>
+                            <PhotoIcon className='h-16 w-16 text-gray-500' />
+                          </div>
+                          <div className='flex-1 min-w-0'>
+                            <div className='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
+                            <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div>
+                            <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  {auth && products.length === 0 && !isLoading && (
+                    <div className='justify-center p-4'>
+                      <p className='text-gray-500 text-center '>
+                        Tidak Ada Produk di Keranjang Belanja Anda
+                      </p>
+                    </div>
+                  )}
+                  {auth && products.length > 0 && !isLoading && (
+                    <>
+                      <ul role='list' className='divide-y divide-gray-200 dark:divide-gray-700'>
+                        {products &&
+                          products?.map((product, index) => (
+                            <>
+                              <li className='py-1 sm:py-2'>
+                                <div className='flex items-center space-x-4'>
+                                  <div className='bagian gambar flex-shrink-0'>
+                                    {product.cartType === 'promotion' &&  (
+                                      <Image
+                                        src={product.imageProgram[0]}
+                                        alt={product.name}
+                                        className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md'
+                                      />
+                                    )}
+                                    {product.cartType === 'product' && (
+                                      <Link
+                                        href={createSlug(
+                                          '/shop/product/',
+                                          product?.parent.name,
+                                          product?.parent.id
+                                        )}
+                                        className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                                      >
+                                        <Image
+                                          src={product?.parent?.image}
+                                          alt={product?.name}
+                                          className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md'
+                                        />
+                                      </Link>
+                                    )}
+                                  </div>
+                                  <div className='bagian tulisan dan harga flex-1 min-w-0'>
+                                    {product.cartType === 'promotion' && (
+                                          <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
+                                            {product.name}
+                                          </p>
+                                      )}
+                                    {product.cartType === 'product' && (
+                                      <Link
+                                        href={createSlug(
+                                          '/shop/product/',
+                                          product?.parent.name,
+                                          product?.parent.id
+                                        )}
+                                        className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                                      >
+                                        {' '}
+                                        <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
+                                          {product.parent.name}
+                                        </p>
+                                      </Link>
+                                    )}
+                                    {product?.hasFlashsale && (
+                                      <div className='flex gap-x-1 items-center mb-2 mt-1'>
+                                        <div className='badge-solid-red'>
+                                          {product?.price?.discountPercentage}%
+                                        </div>
+                                        <div className='text-gray_r-11 line-through text-caption-2'>
+                                          {currencyFormat(product?.price?.price)}
+                                        </div>
+                                      </div>
+                                    )}
+                                    
+                                    <div className='flex justify-between items-center'>
+                                      <div className='font-semibold text-sm text-red-600'>
+                                        {product?.price?.priceDiscount > 0 ? (
+                                          currencyFormat(product?.price?.priceDiscount)
+                                        ) : (
+                                          <span className='text-gray_r-12/90 font-normal text-caption-1'>
+                                            <a
+                                              href={whatsappUrl('product', {
+                                                name: product.name,
+                                                manufacture: product.manufacture?.name,
+                                                url: createSlug(
+                                                  '/shop/product/',
+                                                  product.name,
+                                                  product.id,
+                                                  true
+                                                )
+                                              })}
+                                              className='text-danger-500 underline'
+                                              rel='noopener noreferrer'
+                                              target='_blank'
+                                            >
+                                              Call For Price
+                                            </a>
+                                          </span>
+                                        )}
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                  <div className="flex flex-col w-3/4">
+                                      {product.products?.map((product) => 
+                                        <div key={product.id} className='md:ml-8 ml-4 mt-2 flex'>
+                                          <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '>
+                                            {product?.image && <Image src={product.image} alt={product.name} width={40} height={40} className='w-full h-full object-fill' />}
+                                          </Link>
+                                  
+                                          <div className="ml-4 w-full flex flex-col gap-y-1">
+                                            <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className="text-caption-2 font-medium text-gray-900 truncate dark:text-white">
+                                              {product.displayName}
+                                            </Link>
+                                    
+                                            <div className='flex w-full'>
+                                              <div className="flex flex-col">
+                                                {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
+                                                <div>
+                                                  <span className="text-gray-500 text-caption-1">Berat Barang: </span>
+                                                  <span className="text-gray-500 text-caption-1">{product.packageWeight} Kg</span>
+                                                </div>
+                                              </div>
+                                            </div>
+                                          </div>
+                                    
+                                        </div>
+                                        )}
+                                      {product.freeProducts?.map((product) => 
+                                        <div key={product.id} className='md:ml-8 ml-4 mt-2 flex'>
+                                        <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '>
+                                          {product?.image && <Image src={product.image} alt={product.name} width={40} height={40} className='w-full h-full object-fill' />}
+                                        </Link>
+                                  
+                                        <div className="ml-4 w-full flex flex-col gap-y-1">
+                                          <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className="text-caption-2 font-medium text-gray-900 truncate dark:text-white">
+                                            {product.displayName}
+                                          </Link>
+                                  
+                                          <div className='flex w-full'>
+                                              <div className="flex flex-col">
+                                                {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
+                                                <div>
+                                                  <span className="text-gray-500 text-caption-1">Berat Barang: </span>
+                                                  <span className="text-gray-500 text-caption-1">{product.packageWeight} Kg</span>
+                                                </div>
+                                              </div>
+                                            </div>
+                                          </div>
+                                    
+                                        </div>
+                                      )}
+                                    </div>
+                              </li>
+                            </>
+                          ))}
+                      </ul>
+                      <hr />
+                    </>
+                  )}
+                </div>
+                {auth && products.length > 0 && !isLoading && (
+                  <>
+                    <div className='mt-3'>
+                      <span className='text-gray-400 text-caption-2'>Subtotal Sebelum PPN : </span>
+                      <span className='font-semibold text-red-600'>{currencyFormat(subTotal)}</span>
+                    </div>
+                    <div className='mt-5 mb-2'>
+                      <button
+                        type='button'
+                        className='btn-solid-red rounded-lg w-full'
+                        onClick={handleCheckout}
+                        disabled={buttonLoading}
+                      >
+                        {buttonLoading ? 'Loading...' : 'Lanjutkan Ke Pembayaran'}
+                      </button>
+                    </div>
+                  </>
+                )}
+              </motion.div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
     </div>
   )
 }
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
index 56268db7..b30fa5c9 100644
--- a/src/lib/home/components/PreferredBrand.jsx
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -65,11 +65,6 @@ const PreferredBrand = () => {
             Lihat Semua
           </Link>
         )}
-        {isMobile && (
-          <Link href='/shop/brands' className='!text-red-500 font-semibold sm:text-h-sm'>
-            Lihat Semua
-          </Link>
-        )}
       </div>
       <div className=''>
         {manufactures.isLoading && <PreferredBrandSkeleton />}
diff --git a/src/lib/quotation/components/Quotation.jsx b/src/lib/quotation/components/Quotation.jsx
index df234dc2..0ad042de 100644
--- a/src/lib/quotation/components/Quotation.jsx
+++ b/src/lib/quotation/components/Quotation.jsx
@@ -9,6 +9,7 @@ import _ from 'lodash';
 import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart';
 import currencyFormat from '@/core/utils/currencyFormat';
 import { toast } from 'react-hot-toast';
+import { useProductCartContext } from '@/contexts/ProductCartContext';
 // import checkoutApi from '@/lib/checkout/api/checkoutApi'
 import { useRouter } from 'next/router';
 import VariantGroupCard from '@/lib/variant/components/VariantGroupCard';
@@ -38,11 +39,12 @@ const { getProductsCheckout } = require('@/lib/checkout/api/checkoutApi');
 const Quotation = () => {
   const router = useRouter();
   const auth = useAuth();
-
+  
   const { data: cartCheckout } = useQuery('cartCheckout', () =>
     getProductsCheckout()
-  );
+);
 
+const {  setRefreshCart } = useProductCartContext();
   const SELF_PICKUP_ID = 32;
 
   const [products, setProducts] = useState(null);
@@ -293,6 +295,7 @@ const Quotation = () => {
     if (isSuccess?.id) {
       for (const product of products) deleteItemCart({ productId: product.id });
       router.push(`/shop/quotation/finish?id=${isSuccess.id}`);
+      setRefreshCart(true);
       return;
     }
     
diff --git a/src/lib/quotation/components/Quotationheader.jsx b/src/lib/quotation/components/Quotationheader.jsx
new file mode 100644
index 00000000..4529c977
--- /dev/null
+++ b/src/lib/quotation/components/Quotationheader.jsx
@@ -0,0 +1,265 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { createSlug } from '@/core/utils/slug';
+import useAuth from '@/core/hooks/useAuth';
+import { useRouter } from 'next/router';
+import odooApi from '@/core/api/odooApi';
+import { useProductCartContext } from '@/contexts/ProductCartContext';
+import Image from '@/core/components/elements/Image/Image';
+import whatsappUrl from '@/core/utils/whatsappUrl';
+import { AnimatePresence, motion } from 'framer-motion';
+import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css';
+import useTransactions from '../../transaction/hooks/useTransactions';
+import currencyFormat from '@/core/utils/currencyFormat';
+const { DocumentCheckIcon, PhotoIcon } = require('@heroicons/react/24/outline');
+const { default: Link } = require('next/link');
+
+const Quotationheader = (quotationCount) => {
+  const auth = useAuth();
+  const query = {
+    context: 'quotation',
+    site: auth?.webRole === null && auth?.site ? auth.site : null,
+  };
+  
+  const router = useRouter();
+  const [subTotal, setSubTotal] = useState(null);
+  const [buttonLoading, SetButtonTerapkan] = useState(false);
+  const itemLoading = [1, 2, 3];
+  const [countQuotation, setCountQuotation] = useState(null);
+  const { productCart, setProductCart, refreshCart, setRefreshCart, isLoading, setIsloading, productQuotation, setProductQuotation } =
+  useProductCartContext();
+
+  const [isHovered, setIsHovered] = useState(false);
+  const [isTop, setIsTop] = useState(true);
+
+  const qotation = useMemo(() => {
+    return productQuotation || [];
+  }, [productQuotation]);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+    getCart();
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  const getCart = () => {
+    if (!productQuotation && auth) {
+      refreshCartf();
+    }
+  };
+  let { transactions } = useTransactions({ query });
+
+  const refreshCartf = useCallback(async () => {
+    setIsloading(true);
+    let pendingTransactions = transactions?.data?.saleOrders.filter(transaction => transaction.status === 'draft');
+    setProductQuotation(pendingTransactions);
+    setCountQuotation(pendingTransactions?.length ? pendingTransactions?.length : pendingTransactions?.length);
+    setIsloading(false);
+  }, [setProductQuotation, setIsloading]);
+
+  useEffect(() => {
+    if (!qotation) return
+
+    let calculateTotalDiscountAmount = 0
+    for (const product of qotation) {
+      // if (qotation.quantity == '') continue  
+      calculateTotalDiscountAmount += product.amountUntaxed
+    }
+    let subTotal = calculateTotalDiscountAmount
+    setSubTotal(subTotal)
+  }, [qotation])
+
+  useEffect(() => {
+    if (refreshCart) {
+      refreshCartf();
+    }
+    setRefreshCart(false);
+  }, [ refreshCartf, setRefreshCart]);
+
+  useEffect(() => {
+    setCountQuotation(quotationCount.quotationCount);
+    setProductQuotation(quotationCount.data);
+  }, [quotationCount]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsTop(window.scrollY === 0);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  const handleCheckout = async () => {
+    SetButtonTerapkan(true);
+    let checkoutAll = await odooApi('POST', `/api/v1/user/${auth.id}/cart/select-all`);
+    router.push('/my/quotations');
+  };
+
+  return (
+    <div className='relative group'>
+      <div>
+        <Link
+          href='/my/quotations'
+          target='_blank'
+          rel='noreferrer'
+          className='flex items-center gap-x-2 !text-gray_r-12/80'
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          <div className={`relative ${countQuotation > 0 && 'mr-2'}`}>
+            <DocumentCheckIcon className='w-7' />
+            {countQuotation > 0 && (
+              <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
+                {countQuotation}
+              </span>
+            )}
+          </div>
+          <span>
+            List
+            <br />
+            Quotation
+          </span>
+        </Link>
+      </div>
+      <AnimatePresence>
+        {isHovered && (
+          <>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, top: isTop ? 230 : 155 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.15, top: { duration: 0.3 } }}
+              className={`fixed left-0 w-full h-full bg-black/50 z-10`}
+            />
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, transition: { duration: 0.2 } }}
+              exit={{ opacity: 0, transition: { duration: 0.3 } }}
+              className='absolute z-10 left-0 w-96'
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <motion.div
+                initial={{ height: 0 }}
+                animate={{ height: 'auto' }}
+                exit={{ height: 0 }}
+                className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow overflow-hidden'
+              >
+                <div className='p-2 flex justify-between items-center'>
+                  <h5 className='text-base font-semibold leading-none'>Daftar Quotation</h5>
+                </div>
+                <hr className='mt-3 mb-3 border border-gray-100' />
+                <div className='flow-root max-h-[250px] overflow-y-auto'>
+                  {!auth && (
+                    <div className='justify-center p-4'>
+                      <p className='text-gray-500 text-center '>
+                        Silahkan{' '}
+                        <Link href='/login' className='text-red-600 underline leading-6'>
+                          Login
+                        </Link>{' '}
+                        Untuk Melihat Daftar Quotation Anda
+                      </p>
+                    </div>
+                  )}
+                  {isLoading &&
+                    itemLoading.map((item) => (
+                      <div key={item} role='status' className='max-w-sm animate-pulse'>
+                        <div className='flex items-center space-x-4 mb- 2'>
+                          <div className='flex-shrink-0'>
+                            <PhotoIcon className='h-16 w-16 text-gray-500' />
+                          </div>
+                          <div className='flex-1 min-w-0'>
+                            <div className='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
+                            <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div>
+                            <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  {auth && qotation.length === 0 && !isLoading && (
+                    <div className='justify-center p-4'>
+                      <p className='text-gray-500 text-center '>
+                        Tidak Ada Quotation
+                      </p>
+                    </div>
+                  )}
+                  {auth && qotation.length > 0 && !isLoading && (
+                    <>
+                      <ul role='list' className='divide-y divide-gray-200 dark:divide-gray-700'>
+                        {qotation &&
+                          qotation?.map((product, index) => (
+                            <>
+                              <li className='py-1 sm:py-2'>
+                                <div className='flex justify-between border p-2 flex-col gap-y-2 hover:border-red-500'>
+                                <Link 
+                                    href={`/my/quotations/${product?.id}`}
+                                    className='hover:border-red-500' 
+                                     >
+                                    <div className='flex justify-between mb-2'>
+                                      <div className='flex flex-row items-center'>
+                                      <p className='tanggal text-xs opacity-80 mr-[2px]'>Sales : </p>
+                                      <p className='tanggal text-xs text-red-500 font-semibold'>{product.sales}</p>
+                                      </div>
+                                      <div className='flex flex-row items-center'>
+                                      <p className='text-xs opacity-80 mr-[2px]'>Status :</p>
+                                      <p className='badge-red h-fit text-xs whitespace-nowrap'>Pending Quotation</p>
+                                      </div>
+                                    </div>
+                                    <div className='flex justify-between mb-2'>
+                                      <div className='flex flex-col items-start'>
+                                        <p className=' text-xs opacity-80 mr-[2px]'>No. Transaksi</p>
+                                        <p className=' text-sm text-red-500 font-semibold'> {product.name}</p>
+                                      </div>
+                                      <div className='flex flex-col items-end'>
+                                        <p className='text-xs opacity-80 mr-[2px]'>No. Purchase Order</p>
+                                        <p className='font-semibold text-sm text-red-500'> {product.purchaseOrderName ? product.purchaseOrderName : '-'}</p>
+                                      </div>
+                                    </div>
+                                    {/* <div className='my-0.5 h-0.5 bg-gray-200'></div> */}
+                                    <hr className='mt-3 mb-3 border border-gray-100' />
+                                    <div className='bagian bawah flex justify-between mt-2'>
+                                      <p className='font-semibold text-sm'>Total</p>
+                                      <p className='font-semibold text-sm'>{currencyFormat(product.amountUntaxed)}</p>
+                                    </div>
+                                </Link>
+                                </div>
+                              </li>
+                            </>
+                          ))}
+                      </ul>
+                      <hr />
+                    </>
+                  )}
+                </div>
+                {auth && qotation.length > 0 && !isLoading && (
+                  <>
+                    <div className='mt-3 ml-1'>
+                      <span className='text-gray-400 text-caption-2'>Subtotal Sebelum PPN : </span>
+                      <span className='font-semibold text-red-600'>{currencyFormat(subTotal)}</span>
+                    </div>
+                    <div className='mt-5 mb-2'>
+                      <button
+                        type='button'
+                        className='btn-solid-red rounded-lg w-full'
+                        onClick={handleCheckout}
+                        disabled={buttonLoading}
+                      >
+                        {buttonLoading ? 'Loading...' : 'Lihat Semua'}
+                      </button>
+                    </div>
+                  </>
+                )}
+              </motion.div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default Quotationheader;
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 4d6e59e0..613950a6 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -66,7 +66,7 @@ const CategoryDynamic = dynamic(() =>
 );
 
 const CategoryDynamicMobile = dynamic(() =>
-  import('@/lib/home/components/CategoryDynamicMobile')
+import('@/lib/home/components/CategoryDynamicMobile')
 );
 
 const CustomerReviews = dynamic(() =>