<iman> fix section pengiriman

4 files changed, 823 insertions, 221 deletions

diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
index 257648ca..612b009a 100644
--- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
+++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
@@ -8,6 +8,7 @@ import { Controller, useForm } from 'react-hook-form';
 import {
   usePengajuanTempoStore,
   usePengajuanTempoStoreKontakPerson,
+  usePengajuanTempoStorePengiriman,
 } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
 import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
 const PengajuanTempo = () => {
@@ -21,6 +22,12 @@ const PengajuanTempo = () => {
     validateKontakPerson,
     updateFormKontakPerson,
   } = usePengajuanTempoStoreKontakPerson();
+  const {
+    formPengiriman,
+    errorsPengiriman,
+    validatePengiriman,
+    updateFormPengiriman,
+  } = usePengajuanTempoStorePengiriman();
   const [notValid, setNotValid] = useState(false);
   const [buttonSubmitClick, setButtonSubmitClick] = useState(false);
   const stepDivs = [
@@ -40,8 +47,7 @@ const PengajuanTempo = () => {
   const stepDivsError = [
     errors,
     errorsKontakPerson,
-    <div>Kontak Person</div>,
-    <div>Pengiriman</div>,
+    errorsPengiriman,
     <div>Referensi</div>,
     <div>Dokumen</div>,
     <div>Konfirmasi</div>,
@@ -49,8 +55,7 @@ const PengajuanTempo = () => {
   const stepDivsForm = [
     form,
     formKontakPerson,
-    <div>Kontak Person</div>,
-    <div>Pengiriman</div>,
+    formPengiriman,
     <div>Referensi</div>,
     <div>Dokumen</div>,
     <div>Konfirmasi</div>,
@@ -58,8 +63,7 @@ const PengajuanTempo = () => {
   const stepDivsUpdateForm = [
     updateForm,
     updateFormKontakPerson,
-    <div>Kontak Person</div>,
-    <div>Pengiriman</div>,
+    updateFormPengiriman,
     <div>Referensi</div>,
     <div>Dokumen</div>,
     <div>Konfirmasi</div>,
@@ -78,8 +82,9 @@ const PengajuanTempo = () => {
     [stepDivsError[currentStep]]
   );
   useEffect(() => {
-    validateKontakPerson();
     validate();
+    validateKontakPerson();
+    validatePengiriman();
 
     window.scrollTo({
       top: 0,
@@ -103,7 +108,6 @@ const PengajuanTempo = () => {
       return;
     } else {
       saveToLocalStorage(stepLabels[currentStep], stepDivsForm[currentStep]);
-      const cachedData = getFromLocalStorage(stepLabels[currentStep]);
       setButtonSubmitClick(!buttonSubmitClick);
       setNotValid(false);
     }
diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
index 91772c7f..a281916c 100644
--- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx
+++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
@@ -7,7 +7,7 @@ import cityApi from '@/lib/address/api/cityApi';
 import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
 import { usePengajuanTempoStorePengiriman } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
 const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
-  const { control, watch } = useForm();
+  const { control, watch, setValue } = useForm();
   const {
     formPengiriman,
     errorsPengiriman,
@@ -17,6 +17,65 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
   const [states, setState] = useState([]);
   const [cities, setCities] = useState([]);
   const [sameAddress, setSameAddress] = useState(false);
+  const [everyWeekday, setEveryWeekday] = useState(false);
+  const [everyWeek, setEveryWeek] = useState(false);
+  const [tukarInvoice, setTukarInvoice] = useState(false);
+  const [everyWeekdayPembayaran, setEveryWeekdayPembayaran] = useState(false);
+  const [everyWeekPembayaran, setEveryWeekPembayaran] = useState(false);
+  const [tukarInvoicePembayaran, setTukarInvoicePembayaran] = useState(false);
+  const [selectedIds, setSelectedIds] = useState(
+    formPengiriman.dokumenPengiriman
+      ? formPengiriman.dokumenPengiriman.split(',').map(Number)
+      : []
+  );
+  const [selectedIdsDokumenInvoice, setSelectedIdsselectedIdsDokumenInvoice] =
+    useState(
+      formPengiriman.dokumenPengirimanInvoice
+        ? formPengiriman.dokumenPengirimanInvoice.split(',').map(Number)
+        : []
+    );
+
+  const handleCheckboxChange = (id) => {
+    const updatedSelected = selectedIds.includes(id)
+      ? selectedIds.filter((selectedId) => selectedId !== id)
+      : [...selectedIds, id];
+
+    setSelectedIds(updatedSelected);
+
+    // Jika checkbox 'Lainnya' dipilih, aktifkan input custom
+
+    updateFormPengiriman('dokumenPengiriman', updatedSelected.join(','));
+    validatePengiriman();
+  };
+  const handleCheckboxChangeDokumenPengirimanInvoice = (id) => {
+    const updatedSelected = selectedIdsDokumenInvoice.includes(id)
+      ? selectedIdsDokumenInvoice.filter((selectedId) => selectedId !== id)
+      : [...selectedIdsDokumenInvoice, id];
+
+    setSelectedIdsselectedIdsDokumenInvoice(updatedSelected);
+
+    // Jika checkbox 'Lainnya' dipilih, aktifkan input custom
+
+    updateFormPengiriman('dokumenPengirimanInvoice', updatedSelected.join(','));
+    validatePengiriman();
+  };
+
+  useEffect(() => {
+    if (formPengiriman.dokumenPengiriman) {
+      setSelectedIds(formPengiriman.dokumenPengiriman.split(',').map(Number)); // Parse string menjadi array angka
+    }
+  }, [formPengiriman.dokumenPengiriman]);
+  useEffect(() => {
+    if (formPengiriman.dokumenPengirimanInvoice) {
+      setSelectedIdsselectedIdsDokumenInvoice(
+        formPengiriman.dokumenPengirimanInvoice.split(',').map(Number)
+      ); // Parse string menjadi array angka
+    }
+  }, [formPengiriman.dokumenPengirimanInvoice]);
+
+  // Fungsi untuk memeriksa apakah item sudah dipilih
+  const isChecked = (id) => selectedIds.includes(id);
+  const isCheckedInvoice = (id) => selectedIdsDokumenInvoice.includes(id);
 
   useEffect(() => {
     const loadState = async () => {
@@ -30,12 +89,12 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
     loadState();
   }, []);
 
-  const watchState = watch('state');
+  const watchState = watch('statePengiriman');
   useEffect(() => {
-    updateFormPengiriman('city', '');
+    updateFormPengiriman('cityPengiriman', '');
     if (watchState) {
-      updateFormPengiriman('state', `${watchState}`);
-      validate();
+      updateFormPengiriman('statePengiriman', `${watchState}`);
+      validatePengiriman();
       const loadCities = async () => {
         let dataCities = await cityApi({ stateId: watchState });
         dataCities = dataCities.map((city) => ({
@@ -48,12 +107,50 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
     }
   }, [watchState]);
 
+  const watchCity = watch('cityPengiriman');
+  useEffect(() => {
+    if (watchCity) {
+      updateFormPengiriman('cityPengiriman', `${watchCity}`);
+      validatePengiriman();
+    }
+  }, [watchCity]);
   const handleInputChange = (event) => {
     const { name, value } = event.target;
     updateFormPengiriman(name, value);
     validatePengiriman();
   };
 
+  const handleEveryWeekday = () => {
+    setEveryWeekday(!everyWeekday);
+    updateFormPengiriman('everyWeekday', everyWeekday);
+    validatePengiriman();
+  };
+  const handleEveryWeek = () => {
+    setEveryWeek(!everyWeek);
+    updateFormPengiriman('everyWeek', everyWeek);
+    validatePengiriman();
+  };
+  const handleTukarInvoice = () => {
+    setTukarInvoice(!tukarInvoice);
+    updateFormPengiriman('tukarInvoice', tukarInvoice);
+    validatePengiriman();
+  };
+  const handleEveryWeekdayPembayaran = () => {
+    setEveryWeekdayPembayaran(!everyWeekdayPembayaran);
+    updateFormPengiriman('everyWeekdayPembayaran', everyWeekdayPembayaran);
+    validatePengiriman();
+  };
+  const handleEveryWeekPembayaran = () => {
+    setEveryWeekPembayaran(!everyWeekPembayaran);
+    updateFormPengiriman('everyWeekPembayaran', everyWeekPembayaran);
+    validatePengiriman();
+  };
+  const handleTukarInvoicePembayaran = () => {
+    setTukarInvoicePembayaran(!tukarInvoicePembayaran);
+    updateFormPengiriman('tukarInvoicePembayaran', tukarInvoicePembayaran);
+    validatePengiriman();
+  };
+
   const isFormValid = useMemo(
     () => Object.keys(errorsPengiriman).length === 0,
     [errorsPengiriman]
@@ -65,14 +162,15 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
   const cityPengirimanRef = useRef(null);
   const zipRef = useRef(null);
   const invoicePicRef = useRef(null);
-
-  const direkturEmailRef = useRef(null);
-  const purchasingNameRef = useRef(null);
-  const purchasingEmailRef = useRef(null);
-  const purchasingMobileRef = useRef(null);
-  const financeNameRef = useRef(null);
-  const financeMobileRef = useRef(null);
-  const financeEmailRef = useRef(null);
+  const streetInvoiceRef = useRef(null);
+  const stateInvoiceRef = useRef(null);
+  const cityInvoiceRef = useRef(null);
+  const everyWeekdayInputRef = useRef(null);
+  const everyWeekInputRef = useRef(null);
+  const dokumenPengirimanRef = useRef(null);
+  const dokumenPengirimanInputRef = useRef(null);
+  const dokumenPengirimanInvoiceRef = useRef(null);
+  const dokumenPengirimanInvoiceInputRef = useRef(null);
 
   useEffect(() => {
     const loadIndustries = async () => {
@@ -105,33 +203,57 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
           invoicePicRef.current.scrollIntoView(options);
           return;
         }
-
-        if (errorsPengiriman.direkturEmail && direkturEmailRef.current) {
-          direkturEmailRef.current.scrollIntoView(options);
+        if (errorsPengiriman.streetInvoice && streetInvoiceRef.current) {
+          streetInvoiceRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsPengiriman.stateInvoice && stateInvoiceRef.current) {
+          stateInvoiceRef.current.scrollIntoView(options);
           return;
         }
-        if (errorsPengiriman.purchasingName && purchasingNameRef.current) {
-          purchasingNameRef.current.scrollIntoView(options);
+        if (errorsPengiriman.cityInvoice && cityInvoiceRef.current) {
+          cityInvoiceRef.current.scrollIntoView(options);
           return;
         }
-        if (errorsPengiriman.purchasingMobile && purchasingMobileRef.current) {
-          purchasingMobileRef.current.scrollIntoView(options);
+        if (
+          errorsPengiriman.everyWeekdayInput &&
+          everyWeekdayInputRef.current
+        ) {
+          everyWeekdayInputRef.current.scrollIntoView(options);
           return;
         }
-        if (errorsPengiriman.purchasingEmail && purchasingEmailRef.current) {
-          purchasingEmailRef.current.scrollIntoView(options);
+        if (errorsPengiriman.everyWeekInput && everyWeekInputRef.current) {
+          everyWeekInputRef.current.scrollIntoView(options);
           return;
         }
-        if (errorsPengiriman.financeName && financeNameRef.current) {
-          financeNameRef.current.scrollIntoView(options);
+        if (
+          errorsPengiriman.dokumenPengiriman &&
+          dokumenPengirimanRef.current
+        ) {
+          dokumenPengirimanRef.current.scrollIntoView(options);
           return;
         }
-        if (errorsPengiriman.financeMobile && financeMobileRef.current) {
-          financeMobileRef.current.scrollIntoView(options);
+        if (
+          errorsPengiriman.dokumenInvoice &&
+          dokumenPengirimanInvoiceRef.current
+        ) {
+          dokumenPengirimanInvoiceRef.current.scrollIntoView(options);
           return;
         }
-        if (errorsPengiriman.financeEmail && financeEmailRef.current) {
-          financeEmailRef.current.scrollIntoView(options);
+        if (
+          selectedIds &&
+          formPengiriman.dokumenPengirimanInput === '' &&
+          dokumenPengirimanInputRef.current
+        ) {
+          dokumenPengirimanInputRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          selectedIdsDokumenInvoice &&
+          formPengiriman.dokumenPengirimanInvoiceInput === '' &&
+          dokumenPengirimanInvoiceInputRef.current
+        ) {
+          dokumenPengirimanInvoiceInputRef.current.scrollIntoView(options);
           return;
         }
       }
@@ -144,12 +266,36 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
   }, [buttonSubmitClick]);
   useEffect(() => {
     if (sameAddress) {
-      updateFormPengiriman('streetPengiriman', formPengiriman.streetPengiriman);
-      updateFormPengiriman('statePengiriman', formPengiriman.statePengiriman);
-      updateFormPengiriman('cityPengiriman', formPengiriman.cityPengiriman);
-      updateFormPengiriman('zip', formPengiriman.zip);
+      updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman);
+      updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman);
+      updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman);
     }
   }, [sameAddress]);
+
+  useEffect(() => {
+    if (formPengiriman.statePengiriman) {
+      setValue('statePengiriman', parseInt(formPengiriman.statePengiriman));
+    }
+    if (formPengiriman.stateInvoice) {
+      setValue('stateInvoice', parseInt(formPengiriman.stateInvoice));
+    }
+    if (formPengiriman.cityInvoice) {
+      setValue('cityInvoice', parseInt(formPengiriman.cityInvoice));
+    }
+  }, [formPengiriman]);
+  useEffect(() => {
+    const cachedData = getFromLocalStorage('Pengiriman');
+    if (cachedData) {
+      setValue('cityPengiriman', parseInt(cachedData.cityPengiriman));
+    }
+  }, [formPengiriman]);
+  const getFromLocalStorage = (key) => {
+    const itemStr = localStorage.getItem(key);
+    if (!itemStr) return null;
+
+    const item = JSON.parse(itemStr);
+    return item;
+  };
   return (
     <>
       <div className='flex justify-start'>
@@ -318,25 +464,25 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
                 <>
                   <div>
                     <input
-                      id='streetPengiriman'
-                      name='streetPengiriman'
-                      ref={streetPengirimanRef}
-                      placeholder='Masukkan alamat lengkap pengiriman barang'
+                      id='streetInvoice'
+                      name='streetInvoice'
+                      ref={streetInvoiceRef}
+                      placeholder='Masukkan alamat lengkap pengiriman invoice'
                       type='text'
-                      value={formPengiriman.streetPengiriman}
+                      value={formPengiriman.streetInvoice}
                       className='form-input'
                       onChange={handleInputChange}
                     />
                     {chekValid && (
                       <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errorsPengiriman.streetPengiriman}
+                        {errorsPengiriman.streetInvoice}
                       </div>
                     )}
                   </div>
                   <div className='sub-alamat flex flex-row w-full gap-3'>
-                    <div className='w-2/5' ref={statePengirimanRef}>
+                    <div className='w-3/5' ref={stateInvoiceRef}>
                       <Controller
-                        name='statePengiriman'
+                        name='stateInvoice'
                         control={control}
                         render={(props) => (
                           <HookFormSelect
@@ -348,13 +494,13 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
                       />
                       {chekValid && (
                         <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errorsPengiriman.statePengiriman}
+                          {errorsPengiriman.stateInvoice}
                         </div>
                       )}
                     </div>
-                    <div className='w-1/3' ref={cityPengirimanRef}>
+                    <div className='w-2/5' ref={cityInvoiceRef}>
                       <Controller
-                        name='cityPengiriman'
+                        name='cityInvoice'
                         control={control}
                         render={(props) => (
                           <HookFormSelect
@@ -367,24 +513,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
                       />
                       {chekValid && (
                         <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errorsPengiriman.cityPengiriman}
-                        </div>
-                      )}
-                    </div>
-                    <div className='w-1/3'>
-                      <input
-                        id='zip'
-                        name='zip'
-                        ref={zipRef}
-                        placeholder='Kode Pos'
-                        type='number'
-                        value={formPengiriman.zip}
-                        className='form-input'
-                        onChange={handleInputChange}
-                      />
-                      {chekValid && (
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errorsPengiriman.zip}
+                          {errorsPengiriman.cityInvoice}
                         </div>
                       )}
                     </div>
@@ -397,114 +526,216 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
           <div className='flex flex-row  justify-between items-start'>
             <div>
               <label className='form-label w-2/5 text-nowrap'>
-                Email Direktur
+                Jadwal Penukaran Invoice{' '}
+                <span className=' opacity-60'>(Opsional)</span>
               </label>
               <span className='text-xs opacity-60'>
-                isi email Direktur yang sesuai
+                Pilih jika bisnis anda memiliki jadwal penukaran invoice
               </span>
             </div>
-            <div className='w-3/5'>
-              <input
-                id='direkturEmail'
-                name='direkturEmail'
-                ref={direkturEmailRef}
-                placeholder='contoh@email.com'
-                type='email'
-                value={formPengiriman.direkturEmail}
-                className='form-input'
-                aria-invalid={errorsPengiriman.direkturEmail}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsPengiriman.direkturEmail}
-                </div>
-              )}
+            <div className='w-3/5 flex gap-3 flex-col'>
+              <div className='flex gap-3 flex-col'>
+                <Checkbox
+                  colorScheme='red'
+                  isChecked={everyWeekday}
+                  onChange={handleEveryWeekday}
+                >
+                  Setiap Minggu dihari
+                </Checkbox>
+                <input
+                  id='everyWeekdayInput'
+                  name='everyWeekdayInput'
+                  ref={everyWeekdayInputRef}
+                  placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+                  type='text'
+                  value={formPengiriman.everyWeekdayInput}
+                  className='form-input'
+                  onChange={handleInputChange}
+                />
+              </div>
+              <div className='flex gap-3 flex-col'>
+                <Checkbox
+                  colorScheme='red'
+                  isChecked={everyWeek}
+                  onChange={handleEveryWeek}
+                >
+                  Setiap Bulan di minggu ke
+                </Checkbox>
+                <input
+                  id='everyWeekInput'
+                  name='everyWeekInput'
+                  ref={everyWeekInputRef}
+                  placeholder='Format: Minggu 1 & Minggu 2'
+                  type='text'
+                  value={formPengiriman.everyWeekInput}
+                  className='form-input'
+                  onChange={handleInputChange}
+                />
+              </div>
+              <div className='flex gap-3 flex-col'>
+                <Checkbox
+                  colorScheme='red'
+                  isChecked={tukarInvoice}
+                  onChange={handleTukarInvoice}
+                >
+                  Lainnya
+                </Checkbox>
+                <textarea
+                  id='tukarInvoiceInput'
+                  name='tukarInvoiceInput'
+                  placeholder='isi manual dokumen yang anda mau'
+                  type='textarea'
+                  value={formPengiriman.tukarInvoiceInput}
+                  className='form-input'
+                  rows={4}
+                  cols={40}
+                  onChange={handleInputChange}
+                />
+              </div>
             </div>
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
             <div>
               <label className='form-label w-2/5 text-nowrap'>
-                Nama Purchasing
+                Jadwal Pembayaran{' '}
+                <span className=' opacity-60'>(Opsional)</span>
               </label>
               <span className='text-xs opacity-60'>
-                isi nama purchasing yang bertanggung jawab di perusahaan anda
+                Pilih jika bisnis anda memiliki jadwal pembayaran
               </span>
             </div>
-            <div className='w-3/5'>
-              <input
-                id='purchasingName'
-                name='purchasingName'
-                ref={purchasingNameRef}
-                placeholder='Masukkan nama purchasing anda'
-                value={formPengiriman.purchasingName}
-                type='text'
-                className='form-input'
-                aria-invalid={errorsPengiriman.purchasingName}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsPengiriman.purchasingName}
-                </div>
-              )}
+            <div className='w-3/5 flex gap-3 flex-col'>
+              <div className='flex gap-3 flex-col'>
+                <Checkbox
+                  colorScheme='red'
+                  isChecked={everyWeekdayPembayaran}
+                  onChange={handleEveryWeekdayPembayaran}
+                >
+                  Setiap Minggu dihari
+                </Checkbox>
+                <input
+                  id='everyWeekdayInputPembayaran'
+                  name='everyWeekdayInputPembayaran'
+                  placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+                  type='text'
+                  value={formPengiriman.everyWeekdayInputPembayaran}
+                  className='form-input'
+                  onChange={handleInputChange}
+                />
+              </div>
+              <div className='flex gap-3 flex-col'>
+                <Checkbox
+                  colorScheme='red'
+                  isChecked={everyWeekPembayaran}
+                  onChange={handleEveryWeekPembayaran}
+                >
+                  Setiap Bulan di minggu ke
+                </Checkbox>
+                <input
+                  id='everyWeekInputPembayaran'
+                  name='everyWeekInputPembayaran'
+                  placeholder='Format: Minggu 1 & Minggu 2'
+                  type='text'
+                  value={formPengiriman.everyWeekInputPembayaran}
+                  className='form-input'
+                  onChange={handleInputChange}
+                />
+              </div>
+              <div className='flex gap-3 flex-col'>
+                <Checkbox
+                  colorScheme='red'
+                  isChecked={tukarInvoicePembayaran}
+                  onChange={handleTukarInvoicePembayaran}
+                >
+                  Lainnya
+                </Checkbox>
+                <textarea
+                  id='tukarInvoiceInputPembayaran'
+                  name='tukarInvoiceInputPembayaran'
+                  placeholder='isi manual dokumen yang anda mau'
+                  type='textarea'
+                  value={formPengiriman.tukarInvoiceInputPembayaran}
+                  className='form-input'
+                  rows={4}
+                  cols={40}
+                  onChange={handleInputChange}
+                />
+              </div>
             </div>
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
             <div>
               <label className='form-label w-2/5 text-nowrap'>
-                No. Telpon Purchasing
+                Dokumen saat Pengiriman Barang
               </label>
               <span className='text-xs opacity-60'>
-                isi nomor purchasing yang bertanggung jawab di perusahaan anda
+                Pilih dokumen lampiran saat pengiriman barang
               </span>
             </div>
-            <div className='w-3/5'>
-              <input
-                id='purchasingMobile'
-                name='purchasingMobile'
-                ref={financeMobileRef}
-                placeholder='Masukkan nomor purchasing anda'
-                value={formPengiriman.purchasingMobile}
-                type='tel'
-                className='form-input'
-                aria-invalid={errorsPengiriman.purchasingMobile}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsPengiriman.purchasingMobile}
-                </div>
-              )}
-            </div>
-          </div>
+            <div
+              className='w-3/5 flex gap-3 flex-col'
+              ref={dokumenPengirimanRef}
+            >
+              <Checkbox
+                colorScheme='red'
+                key='1'
+                isChecked={isChecked(1)}
+                onChange={() => handleCheckboxChange(1)}
+              >
+                Surat Tanda Terima Barang (STTB)
+              </Checkbox>
+              <Checkbox
+                colorScheme='red'
+                key='2'
+                isChecked={isChecked(2)}
+                onChange={() => handleCheckboxChange(2)}
+              >
+                Good Receipt (GR)
+              </Checkbox>
+              <Checkbox
+                colorScheme='red'
+                key='3'
+                isChecked={isChecked(3)}
+                onChange={() => handleCheckboxChange(3)}
+              >
+                Surat Terima Barang (STB)
+              </Checkbox>
+              <Checkbox
+                colorScheme='red'
+                key='4'
+                isChecked={isChecked(4)}
+                onChange={() => handleCheckboxChange(4)}
+              >
+                Lembar Penerimaan Barang (LPB)
+              </Checkbox>
 
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Email Purchasing
-              </label>
-              <span className='text-xs opacity-60'>
-                isi email purchasing benar
-              </span>
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='purchasingEmail'
-                name='purchasingEmail'
-                ref={purchasingEmailRef}
-                placeholder='contoh@email.com'
-                value={formPengiriman.purchasingEmail}
-                type='email'
-                className='form-input'
-                aria-invalid={errorsPengiriman.purchasingEmail}
-                onChange={handleInputChange}
-              />
+              <div className='flex gap-3 flex-col'>
+                <Checkbox
+                  colorScheme='red'
+                  key='4'
+                  isChecked={isChecked(5)}
+                  onChange={() => handleCheckboxChange(5)}
+                >
+                  Lainnya
+                </Checkbox>
+                <textarea
+                  id='dokumenPengirimanInput'
+                  name='dokumenPengirimanInput'
+                  placeholder='isi manual dokumen yang anda mau'
+                  type='textarea'
+                  ref={dokumenPengirimanInputRef}
+                  value={formPengiriman.dokumenPengirimanInput}
+                  className='form-input'
+                  rows={4}
+                  cols={40}
+                  onChange={handleInputChange}
+                />
+              </div>
               {chekValid && (
                 <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsPengiriman.purchasingEmail}
+                  {errorsPengiriman.dokumenPengiriman}
                 </div>
               )}
             </div>
@@ -513,84 +744,84 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
           <div className='flex flex-row  justify-between items-start'>
             <div>
               <label className='form-label w-2/5 text-nowrap'>
-                Nama Finance
+                Dokumen yang dilampirkan saat Pengiriman Invoice
               </label>
               <span className='text-xs opacity-60'>
-                isi nama finance yang bertanggung jawab di perusahaan anda
+                Dokumen akan dikirimkan sesuai dengan yang anda pilih
               </span>
             </div>
-            <div className='w-3/5'>
-              <input
-                id='financeName'
-                name='financeName'
-                ref={financeNameRef}
-                placeholder='Masukkan nama finance'
-                value={formPengiriman.financeName}
-                type='text'
-                className='form-input'
-                aria-invalid={errorsPengiriman.financeName}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsPengiriman.financeName}
-                </div>
-              )}
-            </div>
-          </div>
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                No. Telpon Finance
-              </label>
-              <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={formPengiriman.financeMobile}
-                type='tel'
-                className='form-input'
-                aria-invalid={errorsPengiriman.financeMobile}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsPengiriman.financeMobile}
-                </div>
-              )}
-            </div>
-          </div>
+            <div
+              className='w-3/5 flex gap-3 flex-col'
+              ref={dokumenPengirimanInvoiceRef}
+            >
+              <Checkbox
+                colorScheme='red'
+                key='1'
+                isChecked={isCheckedInvoice(1)}
+                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(1)}
+              >
+                Invoice Pembelian
+              </Checkbox>
+              <Checkbox
+                colorScheme='red'
+                key='2'
+                isChecked={isCheckedInvoice(2)}
+                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(2)}
+              >
+                Surat Jalan
+              </Checkbox>
+              <Checkbox
+                colorScheme='red'
+                key='3'
+                isChecked={isCheckedInvoice(3)}
+                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(3)}
+              >
+                Berita Acara Serah Terima (BAST)
+              </Checkbox>
+              <Checkbox
+                colorScheme='red'
+                key='4'
+                isChecked={isCheckedInvoice(4)}
+                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(4)}
+              >
+                Faktur Pajak
+              </Checkbox>
+              <Checkbox
+                colorScheme='red'
+                key='4'
+                isChecked={isCheckedInvoice(5)}
+                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(5)}
+              >
+                Good Receipt (GR)
+              </Checkbox>
 
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Email Finance
-              </label>
-              <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={formPengiriman.financeEmail}
-                className='form-input'
-                aria-invalid={errorsPengiriman.financeEmail}
-                onChange={handleInputChange}
-              />
+              <div className='flex gap-3 flex-col'>
+                <Checkbox
+                  colorScheme='red'
+                  key='4'
+                  isChecked={isCheckedInvoice(6)}
+                  onChange={() =>
+                    handleCheckboxChangeDokumenPengirimanInvoice(6)
+                  }
+                >
+                  Lainnya
+                </Checkbox>
+                <textarea
+                  id='dokumenPengirimanInvoiceInput'
+                  name='dokumenPengirimanInvoiceInput'
+                  placeholder='isi manual dokumen yang anda mau'
+                  type='textarea'
+                  ref={dokumenPengirimanInvoiceInputRef}
+                  value={formPengiriman.dokumenPengirimanInvoiceInput}
+                  className='form-input'
+                  rows={4}
+                  cols={40}
+                  onChange={handleInputChange}
+                />
+              </div>
               {chekValid && (
                 <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsPengiriman.financeEmail}
+                  {errorsPengiriman.dokumenInvoicePengiriman}
                 </div>
               )}
             </div>
diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
new file mode 100644
index 00000000..cb0bb5fe
--- /dev/null
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -0,0 +1,365 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { Controller, set, useForm } from 'react-hook-form';
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import odooApi from '~/libs/odooApi';
+import stateApi from '@/lib/address/api/stateApi.js';
+import cityApi from '@/lib/address/api/cityApi';
+import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
+import { usePengajuanTempoStoreKontakPerson } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+const Referensi = ({ chekValid, buttonSubmitClick }) => {
+  const { control, watch } = useForm();
+  const {
+    formKontakPerson,
+    errorsKontakPerson,
+    validateKontakPerson,
+    updateFormKontakPerson,
+  } = usePengajuanTempoStoreKontakPerson();
+
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    updateFormKontakPerson(name, value);
+    validateKontakPerson();
+  };
+
+  const isFormValid = useMemo(
+    () => Object.keys(errorsKontakPerson).length === 0,
+    [errorsKontakPerson]
+  );
+
+  const direkturNameRef = useRef(null);
+  const direkturMobileRef = useRef(null);
+  const direkturEmailRef = useRef(null);
+  const purchasingNameRef = useRef(null);
+  const purchasingEmailRef = useRef(null);
+  const purchasingMobileRef = useRef(null);
+  const financeNameRef = useRef(null);
+  const financeMobileRef = useRef(null);
+  const financeEmailRef = useRef(null);
+
+  useEffect(() => {
+    const loadIndustries = async () => {
+      if (!isFormValid) {
+        const options = {
+          behavior: 'smooth',
+          block: 'center',
+        };
+        if (errorsKontakPerson.direkturName && direkturNameRef.current) {
+          direkturNameRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsKontakPerson.direkturMobile && direkturMobileRef.current) {
+          direkturMobileRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsKontakPerson.direkturEmail && direkturEmailRef.current) {
+          direkturEmailRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsKontakPerson.purchasingName && purchasingNameRef.current) {
+          purchasingNameRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          errorsKontakPerson.purchasingMobile &&
+          purchasingMobileRef.current
+        ) {
+          purchasingMobileRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsKontakPerson.purchasingEmail && purchasingEmailRef.current) {
+          purchasingEmailRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsKontakPerson.financeName && financeNameRef.current) {
+          financeNameRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsKontakPerson.financeMobile && financeMobileRef.current) {
+          financeMobileRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsKontakPerson.financeEmail && financeEmailRef.current) {
+          financeEmailRef.current.scrollIntoView(options);
+          return;
+        }
+      }
+    };
+    loadIndustries();
+  }, [buttonSubmitClick, chekValid]);
+
+  useEffect(() => {
+    validateKontakPerson();
+  }, [buttonSubmitClick]);
+  return (
+    <>
+      <div className='flex justify-start'>
+        <h1 className='font-bold'>
+          Referensi Supplier / Rekanan Bisnis Perusahaan{' '}
+          <span className=' opacity-60'>(Opsional)</span>
+        </h1>
+      </div>
+      <form className='flex mt-4 flex-col w-full '>
+        <div className='w-full grid grid-row-2 gap-5'>
+          <div className='flex flex-row  justify-between items-start'>
+            <div>
+              <label className='form-label w-2/5 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}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className='flex flex-row  justify-between items-start'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                No. Telpon Direktur
+              </label>
+              <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>
+              )}
+            </div>
+          </div>
+
+          <div className='flex flex-row  justify-between items-start'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                Email Direktur
+              </label>
+              <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>
+              )}
+            </div>
+          </div>
+
+          <div className='flex flex-row  justify-between items-start'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                Nama Purchasing
+              </label>
+              <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>
+              )}
+            </div>
+          </div>
+
+          <div className='flex flex-row  justify-between items-start'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                No. Telpon Purchasing
+              </label>
+              <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>
+              )}
+            </div>
+          </div>
+
+          <div className='flex flex-row  justify-between items-start'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                Email Purchasing
+              </label>
+              <span className='text-xs opacity-60'>
+                isi email purchasing 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>
+              )}
+            </div>
+          </div>
+
+          <div className='flex flex-row  justify-between items-start'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                Nama Finance
+              </label>
+              <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>
+              )}
+            </div>
+          </div>
+          <div className='flex flex-row  justify-between items-start'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                No. Telpon Finance
+              </label>
+              <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>
+              <label className='form-label w-2/5 text-nowrap'>
+                Email Finance
+              </label>
+              <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>
+    </>
+  );
+};
+
+export default Referensi;
diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index c0f9bd4a..6651dca8 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -781,6 +781,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 <div className='flex flex-col gap-2' ref={categoryProdukRef}>
                   {firstColumn.map((item) => (
                     <Checkbox
+                      colorScheme='red'
                       key={item.id}
                       onChange={() => handleCheckboxChange(item.id)}
                       isChecked={isChecked(item.id)}
@@ -792,6 +793,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 <div className='flex flex-col gap-2'>
                   {secondColumn.map((item) => (
                     <Checkbox
+                      colorScheme='red'
                       key={item.id}
                       isChecked={isChecked(item.id)}
                       onChange={() => handleCheckboxChange(item.id)}