summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/contexts/ProductCartContext.js3
-rw-r--r--src/core/components/elements/Navbar/NavbarDesktop.jsx65
-rw-r--r--src/lib/cart/components/Cartheader.jsx264
-rw-r--r--src/lib/home/components/PreferredBrand.jsx5
-rw-r--r--src/lib/quotation/components/Quotation.jsx7
-rw-r--r--src/lib/quotation/components/Quotationheader.jsx265
-rw-r--r--src/pages/index.jsx2
7 files changed, 580 insertions, 31 deletions
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(() =>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 00:05:23 +0000