<iman> update pengajuan tempo section konfirmasi

7 files changed, 934 insertions, 563 deletions

diff --git a/src/lib/pengajuan-tempo/component/Dokumen.jsx b/src/lib/pengajuan-tempo/component/Dokumen.jsx
index 42c6c47f..bb88f80b 100644
--- a/src/lib/pengajuan-tempo/component/Dokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/Dokumen.jsx
@@ -5,7 +5,7 @@ import ProgressBar from '@ramonak/react-progress-bar';
 import { UseToastOptions } from '@chakra-ui/react';
 import { toast } from 'react-hot-toast';
 import getFileBase64 from '@/core/utils/getFileBase64';
-const Dokumen = ({ chekValid, buttonSubmitClick }) => {
+const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const { control, watch } = useForm();
   const {
     formDokumen,
@@ -135,9 +135,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
   }, [buttonSubmitClick]);
   return (
     <>
-      <div className='flex justify-start'>
-        <h1 className='font-bold'>Dokumen</h1>
-      </div>
+      <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>Dokumen</h1>
       <form className='flex mt-4 flex-col w-full '>
         <div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'>
           <div className='kolom-kiri w-full grid grid-rows-2 gap-7 '>
diff --git a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx
index a03bc59e..4950161e 100644
--- a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx
+++ b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx
@@ -5,16 +5,19 @@ import {
   usePengajuanTempoStoreDokumen,
   usePengajuanTempoStore,
 } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+import KontakPerusahaan from './KontakPerusahaan';
 import ProgressBar from '@ramonak/react-progress-bar';
 import { UseToastOptions } from '@chakra-ui/react';
 import odooApi from '~/libs/odooApi';
 import { toast } from 'react-hot-toast';
 import getFileBase64 from '@/core/utils/getFileBase64';
 import { CheckCircleIcon } from '@heroicons/react/24/outline';
-const Dokumen = ({ chekValid, buttonSubmitClick }) => {
+import InformasiPerusahaan from './informasiPerusahaan';
+import Pengiriman from './Pengiriman';
+import KonfirmasiDokumen from './KonfirmasiDokumen';
+const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
   const { control, watch, setValue, getValues } = useForm();
   const [industries, setIndustries] = useState([]);
-  const [industriesOpen, setIndustriesOpen] = useState(false);
   const {
     formDokumen,
     errorsDokumen,
@@ -63,7 +66,6 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
     () => Object.keys(errorsDokumen).length === 0,
     [errorsDokumen]
   );
-  const selectRef = useRef(null);
   const dokumenNibRef = useRef(null);
   const dokumenNpwpRef = useRef(null);
   const dokumenSppkpRef = useRef(null);
@@ -174,345 +176,24 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
     <>
       <form className='flex mt-4 flex-col w-full '>
         <div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'>
-          <div className='w-full grid grid-rows-[1fc_auto_ifc] gap-5'>
-            <div className='kolom-kiri w-full grid grid-rows-2 gap-7 '>
-              <div className='flex justify-start'>
-                <h2 className='font-bold text-xl'>Informasi Usaha</h2>
-              </div>
-              <div className='w-full flex flex-row items-start gap-5'>
-                <div className='w-1/3'>
-                  <label className='form-label  text-nowrap'>
-                    Nama Perusahaan
-                  </label>
-                </div>
-                <div className='w-2/3'>
-                  <div className='flex flex-row items-center gap-2'>
-                    <div className='relative w-11/12'>
-                      <input
-                        value={form.name}
-                        id='name'
-                        name='name'
-                        type='text'
-                        className='form-input bg-gray_r-2 focus:bg-white new w-full pr-16'
-                        aria-invalid={errors.name}
-                        onChange={handleInputChange}
-                      />
-                      <label
-                        htmlFor='name'
-                        className='absolute right-0 top-0 cursor-pointer  text-red-500 py-2 px-4 '
-                      >
-                        Ubah
-                      </label>
-                    </div>
-                    <CheckCircleIcon className='w-6 text-green-700 ring-green-600/20 bg-green-50' />
-                  </div>
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.name}
-                    </div>
-                  )}
-                </div>
-              </div>
-              <div className='w-full flex flex-row items-start gap-5'>
-                <div className='w-1/3'>
-                  <label className='form-label  text-nowrap'>Industri</label>
-                </div>
-                <div className='w-2/3'>
-                  <div className='flex flex-row items-center gap-2'>
-                    <div className='relative w-11/12'>
-                      <Controller
-                        inputId='industry_id'
-                        name='industry_id'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            inputId='industry_id'
-                            name='industry_id'
-                            ref={selectRef}
-                            options={industries}
-                            menuIsOpen={industriesOpen}
-                            placeholder={'Pilih industri bisnis anda'}
-                          />
-                        )}
-                      />
-                      <label
-                        htmlFor='industry_id'
-                        // onClick={handleLabelClick}
-                        className='absolute right-0 top-0 cursor-pointer  text-red-500 py-2 px-4 '
-                      >
-                        Ubah
-                      </label>
-                    </div>
-                    <CheckCircleIcon className='w-6 text-green-700 ring-green-600/20 bg-green-50' />
-                  </div>
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.industry_id}
-                    </div>
-                  )}
-                </div>
-              </div>
-              <div className='w-full flex flex-row items-start gap-5'>
-                <div className='w-1/3'>
-                  <label className='form-label  text-nowrap'>
-                    Alamat Perusahaan
-                  </label>
-                </div>
-                <div className='w-2/3'>
-                  <div className='flex flex-row items-center gap-2'>
-                    <div className='relative w-11/12'>
-                      {/* Input field */}
-                      <input
-                        value={form.street}
-                        id='street'
-                        name='street'
-                        type='text'
-                        className='form-input bg-gray_r-2 focus:bg-white new w-full pr-16' // Tambah padding untuk memberi ruang bagi label
-                        aria-invalid={errors.street}
-                        onChange={handleInputChange}
-                      />
-
-                      {/* Label "ubah" di pojok kanan */}
-                      <label
-                        htmlFor='street'
-                        className='absolute right-0 top-0 cursor-pointer  text-red-500 py-2 px-4 '
-                      >
-                        Ubah
-                      </label>
-
-                      {/* Pesan kesalahan */}
-                    </div>
-                    <CheckCircleIcon className='w-6 text-green-700 ring-green-600/20 bg-green-50' />
-                  </div>
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.street}
-                    </div>
-                  )}
-                </div>
-              </div>
-              <div className='w-full flex flex-row items-start gap-5'>
-                <div className='w-1/3'>
-                  <label className='form-label  text-nowrap'>
-                    No. Telfon Perusahaan
-                  </label>
-                </div>
-                <div className='w-2/3'>
-                  <div className='flex flex-row items-center gap-2'>
-                    <div className='relative w-11/12'>
-                      {/* Input field */}
-                      <input
-                        value={form.mobile}
-                        id='mobile'
-                        name='mobile'
-                        type='text'
-                        className='form-input bg-gray_r-2 focus:bg-white new w-full pr-16' // Tambah padding untuk memberi ruang bagi label
-                        aria-invalid={errors.mobile}
-                        onChange={handleInputChange}
-                      />
-
-                      {/* Label "ubah" di pojok kanan */}
-                      <label
-                        htmlFor='mobile'
-                        className='absolute right-0 top-0 cursor-pointer  text-red-500 py-2 px-4 '
-                      >
-                        Ubah
-                      </label>
-
-                      {/* Pesan kesalahan */}
-                    </div>
-                    <CheckCircleIcon className='w-6 text-green-700 ring-green-600/20 bg-green-50' />
-                  </div>
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.mobile}
-                    </div>
-                  )}
-                </div>
-              </div>
-              <div className='w-full flex flex-row items-start gap-5'>
-                <div className='w-1/3'>
-                  <label className='form-label  text-nowrap'>Data Bank</label>
-                </div>
-                <div className='w-2/3'>
-                  <div className='flex flex-row items-center gap-2'>
-                    <div className='relative w-11/12'>
-                      {/* Input field */}
-                      <input
-                        value={form.accountName}
-                        id='accountName'
-                        name='accountName'
-                        type='text'
-                        className='form-input bg-gray_r-2 focus:bg-white new w-full pr-16' // Tambah padding untuk memberi ruang bagi label
-                        aria-invalid={errors.accountName}
-                        onChange={handleInputChange}
-                      />
-
-                      {/* Label "ubah" di pojok kanan */}
-                      <label
-                        htmlFor='accountName'
-                        className='absolute right-0 top-0 cursor-pointer  text-red-500 py-2 px-4 '
-                      >
-                        Ubah
-                      </label>
-
-                      {/* Pesan kesalahan */}
-                    </div>
-                    <CheckCircleIcon className='w-6 text-green-700 ring-green-600/20 bg-green-50' />
-                  </div>
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.accountName}
-                    </div>
-                  )}
-                </div>
-              </div>
+          <div className='w-full flex flex-col gap-5 '>
+            <div className=''>
+              <InformasiPerusahaan isKonfirmasi={true} />
             </div>
             <div className='h-px bg-gray-300'></div>
-            <div className='kolom-kiri w-full grid grid-rows-2 gap-7 '>
-              <div className='flex justify-start'>
-                <h2 className='font-bold text-xl'>Informasi Usaha</h2>
-              </div>
-              <div className='w-full grid grid-cols-2 gap-5'>
-                <div>
-                  <label className='form-label  text-nowrap'>
-                    NIB (SIUP/TDP/SKDP)
-                  </label>
-                  <span className='text-xs opacity-60'>
-                    Pastikan dokumen yang anda upload sudah benar
-                  </span>
-                </div>
-                <div className=''>
-                  <div className='flex flex-col items-start'>
-                    <label
-                      htmlFor='dokumenNib'
-                      className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                    >
-                      Upload Dokumen
-                    </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'
-                    />
-                    <span className='mt-2 text-gray-600'>
-                      {formDokumen?.dokumenNib?.name}
-                    </span>
-                  </div>
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errorsDokumen.dokumenNib}
-                    </div>
-                  )}
-                </div>
-              </div>
+            <div className=''>
+              <KontakPerusahaan isKonfirmasi={true} />
             </div>
           </div>
 
           <div className='w-px bg-gray-300'></div>
-          <div className='w-full grid grid-rows-[1fc_auto_ifc] gap-5'>
-            <div className='kolom kanan w-full grid grid-rows-2 gap-10 '>
-              <div className='flex justify-start'>
-                <h2 className='font-bold text-xl'>Pengiriman</h2>
-              </div>
-              <div className='w-full grid grid-cols-2 gap-5'>
-                <div>
-                  <label className='form-label  text-nowrap'>
-                    Akta Pendirian{' '}
-                    <span className=' opacity-60'>(Opsional)</span>
-                  </label>
-                  <span className='text-xs opacity-60'>
-                    Pastikan dokumen yang anda upload sudah benar
-                  </span>
-                </div>
-                <div className=''>
-                  <div className='flex flex-col items-start'>
-                    <label
-                      htmlFor='dokumenAktaPendirian'
-                      className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                    >
-                      Upload Dokumen
-                    </label>
-                    <input
-                      // value={formDokumen.dokumenAktaPendirian}
-                      id='dokumenAktaPendirian'
-                      name='dokumenAktaPendirian'
-                      type='file'
-                      ref={dokumenAktaPendirianRef}
-                      className='hidden'
-                      aria-invalid={errorsDokumen.dokumenAktaPendirian}
-                      onChange={handleInputChange}
-                      accept='.pdf,.png,.jpg,.jpeg'
-                    />
-                    <span className='mt-2 text-gray-600'>
-                      {formDokumen?.dokumenAktaPendirian?.name}
-                    </span>
-                  </div>
-
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errorsDokumen.dokumenAktaPendirian}
-                    </div>
-                  )}
-                </div>
-              </div>
-              <div></div>
+          <div className='w-full grid grid-rows-[1fc_auto_1fc] gap-5'>
+            <div>
+              <Pengiriman isKonfirmasi={true} />
             </div>
             <div className='h-px bg-gray-300'></div>
-            <div className='kolom kanan w-full grid grid-rows-2 gap-10 '>
-              <div className='flex justify-start'>
-                <h2 className='font-bold text-xl'>Pengiriman</h2>
-              </div>
-              <div className='w-full grid grid-cols-2 gap-5'>
-                <div>
-                  <label className='form-label  text-nowrap'>
-                    Akta Pendirian{' '}
-                    <span className=' opacity-60'>(Opsional)</span>
-                  </label>
-                  <span className='text-xs opacity-60'>
-                    Pastikan dokumen yang anda upload sudah benar
-                  </span>
-                </div>
-                <div className=''>
-                  <div className='flex flex-col items-start'>
-                    <label
-                      htmlFor='dokumenAktaPendirian'
-                      className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                    >
-                      Upload Dokumen
-                    </label>
-                    <input
-                      // value={formDokumen.dokumenAktaPendirian}
-                      id='dokumenAktaPendirian'
-                      name='dokumenAktaPendirian'
-                      type='file'
-                      ref={dokumenAktaPendirianRef}
-                      className='hidden'
-                      aria-invalid={errorsDokumen.dokumenAktaPendirian}
-                      onChange={handleInputChange}
-                      accept='.pdf,.png,.jpg,.jpeg'
-                    />
-                    <span className='mt-2 text-gray-600'>
-                      {formDokumen?.dokumenAktaPendirian?.name}
-                    </span>
-                  </div>
-
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errorsDokumen.dokumenAktaPendirian}
-                    </div>
-                  )}
-                </div>
-              </div>
-              <div></div>
+            <div>
+              <KonfirmasiDokumen isKonfirmasi={true} />
             </div>
           </div>
         </div>
@@ -521,4 +202,4 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
   );
 };
 
-export default Dokumen;
+export default Konfirmasi;
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;
diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
index c09aaf57..a2c17471 100644
--- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
@@ -6,7 +6,7 @@ import stateApi from '@/lib/address/api/stateApi.js';
 import cityApi from '@/lib/address/api/cityApi';
 import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
 import { usePengajuanTempoStoreKontakPerson } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
-const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
+const KontakPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const { control, watch } = useForm();
   const {
     formKontakPerson,
@@ -91,15 +91,15 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
     validateKontakPerson();
   }, [buttonSubmitClick]);
   return (
-    <>
-      <div className='flex justify-start'>
-        <h1 className='font-bold'>Kontak Person</h1>
-      </div>
-      <form className='flex mt-4 flex-col w-full '>
+    <div className=''>
+      <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
+        Kontak Person
+      </h1>
+      <form className='flex flex-col w-full '>
         <div className='w-full grid grid-row-2 gap-5'>
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+            <div className='w-2/5'>
+              <label className='form-label  text-nowrap'>
                 Nama Lengkap Direktur
               </label>
             </div>
@@ -124,13 +124,15 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+            <div className='w-2/5'>
+              <label className='form-label text-nowrap'>
                 No. Telpon Direktur
               </label>
-              <span className='text-xs opacity-60'>
-                isi nomor telpon direktur di perusahaan kamu
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi nomor telpon direktur di perusahaan kamu
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <input
@@ -153,13 +155,13 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Email Direktur
-              </label>
-              <span className='text-xs opacity-60'>
-                isi email Direktur yang sesuai
-              </span>
+            <div className='w-2/5'>
+              <label className='form-label  text-nowrap'>Email Direktur</label>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi email Direktur yang sesuai
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <input
@@ -182,13 +184,13 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Nama Purchasing
-              </label>
-              <span className='text-xs opacity-60'>
-                isi nama purchasing yang bertanggung jawab di perusahaan anda
-              </span>
+            <div className='w-2/5'>
+              <label className='form-label text-nowrap'>Nama Purchasing</label>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi nama purchasing yang bertanggung jawab di perusahaan anda
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <input
@@ -211,13 +213,15 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+            <div className='w-2/5'>
+              <label className='form-label  text-nowrap'>
                 No. Telpon Purchasing
               </label>
-              <span className='text-xs opacity-60'>
-                isi nomor purchasing yang bertanggung jawab di perusahaan anda
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi nomor purchasing yang bertanggung jawab di perusahaan anda
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <input
@@ -240,13 +244,15 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+            <div className='w-2/5'>
+              <label className='form-label  text-nowrap'>
                 Email Purchasing
               </label>
-              <span className='text-xs opacity-60'>
-                isi email purchasing benar
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi email purchasing dengan benar
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <input
@@ -269,13 +275,13 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Nama Finance
-              </label>
-              <span className='text-xs opacity-60'>
-                isi nama finance yang bertanggung jawab di perusahaan anda
-              </span>
+            <div className='w-2/5'>
+              <label className='form-label  text-nowrap'>Nama Finance</label>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi nama finance yang bertanggung jawab di perusahaan anda
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <input
@@ -297,13 +303,15 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
             </div>
           </div>
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+            <div className='w-2/5'>
+              <label className='form-label   text-nowrap'>
                 No. Telpon Finance
               </label>
-              <span className='text-xs opacity-60'>
-                isi nomor finance yang bertanggung jawab di perusahaan anda
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi nomor finance yang bertanggung jawab di perusahaan anda
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <input
@@ -326,13 +334,13 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Email Finance
-              </label>
-              <span className='text-xs opacity-60'>
-                isi email finance dengan benar
-              </span>
+            <div className='w-2/5'>
+              <label className='form-label text-nowrap'>Email Finance</label>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi email finance dengan benar
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <input
@@ -355,7 +363,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           </div>
         </div>
       </form>
-    </>
+    </div>
   );
 };
 
diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
index 2e1b1bba..2497fb00 100644
--- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx
+++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
@@ -6,7 +6,7 @@ import stateApi from '@/lib/address/api/stateApi.js';
 import cityApi from '@/lib/address/api/cityApi';
 import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
 import { usePengajuanTempoStorePengiriman } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
-const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
+const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const { control, watch, setValue } = useForm();
   const {
     formPengiriman,
@@ -263,6 +263,14 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
 
   useEffect(() => {
     validatePengiriman();
+    if (formPengiriman.isSameAddrees) {
+      const isSame = formPengiriman.isSameAddrees;
+      if (isSame == 'true') {
+        setSameAddress(true);
+      } else {
+        setSameAddress(false);
+      }
+    }
   }, [buttonSubmitClick]);
   useEffect(() => {
     if (sameAddress) {
@@ -270,6 +278,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
       updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman);
       updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman);
     }
+    updateFormPengiriman('isSameAddrees', `${sameAddress}`);
   }, [sameAddress]);
 
   const getFromLocalStorage = (key) => {
@@ -294,17 +303,23 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
     if (cachedData.cityInvoice) {
       setValue('cityInvoice', parseInt(cachedData.cityInvoice));
     }
+    if (cachedData.isSameAddrees) {
+      updateFormPengiriman('isSameAddrees', `${cachedData.isSameAddrees}`);
+    }
   }, [cachedData.cityPengiriman]);
+  const handleChangeSameAddress = () => {
+    setSameAddress(!sameAddress);
+  };
   return (
     <>
-      <div className='flex justify-start'>
-        <h1 className='font-bold'>Pengiriman</h1>
-      </div>
-      <form className='flex mt-4 flex-col w-full '>
+      <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
+        Pengiriman
+      </h1>
+      <form className='flex flex-col w-full '>
         <div className='w-full grid grid-row-2 gap-5'>
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+            <div className='w-2/5'>
+              <label className='form-label  text-nowrap'>
                 Nama PIC Penerimaan Barang
               </label>
             </div>
@@ -329,13 +344,16 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+            <div className='w-2/5'>
+              <label className='form-label   text-nowrap'>
                 Alamat Pengiriman Barang
               </label>
-              <span className='text-xs opacity-60'>
-                pastikan alamat yang anda isi sesuai dengan alamat kirim barang
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  pastikan alamat yang anda isi sesuai dengan alamat kirim
+                  barang
+                </span>
+              )}
             </div>
             <div className='w-3/5 flex gap-3 flex-col'>
               <div>
@@ -415,8 +433,8 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+            <div className='w-2/5'>
+              <label className='form-label  text-nowrap'>
                 Nama PIC Penerimaan Invoice
               </label>
             </div>
@@ -441,20 +459,23 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+            <div className='w-2/5'>
+              <label className='form-label text-nowrap'>
                 Alamat Pengiriman Invoice
               </label>
-              <span className='text-xs opacity-60'>
-                Pastikan alamat yang anda isi sesuai dengan alamat kirim invoice
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  Pastikan alamat yang anda isi sesuai dengan alamat kirim
+                  invoice
+                </span>
+              )}
             </div>
             <div className='w-3/5 flex gap-3 flex-col'>
               <div>
                 <Checkbox
                   colorScheme='red'
                   isChecked={sameAddress}
-                  onChange={() => setSameAddress(!sameAddress)}
+                  onChange={handleChangeSameAddress}
                 >
                   Alamat invoice sama dengan alamat pengiriman
                 </Checkbox>
@@ -523,14 +544,16 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+            <div className='w-2/5'>
+              <label className='form-label   text-wrap'>
                 Jadwal Penukaran Invoice{' '}
                 <span className=' opacity-60'>(Opsional)</span>
               </label>
-              <span className='text-xs opacity-60'>
-                Pilih jika bisnis anda memiliki jadwal penukaran invoice
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  Pilih jika bisnis anda memiliki jadwal penukaran invoice
+                </span>
+              )}
             </div>
             <div className='w-3/5 flex gap-3 flex-col'>
               <div className='flex gap-3 flex-col'>
@@ -595,14 +618,16 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+            <div className='w-2/5'>
+              <label className='form-label text-nowrap'>
                 Jadwal Pembayaran{' '}
                 <span className=' opacity-60'>(Opsional)</span>
               </label>
-              <span className='text-xs opacity-60'>
-                Pilih jika bisnis anda memiliki jadwal pembayaran
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  Pilih jika bisnis anda memiliki jadwal pembayaran
+                </span>
+              )}
             </div>
             <div className='w-3/5 flex gap-3 flex-col'>
               <div className='flex gap-3 flex-col'>
@@ -665,13 +690,15 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+            <div className='w-2/5'>
+              <label className='form-label   text-wrap'>
                 Dokumen saat Pengiriman Barang
               </label>
-              <span className='text-xs opacity-60'>
-                Pilih dokumen lampiran saat pengiriman barang
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  Pilih dokumen lampiran saat pengiriman barang
+                </span>
+              )}
             </div>
             <div
               className='w-3/5 flex gap-3 flex-col'
@@ -741,8 +768,8 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+            <div className='w-2/5'>
+              <label className='form-label  text-wrap'>
                 Dokumen yang dilampirkan saat Pengiriman Invoice
               </label>
               <span className='text-xs opacity-60'>
diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index dd8b66ad..b7c112a6 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -168,11 +168,15 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
   }, [buttonSubmitClick]);
   return (
     <>
-      <div className='flex justify-start'>
-        <h1 className='font-bold'>
+      <div className='flex flex-col justify-start'>
+        <h1 className='font-bold text-2xl'>
           Referensi Supplier / Rekanan Bisnis Perusahaan{' '}
-          <span className=' opacity-60 text-2xl'>(Opsional)</span>
+          <span className=' opacity-60 text-xl'>(Opsional)</span>
         </h1>
+        <p className='opacity-60'>
+          Data yang anda berikan hanya untuk bahan referensi internal kami untuk
+          memberikan anda credit limit dan durasi tempo
+        </p>
       </div>
       <form className='flex mt-4 flex-col w-full '>
         <table className='border' border='1' cellPadding='10'>
@@ -295,7 +299,7 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
           </tbody>
         </table>
       </form>
-      <div className='flex items-start gap-4 mt-8'>
+      <div className='flex items-center gap-4 mt-8'>
         <button
           onClick={handleAddNewSupplier}
           className='bg-gray-200 border border-gray-500 rounded-md text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
@@ -309,6 +313,9 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
         >
           simpan data
         </button>
+        <span className='text-sm opacity-60 text-red-500'>
+          *Klik simpan sebelum lanjut ke tahap selanjutnya
+        </span>
       </div>
       {/* <button className='mt-8' onClick={cetakData}>
         CETAK
diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 6651dca8..53181027 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -6,7 +6,11 @@ import stateApi from '@/lib/address/api/stateApi.js';
 import cityApi from '@/lib/address/api/cityApi';
 import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
 import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
-const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
+const informasiPerusahaan = ({
+  chekValid,
+  buttonSubmitClick,
+  isKonfirmasi,
+}) => {
   const { control, watch, setValue, getValues } = useForm();
   const { form, errors, validate, updateForm } = usePengajuanTempoStore();
   const [industries, setIndustries] = useState([]);
@@ -292,20 +296,20 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
     }
   }, [form]);
   return (
-    <>
-      <div className='flex justify-start'>
-        <h1 className='font-bold'>Informasi Perusahaan</h1>
-      </div>
-      <form className='flex mt-4 flex-col w-full '>
+    <div className=''>
+      <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
+        Informasi Perusahaan
+      </h1>
+      <form className='flex flex-col w-full '>
         <div className='w-full grid grid-row-2 gap-5'>
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Nama Perusahaan
-              </label>
-              <span className='text-xs opacity-60'>
-                isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
-              </span>
+            <div className='w-2/5'>
+              <label className='form-label  text-nowrap'>Nama Perusahaan</label>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <input
@@ -319,9 +323,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 ref={nameRef}
                 onChange={handleInputChange}
               />
-              <span className='text-xs opacity-60'>
-                Format: PT. INDOTEKNIK DOTCOM GEMILANG
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  Format: PT. INDOTEKNIK DOTCOM GEMILANG
+                </span>
+              )}
               {chekValid && (
                 <div className='text-caption-2 text-danger-500 mt-1'>
                   {errors.name}
@@ -330,11 +336,13 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
             </div>
           </div>
           <div className='flex flex-row  justify-between items-start'>
-            <div ref={industry_idRef}>
-              <label className='form-label w-2/5 text-nowrap'>Industri</label>
-              <span className='text-xs opacity-60'>
-                isi detail perusahaan sesuai dengan nama yang terdaftar
-              </span>
+            <div className='w-2/5' ref={industry_idRef}>
+              <label className='form-label  text-nowrap'>Industri</label>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi detail perusahaan sesuai dengan nama yang terdaftar
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <Controller
@@ -348,7 +356,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   />
                 )}
               />
-              {selectedCategory && (
+              {!isKonfirmasi && selectedCategory && (
                 <span className='text-gray_r-11 text-xs opacity-60'>
                   Kategori : {selectedCategory}
                 </span>
@@ -366,9 +374,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
               <label className='form-label w-2/5 text-nowrap'>
                 Alamat Perusahaan
               </label>
-              <span className='text-xs opacity-60'>
-                alamat sesuai dengan alamat kantor pusat
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  alamat sesuai dengan alamat kantor pusat
+                </span>
+              )}
             </div>
             <div className='w-3/5 flex gap-3 flex-col'>
               <div>
@@ -451,9 +461,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
               <label className='form-label w-2/5 text-nowrap'>
                 No. Telfon Perusahaan
               </label>
-              <span className='text-xs opacity-60'>
-                isi no telfon perusahaan yang sesuai
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi no telfon perusahaan yang sesuai
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <input
@@ -478,9 +490,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           <div className='flex flex-row  justify-between items-start'>
             <div>
               <label className='form-label w-2/5 text-nowrap'>Data Bank</label>
-              <span className='text-xs opacity-60'>
-                Isi detail data bank perusahaan anda
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  Isi detail data bank perusahaan anda
+                </span>
+              )}
             </div>
             <div className='w-3/5 flex gap-3 flex-row'>
               <div>
@@ -494,9 +508,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   className='form-input'
                   onChange={handleInputChange}
                 />
-                <span className='text-xs opacity-60'>
-                  Format: BCA, Mandiri, CIMB, BNI dll
-                </span>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>
+                    Format: BCA, Mandiri, CIMB, BNI dll
+                  </span>
+                )}
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errors.bankName}
@@ -514,7 +530,9 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   className='form-input'
                   onChange={handleInputChange}
                 />
-                <span className='text-xs opacity-60'>Format: John Doe</span>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>Format: John Doe</span>
+                )}
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errors.accountName}
@@ -532,7 +550,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   className='form-input'
                   onChange={handleInputChange}
                 />
-                <span className='text-xs opacity-60'>Format: 01234567896</span>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>
+                    Format: 01234567896
+                  </span>
+                )}
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errors.accountNumber}
@@ -592,10 +614,8 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-center'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Durasi Tempo
-              </label>
+            <div className='w-2/5'>
+              <label className='form-label text-nowrap'>Durasi Tempo</label>
               <span className='text-xs opacity-60'>
                 Pilih durasi tempo yang anda inginkan
               </span>
@@ -624,102 +644,188 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   </div>
                 )}
               </div>
-              <div className='w-4/5 flex flex-row justify-between items-center'>
-                <div>
-                  <label className='form-label w-2/5 text-nowrap'>
-                    Limit Tempo
-                  </label>
-                  <span className='text-xs opacity-60'>
-                    Ajukan nilai limit yang anda mau
-                  </span>
-                </div>
-                <div
-                  className='flex flex-col justify-start items-start'
-                  ref={tempoLimitRef}
-                >
-                  <RadioGroup
-                    onChange={(value) => {
-                      if (value === 'custom') {
-                        setIsCustom(true);
-                        updateForm('tempoLimit', tempoLimitValue); // Update dengan nilai input custom jika dipilih
-                      } else {
-                        setIsCustom(false);
-                        onChangeTempoLimit(value); // Update dengan nilai radio button yang dipilih
-                      }
-                    }}
-                    className='flex items-center justify-between'
-                    value={isCustom ? 'custom' : form.tempoLimit}
+              {!isKonfirmasi && (
+                <div className='w-4/5 flex flex-row justify-between items-center'>
+                  <div>
+                    <label className='form-label w-2/5 text-nowrap'>
+                      Limit Tempo
+                    </label>
+                    <span className='text-xs opacity-60'>
+                      Ajukan nilai limit yang anda mau
+                    </span>
+                  </div>
+                  <div
+                    className='flex flex-col justify-start items-start'
+                    ref={tempoLimitRef}
                   >
-                    <Stack direction='row'>
-                      {/* Kolom 1 */}
-                      <Stack direction='column' spacing={2} className='mr-4'>
-                        {radioOptions.slice(0, 4).map((option) => (
-                          <Radio
-                            key={option.value}
-                            colorScheme='red'
-                            value={option.value}
-                          >
-                            {option.label}
-                          </Radio>
-                        ))}
-                      </Stack>
+                    <RadioGroup
+                      onChange={(value) => {
+                        if (value === 'custom') {
+                          setIsCustom(true);
+                          updateForm('tempoLimit', tempoLimitValue); // Update dengan nilai input custom jika dipilih
+                        } else {
+                          setIsCustom(false);
+                          onChangeTempoLimit(value); // Update dengan nilai radio button yang dipilih
+                        }
+                      }}
+                      className='flex items-center justify-between'
+                      value={isCustom ? 'custom' : form.tempoLimit}
+                    >
+                      <Stack direction='row'>
+                        {/* Kolom 1 */}
+                        <Stack direction='column' spacing={2} className='mr-4'>
+                          {radioOptions.slice(0, 4).map((option) => (
+                            <Radio
+                              key={option.value}
+                              colorScheme='red'
+                              value={option.value}
+                            >
+                              {option.label}
+                            </Radio>
+                          ))}
+                        </Stack>
 
-                      {/* Kolom 2 */}
-                      <Stack direction='column' className='ml-8' spacing={2}>
-                        {radioOptions.slice(4).map((option) => (
-                          <Radio
-                            key={option.value}
-                            colorScheme='red'
-                            value={option.value}
-                          >
-                            {option.label}
-                          </Radio>
-                        ))}
-                        <div className='flex flex-row items-center'>
-                          <Radio colorScheme='red' value='custom'></Radio>
+                        {/* Kolom 2 */}
+                        <Stack direction='column' className='ml-8' spacing={2}>
+                          {radioOptions.slice(4).map((option) => (
+                            <Radio
+                              key={option.value}
+                              colorScheme='red'
+                              value={option.value}
+                            >
+                              {option.label}
+                            </Radio>
+                          ))}
+                          <div className='flex flex-row items-center'>
+                            <Radio colorScheme='red' value='custom'></Radio>
 
-                          <input
-                            placeholder='Isi limit yang anda inginkan'
-                            type='text'
-                            className='border ml-2 p-1' // padding untuk memberi ruang untuk "RP"
-                            value={formatRupiah(tempoLimitValueEx)} // Menampilkan nilai terformat
-                            onChange={(e) => {
-                              const value = e.target.value;
-                              const formattedValue = formatRupiah(value);
-                              setTempoLimitValueEx(formattedValue);
-                              updateForm(
-                                'tempoLimit',
-                                formattedValue.replace(/^Rp\s*/, '')
-                              ); // Mengupdate nilai di react-hook-form
-                            }}
-                          />
-                        </div>
+                            <input
+                              placeholder='Isi limit yang anda inginkan'
+                              type='text'
+                              className='border ml-2 p-1' // padding untuk memberi ruang untuk "RP"
+                              value={formatRupiah(tempoLimitValueEx)} // Menampilkan nilai terformat
+                              onChange={(e) => {
+                                const value = e.target.value;
+                                const formattedValue = formatRupiah(value);
+                                setTempoLimitValueEx(formattedValue);
+                                updateForm(
+                                  'tempoLimit',
+                                  formattedValue.replace(/^Rp\s*/, '')
+                                ); // Mengupdate nilai di react-hook-form
+                              }}
+                            />
+                          </div>
+                        </Stack>
                       </Stack>
-                    </Stack>
-                  </RadioGroup>
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.tempoLimit}
-                    </div>
-                  )}
+                    </RadioGroup>
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.tempoLimit}
+                      </div>
+                    )}
+                  </div>
                 </div>
-              </div>
+              )}
             </div>
           </div>
+          {isKonfirmasi && (
+            <div className='flex flex-row justify-between items-center'>
+              <div className='w-2/5'>
+                <label className='form-label w-2/5 text-nowrap'>
+                  Limit Tempo
+                </label>
+                <span className='text-xs opacity-60'>
+                  Ajukan nilai limit yang anda mau
+                </span>
+              </div>
+              <div
+                className='w-3/5 flex flex-col justify-start items-start'
+                ref={tempoLimitRef}
+              >
+                <RadioGroup
+                  onChange={(value) => {
+                    if (value === 'custom') {
+                      setIsCustom(true);
+                      updateForm('tempoLimit', tempoLimitValue); // Update dengan nilai input custom jika dipilih
+                    } else {
+                      setIsCustom(false);
+                      onChangeTempoLimit(value); // Update dengan nilai radio button yang dipilih
+                    }
+                  }}
+                  className='flex items-center justify-between'
+                  value={isCustom ? 'custom' : form.tempoLimit}
+                >
+                  <Stack direction='row'>
+                    {/* Kolom 1 */}
+                    <Stack direction='column' spacing={2} className='mr-4'>
+                      {radioOptions.slice(0, 4).map((option) => (
+                        <Radio
+                          key={option.value}
+                          colorScheme='red'
+                          value={option.value}
+                        >
+                          {option.label}
+                        </Radio>
+                      ))}
+                    </Stack>
+
+                    {/* Kolom 2 */}
+                    <Stack direction='column' className='ml-8' spacing={2}>
+                      {radioOptions.slice(4).map((option) => (
+                        <Radio
+                          key={option.value}
+                          colorScheme='red'
+                          value={option.value}
+                        >
+                          {option.label}
+                        </Radio>
+                      ))}
+                      <div className='flex flex-row items-center'>
+                        <Radio colorScheme='red' value='custom'></Radio>
+
+                        <input
+                          placeholder='Isi limit yang anda inginkan'
+                          type='text'
+                          className='border ml-2 p-1' // padding untuk memberi ruang untuk "RP"
+                          value={formatRupiah(tempoLimitValueEx)} // Menampilkan nilai terformat
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            const formattedValue = formatRupiah(value);
+                            setTempoLimitValueEx(formattedValue);
+                            updateForm(
+                              'tempoLimit',
+                              formattedValue.replace(/^Rp\s*/, '')
+                            ); // Mengupdate nilai di react-hook-form
+                          }}
+                        />
+                      </div>
+                    </Stack>
+                  </Stack>
+                </RadioGroup>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.tempoLimit}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
 
           <div className='text-red-500'>
             *Durasi dan limit dapat berbeda sesuaui dengan verifikasi oleh tim
             Indoteknik.com
           </div>
 
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+          <div className='flex flex-row justify-between items-start'>
+            <div className='w-2/5'>
+              <label className='form-label  text-wrap '>
                 Apakah bersedia transaksi via website?
               </label>
-              <span className='text-xs opacity-60'>
-                Pilih produk bisa lebih dari 1
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  Pilih produk bisa lebih dari 1
+                </span>
+              )}
             </div>
             <div className='w-3/5 flex flex-col justify-start'>
               <div className='flex gap-x-4' ref={bersediaRef}>
@@ -767,14 +873,20 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
             </div>
           </div>
 
-          <div className='flex flex-row  justify-between items-start'>
+          <div
+            className={`flex flex-row  justify-between ${
+              isKonfirmasi ? 'items-center' : 'items-start'
+            }`}
+          >
             <div>
               <label className='form-label w-2/5 text-nowrap'>
                 Kategori Produk yang Digunakan
               </label>
-              <span className='text-xs opacity-60'>
-                Pilih produk bisa lebih dari 1
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  Pilih produk bisa lebih dari 1
+                </span>
+              )}
             </div>
             <div className='w-3/5 flex flex-col'>
               <div className='flex flex-row justify-between'>
@@ -812,7 +924,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           </div>
         </div>
       </form>
-    </>
+    </div>
   );
 };