summaryrefslogtreecommitdiff
path: root/src/lib/pengajuan-tempo/component/Dokumen.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/pengajuan-tempo/component/Dokumen.jsx')
-rw-r--r--src/lib/pengajuan-tempo/component/Dokumen.jsx1350
1 files changed, 1350 insertions, 0 deletions
diff --git a/src/lib/pengajuan-tempo/component/Dokumen.jsx b/src/lib/pengajuan-tempo/component/Dokumen.jsx
new file mode 100644
index 00000000..00bb715a
--- /dev/null
+++ b/src/lib/pengajuan-tempo/component/Dokumen.jsx
@@ -0,0 +1,1350 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { Controller, set, useForm } from 'react-hook-form';
+import { usePengajuanTempoStoreDokumen } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+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';
+import imageCompression from 'browser-image-compression';
+const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
+ const { control, watch } = useForm();
+ const {
+ formDokumen,
+ errorsDokumen,
+ validateDokumen,
+ updateFormDokumen,
+ getJumlahDokumenDiisi,
+ } = usePengajuanTempoStoreDokumen();
+ const { isDesktop, isMobile } = useDevice();
+ // const handleInputChange = (event) => {
+ // const { name, value } = event.target;
+ // updateFormDokumen(name, value);
+ // validateDokumen();
+ // };
+ const handleInputChange = async (event) => {
+ let fileBase64 = '';
+ const { name } = event.target;
+ const file = event.target.files?.[0];
+ // Allowed file extensions
+ const allowedExtensions = ['pdf', 'png', 'jpg', 'jpeg'];
+ let fileExtension = '';
+ if (file) {
+ fileExtension = file.name.split('.').pop()?.toLowerCase(); // Extract file extension
+
+ // Check if the file extension is allowed
+ if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+ toast.error(
+ 'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg',
+ { duration: 4000 }
+ );
+
+ event.target.value = '';
+ return;
+ }
+
+ // Check for file size
+ if (file.size > 500000) {
+ try {
+ const toastId = toast.loading('mencoba mengompresi file...');
+ // Compress image file
+ const options = {
+ maxSizeMB: 0.5, // Target size in MB
+ maxWidthOrHeight: 1920, // Adjust as needed
+ useWebWorker: true,
+ };
+ const compressedFile = await imageCompression(file, options);
+ toast.success('berhasil mengompresi file', { duration: 4000 });
+ // Convert compressed file to Base64
+ fileBase64 = await getFileBase64(compressedFile);
+ updateFormDokumen(
+ name,
+ compressedFile.name,
+ fileExtension,
+ fileBase64
+ );
+ } catch (error) {
+ toast.error('Gagal mengompresi file', { duration: 4000 });
+ }
+ } else {
+ // Convert file to Base64
+ fileBase64 = await getFileBase64(file);
+ updateFormDokumen(name, file.name, fileExtension, fileBase64);
+ }
+ validateDokumen();
+ }
+ };
+
+ const isFormValid = useMemo(
+ () => Object.keys(errorsDokumen).length === 0,
+ [errorsDokumen]
+ );
+ const dokumenNibRef = useRef(null);
+ const dokumenNpwpRef = useRef(null);
+ const dokumenSppkpRef = useRef(null);
+ const dokumenAktaPerubahanRef = useRef(null);
+ const dokumenKtpDirutRef = useRef(null);
+ const dokumenAktaPendirianRef = useRef(null);
+ const dokumenLaporanKeuanganRef = useRef(null);
+ const dokumenFotoKantorRef = useRef(null);
+ const dokumenTempatBekerjaRef = useRef(null);
+
+ useEffect(() => {
+ validateDokumen();
+ // window.scrollTo({
+ // top: 0,
+ // behavior: 'smooth',
+ // });
+ const loadIndustries = async () => {
+ if (!isFormValid) {
+ const options = {
+ behavior: 'smooth',
+ block: 'center',
+ };
+ if (errorsDokumen.dokumenNib && dokumenNibRef.current) {
+ dokumenNibRef.current.scrollIntoView(options);
+ return;
+ }
+ if (errorsDokumen.dokumenNpwp && dokumenNpwpRef.current) {
+ dokumenNpwpRef.current.scrollIntoView(options);
+ return;
+ }
+ if (errorsDokumen.dokumenSppkp && dokumenSppkpRef.current) {
+ dokumenSppkpRef.current.scrollIntoView(options);
+ return;
+ }
+ if (
+ errorsDokumen.dokumenAktaPerubahan &&
+ dokumenAktaPerubahanRef.current
+ ) {
+ dokumenAktaPerubahanRef.current.scrollIntoView(options);
+ return;
+ }
+ if (errorsDokumen.dokumenKtpDirut && dokumenKtpDirutRef.current) {
+ dokumenKtpDirutRef.current.scrollIntoView(options);
+ return;
+ }
+ if (
+ errorsDokumen.dokumenAktaPendirian &&
+ dokumenAktaPendirianRef.current
+ ) {
+ dokumenAktaPendirianRef.current.scrollIntoView(options);
+ return;
+ }
+ if (
+ errorsDokumen.dokumenLaporanKeuangan &&
+ dokumenLaporanKeuanganRef.current
+ ) {
+ dokumenLaporanKeuanganRef.current.scrollIntoView(options);
+ return;
+ }
+ if (errorsDokumen.dokumenFotoKantor && dokumenFotoKantorRef.current) {
+ dokumenFotoKantorRef.current.scrollIntoView(options);
+ return;
+ }
+ if (
+ errorsDokumen.dokumenTempatBekerja &&
+ dokumenTempatBekerjaRef.current
+ ) {
+ dokumenTempatBekerjaRef.current.scrollIntoView(options);
+ return;
+ }
+ }
+ };
+ loadIndustries();
+ }, [buttonSubmitClick, chekValid]);
+
+ useEffect(() => {
+ validateDokumen();
+ }, [buttonSubmitClick]);
+ return (
+ <>
+ {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'
+ ref={dokumenNpwpRef}
+ >
+ <div>
+ <label className='form-label text-nowrap'>
+ NPWP Perusahaan
+ </label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenNpwp'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenNpwp?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenNpwp'
+ name='dokumenNpwp'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenNpwp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenNpwp?.name}
+ </span>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenNpwp}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div
+ className='w-full grid grid-cols-2 gap-5'
+ ref={dokumenSppkpRef}
+ >
+ <div>
+ <label className='form-label text-nowrap'>SPPKP</label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenSppkp'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenSppkp?.name.length > 0
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenSppkp}
+ id='dokumenSppkp'
+ name='dokumenSppkp'
+ type='file'
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenSppkp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenSppkp?.name}
+ </span>
+ </div>
+
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenSppkp}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div
+ className='w-full grid grid-cols-2 gap-5'
+ ref={dokumenNibRef}
+ >
+ <div>
+ <label className='form-label text-nowrap'>
+ NIB
+ <span className='text-danger-500 text-xl'>*</span>
+ </label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </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 min-w-40 text-center'
+ >
+ {formDokumen?.dokumenNib?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen?.dokumenNib?.name}
+ id='dokumenNib'
+ name='dokumenNib'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenNib}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {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'>
+ SIUP <span className=' opacity-60'>(Opsional)</span>{' '}
+ </label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start '>
+ <label
+ htmlFor='dokumenSiup'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenSiup?.name.length > 0
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenAktaPerubahan}
+ id='dokumenSiup'
+ name='dokumenSiup'
+ type='file'
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenAktaPerubahan}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenSiup?.name}
+ </span>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenSiup}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div className='w-full grid grid-cols-2 gap-5'>
+ <div>
+ <label className='form-label text-nowrap'>
+ TDP <span className=' opacity-60'>(Opsional)</span>{' '}
+ </label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenTdp'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenTdp?.name.length > 0
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenAktaPerubahan}
+ id='dokumenTdp'
+ name='dokumenTdp'
+ type='file'
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenTdp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenTdp?.name}
+ </span>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenTdp}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div className='w-full grid grid-cols-2 gap-5'>
+ <div>
+ <label className='form-label text-nowrap'>
+ SKDP <span className=' opacity-60'>(Opsional)</span>{' '}
+ </label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenSkdp'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenSkdp?.name.length > 0
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenAktaPerubahan}
+ id='dokumenSkdp'
+ name='dokumenSkdp'
+ type='file'
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenSkdp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenSkdp?.name}
+ </span>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenSkdp}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div className='w-full grid grid-cols-2 gap-5'>
+ <div>
+ <label className='form-label text-nowrap'>
+ SKT <span className=' opacity-60'>(Opsional)</span>{' '}
+ </label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenSkt'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenSkt?.name.length > 0
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenAktaPerubahan}
+ id='dokumenSkt'
+ name='dokumenSkt'
+ type='file'
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenSkt}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenSkt?.name}
+ </span>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenSkt}
+ </div>
+ )}
+ </div>
+ </div>
+ </div>
+ <div className='w-px bg-gray-300'></div>
+ <div
+ className='kolom kanan w-full grid grid-rows-2 gap-10 '
+ ref={dokumenAktaPendirianRef}
+ >
+ <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>{' '}
+ <span className='text-danger-500 text-xl'>*</span>
+ </label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenAktaPendirian'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenAktaPendirian?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenAktaPendirian}
+ id='dokumenAktaPendirian'
+ name='dokumenAktaPendirian'
+ type='file'
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenAktaPendirian}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {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'
+ ref={dokumenAktaPerubahanRef}
+ >
+ <div>
+ <label className='form-label text-nowrap'>
+ Akta Perubahan{' '}
+ <span className=' opacity-60'>(Opsional)</span>{' '}
+ </label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenAktaPerubahan'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenAktaPerubahan?.name.length > 0
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenAktaPerubahan}
+ id='dokumenAktaPerubahan'
+ name='dokumenAktaPerubahan'
+ type='file'
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenAktaPerubahan}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenAktaPerubahan?.name}
+ </span>
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenAktaPerubahan}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div
+ className='w-full grid grid-cols-2 gap-5'
+ ref={dokumenTempatBekerjaRef}
+ >
+ <div>
+ <label className='form-label text-nowrap'>
+ Foto tempat kerja
+ </label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenTempatBekerja'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenTempatBekerja?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenTempatBekerja}
+ id='dokumenTempatBekerja'
+ name='dokumenTempatBekerja'
+ type='file'
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenTempatBekerja}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenTempatBekerja?.name}
+ </span>
+ </div>
+
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenTempatBekerja}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div
+ className='w-full grid grid-cols-2 gap-5'
+ ref={dokumenFotoKantorRef}
+ >
+ <div>
+ <label className='form-label text-nowrap'>
+ Foto Kantor (Tampak Depan)
+ </label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenFotoKantor'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenFotoKantor?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenFotoKantor}
+ id='dokumenFotoKantor'
+ name='dokumenFotoKantor'
+ type='file'
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenFotoKantor}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {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'
+ ref={dokumenKtpDirutRef}
+ >
+ <div>
+ <label className='form-label text-nowrap'>
+ KTP Dirut/Direktur{' '}
+ <span className=' opacity-60'>(Opsional)</span>{' '}
+ <span className='text-danger-500 text-xl'>*</span>
+ </label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenKtpDirut'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenKtpDirut?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenKtpDirut}
+ id='dokumenKtpDirut'
+ name='dokumenKtpDirut'
+ type='file'
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenKtpDirut}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenKtpDirut?.name}
+ </span>
+ </div>
+
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenKtpDirut}
+ </div>
+ )}
+ </div>
+ </div>
+ <div
+ className='w-full grid grid-cols-2 gap-5'
+ ref={dokumenLaporanKeuanganRef}
+ >
+ <div>
+ <label className='form-label text-nowrap'>
+ Laporan Keuangan
+ <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ </div>
+ <div className=''>
+ <div className='flex flex-col items-start'>
+ <label
+ htmlFor='dokumenLaporanKeuangan'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {formDokumen?.dokumenLaporanKeuangan?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenLaporanKeuangan}
+ id='dokumenLaporanKeuangan'
+ name='dokumenLaporanKeuangan'
+ type='file'
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {formDokumen?.dokumenLaporanKeuangan?.name}
+ </span>
+ </div>
+
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenLaporanKeuangan}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div></div>
+ </div>
+ </div>
+ </form>
+ <div className='w-1/2 mt-8 flex gap-3 flex-col'>
+ <span className='opacity-75 text-danger-500 text-sm'>
+ *Jika anda ingin kredit limit lebih dari 25 Juta, harap lampirkan
+ dokumen yang diberi tanda bintang *)
+ </span>
+ <div className='flex justify-between'>
+ <p className='font-bold'>Upload Progress</p>
+ <p>
+ <span className='text-red-500 font-bold'>
+ {parseInt((getJumlahDokumenDiisi() / 13) * 100)} %
+ </span>
+ <span className='ml-2 opacity-60'>
+ {getJumlahDokumenDiisi() >= 5
+ ? getJumlahDokumenDiisi() == 13
+ ? '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={13}
+ height='14px'
+ />
+ <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' ref={dokumenNpwpRef}>
+ <label className='form-label text-nowrap'>
+ NPWP Perusahaan
+ </label>
+ <div className='flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenNpwp'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenNpwp?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenNpwp'
+ name='dokumenNpwp'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenNpwp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenNpwp?.name}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenNpwp}
+ </div>
+ )}
+ </div>
+
+ <div className='w-full flex flex-col gap-2' ref={dokumenSppkpRef}>
+ <label className='form-label text-nowrap'>SPPKP</label>
+ <div className='flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenSppkp'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenSppkp?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenSppkp'
+ name='dokumenSppkp'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenSppkp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenSppkp?.name}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenSppkp}
+ </div>
+ )}
+ </div>
+ <div className='w-full flex flex-col gap-2' ref={dokumenNibRef}>
+ <label className='form-label text-nowrap'>
+ NIB
+ <span className='text-danger-500 text-xl'>*</span>
+ </label>
+ <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 w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenNib?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen?.dokumenNib?.name}
+ id='dokumenNib'
+ name='dokumenNib'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenNib}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 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 className='w-full flex flex-col gap-2'>
+ <label className='form-label text-nowrap'>
+ SIUP <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ <div className='flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenSiup'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenSiup?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenSiup'
+ name='dokumenSiup'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenSiup}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenSiup?.name}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenSiup}
+ </div>
+ )}
+ </div>
+
+ <div className='w-full flex flex-col gap-2'>
+ <label className='form-label text-nowrap'>
+ TDP <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ <div className='flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenTdp'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenTdp?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenTdp'
+ name='dokumenTdp'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenTdp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenTdp?.name}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenTdp}
+ </div>
+ )}
+ </div>
+ <div className='w-full flex flex-col gap-2'>
+ <label className='form-label text-nowrap'>
+ SKDP <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ <div className='flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenSkdp'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenTdp?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenSkdp'
+ name='dokumenSkdp'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenSkdp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenSkdp?.name}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenSkdp}
+ </div>
+ )}
+ </div>
+ <div className='w-full flex flex-col gap-2'>
+ <label className='form-label text-nowrap'>
+ SKT <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ <div className='flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenSkt'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenSkt?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenSkt'
+ name='dokumenSkt'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenSkt}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenSkt?.name}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenSkdp}
+ </div>
+ )}
+ </div>
+ <div
+ className='w-full flex flex-col gap-2'
+ ref={dokumenAktaPendirianRef}
+ >
+ <label className='form-label text-nowrap'>
+ Akta Pendirian <span className=' opacity-60'>(Opsional)</span>{' '}
+ <span className='text-danger-500 text-xl'>*</span>
+ </label>
+ <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 w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenAktaPendirian?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenAktaPendirian'
+ name='dokumenAktaPendirian'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenAktaPendirian}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 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
+ className='w-full flex flex-col gap-2'
+ ref={dokumenAktaPerubahanRef}
+ >
+ <label className='form-label text-nowrap'>
+ Akta Perubahan <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ <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 w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenAktaPerubahan?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenAktaPerubahan'
+ name='dokumenAktaPerubahan'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenAktaPerubahan}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenAktaPerubahan?.name}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ 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
+ className='w-full flex flex-col gap-2'
+ ref={dokumenTempatBekerjaRef}
+ >
+ <label className='form-label text-nowrap'>
+ Foto tempat kerja
+ </label>
+ <div className='flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenTempatBekerja'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenTempatBekerja?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenTempatBekerja'
+ name='dokumenTempatBekerja'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenTempatBekerja}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenTempatBekerja?.name}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenTempatBekerja}
+ </div>
+ )}
+ </div>
+ <div
+ className='w-full flex flex-col gap-2'
+ ref={dokumenFotoKantorRef}
+ >
+ <label className='form-label text-nowrap'>
+ Foto Kantor (Tampak Depan)
+ </label>
+ <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 w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenFotoKantor?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenFotoKantor'
+ name='dokumenFotoKantor'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenFotoKantor}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 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
+ className='w-full flex flex-col gap-2'
+ ref={dokumenKtpDirutRef}
+ >
+ <label className='form-label text-nowrap'>
+ KTP Dirut/Direktur{' '}
+ <span className=' opacity-60'>(Opsional)</span>{' '}
+ <span className='text-danger-500 text-xl'>*</span>
+ </label>
+ <div className='flex flex-row gap-2'>
+ <label
+ htmlFor='dokumenKtpDirut'
+ className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenKtpDirut?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenKtpDirut'
+ name='dokumenKtpDirut'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenKtpDirut}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <span className='mt-2 text-gray-600 line-clamp-2 truncate'>
+ {formDokumen?.dokumenKtpDirut?.name}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsDokumen.dokumenKtpDirut}
+ </div>
+ )}
+ </div>
+
+ <div
+ className='w-full flex flex-col gap-2'
+ ref={dokumenLaporanKeuanganRef}
+ >
+ <label className='form-label text-nowrap'>
+ Laporan Keuangan{' '}
+ <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ <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 w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
+ >
+ {formDokumen?.dokumenLaporanKeuangan?.name
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenLaporanKeuangan'
+ name='dokumenLaporanKeuangan'
+ type='file'
+ title=' '
+ className='hidden'
+ aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ <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>
+ </form>
+ <div className='w-full mt-8 flex gap-3 flex-col'>
+ <span className='opacity-75 text-danger-500 text-xs'>
+ *Jika anda ingin kredit limit lebih dari 25 Juta, harap lampirkan
+ dokumen yang diberi tanda bintang *)
+ </span>
+ <div className='flex justify-between'>
+ <p className='font-bold'>Upload Progress</p>
+ <p>
+ <span className='text-red-500 font-bold'>
+ {parseInt((getJumlahDokumenDiisi() / 13) * 100)} %
+ </span>
+ <span className='ml-2 opacity-60'>
+ {getJumlahDokumenDiisi() >= 5
+ ? getJumlahDokumenDiisi() == 13
+ ? '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={13}
+ height='10px'
+ />
+ <span className='opacity-75 text-xs text-red-500'>
+ Tingkatin sedikit lagi agar pengajuan tempo kamu dapat kami proses
+ dengan cepat
+ </span>
+ </div>
+ </div>
+ )}
+ </>
+ );
+};
+
+export default Dokumen;
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-06 13:44:49 +0000