diff options
8 files changed, 1627 insertions, 639 deletions
diff --git a/src/lib/pengajuan-tempo/component/Dokumen.jsx b/src/lib/pengajuan-tempo/component/Dokumen.jsx index bb88f80b..0873df66 100644 --- a/src/lib/pengajuan-tempo/component/Dokumen.jsx +++ b/src/lib/pengajuan-tempo/component/Dokumen.jsx @@ -5,6 +5,7 @@ import ProgressBar from '@ramonak/react-progress-bar'; import { UseToastOptions } from '@chakra-ui/react'; import { toast } from 'react-hot-toast'; import getFileBase64 from '@/core/utils/getFileBase64'; +import useDevice from '@/core/hooks/useDevice'; const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { const { control, watch } = useForm(); const { @@ -14,7 +15,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { updateFormDokumen, getJumlahDokumenDiisi, } = usePengajuanTempoStoreDokumen(); - + const { isDesktop, isMobile } = useDevice(); // const handleInputChange = (event) => { // const { name, value } = event.target; // updateFormDokumen(name, value); @@ -135,26 +136,440 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { }, [buttonSubmitClick]); return ( <> - <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>Dokumen</h1> - <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-7 '> - <div className='w-full grid grid-cols-2 gap-5'> - <div> + {isDesktop && ( + <div> + <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}> + Dokumen + </h1> + <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-7 '> + <div className='w-full grid grid-cols-2 gap-5'> + <div> + <label className='form-label text-nowrap'> + NIB (SIUP/TDP/SKDP) + </label> + <span className='text-xs opacity-60'> + Pastikan dokumen yang anda upload sudah benar + </span> + </div> + <div className=''> + <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} + </div> + )} + </div> + </div> + <div className='w-full grid grid-cols-2 gap-5'> + <div> + <label className='form-label text-nowrap'> + NPWP Perusahaan + </label> + <span className='text-xs opacity-60'> + Pastikan dokumen yang anda upload sudah benar + </span> + </div> + <div className=''> + <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} + </div> + )} + </div> + </div> + <div className='w-full grid grid-cols-2 gap-5'> + <div> + <label className='form-label text-nowrap'>SPPKP</label> + <span className='text-xs opacity-60'> + Pastikan dokumen yang anda upload sudah benar + </span> + </div> + <div className=''> + <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} + </div> + )} + </div> + </div> + <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> + </label> + <span className='text-xs opacity-60'> + Pastikan dokumen yang anda upload sudah benar + </span> + </div> + <div className=''> + <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} + </div> + )} + </div> + </div> + <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> + </label> + <span className='text-xs opacity-60'> + Pastikan dokumen yang anda upload sudah benar + </span> + </div> + <div className=''> + <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} + </div> + )} + </div> + </div> + </div> + <div className='w-px bg-gray-300'></div> + <div className='kolom kanan w-full grid grid-rows-2 gap-10 '> + <div className='w-full grid grid-cols-2 gap-5'> + <div> + <label className='form-label text-nowrap'> + Akta Pendirian{' '} + <span className=' opacity-60'>(Opsional)</span> + </label> + <span className='text-xs opacity-60'> + Pastikan dokumen yang anda upload sudah benar + </span> + </div> + <div className=''> + <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} + </div> + )} + </div> + </div> + <div className='w-full grid grid-cols-2 gap-5'> + <div> + <label className='form-label text-nowrap'> + Laporan Keuangan + <span className=' opacity-60'>(Opsional)</span> + </label> + <span className='text-xs opacity-60'> + Pastikan dokumen yang anda upload sudah benar + </span> + </div> + <div className=''> + <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} + </div> + )} + </div> + </div> + <div className='w-full grid grid-cols-2 gap-5'> + <div> + <label className='form-label text-nowrap'> + Foto Kantor (Tampak Depan) + </label> + <span className='text-xs opacity-60'> + Pastikan dokumen yang anda upload sudah benar + </span> + </div> + <div className=''> + <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} + </div> + )} + </div> + </div> + <div className='w-full grid grid-cols-2 gap-5'> + <div> + <label className='form-label text-nowrap'> + Tempat Bekerja + </label> + <span className='text-xs opacity-60'> + Pastikan dokumen yang anda upload sudah benar + </span> + </div> + <div className=''> + <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} + </div> + )} + </div> + </div> + <div></div> + </div> + </div> + </form> + <div className='w-1/2 mt-8 flex gap-3 flex-col'> + <div className='flex justify-between'> + <p className='font-bold'>Upload Progress</p> + <p> + <span className='text-red-500 font-bold'> + {parseInt((getJumlahDokumenDiisi() / 9) * 100)} % + </span> + <span className='ml-2 opacity-60'> + {getJumlahDokumenDiisi() >= 4 + ? getJumlahDokumenDiisi() == 9 + ? 'Selesai' + : 'Sedikit Lagi' + : ''} + </span> + </p> + </div> + {/* 50 keatas baru muncul kata kata sedikit lagi */} + <ProgressBar + completed={getJumlahDokumenDiisi()} + bgColor='#ef4444' + labelAlignment='outside' + isLabelVisible={false} + baseBgColor='#E5E7EB' + labelColor='#e80909' + labelSize='0' + maxCompleted={9} + height='14 px' + /> + <span className='opacity-75'> + Tingkatin sedikit lagi agar pengajuan tempo kamu dapat kami proses + dengan cepat + </span> + </div> + </div> + )} + {isMobile && ( + <div> + <h1 + className={`font-bold py-4 mt-8 ${ + isKonfirmasi ? 'text-xl' : 'text-xl' + }`} + > + Dokumen + </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'> <label className='form-label text-nowrap'> NIB (SIUP/TDP/SKDP) </label> - <span className='text-xs opacity-60'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div className=''> - <div className='flex flex-col items-start'> + <div className='flex flex-row gap-2'> <label htmlFor='dokumenNib' - className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' + 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' > - Upload Dokumen + {formDokumen?.dokumenNib?.name + ? 'Sudah Upload' + : 'Upload Dokumen'} </label> <input // value={formDokumen?.dokumenNib?.name} @@ -168,33 +583,32 @@ 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 truncate'> {formDokumen?.dokumenNib?.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.dokumenNib} </div> )} </div> - </div> - <div className='w-full grid grid-cols-2 gap-5'> - <div> + + <div className='w-full flex flex-col gap-2'> <label className='form-label text-nowrap'> NPWP Perusahaan </label> - <span className='text-xs opacity-60'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div className=''> - <div className='flex flex-col items-start'> + <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' + 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' > - Upload Dokumen + {formDokumen?.dokumenNpwp?.name + ? 'Sudah Upload' + : 'Upload Dokumen'} </label> <input // value={formDokumen.dokumenNpwp} @@ -208,292 +622,286 @@ 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 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> - <div className='w-full grid grid-cols-2 gap-5'> - <div> + + <div className='w-full flex flex-col gap-2'> <label className='form-label text-nowrap'>SPPKP</label> - <span className='text-xs opacity-60'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div className=''> - <div className='flex flex-col items-start'> + <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' + 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' > - Upload Dokumen + {formDokumen?.dokumenSppkp?.name + ? 'Sudah Upload' + : 'Upload Dokumen'} </label> <input - // value={formDokumen.dokumenSppkp} + // value={formDokumen.dokumenNpwp} id='dokumenSppkp' name='dokumenSppkp' type='file' ref={dokumenSppkpRef} + title=' ' className='hidden' aria-invalid={errorsDokumen.dokumenSppkp} onChange={handleInputChange} accept='.pdf,.png,.jpg,.jpeg' /> - <span className='mt-2 text-gray-600'> + <span className='mt-2 text-gray-600 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> - <div className='w-full grid grid-cols-2 gap-5'> - <div> + + <div className='w-full flex flex-col gap-2'> <label className='form-label text-nowrap'> Akta Perubahan <span className=' opacity-60'>(Opsional)</span> </label> - <span className='text-xs opacity-60'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div className=''> - <div className='flex flex-col items-start'> + <div className='flex flex-row gap-2'> <label htmlFor='dokumenAktaPerubahan' - className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' + 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' > - Upload Dokumen + {formDokumen?.dokumenAktaPerubahan?.name + ? 'Sudah Upload' + : 'Upload Dokumen'} </label> <input - // value={formDokumen.dokumenAktaPerubahan} + // value={formDokumen.dokumenNpwp} id='dokumenAktaPerubahan' name='dokumenAktaPerubahan' type='file' ref={dokumenAktaPerubahanRef} + title=' ' className='hidden' aria-invalid={errorsDokumen.dokumenAktaPerubahan} onChange={handleInputChange} accept='.pdf,.png,.jpg,.jpeg' /> - <span className='mt-2 text-gray-600'> + <span className='mt-2 text-gray-600 truncate'> {formDokumen?.dokumenAktaPerubahan?.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.dokumenAktaPerubahan} </div> )} </div> - </div> - <div className='w-full grid grid-cols-2 gap-5'> - <div> + + <div className='w-full flex flex-col gap-2'> <label className='form-label text-nowrap'> KTP Dirut/Direktur{' '} <span className=' opacity-60'>(Opsional)</span> </label> - <span className='text-xs opacity-60'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div className=''> - <div className='flex flex-col items-start'> + <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' + 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' > - Upload Dokumen + {formDokumen?.dokumenKtpDirut?.name + ? 'Sudah Upload' + : 'Upload Dokumen'} </label> <input - // value={formDokumen.dokumenKtpDirut} + // value={formDokumen.dokumenNpwp} id='dokumenKtpDirut' name='dokumenKtpDirut' type='file' ref={dokumenKtpDirutRef} + title=' ' className='hidden' aria-invalid={errorsDokumen.dokumenKtpDirut} onChange={handleInputChange} accept='.pdf,.png,.jpg,.jpeg' /> - <span className='mt-2 text-gray-600'> + <span className='mt-2 text-gray-600 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> - </div> - <div className='w-px bg-gray-300'></div> - <div className='kolom kanan w-full grid grid-rows-2 gap-10 '> - <div className='w-full grid grid-cols-2 gap-5'> - <div> + + <div className='w-full flex flex-col gap-2'> <label className='form-label text-nowrap'> Akta Pendirian <span className=' opacity-60'>(Opsional)</span> </label> - <span className='text-xs opacity-60'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div className=''> - <div className='flex flex-col items-start'> + <div className='flex flex-row gap-2'> <label htmlFor='dokumenAktaPendirian' - className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' + 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' > - Upload Dokumen + {formDokumen?.dokumenAktaPendirian?.name + ? 'Sudah Upload' + : 'Upload Dokumen'} </label> <input - // value={formDokumen.dokumenAktaPendirian} + // value={formDokumen.dokumenNpwp} id='dokumenAktaPendirian' name='dokumenAktaPendirian' type='file' ref={dokumenAktaPendirianRef} + title=' ' className='hidden' aria-invalid={errorsDokumen.dokumenAktaPendirian} onChange={handleInputChange} accept='.pdf,.png,.jpg,.jpeg' /> - <span className='mt-2 text-gray-600'> + <span className='mt-2 text-gray-600 truncate'> {formDokumen?.dokumenAktaPendirian?.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.dokumenAktaPendirian} </div> )} </div> - </div> - <div className='w-full grid grid-cols-2 gap-5'> - <div> + + <div className='w-full flex flex-col gap-2'> <label className='form-label text-nowrap'> - Laporan Keuangan + Laporan Keuangan{' '} <span className=' opacity-60'>(Opsional)</span> </label> - <span className='text-xs opacity-60'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div className=''> - <div className='flex flex-col items-start'> + <div className='flex flex-row gap-2'> <label htmlFor='dokumenLaporanKeuangan' - className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' + 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' > - Upload Dokumen + {formDokumen?.dokumenLaporanKeuangan?.name + ? 'Sudah Upload' + : 'Upload Dokumen'} </label> <input - // value={formDokumen.dokumenLaporanKeuangan} + // value={formDokumen.dokumenNpwp} id='dokumenLaporanKeuangan' name='dokumenLaporanKeuangan' type='file' ref={dokumenLaporanKeuanganRef} + title=' ' className='hidden' aria-invalid={errorsDokumen.dokumenLaporanKeuangan} onChange={handleInputChange} accept='.pdf,.png,.jpg,.jpeg' /> - <span className='mt-2 text-gray-600'> + <span className='mt-2 text-gray-600 truncate'> {formDokumen?.dokumenLaporanKeuangan?.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.dokumenLaporanKeuangan} </div> )} </div> - </div> - <div className='w-full grid grid-cols-2 gap-5'> - <div> + + <div className='w-full flex flex-col gap-2'> <label className='form-label text-nowrap'> Foto Kantor (Tampak Depan) </label> - <span className='text-xs opacity-60'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div className=''> - <div className='flex flex-col items-start'> + <div className='flex flex-row gap-2'> <label htmlFor='dokumenFotoKantor' - className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' + 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' > - Upload Dokumen + {formDokumen?.dokumenFotoKantor?.name + ? 'Sudah Upload' + : 'Upload Dokumen'} </label> <input - // value={formDokumen.dokumenFotoKantor} + // value={formDokumen.dokumenNpwp} id='dokumenFotoKantor' name='dokumenFotoKantor' type='file' ref={dokumenFotoKantorRef} + title=' ' className='hidden' aria-invalid={errorsDokumen.dokumenFotoKantor} onChange={handleInputChange} accept='.pdf,.png,.jpg,.jpeg' /> - <span className='mt-2 text-gray-600'> + <span className='mt-2 text-gray-600 truncate'> {formDokumen?.dokumenFotoKantor?.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.dokumenFotoKantor} </div> )} </div> - </div> - <div className='w-full grid grid-cols-2 gap-5'> - <div> + + <div className='w-full flex flex-col gap-2'> <label className='form-label text-nowrap'> Tempat Bekerja </label> - <span className='text-xs opacity-60'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div className=''> - <div className='flex flex-col items-start'> + <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' + 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' > - Upload Dokumen + {formDokumen?.dokumenTempatBekerja?.name + ? 'Sudah Upload' + : 'Upload Dokumen'} </label> <input - // value={formDokumen.dokumenTempatBekerja} + // value={formDokumen.dokumenNpwp} id='dokumenTempatBekerja' name='dokumenTempatBekerja' type='file' ref={dokumenTempatBekerjaRef} + title=' ' className='hidden' aria-invalid={errorsDokumen.dokumenTempatBekerja} onChange={handleInputChange} accept='.pdf,.png,.jpg,.jpeg' /> - <span className='mt-2 text-gray-600'> + <span className='mt-2 text-gray-600 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} @@ -501,42 +909,42 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { )} </div> </div> - <div></div> - </div> - </div> - </form> - <div className='w-1/2 mt-8 flex gap-3 flex-col'> - <div className='flex justify-between'> - <p className='font-bold'>Upload Progress</p> - <p> - <span className='text-red-500 font-bold'> - {parseInt((getJumlahDokumenDiisi() / 9) * 100)} % - </span> - <span className='ml-2 opacity-60'> - {getJumlahDokumenDiisi() >= 4 - ? getJumlahDokumenDiisi() == 9 - ? 'Selesai' - : 'Sedikit Lagi' - : ''} + </form> + <div className='w-full mt-8 flex gap-3 flex-col'> + <div className='flex justify-between'> + <p className='font-bold'>Upload Progress</p> + <p> + <span className='text-red-500 font-bold'> + {parseInt((getJumlahDokumenDiisi() / 9) * 100)} % + </span> + <span className='ml-2 opacity-60'> + {getJumlahDokumenDiisi() >= 4 + ? getJumlahDokumenDiisi() == 9 + ? 'Selesai' + : 'Sedikit Lagi' + : ''} + </span> + </p> + </div> + {/* 50 keatas baru muncul kata kata sedikit lagi */} + <ProgressBar + completed={getJumlahDokumenDiisi()} + bgColor='#ef4444' + labelAlignment='outside' + isLabelVisible={false} + baseBgColor='#E5E7EB' + labelColor='#e80909' + labelSize='0' + maxCompleted={9} + height='10px' + /> + <span className='opacity-75 text-xs text-red-500'> + Tingkatin sedikit lagi agar pengajuan tempo kamu dapat kami proses + dengan cepat </span> - </p> + </div> </div> - {/* 50 keatas baru muncul kata kata sedikit lagi */} - <ProgressBar - completed={getJumlahDokumenDiisi()} - bgColor='#ef4444' - labelAlignment='outside' - isLabelVisible={false} - baseBgColor='#E5E7EB' - labelColor='#e80909' - labelSize='0' - maxCompleted={9} - /> - <span className='opacity-75'> - Tingkatin sedikit lagi agar pengajuan tempo kamu dapat kami proses - dengan cepat - </span> - </div> + )} </> ); }; diff --git a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx index 04e00b53..80845a8f 100644 --- a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx +++ b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx @@ -15,8 +15,12 @@ import { CheckCircleIcon } from '@heroicons/react/24/outline'; import InformasiPerusahaan from './informasiPerusahaan'; import Pengiriman from './Pengiriman'; import KonfirmasiDokumen from './KonfirmasiDokumen'; +import useDevice from '@/core/hooks/useDevice'; +import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { const { control, watch, setValue, getValues } = useForm(); + const { isDesktop, isMobile } = useDevice(); + const [isOpen, setIsOpen] = useState(false); const [industries, setIndustries] = useState([]); const { formDokumen, @@ -170,30 +174,88 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { }; return ( <> - <form className='flex mt-4 flex-col w-full '> - <div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'> - <div className='w-full flex flex-col gap-5 '> - <div className=''> - <InformasiPerusahaan isKonfirmasi={true} /> + {isDesktop && ( + <form className='flex mt-4 flex-col w-full '> + <div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'> + <div className='w-full flex flex-col gap-5 '> + <div className=''> + <InformasiPerusahaan isKonfirmasi={true} /> + </div> + <div className='h-px bg-gray-300'></div> + <div className=''> + <KontakPerusahaan isKonfirmasi={true} /> + </div> </div> - <div className='h-px bg-gray-300'></div> - <div className=''> - <KontakPerusahaan isKonfirmasi={true} /> + + <div className='w-px bg-gray-300'></div> + <div className='w-full grid grid-rows-[1fc_auto_1fc] gap-5'> + <div> + <Pengiriman isKonfirmasi={true} /> + </div> + <div className='h-px bg-gray-300'></div> + <div> + <KonfirmasiDokumen isKonfirmasi={true} /> + </div> </div> </div> - - <div className='w-px bg-gray-300'></div> - <div className='w-full grid grid-rows-[1fc_auto_1fc] gap-5'> - <div> - <Pengiriman isKonfirmasi={true} /> + </form> + )} + {isMobile && ( + <form className='flex mt-8 py-4 flex-col w-full gap-4'> + <div className='flex flex-col gap-4'> + <div className='flex flex-row justify-between'> + <p className='font-semibold text-lg'>Informasi Perusahaan</p> + <div className='p-2 bg-gray-200'> + {isOpen ? ( + <ChevronUpIcon className='w-4' /> + ) : ( + <ChevronDownIcon className='w-4' /> + )} + </div> + </div> + <InformasiPerusahaan isKonfirmasi={true} /> + </div> + <div className='flex flex-col gap-4'> + <div className='flex flex-row justify-between'> + <p className='font-semibold text-lg'>Kontak Person</p> + <div className='p-2 bg-gray-200'> + {isOpen ? ( + <ChevronUpIcon className='w-4' /> + ) : ( + <ChevronDownIcon className='w-4' /> + )} + </div> </div> - <div className='h-px bg-gray-300'></div> - <div> - <KonfirmasiDokumen isKonfirmasi={true} /> + <KontakPerusahaan isKonfirmasi={true} /> + </div> + <div className='flex flex-col gap-4'> + <div className='flex flex-row justify-between'> + <p className='font-semibold text-lg'>Pengiriman</p> + <div className='p-2 bg-gray-200'> + {isOpen ? ( + <ChevronUpIcon className='w-4' /> + ) : ( + <ChevronDownIcon className='w-4' /> + )} + </div> + </div> + <Pengiriman isKonfirmasi={true} /> + </div> + <div className='flex flex-col gap-4'> + <div className='flex flex-row justify-between'> + <p className='font-semibold text-lg'>Dokumen</p> + <div className='p-2 bg-gray-200'> + {isOpen ? ( + <ChevronUpIcon className='w-4' /> + ) : ( + <ChevronDownIcon className='w-4' /> + )} + </div> </div> + <KonfirmasiDokumen isKonfirmasi={true} /> </div> - </div> - </form> + </form> + )} </> ); }; diff --git a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx index 3b3bba0f..112b85ef 100644 --- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx +++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx @@ -147,462 +147,471 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { }, [buttonSubmitClick]); return ( <> - <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'> - <label className='form-label text-nowrap'> - NIB (SIUP/TDP/SKDP) - </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?.dokumenNib?.name} - </span> - <div className='w-2/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' - > - Ubah + {isDesktop && ( + <div> + <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'> + <label className='form-label text-nowrap'> + NIB (SIUP/TDP/SKDP) </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 className='w-3/5'> + <div className='flex flex-row items-start justify-between'> + <span className='w-3/5 text-gray-600 truncate'> + {formDokumen?.dokumenNib?.name} + </span> + <div className='w-2/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' + > + Ubah + </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> - <div className='w-full flex flex-row items-center '> - <div className='w-2/5'> - <label className='form-label text-nowrap'>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'> - {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' - > - Ubah + </div> + <div className='w-full flex flex-row items-center '> + <div className='w-2/5'> + <label className='form-label text-nowrap'> + NPWP Perusahaan </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 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> + <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' + > + Ubah + </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> - {chekValid && ( - <div className='text-caption-2 text-danger-500 mt-1'> - {errorsDokumen.dokumenNpwp} + <div className='w-full flex flex-row items-center '> + <div className='w-2/5'> + <label className='form-label text-nowrap'>SPPKP</label> </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'> - {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' - > - Ubah - </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 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> + <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' + > + Ubah + </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> - {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'> - {' '} - 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?.dokumenAktaPerubahan?.name} - </span> - <div className='w-2/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' - > - Ubah + <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> </label> - <input - // value={formDokumen?.dokumenNib?.name} - id='dokumenAktaPerubahan' - name='dokumendokumenAktaPerubahanSppkp' - type='file' - title=' ' - ref={dokumenAktaPerubahanRef} - className='hidden' - aria-invalid={errorsDokumen.dokumenAktaPerubahan} - 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.dokumenAktaPerubahan.format, - formDokumen.dokumenAktaPerubahan.base64 - ) - } - > - <EyeIcon className={`w-4 ${isDesktop && ''}`} /> - </button> </div> - </div> - {chekValid && ( - <div className='text-caption-2 text-danger-500 mt-1'> - {errorsDokumen.dokumenAktaPerubahan} + <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> + <div className='w-2/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' + > + Ubah + </label> + <input + // value={formDokumen?.dokumenNib?.name} + id='dokumenAktaPerubahan' + name='dokumendokumenAktaPerubahanSppkp' + type='file' + title=' ' + ref={dokumenAktaPerubahanRef} + className='hidden' + aria-invalid={errorsDokumen.dokumenAktaPerubahan} + 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.dokumenAktaPerubahan.format, + formDokumen.dokumenAktaPerubahan.base64 + ) + } + > + <EyeIcon className={`w-4 ${isDesktop && ''}`} /> + </button> + </div> + </div> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsDokumen.dokumenAktaPerubahan} + </div> + )} </div> - )} - </div> - </div> + </div> - <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> - </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> - <div className='w-2/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' - > - Ubah + <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> </label> - <input - // value={formDokumen?.dokumenNib?.name} - id='dokumenKtpDirut' - name='dokumenKtpDirut' - type='file' - title=' ' - ref={dokumenKtpDirutRef} - className='hidden' - aria-invalid={errorsDokumen.dokumenKtpDirut} - 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.dokumenKtpDirut.format, - formDokumen.dokumenKtpDirut.base64 - ) - } - > - <EyeIcon className={`w-4 ${isDesktop && ''}`} /> - </button> </div> - </div> - {chekValid && ( - <div className='text-caption-2 text-danger-500 mt-1'> - {errorsDokumen.dokumenKtpDirut} + <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> + <div className='w-2/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' + > + Ubah + </label> + <input + // value={formDokumen?.dokumenNib?.name} + id='dokumenKtpDirut' + name='dokumenKtpDirut' + type='file' + title=' ' + ref={dokumenKtpDirutRef} + className='hidden' + aria-invalid={errorsDokumen.dokumenKtpDirut} + 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.dokumenKtpDirut.format, + formDokumen.dokumenKtpDirut.base64 + ) + } + > + <EyeIcon className={`w-4 ${isDesktop && ''}`} /> + </button> + </div> + </div> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsDokumen.dokumenKtpDirut} + </div> + )} </div> - )} - </div> - </div> + </div> - <div className='w-full flex flex-row items-center '> - <div className='w-2/5'> - <label className='form-label text-nowrap'> - Akta Pendirian <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?.dokumenAktaPendirian?.name} - </span> - <div className='w-2/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' - > - Ubah + <div className='w-full flex flex-row items-center '> + <div className='w-2/5'> + <label className='form-label text-nowrap'> + Akta Pendirian <span className=' opacity-60'>(Opsional)</span> </label> - <input - // value={formDokumen?.dokumenNib?.name} - id='dokumenAktaPendirian' - name='dokumenAktaPendirian' - type='file' - title=' ' - ref={dokumenAktaPendirianRef} - className='hidden' - aria-invalid={errorsDokumen.dokumenAktaPendirian} - 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.dokumenAktaPendirian.format, - formDokumen.dokumenAktaPendirian.base64 - ) - } - > - <EyeIcon className={`w-4 ${isDesktop && ''}`} /> - </button> </div> - </div> - {chekValid && ( - <div className='text-caption-2 text-danger-500 mt-1'> - {errorsDokumen.dokumenAktaPendirian} + <div className='w-3/5'> + <div className='flex flex-row items-start justify-between'> + <span className='w-3/5 text-gray-600 truncate'> + {formDokumen?.dokumenAktaPendirian?.name} + </span> + <div className='w-2/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' + > + Ubah + </label> + <input + // value={formDokumen?.dokumenNib?.name} + id='dokumenAktaPendirian' + name='dokumenAktaPendirian' + type='file' + title=' ' + ref={dokumenAktaPendirianRef} + className='hidden' + aria-invalid={errorsDokumen.dokumenAktaPendirian} + 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.dokumenAktaPendirian.format, + formDokumen.dokumenAktaPendirian.base64 + ) + } + > + <EyeIcon className={`w-4 ${isDesktop && ''}`} /> + </button> + </div> + </div> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsDokumen.dokumenAktaPendirian} + </div> + )} </div> - )} - </div> - </div> + </div> - <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> - </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> - <div className='w-2/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' - > - Ubah + <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> </label> - <input - // value={formDokumen?.dokumenNib?.name} - id='dokumenLaporanKeuangan' - name='dokumenLaporanKeuangan' - type='file' - title=' ' - ref={dokumenLaporanKeuanganRef} - className='hidden' - aria-invalid={errorsDokumen.dokumenLaporanKeuangan} - 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.dokumenLaporanKeuangan.format, - formDokumen.dokumenLaporanKeuangan.base64 - ) - } - > - <EyeIcon className={`w-4 ${isDesktop && ''}`} /> - </button> </div> - </div> - {chekValid && ( - <div className='text-caption-2 text-danger-500 mt-1'> - {errorsDokumen.dokumenLaporanKeuangan} + <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> + <div className='w-2/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' + > + Ubah + </label> + <input + // value={formDokumen?.dokumenNib?.name} + id='dokumenLaporanKeuangan' + name='dokumenLaporanKeuangan' + type='file' + title=' ' + ref={dokumenLaporanKeuanganRef} + className='hidden' + aria-invalid={errorsDokumen.dokumenLaporanKeuangan} + 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.dokumenLaporanKeuangan.format, + formDokumen.dokumenLaporanKeuangan.base64 + ) + } + > + <EyeIcon className={`w-4 ${isDesktop && ''}`} /> + </button> + </div> + </div> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsDokumen.dokumenLaporanKeuangan} + </div> + )} </div> - )} - </div> - </div> + </div> - <div className='w-full flex flex-row items-center '> - <div className='w-2/5'> - <label className='form-label text-nowrap'> - Foto Kantor (Tampak Depan) - </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?.dokumenFotoKantor?.name} - </span> - <div className='w-2/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' - > - Ubah + <div className='w-full flex flex-row items-center '> + <div className='w-2/5'> + <label className='form-label text-nowrap'> + Foto Kantor (Tampak Depan) </label> - <input - // value={formDokumen?.dokumenNib?.name} - id='dokumenFotoKantor' - name='dokumenFotoKantor' - type='file' - title=' ' - ref={dokumenFotoKantorRef} - className='hidden' - aria-invalid={errorsDokumen.dokumenFotoKantor} - 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.dokumenFotoKantor.format, - formDokumen.dokumenFotoKantor.base64 - ) - } - > - <EyeIcon className={`w-4 ${isDesktop && ''}`} /> - </button> </div> - </div> - {chekValid && ( - <div className='text-caption-2 text-danger-500 mt-1'> - {errorsDokumen.dokumenFotoKantor} + <div className='w-3/5'> + <div className='flex flex-row items-start justify-between'> + <span className='w-3/5 text-gray-600 truncate'> + {formDokumen?.dokumenFotoKantor?.name} + </span> + <div className='w-2/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' + > + Ubah + </label> + <input + // value={formDokumen?.dokumenNib?.name} + id='dokumenFotoKantor' + name='dokumenFotoKantor' + type='file' + title=' ' + ref={dokumenFotoKantorRef} + className='hidden' + aria-invalid={errorsDokumen.dokumenFotoKantor} + 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.dokumenFotoKantor.format, + formDokumen.dokumenFotoKantor.base64 + ) + } + > + <EyeIcon className={`w-4 ${isDesktop && ''}`} /> + </button> + </div> + </div> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsDokumen.dokumenFotoKantor} + </div> + )} </div> - )} - </div> - </div> + </div> - <div className='w-full flex flex-row items-center '> - <div className='w-2/5'> - <label className='form-label text-nowrap'>Tempat Bekerja</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> - <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' - > - Ubah + <div className='w-full flex flex-row items-center '> + <div className='w-2/5'> + <label className='form-label text-nowrap'> + Tempat Bekerja </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> - {/* <Image + </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> + <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' + > + Ubah + </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> + {/* <Image src={`data:image/png;base64, ${formDokumen.dokumenNib.base64}`} alt='Contoh SPPKP' className='w-full h-full ' @@ -610,37 +619,542 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { height={800} quality={85} /> */} - </div> - {chekValid && ( - <div className='text-caption-2 text-danger-500 mt-1'> - {errorsDokumen.dokumenTempatBekerja} + </div> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsDokumen.dokumenTempatBekerja} + </div> + )} </div> - )} - </div> + </div> + </form> </div> - </form> + )} + {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> + </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} + </span> + <div className='w-2/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' + > + Ubah + </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'>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'> + {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' + > + Ubah + </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-wrap'>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'> + {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' + > + Ubah + </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-wrap'> + {' '} + 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?.dokumenAktaPerubahan?.name} + </span> + <div className='w-2/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' + > + Ubah + </label> + <input + // value={formDokumen?.dokumenNib?.name} + id='dokumenAktaPerubahan' + name='dokumendokumenAktaPerubahanSppkp' + type='file' + title=' ' + ref={dokumenAktaPerubahanRef} + className='hidden' + aria-invalid={errorsDokumen.dokumenAktaPerubahan} + 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.dokumenAktaPerubahan.format, + formDokumen.dokumenAktaPerubahan.base64 + ) + } + > + <EyeIcon className={`w-4 ${isDesktop && ''}`} /> + </button> + </div> + </div> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsDokumen.dokumenAktaPerubahan} + </div> + )} + </div> + </div> + + <div className='w-full flex flex-row items-center '> + <div className='w-2/5'> + <label className='form-label text-wrap'> + 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?.dokumenKtpDirut?.name} + </span> + <div className='w-2/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' + > + Ubah + </label> + <input + // value={formDokumen?.dokumenNib?.name} + id='dokumenKtpDirut' + name='dokumenKtpDirut' + type='file' + title=' ' + ref={dokumenKtpDirutRef} + className='hidden' + aria-invalid={errorsDokumen.dokumenKtpDirut} + 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.dokumenKtpDirut.format, + formDokumen.dokumenKtpDirut.base64 + ) + } + > + <EyeIcon className={`w-4 ${isDesktop && ''}`} /> + </button> + </div> + </div> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsDokumen.dokumenKtpDirut} + </div> + )} + </div> + </div> + + <div className='w-full flex flex-row items-center '> + <div className='w-2/5'> + <label className='form-label text-wrap'> + Akta Pendirian <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?.dokumenAktaPendirian?.name} + </span> + <div className='w-2/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' + > + Ubah + </label> + <input + // value={formDokumen?.dokumenNib?.name} + id='dokumenAktaPendirian' + name='dokumenAktaPendirian' + type='file' + title=' ' + ref={dokumenAktaPendirianRef} + className='hidden' + aria-invalid={errorsDokumen.dokumenAktaPendirian} + 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.dokumenAktaPendirian.format, + formDokumen.dokumenAktaPendirian.base64 + ) + } + > + <EyeIcon className={`w-4 ${isDesktop && ''}`} /> + </button> + </div> + </div> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsDokumen.dokumenAktaPendirian} + </div> + )} + </div> + </div> + + <div className='w-full flex flex-row items-center '> + <div className='w-2/5'> + <label className='form-label text-wrap'> + Laporan Keuangan + <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> + <div className='w-2/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' + > + Ubah + </label> + <input + // value={formDokumen?.dokumenNib?.name} + id='dokumenLaporanKeuangan' + name='dokumenLaporanKeuangan' + type='file' + title=' ' + ref={dokumenLaporanKeuanganRef} + className='hidden' + aria-invalid={errorsDokumen.dokumenLaporanKeuangan} + 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.dokumenLaporanKeuangan.format, + formDokumen.dokumenLaporanKeuangan.base64 + ) + } + > + <EyeIcon className={`w-4 ${isDesktop && ''}`} /> + </button> + </div> + </div> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsDokumen.dokumenLaporanKeuangan} + </div> + )} + </div> + </div> - <BottomPopup - className='!container' - title='Dokumen Tittle' - active={isExample} - close={() => setIsExample(false)} - > - <div className='flex justify-center items-center p-2'> - <embed - src={`data:${format};base64,${base64}`} - type={format} - width='100%' - height='600px' - /> - {/* <iframe - src={`data:${format};base64,${base64}`} - width='100%' - height='600px' - title='PDF Document' - ></iframe> */} + <div className='w-full flex flex-row items-center '> + <div className='w-2/5'> + <label className='form-label text-wrap'> + Foto Kantor (Tampak Depan) + </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?.dokumenFotoKantor?.name} + </span> + <div className='w-2/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' + > + Ubah + </label> + <input + // value={formDokumen?.dokumenNib?.name} + id='dokumenFotoKantor' + name='dokumenFotoKantor' + type='file' + title=' ' + ref={dokumenFotoKantorRef} + className='hidden' + aria-invalid={errorsDokumen.dokumenFotoKantor} + 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.dokumenFotoKantor.format, + formDokumen.dokumenFotoKantor.base64 + ) + } + > + <EyeIcon className={`w-4 ${isDesktop && ''}`} /> + </button> + </div> + </div> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsDokumen.dokumenFotoKantor} + </div> + )} + </div> + </div> + + <div className='w-full flex flex-row items-center '> + <div className='w-2/5'> + <label className='form-label text-wrap'>Tempat Bekerja</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> + <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' + > + Ubah + </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> + {/* <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} + </div> + )} + </div> + </div> + </form> </div> - </BottomPopup> + )} + {isDesktop && ( + <BottomPopup + className='!container' + title='Dokumen' + active={isExample} + close={() => setIsExample(false)} + > + <div className='flex justify-center items-center p-2'> + {/* <embed + src={`data:${format};base64,${base64}`} + type={format} + width='100%' + height='600px' + /> */} + <iframe + src={`data:${format};base64,${base64}`} + width='100%' + height='100%' + title='Document' + ></iframe> + </div> + </BottomPopup> + )} + {isMobile && ( + <BottomPopup + className='!container' + title='Dokumen' + active={isExample} + close={() => setIsExample(false)} + > + <div className='flex justify-center items-center p-2'> + {/* <embed + src={`data:${format};base64,${base64}`} + type={format} + width='100%' + height='100%' + /> */} + <iframe + src={`data:${format};base64,${base64}`} + width='100%' + height='100%' + title='Document' + ></iframe> + </div> + </BottomPopup> + )} </> ); }; diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx index 091873a7..e7bfdbbe 100644 --- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx @@ -376,7 +376,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { <div className='text-sm'> <h1 className={`font-bold py-4 mt-8 ${ - isKonfirmasi ? 'text-xl' : 'text-xl' + isKonfirmasi ? 'hidden' : 'text-xl' }`} > Kontak Person diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index 7ed208db..d0e1fcc6 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -335,7 +335,11 @@ const PengajuanTempo = () => { </Tooltip> )} {currentStep == 5 && ( - <Button colorScheme='red' w='fit' onClick={handleDaftarTempo}> + <Button + colorScheme='red' + w={`${isMobile ? 'full' : 'fit'}`} + onClick={handleDaftarTempo} + > Daftar Tempo {<ChevronRightIcon className='w-5' />} </Button> )} diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx index 3ff14e18..842e43ef 100644 --- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx +++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx @@ -942,7 +942,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { <div className='text-sm'> <h1 className={`font-bold py-4 mt-8 ${ - isKonfirmasi ? 'text-xl' : 'text-xl' + isKonfirmasi ? 'hidden' : 'text-xl' }`} > Pengiriman diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx index 1b83358b..8cb3b0c3 100644 --- a/src/lib/pengajuan-tempo/component/Referensi.jsx +++ b/src/lib/pengajuan-tempo/component/Referensi.jsx @@ -165,7 +165,7 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => { return ( <> {isDesktop && ( - <div> + <div className='py-4'> <div className='flex flex-col justify-start'> <h1 className='font-bold text-2xl'> Referensi Supplier / Rekanan Bisnis Perusahaan{' '} diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx index 08dbbc8a..8a1b3508 100644 --- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -944,7 +944,7 @@ const InformasiPerusahaan = ({ <div className='text-sm'> <h1 className={`font-bold py-4 mt-8 ${ - isKonfirmasi ? 'text-xl' : 'text-xl' + isKonfirmasi ? 'hidden' : 'text-xl' }`} > Informasi Perusahaan @@ -1350,7 +1350,7 @@ const InformasiPerusahaan = ({ <div className={`flex flex-col gap-2 justify-between ${ - isKonfirmasi ? 'items-center' : 'items-start' + isKonfirmasi ? 'items-start' : 'items-start' }`} > <label className='form-label '> |