From d6ede238658d90315a5dc5b864f20037e8a776f6 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 22 Oct 2024 11:24:43 +0700 Subject: update & add section dokumen --- package.json | 1 + .../register/stores/usePengajuanTempoStore.ts | 89 +++++ src-migrate/types/tempo.ts | 13 + src-migrate/validations/tempo.ts | 47 +++ src/lib/pengajuan-tempo/component/Dokumen.jsx | 441 +++++++++++++++++++++ .../pengajuan-tempo/component/PengajuanTempo.jsx | 14 +- src/lib/pengajuan-tempo/component/Referensi.jsx | 13 +- 7 files changed, 613 insertions(+), 5 deletions(-) create mode 100644 src/lib/pengajuan-tempo/component/Dokumen.jsx diff --git a/package.json b/package.json index a846749c..54ce592f 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@emotion/styled": "^11.11.0", "@heroicons/react": "^2.0.13", "@hookform/resolvers": "^2.9.10", + "@ramonak/react-progress-bar": "^5.3.0", "@react-email/components": "^0.0.2", "@react-email/render": "^0.0.6", "@tailwindcss/line-clamp": "^0.4.2", diff --git a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts index 08053e42..9c97b8a0 100644 --- a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts +++ b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts @@ -4,12 +4,14 @@ import { TempoPropsKontakPerson, TempoPropsPengiriman, TempoPropsSupplier, + TempoPropsDokumen, } from '~/types/tempo'; import { TempoSchema, TempoSchemaKontakPerson, TempoSchemaPengiriman, TempoSchemaSupplier, + TempoSchemaDokumen, } from '~/validations/tempo'; import { boolean, ZodError } from 'zod'; @@ -262,6 +264,93 @@ export const usePengajuanTempoStorePengiriman = create< }, }), })); +type StateDokumen = { + formDokumen: TempoPropsDokumen; + errorsDokumen: { + [key in keyof TempoPropsDokumen]?: string; + }; +}; +type ActionDokumen = { + updateFormDokumen: ( + name: string, + fileName: string, + fileFormat: string, + value: string + ) => void; + + validateDokumen: () => void; + resetFormDokumen: () => void; + getJumlahDokumenDiisi: () => void; +}; +export const usePengajuanTempoStoreDokumen = create< + StateDokumen & ActionDokumen +>((set, get) => ({ + formDokumen: { + dokumenNib: { name: '', format: '', base64: '' }, + dokumenNpwp: { name: '', format: '', base64: '' }, + dokumenSppkp: { name: '', format: '', base64: '' }, + dokumenAktaPerubahan: { name: '', format: '', base64: '' }, + dokumenKtpDirut: { name: '', format: '', base64: '' }, + dokumenAktaPendirian: { name: '', format: '', base64: '' }, + dokumenLaporanKeuangan: { name: '', format: '', base64: '' }, + dokumenFotoKantor: { name: '', format: '', base64: '' }, + dokumenTempatBekerja: { name: '', format: '', base64: '' }, + }, + + // Memperbarui dokumen dengan name, format, dan base64 + updateFormDokumen: (name, fileName, fileFormat, value) => + set((state) => ({ + formDokumen: { + ...state.formDokumen, + [name]: { + name: fileName, + format: fileFormat, + base64: value, + }, + }, + })), + + errorsDokumen: {}, + validateDokumen: () => { + try { + TempoSchemaDokumen.parse(get().formDokumen); + set({ errorsDokumen: {} }); + } catch (error) { + if (error instanceof ZodError) { + const errorsDokumen: StateDokumen['errorsDokumen'] = {}; + error.errors.forEach( + (e) => + (errorsDokumen[e.path[0] as keyof TempoPropsDokumen] = e.message) + ); + set({ errorsDokumen }); + } + } + }, + + getJumlahDokumenDiisi: () => { + const formDokumen = get().formDokumen; + // Menghitung jumlah field yang base64 tidak kosong + const jumlahTerisi = Object.values(formDokumen).filter( + (dokumen) => dokumen.base64 !== '' + ).length; + return jumlahTerisi; + }, + + resetFormDokumen: () => + set({ + formDokumen: { + dokumenNib: { name: '', format: '', base64: '' }, + dokumenNpwp: { name: '', format: '', base64: '' }, + dokumenSppkp: { name: '', format: '', base64: '' }, + dokumenAktaPerubahan: { name: '', format: '', base64: '' }, + dokumenKtpDirut: { name: '', format: '', base64: '' }, + dokumenAktaPendirian: { name: '', format: '', base64: '' }, + dokumenLaporanKeuangan: { name: '', format: '', base64: '' }, + dokumenFotoKantor: { name: '', format: '', base64: '' }, + dokumenTempatBekerja: { name: '', format: '', base64: '' }, + }, + }), +})); type StateSupplier = { formSupplier: TempoPropsSupplier[]; diff --git a/src-migrate/types/tempo.ts b/src-migrate/types/tempo.ts index 17c4c906..d928d9c3 100644 --- a/src-migrate/types/tempo.ts +++ b/src-migrate/types/tempo.ts @@ -3,6 +3,7 @@ import { TempoSchemaKontakPerson, TempoSchemaPengiriman, TempoSchemaSupplier, + TempoSchemaDokumen, } from '~/validations/tempo'; import { OdooApiRes } from './odoo'; import { z } from 'zod'; @@ -68,6 +69,17 @@ export type tempoPropsSupplier = { durasiTempo: string; creditLimit: string; }; +export type tempoPropsDokumen = { + dokumenNib: { name: string; format: string; base64: string }; + dokumenNpwp: { name: string; format: string; base64: string }; + dokumenSppkp: { name: string; format: string; base64: string }; + dokumenAktaPerubahan: { name: string; format: string; base64: string }; + dokumenKtpDirut: { name: string; format: string; base64: string }; + dokumenAktaPendirian: { name: string; format: string; base64: string }; + dokumenLaporanKeuangan: { name: string; format: string; base64: string }; + dokumenFotoKantor: { name: string; format: string; base64: string }; + dokumenTempatBekerja: { name: string; format: string; base64: string }; +}; export type TempoApiProps = OdooApiRes; @@ -75,6 +87,7 @@ export type TempoProps = z.infer; export type TempoPropsKontakPerson = z.infer; export type TempoPropsPengiriman = z.infer; export type TempoPropsSupplier = z.infer; +export type TempoPropsDokumen = z.infer; export type TempoResApiProps = { Tempo: boolean; diff --git a/src-migrate/validations/tempo.ts b/src-migrate/validations/tempo.ts index 86bcf6d1..ccef8d83 100644 --- a/src-migrate/validations/tempo.ts +++ b/src-migrate/validations/tempo.ts @@ -107,3 +107,50 @@ export const TempoSchemaSupplier = z.object({ durasiTempo: z.string().min(1, { message: 'Durasi tempo harus diisi' }), creditLimit: z.string().min(1, { message: 'Limit Kredit harus diisi' }), }); +export const TempoSchemaDokumen = z.object({ + dokumenNib: z.object({ + name: z.string().min(1, { message: 'Nama file harus diisi' }), + format: z.string().min(1, { message: 'Format file harus diisi' }), + base64: z.string().min(1, { message: 'Dokumen harus diisi' }), + }), + dokumenNpwp: z.object({ + name: z.string().min(1, { message: 'Nama file harus diisi' }), + format: z.string().min(1, { message: 'Format file harus diisi' }), + base64: z.string().min(1, { message: 'Dokumen harus diisi' }), + }), + dokumenSppkp: z.object({ + name: z.string().optional(), + format: z.string().optional(), + base64: z.string().optional(), + }), + dokumenAktaPerubahan: z.object({ + name: z.string().optional(), + format: z.string().optional(), + base64: z.string().optional(), + }), + dokumenKtpDirut: z.object({ + name: z.string().optional(), + format: z.string().optional(), + base64: z.string().optional(), + }), + dokumenAktaPendirian: z.object({ + name: z.string().optional(), + format: z.string().optional(), + base64: z.string().optional(), + }), + dokumenLaporanKeuangan: z.object({ + name: z.string().optional(), + format: z.string().optional(), + base64: z.string().optional(), + }), + dokumenFotoKantor: z.object({ + name: z.string().min(1, { message: 'Nama file harus diisi' }), + format: z.string().min(1, { message: 'Format file harus diisi' }), + base64: z.string().min(1, { message: 'Dokumen harus diisi' }), + }), + dokumenTempatBekerja: z.object({ + name: z.string().min(1, { message: 'Nama file harus diisi' }), + format: z.string().min(1, { message: 'Format file harus diisi' }), + base64: z.string().min(1, { message: 'Dokumen harus diisi' }), + }), +}); 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 ( + <> +
+

Dokumen

+
+
+
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenNib} +
+ )} +
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenNpwp} +
+ )} +
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenSppkp} +
+ )} +
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenAktaPerubahan} +
+ )} +
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenKtpDirut} +
+ )} +
+
+
+
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenAktaPendirian} +
+ )} +
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenLaporanKeuangan} +
+ )} +
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenFotoKantor} +
+ )} +
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenTempatBekerja} +
+ )} +
+
+
+
+
+
+
+
+

Upload Progress

+

+ + {parseInt((getJumlahDokumenDiisi() / 9) * 100)} % + + + {getJumlahDokumenDiisi() > 5 + ? getJumlahDokumenDiisi() == 9 + ? 'Selesai' + : 'Sedikit Lagi' + : ''} + +

+
+ {/* 50 keatas baru muncul kata kata sedikit lagi */} + + + Tingkatin sedikit lagi agar pengajuan tempo kamu dapat kami proses + dengan cepat + +
+ + ); +}; + +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 = () => { />, , , + ,
Dokumen
,
Konfirmasi
, ]; @@ -53,7 +58,7 @@ const PengajuanTempo = () => { errorsKontakPerson, errorsPengiriman, errorsSupplier, -
Dokumen
, + errorsDokumen,
Konfirmasi
, ]; const stepDivsForm = [ @@ -61,7 +66,7 @@ const PengajuanTempo = () => { formKontakPerson, formPengiriman, formSupplier, -
Dokumen
, + formDokumen,
Konfirmasi
, ]; const stepDivsUpdateForm = [ @@ -69,7 +74,7 @@ const PengajuanTempo = () => { updateFormKontakPerson, updateFormPengiriman, updateFormSupplier, -
Dokumen
, + updateFormDokumen,
Konfirmasi
, ]; 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 ( -- cgit v1.2.3