summaryrefslogtreecommitdiff
path: root/src/lib/pengajuan-tempo
diff options
context:
space:
mode:
authorit-fixcomart <it@fixcomart.co.id>2024-12-13 14:18:03 +0700
committerit-fixcomart <it@fixcomart.co.id>2024-12-13 14:18:03 +0700
commit915dc67e1ce31eab1f2415cc8df95cebb75a137d (patch)
tree2029da924aae618240e8edd9629855f46ab4e404 /src/lib/pengajuan-tempo
parent0f84963214ee6dc5b5a44d945540826a66bec9e0 (diff)
<iman>update pengajuan tempo request
Diffstat (limited to 'src/lib/pengajuan-tempo')
-rw-r--r--src/lib/pengajuan-tempo/component/Dokumen.jsx664
-rw-r--r--src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx771
-rw-r--r--src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx2
-rw-r--r--src/lib/pengajuan-tempo/component/PengajuanTempo.jsx23
-rw-r--r--src/lib/pengajuan-tempo/component/Pengiriman.jsx733
-rw-r--r--src/lib/pengajuan-tempo/component/Referensi.jsx64
-rw-r--r--src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx382
7 files changed, 2018 insertions, 621 deletions
diff --git a/src/lib/pengajuan-tempo/component/Dokumen.jsx b/src/lib/pengajuan-tempo/component/Dokumen.jsx
index d74e85be..00bb715a 100644
--- a/src/lib/pengajuan-tempo/component/Dokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/Dokumen.jsx
@@ -169,11 +169,99 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<div className='kolom-kiri w-full grid grid-rows-2 gap-7 '>
<div
className='w-full grid grid-cols-2 gap-5'
+ ref={dokumenNpwpRef}
+ >
+ <div>
+ <label className='form-label text-nowrap'>
+ NPWP Perusahaan
+ </label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenNpwp'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenNpwp?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenNpwp'
+ name='dokumenNpwp'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenNpwp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenNpwp?.name}
+ </span>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenNpwp}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div
+ className='w-full grid grid-cols-2 gap-5'
+ ref={dokumenSppkpRef}
+ >
+ <div>
+ <label className='form-label text-nowrap'>SPPKP</label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenSppkp'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenSppkp?.name.length > 0
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenSppkp}
+ id='dokumenSppkp'
+ name='dokumenSppkp'
+ type='file'
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenSppkp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenSppkp?.name}
+ </span>
+ </div>
+
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenSppkp}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div
+ className='w-full grid grid-cols-2 gap-5'
ref={dokumenNibRef}
>
<div>
<label className='form-label text-nowrap'>
- NIB (SIUP/TDP/SKDP){' '}
+ NIB
<span className='text-danger-500 text-xl'>*</span>
</label>
<span className='text-xs opacity-60 text-red-500'>
@@ -201,7 +289,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600'>
+ <span className='mt-2 text-gray-600 line-clamp-2'>
{formDokumen?.dokumenNib?.name}
</span>
</div>
@@ -212,56 +300,53 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
)}
</div>
</div>
- <div
- className='w-full grid grid-cols-2 gap-5'
- ref={dokumenNpwpRef}
- >
+
+ <div className='w-full grid grid-cols-2 gap-5'>
<div>
<label className='form-label text-nowrap'>
- NPWP Perusahaan
+ SIUP <span className=' opacity-60'>(Opsional)</span>{' '}
</label>
<span className='text-xs opacity-60 text-red-500'>
Format: pdf, jpeg, jpg, png. max file size 2MB
</span>
</div>
<div className=''>
- <div className='flex flex-col items-start'>
+ <div className='flex flex-col items-start '>
<label
- htmlFor='dokumenNpwp'
+ htmlFor='dokumenSiup'
className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
>
- {formDokumen?.dokumenNpwp?.name
+ {formDokumen?.dokumenSiup?.name.length > 0
? 'Ubah Dokumen'
: 'Upload Dokumen'}
</label>
<input
- // value={formDokumen.dokumenNpwp}
- id='dokumenNpwp'
- name='dokumenNpwp'
+ // value={formDokumen.dokumenAktaPerubahan}
+ id='dokumenSiup'
+ name='dokumenSiup'
type='file'
- title=' '
className='hidden'
- aria-invalid={errorsDokumen.dokumenNpwp}
+ aria-invalid={errorsDokumen.dokumenAktaPerubahan}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600'>
- {formDokumen?.dokumenNpwp?.name}
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenSiup?.name}
</span>
</div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenNpwp}
+ {errorsDokumen.dokumenSiup}
</div>
)}
</div>
</div>
- <div
- className='w-full grid grid-cols-2 gap-5'
- ref={dokumenSppkpRef}
- >
+
+ <div className='w-full grid grid-cols-2 gap-5'>
<div>
- <label className='form-label text-nowrap'>SPPKP</label>
+ <label className='form-label text-nowrap'>
+ TDP <span className=' opacity-60'>(Opsional)</span>{' '}
+ </label>
<span className='text-xs opacity-60 text-red-500'>
Format: pdf, jpeg, jpg, png. max file size 2MB
</span>
@@ -269,43 +354,39 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<div className=''>
<div className='flex flex-col items-start'>
<label
- htmlFor='dokumenSppkp'
+ htmlFor='dokumenTdp'
className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
>
- {formDokumen?.dokumenSppkp?.name.length > 0
+ {formDokumen?.dokumenTdp?.name.length > 0
? 'Ubah Dokumen'
: 'Upload Dokumen'}
</label>
<input
- // value={formDokumen.dokumenSppkp}
- id='dokumenSppkp'
- name='dokumenSppkp'
+ // value={formDokumen.dokumenAktaPerubahan}
+ id='dokumenTdp'
+ name='dokumenTdp'
type='file'
className='hidden'
- aria-invalid={errorsDokumen.dokumenSppkp}
+ aria-invalid={errorsDokumen.dokumenTdp}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600'>
- {formDokumen?.dokumenSppkp?.name}
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenTdp?.name}
</span>
</div>
-
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenSppkp}
+ {errorsDokumen.dokumenTdp}
</div>
)}
</div>
</div>
- <div
- className='w-full grid grid-cols-2 gap-5'
- ref={dokumenAktaPerubahanRef}
- >
+
+ <div className='w-full grid grid-cols-2 gap-5'>
<div>
<label className='form-label text-nowrap'>
- Akta Perubahan{' '}
- <span className=' opacity-60'>(Opsional)</span>{' '}
+ SKDP <span className=' opacity-60'>(Opsional)</span>{' '}
</label>
<span className='text-xs opacity-60 text-red-500'>
Format: pdf, jpeg, jpg, png. max file size 2MB
@@ -314,43 +395,39 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<div className=''>
<div className='flex flex-col items-start'>
<label
- htmlFor='dokumenAktaPerubahan'
+ htmlFor='dokumenSkdp'
className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
>
- {formDokumen?.dokumenAktaPerubahan?.name.length > 0
+ {formDokumen?.dokumenSkdp?.name.length > 0
? 'Ubah Dokumen'
: 'Upload Dokumen'}
</label>
<input
// value={formDokumen.dokumenAktaPerubahan}
- id='dokumenAktaPerubahan'
- name='dokumenAktaPerubahan'
+ id='dokumenSkdp'
+ name='dokumenSkdp'
type='file'
className='hidden'
- aria-invalid={errorsDokumen.dokumenAktaPerubahan}
+ aria-invalid={errorsDokumen.dokumenSkdp}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600'>
- {formDokumen?.dokumenAktaPerubahan?.name}
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenSkdp?.name}
</span>
</div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenAktaPerubahan}
+ {errorsDokumen.dokumenSkdp}
</div>
)}
</div>
</div>
- <div
- className='w-full grid grid-cols-2 gap-5'
- ref={dokumenKtpDirutRef}
- >
+
+ <div className='w-full grid grid-cols-2 gap-5'>
<div>
<label className='form-label text-nowrap'>
- KTP Dirut/Direktur{' '}
- <span className=' opacity-60'>(Opsional)</span>{' '}
- <span className='text-danger-500 text-xl'>*</span>
+ SKT <span className=' opacity-60'>(Opsional)</span>{' '}
</label>
<span className='text-xs opacity-60 text-red-500'>
Format: pdf, jpeg, jpg, png. max file size 2MB
@@ -359,31 +436,30 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<div className=''>
<div className='flex flex-col items-start'>
<label
- htmlFor='dokumenKtpDirut'
+ htmlFor='dokumenSkt'
className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
>
- {formDokumen?.dokumenKtpDirut?.name
+ {formDokumen?.dokumenSkt?.name.length > 0
? 'Ubah Dokumen'
: 'Upload Dokumen'}
</label>
<input
- // value={formDokumen.dokumenKtpDirut}
- id='dokumenKtpDirut'
- name='dokumenKtpDirut'
+ // value={formDokumen.dokumenAktaPerubahan}
+ id='dokumenSkt'
+ name='dokumenSkt'
type='file'
className='hidden'
- aria-invalid={errorsDokumen.dokumenKtpDirut}
+ aria-invalid={errorsDokumen.dokumenSkt}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600'>
- {formDokumen?.dokumenKtpDirut?.name}
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenSkt?.name}
</span>
</div>
-
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenKtpDirut}
+ {errorsDokumen.dokumenSkt}
</div>
)}
</div>
@@ -425,7 +501,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600'>
+ <span className='mt-2 text-gray-600 line-clamp-2'>
{formDokumen?.dokumenAktaPendirian?.name}
</span>
</div>
@@ -437,14 +513,15 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
)}
</div>
</div>
+
<div
className='w-full grid grid-cols-2 gap-5'
- ref={dokumenLaporanKeuanganRef}
+ ref={dokumenAktaPerubahanRef}
>
<div>
<label className='form-label text-nowrap'>
- Laporan Keuangan
- <span className=' opacity-60'>(Opsional)</span>
+ Akta Perubahan{' '}
+ <span className=' opacity-60'>(Opsional)</span>{' '}
</label>
<span className='text-xs opacity-60 text-red-500'>
Format: pdf, jpeg, jpg, png. max file size 2MB
@@ -453,35 +530,80 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<div className=''>
<div className='flex flex-col items-start'>
<label
- htmlFor='dokumenLaporanKeuangan'
+ htmlFor='dokumenAktaPerubahan'
className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
>
- {formDokumen?.dokumenLaporanKeuangan?.name
+ {formDokumen?.dokumenAktaPerubahan?.name.length > 0
? 'Ubah Dokumen'
: 'Upload Dokumen'}
</label>
<input
- // value={formDokumen.dokumenLaporanKeuangan}
- id='dokumenLaporanKeuangan'
- name='dokumenLaporanKeuangan'
+ // value={formDokumen.dokumenAktaPerubahan}
+ id='dokumenAktaPerubahan'
+ name='dokumenAktaPerubahan'
type='file'
className='hidden'
- aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
+ aria-invalid={errorsDokumen.dokumenAktaPerubahan}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600'>
- {formDokumen?.dokumenLaporanKeuangan?.name}
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenAktaPerubahan?.name}
+ </span>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenAktaPerubahan}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div
+ className='w-full grid grid-cols-2 gap-5'
+ ref={dokumenTempatBekerjaRef}
+ >
+ <div>
+ <label className='form-label text-nowrap'>
+ Foto tempat kerja
+ </label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenTempatBekerja'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenTempatBekerja?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenTempatBekerja}
+ id='dokumenTempatBekerja'
+ name='dokumenTempatBekerja'
+ type='file'
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenTempatBekerja}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenTempatBekerja?.name}
</span>
</div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenLaporanKeuangan}
+ {errorsDokumen.dokumenTempatBekerja}
</div>
)}
</div>
</div>
+
<div
className='w-full grid grid-cols-2 gap-5'
ref={dokumenFotoKantorRef}
@@ -514,7 +636,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600'>
+ <span className='mt-2 text-gray-600 line-clamp-2'>
{formDokumen?.dokumenFotoKantor?.name}
</span>
</div>
@@ -526,13 +648,16 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
)}
</div>
</div>
+
<div
className='w-full grid grid-cols-2 gap-5'
- ref={dokumenTempatBekerjaRef}
+ ref={dokumenKtpDirutRef}
>
<div>
<label className='form-label text-nowrap'>
- Foto tempat kerja
+ KTP Dirut/Direktur{' '}
+ <span className=' opacity-60'>(Opsional)</span>{' '}
+ <span className='text-danger-500 text-xl'>*</span>
</label>
<span className='text-xs opacity-60 text-red-500'>
Format: pdf, jpeg, jpg, png. max file size 2MB
@@ -541,35 +666,81 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<div className=''>
<div className='flex flex-col items-start'>
<label
- htmlFor='dokumenTempatBekerja'
+ htmlFor='dokumenKtpDirut'
className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
>
- {formDokumen?.dokumenTempatBekerja?.name
+ {formDokumen?.dokumenKtpDirut?.name
? 'Ubah Dokumen'
: 'Upload Dokumen'}
</label>
<input
- // value={formDokumen.dokumenTempatBekerja}
- id='dokumenTempatBekerja'
- name='dokumenTempatBekerja'
+ // value={formDokumen.dokumenKtpDirut}
+ id='dokumenKtpDirut'
+ name='dokumenKtpDirut'
type='file'
className='hidden'
- aria-invalid={errorsDokumen.dokumenTempatBekerja}
+ aria-invalid={errorsDokumen.dokumenKtpDirut}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600'>
- {formDokumen?.dokumenTempatBekerja?.name}
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenKtpDirut?.name}
</span>
</div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenTempatBekerja}
+ {errorsDokumen.dokumenKtpDirut}
+ </div>
+ )}
+ </div>
+ </div>
+ <div
+ className='w-full grid grid-cols-2 gap-5'
+ ref={dokumenLaporanKeuanganRef}
+ >
+ <div>
+ <label className='form-label text-nowrap'>
+ Laporan Keuangan
+ <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenLaporanKeuangan'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenLaporanKeuangan?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenLaporanKeuangan}
+ id='dokumenLaporanKeuangan'
+ name='dokumenLaporanKeuangan'
+ type='file'
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenLaporanKeuangan?.name}
+ </span>
+ </div>
+
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenLaporanKeuangan}
</div>
)}
</div>
</div>
+
<div></div>
</div>
</div>
@@ -583,11 +754,11 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<p className='font-bold'>Upload Progress</p>
<p>
<span className='text-red-500 font-bold'>
- {parseInt((getJumlahDokumenDiisi() / 9) * 100)} %
+ {parseInt((getJumlahDokumenDiisi() / 13) * 100)} %
</span>
<span className='ml-2 opacity-60'>
- {getJumlahDokumenDiisi() >= 4
- ? getJumlahDokumenDiisi() == 9
+ {getJumlahDokumenDiisi() >= 5
+ ? getJumlahDokumenDiisi() == 13
? 'Selesai'
: 'Sedikit Lagi'
: ''}
@@ -603,7 +774,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
baseBgColor='#E5E7EB'
labelColor='#e80909'
labelSize='0'
- maxCompleted={9}
+ maxCompleted={13}
height='14px'
/>
<span className='opacity-75'>
@@ -624,9 +795,82 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</h1>
<form className='flex mt-4 flex-col w-full '>
<div className='w-full flex flex-col gap-4'>
+ <div className='w-full flex flex-col gap-2' ref={dokumenNpwpRef}>
+ <label className='form-label text-nowrap'>
+ NPWP Perusahaan
+ </label>
+ <div className='flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenNpwp'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenNpwp?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenNpwp'
+ name='dokumenNpwp'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenNpwp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenNpwp?.name}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenNpwp}
+ </div>
+ )}
+ </div>
+
+ <div className='w-full flex flex-col gap-2' ref={dokumenSppkpRef}>
+ <label className='form-label text-nowrap'>SPPKP</label>
+ <div className='flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenSppkp'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenSppkp?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenSppkp'
+ name='dokumenSppkp'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenSppkp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenSppkp?.name}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenSppkp}
+ </div>
+ )}
+ </div>
<div className='w-full flex flex-col gap-2' ref={dokumenNibRef}>
<label className='form-label text-nowrap'>
- NIB (SIUP/TDP/SKDP){' '}
+ NIB
<span className='text-danger-500 text-xl'>*</span>
</label>
<div className='flex flex-row gap-2'>
@@ -649,7 +893,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600 truncate'>
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
{formDokumen?.dokumenNib?.name}
</span>
</div>
@@ -663,32 +907,32 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
)}
</div>
- <div className='w-full flex flex-col gap-2' ref={dokumenNpwpRef}>
+ <div className='w-full flex flex-col gap-2'>
<label className='form-label text-nowrap'>
- NPWP Perusahaan
+ SIUP <span className=' opacity-60'>(Opsional)</span>
</label>
<div className='flex flex-row gap-2'>
<label
- htmlFor='dokumenNpwp'
- className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ htmlFor='dokumenSiup'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
>
- {formDokumen?.dokumenNpwp?.name
+ {formDokumen?.dokumenSiup?.name
? 'Ubah Dokumen'
: 'Upload Dokumen'}
</label>
<input
// value={formDokumen.dokumenNpwp}
- id='dokumenNpwp'
- name='dokumenNpwp'
+ id='dokumenSiup'
+ name='dokumenSiup'
type='file'
title=' '
className='hidden'
- aria-invalid={errorsDokumen.dokumenNpwp}
+ aria-invalid={errorsDokumen.dokumenSiup}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600 truncate'>
- {formDokumen?.dokumenNpwp?.name}
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenSiup?.name}
</span>
</div>
<span className='text-xs opacity-60 text-red-500'>
@@ -696,35 +940,37 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</span>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenNpwp}
+ {errorsDokumen.dokumenSiup}
</div>
)}
</div>
- <div className='w-full flex flex-col gap-2' ref={dokumenSppkpRef}>
- <label className='form-label text-nowrap'>SPPKP</label>
+ <div className='w-full flex flex-col gap-2'>
+ <label className='form-label text-nowrap'>
+ TDP <span className=' opacity-60'>(Opsional)</span>
+ </label>
<div className='flex flex-row gap-2'>
<label
- htmlFor='dokumenSppkp'
+ htmlFor='dokumenTdp'
className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
>
- {formDokumen?.dokumenSppkp?.name
+ {formDokumen?.dokumenTdp?.name
? 'Ubah Dokumen'
: 'Upload Dokumen'}
</label>
<input
// value={formDokumen.dokumenNpwp}
- id='dokumenSppkp'
- name='dokumenSppkp'
+ id='dokumenTdp'
+ name='dokumenTdp'
type='file'
title=' '
className='hidden'
- aria-invalid={errorsDokumen.dokumenSppkp}
+ aria-invalid={errorsDokumen.dokumenTdp}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600 truncate'>
- {formDokumen?.dokumenSppkp?.name}
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenTdp?.name}
</span>
</div>
<span className='text-xs opacity-60 text-red-500'>
@@ -732,40 +978,36 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</span>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenSppkp}
+ {errorsDokumen.dokumenTdp}
</div>
)}
</div>
-
- <div
- className='w-full flex flex-col gap-2'
- ref={dokumenAktaPerubahanRef}
- >
+ <div className='w-full flex flex-col gap-2'>
<label className='form-label text-nowrap'>
- Akta Perubahan <span className=' opacity-60'>(Opsional)</span>
+ SKDP <span className=' opacity-60'>(Opsional)</span>
</label>
<div className='flex flex-row gap-2'>
<label
- htmlFor='dokumenAktaPerubahan'
+ htmlFor='dokumenSkdp'
className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
>
- {formDokumen?.dokumenAktaPerubahan?.name
+ {formDokumen?.dokumenTdp?.name
? 'Ubah Dokumen'
: 'Upload Dokumen'}
</label>
<input
// value={formDokumen.dokumenNpwp}
- id='dokumenAktaPerubahan'
- name='dokumenAktaPerubahan'
+ id='dokumenSkdp'
+ name='dokumenSkdp'
type='file'
title=' '
className='hidden'
- aria-invalid={errorsDokumen.dokumenAktaPerubahan}
+ aria-invalid={errorsDokumen.dokumenSkdp}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600 truncate'>
- {formDokumen?.dokumenAktaPerubahan?.name}
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenSkdp?.name}
</span>
</div>
<span className='text-xs opacity-60 text-red-500'>
@@ -773,42 +1015,36 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</span>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenAktaPerubahan}
+ {errorsDokumen.dokumenSkdp}
</div>
)}
</div>
-
- <div
- className='w-full flex flex-col gap-2'
- ref={dokumenKtpDirutRef}
- >
+ <div className='w-full flex flex-col gap-2'>
<label className='form-label text-nowrap'>
- KTP Dirut/Direktur{' '}
- <span className=' opacity-60'>(Opsional)</span>{' '}
- <span className='text-danger-500 text-xl'>*</span>
+ SKT <span className=' opacity-60'>(Opsional)</span>
</label>
<div className='flex flex-row gap-2'>
<label
- htmlFor='dokumenKtpDirut'
+ htmlFor='dokumenSkt'
className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
>
- {formDokumen?.dokumenKtpDirut?.name
+ {formDokumen?.dokumenSkt?.name
? 'Ubah Dokumen'
: 'Upload Dokumen'}
</label>
<input
// value={formDokumen.dokumenNpwp}
- id='dokumenKtpDirut'
- name='dokumenKtpDirut'
+ id='dokumenSkt'
+ name='dokumenSkt'
type='file'
title=' '
className='hidden'
- aria-invalid={errorsDokumen.dokumenKtpDirut}
+ aria-invalid={errorsDokumen.dokumenSkt}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600 truncate'>
- {formDokumen?.dokumenKtpDirut?.name}
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenSkt?.name}
</span>
</div>
<span className='text-xs opacity-60 text-red-500'>
@@ -816,11 +1052,10 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</span>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenKtpDirut}
+ {errorsDokumen.dokumenSkdp}
</div>
)}
</div>
-
<div
className='w-full flex flex-col gap-2'
ref={dokumenAktaPendirianRef}
@@ -849,7 +1084,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600 truncate'>
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
{formDokumen?.dokumenAktaPendirian?.name}
</span>
</div>
@@ -862,37 +1097,35 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
)}
</div>
-
<div
className='w-full flex flex-col gap-2'
- ref={dokumenLaporanKeuanganRef}
+ ref={dokumenAktaPerubahanRef}
>
<label className='form-label text-nowrap'>
- Laporan Keuangan{' '}
- <span className=' opacity-60'>(Opsional)</span>
+ Akta Perubahan <span className=' opacity-60'>(Opsional)</span>
</label>
<div className='flex flex-row gap-2'>
<label
- htmlFor='dokumenLaporanKeuangan'
+ htmlFor='dokumenAktaPerubahan'
className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
>
- {formDokumen?.dokumenLaporanKeuangan?.name
+ {formDokumen?.dokumenAktaPerubahan?.name
? 'Ubah Dokumen'
: 'Upload Dokumen'}
</label>
<input
// value={formDokumen.dokumenNpwp}
- id='dokumenLaporanKeuangan'
- name='dokumenLaporanKeuangan'
+ id='dokumenAktaPerubahan'
+ name='dokumenAktaPerubahan'
type='file'
title=' '
className='hidden'
- aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
+ aria-invalid={errorsDokumen.dokumenAktaPerubahan}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600 truncate'>
- {formDokumen?.dokumenLaporanKeuangan?.name}
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenAktaPerubahan?.name}
</span>
</div>
<span className='text-xs opacity-60 text-red-500'>
@@ -900,13 +1133,53 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</span>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenLaporanKeuangan}
+ {errorsDokumen.dokumenAktaPerubahan}
</div>
)}
</div>
<div
className='w-full flex flex-col gap-2'
+ ref={dokumenTempatBekerjaRef}
+ >
+ <label className='form-label text-nowrap'>
+ Foto tempat kerja
+ </label>
+ <div className='flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenTempatBekerja'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenTempatBekerja?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenTempatBekerja'
+ name='dokumenTempatBekerja'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenTempatBekerja}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenTempatBekerja?.name}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenTempatBekerja}
+ </div>
+ )}
+ </div>
+ <div
+ className='w-full flex flex-col gap-2'
ref={dokumenFotoKantorRef}
>
<label className='form-label text-nowrap'>
@@ -932,7 +1205,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
- <span className='mt-2 text-gray-600 truncate'>
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
{formDokumen?.dokumenFotoKantor?.name}
</span>
</div>
@@ -945,36 +1218,79 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
)}
</div>
+ <div
+ className='w-full flex flex-col gap-2'
+ ref={dokumenKtpDirutRef}
+ >
+ <label className='form-label text-nowrap'>
+ KTP Dirut/Direktur{' '}
+ <span className=' opacity-60'>(Opsional)</span>{' '}
+ <span className='text-danger-500 text-xl'>*</span>
+ </label>
+ <div className='flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenKtpDirut'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenKtpDirut?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenKtpDirut'
+ name='dokumenKtpDirut'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenKtpDirut}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenKtpDirut?.name}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenKtpDirut}
+ </div>
+ )}
+ </div>
<div
className='w-full flex flex-col gap-2'
- ref={dokumenTempatBekerjaRef}
+ ref={dokumenLaporanKeuanganRef}
>
<label className='form-label text-nowrap'>
- Foto tempat kerja
+ Laporan Keuangan{' '}
+ <span className=' opacity-60'>(Opsional)</span>
</label>
<div className='flex flex-row gap-2'>
<label
- htmlFor='dokumenTempatBekerja'
+ htmlFor='dokumenLaporanKeuangan'
className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
>
- {formDokumen?.dokumenTempatBekerja?.name
+ {formDokumen?.dokumenLaporanKeuangan?.name
? 'Ubah Dokumen'
: 'Upload Dokumen'}
</label>
<input
// value={formDokumen.dokumenNpwp}
- id='dokumenTempatBekerja'
- name='dokumenTempatBekerja'
+ id='dokumenLaporanKeuangan'
+ name='dokumenLaporanKeuangan'
type='file'
title=' '
className='hidden'
- aria-invalid={errorsDokumen.dokumenTempatBekerja}
+ aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
<span className='mt-2 text-gray-600 truncate'>
- {formDokumen?.dokumenTempatBekerja?.name}
+ {formDokumen?.dokumenLaporanKeuangan?.name}
</span>
</div>
<span className='text-xs opacity-60 text-red-500'>
@@ -982,7 +1298,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</span>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenTempatBekerja}
+ {errorsDokumen.dokumenLaporanKeuangan}
</div>
)}
</div>
@@ -997,11 +1313,11 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<p className='font-bold'>Upload Progress</p>
<p>
<span className='text-red-500 font-bold'>
- {parseInt((getJumlahDokumenDiisi() / 9) * 100)} %
+ {parseInt((getJumlahDokumenDiisi() / 13) * 100)} %
</span>
<span className='ml-2 opacity-60'>
- {getJumlahDokumenDiisi() >= 4
- ? getJumlahDokumenDiisi() == 9
+ {getJumlahDokumenDiisi() >= 5
+ ? getJumlahDokumenDiisi() == 13
? 'Selesai'
: 'Sedikit Lagi'
: ''}
@@ -1017,7 +1333,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
baseBgColor='#E5E7EB'
labelColor='#e80909'
labelSize='0'
- maxCompleted={9}
+ maxCompleted={13}
height='10px'
/>
<span className='opacity-75 text-xs text-red-500'>
diff --git a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
index 19b7fed2..ca571167 100644
--- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
@@ -178,16 +178,116 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
Dokumen
</h1>
- <form className='flex flex-col w-full gap-5'>
- <div className='w-full flex flex-row items-center '>
- <div className='w-2/5'>
+ <form className='flex flex-col w-full gap-5 '>
+ <div className='w-full flex flex-row items-center '>
+ <div className='w-2/5 flex'>
<label className='form-label text-nowrap'>
- NIB (SIUP/TDP/SKDP)
+ NPWP Perusahaan
</label>
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
+ <span className='w-3/5 text-gray-600 truncate max-w-48'>
+ {formDokumen?.dokumenNpwp?.name}
+ </span>
+ <div className='w-2/5 flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenNpwp'
+ className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+ >
+ {formDokumen?.dokumenNpwp?.name ? 'Ubah' : 'Upload'}
+ </label>
+ <input
+ // value={formDokumen?.dokumenNib?.name}
+ id='dokumenNpwp'
+ name='dokumenNpwp'
+ type='file'
+ title=' '
+ ref={dokumenNpwpRef}
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenNpwp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <button
+ className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+ type='button'
+ onClick={() =>
+ handleConfirmSubmit(
+ formDokumen.dokumenNpwp.format,
+ formDokumen.dokumenNpwp.base64
+ )
+ }
+ >
+ <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+ </button>
+ </div>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenNpwp}
+ </div>
+ )}
+ </div>
+ </div>
+ <div className='w-full flex flex-row items-center '>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>SPPKP</label>
+ </div>
+ <div className='w-3/5'>
+ <div className='flex flex-row items-start justify-between'>
+ <span className='w-3/5 text-gray-600 truncate max-w-48'>
+ {formDokumen?.dokumenSppkp?.name}
+ </span>
+ <div className='w-2/5 flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenSppkp'
+ className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+ >
+ {formDokumen?.dokumenSppkp?.name.length > 0
+ ? 'Ubah'
+ : 'Upload'}
+ </label>
+ <input
+ // value={formDokumen?.dokumenNib?.name}
+ id='dokumenSppkp'
+ name='dokumenSppkp'
+ type='file'
+ title=' '
+ ref={dokumenSppkpRef}
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenSppkp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <button
+ className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+ type='button'
+ onClick={() =>
+ handleConfirmSubmit(
+ formDokumen.dokumenSppkp.format,
+ formDokumen.dokumenSppkp.base64
+ )
+ }
+ >
+ <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+ </button>
+ </div>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenSppkp}
+ </div>
+ )}
+ </div>
+ </div>
+ <div className='w-full flex flex-row items-center '>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>NIB</label>
+ </div>
+ <div className='w-3/5'>
+ <div className='flex flex-row items-start justify-between'>
+ <span className='w-3/5 text-gray-600 truncate max-w-48'>
{formDokumen?.dokumenNib?.name}
</span>
<div className='w-2/5 flex flex-row gap-2'>
@@ -230,33 +330,33 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
)}
</div>
</div>
+
<div className='w-full flex flex-row items-center '>
<div className='w-2/5'>
<label className='form-label text-nowrap'>
- NPWP Perusahaan
+ SIUP <span className=' opacity-60'>(Opsional)</span>
</label>
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
- {formDokumen?.dokumenNpwp?.name}
+ <span className='w-3/5 text-gray-600 truncate max-w-48'>
+ {formDokumen?.dokumenSiup?.name}
</span>
<div className='w-2/5 flex flex-row gap-2'>
<label
- htmlFor='dokumenNpwp'
+ htmlFor='dokumenSiup'
className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
>
- {formDokumen?.dokumenNpwp?.name ? 'Ubah' : 'Upload'}
+ {formDokumen.dokumenSiup.name ? 'Ubah' : 'Upload'}
</label>
<input
// value={formDokumen?.dokumenNib?.name}
- id='dokumenNpwp'
- name='dokumenNpwp'
+ id='dokumenSiup'
+ name='dokumenSiup'
type='file'
title=' '
- ref={dokumenNpwpRef}
className='hidden'
- aria-invalid={errorsDokumen.dokumenNpwp}
+ aria-invalid={errorsDokumen.dokumenSiup}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
@@ -265,8 +365,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
type='button'
onClick={() =>
handleConfirmSubmit(
- formDokumen.dokumenNpwp.format,
- formDokumen.dokumenNpwp.base64
+ formDokumen.dokumenSiup.format,
+ formDokumen.dokumenSiup.base64
)
}
>
@@ -276,38 +376,38 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenNpwp}
+ {errorsDokumen.dokumenSiup}
</div>
)}
</div>
</div>
+
<div className='w-full flex flex-row items-center '>
<div className='w-2/5'>
- <label className='form-label text-nowrap'>SPPKP</label>
+ <label className='form-label text-nowrap'>
+ TDP <span className=' opacity-60'>(Opsional)</span>
+ </label>
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
- {formDokumen?.dokumenSppkp?.name}
+ <span className='w-3/5 text-gray-600 truncate max-w-48'>
+ {formDokumen?.dokumenTdp?.name}
</span>
<div className='w-2/5 flex flex-row gap-2'>
<label
- htmlFor='dokumenSppkp'
+ htmlFor='dokumenTdp'
className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
>
- {formDokumen?.dokumenSppkp?.name.length > 0
- ? 'Ubah'
- : 'Upload'}
+ {formDokumen.dokumenTdp.name ? 'Ubah' : 'Upload'}
</label>
<input
// value={formDokumen?.dokumenNib?.name}
- id='dokumenSppkp'
- name='dokumenSppkp'
+ id='dokumenTdp'
+ name='dokumenTdp'
type='file'
title=' '
- ref={dokumenSppkpRef}
className='hidden'
- aria-invalid={errorsDokumen.dokumenSppkp}
+ aria-invalid={errorsDokumen.dokumenTdp}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
@@ -316,8 +416,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
type='button'
onClick={() =>
handleConfirmSubmit(
- formDokumen.dokumenSppkp.format,
- formDokumen.dokumenSppkp.base64
+ formDokumen.dokumenTdp.format,
+ formDokumen.dokumenTdp.base64
)
}
>
@@ -327,7 +427,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenSppkp}
+ {errorsDokumen.dokumenTdp}
</div>
)}
</div>
@@ -336,33 +436,29 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<div className='w-full flex flex-row items-center '>
<div className='w-2/5'>
<label className='form-label text-nowrap'>
- {' '}
- Akta Perubahan <span className=' opacity-60'>(Opsional)</span>
+ SKDP <span className=' opacity-60'>(Opsional)</span>
</label>
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
- {formDokumen?.dokumenAktaPerubahan?.name}
+ <span className='w-3/5 text-gray-600 truncate max-w-48'>
+ {formDokumen?.dokumenSkdp?.name}
</span>
<div className='w-2/5 flex flex-row gap-2'>
<label
- htmlFor='dokumenAktaPerubahan'
+ htmlFor='dokumenSkdp'
className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
>
- {formDokumen.dokumenAktaPerubahan.name
- ? 'Ubah'
- : 'Upload'}
+ {formDokumen.dokumenSkdp.name ? 'Ubah' : 'Upload'}
</label>
<input
// value={formDokumen?.dokumenNib?.name}
- id='dokumenAktaPerubahan'
- name='dokumendokumenAktaPerubahanSppkp'
+ id='dokumenSkdp'
+ name='dokumenSkdp'
type='file'
title=' '
- ref={dokumenAktaPerubahanRef}
className='hidden'
- aria-invalid={errorsDokumen.dokumenAktaPerubahan}
+ aria-invalid={errorsDokumen.dokumenSkdp}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
@@ -371,8 +467,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
type='button'
onClick={() =>
handleConfirmSubmit(
- formDokumen.dokumenAktaPerubahan.format,
- formDokumen.dokumenAktaPerubahan.base64
+ formDokumen.dokumenSkdp.format,
+ formDokumen.dokumenSkdp.base64
)
}
>
@@ -382,7 +478,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenAktaPerubahan}
+ {errorsDokumen.dokumenSkdp}
</div>
)}
</div>
@@ -391,31 +487,29 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<div className='w-full flex flex-row items-center '>
<div className='w-2/5'>
<label className='form-label text-nowrap'>
- KTP Dirut/Direktur{' '}
- <span className=' opacity-60'>(Opsional)</span>
+ SKT <span className=' opacity-60'>(Opsional)</span>
</label>
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
- {formDokumen?.dokumenKtpDirut?.name}
+ <span className='w-3/5 text-gray-600 truncate max-w-48'>
+ {formDokumen?.dokumenSkt?.name}
</span>
<div className='w-2/5 flex flex-row gap-2'>
<label
- htmlFor='dokumenKtpDirut'
+ htmlFor='dokumenSkt'
className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
>
- {formDokumen?.dokumenKtpDirut?.name ? 'Ubah' : 'Upload'}
+ {formDokumen.dokumenSkt.name ? 'Ubah' : 'Upload'}
</label>
<input
// value={formDokumen?.dokumenNib?.name}
- id='dokumenKtpDirut'
- name='dokumenKtpDirut'
+ id='dokumenSkt'
+ name='dokumenSkt'
type='file'
title=' '
- ref={dokumenKtpDirutRef}
className='hidden'
- aria-invalid={errorsDokumen.dokumenKtpDirut}
+ aria-invalid={errorsDokumen.dokumenSkt}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
@@ -424,8 +518,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
type='button'
onClick={() =>
handleConfirmSubmit(
- formDokumen.dokumenKtpDirut.format,
- formDokumen.dokumenKtpDirut.base64
+ formDokumen.dokumenSkt.format,
+ formDokumen.dokumenSkt.base64
)
}
>
@@ -435,7 +529,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenKtpDirut}
+ {errorsDokumen.dokumenSkt}
</div>
)}
</div>
@@ -449,7 +543,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
+ <span className='w-3/5 text-gray-600 truncate max-w-48'>
{formDokumen?.dokumenAktaPendirian?.name}
</span>
<div className='w-2/5 flex flex-row gap-2'>
@@ -498,33 +592,33 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<div className='w-full flex flex-row items-center '>
<div className='w-2/5'>
<label className='form-label text-nowrap'>
- Laporan Keuangan
- <span className=' opacity-60'>(Opsional)</span>
+ {' '}
+ Akta Perubahan <span className=' opacity-60'>(Opsional)</span>
</label>
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
- {formDokumen?.dokumenLaporanKeuangan?.name}
+ <span className='w-3/5 text-gray-600 truncate max-w-48'>
+ {formDokumen?.dokumenAktaPerubahan?.name}
</span>
<div className='w-2/5 flex flex-row gap-2'>
<label
- htmlFor='dokumenLaporanKeuangan'
+ htmlFor='dokumenAktaPerubahan'
className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
>
- {formDokumen?.dokumenLaporanKeuangan?.name
+ {formDokumen.dokumenAktaPerubahan.name
? 'Ubah'
: 'Upload'}
</label>
<input
// value={formDokumen?.dokumenNib?.name}
- id='dokumenLaporanKeuangan'
- name='dokumenLaporanKeuangan'
+ id='dokumenAktaPerubahan'
+ name='dokumenAktaPerubahan'
type='file'
title=' '
- ref={dokumenLaporanKeuanganRef}
+ ref={dokumenAktaPerubahanRef}
className='hidden'
- aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
+ aria-invalid={errorsDokumen.dokumenAktaPerubahan}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
@@ -533,8 +627,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
type='button'
onClick={() =>
handleConfirmSubmit(
- formDokumen.dokumenLaporanKeuangan.format,
- formDokumen.dokumenLaporanKeuangan.base64
+ formDokumen.dokumenAktaPerubahan.format,
+ formDokumen.dokumenAktaPerubahan.base64
)
}
>
@@ -544,7 +638,61 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenLaporanKeuangan}
+ {errorsDokumen.dokumenAktaPerubahan}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div className='w-full flex flex-row items-center '>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Foto tempat kerja
+ </label>
+ </div>
+ <div className='w-3/5'>
+ <div className='flex flex-row items-start justify-between'>
+ <span className='w-3/5 text-gray-600 truncate max-w-48'>
+ {formDokumen?.dokumenTempatBekerja?.name}
+ </span>
+ <div className='w-2/5 flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenTempatBekerja'
+ className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+ >
+ {formDokumen?.dokumenTempatBekerja?.name
+ ? 'Ubah'
+ : 'Upload'}
+ </label>
+ <input
+ // value={formDokumen?.dokumenNib?.name}
+ id='dokumenTempatBekerja'
+ name='dokumenTempatBekerja'
+ type='file'
+ title=' '
+ ref={dokumenTempatBekerjaRef}
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenTempatBekerja}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <button
+ className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+ type='button'
+ onClick={() =>
+ handleConfirmSubmit(
+ formDokumen.dokumenTempatBekerja.format,
+ formDokumen.dokumenTempatBekerja.base64
+ )
+ }
+ >
+ <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+ </button>
+ </div>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenTempatBekerja}
</div>
)}
</div>
@@ -558,7 +706,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
+ <span className='w-3/5 text-gray-600 truncate max-w-48'>
{formDokumen?.dokumenFotoKantor?.name}
</span>
<div className='w-2/5 flex flex-row gap-2'>
@@ -605,32 +753,31 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<div className='w-full flex flex-row items-center '>
<div className='w-2/5'>
<label className='form-label text-nowrap'>
- Foto tempat kerja
+ KTP Dirut/Direktur{' '}
+ <span className=' opacity-60'>(Opsional)</span>
</label>
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
- {formDokumen?.dokumenTempatBekerja?.name}
+ <span className='w-3/5 text-gray-600 truncate max-w-48'>
+ {formDokumen?.dokumenKtpDirut?.name}
</span>
<div className='w-2/5 flex flex-row gap-2'>
<label
- htmlFor='dokumenTempatBekerja'
+ htmlFor='dokumenKtpDirut'
className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
>
- {formDokumen?.dokumenTempatBekerja?.name
- ? 'Ubah'
- : 'Upload'}
+ {formDokumen?.dokumenKtpDirut?.name ? 'Ubah' : 'Upload'}
</label>
<input
// value={formDokumen?.dokumenNib?.name}
- id='dokumenTempatBekerja'
- name='dokumenTempatBekerja'
+ id='dokumenKtpDirut'
+ name='dokumenKtpDirut'
type='file'
title=' '
- ref={dokumenTempatBekerjaRef}
+ ref={dokumenKtpDirutRef}
className='hidden'
- aria-invalid={errorsDokumen.dokumenTempatBekerja}
+ aria-invalid={errorsDokumen.dokumenKtpDirut}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
@@ -639,66 +786,53 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
type='button'
onClick={() =>
handleConfirmSubmit(
- formDokumen.dokumenTempatBekerja.format,
- formDokumen.dokumenTempatBekerja.base64
+ formDokumen.dokumenKtpDirut.format,
+ formDokumen.dokumenKtpDirut.base64
)
}
>
<EyeIcon className={`w-4 ${isDesktop && ''}`} />
</button>
</div>
- {/* <Image
- src={`data:image/png;base64, ${formDokumen.dokumenNib.base64}`}
- alt='Contoh SPPKP'
- className='w-full h-full '
- width={800}
- height={800}
- quality={85}
- /> */}
</div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenTempatBekerja}
+ {errorsDokumen.dokumenKtpDirut}
</div>
)}
</div>
</div>
- </form>
- </div>
- )}
- {isMobile && (
- <div>
- <h1 className={`font-bold ${isKonfirmasi ? 'hidden' : 'text-xl'}`}>
- Dokumen
- </h1>
- <form className='flex flex-col w-full gap-5 text-sm'>
+
<div className='w-full flex flex-row items-center '>
<div className='w-2/5'>
- <label className='form-label text-wrap'>
- NIB (SIUP/TDP/SKDP)
+ <label className='form-label text-nowrap'>
+ Laporan Keuangan
+ <span className=' opacity-60'>(Opsional)</span>
</label>
</div>
<div className='w-3/5'>
- <div className='flex flex-row items-center justify-start'>
- <span className='w-3/5 text-gray-600 truncate'>
- {formDokumen?.dokumenNib?.name}
+ <div className='flex flex-row items-start justify-between'>
+ <span className='w-3/5 text-gray-600 truncate max-w-48'>
+ {formDokumen?.dokumenLaporanKeuangan?.name}
</span>
<div className='w-2/5 flex flex-row gap-2'>
<label
- htmlFor='dokumenNib'
+ htmlFor='dokumenLaporanKeuangan'
className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
>
- {formDokumen?.dokumenNib?.name ? 'Ubah' : 'Upload'}
+ {formDokumen?.dokumenLaporanKeuangan?.name
+ ? 'Ubah'
+ : 'Upload'}
</label>
<input
// value={formDokumen?.dokumenNib?.name}
- id='dokumenNib'
- name='dokumenNib'
+ id='dokumenLaporanKeuangan'
+ name='dokumenLaporanKeuangan'
type='file'
title=' '
- ref={dokumenNibRef}
+ ref={dokumenLaporanKeuanganRef}
className='hidden'
- aria-invalid={errorsDokumen.dokumenNib}
+ aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
onChange={handleInputChange}
accept='.pdf,.png,.jpg,.jpeg'
/>
@@ -707,8 +841,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
type='button'
onClick={() =>
handleConfirmSubmit(
- formDokumen.dokumenNib.format,
- formDokumen.dokumenNib.base64
+ formDokumen.dokumenLaporanKeuangan.format,
+ formDokumen.dokumenLaporanKeuangan.base64
)
}
>
@@ -718,21 +852,30 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsDokumen.dokumenNib}
+ {errorsDokumen.dokumenLaporanKeuangan}
</div>
)}
</div>
</div>
+ </form>
+ </div>
+ )}
+ {isMobile && (
+ <div className=''>
+ <h1 className={`font-bold ${isKonfirmasi ? 'hidden' : 'text-xl'}`}>
+ Dokumen
+ </h1>
+ <form className='flex flex-col w-full gap-5 text-sm'>
<div className='w-full flex flex-row items-center '>
<div className='w-2/5'>
<label className='form-label text-wrap'>NPWP Perusahaan</label>
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
+ <span className='w-2/5 text-gray-600 truncate '>
{formDokumen?.dokumenNpwp?.name}
</span>
- <div className='w-2/5 flex flex-row gap-2'>
+ <div className='w-3/5 flex flex-row gap-2'>
<label
htmlFor='dokumenNpwp'
className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
@@ -778,10 +921,10 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
+ <span className='w-2/5 text-gray-600 truncate '>
{formDokumen?.dokumenSppkp?.name}
</span>
- <div className='w-2/5 flex flex-row gap-2'>
+ <div className='w-3/5 flex flex-row gap-2'>
<label
htmlFor='dokumenSppkp'
className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
@@ -824,6 +967,262 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<div className='w-full flex flex-row items-center '>
<div className='w-2/5'>
+ <label className='form-label text-wrap'>NIB</label>
+ </div>
+ <div className='w-3/5'>
+ <div className='flex flex-row items-center justify-start'>
+ <span className='w-2/5 text-gray-600 truncate '>
+ {formDokumen?.dokumenNib?.name}
+ </span>
+ <div className='w-3/5 flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenNib'
+ className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+ >
+ {formDokumen?.dokumenNib?.name ? 'Ubah' : 'Upload'}
+ </label>
+ <input
+ // value={formDokumen?.dokumenNib?.name}
+ id='dokumenNib'
+ name='dokumenNib'
+ type='file'
+ title=' '
+ ref={dokumenNibRef}
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenNib}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <button
+ className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+ type='button'
+ onClick={() =>
+ handleConfirmSubmit(
+ formDokumen.dokumenNib.format,
+ formDokumen.dokumenNib.base64
+ )
+ }
+ >
+ <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+ </button>
+ </div>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenNib}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div className='w-full flex flex-row items-center '>
+ <div className='w-2/5'>
+ <label className='form-label text-wrap'>
+ SIUP <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ </div>
+ <div className='w-3/5'>
+ <div className='flex flex-row items-start justify-between'>
+ <span className='w-2/5 text-gray-600 truncate '>
+ {formDokumen?.dokumenSiup?.name}
+ </span>
+ <div className='w-3/5 flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenSiup'
+ className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+ >
+ {formDokumen?.dokumenSiup?.name ? 'Ubah' : 'Upload'}
+ </label>
+ <input
+ // value={formDokumen?.dokumenNib?.name}
+ id='dokumenSiup'
+ name='dokumenSiup'
+ type='file'
+ title=' '
+ ref={dokumenAktaPerubahanRef}
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenSiup}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <button
+ className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+ type='button'
+ onClick={() =>
+ handleConfirmSubmit(
+ formDokumen.dokumenSiup.format,
+ formDokumen.dokumenSiup.base64
+ )
+ }
+ >
+ <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+ </button>
+ </div>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenSiup}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div className='w-full flex flex-row items-center '>
+ <div className='w-2/5'>
+ <label className='form-label text-wrap'>
+ TDP <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ </div>
+ <div className='w-3/5'>
+ <div className='flex flex-row items-start justify-between'>
+ <span className='w-2/5 text-gray-600 truncate '>
+ {formDokumen?.dokumenTdp?.name}
+ </span>
+ <div className='w-3/5 flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenTdp'
+ className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+ >
+ {formDokumen?.dokumenTdp?.name ? 'Ubah' : 'Upload'}
+ </label>
+ <input
+ // value={formDokumen?.dokumenNib?.name}
+ id='dokumenTdp'
+ name='dokumenTdp'
+ type='file'
+ title=' '
+ ref={dokumenAktaPerubahanRef}
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenTdp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <button
+ className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+ type='button'
+ onClick={() =>
+ handleConfirmSubmit(
+ formDokumen.dokumenTdp.format,
+ formDokumen.dokumenTdp.base64
+ )
+ }
+ >
+ <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+ </button>
+ </div>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenTdp}
+ </div>
+ )}
+ </div>
+ </div>
+ <div className='w-full flex flex-row items-center '>
+ <div className='w-2/5'>
+ <label className='form-label text-wrap'>
+ SKDP <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ </div>
+ <div className='w-3/5'>
+ <div className='flex flex-row items-start justify-between'>
+ <span className='w-2/5 text-gray-600 truncate '>
+ {formDokumen?.dokumenSkdp?.name}
+ </span>
+ <div className='w-3/5 flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenSkdp'
+ className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+ >
+ {formDokumen?.dokumenSkdp?.name ? 'Ubah' : 'Upload'}
+ </label>
+ <input
+ // value={formDokumen?.dokumenNib?.name}
+ id='dokumenSkdp'
+ name='dokumenSkdp'
+ type='file'
+ title=' '
+ ref={dokumenAktaPerubahanRef}
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenSkdp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <button
+ className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+ type='button'
+ onClick={() =>
+ handleConfirmSubmit(
+ formDokumen.dokumenSkdp.format,
+ formDokumen.dokumenSkdp.base64
+ )
+ }
+ >
+ <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+ </button>
+ </div>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenSkdp}
+ </div>
+ )}
+ </div>
+ </div>
+ <div className='w-full flex flex-row items-center '>
+ <div className='w-2/5'>
+ <label className='form-label text-wrap'>
+ SKT <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ </div>
+ <div className='w-3/5'>
+ <div className='flex flex-row items-start justify-between'>
+ <span className='w-2/5 text-gray-600 truncate '>
+ {formDokumen?.dokumenSkt?.name}
+ </span>
+ <div className='w-3/5 flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenSkt'
+ className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+ >
+ {formDokumen?.dokumenSkt?.name ? 'Ubah' : 'Upload'}
+ </label>
+ <input
+ // value={formDokumen?.dokumenNib?.name}
+ id='dokumenSkt'
+ name='dokumenSkt'
+ type='file'
+ title=' '
+ ref={dokumenAktaPerubahanRef}
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenSkt}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <button
+ className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+ type='button'
+ onClick={() =>
+ handleConfirmSubmit(
+ formDokumen.dokumenSkt.format,
+ formDokumen.dokumenSkt.base64
+ )
+ }
+ >
+ <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+ </button>
+ </div>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenSkt}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div className='w-full flex flex-row items-center '>
+ <div className='w-2/5'>
<label className='form-label text-wrap'>
{' '}
Akta Perubahan <span className=' opacity-60'>(Opsional)</span>
@@ -831,10 +1230,10 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
+ <span className='w-2/5 text-gray-600 truncate '>
{formDokumen?.dokumenAktaPerubahan?.name}
</span>
- <div className='w-2/5 flex flex-row gap-2'>
+ <div className='w-3/5 flex flex-row gap-2'>
<label
htmlFor='dokumenAktaPerubahan'
className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
@@ -846,7 +1245,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<input
// value={formDokumen?.dokumenNib?.name}
id='dokumenAktaPerubahan'
- name='dokumendokumenAktaPerubahanSppkp'
+ name='dokumenAktaPerubahan'
type='file'
title=' '
ref={dokumenAktaPerubahanRef}
@@ -886,10 +1285,10 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
+ <span className='w-2/5 text-gray-600 truncate '>
{formDokumen?.dokumenKtpDirut?.name}
</span>
- <div className='w-2/5 flex flex-row gap-2'>
+ <div className='w-3/5 flex flex-row gap-2'>
<label
htmlFor='dokumenKtpDirut'
className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
@@ -938,10 +1337,10 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
+ <span className='w-2/5 text-gray-600 truncate '>
{formDokumen?.dokumenAktaPendirian?.name}
</span>
- <div className='w-2/5 flex flex-row gap-2'>
+ <div className='w-3/5 flex flex-row gap-2'>
<label
htmlFor='dokumenAktaPendirian'
className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
@@ -993,10 +1392,10 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
+ <span className='w-2/5 text-gray-600 truncate '>
{formDokumen?.dokumenLaporanKeuangan?.name}
</span>
- <div className='w-2/5 flex flex-row gap-2'>
+ <div className='w-3/5 flex flex-row gap-2'>
<label
htmlFor='dokumenLaporanKeuangan'
className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
@@ -1047,10 +1446,10 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
+ <span className='w-2/5 text-gray-600 truncate '>
{formDokumen?.dokumenFotoKantor?.name}
</span>
- <div className='w-2/5 flex flex-row gap-2'>
+ <div className='w-3/5 flex flex-row gap-2'>
<label
htmlFor='dokumenFotoKantor'
className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
@@ -1099,10 +1498,10 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
<div className='w-3/5'>
<div className='flex flex-row items-start justify-between'>
- <span className='w-3/5 text-gray-600 truncate'>
+ <span className='w-2/5 text-gray-600 truncate'>
{formDokumen?.dokumenTempatBekerja?.name}
</span>
- <div className='w-2/5 flex flex-row gap-2'>
+ <div className='w-3/5 flex flex-row gap-2'>
<label
htmlFor='dokumenTempatBekerja'
className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20'
@@ -1184,46 +1583,23 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
close={() => setIsExample(false)}
>
<div className='flex justify-center items-center p-2'>
- {!format.includes('undifined') ? (
- <object
- data={`data:${format};base64,${base64}`}
- type={format}
- width='100%'
- height='100%'
- onError={(e) => {
- // Jika <object> gagal menampilkan PDF, unduh otomatis
- const link = document.createElement('a');
- link.href = `data:${format};base64,${base64}`;
- link.download = 'document.pdf';
- link.click();
- }}
- >
- PDF tidak dapat ditampilkan.
- <a
- href={`data:${format};base64,${base64}`}
- download='document.pdf'
- >
- {' '}
- Klik <span className='text-red-500'>di sini</span> untuk
- mengunduh PDF
- </a>
- </object>
- ) : (
- <embed
- src={
- '/web/image/2540181?unique=7050288dd34d7318bf059e7f362540f6ad5533f9'
- }
- width='100%'
- height='600px'
- />
- )}
- {/* <embed
- src={
- '/web/image/2540181?unique=7050288dd34d7318bf059e7f362540f6ad5533f9'
- }
+ {/* <iframe
+ src={`${
+ format == null ? url : `data:${format};base64,${base64}`
+ }`}
+ // src={`http://192.168.23.244:8069` + `${format}`}
+ // src={format}
+ width='800px'
+ height='600px'
+ title='Document'
+ ></iframe> */}
+ <embed
+ src={`${
+ format == null ? url : `data:${format};base64,${base64}`
+ }`}
width='100%'
height='600px'
- /> */}
+ />
</div>
</BottomPopup>
)}
@@ -1242,7 +1618,7 @@ export default KonfirmasiDokumen;
title='NPWP File'
frameBorder='0'
sandbox
-></iframe> */
+ ></iframe> */
}
{
/* <Image
@@ -1252,5 +1628,48 @@ export default KonfirmasiDokumen;
width={1200}
height={1200}
quality={85}
-/> */
+ /> */
}
+
+// <div className='flex justify-center items-center p-2'>
+// {!format.includes('undifined') ? (
+// <object
+// data={`data:${format};base64,${base64}`}
+// type={format}
+// width='100%'
+// height='100%'
+// onError={(e) => {
+// // Jika <object> gagal menampilkan PDF, unduh otomatis
+// const link = document.createElement('a');
+// link.href = `data:${format};base64,${base64}`;
+// link.download = 'document.pdf';
+// link.click();
+// }}
+// >
+// PDF tidak dapat ditampilkan.
+// <a
+// href={`data:${format};base64,${base64}`}
+// download='document.pdf'
+// >
+// {' '}
+// Klik <span className='text-red-500'>di sini</span> untuk
+// mengunduh PDF
+// </a>
+// </object>
+// ) : (
+// <embed
+// src={
+// '/web/image/2540181?unique=7050288dd34d7318bf059e7f362540f6ad5533f9'
+// }
+// width='100%'
+// height='600px'
+// />
+// )}
+// {/* <embed
+// src={
+// '/web/image/2540181?unique=7050288dd34d7318bf059e7f362540f6ad5533f9'
+// }
+// width='100%'
+// height='600px'
+// /> */}
+// </div>
diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
index 77bf4316..1ea2223e 100644
--- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
@@ -139,7 +139,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<div className='flex flex-row justify-between items-start'>
<div className='w-2/5'>
- <label className='form-label text-nowrap'>
+ <label className='form-label text-wrap'>
No. HP Direktur{' '}
<span className=' opacity-60'>(Opsional)</span>
</label>
diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
index aff49373..b4f4ac9b 100644
--- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
+++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
@@ -178,7 +178,6 @@ const PengajuanTempo = () => {
`/api/v1/partner/detail-tempo/${auth.parentId}`
);
const transformedData = transformKeysToCamelCase(dataPaymentTerm);
-
setBigData(transformedData);
} catch (error) {
console.error('Error loading dataPaymentTerm:', error);
@@ -419,6 +418,7 @@ const PengajuanTempo = () => {
setIsLoading(true);
try {
let address4;
+ let address3;
const address = await createPengajuanTempoApi({
id: 0,
partner_id: auth.partnerId,
@@ -435,7 +435,7 @@ const PengajuanTempo = () => {
...formKontakPerson,
});
if (address2.id) {
- const address3 = await createPengajuanTempoApi({
+ address3 = await createPengajuanTempoApi({
id: address2.id,
partner_id: auth.partnerId,
user_id: address2.userId,
@@ -451,16 +451,20 @@ const PengajuanTempo = () => {
tempo_request: true,
formDocs: JSON.stringify(formattedDokumen),
});
+ } else {
+ address4 = await createPengajuanTempoApi({
+ id: address3.id,
+ partner_id: auth.partnerId,
+ user_id: address3.userId,
+ tempo_request: true,
+ });
}
}
}
- toast.dismiss(toastId);
- setIsLoading(false);
- toast.success('Pengajuan tempo berhasil dilakukan');
if (address4?.id) {
+ toast.success('Pengajuan tempo berhasil dilakukan');
const toastId = toast.loading('Mengubah status akun...');
- setIsLoading(true);
const isUpdated = await editAuthTempo();
if (isUpdated?.user) {
const update = await setAuth(isUpdated.user);
@@ -479,6 +483,11 @@ const PengajuanTempo = () => {
removeFromLocalStorage();
return;
}
+ } else {
+ toast.dismiss(toastId);
+ setIsLoading(false);
+
+ toast.error('Terjadi kesalahan dalam pengiriman formulir');
}
} catch (error) {
toast.dismiss(toastId);
@@ -518,7 +527,7 @@ const PengajuanTempo = () => {
return (
<>
<div className='container flex flex-col items-center '>
- <h1 className='text-h-sm md:text-title-sm font-semibold text-center mb-6'>
+ <h1 className=' font-semibold text-center mb-6'>
Form Pengajuan Tempo
</h1>
<p className='text-center mb-4'>
diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
index 000f209c..cfc8aeb5 100644
--- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx
+++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
@@ -4,6 +4,8 @@ import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
import odooApi from '~/libs/odooApi';
import stateApi from '@/lib/address/api/stateApi.js';
import cityApi from '@/lib/address/api/cityApi';
+import districtApi from '@/lib/address/api/districtApi';
+import subDistrictApi from '@/lib/address/api/subDistrictApi';
import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
import {
usePengajuanTempoStorePengiriman,
@@ -20,10 +22,16 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
validatePengiriman,
updateFormPengiriman,
} = usePengajuanTempoStorePengiriman();
- const { form, errors, validate, updateForm } = usePengajuanTempoStore();
+ const { form } = usePengajuanTempoStore();
const [states, setState] = useState([]);
const [cities, setCities] = useState([]);
+ const [districts, setDistricts] = useState([]);
+ const [subDistricts, setSubDistricts] = useState([]);
+ const [zips, setZips] = useState([]);
const [citiesInvoice, setCitiesInvoice] = useState([]);
+ const [districtsInvoice, setDistrictsInvoice] = useState([]);
+ const [subDistrictsInvoice, setSubDistrictsInvoice] = useState([]);
+ const [zipsInvoice, setZipsInvoice] = useState([]);
const [sameAddress, setSameAddress] = useState(false);
const [sameAddressStreet, setSameAddressStreet] = useState(false);
const [everyWeekday, setEveryWeekday] = useState(false);
@@ -104,6 +112,10 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
const watchState = watch('statePengiriman');
useEffect(() => {
// updateFormPengiriman('cityPengiriman', '');
+ // setValue('cityPengiriman', '');
+ // setValue('districtPengiriman', '');
+ // setValue('subDistrictPengiriman', '');
+ // setValue('zipPengiriman', '');
if (watchState) {
updateFormPengiriman('statePengiriman', `${watchState}`);
validatePengiriman();
@@ -120,16 +132,86 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
}, [watchState]);
const watchCity = watch('cityPengiriman');
+
useEffect(() => {
if (watchCity) {
updateFormPengiriman('cityPengiriman', `${watchCity}`);
validatePengiriman();
+ const loadDistricts = async () => {
+ let dataDistricts = await districtApi({ cityId: watchCity });
+ dataDistricts = dataDistricts.map((district) => ({
+ value: district.id,
+ label: district.name,
+ }));
+ setDistricts(dataDistricts);
+ };
+ loadDistricts();
+ }
+ }, [watchCity, setValue]);
+
+ const watchDistrict = watch('districtPengiriman');
+ useEffect(() => {
+ // setValue('subDistrictPengiriman', '');
+ if (watchDistrict) {
+ updateFormPengiriman('districtPengiriman', `${watchDistrict}`);
+ validatePengiriman();
+ const loadSubDistricts = async () => {
+ let dataSubDistricts = await subDistrictApi({
+ districtId: watchDistrict,
+ });
+ dataSubDistricts = dataSubDistricts.map((district) => ({
+ value: district.id,
+ label: district.name,
+ }));
+ setSubDistricts(dataSubDistricts);
+ };
+ loadSubDistricts();
+ }
+ }, [watchDistrict, setValue]);
+
+ const watchsubDistrict = watch('subDistrictPengiriman');
+
+ useEffect(() => {
+ let kelurahan = '';
+
+ if (watchsubDistrict) {
+ updateFormPengiriman('subDistrictPengiriman', `${watchsubDistrict}`);
+ validatePengiriman();
+ for (const data in subDistricts) {
+ if (subDistricts[data].value == watchsubDistrict) {
+ kelurahan = subDistricts[data].label.toLowerCase();
+ }
+ }
+ const loadZip = async () => {
+ const response = await fetch(
+ `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}`
+ );
+
+ const result = await response.json();
+ const dataZips = result.result.map((zip) => ({
+ value: parseInt(zip.kodepos),
+ label: zip.kodepos,
+ }));
+ setZips(dataZips);
+ };
+ loadZip();
}
- }, [watchCity]);
+ }, [watchsubDistrict, setValue, subDistricts]);
+
+ const watchZip = watch('zipPengiriman');
+ useEffect(() => {
+ if (watchZip) {
+ updateFormPengiriman('zipPengiriman', `${watchZip}`);
+ validatePengiriman();
+ }
+ }, [watchZip, setValue]);
const watchStateInvoice = watch('stateInvoice');
useEffect(() => {
- // updateFormPengiriman('cityPengiriman', '');
+ // setValue('cityInvoice', '');
+ // setValue('districtInvoice', '');
+ // setValue('subDistrictInvoice', '');
+ // setValue('zipInvoice', '');
if (watchStateInvoice) {
updateFormPengiriman('stateInvoice', `${watchStateInvoice}`);
validatePengiriman();
@@ -150,9 +232,75 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
if (watchCityInvoice) {
updateFormPengiriman('cityInvoice', `${watchCityInvoice}`);
validatePengiriman();
+ const loadDistricts = async () => {
+ let dataDistricts = await districtApi({ cityId: watchCityInvoice });
+ dataDistricts = dataDistricts.map((district) => ({
+ value: district.id,
+ label: district.name,
+ }));
+ setDistrictsInvoice(dataDistricts);
+ };
+ loadDistricts();
}
}, [watchCityInvoice]);
+ const watchDistrictInvoice = watch('districtInvoice');
+ useEffect(() => {
+ // setValue('subDistrictInvoice', '');
+ if (watchDistrictInvoice) {
+ updateFormPengiriman('districtInvoice', `${watchDistrictInvoice}`);
+ validatePengiriman();
+ const loadSubDistricts = async () => {
+ let dataSubDistricts = await subDistrictApi({
+ districtId: watchDistrictInvoice,
+ });
+ dataSubDistricts = dataSubDistricts.map((district) => ({
+ value: district.id,
+ label: district.name,
+ }));
+ setSubDistrictsInvoice(dataSubDistricts);
+ };
+ loadSubDistricts();
+ }
+ }, [watchDistrictInvoice, setValue]);
+
+ const watchsubDistrictInvoice = watch('subDistrictInvoice');
+
+ useEffect(() => {
+ let kelurahan = '';
+
+ if (watchsubDistrictInvoice) {
+ updateFormPengiriman('subDistrictInvoice', `${watchsubDistrictInvoice}`);
+ validatePengiriman();
+ for (const data in subDistrictsInvoice) {
+ if (subDistrictsInvoice[data].value == watchsubDistrictInvoice) {
+ kelurahan = subDistrictsInvoice[data].label.toLowerCase();
+ }
+ }
+ const loadZip = async () => {
+ const response = await fetch(
+ `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}`
+ );
+
+ const result = await response.json();
+ const dataZips = result.result.map((zip) => ({
+ value: parseInt(zip.kodepos),
+ label: zip.kodepos,
+ }));
+ setZipsInvoice(dataZips);
+ };
+ loadZip();
+ }
+ }, [watchsubDistrictInvoice, setValue, subDistrictsInvoice]);
+
+ const watchZipInvoice = watch('zipInvoice');
+ useEffect(() => {
+ if (watchZipInvoice) {
+ updateFormPengiriman('zipInvoice', `${watchZipInvoice}`);
+ validatePengiriman();
+ }
+ }, [watchZipInvoice, setValue]);
+
const handleInputChange = (event) => {
const { name, value } = event.target;
updateFormPengiriman(name, value);
@@ -208,11 +356,16 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
const streetPengirimanRef = useRef(null);
const statePengirimanRef = useRef(null);
const cityPengirimanRef = useRef(null);
+ const districtPengirimanRef = useRef(null);
+ const subDistrictPengirimanRef = useRef(null);
const zipRef = useRef(null);
const invoicePicRef = useRef(null);
const streetInvoiceRef = useRef(null);
const stateInvoiceRef = useRef(null);
const cityInvoiceRef = useRef(null);
+ const districtInvoiceRef = useRef(null);
+ const subDistrictInvoiceRef = useRef(null);
+ const zipInvoiceRef = useRef(null);
const everyWeekdayInputRef = useRef(null);
const everyWeekInputRef = useRef(null);
const dokumenPengirimanRef = useRef(null);
@@ -243,6 +396,20 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
cityPengirimanRef.current.scrollIntoView(options);
return;
}
+ if (
+ errorsPengiriman.districtsPengiriman &&
+ districtPengirimanRef.current
+ ) {
+ districtPengirimanRef.current.scrollIntoView(options);
+ return;
+ }
+ if (
+ errorsPengiriman.subDistrictsPengiriman &&
+ subDistrictPengirimanRef.current
+ ) {
+ subDistrictPengirimanRef.current.scrollIntoView(options);
+ return;
+ }
if (errorsPengiriman.zip && zipRef.current) {
zipRef.current.scrollIntoView(options);
return;
@@ -263,6 +430,21 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
cityInvoiceRef.current.scrollIntoView(options);
return;
}
+ if (errorsPengiriman.districtsInvoice && districtInvoiceRef.current) {
+ districtInvoiceRef.current.scrollIntoView(options);
+ return;
+ }
+ if (
+ errorsPengiriman.subDistrictsInvoice &&
+ subDistrictInvoiceRef.current
+ ) {
+ subDistrictInvoiceRef.current.scrollIntoView(options);
+ return;
+ }
+ if (errorsPengiriman.zipInvoice && zipInvoiceRef.current) {
+ zipInvoiceRef.current.scrollIntoView(options);
+ return;
+ }
if (
errorsPengiriman.everyWeekdayInput &&
everyWeekdayInputRef.current
@@ -312,6 +494,8 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
useEffect(() => {
if (formPengiriman.isSameAddreesStreet == 'true') {
setSameAddressStreet(true);
+ } else {
+ setSameAddressStreet(false);
}
}, [formPengiriman.isSameAddreesStreet]);
useEffect(() => {
@@ -361,14 +545,53 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
// }
// validatePengiriman();
// }, [formPengiriman.isSameAddrees, formPengiriman.isSameAddreesStreet]);
+
+ useEffect(() => {
+ if (sameAddressStreet) {
+ updateFormPengiriman('streetPengiriman', form.street);
+ updateFormPengiriman('statePengiriman', form.state);
+ setValue('statePengiriman', parseInt(form.state));
+ updateFormPengiriman('cityPengiriman', form.city);
+ setValue('cityPengiriman', parseInt(form.city));
+ updateFormPengiriman('districtPengiriman', form.district);
+ setValue('districtPengiriman', parseInt(form.district));
+ updateFormPengiriman('subDistrictPengiriman', form.subDistrict);
+ setValue('subDistrictPengiriman', parseInt(form.subDistrict));
+ updateFormPengiriman('zipPengiriman', form.zip);
+ setValue('zipPengiriman', parseInt(form.zip));
+ }
+ // else {
+ // updateFormPengiriman('streetPengiriman', '');
+ // updateFormPengiriman('statePengiriman', '');
+ // updateFormPengiriman('cityPengiriman', '');
+ // updateFormPengiriman('zipPengiriman', '');
+ // setValue('streetPengiriman', '');
+ // setValue('statePengiriman', '');
+ // setValue('cityPengiriman', '');
+ // }
+ validatePengiriman();
+ }, [
+ sameAddressStreet,
+ form.state,
+ form.city,
+ form.district,
+ form.subDistrict,
+ form.zip,
+ ]);
+
useEffect(() => {
if (sameAddress) {
- updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman);
- updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman);
- setValue('stateInvoice', parseInt(formPengiriman.statePengiriman));
- updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman);
- setValue('cityInvoice', parseInt(formPengiriman.cityPengiriman));
- updateFormPengiriman('isSameAddrees', `${sameAddress}`);
+ updateFormPengiriman('streetInvoice', form.street);
+ updateFormPengiriman('stateInvoice', form.state);
+ setValue('stateInvoice', parseInt(form.state));
+ updateFormPengiriman('cityInvoice', form.city);
+ setValue('cityInvoice', parseInt(form.city));
+ updateFormPengiriman('districtInvoice', form.district);
+ setValue('districtInvoice', parseInt(form.district));
+ updateFormPengiriman('subDistrictInvoice', form.subDistrict);
+ setValue('subDistrictInvoice', parseInt(form.subDistrict));
+ updateFormPengiriman('zipInvoice', form.zip);
+ setValue('zipInvoice', parseInt(form.zip));
} else {
// updateFormPengiriman('streetInvoice', '');
// updateFormPengiriman('stateInvoice', '');
@@ -380,40 +603,44 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
validatePengiriman();
}, [
sameAddress,
- formPengiriman.streetPengiriman,
- formPengiriman.statePengiriman,
- formPengiriman.cityPengiriman,
+ form.street,
+ form.state,
+ form.city,
+ form.district,
+ form.subDistrict,
]);
- useEffect(() => {
- if (sameAddress) {
- updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman);
- updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman);
- setValue('stateInvoice', parseInt(formPengiriman.statePengiriman));
- updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman);
- setValue('cityInvoice', parseInt(formPengiriman.cityPengiriman));
- updateFormPengiriman('isSameAddrees', `${sameAddress}`);
- } else {
- // updateFormPengiriman('stateInvoice', formPengiriman.stateInvoice);
- // setValue('stateInvoice', parseInt(formPengiriman.stateInvoice));
- // updateFormPengiriman('cityInvoice', formPengiriman.cityInvoice);
- // setValue('cityInvoice', parseInt(formPengiriman.cityInvoice));
- }
- validatePengiriman();
- }, [
- sameAddress,
- formPengiriman.streetPengiriman,
- formPengiriman.statePengiriman,
- formPengiriman.cityPengiriman,
- ]);
+ // useEffect(() => {
+ // if (sameAddress) {
+ // updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman);
+ // updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman);
+ // setValue('stateInvoice', parseInt(formPengiriman.statePengiriman));
+ // updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman);
+ // setValue('cityInvoice', parseInt(formPengiriman.cityPengiriman));
+
+ // updateFormPengiriman('isSameAddrees', `${sameAddress}`);
+ // } else {
+ // // updateFormPengiriman('stateInvoice', formPengiriman.stateInvoice);
+ // // setValue('stateInvoice', parseInt(formPengiriman.stateInvoice));
+ // // updateFormPengiriman('cityInvoice', formPengiriman.cityInvoice);
+ // // setValue('cityInvoice', parseInt(formPengiriman.cityInvoice));
+ // }
+ // validatePengiriman();
+ // }, [
+ // sameAddress,
+ // formPengiriman.streetPengiriman,
+ // formPengiriman.statePengiriman,
+ // formPengiriman.cityPengiriman,
+ // ]);
+
+ // useEffect(() => {
+ // if (formPengiriman.sameAddressStreet?.toLowerCase().includes('true')) {
+ // setSameAddressStreet(true);
+ // } else {
+ // setSameAddressStreet(false);
+ // }
+ // }, [formPengiriman.sameAddressStreet]);
- useEffect(() => {
- if (formPengiriman.sameAddressStreet?.toLowerCase().includes('true')) {
- setSameAddressStreet(true);
- } else {
- setSameAddressStreet(false);
- }
- }, [formPengiriman.sameAddressStreet]);
useEffect(() => {
if (formPengiriman.statePengiriman) {
setValue('statePengiriman', parseInt(formPengiriman.statePengiriman));
@@ -425,6 +652,27 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
}
}, [formPengiriman.cityPengiriman]);
useEffect(() => {
+ if (formPengiriman.districtPengiriman) {
+ setValue(
+ 'districtPengiriman',
+ parseInt(formPengiriman.districtPengiriman)
+ );
+ }
+ }, [formPengiriman.districtPengiriman]);
+ useEffect(() => {
+ if (formPengiriman.subDistrictPengiriman) {
+ setValue(
+ 'subDistrictPengiriman',
+ parseInt(formPengiriman.subDistrictPengiriman)
+ );
+ }
+ }, [formPengiriman.subDistrictPengiriman]);
+ useEffect(() => {
+ if (formPengiriman.zipPengiriman) {
+ setValue('zipPengiriman', parseInt(formPengiriman.zipPengiriman));
+ }
+ }, [formPengiriman.zipPengiriman]);
+ useEffect(() => {
if (formPengiriman.stateInvoice) {
setValue('stateInvoice', parseInt(formPengiriman.stateInvoice));
}
@@ -434,28 +682,24 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
setValue('cityInvoice', parseInt(formPengiriman.cityInvoice));
}
}, [formPengiriman.cityInvoice]);
-
useEffect(() => {
- if (sameAddressStreet) {
- updateFormPengiriman('streetPengiriman', form.street);
- updateFormPengiriman('statePengiriman', form.state);
- setValue('statePengiriman', parseInt(form.state));
- updateFormPengiriman('cityPengiriman', form.city);
- setValue('cityPengiriman', parseInt(form.city));
- updateFormPengiriman('zipPengiriman', form.zip);
- updateFormPengiriman('isSameAddreesStreet', `${sameAddressStreet}`);
+ if (formPengiriman.districtInvoice) {
+ setValue('districtInvoice', parseInt(formPengiriman.districtInvoice));
}
- // else {
- // updateFormPengiriman('streetPengiriman', '');
- // updateFormPengiriman('statePengiriman', '');
- // updateFormPengiriman('cityPengiriman', '');
- // updateFormPengiriman('zipPengiriman', '');
- // setValue('streetPengiriman', '');
- // setValue('statePengiriman', '');
- // setValue('cityPengiriman', '');
- // }
- validatePengiriman();
- }, [sameAddressStreet]);
+ }, [formPengiriman.districtInvoice]);
+ useEffect(() => {
+ if (formPengiriman.subDistrictInvoice) {
+ setValue(
+ 'subDistrictInvoice',
+ parseInt(formPengiriman.subDistrictInvoice)
+ );
+ }
+ }, [formPengiriman.subDistrictInvoice]);
+ useEffect(() => {
+ if (formPengiriman.zipInvoice) {
+ setValue('zipInvoice', parseInt(formPengiriman.zipInvoice));
+ }
+ }, [formPengiriman.zipInvoice]);
const getFromLocalStorage = (key) => {
const itemStr = localStorage.getItem(key);
@@ -531,75 +775,28 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
const handleChangeSameAddress = () => {
// setSameAddress(!sameAddress);
// if (sameAddress) {
- // console.log('sameAddress adalah', sameAddress);
// updateFormPengiriman('sameAddress', `true`);
// } else {
- // console.log('sameAddress merupakan', sameAddress);
// }
updateFormPengiriman('isSameAddrees', `${!sameAddress}`);
- validate();
+ validatePengiriman();
};
const handleChangeSameAddressStreet = () => {
// updateFormPengiriman('sameAddressStreet', `${!sameAddressStreet}`);
// setSameAddressStreet(!sameAddressStreet);
- if (sameAddressStreet == false) {
- updateFormPengiriman('streetPengiriman', '');
- updateFormPengiriman('statePengiriman', '');
- updateFormPengiriman('cityPengiriman', '');
- updateFormPengiriman('zipPengiriman', '');
- setValue('streetPengiriman', '');
- setValue('statePengiriman', '');
- setValue('cityPengiriman', '');
- }
+ // if (sameAddressStreet == false) {
+ // updateFormPengiriman('streetPengiriman', '');
+ // updateFormPengiriman('statePengiriman', '');
+ // updateFormPengiriman('cityPengiriman', '');
+ // updateFormPengiriman('zipPengiriman', '');
+ // setValue('streetPengiriman', '');
+ // setValue('statePengiriman', '');
+ // setValue('cityPengiriman', '');
+ // }
updateFormPengiriman('isSameAddreesStreet', `${!sameAddressStreet}`);
- validate();
+ validatePengiriman();
};
- useEffect(() => {
- const options = {
- behavior: 'smooth',
- block: 'center',
- };
-
- const loadIndustries = async () => {
- const watchZip = formPengiriman.zipPengiriman?.trim(); // Menghapus spasi berlebih
-
- // Validasi: hanya eksekusi jika watchZip valid (contoh: minimal 5 karakter)
- if (watchZip && watchZip.length >= 5) {
- const loadZip = async () => {
- try {
- const response = await fetch(
- `https://alamat.thecloudalert.com/api/cari/index/?keyword=${watchZip}`
- );
-
- const result = await response.json();
-
- if (!result.result.length > 0) {
- toast.error('Alamat pos salah');
- updateFormPengiriman('zipPengiriman', ''); // Reset form.zip jika salah
- validate(); // Memanggil validasi formulir
- return false;
- } else {
- updateFormPengiriman('zipPengiriman', watchZip);
- validate();
- return true; // Jika valid
- }
- } catch (error) {
- toast.error('Terjadi kesalahan saat memeriksa alamat pos.');
- console.error('Error:', error);
- return false;
- }
- };
-
- const isValidZip = await loadZip();
- if (!isValidZip) {
- zipRef.current.scrollIntoView(options);
- }
- }
- };
-
- loadIndustries();
- }, [formPengiriman.zipPengiriman]);
return (
<>
{isDesktop && (
@@ -737,22 +934,62 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
)}
</div>
- <div className='w-1/3'>
- <input
- id='zipPengiriman'
- aria-label='zipPengiriman'
- disabled={sameAddressStreet}
+ <div className='w-1/3' ref={districtPengirimanRef}>
+ <Controller
+ name='districtPengiriman'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={districts}
+ disabled={
+ !watchState || !watchCity || sameAddressStreet
+ }
+ placeholder='Kelurahan'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.subDistrictPengiriman}
+ </div>
+ )}
+ </div>
+ <div className='w-1/3' ref={subDistrictPengirimanRef}>
+ <Controller
+ name='subDistrictPengiriman'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={subDistricts}
+ disabled={!watchDistrict || sameAddressStreet}
+ placeholder='Kelurahan'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.subDistrictPengiriman}
+ </div>
+ )}
+ </div>
+ <div className='w-1/3' ref={zipRef}>
+ <Controller
name='zipPengiriman'
- ref={zipRef}
- placeholder='Kode Pos'
- type='number'
- value={formPengiriman.zipPengiriman}
- className='form-input'
- onChange={handleInputChange}
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={zips}
+ disabled={!watchsubDistrict || sameAddressStreet}
+ placeholder='Zip'
+ />
+ )}
/>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsPengiriman.zipPengiriman}
+ {errors.zipPengiriman}
</div>
)}
</div>
@@ -822,7 +1059,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
isChecked={sameAddress}
onChange={handleChangeSameAddress}
>
- Alamat invoice sama dengan alamat pengiriman
+ Alamat invoice sama dengan alamat bisnis
</Checkbox>
</div>
@@ -893,6 +1130,67 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
)}
</div>
+ <div className='w-1/3' ref={districtInvoiceRef}>
+ <Controller
+ name='districtInvoice'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={districtsInvoice}
+ disabled={
+ !watchStateInvoice ||
+ !watchCityInvoice ||
+ sameAddress
+ }
+ placeholder='Kecamatan'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.districtInvoice}
+ </div>
+ )}
+ </div>
+ <div className='w-1/3' ref={subDistrictInvoiceRef}>
+ <Controller
+ name='subDistrictInvoice'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={subDistrictsInvoice}
+ disabled={!watchDistrictInvoice || sameAddress}
+ placeholder='Kelurahan'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.subDistrictsInvoice}
+ </div>
+ )}
+ </div>
+ <div className='w-1/3' ref={zipInvoiceRef}>
+ <Controller
+ name='zipInvoice'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={zipsInvoice}
+ disabled={!watchsubDistrictInvoice || sameAddress}
+ placeholder='Zip'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.zipInvoice}
+ </div>
+ )}
+ </div>
</div>
</>
</div>
@@ -1002,29 +1300,31 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
Lembar Penerimaan Barang (LPB)
</Checkbox>
- {/* <div className='flex gap-3 flex-col'>
+ <div className='flex gap-3 flex-col'>
<Checkbox
colorScheme='red'
key='4'
- isChecked={isChecked(4)}
+ isChecked={
+ isChecked(4) || formPengiriman.dokumenKirimInput
+ }
onChange={() => handleCheckboxChange(4)}
>
Lainnya
</Checkbox>
<textarea
- id='dokumenPengirimanInput'
- name='dokumenPengirimanInput'
- aria-label='dokumenPengirimanInput'
+ id='dokumenKirimInput'
+ name='dokumenKirimInput'
+ aria-label='dokumenKirimInput'
placeholder='isi manual dokumen yang anda mau'
type='textarea'
ref={dokumenPengirimanInputRef}
- value={formPengiriman.dokumenPengirimanInput}
+ value={formPengiriman.dokumenKirimInput}
className='form-input'
rows={4}
cols={40}
onChange={handleInputChange}
/>
- </div> */}
+ </div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
{errorsPengiriman.dokumenPengiriman}
@@ -1036,12 +1336,12 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
<div className='flex flex-row justify-between items-start'>
<div className='w-2/5'>
<label className='form-label text-wrap'>
- Dokumen saat Pengiriman Barang{' '}
+ Dokumen yang dibawa saat pengiriman barang
<span className=' opacity-60'>(Opsional)</span>
</label>
{!isKonfirmasi && (
<span className='text-xs opacity-60'>
- Dokumen lampiran saat pengiriman barang
+ Dokumen lampiran yang dibawa saat pengiriman barang
</span>
)}
</div>
@@ -1207,7 +1507,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
)}
</div>
<div
- className='w-1/3'
+ className='w-3/5'
ref={cityPengirimanRef}
aria-label='cityPengiriman'
>
@@ -1229,7 +1529,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
</div>
)}
</div>
- <div className='w-1/3'>
+ {/* <div className='w-1/3'>
<input
id='zipPengiriman'
aria-label='zipPengiriman'
@@ -1247,6 +1547,67 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
{errorsPengiriman.zipPengiriman}
</div>
)}
+ </div> */}
+ </div>
+ <div className='flex flex-row w-full gap-2'>
+ <div className='w-1/3' ref={districtPengirimanRef}>
+ <Controller
+ name='districtPengiriman'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={districts}
+ disabled={
+ !watchState || !watchCity || sameAddressStreet
+ }
+ placeholder='Kelurahan'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.subDistrictPengiriman}
+ </div>
+ )}
+ </div>
+ <div className='w-1/3' ref={subDistrictPengirimanRef}>
+ <Controller
+ name='subDistrictPengiriman'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={subDistricts}
+ disabled={!watchDistrict || sameAddressStreet}
+ placeholder='Kelurahan'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.subDistrictPengiriman}
+ </div>
+ )}
+ </div>
+ <div className='w-1/3' ref={zipRef}>
+ <Controller
+ name='zipPengiriman'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={zips}
+ disabled={!watchsubDistrict || sameAddressStreet}
+ placeholder='Zip'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.zipPengiriman}
+ </div>
+ )}
</div>
</div>
</div>
@@ -1372,6 +1733,69 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
)}
</div>
</div>
+ <div className='sub-alamat flex flex-row w-full gap-3'>
+ <div className='w-1/3' ref={districtInvoiceRef}>
+ <Controller
+ name='districtInvoice'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={districtsInvoice}
+ disabled={
+ !watchStateInvoice ||
+ !watchCityInvoice ||
+ sameAddress
+ }
+ placeholder='Kecamatan'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.districtInvoice}
+ </div>
+ )}
+ </div>
+ <div className='w-1/3' ref={subDistrictInvoiceRef}>
+ <Controller
+ name='subDistrictInvoice'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={subDistrictsInvoice}
+ disabled={!watchDistrictInvoice || sameAddress}
+ placeholder='Kelurahan'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.subDistrictsInvoice}
+ </div>
+ )}
+ </div>
+ <div className='w-1/3' ref={zipInvoiceRef}>
+ <Controller
+ name='zipInvoice'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={zipsInvoice}
+ disabled={!watchsubDistrictInvoice || sameAddress}
+ placeholder='Zip'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.zipInvoice}
+ </div>
+ )}
+ </div>
+ </div>
</>
</div>
@@ -1478,6 +1902,31 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
>
Lembar Penerimaan Barang (LPB)
</Checkbox>
+ <div className='flex gap-3 flex-col'>
+ <Checkbox
+ colorScheme='red'
+ key='4'
+ isChecked={
+ isChecked(4) || formPengiriman.dokumenKirimInput
+ }
+ onChange={() => handleCheckboxChange(4)}
+ >
+ Lainnya
+ </Checkbox>
+ <textarea
+ id='dokumenKirimInput'
+ name='dokumenKirimInput'
+ aria-label='dokumenKirimInput'
+ placeholder='isi manual dokumen yang anda mau'
+ type='textarea'
+ ref={dokumenPengirimanInputRef}
+ value={formPengiriman.dokumenKirimInput}
+ className='form-input'
+ rows={4}
+ cols={40}
+ onChange={handleInputChange}
+ />
+ </div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index 1b7b0f4c..9e154166 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -111,6 +111,7 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
);
setSupplierData(updatedSuppliers);
setChangeConfirmation(false);
+ updateHasSave(false);
}
};
@@ -207,7 +208,7 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
<BottomPopup
active={changeConfirmation}
close={() => setChangeConfirmation(false)}
- title='Ubah profil Bisnis'
+ title='Konfirmasi Hapus Data'
>
<div className='leading-7 text-gray_r-12/80'>
Apakah anda yakin menghapus data?
@@ -297,7 +298,7 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
placeholder='Type Durasi Tempo'
/>
</td>
- <td className='flex flex-row gap-2'>
+ <td className='flex flex-row gap-2 justify-center items-center'>
<input
name='creditLimit'
type='text'
@@ -374,24 +375,26 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
</table>
</form>
<div className='flex items-center gap-4 mt-8'>
- <button
+ {/* <button
onClick={handleAddNewSupplier}
className='bg-gray-200 border border-gray-500 rounded-md text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
>
{<PlusCircleIcon className='w-5 mr-2' />}
{''} Tambah Data Baru
- </button>
- <button
- onClick={simpanData}
- className={`bg-red-500 border border-red-500 rounded-md text-sm text-white p-2 h-11 mb-1 content-center flex flex-row justify-center items-center ${
- hasSavedata ? 'hidden' : ''
- }`}
- >
- Simpan Data
- </button>
- <span className='text-sm opacity-60 text-red-500'>
- *Klik simpan sebelum lanjut ke tahap selanjutnya
- </span>
+ </button> */}
+ {!hasSavedata && (
+ <>
+ <button
+ onClick={simpanData}
+ className={`bg-red-500 border border-red-500 rounded-md text-sm text-white p-2 h-11 mb-1 content-center flex flex-row justify-center items-center `}
+ >
+ Simpan Data
+ </button>
+ <span className='text-sm opacity-60 text-red-500'>
+ *Klik simpan sebelum lanjut ke tahap selanjutnya
+ </span>
+ </>
+ )}
</div>
</div>
)}
@@ -424,7 +427,12 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
{supplier.supplier}
</p>
<div className='w-1/5 flex justify-end items-center gap-2'>
- <Trash2Icon size={16} color='red' />
+ <Trash2Icon
+ size={16}
+ color='red'
+ onClick={() => handleOpenConfirmation(index)}
+ className='cursor-pointer'
+ />
{openIndexes.includes(index) ? (
<ChevronUpIcon className='w-4' />
) : (
@@ -590,17 +598,19 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
</form>
</div>
<div className='flex flex-col justify-start items-start gap-4 mt-8'>
- <span className='text-xs opacity-60 text-red-500'>
- *Klik simpan sebelum lanjut ke tahap selanjutnya
- </span>
- <button
- onClick={simpanData}
- className={`bg-gray-200 border border-gray-500 rounded-md w-full text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center ${
- hasSavedata ? 'hidden' : ''
- }`}
- >
- Simpan Data
- </button>
+ {!hasSavedata && (
+ <>
+ <span className='text-xs opacity-60 text-red-500'>
+ *Klik simpan sebelum lanjut ke tahap selanjutnya
+ </span>
+ <button
+ onClick={simpanData}
+ className={`bg-red-500 border border-red-500 rounded-md w-full text-sm text-white p-2 h-11 mb-1 content-center flex flex-row justify-center items-center`}
+ >
+ Simpan Data
+ </button>
+ </>
+ )}
</div>
</div>
)}
diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 6a7eb3cb..f8a0bc55 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -4,6 +4,8 @@ import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
import odooApi from '~/libs/odooApi';
import stateApi from '@/lib/address/api/stateApi.js';
import cityApi from '@/lib/address/api/cityApi';
+import districtApi from '@/lib/address/api/districtApi';
+import subDistrictApi from '@/lib/address/api/subDistrictApi';
import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
import useDevice from '@/core/hooks/useDevice';
@@ -11,21 +13,28 @@ import Divider from '@/core/components/elements/Divider/Divider';
import { getAuth } from '~/libs/auth';
import addressApi from '@/lib/address/api/addressApi';
import { toast } from 'react-hot-toast';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import { useRouter } from 'next/router';
const InformasiPerusahaan = ({
chekValid,
buttonSubmitClick,
isKonfirmasi,
}) => {
const auth = getAuth();
+ const router = useRouter();
const { isDesktop, isMobile } = useDevice();
const { control, watch, setValue, getValues } = useForm();
const { form, errors, validate, updateForm } = usePengajuanTempoStore();
+ const [states, setState] = useState([]);
+ const [cities, setCities] = useState([]);
+ const [districts, setDistricts] = useState([]);
+ const [subDistricts, setSubDistricts] = useState([]);
+ const [zips, setZips] = useState([]);
const [industries, setIndustries] = useState([]);
const [paymentTerm, setPaymentTerm] = useState([]);
const [selectedCategory, setSelectedCategory] = useState('');
- const [states, setState] = useState([]);
- const [cities, setCities] = useState([]);
const [bersedia, setBersedia] = useState(null);
+ const [changeConfirmation, setChangeConfirmation] = useState(false);
const category_produk = [
{ id: 2040, name: 'Pengaman, Kesehatan & Keamanan' },
{ id: 2097, name: 'Perkakas Tangan, Listrik & Pneumatic' },
@@ -64,7 +73,9 @@ const InformasiPerusahaan = ({
const watchState = watch('state');
useEffect(() => {
- // updateForm('city', '');
+ setValue('city', '');
+ setValue('district', '');
+ setValue('subDistrict', '');
if (watchState) {
updateForm('state', `${watchState}`);
validate();
@@ -81,12 +92,79 @@ const InformasiPerusahaan = ({
}, [watchState]);
const watchCity = watch('city');
+
useEffect(() => {
if (watchCity) {
updateForm('city', `${watchCity}`);
validate();
+ const loadDistricts = async () => {
+ let dataDistricts = await districtApi({ cityId: watchCity });
+ dataDistricts = dataDistricts.map((district) => ({
+ value: district.id,
+ label: district.name,
+ }));
+ setDistricts(dataDistricts);
+ };
+ loadDistricts();
}
- }, [watchCity]);
+ }, [watchCity, setValue]);
+
+ const watchDistrict = watch('district');
+ useEffect(() => {
+ setValue('subDistrict', '');
+ if (watchDistrict) {
+ updateForm('district', `${watchDistrict}`);
+ validate();
+ const loadSubDistricts = async () => {
+ let dataSubDistricts = await subDistrictApi({
+ districtId: watchDistrict,
+ });
+ dataSubDistricts = dataSubDistricts.map((district) => ({
+ value: district.id,
+ label: district.name,
+ }));
+ setSubDistricts(dataSubDistricts);
+ };
+ loadSubDistricts();
+ }
+ }, [watchDistrict, setValue]);
+
+ const watchsubDistrict = watch('subDistrict');
+
+ useEffect(() => {
+ let kelurahan = '';
+
+ if (watchsubDistrict) {
+ updateForm('subDistrict', `${watchsubDistrict}`);
+ validate();
+ for (const data in subDistricts) {
+ if (subDistricts[data].value == watchsubDistrict) {
+ kelurahan = subDistricts[data].label.toLowerCase();
+ }
+ }
+ const loadZip = async () => {
+ const response = await fetch(
+ `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}`
+ );
+
+ const result = await response.json();
+ const dataZips = result.result.map((zip) => ({
+ value: parseInt(zip.kodepos),
+ label: zip.kodepos,
+ }));
+ setZips(dataZips);
+ };
+ loadZip();
+ }
+ }, [watchsubDistrict, setValue, subDistricts]);
+
+ const watchZip = watch('zip');
+ useEffect(() => {
+ if (watchZip) {
+ updateForm('zip', `${watchZip}`);
+ validate();
+ }
+ }, [watchZip]);
useEffect(() => {
const loadIndustries = async () => {
@@ -115,10 +193,10 @@ const InformasiPerusahaan = ({
useEffect(() => {
const loadPaymentTerm = async () => {
const dataPaymentTerm = [
- { id: 24, name: 'Tempo 14 Hari' },
- { id: 25, name: 'Tempo 30 Hari' },
{ id: 29, name: 'Tempo 7 Hari' },
+ { id: 24, name: 'Tempo 14 Hari' },
{ id: 32, name: 'Tempo 21 Hari' },
+ { id: 25, name: 'Tempo 30 Hari' },
];
setPaymentTerm(
dataPaymentTerm?.map((o) => ({
@@ -157,15 +235,7 @@ const InformasiPerusahaan = ({
updateForm('estimasi', formattedValue.replace(/^Rp\s*/, ''));
validate();
};
- const onChangeTempoDuration = (e) => {
- updateForm('tempoDuration', `${e}`);
- validate();
- };
- const onChangeTempoLimit = (e) => {
- updateForm('tempoLimit', `${e}`);
- validate();
- };
const [isCustom, setIsCustom] = React.useState(false);
const [tempoLimitValueEx, setTempoLimitValueEx] = React.useState('');
const handleCheckboxBersediaChange = (value) => {
@@ -178,6 +248,16 @@ const InformasiPerusahaan = ({
updateForm('bersedia', `${value}`);
validate();
};
+ const handleCheckboxPortalChange = (value) => {
+ // if (value === 'bersedia') {
+ // setBersedia(true);
+ // } else if (value === 'tidakBersedia') {
+ // setBersedia(false);
+ // }
+ // updateForm('bersedia', `${value === 'bersedia'}`);
+ updateForm('portal', `${value}`);
+ validate();
+ };
const [selectedIds, setSelectedIds] = useState(
form.categoryProduk ? form.categoryProduk.split(',').map(Number) : [] // Parse string menjadi array angka
);
@@ -217,6 +297,8 @@ const InformasiPerusahaan = ({
const streetRef = useRef(null);
const stateRef = useRef(null);
const cityRef = useRef(null);
+ const districtRef = useRef(null);
+ const subDistrictRef = useRef(null);
const zipRef = useRef(null);
const mobileRef = useRef(null);
const bankNameRef = useRef(null);
@@ -225,6 +307,7 @@ const InformasiPerusahaan = ({
const estimasiRef = useRef(null);
const tempoDurationRef = useRef(null);
const bersediaRef = useRef(null);
+ const portalRef = useRef(null);
const categoryProdukRef = useRef(null);
const tempoLimitRef = useRef(null);
@@ -233,52 +316,6 @@ const InformasiPerusahaan = ({
behavior: 'smooth',
block: 'center',
};
-
- const loadIndustries = async () => {
- const watchZip = form.zip?.trim(); // Menghapus spasi berlebih
-
- // Validasi: hanya eksekusi jika watchZip valid (contoh: minimal 5 karakter)
- if (watchZip && watchZip.length >= 5) {
- const loadZip = async () => {
- try {
- const response = await fetch(
- `https://alamat.thecloudalert.com/api/cari/index/?keyword=${watchZip}`
- );
-
- const result = await response.json();
-
- if (!result.result.length > 0) {
- toast.error('Alamat pos salah');
- updateForm('zip', ''); // Reset form.zip jika salah
- validate(); // Memanggil validasi formulir
- return false;
- } else {
- updateForm('zip', watchZip);
- validate();
- return true; // Jika valid
- }
- } catch (error) {
- toast.error('Terjadi kesalahan saat memeriksa alamat pos.');
- console.error('Error:', error);
- return false;
- }
- };
-
- const isValidZip = await loadZip();
- if (!isValidZip) {
- zipRef.current.scrollIntoView(options);
- }
- }
- };
-
- loadIndustries();
- }, [form.zip]);
-
- useEffect(() => {
- const options = {
- behavior: 'smooth',
- block: 'center',
- };
const loadIndustries = async () => {
if (!isFormValid) {
if (errors.name && nameRef.current) {
@@ -301,6 +338,14 @@ const InformasiPerusahaan = ({
cityRef.current.scrollIntoView(options);
return;
}
+ if (errors.district && districtRef.current) {
+ districtRef.current.scrollIntoView(options);
+ return;
+ }
+ if (errors.subDistrict && subDistrictRef.current) {
+ subDistrictRef.current.scrollIntoView(options);
+ return;
+ }
if (errors.zip && zipRef.current) {
zipRef.current.scrollIntoView(options);
return;
@@ -333,6 +378,10 @@ const InformasiPerusahaan = ({
bersediaRef.current.scrollIntoView(options);
return;
}
+ if (errors.portal && portalRef.current) {
+ portalRef.current.scrollIntoView(options);
+ return;
+ }
if (errors.categoryProduk && categoryProdukRef.current) {
categoryProdukRef.current.scrollIntoView(options);
return;
@@ -355,6 +404,15 @@ const InformasiPerusahaan = ({
if (form.city) {
setValue('city', parseInt(form.city));
}
+ if (form.district) {
+ setValue('district', parseInt(form.district));
+ }
+ if (form.subDistrict) {
+ setValue('subDistrict', parseInt(form.subDistrict));
+ }
+ if (form.zip) {
+ setValue('zip', parseInt(form.zip));
+ }
if (form.tempoDuration) {
setValue('tempoDuration', parseInt(form.tempoDuration));
}
@@ -383,14 +441,31 @@ const InformasiPerusahaan = ({
if (dataProfile.name) {
updateForm('name', dataProfile.name);
}
+ if (dataProfile.stateId.id) {
+ updateForm('state', `${dataProfile.stateId.id}`);
+ }
+ if (dataProfile.city.id) {
+ updateForm('city', `${dataProfile.city.id}`);
+ }
+ if (dataProfile.district.id) {
+ updateForm('district', `${dataProfile.district.id}`);
+ }
+ if (dataProfile.subDistrict.id) {
+ updateForm('subDistrict', `${dataProfile.subDistrict.id}`);
+ }
if (dataProfile.alamatBisnis) {
updateForm('street', dataProfile.alamatBisnis);
}
if (dataProfile.zip) {
updateForm('zip', dataProfile.zip);
}
- if (dataProfile.phone) {
- updateForm('mobile', dataProfile.phone.replace(/\D/g, ''));
+ if (dataProfile.mobile) {
+ updateForm('mobile', dataProfile.mobile.replace(/\D/g, ''));
+ } else {
+ setChangeConfirmation(true);
+ }
+ if (!dataProfile.email) {
+ setChangeConfirmation(true);
}
} catch (error) {
console.error('Error loading profile:', error);
@@ -402,7 +477,7 @@ const InformasiPerusahaan = ({
if (auth?.parentId) {
loadProfile();
}
- }, [auth?.parentId, updateForm]);
+ }, [auth?.parentId]);
useEffect(() => {
const loadProfile = async () => {
try {
@@ -410,6 +485,8 @@ const InformasiPerusahaan = ({
setValue('industryId', parseInt(dataProfile.industryId));
setValue('state', parseInt(dataProfile.stateId.id));
setValue('city', parseInt(dataProfile.city.id));
+ setValue('district', parseInt(dataProfile.district.id));
+ setValue('subDistrict', parseInt(dataProfile.subDistrict.id));
} catch (error) {
console.error('Error loading profile:', error);
}
@@ -419,8 +496,46 @@ const InformasiPerusahaan = ({
loadProfile();
}
}, [auth?.parentId, setValue]);
+
+ const handleLengkapiData = () => {
+ router.push('/my/profile');
+ };
+
return (
<>
+ <BottomPopup
+ active={changeConfirmation}
+ close={() => {
+ toast.error(
+ 'Mohon lengkapi data perusahaan sebelum melakukan pengajuan tempo'
+ );
+ }}
+ title='Data Perusahaan Anda Belum Lengkap'
+ >
+ <div className='leading-7 text-gray_r-12/80'>
+ Mohon lengkapi data perusahaan sebelum melakukan pengajuan tempo
+ </div>
+ <div className='flex mt-6 gap-x-4 md:justify-end'>
+ <button
+ className='btn-solid-red flex-1 md:flex-none'
+ type='button'
+ onClick={handleLengkapiData}
+ >
+ Lengkapi Data
+ </button>
+ <button
+ className='btn-light flex-1 md:flex-none'
+ type='button'
+ onClick={() => {
+ toast.error(
+ 'Mohon lengkapi data perusahaan sebelum melakukan pengajuan tempo'
+ );
+ }}
+ >
+ Batal
+ </button>
+ </div>
+ </BottomPopup>
{isDesktop && (
<div className=''>
<h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
@@ -563,13 +678,71 @@ const InformasiPerusahaan = ({
</div>
)}
</div>
- <div className='w-1/3'>
+ <div className='w-1/3' ref={districtRef}>
+ <Controller
+ name='district'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={districts}
+ disabled={!watchState || !watchCity}
+ placeholder='Kecamatan'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.district}
+ </div>
+ )}
+ </div>
+ <div className='w-1/3' ref={subDistrictRef}>
+ <Controller
+ name='subDistrict'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={subDistricts}
+ disabled={!watchDistrict}
+ placeholder='Kelurahan'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.district}
+ </div>
+ )}
+ </div>
+ <div className='w-1/3' ref={zipRef}>
+ <Controller
+ name='zip'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={zips}
+ disabled={!watchsubDistrict}
+ placeholder='Zip'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.district}
+ </div>
+ )}
+ </div>
+ {/* <div className='w-1/3'>
<input
id='zip'
name='zip'
ref={zipRef}
placeholder='Kode Pos'
type='number'
+ disabled={!watchsubDistrict}
value={form.zip}
className='form-input'
onChange={handleInputChange}
@@ -579,7 +752,7 @@ const InformasiPerusahaan = ({
{errors.zip}
</div>
)}
- </div>
+ </div> */}
</div>
</div>
</div>
@@ -712,9 +885,9 @@ const InformasiPerusahaan = ({
<div className='flex flex-row justify-between items-start'>
<div className='w-2/5 text-nowrap'>
- <label className='form-label '>
+ <label className='form-label text-wrap'>
Estimasi Pembelian pertahun{' '}
- <span className=' opacity-60'>(Opsional)</span>
+ <span className=' opacity-60 '>(Opsional)</span>
</label>
</div>
<div className='w-3/5'>
@@ -799,14 +972,38 @@ const InformasiPerusahaan = ({
<div className='flex flex-row justify-between items-start'>
<div className='w-2/5'>
<label className='form-label text-wrap '>
- Apakah bersedia transaksi via website?
+ Apakah terdapat vendor portal pada perusahaan anda?
</label>
- {!isKonfirmasi && (
- <span className='text-xs opacity-60'>
- Pilih produk bisa lebih dari 1
- </span>
+ </div>
+ <div className='w-3/5 flex flex-col justify-start'>
+ <div className='flex gap-x-4' ref={portalRef}>
+ <RadioGroup
+ onChange={handleCheckboxPortalChange}
+ value={form.portal}
+ >
+ <Stack direction='row'>
+ <Radio colorScheme='red' value='ada'>
+ Ya, ada
+ </Radio>
+ <Radio colorScheme='red' value='tidak'>
+ Tidak ada
+ </Radio>
+ </Stack>
+ </RadioGroup>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.portal}
+ </div>
)}
</div>
+ </div>
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-wrap '>
+ Apakah bersedia transaksi via website?
+ </label>
+ </div>
<div className='w-3/5 flex flex-col justify-start'>
<div className='flex gap-x-4' ref={bersediaRef}>
<RadioGroup
@@ -822,28 +1019,6 @@ const InformasiPerusahaan = ({
</Radio>
</Stack>
</RadioGroup>
- {/* <Checkbox
- name='bersedia'
- borderColor='gray.600'
- colorScheme='red'
- isChecked={bersedia === true} // Checked when bersedia is true
- onChange={() => handleCheckboxBersediaChange('bersedia')}
- value={true}
- size='md'
- >
- Saya bersedia
- </Checkbox>
- <Checkbox
- name='bersedia'
- borderColor='gray.600'
- colorScheme='red'
- isChecked={bersedia === false} // Checked when bersedia is false
- onChange={() => handleCheckboxBersediaChange('tidakBersedia')}
- value={false}
- size='md'
- >
- Tidak bersedia
- </Checkbox> */}
</div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
@@ -1027,6 +1202,25 @@ const InformasiPerusahaan = ({
</div>
)}
</div>
+ <div className='w-1/3' ref={districtRef}>
+ <Controller
+ name='district'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={districts}
+ disabled={!watchCity}
+ placeholder='Kecamatan'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.district}
+ </div>
+ )}
+ </div>
<div className='w-1/3'>
<input
id='zip'
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 00:49:00 +0000