From c19c7eee924b70d25cb47d40fd7c8e00d5efa867 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 23 Oct 2024 17:07:37 +0700 Subject: update pengajuan tempo section konfirmasi --- .../component/KonfirmasiDokumen.jsx | 538 +++++++++++++++++++++ 1 file changed, 538 insertions(+) create mode 100644 src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx (limited to 'src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx') diff --git a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx new file mode 100644 index 00000000..528a7a4f --- /dev/null +++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx @@ -0,0 +1,538 @@ +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 Image from 'next/image'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { + const { control, watch } = useForm(); + const [isExample, setIsExample] = useState(false); + const [popUpTittle, setPopUpTittle] = useState(false); + const [popUpSource, setSource] = useState(false); + 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]; + // 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] + ); + 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]); + console.log('formDokumen', formDokumen); + return ( + <> + setIsExample(false)} + > +
+ Contoh SPPKP +
+ +

Dokumen

+
+
+
+ +
+
+
+ + {formDokumen?.dokumenNib?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenNib} +
+ )} +
+
+
+
+ +
+
+
+ + {formDokumen?.dokumenNpwp?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenNpwp} +
+ )} +
+
+
+
+ +
+
+
+ + {formDokumen?.dokumenSppkp?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenSppkp} +
+ )} +
+
+ +
+
+ +
+
+
+ + {formDokumen?.dokumenAktaPerubahan?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenAktaPerubahan} +
+ )} +
+
+ +
+
+ +
+
+
+ + {formDokumen?.dokumenKtpDirut?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenKtpDirut} +
+ )} +
+
+ +
+
+ +
+
+
+ + {formDokumen?.dokumenAktaPendirian?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenAktaPendirian} +
+ )} +
+
+ +
+
+ +
+
+
+ + {formDokumen?.dokumenLaporanKeuangan?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenLaporanKeuangan} +
+ )} +
+
+ +
+
+ +
+
+
+ + {formDokumen?.dokumenFotoKantor?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenFotoKantor} +
+ )} +
+
+ +
+
+ +
+
+
+ + {formDokumen?.dokumenTempatBekerja?.name} + +
+ + +
+
setIsExample(!isExample)} + className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400' + > + + {isDesktop && ( +

Lihat Contoh

+ )} +
+ Contoh SPPKP +
+ {chekValid && ( +
+ {errorsDokumen.dokumenTempatBekerja} +
+ )} +
+
+
+ + ); +}; + +export default KonfirmasiDokumen; -- cgit v1.2.3 From abcce110895d767a16fb961a65e7c78f9213ca0d Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 24 Oct 2024 17:11:32 +0700 Subject: update pengajuan tempo --- .../component/KonfirmasiDokumen.jsx | 227 +++++++++++++++++---- 1 file changed, 182 insertions(+), 45 deletions(-) (limited to 'src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx') diff --git a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx index 528a7a4f..753af29e 100644 --- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx +++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx @@ -7,11 +7,16 @@ import { toast } from 'react-hot-toast'; import getFileBase64 from '@/core/utils/getFileBase64'; import Image from 'next/image'; import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +import { EyeIcon } from '@heroicons/react/24/outline'; +import useDevice from '@/core/hooks/useDevice'; const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { const { control, watch } = useForm(); const [isExample, setIsExample] = useState(false); - const [popUpTittle, setPopUpTittle] = useState(false); - const [popUpSource, setSource] = useState(false); + const { isDesktop, isMobile } = useDevice(); + const [base64, setBase64] = useState(); + const [pdfData, setPdfData] = useState(); + const [format, setFormat] = useState(); + const [popUpSource, setSource] = useState(); const { formDokumen, errorsDokumen, @@ -25,17 +30,26 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { // updateFormDokumen(name, value); // validateDokumen(); // }; + const handleConfirmSubmit = (format, base64) => { + if (format == 'pdf') { + setFormat(`application/${format}`); + } else { + setFormat(`image/${format}`); + } + setBase64( + base64.trim().replace(/^"+/, '').replace(/"+$/, '').replaceAll('\\', '') + ); + setIsExample(!isExample); + }; 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 + fileExtension = file.name.split('.').pop()?.toLowerCase(); - // Check if the file extension is allowed if (!fileExtension || !allowedExtensions.includes(fileExtension)) { toast.error( 'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg', @@ -46,7 +60,6 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { return; } - // Check for file size if (file.size > 2000000) { toast.error('Maksimal ukuran file adalah 2MB', { duration: 4000 }); @@ -54,7 +67,6 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { return; } - // Convert file to Base64 fileBase64 = await getFileBase64(file); updateFormDokumen(name, file.name, fileExtension, fileBase64); validateDokumen(); @@ -138,26 +150,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { useEffect(() => { validateDokumen(); }, [buttonSubmitClick]); - console.log('formDokumen', formDokumen); return ( <> - setIsExample(false)} - > -
- Contoh SPPKP -
-

Dokumen

@@ -171,7 +165,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { {formDokumen?.dokumenNib?.name} -
+
{chekValid && ( @@ -208,7 +214,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { {formDokumen?.dokumenNpwp?.name} -
+
{chekValid && ( @@ -245,7 +263,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { {formDokumen?.dokumenSppkp?.name} -
+
{chekValid && ( @@ -286,7 +316,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { {formDokumen?.dokumenAktaPerubahan?.name} -
+
{chekValid && ( @@ -326,7 +368,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { {formDokumen?.dokumenKtpDirut?.name} -
+
{chekValid && ( @@ -366,7 +420,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { {formDokumen?.dokumenAktaPendirian?.name} -
+
{chekValid && ( @@ -407,7 +473,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { {formDokumen?.dokumenLaporanKeuangan?.name} -
+
{chekValid && ( @@ -447,7 +525,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { {formDokumen?.dokumenFotoKantor?.name} -
+
{chekValid && ( @@ -485,7 +575,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { {formDokumen?.dokumenTempatBekerja?.name} -
+
-
setIsExample(!isExample)} - className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400' - > - - {isDesktop && ( -

Lihat Contoh

- )} -
- Contoh SPPKP + /> */}
{chekValid && (
@@ -531,8 +624,52 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
+ + setIsExample(false)} + > +
+ + {/* */} +
+ ); }; export default KonfirmasiDokumen; + +{ + /* */ +} +{ + /* Contoh SPPKP */ +} -- cgit v1.2.3 From 5e3b8914037fcd7b5153d94f289079ac4dd60235 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 1 Nov 2024 09:35:35 +0700 Subject: update pengajuan tempo --- src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx | 5 ----- 1 file changed, 5 deletions(-) (limited to 'src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx') diff --git a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx index 753af29e..3b3bba0f 100644 --- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx +++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx @@ -25,11 +25,6 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { getJumlahDokumenDiisi, } = usePengajuanTempoStoreDokumen(); - // const handleInputChange = (event) => { - // const { name, value } = event.target; - // updateFormDokumen(name, value); - // validateDokumen(); - // }; const handleConfirmSubmit = (format, base64) => { if (format == 'pdf') { setFormat(`application/${format}`); -- cgit v1.2.3 From f751fa6d398a8aab96380c832da927c60c6ccbe4 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 4 Nov 2024 16:10:09 +0700 Subject: update pengajuan tempo mobile view fix --- .../component/KonfirmasiDokumen.jsx | 1418 +++++++++++++------- 1 file changed, 966 insertions(+), 452 deletions(-) (limited to 'src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx') 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 ( <> -

Dokumen

-
-
-
- -
-
-
- - {formDokumen?.dokumenNib?.name} - -
-