diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/pengajuan-tempo/component/Dokumen.jsx | 311 | ||||
| -rw-r--r-- | src/lib/pengajuan-tempo/component/PengajuanTempo.jsx | 7 |
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]); |
