<iman> update pengajuan tempo mobile view fix

1 files changed, 966 insertions, 452 deletions

diff --git a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
index 3b3bba0f..112b85ef 100644
--- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
@@ -147,462 +147,471 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   }, [buttonSubmitClick]);
   return (
     <>
-      <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>Dokumen</h1>
-      <form className='flex flex-col w-full gap-5'>
-        <div className='w-full flex flex-row items-center '>
-          <div className='w-2/5'>
-            <label className='form-label  text-nowrap'>
-              NIB (SIUP/TDP/SKDP)
-            </label>
-          </div>
-          <div className='w-3/5'>
-            <div className='flex flex-row items-start justify-between'>
-              <span className='w-3/5  text-gray-600 truncate'>
-                {formDokumen?.dokumenNib?.name}
-              </span>
-              <div className='w-2/5 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenNib'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+      {isDesktop && (
+        <div>
+          <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
+            Dokumen
+          </h1>
+          <form className='flex flex-col w-full gap-5'>
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-nowrap'>
+                  NIB (SIUP/TDP/SKDP)
                 </label>
-                <input
-                  // value={formDokumen?.dokumenNib?.name}
-                  id='dokumenNib'
-                  name='dokumenNib'
-                  type='file'
-                  title=' '
-                  ref={dokumenNibRef}
-                  className='hidden'
-                  aria-invalid={errorsDokumen.dokumenNib}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenNib.format,
-                      formDokumen.dokumenNib.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
               </div>
-            </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenNib}
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenNib?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenNib'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenNib'
+                      name='dokumenNib'
+                      type='file'
+                      title=' '
+                      ref={dokumenNibRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenNib}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenNib.format,
+                          formDokumen.dokumenNib.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenNib}
+                  </div>
+                )}
               </div>
-            )}
-          </div>
-        </div>
-        <div className='w-full flex flex-row items-center '>
-          <div className='w-2/5'>
-            <label className='form-label  text-nowrap'>NPWP Perusahaan</label>
-          </div>
-          <div className='w-3/5'>
-            <div className='flex flex-row items-start justify-between'>
-              <span className='w-3/5  text-gray-600 truncate'>
-                {formDokumen?.dokumenNpwp?.name}
-              </span>
-              <div className='w-2/5 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenNpwp'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+            </div>
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-nowrap'>
+                  NPWP Perusahaan
                 </label>
-                <input
-                  // value={formDokumen?.dokumenNib?.name}
-                  id='dokumenNpwp'
-                  name='dokumenNpwp'
-                  type='file'
-                  title=' '
-                  ref={dokumenNpwpRef}
-                  className='hidden'
-                  aria-invalid={errorsDokumen.dokumenNpwp}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenNpwp.format,
-                      formDokumen.dokumenNpwp.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenNpwp?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenNpwp'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenNpwp'
+                      name='dokumenNpwp'
+                      type='file'
+                      title=' '
+                      ref={dokumenNpwpRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenNpwp}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenNpwp.format,
+                          formDokumen.dokumenNpwp.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenNpwp}
+                  </div>
+                )}
               </div>
             </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenNpwp}
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-nowrap'>SPPKP</label>
               </div>
-            )}
-          </div>
-        </div>
-        <div className='w-full flex flex-row items-center '>
-          <div className='w-2/5'>
-            <label className='form-label  text-nowrap'>SPPKP</label>
-          </div>
-          <div className='w-3/5'>
-            <div className='flex flex-row items-start justify-between'>
-              <span className='w-3/5  text-gray-600 truncate'>
-                {formDokumen?.dokumenSppkp?.name}
-              </span>
-              <div className='w-2/5 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenSppkp'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
-                </label>
-                <input
-                  // value={formDokumen?.dokumenNib?.name}
-                  id='dokumenSppkp'
-                  name='dokumenSppkp'
-                  type='file'
-                  title=' '
-                  ref={dokumenSppkpRef}
-                  className='hidden'
-                  aria-invalid={errorsDokumen.dokumenSppkp}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenSppkp.format,
-                      formDokumen.dokumenSppkp.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenSppkp?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenSppkp'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenSppkp'
+                      name='dokumenSppkp'
+                      type='file'
+                      title=' '
+                      ref={dokumenSppkpRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenSppkp}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenSppkp.format,
+                          formDokumen.dokumenSppkp.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenSppkp}
+                  </div>
+                )}
               </div>
             </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenSppkp}
-              </div>
-            )}
-          </div>
-        </div>
 
-        <div className='w-full flex flex-row items-center '>
-          <div className='w-2/5'>
-            <label className='form-label  text-nowrap'>
-              {' '}
-              Akta Perubahan <span className=' opacity-60'>(Opsional)</span>
-            </label>
-          </div>
-          <div className='w-3/5'>
-            <div className='flex flex-row items-start justify-between'>
-              <span className='w-3/5  text-gray-600 truncate'>
-                {formDokumen?.dokumenAktaPerubahan?.name}
-              </span>
-              <div className='w-2/5 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenAktaPerubahan'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-nowrap'>
+                  {' '}
+                  Akta Perubahan <span className=' opacity-60'>(Opsional)</span>
                 </label>
-                <input
-                  // value={formDokumen?.dokumenNib?.name}
-                  id='dokumenAktaPerubahan'
-                  name='dokumendokumenAktaPerubahanSppkp'
-                  type='file'
-                  title=' '
-                  ref={dokumenAktaPerubahanRef}
-                  className='hidden'
-                  aria-invalid={errorsDokumen.dokumenAktaPerubahan}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenAktaPerubahan.format,
-                      formDokumen.dokumenAktaPerubahan.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
               </div>
-            </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenAktaPerubahan}
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenAktaPerubahan?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenAktaPerubahan'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenAktaPerubahan'
+                      name='dokumendokumenAktaPerubahanSppkp'
+                      type='file'
+                      title=' '
+                      ref={dokumenAktaPerubahanRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenAktaPerubahan}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenAktaPerubahan.format,
+                          formDokumen.dokumenAktaPerubahan.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenAktaPerubahan}
+                  </div>
+                )}
               </div>
-            )}
-          </div>
-        </div>
+            </div>
 
-        <div className='w-full flex flex-row items-center '>
-          <div className='w-2/5'>
-            <label className='form-label  text-nowrap'>
-              KTP Dirut/Direktur <span className=' opacity-60'>(Opsional)</span>
-            </label>
-          </div>
-          <div className='w-3/5'>
-            <div className='flex flex-row items-start justify-between'>
-              <span className='w-3/5  text-gray-600 truncate'>
-                {formDokumen?.dokumenKtpDirut?.name}
-              </span>
-              <div className='w-2/5 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenKtpDirut'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-nowrap'>
+                  KTP Dirut/Direktur{' '}
+                  <span className=' opacity-60'>(Opsional)</span>
                 </label>
-                <input
-                  // value={formDokumen?.dokumenNib?.name}
-                  id='dokumenKtpDirut'
-                  name='dokumenKtpDirut'
-                  type='file'
-                  title=' '
-                  ref={dokumenKtpDirutRef}
-                  className='hidden'
-                  aria-invalid={errorsDokumen.dokumenKtpDirut}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenKtpDirut.format,
-                      formDokumen.dokumenKtpDirut.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
               </div>
-            </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenKtpDirut}
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenKtpDirut?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenKtpDirut'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenKtpDirut'
+                      name='dokumenKtpDirut'
+                      type='file'
+                      title=' '
+                      ref={dokumenKtpDirutRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenKtpDirut}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenKtpDirut.format,
+                          formDokumen.dokumenKtpDirut.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenKtpDirut}
+                  </div>
+                )}
               </div>
-            )}
-          </div>
-        </div>
+            </div>
 
-        <div className='w-full flex flex-row items-center '>
-          <div className='w-2/5'>
-            <label className='form-label  text-nowrap'>
-              Akta Pendirian <span className=' opacity-60'>(Opsional)</span>
-            </label>
-          </div>
-          <div className='w-3/5'>
-            <div className='flex flex-row items-start justify-between'>
-              <span className='w-3/5  text-gray-600 truncate'>
-                {formDokumen?.dokumenAktaPendirian?.name}
-              </span>
-              <div className='w-2/5 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenAktaPendirian'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-nowrap'>
+                  Akta Pendirian <span className=' opacity-60'>(Opsional)</span>
                 </label>
-                <input
-                  // value={formDokumen?.dokumenNib?.name}
-                  id='dokumenAktaPendirian'
-                  name='dokumenAktaPendirian'
-                  type='file'
-                  title=' '
-                  ref={dokumenAktaPendirianRef}
-                  className='hidden'
-                  aria-invalid={errorsDokumen.dokumenAktaPendirian}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenAktaPendirian.format,
-                      formDokumen.dokumenAktaPendirian.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
               </div>
-            </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenAktaPendirian}
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenAktaPendirian?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenAktaPendirian'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenAktaPendirian'
+                      name='dokumenAktaPendirian'
+                      type='file'
+                      title=' '
+                      ref={dokumenAktaPendirianRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenAktaPendirian}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenAktaPendirian.format,
+                          formDokumen.dokumenAktaPendirian.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenAktaPendirian}
+                  </div>
+                )}
               </div>
-            )}
-          </div>
-        </div>
+            </div>
 
-        <div className='w-full flex flex-row items-center '>
-          <div className='w-2/5'>
-            <label className='form-label  text-nowrap'>
-              Laporan Keuangan
-              <span className=' opacity-60'>(Opsional)</span>
-            </label>
-          </div>
-          <div className='w-3/5'>
-            <div className='flex flex-row items-start justify-between'>
-              <span className='w-3/5  text-gray-600 truncate'>
-                {formDokumen?.dokumenLaporanKeuangan?.name}
-              </span>
-              <div className='w-2/5 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenLaporanKeuangan'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-nowrap'>
+                  Laporan Keuangan
+                  <span className=' opacity-60'>(Opsional)</span>
                 </label>
-                <input
-                  // value={formDokumen?.dokumenNib?.name}
-                  id='dokumenLaporanKeuangan'
-                  name='dokumenLaporanKeuangan'
-                  type='file'
-                  title=' '
-                  ref={dokumenLaporanKeuanganRef}
-                  className='hidden'
-                  aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenLaporanKeuangan.format,
-                      formDokumen.dokumenLaporanKeuangan.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
               </div>
-            </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenLaporanKeuangan}
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenLaporanKeuangan?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenLaporanKeuangan'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenLaporanKeuangan'
+                      name='dokumenLaporanKeuangan'
+                      type='file'
+                      title=' '
+                      ref={dokumenLaporanKeuanganRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenLaporanKeuangan.format,
+                          formDokumen.dokumenLaporanKeuangan.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenLaporanKeuangan}
+                  </div>
+                )}
               </div>
-            )}
-          </div>
-        </div>
+            </div>
 
-        <div className='w-full flex flex-row items-center '>
-          <div className='w-2/5'>
-            <label className='form-label  text-nowrap'>
-              Foto Kantor (Tampak Depan)
-            </label>
-          </div>
-          <div className='w-3/5'>
-            <div className='flex flex-row items-start justify-between'>
-              <span className='w-3/5  text-gray-600 truncate'>
-                {formDokumen?.dokumenFotoKantor?.name}
-              </span>
-              <div className='w-2/5 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenFotoKantor'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-nowrap'>
+                  Foto Kantor (Tampak Depan)
                 </label>
-                <input
-                  // value={formDokumen?.dokumenNib?.name}
-                  id='dokumenFotoKantor'
-                  name='dokumenFotoKantor'
-                  type='file'
-                  title=' '
-                  ref={dokumenFotoKantorRef}
-                  className='hidden'
-                  aria-invalid={errorsDokumen.dokumenFotoKantor}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenFotoKantor.format,
-                      formDokumen.dokumenFotoKantor.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
               </div>
-            </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenFotoKantor}
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenFotoKantor?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenFotoKantor'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenFotoKantor'
+                      name='dokumenFotoKantor'
+                      type='file'
+                      title=' '
+                      ref={dokumenFotoKantorRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenFotoKantor}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenFotoKantor.format,
+                          formDokumen.dokumenFotoKantor.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenFotoKantor}
+                  </div>
+                )}
               </div>
-            )}
-          </div>
-        </div>
+            </div>
 
-        <div className='w-full flex flex-row items-center '>
-          <div className='w-2/5'>
-            <label className='form-label  text-nowrap'>Tempat Bekerja</label>
-          </div>
-          <div className='w-3/5'>
-            <div className='flex flex-row items-start justify-between'>
-              <span className='w-3/5  text-gray-600 truncate'>
-                {formDokumen?.dokumenTempatBekerja?.name}
-              </span>
-              <div className='w-2/5 flex flex-row gap-2'>
-                <label
-                  htmlFor='dokumenTempatBekerja'
-                  className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
-                >
-                  Ubah
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-nowrap'>
+                  Tempat Bekerja
                 </label>
-                <input
-                  // value={formDokumen?.dokumenNib?.name}
-                  id='dokumenTempatBekerja'
-                  name='dokumenTempatBekerja'
-                  type='file'
-                  title=' '
-                  ref={dokumenTempatBekerjaRef}
-                  className='hidden'
-                  aria-invalid={errorsDokumen.dokumenTempatBekerja}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
-                <button
-                  className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  type='button'
-                  onClick={() =>
-                    handleConfirmSubmit(
-                      formDokumen.dokumenTempatBekerja.format,
-                      formDokumen.dokumenTempatBekerja.base64
-                    )
-                  }
-                >
-                  <EyeIcon className={`w-4 ${isDesktop && ''}`} />
-                </button>
-              </div>
-              {/* <Image
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenTempatBekerja?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenTempatBekerja'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenTempatBekerja'
+                      name='dokumenTempatBekerja'
+                      type='file'
+                      title=' '
+                      ref={dokumenTempatBekerjaRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenTempatBekerja}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenTempatBekerja.format,
+                          formDokumen.dokumenTempatBekerja.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                  {/* <Image
                 src={`data:image/png;base64, ${formDokumen.dokumenNib.base64}`}
                 alt='Contoh SPPKP'
                 className='w-full h-full '
@@ -610,37 +619,542 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 height={800}
                 quality={85}
               /> */}
-            </div>
-            {chekValid && (
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errorsDokumen.dokumenTempatBekerja}
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenTempatBekerja}
+                  </div>
+                )}
               </div>
-            )}
-          </div>
+            </div>
+          </form>
         </div>
-      </form>
+      )}
+      {isMobile && (
+        <div>
+          <h1 className={`font-bold ${isKonfirmasi ? 'hidden' : 'text-xl'}`}>
+            Dokumen
+          </h1>
+          <form className='flex flex-col w-full gap-5 text-sm'>
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-wrap'>
+                  NIB (SIUP/TDP/SKDP)
+                </label>
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-center justify-start'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenNib?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenNib'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenNib'
+                      name='dokumenNib'
+                      type='file'
+                      title=' '
+                      ref={dokumenNibRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenNib}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenNib.format,
+                          formDokumen.dokumenNib.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenNib}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-wrap'>NPWP Perusahaan</label>
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenNpwp?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenNpwp'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenNpwp'
+                      name='dokumenNpwp'
+                      type='file'
+                      title=' '
+                      ref={dokumenNpwpRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenNpwp}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenNpwp.format,
+                          formDokumen.dokumenNpwp.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenNpwp}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-wrap'>SPPKP</label>
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenSppkp?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenSppkp'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenSppkp'
+                      name='dokumenSppkp'
+                      type='file'
+                      title=' '
+                      ref={dokumenSppkpRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenSppkp}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenSppkp.format,
+                          formDokumen.dokumenSppkp.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenSppkp}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-wrap'>
+                  {' '}
+                  Akta Perubahan <span className=' opacity-60'>(Opsional)</span>
+                </label>
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenAktaPerubahan?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenAktaPerubahan'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenAktaPerubahan'
+                      name='dokumendokumenAktaPerubahanSppkp'
+                      type='file'
+                      title=' '
+                      ref={dokumenAktaPerubahanRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenAktaPerubahan}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenAktaPerubahan.format,
+                          formDokumen.dokumenAktaPerubahan.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenAktaPerubahan}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-wrap'>
+                  KTP Dirut/Direktur{' '}
+                  <span className=' opacity-60'>(Opsional)</span>
+                </label>
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenKtpDirut?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenKtpDirut'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenKtpDirut'
+                      name='dokumenKtpDirut'
+                      type='file'
+                      title=' '
+                      ref={dokumenKtpDirutRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenKtpDirut}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenKtpDirut.format,
+                          formDokumen.dokumenKtpDirut.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenKtpDirut}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-wrap'>
+                  Akta Pendirian <span className=' opacity-60'>(Opsional)</span>
+                </label>
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenAktaPendirian?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenAktaPendirian'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenAktaPendirian'
+                      name='dokumenAktaPendirian'
+                      type='file'
+                      title=' '
+                      ref={dokumenAktaPendirianRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenAktaPendirian}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenAktaPendirian.format,
+                          formDokumen.dokumenAktaPendirian.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenAktaPendirian}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-wrap'>
+                  Laporan Keuangan
+                  <span className=' opacity-60'>(Opsional)</span>
+                </label>
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenLaporanKeuangan?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenLaporanKeuangan'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenLaporanKeuangan'
+                      name='dokumenLaporanKeuangan'
+                      type='file'
+                      title=' '
+                      ref={dokumenLaporanKeuanganRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenLaporanKeuangan.format,
+                          formDokumen.dokumenLaporanKeuangan.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenLaporanKeuangan}
+                  </div>
+                )}
+              </div>
+            </div>
 
-      <BottomPopup
-        className='!container'
-        title='Dokumen Tittle'
-        active={isExample}
-        close={() => setIsExample(false)}
-      >
-        <div className='flex  justify-center items-center p-2'>
-          <embed
-            src={`data:${format};base64,${base64}`}
-            type={format}
-            width='100%'
-            height='600px'
-          />
-          {/* <iframe
-            src={`data:${format};base64,${base64}`}
-            width='100%'
-            height='600px'
-            title='PDF Document'
-          ></iframe> */}
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-wrap'>
+                  Foto Kantor (Tampak Depan)
+                </label>
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenFotoKantor?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenFotoKantor'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenFotoKantor'
+                      name='dokumenFotoKantor'
+                      type='file'
+                      title=' '
+                      ref={dokumenFotoKantorRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenFotoKantor}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenFotoKantor.format,
+                          formDokumen.dokumenFotoKantor.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenFotoKantor}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className='w-full flex flex-row items-center '>
+              <div className='w-2/5'>
+                <label className='form-label  text-wrap'>Tempat Bekerja</label>
+              </div>
+              <div className='w-3/5'>
+                <div className='flex flex-row items-start justify-between'>
+                  <span className='w-3/5  text-gray-600 truncate'>
+                    {formDokumen?.dokumenTempatBekerja?.name}
+                  </span>
+                  <div className='w-2/5 flex flex-row gap-2'>
+                    <label
+                      htmlFor='dokumenTempatBekerja'
+                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded'
+                    >
+                      Ubah
+                    </label>
+                    <input
+                      // value={formDokumen?.dokumenNib?.name}
+                      id='dokumenTempatBekerja'
+                      name='dokumenTempatBekerja'
+                      type='file'
+                      title=' '
+                      ref={dokumenTempatBekerjaRef}
+                      className='hidden'
+                      aria-invalid={errorsDokumen.dokumenTempatBekerja}
+                      onChange={handleInputChange}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <button
+                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                      type='button'
+                      onClick={() =>
+                        handleConfirmSubmit(
+                          formDokumen.dokumenTempatBekerja.format,
+                          formDokumen.dokumenTempatBekerja.base64
+                        )
+                      }
+                    >
+                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
+                    </button>
+                  </div>
+                  {/* <Image
+               src={`data:image/png;base64, ${formDokumen.dokumenNib.base64}`}
+               alt='Contoh SPPKP'
+               className='w-full h-full '
+               width={800}
+               height={800}
+               quality={85}
+             /> */}
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenTempatBekerja}
+                  </div>
+                )}
+              </div>
+            </div>
+          </form>
         </div>
-      </BottomPopup>
+      )}
+      {isDesktop && (
+        <BottomPopup
+          className='!container'
+          title='Dokumen'
+          active={isExample}
+          close={() => setIsExample(false)}
+        >
+          <div className='flex  justify-center items-center p-2'>
+            {/* <embed
+              src={`data:${format};base64,${base64}`}
+              type={format}
+              width='100%'
+              height='600px'
+            /> */}
+            <iframe
+              src={`data:${format};base64,${base64}`}
+              width='100%'
+              height='100%'
+              title='Document'
+            ></iframe>
+          </div>
+        </BottomPopup>
+      )}
+      {isMobile && (
+        <BottomPopup
+          className='!container'
+          title='Dokumen'
+          active={isExample}
+          close={() => setIsExample(false)}
+        >
+          <div className='flex  justify-center items-center p-2'>
+            {/* <embed
+              src={`data:${format};base64,${base64}`}
+              type={format}
+              width='100%'
+              height='100%'
+            /> */}
+            <iframe
+              src={`data:${format};base64,${base64}`}
+              width='100%'
+              height='100%'
+              title='Document'
+            ></iframe>
+          </div>
+        </BottomPopup>
+      )}
     </>
   );
 };