summaryrefslogtreecommitdiff
path: root/src/lib/tempo/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/tempo/components')
-rw-r--r--src/lib/tempo/components/Tempo.jsx217
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>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 02:47:02 +0000