From abcce110895d767a16fb961a65e7c78f9213ca0d Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 24 Oct 2024 17:11:32 +0700
Subject: <iman> update pengajuan tempo

---
 .../component/KonfirmasiDokumen.jsx                | 227 +++++++++++++++++----
 1 file changed, 182 insertions(+), 45 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 528a7a4f..753af29e 100644
--- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
+++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx
@@ -7,11 +7,16 @@ import { toast } from 'react-hot-toast';
 import getFileBase64 from '@/core/utils/getFileBase64';
 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';
 const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const { control, watch } = useForm();
   const [isExample, setIsExample] = useState(false);
-  const [popUpTittle, setPopUpTittle] = useState(false);
-  const [popUpSource, setSource] = useState(false);
+  const { isDesktop, isMobile } = useDevice();
+  const [base64, setBase64] = useState();
+  const [pdfData, setPdfData] = useState();
+  const [format, setFormat] = useState();
+  const [popUpSource, setSource] = useState();
   const {
     formDokumen,
     errorsDokumen,
@@ -25,17 +30,26 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   //   updateFormDokumen(name, value);
   //   validateDokumen();
   // };
+  const handleConfirmSubmit = (format, base64) => {
+    if (format == 'pdf') {
+      setFormat(`application/${format}`);
+    } else {
+      setFormat(`image/${format}`);
+    }
+    setBase64(
+      base64.trim().replace(/^"+/, '').replace(/"+$/, '').replaceAll('\\', '')
+    );
+    setIsExample(!isExample);
+  };
   const handleInputChange = 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
+      fileExtension = file.name.split('.').pop()?.toLowerCase();
 
-      // Check if the file extension is allowed
       if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
         toast.error(
           'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg',
@@ -46,7 +60,6 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
         return;
       }
 
-      // Check for file size
       if (file.size > 2000000) {
         toast.error('Maksimal ukuran file adalah 2MB', { duration: 4000 });
 
@@ -54,7 +67,6 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
         return;
       }
 
-      // Convert file to Base64
       fileBase64 = await getFileBase64(file);
       updateFormDokumen(name, file.name, fileExtension, fileBase64);
       validateDokumen();
@@ -138,26 +150,8 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   useEffect(() => {
     validateDokumen();
   }, [buttonSubmitClick]);
-  console.log('formDokumen', formDokumen);
   return (
     <>
-      <BottomPopup
-        className=''
-        title='Dokumen Tittle'
-        active={isExample}
-        close={() => setIsExample(false)}
-      >
-        <div className='flex p-2'>
-          <Image
-            src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
-            alt='Contoh SPPKP'
-            className='w-full h-full '
-            width={800}
-            height={800}
-            quality={85}
-          />
-        </div>
-      </BottomPopup>
       <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 '>
@@ -171,7 +165,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenNib?.name}
               </span>
-              <div className='w-2/5 '>
+              <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'
@@ -190,6 +184,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   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 && (
@@ -208,7 +214,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenNpwp?.name}
               </span>
-              <div className='w-2/5 '>
+              <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'
@@ -227,6 +233,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   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 && (
@@ -245,7 +263,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenSppkp?.name}
               </span>
-              <div className='w-2/5 '>
+              <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'
@@ -264,6 +282,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   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 && (
@@ -286,7 +316,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenAktaPerubahan?.name}
               </span>
-              <div className='w-2/5 '>
+              <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'
@@ -305,6 +335,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   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 && (
@@ -326,7 +368,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenKtpDirut?.name}
               </span>
-              <div className='w-2/5 '>
+              <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'
@@ -345,6 +387,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   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 && (
@@ -366,7 +420,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenAktaPendirian?.name}
               </span>
-              <div className='w-2/5 '>
+              <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'
@@ -385,6 +439,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   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 && (
@@ -407,7 +473,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenLaporanKeuangan?.name}
               </span>
-              <div className='w-2/5 '>
+              <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'
@@ -426,6 +492,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   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 && (
@@ -447,7 +525,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenFotoKantor?.name}
               </span>
-              <div className='w-2/5 '>
+              <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'
@@ -466,6 +544,18 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   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 && (
@@ -485,7 +575,7 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <span className='w-3/5  text-gray-600 truncate'>
                 {formDokumen?.dokumenTempatBekerja?.name}
               </span>
-              <div className='w-2/5 '>
+              <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'
@@ -504,24 +594,27 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   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>
-              <div
-                onClick={() => setIsExample(!isExample)}
-                className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
-              >
-                <EyeIcon className={`w-4 ${isDesktop && 'mr-2'}`} />
-                {isDesktop && (
-                  <p className='font-light text-xs'>Lihat Contoh</p>
-                )}
-              </div>
-              <Image
+              {/* <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'>
@@ -531,8 +624,52 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
           </div>
         </div>
       </form>
+
+      <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>
+      </BottomPopup>
     </>
   );
 };
 
 export default KonfirmasiDokumen;
+
+{
+  /* <iframe
+  src={`data:application/octet-stream;base64, ${base64}`}
+  // src={`data:application/${format};base64, ${base64}`}
+  width='800px'
+  height='600px'
+  title='NPWP File'
+  frameBorder='0'
+  sandbox
+></iframe> */
+}
+{
+  /* <Image
+  src={`data:image/${format};base64, ${base64}`}
+  alt='Contoh SPPKP'
+  className='w-full h-full '
+  width={1200}
+  height={1200}
+  quality={85}
+/> */
+}
-- 
cgit v1.2.3