summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/pengajuan-tempo/component/Dokumen.jsx441
-rw-r--r--src/lib/pengajuan-tempo/component/PengajuanTempo.jsx14
-rw-r--r--src/lib/pengajuan-tempo/component/Referensi.jsx13
3 files changed, 463 insertions, 5 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..65220b27
--- /dev/null
+++ b/src/lib/pengajuan-tempo/component/Dokumen.jsx
@@ -0,0 +1,441 @@
+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';
+const Dokumen = ({ chekValid, buttonSubmitClick }) => {
+ const { control, watch } = useForm();
+ const {
+ formDokumen,
+ errorsDokumen,
+ validateDokumen,
+ updateFormDokumen,
+ getJumlahDokumenDiisi,
+ } = usePengajuanTempoStoreDokumen();
+
+ // 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];
+ console.log('file', file);
+ // 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 > 2000000) {
+ toast.error('Maksimal ukuran file adalah 2MB', { duration: 4000 });
+
+ event.target.value = '';
+ return;
+ }
+
+ // Convert file to Base64
+ fileBase64 = await getFileBase64(file);
+ updateFormDokumen(name, file.name, fileExtension, fileBase64);
+ validateDokumen();
+ }
+ };
+
+ const isFormValid = useMemo(
+ () => Object.keys(errorsDokumen).length === 0,
+ [errorsDokumen]
+ );
+ console.log('formDokumen', formDokumen?.dokumenNib?.name);
+ 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(() => {
+ 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 (
+ <>
+ <div className='flex justify-start'>
+ <h1 className='font-bold'>Dokumen</h1>
+ </div>
+ <form className='flex mt-4 flex-col w-full '>
+ <div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'>
+ <div className='kolom-kiri w-full grid grid-rows-2 gap-10 '>
+ <div className='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=''>
+ <input
+ // value={formDokumen?.dokumenNib?.name}
+ id='dokumenNib'
+ name='dokumenNib'
+ type='file'
+ ref={dokumenNibRef}
+ className='form-input'
+ aria-invalid={errorsDokumen.dokumenNib}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ {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=''>
+ <input
+ // value={formDokumen.dokumenNpwp}
+ id='dokumenNpwp'
+ name='dokumenNpwp'
+ type='file'
+ ref={dokumenNpwpRef}
+ className='form-input'
+ aria-invalid={errorsDokumen.dokumenNpwp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ {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=''>
+ <input
+ // value={formDokumen.dokumenSppkp}
+ id='dokumenSppkp'
+ name='dokumenSppkp'
+ type='file'
+ ref={dokumenSppkpRef}
+ className='form-input'
+ aria-invalid={errorsDokumen.dokumenSppkp}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ {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=''>
+ <input
+ // value={formDokumen.dokumenAktaPerubahan}
+ id='dokumenAktaPerubahan'
+ name='dokumenAktaPerubahan'
+ type='file'
+ ref={dokumenAktaPerubahanRef}
+ className='form-input'
+ aria-invalid={errorsDokumen.dokumenAktaPerubahan}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ {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=''>
+ <input
+ // value={formDokumen.dokumenKtpDirut}
+ id='dokumenKtpDirut'
+ name='dokumenKtpDirut'
+ type='file'
+ ref={dokumenKtpDirutRef}
+ className='form-input'
+ aria-invalid={errorsDokumen.dokumenKtpDirut}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ {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=''>
+ <input
+ // value={formDokumen.dokumenAktaPendirian}
+ id='dokumenAktaPendirian'
+ name='dokumenAktaPendirian'
+ type='file'
+ ref={dokumenAktaPendirianRef}
+ className='form-input'
+ aria-invalid={errorsDokumen.dokumenAktaPendirian}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ {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=''>
+ <input
+ // value={formDokumen.dokumenLaporanKeuangan}
+ id='dokumenLaporanKeuangan'
+ name='dokumenLaporanKeuangan'
+ type='file'
+ ref={dokumenLaporanKeuanganRef}
+ className='form-input'
+ aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ {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=''>
+ <input
+ // value={formDokumen.dokumenFotoKantor}
+ id='dokumenFotoKantor'
+ name='dokumenFotoKantor'
+ type='file'
+ ref={dokumenFotoKantorRef}
+ className='form-input'
+ aria-invalid={errorsDokumen.dokumenFotoKantor}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ {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=''>
+ <input
+ // value={formDokumen.dokumenTempatBekerja}
+ id='dokumenTempatBekerja'
+ name='dokumenTempatBekerja'
+ type='file'
+ ref={dokumenTempatBekerjaRef}
+ className='form-input'
+ aria-invalid={errorsDokumen.dokumenTempatBekerja}
+ onChange={handleInputChange}
+ accept='.pdf,.png,.jpg,.jpeg'
+ />
+ {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() > 5
+ ? 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}
+ />
+ <span className='opacity-75'>
+ Tingkatin sedikit lagi agar pengajuan tempo kamu dapat kami proses
+ dengan cepat
+ </span>
+ </div>
+ </>
+ );
+};
+
+export default Dokumen;
diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
index 2ab7c21a..238c5e4e 100644
--- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
+++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
@@ -5,12 +5,14 @@ import InformasiPerusahaan from './informasiPerusahaan';
import KontakPerusahaan from './KontakPerusahaan';
import Pengiriman from './Pengiriman';
import Referensi from './Referensi';
+import Dokumen from './Dokumen';
import { Controller, useForm } from 'react-hook-form';
import {
usePengajuanTempoStore,
usePengajuanTempoStoreKontakPerson,
usePengajuanTempoStorePengiriman,
usePengajuanTempoStoreSupplier,
+ usePengajuanTempoStoreDokumen,
} from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
const PengajuanTempo = () => {
@@ -18,6 +20,8 @@ const PengajuanTempo = () => {
const NUMBER_OF_STEPS = 6;
const { form, errors, validate, updateForm } = usePengajuanTempoStore();
const { control, watch, setValue } = useForm();
+ const { formDokumen, errorsDokumen, validateDokumen, updateFormDokumen } =
+ usePengajuanTempoStoreDokumen();
const {
formKontakPerson,
errorsKontakPerson,
@@ -45,6 +49,7 @@ const PengajuanTempo = () => {
/>,
<Pengiriman chekValid={notValid} buttonSubmitClick={buttonSubmitClick} />,
<Referensi chekValid={notValid} buttonSubmitClick={buttonSubmitClick} />,
+ <Dokumen chekValid={notValid} buttonSubmitClick={buttonSubmitClick} />,
<div>Dokumen</div>,
<div>Konfirmasi</div>,
];
@@ -53,7 +58,7 @@ const PengajuanTempo = () => {
errorsKontakPerson,
errorsPengiriman,
errorsSupplier,
- <div>Dokumen</div>,
+ errorsDokumen,
<div>Konfirmasi</div>,
];
const stepDivsForm = [
@@ -61,7 +66,7 @@ const PengajuanTempo = () => {
formKontakPerson,
formPengiriman,
formSupplier,
- <div>Dokumen</div>,
+ formDokumen,
<div>Konfirmasi</div>,
];
const stepDivsUpdateForm = [
@@ -69,7 +74,7 @@ const PengajuanTempo = () => {
updateFormKontakPerson,
updateFormPengiriman,
updateFormSupplier,
- <div>Dokumen</div>,
+ updateFormDokumen,
<div>Konfirmasi</div>,
];
const stepLabels = [
@@ -89,6 +94,7 @@ const PengajuanTempo = () => {
validate();
validateKontakPerson();
validatePengiriman();
+ validateDokumen();
window.scrollTo({
top: 0,
@@ -108,6 +114,8 @@ const PengajuanTempo = () => {
});
}
}
+ if (formSupplier) {
+ }
}, [currentStep]);
const goToNextStep = () => {
if (!isFormValid) {
diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index e2a341e6..dd8b66ad 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -152,9 +152,18 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
useEffect(() => {
updateFormSupplier(supplierData);
}, [buttonSubmit]);
+ const getFromLocalStorage = (key) => {
+ const itemStr = localStorage.getItem(key);
+ if (!itemStr) return null;
+
+ const item = JSON.parse(itemStr);
+ return item;
+ };
useEffect(() => {
- if (formSupplier) {
- setSupplierData(formSupplier);
+ const cachedData = getFromLocalStorage('Referensi');
+ if (cachedData) {
+ setSupplierData(cachedData);
+ updateFormSupplier(cachedData);
}
}, [buttonSubmitClick]);
return (
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:18:22 +0000