1 files changed, 55 insertions, 19 deletions
diff --git a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx
index 80845a8f..78591c48 100644
--- a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx
+++ b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx
@@ -20,7 +20,10 @@ 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 [isOpenInformasi, setIsOpenInformasi] = useState(true);
+  const [isOpenKontak, setIsOpenKontak] = useState(false);
+  const [isOpenPengiriman, setIsOpenPengiriman] = useState(false);
+  const [isOpenKonfirmasi, setIsOpenKonfirmasi] = useState(false);
   const [industries, setIndustries] = useState([]);
   const {
     formDokumen,
@@ -203,56 +206,89 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
       {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='flex flex-row justify-between items-center'>
+              <div className='flex flex-col justify-center items-start'>
+                <p className='font-semibold text-lg'>Informasi Perusahaan</p>
+                <span className='text-xs opacity-70'>
+                  Pastikan informasi usaha yang anda masukkan sudah sesuai
+                  dengan data perusahaan anda
+                </span>
+              </div>
               <div className='p-2 bg-gray-200'>
-                {isOpen ? (
-                  <ChevronUpIcon className='w-4' />
+                {isOpenInformasi ? (
+                  <ChevronUpIcon
+                    className='w-4'
+                    onClick={() => setIsOpenInformasi(!isOpenInformasi)}
+                  />
                 ) : (
-                  <ChevronDownIcon className='w-4' />
+                  <ChevronDownIcon
+                    className='w-4'
+                    onClick={() => setIsOpenInformasi(!isOpenInformasi)}
+                  />
                 )}
               </div>
             </div>
-            <InformasiPerusahaan isKonfirmasi={true} />
+            {isOpenInformasi && <InformasiPerusahaan isKonfirmasi={true} />}
+            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
           </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' />
+                {isOpenKontak ? (
+                  <ChevronUpIcon
+                    className='w-4'
+                    onClick={() => setIsOpenKontak(!isOpenKontak)}
+                  />
                 ) : (
-                  <ChevronDownIcon className='w-4' />
+                  <ChevronDownIcon
+                    className='w-4'
+                    onClick={() => setIsOpenKontak(!isOpenKontak)}
+                  />
                 )}
               </div>
             </div>
-            <KontakPerusahaan isKonfirmasi={true} />
+            {isOpenKontak && <KontakPerusahaan isKonfirmasi={true} />}
+            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
           </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' />
+                {isOpenPengiriman ? (
+                  <ChevronUpIcon
+                    className='w-4'
+                    onClick={() => setIsOpenPengiriman(!isOpenPengiriman)}
+                  />
                 ) : (
-                  <ChevronDownIcon className='w-4' />
+                  <ChevronDownIcon
+                    className='w-4'
+                    onClick={() => setIsOpenPengiriman(!isOpenPengiriman)}
+                  />
                 )}
               </div>
             </div>
-            <Pengiriman isKonfirmasi={true} />
+            {isOpenPengiriman && <Pengiriman isKonfirmasi={true} />}
+            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
           </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' />
+                {isOpenKonfirmasi ? (
+                  <ChevronUpIcon
+                    className='w-4'
+                    onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
+                  />
                 ) : (
-                  <ChevronDownIcon className='w-4' />
+                  <ChevronDownIcon
+                    className='w-4'
+                    onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
+                  />
                 )}
               </div>
             </div>
-            <KonfirmasiDokumen isKonfirmasi={true} />
+            {isOpenKonfirmasi && <KonfirmasiDokumen isKonfirmasi={true} />}
           </div>
         </form>
       )}