From c19c7eee924b70d25cb47d40fd7c8e00d5efa867 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 23 Oct 2024 17:07:37 +0700
Subject: <iman> 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 (
+    <>
+      <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;
-- 
cgit v1.2.3


From abcce110895d767a16fb961a65e7c78f9213ca0d Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 24 Oct 2024 17:11:32 +0700
Subject: <iman> 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 (
     <>
-      <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 '>
@@ -171,7 +165,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenNib?.name}
               </span>
-              <div className='w-2/5 '>
+              <div className='w-2/5 flex flex-row gap-2'>
                 <label
                   htmlFor='dokumenNib'
                   className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
@@ -190,6 +184,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   onChange={handleInputChange}
                   accept='.pdf,.png,.jpg,.jpeg'
                 />
+                <button
+                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                  type='button'
+                  onClick={() =>
+                    handleConfirmSubmit(
+                      formDokumen.dokumenNib.format,
+                      formDokumen.dokumenNib.base64
+                    )
+                  }
+                >
+                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                </button>
               </div>
             </div>
             {chekValid && (
@@ -208,7 +214,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenNpwp?.name}
               </span>
-              <div className='w-2/5 '>
+              <div className='w-2/5 flex flex-row gap-2'>
                 <label
                   htmlFor='dokumenNpwp'
                   className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
@@ -227,6 +233,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   onChange={handleInputChange}
                   accept='.pdf,.png,.jpg,.jpeg'
                 />
+                <button
+                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                  type='button'
+                  onClick={() =>
+                    handleConfirmSubmit(
+                      formDokumen.dokumenNpwp.format,
+                      formDokumen.dokumenNpwp.base64
+                    )
+                  }
+                >
+                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                </button>
               </div>
             </div>
             {chekValid && (
@@ -245,7 +263,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenSppkp?.name}
               </span>
-              <div className='w-2/5 '>
+              <div className='w-2/5 flex flex-row gap-2'>
                 <label
                   htmlFor='dokumenSppkp'
                   className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
@@ -264,6 +282,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   onChange={handleInputChange}
                   accept='.pdf,.png,.jpg,.jpeg'
                 />
+                <button
+                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                  type='button'
+                  onClick={() =>
+                    handleConfirmSubmit(
+                      formDokumen.dokumenSppkp.format,
+                      formDokumen.dokumenSppkp.base64
+                    )
+                  }
+                >
+                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                </button>
               </div>
             </div>
             {chekValid && (
@@ -286,7 +316,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenAktaPerubahan?.name}
               </span>
-              <div className='w-2/5 '>
+              <div className='w-2/5 flex flex-row gap-2'>
                 <label
                   htmlFor='dokumenAktaPerubahan'
                   className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
@@ -305,6 +335,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   onChange={handleInputChange}
                   accept='.pdf,.png,.jpg,.jpeg'
                 />
+                <button
+                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                  type='button'
+                  onClick={() =>
+                    handleConfirmSubmit(
+                      formDokumen.dokumenAktaPerubahan.format,
+                      formDokumen.dokumenAktaPerubahan.base64
+                    )
+                  }
+                >
+                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                </button>
               </div>
             </div>
             {chekValid && (
@@ -326,7 +368,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenKtpDirut?.name}
               </span>
-              <div className='w-2/5 '>
+              <div className='w-2/5 flex flex-row gap-2'>
                 <label
                   htmlFor='dokumenKtpDirut'
                   className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
@@ -345,6 +387,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   onChange={handleInputChange}
                   accept='.pdf,.png,.jpg,.jpeg'
                 />
+                <button
+                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                  type='button'
+                  onClick={() =>
+                    handleConfirmSubmit(
+                      formDokumen.dokumenKtpDirut.format,
+                      formDokumen.dokumenKtpDirut.base64
+                    )
+                  }
+                >
+                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                </button>
               </div>
             </div>
             {chekValid && (
@@ -366,7 +420,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenAktaPendirian?.name}
               </span>
-              <div className='w-2/5 '>
+              <div className='w-2/5 flex flex-row gap-2'>
                 <label
                   htmlFor='dokumenAktaPendirian'
                   className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
@@ -385,6 +439,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   onChange={handleInputChange}
                   accept='.pdf,.png,.jpg,.jpeg'
                 />
+                <button
+                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                  type='button'
+                  onClick={() =>
+                    handleConfirmSubmit(
+                      formDokumen.dokumenAktaPendirian.format,
+                      formDokumen.dokumenAktaPendirian.base64
+                    )
+                  }
+                >
+                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                </button>
               </div>
             </div>
             {chekValid && (
@@ -407,7 +473,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenLaporanKeuangan?.name}
               </span>
-              <div className='w-2/5 '>
+              <div className='w-2/5 flex flex-row gap-2'>
                 <label
                   htmlFor='dokumenLaporanKeuangan'
                   className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
@@ -426,6 +492,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   onChange={handleInputChange}
                   accept='.pdf,.png,.jpg,.jpeg'
                 />
+                <button
+                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                  type='button'
+                  onClick={() =>
+                    handleConfirmSubmit(
+                      formDokumen.dokumenLaporanKeuangan.format,
+                      formDokumen.dokumenLaporanKeuangan.base64
+                    )
+                  }
+                >
+                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                </button>
               </div>
             </div>
             {chekValid && (
@@ -447,7 +525,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenFotoKantor?.name}
               </span>
-              <div className='w-2/5 '>
+              <div className='w-2/5 flex flex-row gap-2'>
                 <label
                   htmlFor='dokumenFotoKantor'
                   className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
@@ -466,6 +544,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   onChange={handleInputChange}
                   accept='.pdf,.png,.jpg,.jpeg'
                 />
+                <button
+                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                  type='button'
+                  onClick={() =>
+                    handleConfirmSubmit(
+                      formDokumen.dokumenFotoKantor.format,
+                      formDokumen.dokumenFotoKantor.base64
+                    )
+                  }
+                >
+                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                </button>
               </div>
             </div>
             {chekValid && (
@@ -485,7 +575,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenTempatBekerja?.name}
               </span>
-              <div className='w-2/5 '>
+              <div className='w-2/5 flex flex-row gap-2'>
                 <label
                   htmlFor='dokumenTempatBekerja'
                   className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
@@ -504,24 +594,27 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   onChange={handleInputChange}
                   accept='.pdf,.png,.jpg,.jpeg'
                 />
+                <button
+                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                  type='button'
+                  onClick={() =>
+                    handleConfirmSubmit(
+                      formDokumen.dokumenTempatBekerja.format,
+                      formDokumen.dokumenTempatBekerja.base64
+                    )
+                  }
+                >
+                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                </button>
               </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
+              {/* <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'>
@@ -531,8 +624,52 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
           </div>
         </div>
       </form>
+
+      <BottomPopup
+        className='!container'
+        title='Dokumen Tittle'
+        active={isExample}
+        close={() => setIsExample(false)}
+      >
+        <div className='flex  justify-center items-center p-2'>
+          <embed
+            src={`data:${format};base64,${base64}`}
+            type={format}
+            width='100%'
+            height='600px'
+          />
+          {/* <iframe
+            src={`data:${format};base64,${base64}`}
+            width='100%'
+            height='600px'
+            title='PDF Document'
+          ></iframe> */}
+        </div>
+      </BottomPopup>
     </>
   );
 };
 
 export default KonfirmasiDokumen;
+
+{
+  /* <iframe
+  src={`data:application/octet-stream;base64, ${base64}`}
+  // src={`data:application/${format};base64, ${base64}`}
+  width='800px'
+  height='600px'
+  title='NPWP File'
+  frameBorder='0'
+  sandbox
+></iframe> */
+}
+{
+  /* <Image
+  src={`data:image/${format};base64, ${base64}`}
+  alt='Contoh SPPKP'
+  className='w-full h-full '
+  width={1200}
+  height={1200}
+  quality={85}
+/> */
+}
-- 
cgit v1.2.3


From 5e3b8914037fcd7b5153d94f289079ac4dd60235 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 1 Nov 2024 09:35:35 +0700
Subject: <iman> 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 <it@fixcomart.co.id>
Date: Mon, 4 Nov 2024 16:10:09 +0700
Subject: <iman> 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 (
     <>
-      <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 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenNib'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+      {isDesktop && (
+        <div>
+          <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>
-                <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'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenNib.format,
-                      formDokumen.dokumenNib.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
               </div>
-            </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenNib}
+              <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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenNib.format,
+                          formDokumen.dokumenNib.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenNib}
+                  </div>
+                )}
               </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 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenNpwp'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+            </div>
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-nowrap'>
+                  NPWP Perusahaan
                 </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'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenNpwp.format,
-                      formDokumen.dokumenNpwp.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
+              </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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenNpwp.format,
+                          formDokumen.dokumenNpwp.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenNpwp}
+                  </div>
+                )}
               </div>
             </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenNpwp}
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-nowrap'>SPPKP</label>
               </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 flex flex-row gap-2'>
-                <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'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenSppkp.format,
-                      formDokumen.dokumenSppkp.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
+              <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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenSppkp.format,
+                          formDokumen.dokumenSppkp.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenSppkp}
+                  </div>
+                )}
               </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 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenAktaPerubahan'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+            <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>
-                <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'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenAktaPerubahan.format,
-                      formDokumen.dokumenAktaPerubahan.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
               </div>
-            </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenAktaPerubahan}
+              <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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenAktaPerubahan.format,
+                          formDokumen.dokumenAktaPerubahan.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenAktaPerubahan}
+                  </div>
+                )}
               </div>
-            )}
-          </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 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenKtpDirut'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+            <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>
-                <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'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenKtpDirut.format,
-                      formDokumen.dokumenKtpDirut.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
               </div>
-            </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenKtpDirut}
+              <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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenKtpDirut.format,
+                          formDokumen.dokumenKtpDirut.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenKtpDirut}
+                  </div>
+                )}
               </div>
-            )}
-          </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 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenAktaPendirian'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+            <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>
-                <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'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenAktaPendirian.format,
-                      formDokumen.dokumenAktaPendirian.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
               </div>
-            </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenAktaPendirian}
+              <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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenAktaPendirian.format,
+                          formDokumen.dokumenAktaPendirian.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenAktaPendirian}
+                  </div>
+                )}
               </div>
-            )}
-          </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 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenLaporanKeuangan'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+            <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>
-                <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'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenLaporanKeuangan.format,
-                      formDokumen.dokumenLaporanKeuangan.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
               </div>
-            </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenLaporanKeuangan}
+              <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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenLaporanKeuangan.format,
+                          formDokumen.dokumenLaporanKeuangan.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenLaporanKeuangan}
+                  </div>
+                )}
               </div>
-            )}
-          </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 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenFotoKantor'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+            <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>
-                <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'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenFotoKantor.format,
-                      formDokumen.dokumenFotoKantor.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
               </div>
-            </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenFotoKantor}
+              <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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenFotoKantor.format,
+                          formDokumen.dokumenFotoKantor.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenFotoKantor}
+                  </div>
+                )}
               </div>
-            )}
-          </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 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenTempatBekerja'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-nowrap'>
+                  Tempat Bekerja
                 </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'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenTempatBekerja.format,
-                      formDokumen.dokumenTempatBekerja.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
-              </div>
-              {/* <Image
+              </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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenTempatBekerja.format,
+                          formDokumen.dokumenTempatBekerja.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                  {/* <Image
                 src={`data:image/png;base64, ${formDokumen.dokumenNib.base64}`}
                 alt='Contoh SPPKP'
                 className='w-full h-full '
@@ -610,37 +619,542 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 height={800}
                 quality={85}
               /> */}
-            </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenTempatBekerja}
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenTempatBekerja}
+                  </div>
+                )}
               </div>
-            )}
-          </div>
+            </div>
+          </form>
         </div>
-      </form>
+      )}
+      {isMobile && (
+        <div>
+          <h1 className={`font-bold ${isKonfirmasi ? 'hidden' : 'text-xl'}`}>
+            Dokumen
+          </h1>
+          <form className='flex flex-col w-full gap-5 text-sm'>
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-wrap'>
+                  NIB (SIUP/TDP/SKDP)
+                </label>
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-center justify-start'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenNib?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenNib.format,
+                          formDokumen.dokumenNib.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </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-wrap'>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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenNpwp.format,
+                          formDokumen.dokumenNpwp.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </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-wrap'>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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenSppkp.format,
+                          formDokumen.dokumenSppkp.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </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-wrap'>
+                  {' '}
+                  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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenAktaPerubahan.format,
+                          formDokumen.dokumenAktaPerubahan.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </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-wrap'>
+                  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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenKtpDirut.format,
+                          formDokumen.dokumenKtpDirut.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </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-wrap'>
+                  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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenAktaPendirian.format,
+                          formDokumen.dokumenAktaPendirian.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </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-wrap'>
+                  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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenLaporanKeuangan.format,
+                          formDokumen.dokumenLaporanKeuangan.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenLaporanKeuangan}
+                  </div>
+                )}
+              </div>
+            </div>
 
-      <BottomPopup
-        className='!container'
-        title='Dokumen Tittle'
-        active={isExample}
-        close={() => setIsExample(false)}
-      >
-        <div className='flex  justify-center items-center p-2'>
-          <embed
-            src={`data:${format};base64,${base64}`}
-            type={format}
-            width='100%'
-            height='600px'
-          />
-          {/* <iframe
-            src={`data:${format};base64,${base64}`}
-            width='100%'
-            height='600px'
-            title='PDF Document'
-          ></iframe> */}
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-wrap'>
+                  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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenFotoKantor.format,
+                          formDokumen.dokumenFotoKantor.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </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-wrap'>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 flex flex-row gap-2'>
+                    <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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenTempatBekerja.format,
+                          formDokumen.dokumenTempatBekerja.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </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>
         </div>
-      </BottomPopup>
+      )}
+      {isDesktop && (
+        <BottomPopup
+          className='!container'
+          title='Dokumen'
+          active={isExample}
+          close={() => setIsExample(false)}
+        >
+          <div className='flex  justify-center items-center p-2'>
+            {/* <embed
+              src={`data:${format};base64,${base64}`}
+              type={format}
+              width='100%'
+              height='600px'
+            /> */}
+            <iframe
+              src={`data:${format};base64,${base64}`}
+              width='100%'
+              height='100%'
+              title='Document'
+            ></iframe>
+          </div>
+        </BottomPopup>
+      )}
+      {isMobile && (
+        <BottomPopup
+          className='!container'
+          title='Dokumen'
+          active={isExample}
+          close={() => setIsExample(false)}
+        >
+          <div className='flex  justify-center items-center p-2'>
+            {/* <embed
+              src={`data:${format};base64,${base64}`}
+              type={format}
+              width='100%'
+              height='100%'
+            /> */}
+            <iframe
+              src={`data:${format};base64,${base64}`}
+              width='100%'
+              height='100%'
+              title='Document'
+            ></iframe>
+          </div>
+        </BottomPopup>
+      )}
     </>
   );
 };
-- 
cgit v1.2.3


From 6fb08ca0ad016cc4d20e320b8ae0aee110dddc8c Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 4 Nov 2024 16:38:02 +0700
Subject: <iman> update pengajuan tempo tdk bisa lihat file mobile

---
 .../component/KonfirmasiDokumen.jsx                | 26 ++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 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 112b85ef..9b0f1d8f 100644
--- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
@@ -145,6 +145,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   useEffect(() => {
     validateDokumen();
   }, [buttonSubmitClick]);
+
   return (
     <>
       {isDesktop && (
@@ -1146,12 +1147,29 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               width='100%'
               height='100%'
             /> */}
-            <iframe
-              src={`data:${format};base64,${base64}`}
+            <object
+              data={`data:${format};base64,${base64}`}
+              type={format}
               width='100%'
               height='100%'
-              title='Document'
-            ></iframe>
+              onError={(e) => {
+                // Jika <object> gagal menampilkan PDF, unduh otomatis
+                const link = document.createElement('a');
+                link.href = `data:${format};base64,${base64}`;
+                link.download = 'document.pdf';
+                link.click();
+              }}
+            >
+              PDF tidak dapat ditampilkan.
+              <a
+                href={`data:${format};base64,${base64}`}
+                download='document.pdf'
+              >
+                {' '}
+                Klik <span className='text-red-500'>di sini</span> untuk
+                mengunduh PDF
+              </a>
+            </object>
           </div>
         </BottomPopup>
       )}
-- 
cgit v1.2.3


From 9a49b8d84761781531cb417731cb9ef802f63541 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 4 Dec 2024 10:59:21 +0700
Subject: <iman> update pengajuan tempo

---
 .../component/KonfirmasiDokumen.jsx                | 110 +++++++++++----------
 1 file changed, 58 insertions(+), 52 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 9b0f1d8f..c1f2d07c 100644
--- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
@@ -145,7 +145,6 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   useEffect(() => {
     validateDokumen();
   }, [buttonSubmitClick]);
-
   return (
     <>
       {isDesktop && (
@@ -168,7 +167,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenNib'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -219,7 +218,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenNpwp'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -268,7 +267,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenSppkp'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -321,9 +320,11 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenAktaPerubahan'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen.dokumenAktaPerubahan.name
+                        ? 'ubah'
+                        : 'upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -374,7 +375,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenKtpDirut'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -426,7 +427,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenAktaPendirian'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -479,7 +480,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenLaporanKeuangan'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -531,7 +532,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenFotoKantor'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -583,7 +584,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenTempatBekerja'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -651,7 +652,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenNib'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -700,7 +701,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenNpwp'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -749,7 +750,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenSppkp'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -802,7 +803,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenAktaPerubahan'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -855,7 +856,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenKtpDirut'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -907,7 +908,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenAktaPendirian'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -960,7 +961,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenLaporanKeuangan'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -1012,7 +1013,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenFotoKantor'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       Ubah
                     </label>
@@ -1062,7 +1063,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenTempatBekerja'
-                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20'
                     >
                       Ubah
                     </label>
@@ -1118,12 +1119,6 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
           close={() => setIsExample(false)}
         >
           <div className='flex  justify-center items-center p-2'>
-            {/* <embed
-              src={`data:${format};base64,${base64}`}
-              type={format}
-              width='100%'
-              height='600px'
-            /> */}
             <iframe
               src={`data:${format};base64,${base64}`}
               width='100%'
@@ -1141,35 +1136,46 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
           close={() => setIsExample(false)}
         >
           <div className='flex  justify-center items-center p-2'>
+            {!format.includes('undifined') ? (
+              <object
+                data={`data:${format};base64,${base64}`}
+                type={format}
+                width='100%'
+                height='100%'
+                onError={(e) => {
+                  // Jika <object> gagal menampilkan PDF, unduh otomatis
+                  const link = document.createElement('a');
+                  link.href = `data:${format};base64,${base64}`;
+                  link.download = 'document.pdf';
+                  link.click();
+                }}
+              >
+                PDF tidak dapat ditampilkan.
+                <a
+                  href={`data:${format};base64,${base64}`}
+                  download='document.pdf'
+                >
+                  {' '}
+                  Klik <span className='text-red-500'>di sini</span> untuk
+                  mengunduh PDF
+                </a>
+              </object>
+            ) : (
+              <embed
+                src={
+                  '/web/image/2540181?unique=7050288dd34d7318bf059e7f362540f6ad5533f9'
+                }
+                width='100%'
+                height='600px'
+              />
+            )}
             {/* <embed
-              src={`data:${format};base64,${base64}`}
-              type={format}
+              src={
+                '/web/image/2540181?unique=7050288dd34d7318bf059e7f362540f6ad5533f9'
+              }
               width='100%'
-              height='100%'
+              height='600px'
             /> */}
-            <object
-              data={`data:${format};base64,${base64}`}
-              type={format}
-              width='100%'
-              height='100%'
-              onError={(e) => {
-                // Jika <object> gagal menampilkan PDF, unduh otomatis
-                const link = document.createElement('a');
-                link.href = `data:${format};base64,${base64}`;
-                link.download = 'document.pdf';
-                link.click();
-              }}
-            >
-              PDF tidak dapat ditampilkan.
-              <a
-                href={`data:${format};base64,${base64}`}
-                download='document.pdf'
-              >
-                {' '}
-                Klik <span className='text-red-500'>di sini</span> untuk
-                mengunduh PDF
-              </a>
-            </object>
           </div>
         </BottomPopup>
       )}
-- 
cgit v1.2.3


From e9cd13307f0095dc4edc5048752675d80c551564 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 6 Dec 2024 17:06:26 +0700
Subject: <iman> pengajuan tempo

---
 .../component/KonfirmasiDokumen.jsx                | 118 +++++++++++++++------
 1 file changed, 84 insertions(+), 34 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 c1f2d07c..e9ec01e1 100644
--- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
@@ -9,6 +9,7 @@ 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';
+import imageCompression from 'browser-image-compression';
 const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const { control, watch } = useForm();
   const [isExample, setIsExample] = useState(false);
@@ -16,6 +17,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const [base64, setBase64] = useState();
   const [pdfData, setPdfData] = useState();
   const [format, setFormat] = useState();
+  const [url, setUrl] = useState();
   const [popUpSource, setSource] = useState();
   const {
     formDokumen,
@@ -26,8 +28,12 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   } = usePengajuanTempoStoreDokumen();
 
   const handleConfirmSubmit = (format, base64) => {
+    console.log('format iman', format);
     if (format == 'pdf') {
       setFormat(`application/${format}`);
+    } else if (format == undefined) {
+      setFormat(null);
+      setUrl(`http://192.168.23.244:8069` + base64);
     } else {
       setFormat(`image/${format}`);
     }
@@ -40,11 +46,13 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     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();
+      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',
@@ -55,15 +63,34 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
         return;
       }
 
-      if (file.size > 2000000) {
-        toast.error('Maksimal ukuran file adalah 2MB', { 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);
       }
-
-      fileBase64 = await getFileBase64(file);
-      updateFormDokumen(name, file.name, fileExtension, fileBase64);
       validateDokumen();
     }
   };
@@ -145,6 +172,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   useEffect(() => {
     validateDokumen();
   }, [buttonSubmitClick]);
+  console.log('format', format);
   return (
     <>
       {isDesktop && (
@@ -169,7 +197,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenNib'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenNib?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -220,7 +248,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenNpwp'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenNpwp?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -269,7 +297,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenSppkp'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenSppkp?.name.length > 0
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -323,8 +353,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       {formDokumen.dokumenAktaPerubahan.name
-                        ? 'ubah'
-                        : 'upload'}
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -377,7 +407,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenKtpDirut'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenKtpDirut?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -429,7 +459,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenAktaPendirian'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenAktaPendirian?.name
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -482,7 +514,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenLaporanKeuangan'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenLaporanKeuangan?.name
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -534,7 +568,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenFotoKantor'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenFotoKantor?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -573,7 +607,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
             <div className='w-full flex flex-row items-center '>
               <div className='w-2/5'>
                 <label className='form-label  text-nowrap'>
-                  Tempat Bekerja
+                  Foto tempat kerja
                 </label>
               </div>
               <div className='w-3/5'>
@@ -586,7 +620,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenTempatBekerja'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenTempatBekerja?.name
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -654,7 +690,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenNib'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenNib?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -703,7 +739,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenNpwp'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenNpwp?.name ? 'Sudah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -752,7 +788,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenSppkp'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenSppkp?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -805,7 +841,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenAktaPerubahan'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenAktaPerubahan?.name
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -858,7 +896,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenKtpDirut'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenKtpDirut?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -910,7 +948,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenAktaPendirian'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenAktaPendirian?.name
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -963,7 +1003,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenLaporanKeuangan'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenLaporanKeuangan?.name
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -1015,7 +1057,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenFotoKantor'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenFotoKantor?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -1053,7 +1095,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
 
             <div className='w-full flex flex-row items-center '>
               <div className='w-2/5'>
-                <label className='form-label  text-wrap'>Tempat Bekerja</label>
+                <label className='form-label  text-wrap'>
+                  Foto tempat kerja
+                </label>
               </div>
               <div className='w-3/5'>
                 <div className='flex flex-row items-start justify-between'>
@@ -1065,7 +1109,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenTempatBekerja'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20'
                     >
-                      Ubah
+                      {formDokumen?.dokumenTempatBekerja?.name
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -1113,16 +1159,20 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
       )}
       {isDesktop && (
         <BottomPopup
-          className='!container'
+          className='w-full h-full'
           title='Dokumen'
           active={isExample}
           close={() => setIsExample(false)}
         >
           <div className='flex  justify-center items-center p-2'>
             <iframe
-              src={`data:${format};base64,${base64}`}
-              width='100%'
-              height='100%'
+              src={`${
+                format == null ? url : `data:${format};base64,${base64}`
+              }`}
+              // src={`http://192.168.23.244:8069` + `${format}`}
+              // src={format}
+              width='800px'
+              height='600px'
               title='Document'
             ></iframe>
           </div>
-- 
cgit v1.2.3


From f2451beed670dc697aa2026b2df6ad1ad1e90da2 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 9 Dec 2024 15:00:45 +0700
Subject: <iman> update pengajuan tempo

---
 src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx | 2 --
 1 file changed, 2 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 e9ec01e1..19b7fed2 100644
--- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
@@ -28,7 +28,6 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   } = usePengajuanTempoStoreDokumen();
 
   const handleConfirmSubmit = (format, base64) => {
-    console.log('format iman', format);
     if (format == 'pdf') {
       setFormat(`application/${format}`);
     } else if (format == undefined) {
@@ -172,7 +171,6 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   useEffect(() => {
     validateDokumen();
   }, [buttonSubmitClick]);
-  console.log('format', format);
   return (
     <>
       {isDesktop && (
-- 
cgit v1.2.3


From 915dc67e1ce31eab1f2415cc8df95cebb75a137d Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 13 Dec 2024 14:18:03 +0700
Subject: <iman>update pengajuan tempo request

---
 .../component/KonfirmasiDokumen.jsx                | 855 +++++++++++++++------
 1 file changed, 637 insertions(+), 218 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 19b7fed2..ca571167 100644
--- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
@@ -178,16 +178,116 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
           <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'>
+          <form className='flex flex-col w-full gap-5  '>
+            <div className='w-full flex flex-row items-center  '>
+              <div className='w-2/5 flex'>
                 <label className='form-label  text-nowrap'>
-                  NIB (SIUP/TDP/SKDP)
+                  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'>
+                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
+                    {formDokumen?.dokumenNpwp?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenNpwp'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+                    >
+                      {formDokumen?.dokumenNpwp?.name ? 'Ubah' : 'Upload'}
+                    </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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenNpwp.format,
+                          formDokumen.dokumenNpwp.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </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 max-w-48'>
+                    {formDokumen?.dokumenSppkp?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenSppkp'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+                    >
+                      {formDokumen?.dokumenSppkp?.name.length > 0
+                        ? 'Ubah'
+                        : 'Upload'}
+                    </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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenSppkp.format,
+                          formDokumen.dokumenSppkp.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </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'>NIB</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 max-w-48'>
                     {formDokumen?.dokumenNib?.name}
                   </span>
                   <div className='w-2/5 flex flex-row gap-2'>
@@ -230,33 +330,33 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 )}
               </div>
             </div>
+
             <div className='w-full flex flex-row items-center '>
               <div className='w-2/5'>
                 <label className='form-label  text-nowrap'>
-                  NPWP Perusahaan
+                  SIUP <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?.dokumenNpwp?.name}
+                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
+                    {formDokumen?.dokumenSiup?.name}
                   </span>
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
-                      htmlFor='dokumenNpwp'
+                      htmlFor='dokumenSiup'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      {formDokumen?.dokumenNpwp?.name ? 'Ubah' : 'Upload'}
+                      {formDokumen.dokumenSiup.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
-                      id='dokumenNpwp'
-                      name='dokumenNpwp'
+                      id='dokumenSiup'
+                      name='dokumenSiup'
                       type='file'
                       title=' '
-                      ref={dokumenNpwpRef}
                       className='hidden'
-                      aria-invalid={errorsDokumen.dokumenNpwp}
+                      aria-invalid={errorsDokumen.dokumenSiup}
                       onChange={handleInputChange}
                       accept='.pdf,.png,.jpg,.jpeg'
                     />
@@ -265,8 +365,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       type='button'
                       onClick={() =>
                         handleConfirmSubmit(
-                          formDokumen.dokumenNpwp.format,
-                          formDokumen.dokumenNpwp.base64
+                          formDokumen.dokumenSiup.format,
+                          formDokumen.dokumenSiup.base64
                         )
                       }
                     >
@@ -276,38 +376,303 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </div>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errorsDokumen.dokumenNpwp}
+                    {errorsDokumen.dokumenSiup}
                   </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>
+                <label className='form-label  text-nowrap'>
+                  TDP <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?.dokumenSppkp?.name}
+                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
+                    {formDokumen?.dokumenTdp?.name}
                   </span>
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
-                      htmlFor='dokumenSppkp'
+                      htmlFor='dokumenTdp'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      {formDokumen?.dokumenSppkp?.name.length > 0
+                      {formDokumen.dokumenTdp.name ? 'Ubah' : 'Upload'}
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenTdp'
+                      name='dokumenTdp'
+                      type='file'
+                      title=' '
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenTdp}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenTdp.format,
+                          formDokumen.dokumenTdp.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenTdp}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-nowrap'>
+                  SKDP <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 max-w-48'>
+                    {formDokumen?.dokumenSkdp?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenSkdp'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+                    >
+                      {formDokumen.dokumenSkdp.name ? 'Ubah' : 'Upload'}
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenSkdp'
+                      name='dokumenSkdp'
+                      type='file'
+                      title=' '
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenSkdp}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenSkdp.format,
+                          formDokumen.dokumenSkdp.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenSkdp}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-nowrap'>
+                  SKT <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 max-w-48'>
+                    {formDokumen?.dokumenSkt?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenSkt'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+                    >
+                      {formDokumen.dokumenSkt.name ? 'Ubah' : 'Upload'}
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenSkt'
+                      name='dokumenSkt'
+                      type='file'
+                      title=' '
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenSkt}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenSkt.format,
+                          formDokumen.dokumenSkt.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenSkt}
+                  </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 max-w-48'>
+                    {formDokumen?.dokumenAktaPendirian?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenAktaPendirian'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+                    >
+                      {formDokumen?.dokumenAktaPendirian?.name
                         ? 'Ubah'
                         : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
-                      id='dokumenSppkp'
-                      name='dokumenSppkp'
+                      id='dokumenAktaPendirian'
+                      name='dokumenAktaPendirian'
                       type='file'
                       title=' '
-                      ref={dokumenSppkpRef}
+                      ref={dokumenAktaPendirianRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenAktaPendirian}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenAktaPendirian.format,
+                          formDokumen.dokumenAktaPendirian.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </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'>
+                  {' '}
+                  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 max-w-48'>
+                    {formDokumen?.dokumenAktaPerubahan?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenAktaPerubahan'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+                    >
+                      {formDokumen.dokumenAktaPerubahan.name
+                        ? 'Ubah'
+                        : 'Upload'}
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenAktaPerubahan'
+                      name='dokumenAktaPerubahan'
+                      type='file'
+                      title=' '
+                      ref={dokumenAktaPerubahanRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenAktaPerubahan}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenAktaPerubahan.format,
+                          formDokumen.dokumenAktaPerubahan.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </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'>
+                  Foto tempat kerja
+                </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 max-w-48'>
+                    {formDokumen?.dokumenTempatBekerja?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenTempatBekerja'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+                    >
+                      {formDokumen?.dokumenTempatBekerja?.name
+                        ? 'Ubah'
+                        : 'Upload'}
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenTempatBekerja'
+                      name='dokumenTempatBekerja'
+                      type='file'
+                      title=' '
+                      ref={dokumenTempatBekerjaRef}
                       className='hidden'
-                      aria-invalid={errorsDokumen.dokumenSppkp}
+                      aria-invalid={errorsDokumen.dokumenTempatBekerja}
                       onChange={handleInputChange}
                       accept='.pdf,.png,.jpg,.jpeg'
                     />
@@ -316,8 +681,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       type='button'
                       onClick={() =>
                         handleConfirmSubmit(
-                          formDokumen.dokumenSppkp.format,
-                          formDokumen.dokumenSppkp.base64
+                          formDokumen.dokumenTempatBekerja.format,
+                          formDokumen.dokumenTempatBekerja.base64
                         )
                       }
                     >
@@ -327,7 +692,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </div>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errorsDokumen.dokumenSppkp}
+                    {errorsDokumen.dokumenTempatBekerja}
                   </div>
                 )}
               </div>
@@ -336,33 +701,30 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
             <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>
+                  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?.dokumenAktaPerubahan?.name}
+                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
+                    {formDokumen?.dokumenFotoKantor?.name}
                   </span>
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
-                      htmlFor='dokumenAktaPerubahan'
+                      htmlFor='dokumenFotoKantor'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      {formDokumen.dokumenAktaPerubahan.name
-                        ? 'Ubah'
-                        : 'Upload'}
+                      {formDokumen?.dokumenFotoKantor?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
-                      id='dokumenAktaPerubahan'
-                      name='dokumendokumenAktaPerubahanSppkp'
+                      id='dokumenFotoKantor'
+                      name='dokumenFotoKantor'
                       type='file'
                       title=' '
-                      ref={dokumenAktaPerubahanRef}
+                      ref={dokumenFotoKantorRef}
                       className='hidden'
-                      aria-invalid={errorsDokumen.dokumenAktaPerubahan}
+                      aria-invalid={errorsDokumen.dokumenFotoKantor}
                       onChange={handleInputChange}
                       accept='.pdf,.png,.jpg,.jpeg'
                     />
@@ -371,8 +733,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       type='button'
                       onClick={() =>
                         handleConfirmSubmit(
-                          formDokumen.dokumenAktaPerubahan.format,
-                          formDokumen.dokumenAktaPerubahan.base64
+                          formDokumen.dokumenFotoKantor.format,
+                          formDokumen.dokumenFotoKantor.base64
                         )
                       }
                     >
@@ -382,7 +744,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </div>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errorsDokumen.dokumenAktaPerubahan}
+                    {errorsDokumen.dokumenFotoKantor}
                   </div>
                 )}
               </div>
@@ -397,7 +759,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               </div>
               <div className='w-3/5'>
                 <div className='flex flex-row items-start justify-between'>
-                  <span className='w-3/5  text-gray-600 truncate'>
+                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
                     {formDokumen?.dokumenKtpDirut?.name}
                   </span>
                   <div className='w-2/5 flex flex-row gap-2'>
@@ -444,32 +806,33 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
             <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>
+                  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?.dokumenAktaPendirian?.name}
+                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
+                    {formDokumen?.dokumenLaporanKeuangan?.name}
                   </span>
                   <div className='w-2/5 flex flex-row gap-2'>
                     <label
-                      htmlFor='dokumenAktaPendirian'
+                      htmlFor='dokumenLaporanKeuangan'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      {formDokumen?.dokumenAktaPendirian?.name
+                      {formDokumen?.dokumenLaporanKeuangan?.name
                         ? 'Ubah'
                         : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
-                      id='dokumenAktaPendirian'
-                      name='dokumenAktaPendirian'
+                      id='dokumenLaporanKeuangan'
+                      name='dokumenLaporanKeuangan'
                       type='file'
                       title=' '
-                      ref={dokumenAktaPendirianRef}
+                      ref={dokumenLaporanKeuanganRef}
                       className='hidden'
-                      aria-invalid={errorsDokumen.dokumenAktaPendirian}
+                      aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
                       onChange={handleInputChange}
                       accept='.pdf,.png,.jpg,.jpeg'
                     />
@@ -478,8 +841,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       type='button'
                       onClick={() =>
                         handleConfirmSubmit(
-                          formDokumen.dokumenAktaPendirian.format,
-                          formDokumen.dokumenAktaPendirian.base64
+                          formDokumen.dokumenLaporanKeuangan.format,
+                          formDokumen.dokumenLaporanKeuangan.base64
                         )
                       }
                     >
@@ -489,42 +852,45 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </div>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errorsDokumen.dokumenAktaPendirian}
+                    {errorsDokumen.dokumenLaporanKeuangan}
                   </div>
                 )}
               </div>
             </div>
-
+          </form>
+        </div>
+      )}
+      {isMobile && (
+        <div className=''>
+          <h1 className={`font-bold ${isKonfirmasi ? 'hidden' : 'text-xl'}`}>
+            Dokumen
+          </h1>
+          <form className='flex flex-col w-full gap-5 text-sm'>
             <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>
+                <label className='form-label  text-wrap'>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?.dokumenLaporanKeuangan?.name}
+                  <span className='w-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenNpwp?.name}
                   </span>
-                  <div className='w-2/5 flex flex-row gap-2'>
+                  <div className='w-3/5 flex flex-row gap-2'>
                     <label
-                      htmlFor='dokumenLaporanKeuangan'
+                      htmlFor='dokumenNpwp'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      {formDokumen?.dokumenLaporanKeuangan?.name
-                        ? 'Ubah'
-                        : 'Upload'}
+                      {formDokumen?.dokumenNpwp?.name ? 'Sudah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
-                      id='dokumenLaporanKeuangan'
-                      name='dokumenLaporanKeuangan'
+                      id='dokumenNpwp'
+                      name='dokumenNpwp'
                       type='file'
                       title=' '
-                      ref={dokumenLaporanKeuanganRef}
+                      ref={dokumenNpwpRef}
                       className='hidden'
-                      aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
+                      aria-invalid={errorsDokumen.dokumenNpwp}
                       onChange={handleInputChange}
                       accept='.pdf,.png,.jpg,.jpeg'
                     />
@@ -533,8 +899,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       type='button'
                       onClick={() =>
                         handleConfirmSubmit(
-                          formDokumen.dokumenLaporanKeuangan.format,
-                          formDokumen.dokumenLaporanKeuangan.base64
+                          formDokumen.dokumenNpwp.format,
+                          formDokumen.dokumenNpwp.base64
                         )
                       }
                     >
@@ -544,39 +910,36 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </div>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errorsDokumen.dokumenLaporanKeuangan}
+                    {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'>
-                  Foto Kantor (Tampak Depan)
-                </label>
+                <label className='form-label  text-wrap'>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?.dokumenFotoKantor?.name}
+                  <span className='w-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenSppkp?.name}
                   </span>
-                  <div className='w-2/5 flex flex-row gap-2'>
+                  <div className='w-3/5 flex flex-row gap-2'>
                     <label
-                      htmlFor='dokumenFotoKantor'
+                      htmlFor='dokumenSppkp'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      {formDokumen?.dokumenFotoKantor?.name ? 'Ubah' : 'Upload'}
+                      {formDokumen?.dokumenSppkp?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
-                      id='dokumenFotoKantor'
-                      name='dokumenFotoKantor'
+                      id='dokumenSppkp'
+                      name='dokumenSppkp'
                       type='file'
                       title=' '
-                      ref={dokumenFotoKantorRef}
+                      ref={dokumenSppkpRef}
                       className='hidden'
-                      aria-invalid={errorsDokumen.dokumenFotoKantor}
+                      aria-invalid={errorsDokumen.dokumenSppkp}
                       onChange={handleInputChange}
                       accept='.pdf,.png,.jpg,.jpeg'
                     />
@@ -585,8 +948,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       type='button'
                       onClick={() =>
                         handleConfirmSubmit(
-                          formDokumen.dokumenFotoKantor.format,
-                          formDokumen.dokumenFotoKantor.base64
+                          formDokumen.dokumenSppkp.format,
+                          formDokumen.dokumenSppkp.base64
                         )
                       }
                     >
@@ -596,7 +959,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </div>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errorsDokumen.dokumenFotoKantor}
+                    {errorsDokumen.dokumenSppkp}
                   </div>
                 )}
               </div>
@@ -604,33 +967,81 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
 
             <div className='w-full flex flex-row items-center '>
               <div className='w-2/5'>
-                <label className='form-label  text-nowrap'>
-                  Foto tempat kerja
+                <label className='form-label  text-wrap'>NIB</label>
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-center justify-start'>
+                  <span className='w-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenNib?.name}
+                  </span>
+                  <div className='w-3/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenNib'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
+                    >
+                      {formDokumen?.dokumenNib?.name ? 'Ubah' : 'Upload'}
+                    </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'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenNib.format,
+                          formDokumen.dokumenNib.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </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-wrap'>
+                  SIUP <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?.dokumenTempatBekerja?.name}
+                  <span className='w-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenSiup?.name}
                   </span>
-                  <div className='w-2/5 flex flex-row gap-2'>
+                  <div className='w-3/5 flex flex-row gap-2'>
                     <label
-                      htmlFor='dokumenTempatBekerja'
+                      htmlFor='dokumenSiup'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      {formDokumen?.dokumenTempatBekerja?.name
-                        ? 'Ubah'
-                        : 'Upload'}
+                      {formDokumen?.dokumenSiup?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
-                      id='dokumenTempatBekerja'
-                      name='dokumenTempatBekerja'
+                      id='dokumenSiup'
+                      name='dokumenSiup'
                       type='file'
                       title=' '
-                      ref={dokumenTempatBekerjaRef}
+                      ref={dokumenAktaPerubahanRef}
                       className='hidden'
-                      aria-invalid={errorsDokumen.dokumenTempatBekerja}
+                      aria-invalid={errorsDokumen.dokumenSiup}
                       onChange={handleInputChange}
                       accept='.pdf,.png,.jpg,.jpeg'
                     />
@@ -639,66 +1050,50 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       type='button'
                       onClick={() =>
                         handleConfirmSubmit(
-                          formDokumen.dokumenTempatBekerja.format,
-                          formDokumen.dokumenTempatBekerja.base64
+                          formDokumen.dokumenSiup.format,
+                          formDokumen.dokumenSiup.base64
                         )
                       }
                     >
                       <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                     </button>
                   </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}
+                    {errorsDokumen.dokumenSiup}
                   </div>
                 )}
               </div>
             </div>
-          </form>
-        </div>
-      )}
-      {isMobile && (
-        <div>
-          <h1 className={`font-bold ${isKonfirmasi ? 'hidden' : 'text-xl'}`}>
-            Dokumen
-          </h1>
-          <form className='flex flex-col w-full gap-5 text-sm'>
+
             <div className='w-full flex flex-row items-center '>
               <div className='w-2/5'>
                 <label className='form-label  text-wrap'>
-                  NIB (SIUP/TDP/SKDP)
+                  TDP <span className=' opacity-60'>(Opsional)</span>
                 </label>
               </div>
               <div className='w-3/5'>
-                <div className='flex flex-row items-center justify-start'>
-                  <span className='w-3/5  text-gray-600 truncate'>
-                    {formDokumen?.dokumenNib?.name}
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenTdp?.name}
                   </span>
-                  <div className='w-2/5 flex flex-row gap-2'>
+                  <div className='w-3/5 flex flex-row gap-2'>
                     <label
-                      htmlFor='dokumenNib'
+                      htmlFor='dokumenTdp'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      {formDokumen?.dokumenNib?.name ? 'Ubah' : 'Upload'}
+                      {formDokumen?.dokumenTdp?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
-                      id='dokumenNib'
-                      name='dokumenNib'
+                      id='dokumenTdp'
+                      name='dokumenTdp'
                       type='file'
                       title=' '
-                      ref={dokumenNibRef}
+                      ref={dokumenAktaPerubahanRef}
                       className='hidden'
-                      aria-invalid={errorsDokumen.dokumenNib}
+                      aria-invalid={errorsDokumen.dokumenTdp}
                       onChange={handleInputChange}
                       accept='.pdf,.png,.jpg,.jpeg'
                     />
@@ -707,8 +1102,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       type='button'
                       onClick={() =>
                         handleConfirmSubmit(
-                          formDokumen.dokumenNib.format,
-                          formDokumen.dokumenNib.base64
+                          formDokumen.dokumenTdp.format,
+                          formDokumen.dokumenTdp.base64
                         )
                       }
                     >
@@ -718,36 +1113,38 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </div>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errorsDokumen.dokumenNib}
+                    {errorsDokumen.dokumenTdp}
                   </div>
                 )}
               </div>
             </div>
             <div className='w-full flex flex-row items-center '>
               <div className='w-2/5'>
-                <label className='form-label  text-wrap'>NPWP Perusahaan</label>
+                <label className='form-label  text-wrap'>
+                  SKDP <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?.dokumenNpwp?.name}
+                  <span className='w-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenSkdp?.name}
                   </span>
-                  <div className='w-2/5 flex flex-row gap-2'>
+                  <div className='w-3/5 flex flex-row gap-2'>
                     <label
-                      htmlFor='dokumenNpwp'
+                      htmlFor='dokumenSkdp'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      {formDokumen?.dokumenNpwp?.name ? 'Sudah' : 'Upload'}
+                      {formDokumen?.dokumenSkdp?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
-                      id='dokumenNpwp'
-                      name='dokumenNpwp'
+                      id='dokumenSkdp'
+                      name='dokumenSkdp'
                       type='file'
                       title=' '
-                      ref={dokumenNpwpRef}
+                      ref={dokumenAktaPerubahanRef}
                       className='hidden'
-                      aria-invalid={errorsDokumen.dokumenNpwp}
+                      aria-invalid={errorsDokumen.dokumenSkdp}
                       onChange={handleInputChange}
                       accept='.pdf,.png,.jpg,.jpeg'
                     />
@@ -756,8 +1153,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       type='button'
                       onClick={() =>
                         handleConfirmSubmit(
-                          formDokumen.dokumenNpwp.format,
-                          formDokumen.dokumenNpwp.base64
+                          formDokumen.dokumenSkdp.format,
+                          formDokumen.dokumenSkdp.base64
                         )
                       }
                     >
@@ -767,36 +1164,38 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </div>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errorsDokumen.dokumenNpwp}
+                    {errorsDokumen.dokumenSkdp}
                   </div>
                 )}
               </div>
             </div>
             <div className='w-full flex flex-row items-center '>
               <div className='w-2/5'>
-                <label className='form-label  text-wrap'>SPPKP</label>
+                <label className='form-label  text-wrap'>
+                  SKT <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?.dokumenSppkp?.name}
+                  <span className='w-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenSkt?.name}
                   </span>
-                  <div className='w-2/5 flex flex-row gap-2'>
+                  <div className='w-3/5 flex flex-row gap-2'>
                     <label
-                      htmlFor='dokumenSppkp'
+                      htmlFor='dokumenSkt'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      {formDokumen?.dokumenSppkp?.name ? 'Ubah' : 'Upload'}
+                      {formDokumen?.dokumenSkt?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
-                      id='dokumenSppkp'
-                      name='dokumenSppkp'
+                      id='dokumenSkt'
+                      name='dokumenSkt'
                       type='file'
                       title=' '
-                      ref={dokumenSppkpRef}
+                      ref={dokumenAktaPerubahanRef}
                       className='hidden'
-                      aria-invalid={errorsDokumen.dokumenSppkp}
+                      aria-invalid={errorsDokumen.dokumenSkt}
                       onChange={handleInputChange}
                       accept='.pdf,.png,.jpg,.jpeg'
                     />
@@ -805,8 +1204,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       type='button'
                       onClick={() =>
                         handleConfirmSubmit(
-                          formDokumen.dokumenSppkp.format,
-                          formDokumen.dokumenSppkp.base64
+                          formDokumen.dokumenSkt.format,
+                          formDokumen.dokumenSkt.base64
                         )
                       }
                     >
@@ -816,7 +1215,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </div>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errorsDokumen.dokumenSppkp}
+                    {errorsDokumen.dokumenSkt}
                   </div>
                 )}
               </div>
@@ -831,10 +1230,10 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               </div>
               <div className='w-3/5'>
                 <div className='flex flex-row items-start justify-between'>
-                  <span className='w-3/5  text-gray-600 truncate'>
+                  <span className='w-2/5  text-gray-600 truncate '>
                     {formDokumen?.dokumenAktaPerubahan?.name}
                   </span>
-                  <div className='w-2/5 flex flex-row gap-2'>
+                  <div className='w-3/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenAktaPerubahan'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
@@ -846,7 +1245,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                     <input
                       // value={formDokumen?.dokumenNib?.name}
                       id='dokumenAktaPerubahan'
-                      name='dokumendokumenAktaPerubahanSppkp'
+                      name='dokumenAktaPerubahan'
                       type='file'
                       title=' '
                       ref={dokumenAktaPerubahanRef}
@@ -886,10 +1285,10 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               </div>
               <div className='w-3/5'>
                 <div className='flex flex-row items-start justify-between'>
-                  <span className='w-3/5  text-gray-600 truncate'>
+                  <span className='w-2/5  text-gray-600 truncate '>
                     {formDokumen?.dokumenKtpDirut?.name}
                   </span>
-                  <div className='w-2/5 flex flex-row gap-2'>
+                  <div className='w-3/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenKtpDirut'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
@@ -938,10 +1337,10 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               </div>
               <div className='w-3/5'>
                 <div className='flex flex-row items-start justify-between'>
-                  <span className='w-3/5  text-gray-600 truncate'>
+                  <span className='w-2/5  text-gray-600 truncate '>
                     {formDokumen?.dokumenAktaPendirian?.name}
                   </span>
-                  <div className='w-2/5 flex flex-row gap-2'>
+                  <div className='w-3/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenAktaPendirian'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
@@ -993,10 +1392,10 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               </div>
               <div className='w-3/5'>
                 <div className='flex flex-row items-start justify-between'>
-                  <span className='w-3/5  text-gray-600 truncate'>
+                  <span className='w-2/5  text-gray-600 truncate '>
                     {formDokumen?.dokumenLaporanKeuangan?.name}
                   </span>
-                  <div className='w-2/5 flex flex-row gap-2'>
+                  <div className='w-3/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenLaporanKeuangan'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
@@ -1047,10 +1446,10 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               </div>
               <div className='w-3/5'>
                 <div className='flex flex-row items-start justify-between'>
-                  <span className='w-3/5  text-gray-600 truncate'>
+                  <span className='w-2/5  text-gray-600 truncate '>
                     {formDokumen?.dokumenFotoKantor?.name}
                   </span>
-                  <div className='w-2/5 flex flex-row gap-2'>
+                  <div className='w-3/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenFotoKantor'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
@@ -1099,10 +1498,10 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               </div>
               <div className='w-3/5'>
                 <div className='flex flex-row items-start justify-between'>
-                  <span className='w-3/5  text-gray-600 truncate'>
+                  <span className='w-2/5  text-gray-600 truncate'>
                     {formDokumen?.dokumenTempatBekerja?.name}
                   </span>
-                  <div className='w-2/5 flex flex-row gap-2'>
+                  <div className='w-3/5 flex flex-row gap-2'>
                     <label
                       htmlFor='dokumenTempatBekerja'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20'
@@ -1184,46 +1583,23 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
           close={() => setIsExample(false)}
         >
           <div className='flex  justify-center items-center p-2'>
-            {!format.includes('undifined') ? (
-              <object
-                data={`data:${format};base64,${base64}`}
-                type={format}
-                width='100%'
-                height='100%'
-                onError={(e) => {
-                  // Jika <object> gagal menampilkan PDF, unduh otomatis
-                  const link = document.createElement('a');
-                  link.href = `data:${format};base64,${base64}`;
-                  link.download = 'document.pdf';
-                  link.click();
-                }}
-              >
-                PDF tidak dapat ditampilkan.
-                <a
-                  href={`data:${format};base64,${base64}`}
-                  download='document.pdf'
-                >
-                  {' '}
-                  Klik <span className='text-red-500'>di sini</span> untuk
-                  mengunduh PDF
-                </a>
-              </object>
-            ) : (
-              <embed
-                src={
-                  '/web/image/2540181?unique=7050288dd34d7318bf059e7f362540f6ad5533f9'
-                }
-                width='100%'
-                height='600px'
-              />
-            )}
-            {/* <embed
-              src={
-                '/web/image/2540181?unique=7050288dd34d7318bf059e7f362540f6ad5533f9'
-              }
+            {/* <iframe
+              src={`${
+                format == null ? url : `data:${format};base64,${base64}`
+              }`}
+              // src={`http://192.168.23.244:8069` + `${format}`}
+              // src={format}
+              width='800px'
+              height='600px'
+              title='Document'
+            ></iframe> */}
+            <embed
+              src={`${
+                format == null ? url : `data:${format};base64,${base64}`
+              }`}
               width='100%'
               height='600px'
-            /> */}
+            />
           </div>
         </BottomPopup>
       )}
@@ -1242,7 +1618,7 @@ export default KonfirmasiDokumen;
   title='NPWP File'
   frameBorder='0'
   sandbox
-></iframe> */
+  ></iframe> */
 }
 {
   /* <Image
@@ -1252,5 +1628,48 @@ export default KonfirmasiDokumen;
   width={1200}
   height={1200}
   quality={85}
-/> */
+  /> */
 }
+
+// <div className='flex  justify-center items-center p-2'>
+//   {!format.includes('undifined') ? (
+//     <object
+//       data={`data:${format};base64,${base64}`}
+//       type={format}
+//       width='100%'
+//       height='100%'
+//       onError={(e) => {
+//         // Jika <object> gagal menampilkan PDF, unduh otomatis
+//         const link = document.createElement('a');
+//         link.href = `data:${format};base64,${base64}`;
+//         link.download = 'document.pdf';
+//         link.click();
+//       }}
+//     >
+//       PDF tidak dapat ditampilkan.
+//       <a
+//         href={`data:${format};base64,${base64}`}
+//         download='document.pdf'
+//       >
+//         {' '}
+//         Klik <span className='text-red-500'>di sini</span> untuk
+//         mengunduh PDF
+//       </a>
+//     </object>
+//   ) : (
+//     <embed
+//       src={
+//         '/web/image/2540181?unique=7050288dd34d7318bf059e7f362540f6ad5533f9'
+//       }
+//       width='100%'
+//       height='600px'
+//     />
+//   )}
+//   {/* <embed
+//     src={
+//       '/web/image/2540181?unique=7050288dd34d7318bf059e7f362540f6ad5533f9'
+//     }
+//     width='100%'
+//     height='600px'
+//   /> */}
+// </div>
-- 
cgit v1.2.3


From 0178a1f88d7d34824562e1413be073c0795a47cf Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 16 Dec 2024 17:42:31 +0700
Subject: <iman> update code

---
 src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 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 ca571167..a6f25d5e 100644
--- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
@@ -32,7 +32,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
       setFormat(`application/${format}`);
     } else if (format == undefined) {
       setFormat(null);
-      setUrl(`http://192.168.23.244:8069` + base64);
+      setUrl(`${process.env.NEXT_PUBLIC_ODOO_API_HOST}` + base64);
     } else {
       setFormat(`image/${format}`);
     }
@@ -1562,7 +1562,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
           close={() => setIsExample(false)}
         >
           <div className='flex  justify-center items-center p-2'>
-            <iframe
+            {/* <iframe
               src={`${
                 format == null ? url : `data:${format};base64,${base64}`
               }`}
@@ -1571,7 +1571,14 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               width='800px'
               height='600px'
               title='Document'
-            ></iframe>
+            ></iframe> */}
+            <embed
+              src={`${
+                format == null ? url : `data:${format};base64,${base64}`
+              }`}
+              width='100%'
+              height='600px'
+            />
           </div>
         </BottomPopup>
       )}
-- 
cgit v1.2.3


From aea914d21c16f53a1c28122b9b9a135439443ba6 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 17 Dec 2024 11:38:03 +0700
Subject: <iman> update pengajuan tempo

---
 .../component/KonfirmasiDokumen.jsx                | 41 ++++++++++------------
 1 file changed, 19 insertions(+), 22 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 a6f25d5e..f8f1cc17 100644
--- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
@@ -30,11 +30,10 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const handleConfirmSubmit = (format, base64) => {
     if (format == 'pdf') {
       setFormat(`application/${format}`);
-    } else if (format == undefined) {
-      setFormat(null);
-      setUrl(`${process.env.NEXT_PUBLIC_ODOO_API_HOST}` + base64);
-    } else {
+    } else if (format == 'png' || format == 'jpg' || format == 'jpeg') {
       setFormat(`image/${format}`);
+    } else {
+      setFormat(format);
     }
     setBase64(
       base64.trim().replace(/^"+/, '').replace(/"+$/, '').replaceAll('\\', '')
@@ -171,6 +170,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   useEffect(() => {
     validateDokumen();
   }, [buttonSubmitClick]);
+  console.log('formDokumen', formDokumen);
+  console.log('format', format);
   return (
     <>
       {isDesktop && (
@@ -1562,23 +1563,21 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
           close={() => setIsExample(false)}
         >
           <div className='flex  justify-center items-center p-2'>
-            {/* <iframe
-              src={`${
-                format == null ? url : `data:${format};base64,${base64}`
-              }`}
+            <iframe
+              // src={`${
+              //   format == null ? url : `data:${format};base64,${base64}`
+              // }`}
               // src={`http://192.168.23.244:8069` + `${format}`}
-              // src={format}
+              src={`data:${format};base64,${base64}`}
               width='800px'
               height='600px'
               title='Document'
-            ></iframe> */}
-            <embed
-              src={`${
-                format == null ? url : `data:${format};base64,${base64}`
-              }`}
+            ></iframe>
+            {/* <embed
+              src={`data:${format};base64,${base64}`}
               width='100%'
               height='600px'
-            />
+            /> */}
           </div>
         </BottomPopup>
       )}
@@ -1591,19 +1590,17 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
         >
           <div className='flex  justify-center items-center p-2'>
             {/* <iframe
-              src={`${
-                format == null ? url : `data:${format};base64,${base64}`
-              }`}
-              // src={`http://192.168.23.244:8069` + `${format}`}
+              // src={`${
+              //   format == null ? url : `data:${format};base64,${base64}`
+              // }`}
+              src={`http://192.168.23.244:8069` + `${format}`}
               // src={format}
               width='800px'
               height='600px'
               title='Document'
             ></iframe> */}
             <embed
-              src={`${
-                format == null ? url : `data:${format};base64,${base64}`
-              }`}
+              src={`data:${format};base64,${base64}`}
               width='100%'
               height='600px'
             />
-- 
cgit v1.2.3


From 92c6c99e3b65b1770b02c2fd63c9c943f99cfda2 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 17 Dec 2024 11:39:30 +0700
Subject: <iman> delete console log

---
 src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx | 2 --
 1 file changed, 2 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 f8f1cc17..66d33b43 100644
--- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
@@ -170,8 +170,6 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   useEffect(() => {
     validateDokumen();
   }, [buttonSubmitClick]);
-  console.log('formDokumen', formDokumen);
-  console.log('format', format);
   return (
     <>
       {isDesktop && (
-- 
cgit v1.2.3

