<iman> update pengajuan tempo mobile view fix

1 files changed, 571 insertions, 163 deletions

diff --git a/src/lib/pengajuan-tempo/component/Dokumen.jsx b/src/lib/pengajuan-tempo/component/Dokumen.jsx
index bb88f80b..0873df66 100644
--- a/src/lib/pengajuan-tempo/component/Dokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/Dokumen.jsx
@@ -5,6 +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';
+import useDevice from '@/core/hooks/useDevice';
 const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const { control, watch } = useForm();
   const {
@@ -14,7 +15,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     updateFormDokumen,
     getJumlahDokumenDiisi,
   } = usePengajuanTempoStoreDokumen();
-
+  const { isDesktop, isMobile } = useDevice();
   // const handleInputChange = (event) => {
   //   const { name, value } = event.target;
   //   updateFormDokumen(name, value);
@@ -135,26 +136,440 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   }, [buttonSubmitClick]);
   return (
     <>
-      <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 '>
-            <div className='w-full grid grid-cols-2 gap-5'>
-              <div>
+      {isDesktop && (
+        <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 '>
+                <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='w-full grid grid-cols-2 gap-5'>
+                  <div>
+                    <label className='form-label  text-nowrap'>
+                      NPWP Perusahaan
+                    </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='dokumenNpwp'
+                        className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                      >
+                        Upload Dokumen
+                      </label>
+                      <input
+                        // value={formDokumen.dokumenNpwp}
+                        id='dokumenNpwp'
+                        name='dokumenNpwp'
+                        type='file'
+                        ref={dokumenNpwpRef}
+                        title=' '
+                        className='hidden'
+                        aria-invalid={errorsDokumen.dokumenNpwp}
+                        onChange={handleInputChange}
+                        accept='.pdf,.png,.jpg,.jpeg'
+                      />
+                      <span className='mt-2 text-gray-600'>
+                        {formDokumen?.dokumenNpwp?.name}
+                      </span>
+                    </div>
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errorsDokumen.dokumenNpwp}
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <div className='w-full grid grid-cols-2 gap-5'>
+                  <div>
+                    <label className='form-label  text-nowrap'>SPPKP</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='dokumenSppkp'
+                        className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                      >
+                        Upload Dokumen
+                      </label>
+                      <input
+                        // value={formDokumen.dokumenSppkp}
+                        id='dokumenSppkp'
+                        name='dokumenSppkp'
+                        type='file'
+                        ref={dokumenSppkpRef}
+                        className='hidden'
+                        aria-invalid={errorsDokumen.dokumenSppkp}
+                        onChange={handleInputChange}
+                        accept='.pdf,.png,.jpg,.jpeg'
+                      />
+                      <span className='mt-2 text-gray-600'>
+                        {formDokumen?.dokumenSppkp?.name}
+                      </span>
+                    </div>
+
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errorsDokumen.dokumenSppkp}
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <div className='w-full grid grid-cols-2 gap-5'>
+                  <div>
+                    <label className='form-label  text-nowrap'>
+                      Akta Perubahan{' '}
+                      <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='dokumenAktaPerubahan'
+                        className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                      >
+                        Upload Dokumen
+                      </label>
+                      <input
+                        // value={formDokumen.dokumenAktaPerubahan}
+                        id='dokumenAktaPerubahan'
+                        name='dokumenAktaPerubahan'
+                        type='file'
+                        ref={dokumenAktaPerubahanRef}
+                        className='hidden'
+                        aria-invalid={errorsDokumen.dokumenAktaPerubahan}
+                        onChange={handleInputChange}
+                        accept='.pdf,.png,.jpg,.jpeg'
+                      />
+                      <span className='mt-2 text-gray-600'>
+                        {formDokumen?.dokumenAktaPerubahan?.name}
+                      </span>
+                    </div>
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errorsDokumen.dokumenAktaPerubahan}
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <div className='w-full grid grid-cols-2 gap-5'>
+                  <div>
+                    <label className='form-label  text-nowrap'>
+                      KTP Dirut/Direktur{' '}
+                      <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='dokumenKtpDirut'
+                        className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                      >
+                        Upload Dokumen
+                      </label>
+                      <input
+                        // value={formDokumen.dokumenKtpDirut}
+                        id='dokumenKtpDirut'
+                        name='dokumenKtpDirut'
+                        type='file'
+                        ref={dokumenKtpDirutRef}
+                        className='hidden'
+                        aria-invalid={errorsDokumen.dokumenKtpDirut}
+                        onChange={handleInputChange}
+                        accept='.pdf,.png,.jpg,.jpeg'
+                      />
+                      <span className='mt-2 text-gray-600'>
+                        {formDokumen?.dokumenKtpDirut?.name}
+                      </span>
+                    </div>
+
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errorsDokumen.dokumenKtpDirut}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className='w-px bg-gray-300'></div>
+              <div className='kolom kanan w-full grid grid-rows-2 gap-10 '>
+                <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 className='w-full grid grid-cols-2 gap-5'>
+                  <div>
+                    <label className='form-label  text-nowrap'>
+                      Laporan Keuangan
+                      <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='dokumenLaporanKeuangan'
+                        className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                      >
+                        Upload Dokumen
+                      </label>
+                      <input
+                        // value={formDokumen.dokumenLaporanKeuangan}
+                        id='dokumenLaporanKeuangan'
+                        name='dokumenLaporanKeuangan'
+                        type='file'
+                        ref={dokumenLaporanKeuanganRef}
+                        className='hidden'
+                        aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
+                        onChange={handleInputChange}
+                        accept='.pdf,.png,.jpg,.jpeg'
+                      />
+                      <span className='mt-2 text-gray-600'>
+                        {formDokumen?.dokumenLaporanKeuangan?.name}
+                      </span>
+                    </div>
+
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errorsDokumen.dokumenLaporanKeuangan}
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <div className='w-full grid grid-cols-2 gap-5'>
+                  <div>
+                    <label className='form-label  text-nowrap'>
+                      Foto Kantor (Tampak Depan)
+                    </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='dokumenFotoKantor'
+                        className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                      >
+                        Upload Dokumen
+                      </label>
+                      <input
+                        // value={formDokumen.dokumenFotoKantor}
+                        id='dokumenFotoKantor'
+                        name='dokumenFotoKantor'
+                        type='file'
+                        ref={dokumenFotoKantorRef}
+                        className='hidden'
+                        aria-invalid={errorsDokumen.dokumenFotoKantor}
+                        onChange={handleInputChange}
+                        accept='.pdf,.png,.jpg,.jpeg'
+                      />
+                      <span className='mt-2 text-gray-600'>
+                        {formDokumen?.dokumenFotoKantor?.name}
+                      </span>
+                    </div>
+
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errorsDokumen.dokumenFotoKantor}
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <div className='w-full grid grid-cols-2 gap-5'>
+                  <div>
+                    <label className='form-label  text-nowrap'>
+                      Tempat Bekerja
+                    </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='dokumenTempatBekerja'
+                        className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                      >
+                        Upload Dokumen
+                      </label>
+                      <input
+                        // value={formDokumen.dokumenTempatBekerja}
+                        id='dokumenTempatBekerja'
+                        name='dokumenTempatBekerja'
+                        type='file'
+                        ref={dokumenTempatBekerjaRef}
+                        className='hidden'
+                        aria-invalid={errorsDokumen.dokumenTempatBekerja}
+                        onChange={handleInputChange}
+                        accept='.pdf,.png,.jpg,.jpeg'
+                      />
+                      <span className='mt-2 text-gray-600'>
+                        {formDokumen?.dokumenTempatBekerja?.name}
+                      </span>
+                    </div>
+
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errorsDokumen.dokumenTempatBekerja}
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <div></div>
+              </div>
+            </div>
+          </form>
+          <div className='w-1/2 mt-8 flex gap-3 flex-col'>
+            <div className='flex justify-between'>
+              <p className='font-bold'>Upload Progress</p>
+              <p>
+                <span className='text-red-500 font-bold'>
+                  {parseInt((getJumlahDokumenDiisi() / 9) * 100)} %
+                </span>
+                <span className='ml-2 opacity-60'>
+                  {getJumlahDokumenDiisi() >= 4
+                    ? getJumlahDokumenDiisi() == 9
+                      ? 'Selesai'
+                      : 'Sedikit Lagi'
+                    : ''}
+                </span>
+              </p>
+            </div>
+            {/* 50 keatas baru muncul kata kata sedikit lagi */}
+            <ProgressBar
+              completed={getJumlahDokumenDiisi()}
+              bgColor='#ef4444'
+              labelAlignment='outside'
+              isLabelVisible={false}
+              baseBgColor='#E5E7EB'
+              labelColor='#e80909'
+              labelSize='0'
+              maxCompleted={9}
+              height='14  px'
+            />
+            <span className='opacity-75'>
+              Tingkatin sedikit lagi agar pengajuan tempo kamu dapat kami proses
+              dengan cepat
+            </span>
+          </div>
+        </div>
+      )}
+      {isMobile && (
+        <div>
+          <h1
+            className={`font-bold py-4 mt-8 ${
+              isKonfirmasi ? 'text-xl' : 'text-xl'
+            }`}
+          >
+            Dokumen
+          </h1>
+          <form className='flex mt-4 flex-col w-full '>
+            <div className='w-full flex flex-col gap-4'>
+              <div className='w-full flex flex-col gap-2'>
                 <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'>
+                <div className='flex flex-row gap-2'>
                   <label
                     htmlFor='dokumenNib'
-                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                   >
-                    Upload Dokumen
+                    {formDokumen?.dokumenNib?.name
+                      ? 'Sudah Upload'
+                      : 'Upload Dokumen'}
                   </label>
                   <input
                     // value={formDokumen?.dokumenNib?.name}
@@ -168,33 +583,32 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                     onChange={handleInputChange}
                     accept='.pdf,.png,.jpg,.jpeg'
                   />
-                  <span className='mt-2 text-gray-600'>
+                  <span className='mt-2 text-gray-600 truncate'>
                     {formDokumen?.dokumenNib?.name}
                   </span>
                 </div>
+                <span className='text-xs opacity-60 text-red-500'>
+                  Format: pdf, jpeg, jpg, png. max file size 2MB
+                </span>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errorsDokumen.dokumenNib}
                   </div>
                 )}
               </div>
-            </div>
-            <div className='w-full grid grid-cols-2 gap-5'>
-              <div>
+
+              <div className='w-full flex flex-col gap-2'>
                 <label className='form-label  text-nowrap'>
                   NPWP Perusahaan
                 </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'>
+                <div className='flex flex-row gap-2'>
                   <label
                     htmlFor='dokumenNpwp'
-                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                   >
-                    Upload Dokumen
+                    {formDokumen?.dokumenNpwp?.name
+                      ? 'Sudah Upload'
+                      : 'Upload Dokumen'}
                   </label>
                   <input
                     // value={formDokumen.dokumenNpwp}
@@ -208,292 +622,286 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                     onChange={handleInputChange}
                     accept='.pdf,.png,.jpg,.jpeg'
                   />
-                  <span className='mt-2 text-gray-600'>
+                  <span className='mt-2 text-gray-600 truncate'>
                     {formDokumen?.dokumenNpwp?.name}
                   </span>
                 </div>
+                <span className='text-xs opacity-60 text-red-500'>
+                  Format: pdf, jpeg, jpg, png. max file size 2MB
+                </span>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errorsDokumen.dokumenNpwp}
                   </div>
                 )}
               </div>
-            </div>
-            <div className='w-full grid grid-cols-2 gap-5'>
-              <div>
+
+              <div className='w-full flex flex-col gap-2'>
                 <label className='form-label  text-nowrap'>SPPKP</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'>
+                <div className='flex flex-row gap-2'>
                   <label
                     htmlFor='dokumenSppkp'
-                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                   >
-                    Upload Dokumen
+                    {formDokumen?.dokumenSppkp?.name
+                      ? 'Sudah Upload'
+                      : 'Upload Dokumen'}
                   </label>
                   <input
-                    // value={formDokumen.dokumenSppkp}
+                    // value={formDokumen.dokumenNpwp}
                     id='dokumenSppkp'
                     name='dokumenSppkp'
                     type='file'
                     ref={dokumenSppkpRef}
+                    title=' '
                     className='hidden'
                     aria-invalid={errorsDokumen.dokumenSppkp}
                     onChange={handleInputChange}
                     accept='.pdf,.png,.jpg,.jpeg'
                   />
-                  <span className='mt-2 text-gray-600'>
+                  <span className='mt-2 text-gray-600 truncate'>
                     {formDokumen?.dokumenSppkp?.name}
                   </span>
                 </div>
-
+                <span className='text-xs opacity-60 text-red-500'>
+                  Format: pdf, jpeg, jpg, png. max file size 2MB
+                </span>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errorsDokumen.dokumenSppkp}
                   </div>
                 )}
               </div>
-            </div>
-            <div className='w-full grid grid-cols-2 gap-5'>
-              <div>
+
+              <div className='w-full flex flex-col gap-2'>
                 <label className='form-label  text-nowrap'>
                   Akta Perubahan <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'>
+                <div className='flex flex-row gap-2'>
                   <label
                     htmlFor='dokumenAktaPerubahan'
-                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                   >
-                    Upload Dokumen
+                    {formDokumen?.dokumenAktaPerubahan?.name
+                      ? 'Sudah Upload'
+                      : 'Upload Dokumen'}
                   </label>
                   <input
-                    // value={formDokumen.dokumenAktaPerubahan}
+                    // value={formDokumen.dokumenNpwp}
                     id='dokumenAktaPerubahan'
                     name='dokumenAktaPerubahan'
                     type='file'
                     ref={dokumenAktaPerubahanRef}
+                    title=' '
                     className='hidden'
                     aria-invalid={errorsDokumen.dokumenAktaPerubahan}
                     onChange={handleInputChange}
                     accept='.pdf,.png,.jpg,.jpeg'
                   />
-                  <span className='mt-2 text-gray-600'>
+                  <span className='mt-2 text-gray-600 truncate'>
                     {formDokumen?.dokumenAktaPerubahan?.name}
                   </span>
                 </div>
+                <span className='text-xs opacity-60 text-red-500'>
+                  Format: pdf, jpeg, jpg, png. max file size 2MB
+                </span>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errorsDokumen.dokumenAktaPerubahan}
                   </div>
                 )}
               </div>
-            </div>
-            <div className='w-full grid grid-cols-2 gap-5'>
-              <div>
+
+              <div className='w-full flex flex-col gap-2'>
                 <label className='form-label  text-nowrap'>
                   KTP Dirut/Direktur{' '}
                   <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'>
+                <div className='flex flex-row gap-2'>
                   <label
                     htmlFor='dokumenKtpDirut'
-                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                   >
-                    Upload Dokumen
+                    {formDokumen?.dokumenKtpDirut?.name
+                      ? 'Sudah Upload'
+                      : 'Upload Dokumen'}
                   </label>
                   <input
-                    // value={formDokumen.dokumenKtpDirut}
+                    // value={formDokumen.dokumenNpwp}
                     id='dokumenKtpDirut'
                     name='dokumenKtpDirut'
                     type='file'
                     ref={dokumenKtpDirutRef}
+                    title=' '
                     className='hidden'
                     aria-invalid={errorsDokumen.dokumenKtpDirut}
                     onChange={handleInputChange}
                     accept='.pdf,.png,.jpg,.jpeg'
                   />
-                  <span className='mt-2 text-gray-600'>
+                  <span className='mt-2 text-gray-600 truncate'>
                     {formDokumen?.dokumenKtpDirut?.name}
                   </span>
                 </div>
-
+                <span className='text-xs opacity-60 text-red-500'>
+                  Format: pdf, jpeg, jpg, png. max file size 2MB
+                </span>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errorsDokumen.dokumenKtpDirut}
                   </div>
                 )}
               </div>
-            </div>
-          </div>
-          <div className='w-px bg-gray-300'></div>
-          <div className='kolom kanan w-full grid grid-rows-2 gap-10 '>
-            <div className='w-full grid grid-cols-2 gap-5'>
-              <div>
+
+              <div className='w-full flex flex-col gap-2'>
                 <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'>
+                <div className='flex flex-row gap-2'>
                   <label
                     htmlFor='dokumenAktaPendirian'
-                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                   >
-                    Upload Dokumen
+                    {formDokumen?.dokumenAktaPendirian?.name
+                      ? 'Sudah Upload'
+                      : 'Upload Dokumen'}
                   </label>
                   <input
-                    // value={formDokumen.dokumenAktaPendirian}
+                    // value={formDokumen.dokumenNpwp}
                     id='dokumenAktaPendirian'
                     name='dokumenAktaPendirian'
                     type='file'
                     ref={dokumenAktaPendirianRef}
+                    title=' '
                     className='hidden'
                     aria-invalid={errorsDokumen.dokumenAktaPendirian}
                     onChange={handleInputChange}
                     accept='.pdf,.png,.jpg,.jpeg'
                   />
-                  <span className='mt-2 text-gray-600'>
+                  <span className='mt-2 text-gray-600 truncate'>
                     {formDokumen?.dokumenAktaPendirian?.name}
                   </span>
                 </div>
-
+                <span className='text-xs opacity-60 text-red-500'>
+                  Format: pdf, jpeg, jpg, png. max file size 2MB
+                </span>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errorsDokumen.dokumenAktaPendirian}
                   </div>
                 )}
               </div>
-            </div>
-            <div className='w-full grid grid-cols-2 gap-5'>
-              <div>
+
+              <div className='w-full flex flex-col gap-2'>
                 <label className='form-label  text-nowrap'>
-                  Laporan Keuangan
+                  Laporan Keuangan{' '}
                   <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'>
+                <div className='flex flex-row gap-2'>
                   <label
                     htmlFor='dokumenLaporanKeuangan'
-                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                   >
-                    Upload Dokumen
+                    {formDokumen?.dokumenLaporanKeuangan?.name
+                      ? 'Sudah Upload'
+                      : 'Upload Dokumen'}
                   </label>
                   <input
-                    // value={formDokumen.dokumenLaporanKeuangan}
+                    // value={formDokumen.dokumenNpwp}
                     id='dokumenLaporanKeuangan'
                     name='dokumenLaporanKeuangan'
                     type='file'
                     ref={dokumenLaporanKeuanganRef}
+                    title=' '
                     className='hidden'
                     aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
                     onChange={handleInputChange}
                     accept='.pdf,.png,.jpg,.jpeg'
                   />
-                  <span className='mt-2 text-gray-600'>
+                  <span className='mt-2 text-gray-600 truncate'>
                     {formDokumen?.dokumenLaporanKeuangan?.name}
                   </span>
                 </div>
-
+                <span className='text-xs opacity-60 text-red-500'>
+                  Format: pdf, jpeg, jpg, png. max file size 2MB
+                </span>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errorsDokumen.dokumenLaporanKeuangan}
                   </div>
                 )}
               </div>
-            </div>
-            <div className='w-full grid grid-cols-2 gap-5'>
-              <div>
+
+              <div className='w-full flex flex-col gap-2'>
                 <label className='form-label  text-nowrap'>
                   Foto Kantor (Tampak Depan)
                 </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'>
+                <div className='flex flex-row gap-2'>
                   <label
                     htmlFor='dokumenFotoKantor'
-                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                   >
-                    Upload Dokumen
+                    {formDokumen?.dokumenFotoKantor?.name
+                      ? 'Sudah Upload'
+                      : 'Upload Dokumen'}
                   </label>
                   <input
-                    // value={formDokumen.dokumenFotoKantor}
+                    // value={formDokumen.dokumenNpwp}
                     id='dokumenFotoKantor'
                     name='dokumenFotoKantor'
                     type='file'
                     ref={dokumenFotoKantorRef}
+                    title=' '
                     className='hidden'
                     aria-invalid={errorsDokumen.dokumenFotoKantor}
                     onChange={handleInputChange}
                     accept='.pdf,.png,.jpg,.jpeg'
                   />
-                  <span className='mt-2 text-gray-600'>
+                  <span className='mt-2 text-gray-600 truncate'>
                     {formDokumen?.dokumenFotoKantor?.name}
                   </span>
                 </div>
-
+                <span className='text-xs opacity-60 text-red-500'>
+                  Format: pdf, jpeg, jpg, png. max file size 2MB
+                </span>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errorsDokumen.dokumenFotoKantor}
                   </div>
                 )}
               </div>
-            </div>
-            <div className='w-full grid grid-cols-2 gap-5'>
-              <div>
+
+              <div className='w-full flex flex-col gap-2'>
                 <label className='form-label  text-nowrap'>
                   Tempat Bekerja
                 </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'>
+                <div className='flex flex-row gap-2'>
                   <label
                     htmlFor='dokumenTempatBekerja'
-                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    className='cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded w-fit min-w-40 text-nowrap text-center flex items-center justify-center'
                   >
-                    Upload Dokumen
+                    {formDokumen?.dokumenTempatBekerja?.name
+                      ? 'Sudah Upload'
+                      : 'Upload Dokumen'}
                   </label>
                   <input
-                    // value={formDokumen.dokumenTempatBekerja}
+                    // value={formDokumen.dokumenNpwp}
                     id='dokumenTempatBekerja'
                     name='dokumenTempatBekerja'
                     type='file'
                     ref={dokumenTempatBekerjaRef}
+                    title=' '
                     className='hidden'
                     aria-invalid={errorsDokumen.dokumenTempatBekerja}
                     onChange={handleInputChange}
                     accept='.pdf,.png,.jpg,.jpeg'
                   />
-                  <span className='mt-2 text-gray-600'>
+                  <span className='mt-2 text-gray-600 truncate'>
                     {formDokumen?.dokumenTempatBekerja?.name}
                   </span>
                 </div>
-
+                <span className='text-xs opacity-60 text-red-500'>
+                  Format: pdf, jpeg, jpg, png. max file size 2MB
+                </span>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errorsDokumen.dokumenTempatBekerja}
@@ -501,42 +909,42 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 )}
               </div>
             </div>
-            <div></div>
-          </div>
-        </div>
-      </form>
-      <div className='w-1/2 mt-8 flex gap-3 flex-col'>
-        <div className='flex justify-between'>
-          <p className='font-bold'>Upload Progress</p>
-          <p>
-            <span className='text-red-500 font-bold'>
-              {parseInt((getJumlahDokumenDiisi() / 9) * 100)} %
-            </span>
-            <span className='ml-2 opacity-60'>
-              {getJumlahDokumenDiisi() >= 4
-                ? getJumlahDokumenDiisi() == 9
-                  ? 'Selesai'
-                  : 'Sedikit Lagi'
-                : ''}
+          </form>
+          <div className='w-full mt-8 flex gap-3 flex-col'>
+            <div className='flex justify-between'>
+              <p className='font-bold'>Upload Progress</p>
+              <p>
+                <span className='text-red-500 font-bold'>
+                  {parseInt((getJumlahDokumenDiisi() / 9) * 100)} %
+                </span>
+                <span className='ml-2 opacity-60'>
+                  {getJumlahDokumenDiisi() >= 4
+                    ? getJumlahDokumenDiisi() == 9
+                      ? 'Selesai'
+                      : 'Sedikit Lagi'
+                    : ''}
+                </span>
+              </p>
+            </div>
+            {/* 50 keatas baru muncul kata kata sedikit lagi */}
+            <ProgressBar
+              completed={getJumlahDokumenDiisi()}
+              bgColor='#ef4444'
+              labelAlignment='outside'
+              isLabelVisible={false}
+              baseBgColor='#E5E7EB'
+              labelColor='#e80909'
+              labelSize='0'
+              maxCompleted={9}
+              height='10px'
+            />
+            <span className='opacity-75 text-xs text-red-500'>
+              Tingkatin sedikit lagi agar pengajuan tempo kamu dapat kami proses
+              dengan cepat
             </span>
-          </p>
+          </div>
         </div>
-        {/* 50 keatas baru muncul kata kata sedikit lagi */}
-        <ProgressBar
-          completed={getJumlahDokumenDiisi()}
-          bgColor='#ef4444'
-          labelAlignment='outside'
-          isLabelVisible={false}
-          baseBgColor='#E5E7EB'
-          labelColor='#e80909'
-          labelSize='0'
-          maxCompleted={9}
-        />
-        <span className='opacity-75'>
-          Tingkatin sedikit lagi agar pengajuan tempo kamu dapat kami proses
-          dengan cepat
-        </span>
-      </div>
+      )}
     </>
   );
 };