<iman> update code minus kredit limit & add banner

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