diff options
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/tempo/components/Tempo.jsx | 16 | ||||
| -rw-r--r-- | src/lib/tracking-order/component/TrackingOrder.jsx | 35 |
2 files changed, 45 insertions, 6 deletions
diff --git a/src/lib/tempo/components/Tempo.jsx b/src/lib/tempo/components/Tempo.jsx index c246f3d8..19cd673b 100644 --- a/src/lib/tempo/components/Tempo.jsx +++ b/src/lib/tempo/components/Tempo.jsx @@ -153,14 +153,18 @@ const Tempo = () => { </Skeleton> </p> </div> - <div className='grid grid-flow-col gap-4'> + <div className='grid grid-flow-col gap-2'> <div className='border w-full p-4'> <p>Sisa Kredit Limit</p> <Skeleton isLoaded={!isLoading} - h='36px' + h='fit' w='full' - className='text-3xl font-semibold text-green-600' + className={`text-3xl font-semibold ${ + limitTempo - amountDue < 0 + ? 'text-red-500' + : 'text-green-600' + } `} > {limitTempo && amountDue ? currencyFormat( @@ -468,7 +472,11 @@ const Tempo = () => { isLoaded={!isLoading} // h='36px' // w={16} - className='font-semibold text-sm text-nowrap text-green-700 ' + className={`font-semibold text-sm text-nowrap ${ + limitTempo - amountDue < 0 + ? 'text-red-500' + : 'text-green-700' + }`} > {limitTempo && amountDue ? currencyFormat( diff --git a/src/lib/tracking-order/component/TrackingOrder.jsx b/src/lib/tracking-order/component/TrackingOrder.jsx index 8a7b2579..31ebd012 100644 --- a/src/lib/tracking-order/component/TrackingOrder.jsx +++ b/src/lib/tracking-order/component/TrackingOrder.jsx @@ -8,12 +8,17 @@ import { useQuery } from 'react-query'; import { Spinner } from '@chakra-ui/react'; import { Search } from 'lucide-react'; import Link from 'next/link'; +import odooApi from '~/libs/odooApi'; +import Image from '~/components/ui/image'; +import useDevice from '@/core/hooks/useDevice'; const TrackingOrder = () => { const [idAWB, setIdAWB] = useState(null); + const { isDesktop, isMobile } = useDevice(); const [inputQuery, setInputQuery] = useState(null); const [buttonClick, setButtonClick] = useState(false); const [apiError, setApiError] = useState(null); // State to store API error message + const [BannerTracking, setBannerTracking] = useState(); const closePopup = () => { setIdAWB(null); @@ -65,13 +70,35 @@ const TrackingOrder = () => { setButtonClick(true); }; + useEffect(() => { + const getBanner = async () => { + const get = await odooApi( + 'GET', + '/api/v1/banner?type=tracking-order-banner' + ); + setBannerTracking(get[0].image); + }; + getBanner(); + }, []); + return ( <div className='container mx-auto flex py-10 flex-col'> + <div className={`${isDesktop && 'min-h-96'} min-w-full`}> + {BannerTracking && ( + <Image + src={BannerTracking} + alt='Tracking Order' + width={500} + height={160} + className='w-full mt-6' + /> + )} + </div> <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'> Tracking Order </h1> <div className='flex justify-start items-start'> - <p className='text-base w-full'> + <p className={`${isMobile ? 'text-sm' : 'text-base'} w-full text-pretty `}> {`Untuk melacak pesanan Anda, masukkan Nomor Transaksi di kotak bawah ini dan masukkan Email login anda lalu tekan tombol "Lacak". Nomor Transaksi ini dapat Anda lihat dalam menu `} <Link href='/my/transactions' className='text-red-500'> Daftar Transaksi @@ -93,7 +120,11 @@ const TrackingOrder = () => { onSubmit={handleSubmit(onSubmitHandler)} className='flex mt-4 flex-row w-full ' > - <div className='w-[90%] grid grid-cols-2 gap-4'> + <div + className={`w-[90%] grid ${ + isMobile ? 'grid-rows-3' : 'grid-cols-2' + } gap-4`} + > <div className='flex flex-col '> <label className='form-label mb-2'>ID Pesanan*</label> <input |