<iman> update

4 files changed, 124 insertions, 30 deletions

diff --git a/public/images/icon/icon_tempo.svg b/public/images/icon/icon_tempo.svg
new file mode 100644
index 00000000..233c2c59
--- /dev/null
+++ b/public/images/icon/icon_tempo.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
+<g>
+	<path d="M20.9,125c0-23.9,0-47.7,0-71.6C20.9,22.8,43.6,0.1,74.3,0c19.5,0,39,0.1,58.6,0c4.6,0,8.3,1.4,11.6,4.7
+		C171,31.4,197.6,58,224.3,84.6c3.3,3.3,4.9,6.9,4.8,11.5c-0.1,33.7,0,67.5-0.1,101.2c0,29.6-23,52.6-52.6,52.7
+		c-34.4,0.1-68.8,0.1-103.1,0c-29.6-0.1-52.5-23.1-52.5-52.7C20.8,173.2,20.9,149.1,20.9,125z M125,20.9c-1.5,0-2.5,0-3.6,0
+		c-15.6,0-31.2,0-46.8,0c-19.5,0-32.9,13.4-32.9,32.9c0,47.5,0,95,0,142.5c0,19.5,13.3,32.9,32.9,32.9c33.6,0,67.2,0,100.8,0
+		c19.5,0,32.9-13.3,32.9-32.9c0-29.5,0-59,0-88.5c0-1.1,0-2.3,0-3.6c-10.2,0-19.9,0-29.7,0c-30.9,0-53.6-22.7-53.6-53.6
+		C125,40.8,125,31.1,125,20.9z M192.4,83.9C176.6,68,161,52.5,145.9,37.3c0,5.1-0.2,10.9,0,16.8c0.6,12.9,9.9,25.1,22.6,27.8
+		C176.3,83.6,184.5,83.3,192.4,83.9z"/>
+	<path d="M124.7,156.2c-13.3,0-26.7,0-40,0c-6.9,0-11.7-4.2-11.7-10.3c0-6.2,4.7-10.5,11.5-10.5c27,0,54,0,81,0
+		c6.9,0,11.6,4.3,11.6,10.5c0,6.1-4.8,10.3-11.7,10.3C151.8,156.3,138.2,156.2,124.7,156.2z"/>
+	<path d="M125.3,177.1c13.3,0,26.7,0,40,0c6.9,0,11.7,4.2,11.7,10.3c0,6.2-4.7,10.5-11.6,10.5c-27,0-54,0-81,0
+		c-6.9,0-11.6-4.4-11.5-10.5c0.1-6.1,4.8-10.3,11.7-10.3C98.2,177.1,111.8,177.1,125.3,177.1z"/>
+	<path d="M93.7,93.8c3.5,0,6.9-0.1,10.4,0c5.9,0.1,10.4,4.6,10.5,10.3c0.1,5.8-4.5,10.4-10.5,10.5c-6.8,0.1-13.7,0.1-20.5,0
+		c-6.1-0.1-10.6-4.6-10.6-10.4c0-5.8,4.6-10.3,10.7-10.4C87,93.7,90.3,93.8,93.7,93.8z"/>
+</g>
+</svg>
diff --git a/src/lib/pengajuan-tempo/component/FinishTempo.jsx b/src/lib/pengajuan-tempo/component/FinishTempo.jsx
index 1670314d..f4336d8a 100644
--- a/src/lib/pengajuan-tempo/component/FinishTempo.jsx
+++ b/src/lib/pengajuan-tempo/component/FinishTempo.jsx
@@ -47,8 +47,16 @@ const FinishTempo = ({ query }) => {
 
   return (
     <div className='container flex flex-col items-center gap-4'>
-      <div className='flex w-2/3 justify-center items-center'>
-        <h1 className='text-red-500 text-center font-semibold text-3xl'>
+      <div
+        className={`flex ${
+          isMobile ? 'w-full' : 'w-2/3'
+        } justify-center items-center`}
+      >
+        <h1
+          className={`text-red-500 text-center font-semibold ${
+            isMobile ? 'text-lg' : 'text-3xl'
+          }`}
+        >
           Form Pengajuan Tempo kamu Telah Berhasil Didaftarkan Mohon menunggu
           hingga Proses Selesai
         </h1>
@@ -60,7 +68,11 @@ const FinishTempo = ({ query }) => {
         height={isMobile ? 300 : 450}
       />
 
-      <div className='mt-2 text-center leading-6 text-base p-4 md:p-0 w-4/5'>
+      <div
+        className={`mt-2 text-center opacity-75 leading-6  p-4 md:p-0 ${
+          isMobile ? 'w-full text-sm' : 'w-4/5 text-base'
+        }`}
+      >
         Mohon menunggu untuk verifikasi dokumen dan kelengkapan data yang telah
         anda berikan. Proses approval pembayaran tempo kamu berhasil atau tidak
         akan diinfokan melalui email perusahaan / email yang mendaftar
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>
       )}
diff --git a/src/lib/tempo/components/Tempo.jsx b/src/lib/tempo/components/Tempo.jsx
index bfeddfbb..8fb55147 100644
--- a/src/lib/tempo/components/Tempo.jsx
+++ b/src/lib/tempo/components/Tempo.jsx
@@ -116,7 +116,7 @@ const Tempo = () => {
                   isLoaded={!isLoading}
                   h='fit'
                   w={32}
-                  className='badge-solid-green px-2 text-sm flex items-center justify-center font-thin'
+                  className='badge-solid-green px-1 text-sm flex items-center justify-center font-thin'
                 >
                   {' '}
                   {tempo.paymentTerm}
@@ -125,7 +125,7 @@ const Tempo = () => {
             </div>
             <div className='grid grid-flow-col gap-4 mb-4'>
               <div className='border  w-full p-4'>
-                <p>Limit Tempo Terpakai</p>
+                <p>Kredit Limit Terpakai</p>
                 <Skeleton
                   isLoaded={!isLoading}
                   h='36px'
@@ -136,7 +136,18 @@ const Tempo = () => {
                 </Skeleton>
               </div>
               <div className='border w-full p-4'>
-                <p>Limit Tempo</p>
+                <p>Sisa Kredit Limit</p>
+                <Skeleton
+                  isLoaded={!isLoading}
+                  h='36px'
+                  // w={16}
+                  className='text-3xl font-semibold'
+                >
+                  {currencyFormat(Math.round(parseInt(limitTempo - amountDue)))}
+                </Skeleton>
+              </div>
+              <div className='border w-full p-4'>
+                <p>Kredit Limit</p>
                 <Skeleton
                   isLoaded={!isLoading}
                   h='36px'
@@ -243,11 +254,15 @@ const Tempo = () => {
                       <td>{invoice.invoiceDateDue}</td>
                       <td>
                         {invoice.amountResidual > 0 ? (
-                          <div className='badge-solid-red h-fit mx-auto'>
-                            {new Date() > getDueDate(invoice.invoiceDateDue)
-                              ? 'Jatuh Tempo'
-                              : 'Belum Lunas'}
-                          </div>
+                          new Date() > getDueDate(invoice.invoiceDateDue) ? (
+                            <div className='inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20'>
+                              Jatuh Tempo
+                            </div>
+                          ) : (
+                            <div className='badge-solid-red h-fit mx-auto'>
+                              Belum Lunas
+                            </div>
+                          )
                         ) : (
                           <div className='badge-solid-green h-fit mx-auto'>
                             Lunas
@@ -304,6 +319,17 @@ const Tempo = () => {
                 {currencyFormat(amountDue)}
               </Skeleton>
             </div>
+            <div className='w-full'>
+              <p>Sisa Kredit Limit</p>
+              <Skeleton
+                isLoaded={!isLoading}
+                // h='36px'
+                // w={16}
+                className='font-semibold text-lg'
+              >
+                {currencyFormat(Math.round(parseInt(limitTempo - amountDue)))}
+              </Skeleton>
+            </div>
             <div className=' w-full'>
               <p>Limit Tempo</p>
               <Skeleton