<iman> pengajuan tempo

1 files changed, 116 insertions, 101 deletions

diff --git a/src/lib/tempo/components/Tempo.jsx b/src/lib/tempo/components/Tempo.jsx
index e6c3959d..95eb461f 100644
--- a/src/lib/tempo/components/Tempo.jsx
+++ b/src/lib/tempo/components/Tempo.jsx
@@ -27,11 +27,13 @@ import odooApi from '@/core/api/odooApi';
 import { getAuth } from '@/core/utils/auth';
 import ProgressBar from '@ramonak/react-progress-bar';
 import FooterBanner from '~/modules/footer-banner';
+import Image from '~/components/ui/image';
+import useDevice from '@/core/hooks/useDevice';
 const Tempo = () => {
   const auth = getAuth();
   const router = useRouter();
   const { q = '', page = 1, limit = 15 } = router.query;
-
+  const { isDesktop, isMobile } = useDevice();
   const [pageNew, setPageNew] = useState(page);
   const [limitNew, setLimitNew] = useState(limit);
 
@@ -173,116 +175,129 @@ const Tempo = () => {
                 {getLabel()}
               </span>
             </div>
-            <div className='border p-4 rounded mt-4'>
-              <div className='flex mb-6 items-center justify-between mt-4'>
-                <form className='flex' onSubmit={handleSubmit}>
-                  <button className='bg-gray_r-2 px-3' type='submit'>
-                    <MagnifyingGlassIcon className='w-6' />
-                  </button>
-                  <input
-                    type='text'
-                    className='form-input bg-gray_r-2 border-none'
-                    placeholder='Cari Invoice...'
-                    value={inputQuery}
-                    onChange={(e) => setInputQuery(e.target.value)}
-                  />
-                </form>
-                {!invoices.isLoading && (
-                  <div className='flex flex-row gap-4 items-center justify-center'>
-                    <p>
-                      Menampilkan {startItem}-{endItem} dari{' '}
-                      {invoices?.data?.invoiceTotal}
-                    </p>
-                    <select
-                      id='limitSelect'
-                      value={limitNew}
-                      onChange={(e) => {
-                        setLimitNew(Number(e.target.value));
-                        setPageNew(1);
-                      }}
-                      className='border p-2'
-                    >
-                      <option value={10}>10</option>
-                      <option value={15}>15</option>
-                      <option value={20}>20</option>
-                    </select>
-                  </div>
-                )}
+            {!invoices?.data?.invoices ||
+            invoices?.data?.invoices?.length == 0 ? (
+              <div className='flex justify-center'>
+                <Image
+                  src='/images/ICON-DOKUMEN-VERIFIKASI.png'
+                  alt='Registrasi Tempo'
+                  width={isMobile ? 300 : 600}
+                  height={isMobile ? 300 : 550}
+                />
               </div>
+            ) : (
+              <div className='border p-4 rounded mt-4'>
+                <div className='flex mb-6 items-center justify-between mt-4'>
+                  <form className='flex' onSubmit={handleSubmit}>
+                    <button className='bg-gray_r-2 px-3' type='submit'>
+                      <MagnifyingGlassIcon className='w-6' />
+                    </button>
+                    <input
+                      type='text'
+                      className='form-input bg-gray_r-2 border-none'
+                      placeholder='Cari Invoice...'
+                      value={inputQuery}
+                      onChange={(e) => setInputQuery(e.target.value)}
+                    />
+                  </form>
+                  {!invoices.isLoading && (
+                    <div className='flex flex-row gap-4 items-center justify-center'>
+                      <p>
+                        Menampilkan {startItem}-{endItem} dari{' '}
+                        {invoices?.data?.invoiceTotal}
+                      </p>
+                      <select
+                        id='limitSelect'
+                        value={limitNew}
+                        onChange={(e) => {
+                          setLimitNew(Number(e.target.value));
+                          setPageNew(1);
+                        }}
+                        className='border p-2'
+                      >
+                        <option value={10}>10</option>
+                        <option value={15}>15</option>
+                        <option value={20}>20</option>
+                      </select>
+                    </div>
+                  )}
+                </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 && (
+                <table className='table-data'>
+                  <thead>
                     <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>
+                      <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>
-                  )}
-                  {!invoices.isLoading &&
-                    (!invoices?.data?.invoices ||
-                      invoices?.data?.invoices?.length == 0) && (
+                  </thead>
+                  <tbody>
+                    {invoices.isLoading && (
                       <tr>
-                        <td colSpan={6}>Tidak ada invoice</td>
+                        <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.data?.invoices?.map((invoice) => (
-                    <tr key={invoice.id}>
-                      <td>
-                        <Link href={`/my/invoices/${invoice.id}`}>
-                          {invoice.name}
-                        </Link>
-                      </td>
-                      <td>{invoice.salesOrder || '-'}</td>
-                      <td className='!text-left'>{invoice.sales}</td>
-                      <td>{invoice.invoiceDate}</td>
-                      <td>{invoice.invoiceDateDue}</td>
-                      <td>
-                        {invoice.amountResidual > 0 ? (
-                          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>
+                    {!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={`/my/invoices/${invoice.id}`}>
+                            {invoice.name}
+                          </Link>
+                        </td>
+                        <td>{invoice.salesOrder || '-'}</td>
+                        <td className='!text-left'>{invoice.sales}</td>
+                        <td>{invoice.invoiceDate}</td>
+                        <td>{invoice.invoiceDateDue}</td>
+                        <td>
+                          {invoice.amountResidual > 0 ? (
+                            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-red h-fit mx-auto'>
-                              Belum Lunas
+                            <div className='badge-solid-green h-fit mx-auto'>
+                              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>
+                          )}
+                        </td>
+                        <td className='!text-left'>
+                          {currencyFormat(invoice.amountTotal)}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+
+                <Pagination
+                  pageCount={pageCount}
+                  currentPage={parseInt(pageNew)}
+                  // url={`/my/tempo${pageQuery}`}
+                  url={`/my/tempo?${toQuery(_.omit(query, ['page']))}`}
+                  className='mt-2 mb-2'
+                />
+              </div>
+            )}
 
-              <Pagination
-                pageCount={pageCount}
-                currentPage={parseInt(pageNew)}
-                // url={`/my/tempo${pageQuery}`}
-                url={`/my/tempo?${toQuery(_.omit(query, ['page']))}`}
-                className='mt-2 mb-2'
-              />
-            </div>
             <div className=''>
               <FooterBanner />
             </div>