<iman> update pengajuan tempo mobile view fix

1 files changed, 80 insertions, 18 deletions

diff --git a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx
index 04e00b53..80845a8f 100644
--- a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx
+++ b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx
@@ -15,8 +15,12 @@ import { CheckCircleIcon } from '@heroicons/react/24/outline';
 import InformasiPerusahaan from './informasiPerusahaan';
 import Pengiriman from './Pengiriman';
 import KonfirmasiDokumen from './KonfirmasiDokumen';
+import useDevice from '@/core/hooks/useDevice';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
   const { control, watch, setValue, getValues } = useForm();
+  const { isDesktop, isMobile } = useDevice();
+  const [isOpen, setIsOpen] = useState(false);
   const [industries, setIndustries] = useState([]);
   const {
     formDokumen,
@@ -170,30 +174,88 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
   };
   return (
     <>
-      <form className='flex mt-4 flex-col w-full '>
-        <div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'>
-          <div className='w-full flex flex-col gap-5 '>
-            <div className=''>
-              <InformasiPerusahaan isKonfirmasi={true} />
+      {isDesktop && (
+        <form className='flex mt-4 flex-col w-full '>
+          <div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'>
+            <div className='w-full flex flex-col gap-5 '>
+              <div className=''>
+                <InformasiPerusahaan isKonfirmasi={true} />
+              </div>
+              <div className='h-px bg-gray-300'></div>
+              <div className=''>
+                <KontakPerusahaan isKonfirmasi={true} />
+              </div>
             </div>
-            <div className='h-px bg-gray-300'></div>
-            <div className=''>
-              <KontakPerusahaan isKonfirmasi={true} />
+
+            <div className='w-px bg-gray-300'></div>
+            <div className='w-full grid grid-rows-[1fc_auto_1fc] gap-5'>
+              <div>
+                <Pengiriman isKonfirmasi={true} />
+              </div>
+              <div className='h-px bg-gray-300'></div>
+              <div>
+                <KonfirmasiDokumen isKonfirmasi={true} />
+              </div>
             </div>
           </div>
-
-          <div className='w-px bg-gray-300'></div>
-          <div className='w-full grid grid-rows-[1fc_auto_1fc] gap-5'>
-            <div>
-              <Pengiriman isKonfirmasi={true} />
+        </form>
+      )}
+      {isMobile && (
+        <form className='flex mt-8 py-4 flex-col w-full gap-4'>
+          <div className='flex flex-col gap-4'>
+            <div className='flex flex-row justify-between'>
+              <p className='font-semibold text-lg'>Informasi Perusahaan</p>
+              <div className='p-2 bg-gray-200'>
+                {isOpen ? (
+                  <ChevronUpIcon className='w-4' />
+                ) : (
+                  <ChevronDownIcon className='w-4' />
+                )}
+              </div>
+            </div>
+            <InformasiPerusahaan isKonfirmasi={true} />
+          </div>
+          <div className='flex flex-col gap-4'>
+            <div className='flex flex-row justify-between'>
+              <p className='font-semibold text-lg'>Kontak Person</p>
+              <div className='p-2 bg-gray-200'>
+                {isOpen ? (
+                  <ChevronUpIcon className='w-4' />
+                ) : (
+                  <ChevronDownIcon className='w-4' />
+                )}
+              </div>
             </div>
-            <div className='h-px bg-gray-300'></div>
-            <div>
-              <KonfirmasiDokumen isKonfirmasi={true} />
+            <KontakPerusahaan isKonfirmasi={true} />
+          </div>
+          <div className='flex flex-col gap-4'>
+            <div className='flex flex-row justify-between'>
+              <p className='font-semibold text-lg'>Pengiriman</p>
+              <div className='p-2 bg-gray-200'>
+                {isOpen ? (
+                  <ChevronUpIcon className='w-4' />
+                ) : (
+                  <ChevronDownIcon className='w-4' />
+                )}
+              </div>
+            </div>
+            <Pengiriman isKonfirmasi={true} />
+          </div>
+          <div className='flex flex-col gap-4'>
+            <div className='flex flex-row justify-between'>
+              <p className='font-semibold text-lg'>Dokumen</p>
+              <div className='p-2 bg-gray-200'>
+                {isOpen ? (
+                  <ChevronUpIcon className='w-4' />
+                ) : (
+                  <ChevronDownIcon className='w-4' />
+                )}
+              </div>
             </div>
+            <KonfirmasiDokumen isKonfirmasi={true} />
           </div>
-        </div>
-      </form>
+        </form>
+      )}
     </>
   );
 };