Merge branch 'new-release' into CR/form-merchant

# Conflicts:
#	src/lib/form/components/Merchant.jsx

1 files changed, 1677 insertions, 0 deletions

diff --git a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
new file mode 100644
index 00000000..66d33b43
--- /dev/null
+++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
@@ -0,0 +1,1677 @@
+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';
+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);
+  const { isDesktop, isMobile } = useDevice();
+  const [base64, setBase64] = useState();
+  const [pdfData, setPdfData] = useState();
+  const [format, setFormat] = useState();
+  const [url, setUrl] = useState();
+  const [popUpSource, setSource] = useState();
+  const {
+    formDokumen,
+    errorsDokumen,
+    validateDokumen,
+    updateFormDokumen,
+    getJumlahDokumenDiisi,
+  } = usePengajuanTempoStoreDokumen();
+
+  const handleConfirmSubmit = (format, base64) => {
+    if (format == 'pdf') {
+      setFormat(`application/${format}`);
+    } else if (format == 'png' || format == 'jpg' || format == 'jpeg') {
+      setFormat(`image/${format}`);
+    } else {
+      setFormat(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
+
+      // 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 > 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);
+      }
+      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]);
+  return (
+    <>
+      {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 flex'>
+                <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 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'>
+                    <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-nowrap'>
+                  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 max-w-48'>
+                    {formDokumen?.dokumenSiup?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      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.dokumenSiup.name ? 'Ubah' : 'Upload'}
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenSiup'
+                      name='dokumenSiup'
+                      type='file'
+                      title=' '
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenSiup}
+                      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.dokumenSiup.format,
+                          formDokumen.dokumenSiup.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {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'>
+                  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 max-w-48'>
+                    {formDokumen?.dokumenTdp?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      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.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='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-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.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>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenTempatBekerja}
+                  </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 max-w-48'>
+                    {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 min-w-20 text-center'
+                    >
+                      {formDokumen?.dokumenFotoKantor?.name ? 'Ubah' : 'Upload'}
+                    </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-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 max-w-48'>
+                    {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 min-w-20 text-center'
+                    >
+                      {formDokumen?.dokumenKtpDirut?.name ? 'Ubah' : 'Upload'}
+                    </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-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 max-w-48'>
+                    {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 min-w-20 text-center'
+                    >
+                      {formDokumen?.dokumenLaporanKeuangan?.name
+                        ? 'Ubah'
+                        : 'Upload'}
+                    </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>
+          </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-wrap'>NPWP Perusahaan</label>
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenNpwp?.name}
+                  </span>
+                  <div className='w-3/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 ? 'Sudah' : '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-wrap'>SPPKP</label>
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenSppkp?.name}
+                  </span>
+                  <div className='w-3/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 ? '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-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-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenSiup?.name}
+                  </span>
+                  <div className='w-3/5 flex flex-row gap-2'>
+                    <label
+                      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?.dokumenSiup?.name ? 'Ubah' : 'Upload'}
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenSiup'
+                      name='dokumenSiup'
+                      type='file'
+                      title=' '
+                      ref={dokumenAktaPerubahanRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenSiup}
+                      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.dokumenSiup.format,
+                          formDokumen.dokumenSiup.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenSiup}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-wrap'>
+                  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-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenTdp?.name}
+                  </span>
+                  <div className='w-3/5 flex flex-row gap-2'>
+                    <label
+                      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?.dokumenTdp?.name ? 'Ubah' : 'Upload'}
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenTdp'
+                      name='dokumenTdp'
+                      type='file'
+                      title=' '
+                      ref={dokumenAktaPerubahanRef}
+                      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-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-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenSkdp?.name}
+                  </span>
+                  <div className='w-3/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=' '
+                      ref={dokumenAktaPerubahanRef}
+                      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-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-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenSkt?.name}
+                  </span>
+                  <div className='w-3/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=' '
+                      ref={dokumenAktaPerubahanRef}
+                      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-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-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenAktaPerubahan?.name}
+                  </span>
+                  <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'
+                    >
+                      {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-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-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenKtpDirut?.name}
+                  </span>
+                  <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'
+                    >
+                      {formDokumen?.dokumenKtpDirut?.name ? 'Ubah' : 'Upload'}
+                    </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-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenAktaPendirian?.name}
+                  </span>
+                  <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'
+                    >
+                      {formDokumen?.dokumenAktaPendirian?.name
+                        ? 'Ubah'
+                        : 'Upload'}
+                    </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-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenLaporanKeuangan?.name}
+                  </span>
+                  <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'
+                    >
+                      {formDokumen?.dokumenLaporanKeuangan?.name
+                        ? 'Ubah'
+                        : 'Upload'}
+                    </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 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-2/5  text-gray-600 truncate '>
+                    {formDokumen?.dokumenFotoKantor?.name}
+                  </span>
+                  <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'
+                    >
+                      {formDokumen?.dokumenFotoKantor?.name ? 'Ubah' : 'Upload'}
+                    </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'>
+                  Foto tempat kerja
+                </label>
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-2/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenTempatBekerja?.name}
+                  </span>
+                  <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'
+                    >
+                      {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.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>
+      )}
+      {isDesktop && (
+        <BottomPopup
+          className='w-full h-full'
+          title='Dokumen'
+          active={isExample}
+          close={() => setIsExample(false)}
+        >
+          <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={`data:${format};base64,${base64}`}
+              width='800px'
+              height='600px'
+              title='Document'
+            ></iframe>
+            {/* <embed
+              src={`data:${format};base64,${base64}`}
+              width='100%'
+              height='600px'
+            /> */}
+          </div>
+        </BottomPopup>
+      )}
+      {isMobile && (
+        <BottomPopup
+          className='!container'
+          title='Dokumen'
+          active={isExample}
+          close={() => setIsExample(false)}
+        >
+          <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}
+              width='800px'
+              height='600px'
+              title='Document'
+            ></iframe> */}
+            <embed
+              src={`data:${format};base64,${base64}`}
+              width='100%'
+              height='600px'
+            />
+          </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}
+  /> */
+}
+
+// <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>