summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/pengajuan-tempo/component/FinishTempo.jsx18
-rw-r--r--src/lib/pengajuan-tempo/component/Konfirmasi.jsx74
-rw-r--r--src/lib/tempo/components/Tempo.jsx42
3 files changed, 104 insertions, 30 deletions
diff --git a/src/lib/pengajuan-tempo/component/FinishTempo.jsx b/src/lib/pengajuan-tempo/component/FinishTempo.jsx
index 1670314d..f4336d8a 100644
--- a/src/lib/pengajuan-tempo/component/FinishTempo.jsx
+++ b/src/lib/pengajuan-tempo/component/FinishTempo.jsx
@@ -47,8 +47,16 @@ const FinishTempo = ({ query }) => {
return (
<div className='container flex flex-col items-center gap-4'>
- <div className='flex w-2/3 justify-center items-center'>
- <h1 className='text-red-500 text-center font-semibold text-3xl'>
+ <div
+ className={`flex ${
+ isMobile ? 'w-full' : 'w-2/3'
+ } justify-center items-center`}
+ >
+ <h1
+ className={`text-red-500 text-center font-semibold ${
+ isMobile ? 'text-lg' : 'text-3xl'
+ }`}
+ >
Form Pengajuan Tempo kamu Telah Berhasil Didaftarkan Mohon menunggu
hingga Proses Selesai
</h1>
@@ -60,7 +68,11 @@ const FinishTempo = ({ query }) => {
height={isMobile ? 300 : 450}
/>
- <div className='mt-2 text-center leading-6 text-base p-4 md:p-0 w-4/5'>
+ <div
+ className={`mt-2 text-center opacity-75 leading-6 p-4 md:p-0 ${
+ isMobile ? 'w-full text-sm' : 'w-4/5 text-base'
+ }`}
+ >
Mohon menunggu untuk verifikasi dokumen dan kelengkapan data yang telah
anda berikan. Proses approval pembayaran tempo kamu berhasil atau tidak
akan diinfokan melalui email perusahaan / email yang mendaftar
diff --git a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx
index 80845a8f..78591c48 100644
--- a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx
+++ b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx
@@ -20,7 +20,10 @@ import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
const { control, watch, setValue, getValues } = useForm();
const { isDesktop, isMobile } = useDevice();
- const [isOpen, setIsOpen] = useState(false);
+ const [isOpenInformasi, setIsOpenInformasi] = useState(true);
+ const [isOpenKontak, setIsOpenKontak] = useState(false);
+ const [isOpenPengiriman, setIsOpenPengiriman] = useState(false);
+ const [isOpenKonfirmasi, setIsOpenKonfirmasi] = useState(false);
const [industries, setIndustries] = useState([]);
const {
formDokumen,
@@ -203,56 +206,89 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
{isMobile && (
<form className='flex mt-8 py-4 flex-col w-full gap-4'>
<div className='flex flex-col gap-4'>
- <div className='flex flex-row justify-between'>
- <p className='font-semibold text-lg'>Informasi Perusahaan</p>
+ <div className='flex flex-row justify-between items-center'>
+ <div className='flex flex-col justify-center items-start'>
+ <p className='font-semibold text-lg'>Informasi Perusahaan</p>
+ <span className='text-xs opacity-70'>
+ Pastikan informasi usaha yang anda masukkan sudah sesuai
+ dengan data perusahaan anda
+ </span>
+ </div>
<div className='p-2 bg-gray-200'>
- {isOpen ? (
- <ChevronUpIcon className='w-4' />
+ {isOpenInformasi ? (
+ <ChevronUpIcon
+ className='w-4'
+ onClick={() => setIsOpenInformasi(!isOpenInformasi)}
+ />
) : (
- <ChevronDownIcon className='w-4' />
+ <ChevronDownIcon
+ className='w-4'
+ onClick={() => setIsOpenInformasi(!isOpenInformasi)}
+ />
)}
</div>
</div>
- <InformasiPerusahaan isKonfirmasi={true} />
+ {isOpenInformasi && <InformasiPerusahaan isKonfirmasi={true} />}
+ <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
</div>
<div className='flex flex-col gap-4'>
<div className='flex flex-row justify-between'>
<p className='font-semibold text-lg'>Kontak Person</p>
<div className='p-2 bg-gray-200'>
- {isOpen ? (
- <ChevronUpIcon className='w-4' />
+ {isOpenKontak ? (
+ <ChevronUpIcon
+ className='w-4'
+ onClick={() => setIsOpenKontak(!isOpenKontak)}
+ />
) : (
- <ChevronDownIcon className='w-4' />
+ <ChevronDownIcon
+ className='w-4'
+ onClick={() => setIsOpenKontak(!isOpenKontak)}
+ />
)}
</div>
</div>
- <KontakPerusahaan isKonfirmasi={true} />
+ {isOpenKontak && <KontakPerusahaan isKonfirmasi={true} />}
+ <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
</div>
<div className='flex flex-col gap-4'>
<div className='flex flex-row justify-between'>
<p className='font-semibold text-lg'>Pengiriman</p>
<div className='p-2 bg-gray-200'>
- {isOpen ? (
- <ChevronUpIcon className='w-4' />
+ {isOpenPengiriman ? (
+ <ChevronUpIcon
+ className='w-4'
+ onClick={() => setIsOpenPengiriman(!isOpenPengiriman)}
+ />
) : (
- <ChevronDownIcon className='w-4' />
+ <ChevronDownIcon
+ className='w-4'
+ onClick={() => setIsOpenPengiriman(!isOpenPengiriman)}
+ />
)}
</div>
</div>
- <Pengiriman isKonfirmasi={true} />
+ {isOpenPengiriman && <Pengiriman isKonfirmasi={true} />}
+ <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
</div>
<div className='flex flex-col gap-4'>
<div className='flex flex-row justify-between'>
<p className='font-semibold text-lg'>Dokumen</p>
<div className='p-2 bg-gray-200'>
- {isOpen ? (
- <ChevronUpIcon className='w-4' />
+ {isOpenKonfirmasi ? (
+ <ChevronUpIcon
+ className='w-4'
+ onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
+ />
) : (
- <ChevronDownIcon className='w-4' />
+ <ChevronDownIcon
+ className='w-4'
+ onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
+ />
)}
</div>
</div>
- <KonfirmasiDokumen isKonfirmasi={true} />
+ {isOpenKonfirmasi && <KonfirmasiDokumen isKonfirmasi={true} />}
</div>
</form>
)}
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
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 03:19:19 +0000