From acee071ea98505b42918f4d7cdc15252ae78f705 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 22 Oct 2024 15:28:40 +0700
Subject: <iman> update fix dokumen

---
 src/lib/pengajuan-tempo/component/Dokumen.jsx | 311 +++++++++++++++++---------
 1 file changed, 208 insertions(+), 103 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/Dokumen.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Dokumen.jsx b/src/lib/pengajuan-tempo/component/Dokumen.jsx
index 65220b27..42c6c47f 100644
--- a/src/lib/pengajuan-tempo/component/Dokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/Dokumen.jsx
@@ -24,7 +24,6 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
     let fileBase64 = '';
     const { name } = event.target;
     const file = event.target.files?.[0];
-    console.log('file', file);
     // Allowed file extensions
     const allowedExtensions = ['pdf', 'png', 'jpg', 'jpeg'];
     let fileExtension = '';
@@ -61,7 +60,6 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
     () => Object.keys(errorsDokumen).length === 0,
     [errorsDokumen]
   );
-  console.log('formDokumen', formDokumen?.dokumenNib?.name);
   const dokumenNibRef = useRef(null);
   const dokumenNpwpRef = useRef(null);
   const dokumenSppkpRef = useRef(null);
@@ -142,7 +140,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
       </div>
       <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-10 '>
+          <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'>
@@ -153,17 +151,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
                 </span>
               </div>
               <div className=''>
-                <input
-                  // value={formDokumen?.dokumenNib?.name}
-                  id='dokumenNib'
-                  name='dokumenNib'
-                  type='file'
-                  ref={dokumenNibRef}
-                  className='form-input'
-                  aria-invalid={errorsDokumen.dokumenNib}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
+                <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}
@@ -181,17 +191,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
                 </span>
               </div>
               <div className=''>
-                <input
-                  // value={formDokumen.dokumenNpwp}
-                  id='dokumenNpwp'
-                  name='dokumenNpwp'
-                  type='file'
-                  ref={dokumenNpwpRef}
-                  className='form-input'
-                  aria-invalid={errorsDokumen.dokumenNpwp}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
+                <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}
@@ -207,17 +229,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
                 </span>
               </div>
               <div className=''>
-                <input
-                  // value={formDokumen.dokumenSppkp}
-                  id='dokumenSppkp'
-                  name='dokumenSppkp'
-                  type='file'
-                  ref={dokumenSppkpRef}
-                  className='form-input'
-                  aria-invalid={errorsDokumen.dokumenSppkp}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
+                <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}
@@ -235,17 +269,28 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
                 </span>
               </div>
               <div className=''>
-                <input
-                  // value={formDokumen.dokumenAktaPerubahan}
-                  id='dokumenAktaPerubahan'
-                  name='dokumenAktaPerubahan'
-                  type='file'
-                  ref={dokumenAktaPerubahanRef}
-                  className='form-input'
-                  aria-invalid={errorsDokumen.dokumenAktaPerubahan}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
+                <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}
@@ -264,17 +309,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
                 </span>
               </div>
               <div className=''>
-                <input
-                  // value={formDokumen.dokumenKtpDirut}
-                  id='dokumenKtpDirut'
-                  name='dokumenKtpDirut'
-                  type='file'
-                  ref={dokumenKtpDirutRef}
-                  className='form-input'
-                  aria-invalid={errorsDokumen.dokumenKtpDirut}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
+                <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}
@@ -295,17 +352,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
                 </span>
               </div>
               <div className=''>
-                <input
-                  // value={formDokumen.dokumenAktaPendirian}
-                  id='dokumenAktaPendirian'
-                  name='dokumenAktaPendirian'
-                  type='file'
-                  ref={dokumenAktaPendirianRef}
-                  className='form-input'
-                  aria-invalid={errorsDokumen.dokumenAktaPendirian}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
+                <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}
@@ -324,17 +393,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
                 </span>
               </div>
               <div className=''>
-                <input
-                  // value={formDokumen.dokumenLaporanKeuangan}
-                  id='dokumenLaporanKeuangan'
-                  name='dokumenLaporanKeuangan'
-                  type='file'
-                  ref={dokumenLaporanKeuanganRef}
-                  className='form-input'
-                  aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
+                <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}
@@ -352,17 +433,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
                 </span>
               </div>
               <div className=''>
-                <input
-                  // value={formDokumen.dokumenFotoKantor}
-                  id='dokumenFotoKantor'
-                  name='dokumenFotoKantor'
-                  type='file'
-                  ref={dokumenFotoKantorRef}
-                  className='form-input'
-                  aria-invalid={errorsDokumen.dokumenFotoKantor}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
+                <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}
@@ -380,17 +473,29 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
                 </span>
               </div>
               <div className=''>
-                <input
-                  // value={formDokumen.dokumenTempatBekerja}
-                  id='dokumenTempatBekerja'
-                  name='dokumenTempatBekerja'
-                  type='file'
-                  ref={dokumenTempatBekerjaRef}
-                  className='form-input'
-                  aria-invalid={errorsDokumen.dokumenTempatBekerja}
-                  onChange={handleInputChange}
-                  accept='.pdf,.png,.jpg,.jpeg'
-                />
+                <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}
@@ -410,7 +515,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => {
               {parseInt((getJumlahDokumenDiisi() / 9) * 100)} %
             </span>
             <span className='ml-2 opacity-60'>
-              {getJumlahDokumenDiisi() > 5
+              {getJumlahDokumenDiisi() >= 4
                 ? getJumlahDokumenDiisi() == 9
                   ? 'Selesai'
                   : 'Sedikit Lagi'
-- 
cgit v1.2.3