1 files changed, 34 insertions, 8 deletions
diff --git a/src/lib/tempo/components/Tempo.jsx b/src/lib/tempo/components/Tempo.jsx
index bfeddfbb..8fb55147 100644
--- a/src/lib/tempo/components/Tempo.jsx
+++ b/src/lib/tempo/components/Tempo.jsx
@@ -116,7 +116,7 @@ const Tempo = () => {
                   isLoaded={!isLoading}
                   h='fit'
                   w={32}
-                  className='badge-solid-green px-2 text-sm flex items-center justify-center font-thin'
+                  className='badge-solid-green px-1 text-sm flex items-center justify-center font-thin'
                 >
                   {' '}
                   {tempo.paymentTerm}
@@ -125,7 +125,7 @@ const Tempo = () => {
             </div>
             <div className='grid grid-flow-col gap-4 mb-4'>
               <div className='border  w-full p-4'>
-                <p>Limit Tempo Terpakai</p>
+                <p>Kredit Limit Terpakai</p>
                 <Skeleton
                   isLoaded={!isLoading}
                   h='36px'
@@ -136,7 +136,18 @@ const Tempo = () => {
                 </Skeleton>
               </div>
               <div className='border w-full p-4'>
-                <p>Limit Tempo</p>
+                <p>Sisa Kredit Limit</p>
+                <Skeleton
+                  isLoaded={!isLoading}
+                  h='36px'
+                  // w={16}
+                  className='text-3xl font-semibold'
+                >
+                  {currencyFormat(Math.round(parseInt(limitTempo - amountDue)))}
+                </Skeleton>
+              </div>
+              <div className='border w-full p-4'>
+                <p>Kredit Limit</p>
                 <Skeleton
                   isLoaded={!isLoading}
                   h='36px'
@@ -243,11 +254,15 @@ const Tempo = () => {
                       <td>{invoice.invoiceDateDue}</td>
                       <td>
                         {invoice.amountResidual > 0 ? (
-                          <div className='badge-solid-red h-fit mx-auto'>
-                            {new Date() > getDueDate(invoice.invoiceDateDue)
-                              ? 'Jatuh Tempo'
-                              : 'Belum Lunas'}
-                          </div>
+                          new Date() > getDueDate(invoice.invoiceDateDue) ? (
+                            <div className='inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20'>
+                              Jatuh Tempo
+                            </div>
+                          ) : (
+                            <div className='badge-solid-red h-fit mx-auto'>
+                              Belum Lunas
+                            </div>
+                          )
                         ) : (
                           <div className='badge-solid-green h-fit mx-auto'>
                             Lunas
@@ -304,6 +319,17 @@ const Tempo = () => {
                 {currencyFormat(amountDue)}
               </Skeleton>
             </div>
+            <div className='w-full'>
+              <p>Sisa Kredit Limit</p>
+              <Skeleton
+                isLoaded={!isLoading}
+                // h='36px'
+                // w={16}
+                className='font-semibold text-lg'
+              >
+                {currencyFormat(Math.round(parseInt(limitTempo - amountDue)))}
+              </Skeleton>
+            </div>
             <div className=' w-full'>
               <p>Limit Tempo</p>
               <Skeleton