diff options
Diffstat (limited to 'src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx')
| -rw-r--r-- | src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx | 771 |
1 files changed, 595 insertions, 176 deletions
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> |
