1 files changed, 63 insertions, 43 deletions
diff --git a/src/lib/tempo/components/Tempo.jsx b/src/lib/tempo/components/Tempo.jsx
index 7d9ede7d..bfeddfbb 100644
--- a/src/lib/tempo/components/Tempo.jsx
+++ b/src/lib/tempo/components/Tempo.jsx
@@ -88,6 +88,18 @@ const Tempo = () => {
     const dueDate = new Date(year, month - 1, day); // Konversi ke objek Date
     return dueDate;
   };
+
+  const formatTanggal = (tanggalInput) => {
+    const [day, month, year] = tanggalInput.split('/');
+    const date = new Date(year, month - 1, day);
+    const formattedDate = new Intl.DateTimeFormat('id-ID', {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric',
+    }).format(date);
+
+    return formattedDate;
+  };
   return (
     <>
       <DesktopView>
@@ -265,45 +277,43 @@ const Tempo = () => {
         </div>
       </DesktopView>
       <MobileView>
-        <div className='p-4 flex flex-col gap-y-4'>
-          <div className='flex flex-col gap-y-2'>
-            <div className='flex flex-col items-center justify-center'>
-              <p className='flex flex-row w-full text-sm gap-2 items-center justify-start'>
-                Jenis Tempo Pembayaran Anda adalah{' '}
-                <Skeleton
-                  isLoaded={!isLoading}
-                  h='fit'
-                  w={24}
-                  className='badge-solid-green px-1 text-xs flex items-center justify-center font-thin'
-                >
-                  {' '}
-                  {tempo.paymentTerm}
-                </Skeleton>
-              </p>
+        <div className='flex flex-col gap-y-2 bg-[#FEF8E2]'>
+          <div className='flex flex-col items-center justify-center'>
+            <p className='flex flex-row w-full text-sm gap-2 items-center justify-start'>
+              Jenis Tempo Pembayaran Anda adalah{' '}
+              <Skeleton
+                isLoaded={!isLoading}
+                h='fit'
+                w={24}
+                className='badge-solid-green px-1 text-xs flex items-center justify-center font-thin'
+              >
+                {' '}
+                {tempo.paymentTerm}
+              </Skeleton>
+            </p>
+          </div>
+          <div className='grid grid-flow-col text-sm'>
+            <div className='  w-full'>
+              <p>Limit Tempo Terpakai</p>
+              <Skeleton
+                isLoaded={!isLoading}
+                // h='36px'
+                // w={16}
+                className='font-semibold text-lg'
+              >
+                {currencyFormat(amountDue)}
+              </Skeleton>
             </div>
-            <div className='grid grid-flow-col text-sm'>
-              <div className='  w-full'>
-                <p>Limit Tempo Terpakai</p>
-                <Skeleton
-                  isLoaded={!isLoading}
-                  // h='36px'
-                  // w={16}
-                  className='font-semibold text-lg'
-                >
-                  {currencyFormat(amountDue)}
-                </Skeleton>
-              </div>
-              <div className=' w-full'>
-                <p>Limit Tempo</p>
-                <Skeleton
-                  isLoaded={!isLoading}
-                  // h='36px'
-                  // w={16}
-                  className=' font-semibold text-lg'
-                >
-                  {currencyFormat(limitTempo)}
-                </Skeleton>
-              </div>
+            <div className=' w-full'>
+              <p>Limit Tempo</p>
+              <Skeleton
+                isLoaded={!isLoading}
+                // h='36px'
+                // w={16}
+                className=' font-semibold text-lg'
+              >
+                {currencyFormat(limitTempo)}
+              </Skeleton>
             </div>
           </div>
           <div className='flex gap-2 flex-col'>
@@ -322,6 +332,8 @@ const Tempo = () => {
               {getLabel()}
             </span>
           </div>
+        </div>
+        <div className='p-4 flex flex-col gap-y-4'>
           <form className='flex gap-x-3' onSubmit={handleSubmit}>
             <input
               type='text'
@@ -355,14 +367,18 @@ const Tempo = () => {
               <div className='grid grid-cols-2'>
                 <Link href={`${router.pathname}/${invoice.id}`}>
                   <span className='text-caption-2 text-gray_r-11'>
-                    No. Invoice
+                    No. Transaksi
                   </span>
-                  <h2 className='text-danger-500 mt-1'>{invoice.name}</h2>
+                  <h2 className='font-semibold text-black mt-1'>
+                    {invoice.salesOrder}
+                  </h2>
                 </Link>
                 <div className='flex gap-x-1 justify-end'>
                   {invoice.amountResidual > 0 ? (
                     <div className='badge-solid-red h-fit ml-auto'>
-                      Belum Lunas
+                      {new Date() > getDueDate(invoice.invoiceDateDue)
+                        ? 'Jatuh Tempo'
+                        : 'Belum Lunas'}
                     </div>
                   ) : (
                     <div className='badge-solid-green h-fit ml-auto'>Lunas</div>
@@ -375,8 +391,12 @@ const Tempo = () => {
               </div>
               <Link href={`${router.pathname}/${invoice.id}`}>
                 <div className='grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal'>
-                  <p>{invoice.invoiceDate}</p>
-                  <p className='text-right'>{invoice.paymentTerm}</p>
+                  <p className='opacity-70'>
+                    {formatTanggal(invoice.invoiceDate)}
+                  </p>
+                  <p className='text-right text-xs text-red-500'>
+                    Jatuh Tempo: {formatTanggal(invoice.invoiceDateDue)}
+                  </p>
                 </div>
                 <hr className='my-3' />
                 <div className='grid grid-cols-2'>