<iman> update pengajuan tempo mobile 80%

1 files changed, 479 insertions, 256 deletions

diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
index 1281e387..091873a7 100644
--- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { usePengajuanTempoStoreKontakPerson } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+import useDevice from '@/core/hooks/useDevice';
 const KontakPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const {
     formKontakPerson,
@@ -7,7 +8,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     validateKontakPerson,
     updateFormKontakPerson,
   } = usePengajuanTempoStoreKontakPerson();
-
+  const { isDesktop, isMobile } = useDevice();
   const handleInputChange = (event) => {
     const { name, value } = event.target;
     updateFormKontakPerson(name, value);
@@ -84,279 +85,501 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     validateKontakPerson();
   }, [buttonSubmitClick]);
   return (
-    <div className=''>
-      <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
-        Kontak Person
-      </h1>
-      <form className='flex flex-col w-full '>
-        <div className='w-full grid grid-row-2 gap-5'>
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label  text-nowrap'>
-                Nama Lengkap Direktur
-              </label>
-            </div>
-            <div className='w-3/5'>
-              <input
-                value={formKontakPerson.direkturName}
-                id='direkturName'
-                name='direkturName'
-                placeholder='Masukkan nama direktur anda'
-                type='text'
-                className='form-input'
-                aria-invalid={errorsKontakPerson.direkturName}
-                ref={direkturNameRef}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.direkturName}
+    <>
+      {isDesktop && (
+        <div className=''>
+          <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
+            Kontak Person
+          </h1>
+          <form className='flex flex-col w-full '>
+            <div className='w-full grid grid-row-2 gap-5'>
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    Nama Lengkap Direktur
+                  </label>
                 </div>
-              )}
-            </div>
-          </div>
+                <div className='w-3/5'>
+                  <input
+                    value={formKontakPerson.direkturName}
+                    id='direkturName'
+                    name='direkturName'
+                    placeholder='Masukkan nama direktur anda'
+                    type='text'
+                    className='form-input'
+                    aria-invalid={errorsKontakPerson.direkturName}
+                    ref={direkturNameRef}
+                    onChange={handleInputChange}
+                  />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsKontakPerson.direkturName}
+                    </div>
+                  )}
+                </div>
+              </div>
 
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label text-nowrap'>
-                No. Telpon Direktur
-              </label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  isi nomor telpon direktur di perusahaan kamu
-                </span>
-              )}
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='direkturMobile'
-                name='direkturMobile'
-                ref={direkturMobileRef}
-                placeholder='Masukkan nomor direktur anda'
-                type='tel'
-                value={formKontakPerson.direkturMobile}
-                className='form-input'
-                aria-invalid={errorsKontakPerson.direkturMobile}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.direkturMobile}
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label text-nowrap'>
+                    No. Telpon Direktur
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi nomor telpon direktur di perusahaan kamu
+                    </span>
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
+                <div className='w-3/5'>
+                  <input
+                    id='direkturMobile'
+                    name='direkturMobile'
+                    ref={direkturMobileRef}
+                    placeholder='Masukkan nomor direktur anda'
+                    type='tel'
+                    value={formKontakPerson.direkturMobile}
+                    className='form-input'
+                    aria-invalid={errorsKontakPerson.direkturMobile}
+                    onChange={handleInputChange}
+                  />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsKontakPerson.direkturMobile}
+                    </div>
+                  )}
+                </div>
+              </div>
 
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label  text-nowrap'>Email Direktur</label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  isi email Direktur yang sesuai
-                </span>
-              )}
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='direkturEmail'
-                name='direkturEmail'
-                ref={direkturEmailRef}
-                placeholder='contoh@email.com'
-                type='email'
-                value={formKontakPerson.direkturEmail}
-                className='form-input'
-                aria-invalid={errorsKontakPerson.direkturEmail}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.direkturEmail}
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    Email Direktur
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi email Direktur yang sesuai
+                    </span>
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
+                <div className='w-3/5'>
+                  <input
+                    id='direkturEmail'
+                    name='direkturEmail'
+                    ref={direkturEmailRef}
+                    placeholder='contoh@email.com'
+                    type='email'
+                    value={formKontakPerson.direkturEmail}
+                    className='form-input'
+                    aria-invalid={errorsKontakPerson.direkturEmail}
+                    onChange={handleInputChange}
+                  />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsKontakPerson.direkturEmail}
+                    </div>
+                  )}
+                </div>
+              </div>
 
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label text-nowrap'>Nama Purchasing</label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  isi nama purchasing yang bertanggung jawab di perusahaan anda
-                </span>
-              )}
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='purchasingName'
-                name='purchasingName'
-                ref={purchasingNameRef}
-                placeholder='Masukkan nama purchasing anda'
-                value={formKontakPerson.purchasingName}
-                type='text'
-                className='form-input'
-                aria-invalid={errorsKontakPerson.purchasingName}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.purchasingName}
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label text-nowrap'>
+                    Nama Purchasing
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi nama purchasing yang bertanggung jawab di perusahaan
+                      anda
+                    </span>
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
+                <div className='w-3/5'>
+                  <input
+                    id='purchasingName'
+                    name='purchasingName'
+                    ref={purchasingNameRef}
+                    placeholder='Masukkan nama purchasing anda'
+                    value={formKontakPerson.purchasingName}
+                    type='text'
+                    className='form-input'
+                    aria-invalid={errorsKontakPerson.purchasingName}
+                    onChange={handleInputChange}
+                  />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsKontakPerson.purchasingName}
+                    </div>
+                  )}
+                </div>
+              </div>
 
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label  text-nowrap'>
-                No. Telpon Purchasing
-              </label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  isi nomor purchasing yang bertanggung jawab di perusahaan anda
-                </span>
-              )}
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='purchasingMobile'
-                name='purchasingMobile'
-                ref={financeMobileRef}
-                placeholder='Masukkan nomor purchasing anda'
-                value={formKontakPerson.purchasingMobile}
-                type='tel'
-                className='form-input'
-                aria-invalid={errorsKontakPerson.purchasingMobile}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.purchasingMobile}
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    No. Telpon Purchasing
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi nomor purchasing yang bertanggung jawab di perusahaan
+                      anda
+                    </span>
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
+                <div className='w-3/5'>
+                  <input
+                    id='purchasingMobile'
+                    name='purchasingMobile'
+                    ref={financeMobileRef}
+                    placeholder='Masukkan nomor purchasing anda'
+                    value={formKontakPerson.purchasingMobile}
+                    type='tel'
+                    className='form-input'
+                    aria-invalid={errorsKontakPerson.purchasingMobile}
+                    onChange={handleInputChange}
+                  />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsKontakPerson.purchasingMobile}
+                    </div>
+                  )}
+                </div>
+              </div>
 
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label  text-nowrap'>
-                Email Purchasing
-              </label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  isi email purchasing dengan benar
-                </span>
-              )}
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='purchasingEmail'
-                name='purchasingEmail'
-                ref={purchasingEmailRef}
-                placeholder='contoh@email.com'
-                value={formKontakPerson.purchasingEmail}
-                type='email'
-                className='form-input'
-                aria-invalid={errorsKontakPerson.purchasingEmail}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.purchasingEmail}
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    Email Purchasing
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi email purchasing dengan benar
+                    </span>
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
+                <div className='w-3/5'>
+                  <input
+                    id='purchasingEmail'
+                    name='purchasingEmail'
+                    ref={purchasingEmailRef}
+                    placeholder='contoh@email.com'
+                    value={formKontakPerson.purchasingEmail}
+                    type='email'
+                    className='form-input'
+                    aria-invalid={errorsKontakPerson.purchasingEmail}
+                    onChange={handleInputChange}
+                  />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsKontakPerson.purchasingEmail}
+                    </div>
+                  )}
+                </div>
+              </div>
 
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label  text-nowrap'>Nama Finance</label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  isi nama finance yang bertanggung jawab di perusahaan anda
-                </span>
-              )}
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='financeName'
-                name='financeName'
-                ref={financeNameRef}
-                placeholder='Masukkan nama finance'
-                value={formKontakPerson.financeName}
-                type='text'
-                className='form-input'
-                aria-invalid={errorsKontakPerson.financeName}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.financeName}
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    Nama Finance
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi nama finance yang bertanggung jawab di perusahaan anda
+                    </span>
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label   text-nowrap'>
-                No. Telpon Finance
-              </label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  isi nomor finance yang bertanggung jawab di perusahaan anda
-                </span>
-              )}
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='financeMobile'
-                name='financeMobile'
-                ref={financeMobileRef}
-                placeholder='Masukkan nomor finance'
-                value={formKontakPerson.financeMobile}
-                type='tel'
-                className='form-input'
-                aria-invalid={errorsKontakPerson.financeMobile}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.financeMobile}
+                <div className='w-3/5'>
+                  <input
+                    id='financeName'
+                    name='financeName'
+                    ref={financeNameRef}
+                    placeholder='Masukkan nama finance'
+                    value={formKontakPerson.financeName}
+                    type='text'
+                    className='form-input'
+                    aria-invalid={errorsKontakPerson.financeName}
+                    onChange={handleInputChange}
+                  />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsKontakPerson.financeName}
+                    </div>
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
+              </div>
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label   text-nowrap'>
+                    No. Telpon Finance
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi nomor finance yang bertanggung jawab di perusahaan
+                      anda
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5'>
+                  <input
+                    id='financeMobile'
+                    name='financeMobile'
+                    ref={financeMobileRef}
+                    placeholder='Masukkan nomor finance'
+                    value={formKontakPerson.financeMobile}
+                    type='tel'
+                    className='form-input'
+                    aria-invalid={errorsKontakPerson.financeMobile}
+                    onChange={handleInputChange}
+                  />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsKontakPerson.financeMobile}
+                    </div>
+                  )}
+                </div>
+              </div>
 
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label text-nowrap'>Email Finance</label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  isi email finance dengan benar
-                </span>
-              )}
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='financeEmail'
-                name='financeEmail'
-                ref={financeEmailRef}
-                placeholder='contoh@email.com'
-                type='email'
-                value={formKontakPerson.financeEmail}
-                className='form-input'
-                aria-invalid={errorsKontakPerson.financeEmail}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.financeEmail}
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label text-nowrap'>
+                    Email Finance
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi email finance dengan benar
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5'>
+                  <input
+                    id='financeEmail'
+                    name='financeEmail'
+                    ref={financeEmailRef}
+                    placeholder='contoh@email.com'
+                    type='email'
+                    value={formKontakPerson.financeEmail}
+                    className='form-input'
+                    aria-invalid={errorsKontakPerson.financeEmail}
+                    onChange={handleInputChange}
+                  />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsKontakPerson.financeEmail}
+                    </div>
+                  )}
                 </div>
-              )}
+              </div>
+            </div>
+          </form>
+        </div>
+      )}
+      {isMobile && (
+        <div className='text-sm'>
+          <h1
+            className={`font-bold py-4 mt-8 ${
+              isKonfirmasi ? 'text-xl' : 'text-xl'
+            }`}
+          >
+            Kontak Person
+          </h1>
+          <form className='flex flex-col w-full '>
+            <div className='w-full grid grid-row-2 gap-4'>
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>
+                  Nama Lengkap Direktur
+                </label>
+                <input
+                  value={formKontakPerson.direkturName}
+                  id='direkturName'
+                  name='direkturName'
+                  placeholder='Masukkan nama direktur anda'
+                  type='text'
+                  className='form-input'
+                  aria-invalid={errorsKontakPerson.direkturName}
+                  ref={direkturNameRef}
+                  onChange={handleInputChange}
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsKontakPerson.direkturName}
+                  </div>
+                )}
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label text-nowrap'>
+                  No. Telpon Direktur
+                </label>
+                <input
+                  id='direkturMobile'
+                  name='direkturMobile'
+                  ref={direkturMobileRef}
+                  placeholder='Masukkan nomor direktur anda'
+                  type='tel'
+                  value={formKontakPerson.direkturMobile}
+                  className='form-input'
+                  aria-invalid={errorsKontakPerson.direkturMobile}
+                  onChange={handleInputChange}
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsKontakPerson.direkturMobile}
+                  </div>
+                )}
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>
+                  Email Direktur
+                </label>
+                <input
+                  id='direkturEmail'
+                  name='direkturEmail'
+                  ref={direkturEmailRef}
+                  placeholder='contoh@email.com'
+                  type='email'
+                  value={formKontakPerson.direkturEmail}
+                  className='form-input'
+                  aria-invalid={errorsKontakPerson.direkturEmail}
+                  onChange={handleInputChange}
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsKontakPerson.direkturEmail}
+                  </div>
+                )}
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label text-nowrap'>
+                  Nama Purchasing
+                </label>
+                <input
+                  id='purchasingName'
+                  name='purchasingName'
+                  ref={purchasingNameRef}
+                  placeholder='Masukkan nama purchasing anda'
+                  value={formKontakPerson.purchasingName}
+                  type='text'
+                  className='form-input'
+                  aria-invalid={errorsKontakPerson.purchasingName}
+                  onChange={handleInputChange}
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsKontakPerson.purchasingName}
+                  </div>
+                )}
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>
+                  No. Telpon Purchasing
+                </label>
+                <input
+                  id='purchasingMobile'
+                  name='purchasingMobile'
+                  ref={financeMobileRef}
+                  placeholder='Masukkan nomor purchasing anda'
+                  value={formKontakPerson.purchasingMobile}
+                  type='tel'
+                  className='form-input'
+                  aria-invalid={errorsKontakPerson.purchasingMobile}
+                  onChange={handleInputChange}
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsKontakPerson.purchasingMobile}
+                  </div>
+                )}
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>
+                  Email Purchasing
+                </label>
+                <input
+                  id='purchasingEmail'
+                  name='purchasingEmail'
+                  ref={purchasingEmailRef}
+                  placeholder='contoh@email.com'
+                  value={formKontakPerson.purchasingEmail}
+                  type='email'
+                  className='form-input'
+                  aria-invalid={errorsKontakPerson.purchasingEmail}
+                  onChange={handleInputChange}
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsKontakPerson.purchasingEmail}
+                  </div>
+                )}
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>Nama Finance</label>
+                <input
+                  id='financeName'
+                  name='financeName'
+                  ref={financeNameRef}
+                  placeholder='Masukkan nama finance'
+                  value={formKontakPerson.financeName}
+                  type='text'
+                  className='form-input'
+                  aria-invalid={errorsKontakPerson.financeName}
+                  onChange={handleInputChange}
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsKontakPerson.financeName}
+                  </div>
+                )}
+              </div>
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label   text-nowrap'>
+                  No. Telpon Finance
+                </label>
+                <input
+                  id='financeMobile'
+                  name='financeMobile'
+                  ref={financeMobileRef}
+                  placeholder='Masukkan nomor finance'
+                  value={formKontakPerson.financeMobile}
+                  type='tel'
+                  className='form-input'
+                  aria-invalid={errorsKontakPerson.financeMobile}
+                  onChange={handleInputChange}
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsKontakPerson.financeMobile}
+                  </div>
+                )}
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label text-nowrap'>Email Finance</label>
+                <input
+                  id='financeEmail'
+                  name='financeEmail'
+                  ref={financeEmailRef}
+                  placeholder='contoh@email.com'
+                  type='email'
+                  value={formKontakPerson.financeEmail}
+                  className='form-input'
+                  aria-invalid={errorsKontakPerson.financeEmail}
+                  onChange={handleInputChange}
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsKontakPerson.financeEmail}
+                  </div>
+                )}
+              </div>
             </div>
-          </div>
+          </form>
         </div>
-      </form>
-    </div>
+      )}
+    </>
   );
 };