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.jsx502
1 files changed, 502 insertions, 0 deletions
diff --git a/src/lib/tempo/components/Tempo.jsx b/src/lib/tempo/components/Tempo.jsx
new file mode 100644
index 00000000..d8af450d
--- /dev/null
+++ b/src/lib/tempo/components/Tempo.jsx
@@ -0,0 +1,502 @@
+import {
+ CheckIcon,
+ ClockIcon,
+ EllipsisVerticalIcon,
+ MagnifyingGlassIcon,
+} from '@heroicons/react/24/outline';
+import { Skeleton } from '@chakra-ui/react';
+import { div, toQuery } from 'lodash-contrib';
+import _ from 'lodash';
+import { useRouter } from 'next/router';
+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';
+import Pagination from '@/core/components/elements/Pagination/Pagination';
+import Link from '@/core/components/elements/Link/Link';
+import currencyFormat from '@/core/utils/currencyFormat';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import {
+ downloadInvoice,
+ downloadTaxInvoice,
+} from '../../invoice/utils/invoices';
+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';
+import FooterBanner from '~/modules/footer-banner';
+const Tempo = () => {
+ const auth = getAuth();
+ const router = useRouter();
+ const { q = '', page = 1, limit = 15 } = router.query;
+
+ const [pageNew, setPageNew] = useState(page);
+ const [limitNew, setLimitNew] = useState(limit);
+
+ const query = {
+ name: q,
+ offset: (pageNew - 1) * limitNew,
+ limit: limitNew,
+ };
+ const { invoices } = useInvoices({ query });
+ const [isLoading, setIsLoading] = useState(true);
+ const [tempo, setTempo] = useState([]);
+ const [inputQuery, setInputQuery] = useState(q);
+ const [toOthers, setToOthers] = useState(null);
+
+ const pageCount = Math.ceil(invoices?.data?.invoiceTotal / limitNew);
+ let pageQuery = _.omit(query, ['limitNew', 'offset']);
+ pageQuery = _.pickBy(pageQuery, _.identity);
+ pageQuery = toQuery(pageQuery);
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ router.push(`/my/tempo?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));
+ 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 '';
+ };
+ const startItem = 1 + (pageNew - 1) * limitNew;
+ const endItem = Math.min(limitNew * pageNew, invoices?.data?.invoiceTotal);
+ const getDueDate = (invoice) => {
+ const [day, month, year] = invoice.split('/');
+ 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>
+ <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 flex flex-col gap-y-4'>
+ <div className='flex flex-col mb-6 items-start justify-start'>
+ <h1 className='text-title-sm font-semibold'>Pembayaran Tempo</h1>
+ <p className='flex flex-row gap-2 w-full'>
+ Jenis Tempo Pembayaran Anda adalah{' '}
+ <Skeleton
+ isLoaded={!isLoading}
+ h='fit'
+ w={32}
+ className='badge-solid-green px-1 text-sm flex items-center justify-center font-thin'
+ >
+ {' '}
+ {tempo.paymentTerm}
+ </Skeleton>
+ </p>
+ </div>
+ <div className='grid grid-flow-col gap-4 mb-4'>
+ <div className='border w-full p-4'>
+ <p>Kredit Limit Terpakai</p>
+ <Skeleton
+ isLoaded={!isLoading}
+ h='36px'
+ // w={16}
+ className='text-3xl font-semibold'
+ >
+ {currencyFormat(amountDue)}
+ </Skeleton>
+ </div>
+ <div className='border w-full p-4'>
+ <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'
+ // w={16}
+ className='text-3xl font-semibold'
+ >
+ {currencyFormat(limitTempo)}
+ </Skeleton>
+ </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='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 && (
+ <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={`/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-green h-fit mx-auto'>
+ Lunas
+ </div>
+ )}
+ </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>
+ <div className=''>
+ <FooterBanner />
+ </div>
+ </div>
+ </div>
+ </DesktopView>
+ <MobileView>
+ <div className=' bg-[#FEF8E2] w-[110%] inset-0 relative transform -translate-x-5 px-8 py-4'>
+ <div className='flex flex-col gap-y-4 '>
+ <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='flex justify-around text-sm '>
+ <div className='w-[40%] flex flex-col gap-2'>
+ <p>Kredit Limit Terpakai</p>
+ <Skeleton
+ isLoaded={!isLoading}
+ // h='36px'
+ // w={16}
+ className='font-semibold text-base'
+ >
+ {currencyFormat(amountDue)}
+ </Skeleton>
+ </div>
+ <div className='w-[30%] flex flex-col gap-2'>
+ <p>Sisa Kredit Limit</p>
+ <Skeleton
+ isLoaded={!isLoading}
+ // h='36px'
+ // w={16}
+ className='font-semibold text-base'
+ >
+ {currencyFormat(Math.round(parseInt(limitTempo - amountDue)))}
+ </Skeleton>
+ </div>
+ <div className=' w-[30%] flex flex-col gap-2'>
+ <p>Kredit Limit</p>
+ <Skeleton
+ isLoaded={!isLoading}
+ // h='36px'
+ // w={16}
+ className=' font-semibold text-base'
+ >
+ {currencyFormat(limitTempo)}
+ </Skeleton>
+ </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='6px'
+ />
+ <span className='flex justify-end opacity-75 text-xs font-semibold text-red-500'>
+ {getLabel()}
+ </span>
+ </div>
+ </div>
+ </div>
+ <div className='p-4 flex flex-col gap-y-4'>
+ <form className='flex gap-x-3' 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>
+
+ {invoices.isLoading && (
+ <div className='flex justify-center my-4'>
+ <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+ </div>
+ )}
+
+ {!invoices.isLoading && invoices.data?.invoices?.length === 0 && (
+ <Alert type='info' className='text-center'>
+ Tidak ada invoice
+ </Alert>
+ )}
+
+ {invoices.data?.invoices?.map((invoice, index) => (
+ <div
+ className='p-4 shadow border border-gray_r-3 rounded-md'
+ key={index}
+ >
+ <div className='grid grid-cols-2'>
+ <Link href={`/my/quotations/${invoice.salesOrderId}`}>
+ <span className='text-caption-2 text-gray_r-11'>
+ No. Transaksi
+ </span>
+ <h2 className='font-semibold text-black mt-1'>
+ {invoice.salesOrder}
+ </h2>
+ </Link>
+ <div className='flex gap-x-1 justify-end items-end '>
+ {invoice.amountResidual > 0 ? (
+ new Date() > getDueDate(invoice.invoiceDateDue) ? (
+ <div className='inline-flex items-end 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 ml-auto'>
+ Belum Lunas
+ </div>
+ )
+ ) : (
+ <div className='badge-solid-green h-fit ml-auto'>Lunas</div>
+ )}
+ {/* <EllipsisVerticalIcon
+ className='w-5 h-5'
+ onClick={() => setToOthers(invoice)}
+ /> */}
+ </div>
+ </div>
+ <Link href={`/my/invoices/${invoice.id}`}>
+ <div className='grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal'>
+ <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'>
+ <div>
+ <span className='text-caption-2 text-gray_r-11'>
+ No. Invoice
+ </span>
+ <p className='mt-1 font-semibold text-gray_r-12'>
+ {invoice.name || '-'}
+ </p>
+ </div>
+ <div className='text-right'>
+ <span className='opacity-65 text-caption-2 text-gray_r-11'>
+ Total Belanja
+ </span>
+ <p className='mt-1 font-semibold text-red-500 '>
+ {currencyFormat(invoice.amountTotal)}
+ </p>
+ </div>
+ </div>
+ </Link>
+ {/* {invoice.efaktur ? (
+ <div className='badge-green h-fit mt-3 ml-auto flex items-center gap-x-0.5'>
+ <CheckIcon className='w-4 stroke-2' />
+ Faktur Pajak
+ </div>
+ ) : (
+ <div className='badge-red h-fit mt-3 ml-auto flex items-center gap-x-0.5'>
+ <ClockIcon className='w-4 stroke-2' />
+ Faktur Pajak
+ </div>
+ )} */}
+ </div>
+ ))}
+
+ <Pagination
+ pageCount={pageCount}
+ currentPage={parseInt(pageNew)}
+ url={`/my/invoices${pageQuery}`}
+ className='mt-2 mb-2'
+ />
+
+ <BottomPopup
+ title='Lainnya'
+ active={toOthers}
+ close={() => setToOthers(null)}
+ >
+ <div className='flex flex-col gap-y-4 mt-2'>
+ <button
+ className='text-left disabled:opacity-60'
+ onClick={() => {
+ downloadInvoice(toOthers);
+ setToOthers(null);
+ }}
+ >
+ Download Invoice
+ </button>
+ <button
+ className='text-left disabled:opacity-60'
+ disabled={!toOthers?.efaktur}
+ onClick={() => {
+ downloadTaxInvoice(toOthers);
+ setToOthers(null);
+ }}
+ >
+ Download Faktur Pajak
+ </button>
+ </div>
+ </BottomPopup>
+ </div>
+ </MobileView>
+ </>
+ );
+};
+
+export default Tempo;
generated by cgit v1.2.3 (git 2.25.1) at 2026-07-05 22:04:07 +0000