<iman> update pengajuan tempo section konfirmasi

1 files changed, 538 insertions, 0 deletions

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 (
+    <>
+      <BottomPopup
+        className=''
+        title='Dokumen Tittle'
+        active={isExample}
+        close={() => setIsExample(false)}
+      >
+        <div className='flex p-2'>
+          <Image
+            src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
+            alt='Contoh SPPKP'
+            className='w-full h-full '
+            width={800}
+            height={800}
+            quality={85}
+          />
+        </div>
+      </BottomPopup>
+      <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 '>
+                <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'
+                />
+              </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-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 '>
+                <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'
+                />
+              </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-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 '>
+                <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'
+                />
+              </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 '>
+                <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'
+                />
+              </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-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 '>
+                <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'
+                />
+              </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-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 '>
+                <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'
+                />
+              </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-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 '>
+                <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'
+                />
+              </div>
+            </div>
+            {chekValid && (
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errorsDokumen.dokumenLaporanKeuangan}
+              </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 '>
+                <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'
+                />
+              </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-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 '>
+                <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'
+                />
+              </div>
+              <div
+                onClick={() => setIsExample(!isExample)}
+                className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+              >
+                <EyeIcon className={`w-4 ${isDesktop && 'mr-2'}`} />
+                {isDesktop && (
+                  <p className='font-light text-xs'>Lihat Contoh</p>
+                )}
+              </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>
+    </>
+  );
+};
+
+export default KonfirmasiDokumen;