From dc7fcad0885e4cde8ba510817a69b759607524c7 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 6 Mar 2025 11:30:26 +0700
Subject: <iman> update code

---
 src/lib/pengajuan-tempo/component/Pengiriman.jsx | 173 +++++++++++++++++++++--
 1 file changed, 159 insertions(+), 14 deletions(-)

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

diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
index c78ee69c..097f82a3 100644
--- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx
+++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
@@ -13,6 +13,7 @@ import {
 } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
 import { toast } from 'react-hot-toast';
 import useDevice from '@/core/hooks/useDevice';
+import getFileBase64 from '@/core/utils/getFileBase64';
 const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const { control, watch, setValue } = useForm();
   const { isDesktop, isMobile } = useDevice();
@@ -21,6 +22,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     errorsPengiriman,
     validatePengiriman,
     updateFormPengiriman,
+    updateDokumenProsedur,
   } = usePengajuanTempoStorePengiriman();
   const { form } = usePengajuanTempoStore();
   const [states, setState] = useState([]);
@@ -34,6 +36,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const [zipsInvoice, setZipsInvoice] = useState([]);
   const [sameAddress, setSameAddress] = useState(false);
   const [sameAddressStreet, setSameAddressStreet] = useState(false);
+  const [nameFile, setNameFile] = useState();
 
   const [selectedIds, setSelectedIds] = useState(
     formPengiriman.dokumenPengiriman
@@ -299,6 +302,60 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     validatePengiriman();
   };
 
+  const handleInputChangeFile = async (event) => {
+    let fileBase64 = '';
+    const { name } = event.target;
+    const file = event.target.files?.[0];
+    // Allowed file extensions
+    const allowedExtensions = ['pdf', 'png', 'jpg', 'jpeg'];
+    let fileExtension = '';
+    if (file) {
+      fileExtension = file.name.split('.').pop()?.toLowerCase(); // Extract file extension
+
+      // Check if the file extension is allowed
+      if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+        toast.error(
+          'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg',
+          { duration: 4000 }
+        );
+
+        event.target.value = '';
+        return;
+      }
+
+      // Check for file size
+      if (file.size > 2000000) {
+        // try {
+        //   const toastId = toast.loading('mencoba mengompresi file...');
+        //   // Compress image file
+        //   const options = {
+        //     maxSizeMB: 0.5, // Target size in MB
+        //     maxWidthOrHeight: 1920, // Adjust as needed
+        //     useWebWorker: true,
+        //   };
+        //   const compressedFile = await imageCompression(file, options);
+        //   toast.success('berhasil mengompresi file', { duration: 4000 });
+        //   // Convert compressed file to Base64
+        //   fileBase64 = await getFileBase64(compressedFile);
+        //   updateFormDokumen(
+        //     name,
+        //     compressedFile.name,
+        //     fileExtension,
+        //     fileBase64
+        //   );
+        // } catch (error) {
+        //   toast.error('Gagal mengompresi file', { duration: 4000 });
+        // }
+        toast.error('Max File Upload 2MB', { duration: 4000 });
+      } else {
+        // Convert file to Base64
+        fileBase64 = await getFileBase64(file);
+        updateDokumenProsedur(file.name, fileExtension, fileBase64);
+      }
+      validatePengiriman();
+    }
+  };
+  console.log('formPengiriman', formPengiriman);
   const isFormValid = useMemo(
     () => Object.keys(errorsPengiriman).length === 0,
     [errorsPengiriman]
@@ -1032,8 +1089,6 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </div>
               </div>
 
-              
-
               <div className='flex flex-row  justify-between items-start'>
                 <div className='w-2/5'>
                   <label className='form-label  text-nowrap'>
@@ -1077,28 +1132,36 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </div>
               </div>
 
-              <div className='flex flex-col gap-2  justify-between items-start'>
-                <label className='form-label  text-nowrap'>
-                  No. HP PIC Penerimaan Invoice
-                </label>
-                <div className='flex items-center border border-gray-300 rounded-md w-full'>
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label   text-nowrap'>
+                    No. HP PIC Penerimaan Invoice
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi nomor PIC penerimaan invoice yang bertanggung jawab di
+                      perusahaan anda
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5'>
                   <input
                     id='invoicePicMobile'
                     name='invoicePicMobile'
                     ref={invoicePicMobileRef}
-                    value={formPengiriman.invoicePicMobile}
                     placeholder='Masukkan nomor PIC Penerimaan Invoice'
+                    value={formPengiriman.invoicePicMobile}
                     type='tel'
                     className='form-input'
                     aria-invalid={errorsPengiriman.invoicePicMobile}
                     onChange={handleInputChange}
                   />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.invoicePicMobile}
+                    </div>
+                  )}
                 </div>
-                {chekValid && (
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errorsPengiriman.invoicePicMobile}
-                  </div>
-                )}
               </div>
 
               <div className='flex flex-row  justify-between items-start'>
@@ -1497,6 +1560,47 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   )}
                 </div>
               </div>
+              <div className='w-full flex flex-row justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    Prosedur Pengiriman{' '}
+                    <span className=' opacity-60'>(Opsional)</span>
+                  </label>
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
+                  </span>
+                </div>
+                <div className='w-3/5'>
+                  <div className='flex flex-row items-start gap-2'>
+                    <label
+                      htmlFor='dokumenProsedur'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {formPengiriman?.dokumenProsedur?.name
+                        ? 'Ubah Dokumen'
+                        : 'Upload Dokumen'}
+                    </label>
+                    <input
+                      id='dokumenProsedur'
+                      name='dokumenProsedur'
+                      type='file'
+                      title=' '
+                      className='hidden'
+                      aria-invalid={formPengiriman.dokumenProsedur}
+                      onChange={handleInputChangeFile}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <span className='mt-2 text-gray-600 line-clamp-2'>
+                      {formPengiriman?.dokumenProsedur?.name}
+                    </span>
+                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.dokumenProsedur}
+                    </div>
+                  )}
+                </div>
+              </div>
             </div>
           </form>
         </div>
@@ -1753,7 +1857,6 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </div>
               </div>
 
-              
               <div className='flex flex-col gap-2  justify-between items-start'>
                 <label className='form-label  text-nowrap'>
                   Nama PIC Penerimaan Invoice
@@ -2184,6 +2287,48 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </div>
                 <div className='w-2/5'></div>
               </div>
+
+              <div className='w-full flex flex-col justify-between items-start gap-2'>
+                <div className=''>
+                  <label className='form-label  text-nowrap'>
+                    Prosedur Pengiriman{' '}
+                    <span className=' opacity-60'>(Opsional)</span>
+                  </label>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='flex flex-row items-start gap-2'>
+                    <label
+                      htmlFor='dokumenProsedur'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {formPengiriman?.dokumenProsedur?.name
+                        ? 'Ubah Dokumen'
+                        : 'Upload Dokumen'}
+                    </label>
+                    <input
+                      id='dokumenProsedur'
+                      name='dokumenProsedur'
+                      type='file'
+                      title=' '
+                      className='hidden'
+                      aria-invalid={errorsPengiriman.dokumenProsedur}
+                      onChange={handleInputChangeFile}
+                      accept='.pdf,.png,.jpg,.jpeg'
+                    />
+                    <span className='mt-2 text-gray-600 line-clamp-2'>
+                      {formPengiriman?.dokumenProsedur?.name}
+                    </span>
+                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.dokumenProsedur}
+                    </div>
+                  )}
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
+                  </span>
+                </div>
+              </div>
             </div>
           </form>
         </div>
-- 
cgit v1.2.3