summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/lib/pengajuan-tempo/component/Dokumen.jsx311
-rw-r--r--src/lib/pengajuan-tempo/component/PengajuanTempo.jsx7
2 files changed, 214 insertions, 104 deletions
diff --git a/src/lib/pengajuan-tempo/component/Dokumen.jsx b/src/lib/pengajuan-tempo/component/Dokumen.jsx
index 65220b27..42c6c47f 100644
--- a/src/lib/pengajuan-tempo/component/Dokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/Dokumen.jsx
@@ -24,7 +24,6 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
let fileBase64 = '';
const { name } = event.target;
const file = event.target.files?.[0];
- console.log('file', file);
// Allowed file extensions
const allowedExtensions = ['pdf', 'png', 'jpg', 'jpeg'];
let fileExtension = '';
@@ -61,7 +60,6 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
() => Object.keys(errorsDokumen).length === 0,
[errorsDokumen]
);
- console.log('formDokumen', formDokumen?.dokumenNib?.name);
const dokumenNibRef = useRef(null);
const dokumenNpwpRef = useRef(null);
const dokumenSppkpRef = useRef(null);
@@ -142,7 +140,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
</div>
<form className='flex mt-4 flex-col w-full '>
<div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'>
- <div className='kolom-kiri w-full grid grid-rows-2 gap-10 '>
+ <div className='kolom-kiri w-full grid grid-rows-2 gap-7 '>
<div className='w-full grid grid-cols-2 gap-5'>
<div>
<label className='form-label text-nowrap'>
@@ -153,17 +151,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
</span>
</div>
<div className=''>
- <input
- // value={formDokumen?.dokumenNib?.name}
- id='dokumenNib'
- name='dokumenNib'
- type='file'
- ref={dokumenNibRef}
- className='form-input'
- aria-invalid={errorsDokumen.dokumenNib}
- onChange={handleInputChange}
- accept='.pdf,.png,.jpg,.jpeg'
- />
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenNib'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ Upload Dokumen
+ </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'
+ />
+ <span className='mt-2 text-gray-600'>
+ {formDokumen?.dokumenNib?.name}
+ </span>
+ </div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
{errorsDokumen.dokumenNib}
@@ -181,17 +191,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
</span>
</div>
<div className=''>
- <input
- // value={formDokumen.dokumenNpwp}
- id='dokumenNpwp'
- name='dokumenNpwp'
- type='file'
- ref={dokumenNpwpRef}
- className='form-input'
- aria-invalid={errorsDokumen.dokumenNpwp}
- onChange={handleInputChange}
- accept='.pdf,.png,.jpg,.jpeg'
- />
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenNpwp'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ Upload Dokumen
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenNpwp'
+ name='dokumenNpwp'
+ type='file'
+ ref={dokumenNpwpRef}
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenNpwp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600'>
+ {formDokumen?.dokumenNpwp?.name}
+ </span>
+ </div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
{errorsDokumen.dokumenNpwp}
@@ -207,17 +229,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
</span>
</div>
<div className=''>
- <input
- // value={formDokumen.dokumenSppkp}
- id='dokumenSppkp'
- name='dokumenSppkp'
- type='file'
- ref={dokumenSppkpRef}
- className='form-input'
- aria-invalid={errorsDokumen.dokumenSppkp}
- onChange={handleInputChange}
- accept='.pdf,.png,.jpg,.jpeg'
- />
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenSppkp'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ Upload Dokumen
+ </label>
+ <input
+ // value={formDokumen.dokumenSppkp}
+ id='dokumenSppkp'
+ name='dokumenSppkp'
+ type='file'
+ ref={dokumenSppkpRef}
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenSppkp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600'>
+ {formDokumen?.dokumenSppkp?.name}
+ </span>
+ </div>
+
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
{errorsDokumen.dokumenSppkp}
@@ -235,17 +269,28 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
</span>
</div>
<div className=''>
- <input
- // value={formDokumen.dokumenAktaPerubahan}
- id='dokumenAktaPerubahan'
- name='dokumenAktaPerubahan'
- type='file'
- ref={dokumenAktaPerubahanRef}
- className='form-input'
- aria-invalid={errorsDokumen.dokumenAktaPerubahan}
- onChange={handleInputChange}
- accept='.pdf,.png,.jpg,.jpeg'
- />
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenAktaPerubahan'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ Upload Dokumen
+ </label>
+ <input
+ // value={formDokumen.dokumenAktaPerubahan}
+ id='dokumenAktaPerubahan'
+ name='dokumenAktaPerubahan'
+ type='file'
+ ref={dokumenAktaPerubahanRef}
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenAktaPerubahan}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600'>
+ {formDokumen?.dokumenAktaPerubahan?.name}
+ </span>
+ </div>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
{errorsDokumen.dokumenAktaPerubahan}
@@ -264,17 +309,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
</span>
</div>
<div className=''>
- <input
- // value={formDokumen.dokumenKtpDirut}
- id='dokumenKtpDirut'
- name='dokumenKtpDirut'
- type='file'
- ref={dokumenKtpDirutRef}
- className='form-input'
- aria-invalid={errorsDokumen.dokumenKtpDirut}
- onChange={handleInputChange}
- accept='.pdf,.png,.jpg,.jpeg'
- />
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenKtpDirut'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ Upload Dokumen
+ </label>
+ <input
+ // value={formDokumen.dokumenKtpDirut}
+ id='dokumenKtpDirut'
+ name='dokumenKtpDirut'
+ type='file'
+ ref={dokumenKtpDirutRef}
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenKtpDirut}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600'>
+ {formDokumen?.dokumenKtpDirut?.name}
+ </span>
+ </div>
+
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
{errorsDokumen.dokumenKtpDirut}
@@ -295,17 +352,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
</span>
</div>
<div className=''>
- <input
- // value={formDokumen.dokumenAktaPendirian}
- id='dokumenAktaPendirian'
- name='dokumenAktaPendirian'
- type='file'
- ref={dokumenAktaPendirianRef}
- className='form-input'
- aria-invalid={errorsDokumen.dokumenAktaPendirian}
- onChange={handleInputChange}
- accept='.pdf,.png,.jpg,.jpeg'
- />
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenAktaPendirian'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ Upload Dokumen
+ </label>
+ <input
+ // value={formDokumen.dokumenAktaPendirian}
+ id='dokumenAktaPendirian'
+ name='dokumenAktaPendirian'
+ type='file'
+ ref={dokumenAktaPendirianRef}
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenAktaPendirian}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600'>
+ {formDokumen?.dokumenAktaPendirian?.name}
+ </span>
+ </div>
+
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
{errorsDokumen.dokumenAktaPendirian}
@@ -324,17 +393,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
</span>
</div>
<div className=''>
- <input
- // value={formDokumen.dokumenLaporanKeuangan}
- id='dokumenLaporanKeuangan'
- name='dokumenLaporanKeuangan'
- type='file'
- ref={dokumenLaporanKeuanganRef}
- className='form-input'
- aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
- onChange={handleInputChange}
- accept='.pdf,.png,.jpg,.jpeg'
- />
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenLaporanKeuangan'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ Upload Dokumen
+ </label>
+ <input
+ // value={formDokumen.dokumenLaporanKeuangan}
+ id='dokumenLaporanKeuangan'
+ name='dokumenLaporanKeuangan'
+ type='file'
+ ref={dokumenLaporanKeuanganRef}
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600'>
+ {formDokumen?.dokumenLaporanKeuangan?.name}
+ </span>
+ </div>
+
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
{errorsDokumen.dokumenLaporanKeuangan}
@@ -352,17 +433,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
</span>
</div>
<div className=''>
- <input
- // value={formDokumen.dokumenFotoKantor}
- id='dokumenFotoKantor'
- name='dokumenFotoKantor'
- type='file'
- ref={dokumenFotoKantorRef}
- className='form-input'
- aria-invalid={errorsDokumen.dokumenFotoKantor}
- onChange={handleInputChange}
- accept='.pdf,.png,.jpg,.jpeg'
- />
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenFotoKantor'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ Upload Dokumen
+ </label>
+ <input
+ // value={formDokumen.dokumenFotoKantor}
+ id='dokumenFotoKantor'
+ name='dokumenFotoKantor'
+ type='file'
+ ref={dokumenFotoKantorRef}
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenFotoKantor}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600'>
+ {formDokumen?.dokumenFotoKantor?.name}
+ </span>
+ </div>
+
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
{errorsDokumen.dokumenFotoKantor}
@@ -380,17 +473,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
</span>
</div>
<div className=''>
- <input
- // value={formDokumen.dokumenTempatBekerja}
- id='dokumenTempatBekerja'
- name='dokumenTempatBekerja'
- type='file'
- ref={dokumenTempatBekerjaRef}
- className='form-input'
- aria-invalid={errorsDokumen.dokumenTempatBekerja}
- onChange={handleInputChange}
- accept='.pdf,.png,.jpg,.jpeg'
- />
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenTempatBekerja'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ Upload Dokumen
+ </label>
+ <input
+ // value={formDokumen.dokumenTempatBekerja}
+ id='dokumenTempatBekerja'
+ name='dokumenTempatBekerja'
+ type='file'
+ ref={dokumenTempatBekerjaRef}
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenTempatBekerja}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600'>
+ {formDokumen?.dokumenTempatBekerja?.name}
+ </span>
+ </div>
+
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
{errorsDokumen.dokumenTempatBekerja}
@@ -410,7 +515,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
{parseInt((getJumlahDokumenDiisi() / 9) * 100)} %
</span>
<span className='ml-2 opacity-60'>
- {getJumlahDokumenDiisi() > 5
+ {getJumlahDokumenDiisi() >= 4
? getJumlahDokumenDiisi() == 9
? 'Selesai'
: 'Sedikit Lagi'
diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
index 238c5e4e..e6424e51 100644
--- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
+++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
@@ -50,7 +50,6 @@ const PengajuanTempo = () => {
<Pengiriman chekValid={notValid} buttonSubmitClick={buttonSubmitClick} />,
<Referensi chekValid={notValid} buttonSubmitClick={buttonSubmitClick} />,
<Dokumen chekValid={notValid} buttonSubmitClick={buttonSubmitClick} />,
- <div>Dokumen</div>,
<div>Konfirmasi</div>,
];
const stepDivsError = [
@@ -108,6 +107,12 @@ const PengajuanTempo = () => {
// const formData = JSON.parse(cachedData);
if (currentStep == 3) {
stepDivsUpdateForm[currentStep](cachedData);
+ } else if (currentStep == 4) {
+ // Memanggil updateFormDokumen dengan parameter yang benar
+ Object.keys(cachedData).forEach((key) => {
+ const { name, format, base64 } = cachedData[key];
+ stepDivsUpdateForm[currentStep](key, name, format, base64);
+ });
} else {
Object.keys(cachedData).forEach((key) => {
stepDivsUpdateForm[currentStep](key, cachedData[key]);