<iman> add penghajuan tempo

1 files changed, 169 insertions, 99 deletions

diff --git a/src/lib/tempo/components/Tempo.jsx b/src/lib/tempo/components/Tempo.jsx
index c3cf621c..3f6e36d1 100644
--- a/src/lib/tempo/components/Tempo.jsx
+++ b/src/lib/tempo/components/Tempo.jsx
@@ -4,10 +4,10 @@ import {
   EllipsisVerticalIcon,
   MagnifyingGlassIcon,
 } from '@heroicons/react/24/outline';
-import { toQuery } from 'lodash-contrib';
+import { div, toQuery } from 'lodash-contrib';
 import _ from 'lodash';
 import { useRouter } from 'next/router';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import useInvoices from '../../invoice/hooks/useInvoices';
 import Spinner from '@/core/components/elements/Spinner/Spinner';
 import Alert from '@/core/components/elements/Alert/Alert';
@@ -22,8 +22,11 @@ import {
 import MobileView from '@/core/components/views/MobileView';
 import DesktopView from '@/core/components/views/DesktopView';
 import Menu from '@/lib/auth/components/Menu';
-
+import odooApi from '@/core/api/odooApi';
+import { getAuth } from '@/core/utils/auth';
+import ProgressBar from '@ramonak/react-progress-bar';
 const Tempo = () => {
+  const auth = getAuth();
   const router = useRouter();
   const { q = '', page = 1 } = router.query;
 
@@ -36,6 +39,8 @@ const Tempo = () => {
   };
   const { invoices } = useInvoices({ query });
 
+  const [isLoading, setIsLoading] = useState(true);
+  const [tempo, setTempo] = useState([]);
   const [inputQuery, setInputQuery] = useState(q);
   const [toOthers, setToOthers] = useState(null);
 
@@ -48,9 +53,169 @@ const Tempo = () => {
     e.preventDefault();
     router.push(`/my/invoices?q=${inputQuery}`);
   };
-
+  useEffect(() => {
+    const loadTempo = async () => {
+      setIsLoading(true);
+      const dataTempo = await odooApi(
+        'GET',
+        `/api/v1/check/${auth.parentId}/tempo`
+      );
+      setTempo(dataTempo);
+      setIsLoading(false);
+    };
+    loadTempo();
+  }, []);
+  const limitTempo = Math.round(
+    parseInt(tempo.amountDue + tempo.remainingLimit)
+  );
+  const amountDue = Math.round(parseInt(tempo.amountDue));
+  console.log('tempo', tempo);
+  const getLabel = () => {
+    if (Math.round((amountDue / limitTempo) * 100) >= 100)
+      return 'Limit Tempo mencapai batas';
+    if (Math.round((amountDue / limitTempo) * 100) >= 50) return 'Hampir Habis';
+    return '';
+  };
   return (
     <>
+      <DesktopView>
+        <div className='container mx-auto flex py-10'>
+          <div className='w-3/12 pr-4'>
+            <Menu />
+          </div>
+          <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+            <div className='flex flex-col mb-6 items-start justify-start'>
+              <h1 className='text-title-sm font-semibold'>Pembayaran Tempo</h1>
+              <p>
+                Jenis Tempo Pembayaran Anda adalah :{' '}
+                {!isLoading && (
+                  <span className='badge-solid-green px-2'>
+                    {tempo.paymentTerm}
+                  </span>
+                )}
+              </p>
+            </div>
+            <div className='grid grid-flow-col gap-4 mb-4'>
+              <div className='border  w-full p-4'>
+                <p>Limit Tempo Terpakai</p>
+                <h1>{!isLoading && currencyFormat(amountDue)}</h1>
+              </div>
+              <div className='border w-full p-4'>
+                <p>Limit Tempo</p>
+                <h1>{!isLoading && currencyFormat(limitTempo)}</h1>
+              </div>
+            </div>
+
+            <div className='flex gap-2 flex-col'>
+              <ProgressBar
+                completed={amountDue}
+                bgColor='#ef4444'
+                labelAlignment='outside'
+                isLabelVisible={false}
+                baseBgColor='#E5E7EB'
+                labelColor='#e80909'
+                labelSize='0'
+                maxCompleted={limitTempo}
+                height='10px'
+              />
+              <span className='flex justify-end opacity-75 font-semibold text-red-500'>
+                {getLabel()}
+              </span>
+            </div>
+
+            <div className='flex mb-6 items-center justify-between mt-4'>
+              <form className='flex gap-x-2' onSubmit={handleSubmit}>
+                <button className='btn-light bg-transparent px-3' type='submit'>
+                  <MagnifyingGlassIcon className='w-6' />
+                </button>
+                <input
+                  type='text'
+                  className='form-input'
+                  placeholder='Cari Nomor Pesanan anda'
+                  value={inputQuery}
+                  onChange={(e) => setInputQuery(e.target.value)}
+                />
+              </form>
+            </div>
+
+            <table className='table-data'>
+              <thead>
+                <tr>
+                  <th>No. Invoice</th>
+                  <th>No. Transaksi</th>
+                  <th className='!text-left'>Salesperson</th>
+                  <th>Tanggal</th>
+                  <th>Jatuh Tempo</th>
+                  <th>Status</th>
+                  <th className='!text-left'>Total</th>
+                </tr>
+              </thead>
+              <tbody>
+                {invoices.isLoading && (
+                  <tr>
+                    <td colSpan={6}>
+                      <div className='flex justify-center my-2'>
+                        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+                      </div>
+                    </td>
+                  </tr>
+                )}
+                {!invoices.isLoading &&
+                  (!invoices?.data?.invoices ||
+                    invoices?.data?.invoices?.length == 0) && (
+                    <tr>
+                      <td colSpan={6}>Tidak ada invoice</td>
+                    </tr>
+                  )}
+                {invoices.data?.invoices?.map((invoice) => (
+                  <tr key={invoice.id}>
+                    <td>
+                      <Link href={`${router.pathname}/${invoice.id}`}>
+                        {invoice.name}
+                      </Link>
+                    </td>
+                    <td>{invoice.purchaseOrderName || '-'}</td>
+                    <td className='!text-left'>{invoice.sales}</td>
+                    <td>{invoice.invoiceDate}</td>
+                    <td>
+                      {invoice.amountResidual > 0 ? (
+                        <div className='badge-solid-red h-fit mx-auto'>
+                          Belum Lunas
+                        </div>
+                      ) : (
+                        <div className='badge-solid-green h-fit mx-auto'>
+                          Lunas
+                        </div>
+                      )}
+                    </td>
+                    <td>
+                      {invoice.amountResidual > 0 ? (
+                        <div className='badge-solid-red h-fit mx-auto'>
+                          Belum Lunas
+                        </div>
+                      ) : (
+                        <div className='badge-solid-green h-fit mx-auto'>
+                          Lunas
+                        </div>
+                      )}
+                    </td>
+                    <td className='!text-left'>
+                      {currencyFormat(invoice.amountTotal)}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+
+            <Pagination
+              pageCount={pageCount}
+              currentPage={parseInt(page)}
+              url={`/my/invoices${pageQuery}`}
+              className='mt-2 mb-2'
+            />
+          </div>
+        </div>
+      </DesktopView>
       <MobileView>
         <div className='p-4 flex flex-col gap-y-4'>
           <form className='flex gap-x-3' onSubmit={handleSubmit}>
@@ -179,101 +344,6 @@ const Tempo = () => {
           </BottomPopup>
         </div>
       </MobileView>
-
-      <DesktopView>
-        <div className='container mx-auto flex py-10'>
-          <div className='w-3/12 pr-4'>
-            <Menu />
-          </div>
-          <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
-            <div className='flex flex-col mb-6 items-start justify-start'>
-              <h1 className='text-title-sm font-semibold'>Pembayaran Tempo</h1>
-              <p>
-                Jenis Tempo Pembayaran Anda adalah :{' '}
-                <span className='badge-solid-green px-2'>7 Hari</span>
-              </p>
-            </div>
-            <div className='flex mb-6 items-center justify-between'>
-              <form className='flex gap-x-2' onSubmit={handleSubmit}>
-                <input
-                  type='text'
-                  className='form-input'
-                  placeholder='Cari Invoice...'
-                  value={inputQuery}
-                  onChange={(e) => setInputQuery(e.target.value)}
-                />
-                <button className='btn-light bg-transparent px-3' type='submit'>
-                  <MagnifyingGlassIcon className='w-6' />
-                </button>
-              </form>
-            </div>
-
-            <table className='table-data'>
-              <thead>
-                <tr>
-                  <th>No. Invoice</th>
-                  <th>No. PO</th>
-                  <th>Tanggal</th>
-                  <th className='!text-left'>Salesperson</th>
-                  <th>Status</th>
-                  <th className='!text-left'>Total</th>
-                </tr>
-              </thead>
-              <tbody>
-                {invoices.isLoading && (
-                  <tr>
-                    <td colSpan={6}>
-                      <div className='flex justify-center my-2'>
-                        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
-                      </div>
-                    </td>
-                  </tr>
-                )}
-                {!invoices.isLoading &&
-                  (!invoices?.data?.invoices ||
-                    invoices?.data?.invoices?.length == 0) && (
-                    <tr>
-                      <td colSpan={6}>Tidak ada invoice</td>
-                    </tr>
-                  )}
-                {invoices.data?.invoices?.map((invoice) => (
-                  <tr key={invoice.id}>
-                    <td>
-                      <Link href={`${router.pathname}/${invoice.id}`}>
-                        {invoice.name}
-                      </Link>
-                    </td>
-                    <td>{invoice.purchaseOrderName || '-'}</td>
-                    <td>{invoice.invoiceDate}</td>
-                    <td className='!text-left'>{invoice.sales}</td>
-                    <td>
-                      {invoice.amountResidual > 0 ? (
-                        <div className='badge-solid-red h-fit mx-auto'>
-                          Belum Lunas
-                        </div>
-                      ) : (
-                        <div className='badge-solid-green h-fit mx-auto'>
-                          Lunas
-                        </div>
-                      )}
-                    </td>
-                    <td className='!text-left'>
-                      {currencyFormat(invoice.amountTotal)}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-
-            <Pagination
-              pageCount={pageCount}
-              currentPage={parseInt(page)}
-              url={`/my/invoices${pageQuery}`}
-              className='mt-2 mb-2'
-            />
-          </div>
-        </div>
-      </DesktopView>
     </>
   );
 };