From e9cd13307f0095dc4edc5048752675d80c551564 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 6 Dec 2024 17:06:26 +0700
Subject: <iman> pengajuan tempo

---
 .../component/KonfirmasiDokumen.jsx                | 118 +++++++++++++++------
 1 file changed, 84 insertions(+), 34 deletions(-)

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

diff --git a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
index c1f2d07c..e9ec01e1 100644
--- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
@@ -9,6 +9,7 @@ import Image from 'next/image';
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
 import { EyeIcon } from '@heroicons/react/24/outline';
 import useDevice from '@/core/hooks/useDevice';
+import imageCompression from 'browser-image-compression';
 const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const { control, watch } = useForm();
   const [isExample, setIsExample] = useState(false);
@@ -16,6 +17,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const [base64, setBase64] = useState();
   const [pdfData, setPdfData] = useState();
   const [format, setFormat] = useState();
+  const [url, setUrl] = useState();
   const [popUpSource, setSource] = useState();
   const {
     formDokumen,
@@ -26,8 +28,12 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   } = usePengajuanTempoStoreDokumen();
 
   const handleConfirmSubmit = (format, base64) => {
+    console.log('format iman', format);
     if (format == 'pdf') {
       setFormat(`application/${format}`);
+    } else if (format == undefined) {
+      setFormat(null);
+      setUrl(`http://192.168.23.244:8069` + base64);
     } else {
       setFormat(`image/${format}`);
     }
@@ -40,11 +46,13 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     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();
+      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',
@@ -55,15 +63,34 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
         return;
       }
 
-      if (file.size > 2000000) {
-        toast.error('Maksimal ukuran file adalah 2MB', { duration: 4000 });
-
-        event.target.value = '';
-        return;
+      // Check for file size
+      if (file.size > 500000) {
+        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 });
+        }
+      } else {
+        // Convert file to Base64
+        fileBase64 = await getFileBase64(file);
+        updateFormDokumen(name, file.name, fileExtension, fileBase64);
       }
-
-      fileBase64 = await getFileBase64(file);
-      updateFormDokumen(name, file.name, fileExtension, fileBase64);
       validateDokumen();
     }
   };
@@ -145,6 +172,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   useEffect(() => {
     validateDokumen();
   }, [buttonSubmitClick]);
+  console.log('format', format);
   return (
     <>
       {isDesktop && (
@@ -169,7 +197,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenNib'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenNib?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -220,7 +248,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenNpwp'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenNpwp?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -269,7 +297,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenSppkp'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenSppkp?.name.length > 0
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -323,8 +353,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
                       {formDokumen.dokumenAktaPerubahan.name
-                        ? 'ubah'
-                        : 'upload'}
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -377,7 +407,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenKtpDirut'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenKtpDirut?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -429,7 +459,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenAktaPendirian'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenAktaPendirian?.name
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -482,7 +514,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenLaporanKeuangan'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenLaporanKeuangan?.name
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -534,7 +568,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenFotoKantor'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenFotoKantor?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -573,7 +607,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
             <div className='w-full flex flex-row items-center '>
               <div className='w-2/5'>
                 <label className='form-label  text-nowrap'>
-                  Tempat Bekerja
+                  Foto tempat kerja
                 </label>
               </div>
               <div className='w-3/5'>
@@ -586,7 +620,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenTempatBekerja'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenTempatBekerja?.name
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -654,7 +690,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenNib'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenNib?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -703,7 +739,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenNpwp'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenNpwp?.name ? 'Sudah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -752,7 +788,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenSppkp'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenSppkp?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -805,7 +841,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenAktaPerubahan'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenAktaPerubahan?.name
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -858,7 +896,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenKtpDirut'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenKtpDirut?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -910,7 +948,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenAktaPendirian'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenAktaPendirian?.name
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -963,7 +1003,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenLaporanKeuangan'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenLaporanKeuangan?.name
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -1015,7 +1057,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenFotoKantor'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                     >
-                      Ubah
+                      {formDokumen?.dokumenFotoKantor?.name ? 'Ubah' : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -1053,7 +1095,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
 
             <div className='w-full flex flex-row items-center '>
               <div className='w-2/5'>
-                <label className='form-label  text-wrap'>Tempat Bekerja</label>
+                <label className='form-label  text-wrap'>
+                  Foto tempat kerja
+                </label>
               </div>
               <div className='w-3/5'>
                 <div className='flex flex-row items-start justify-between'>
@@ -1065,7 +1109,9 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       htmlFor='dokumenTempatBekerja'
                       className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20'
                     >
-                      Ubah
+                      {formDokumen?.dokumenTempatBekerja?.name
+                        ? 'Ubah'
+                        : 'Upload'}
                     </label>
                     <input
                       // value={formDokumen?.dokumenNib?.name}
@@ -1113,16 +1159,20 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
       )}
       {isDesktop && (
         <BottomPopup
-          className='!container'
+          className='w-full h-full'
           title='Dokumen'
           active={isExample}
           close={() => setIsExample(false)}
         >
           <div className='flex  justify-center items-center p-2'>
             <iframe
-              src={`data:${format};base64,${base64}`}
-              width='100%'
-              height='100%'
+              src={`${
+                format == null ? url : `data:${format};base64,${base64}`
+              }`}
+              // src={`http://192.168.23.244:8069` + `${format}`}
+              // src={format}
+              width='800px'
+              height='600px'
               title='Document'
             ></iframe>
           </div>
-- 
cgit v1.2.3