<iman> update fix kontak person

6 files changed, 200 insertions, 190 deletions

diff --git a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts
index 247f62dd..7f1bcbb0 100644
--- a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts
+++ b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts
@@ -116,6 +116,7 @@ export const usePengajuanTempoStoreKontakPerson = create<
     financeMobile: '',
     financeName: '',
     financeEmail: '',
+    purchasingMobile: '',
   },
   updateFormKontakPerson: (name, value) =>
     set((state) => ({
@@ -151,6 +152,7 @@ export const usePengajuanTempoStoreKontakPerson = create<
         financeName: '',
         financeMobile: '',
         financeEmail: '',
+        purchasingMobile: '',
       },
     }),
 }));
diff --git a/src-migrate/types/tempo.ts b/src-migrate/types/tempo.ts
index fc920c05..85680cba 100644
--- a/src-migrate/types/tempo.ts
+++ b/src-migrate/types/tempo.ts
@@ -27,6 +27,7 @@ export type tempoPropsKontakPerson = {
   financeMobile: string;
   financeEmail: string;
   financeName: string;
+  purchasingMobile: string;
 };
 
 export type TempoApiProps = OdooApiRes<TempoProps>;
diff --git a/src-migrate/validations/tempo.ts b/src-migrate/validations/tempo.ts
index 45cc8cd2..756bb722 100644
--- a/src-migrate/validations/tempo.ts
+++ b/src-migrate/validations/tempo.ts
@@ -41,6 +41,12 @@ export const TempoSchemaKontakPerson = z.object({
     .refine((val) => /^\d{10,12}$/.test(val), {
       message: 'Format nomor telepon tidak valid, contoh: 081234567890',
     }),
+  purchasingMobile: z
+    .string()
+    .min(1, { message: 'Nomor telepon harus diisi' })
+    .refine((val) => /^\d{10,12}$/.test(val), {
+      message: 'Format nomor telepon tidak valid, contoh: 081234567890',
+    }),
   direkturEmail: z
     .string()
     .min(1, { message: 'Email harus diisi' })
diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
index a595ff13..861a75ba 100644
--- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
@@ -14,137 +14,6 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
     validateKontakPerson,
     updateFormKontakPerson,
   } = usePengajuanTempoStoreKontakPerson();
-  const [industries, setIndustries] = useState([]);
-  const [selectedCategory, setSelectedCategory] = useState('');
-  const [states, setState] = useState([]);
-  const [cities, setCities] = useState([]);
-  const [bersedia, setBersedia] = useState(null);
-  const category_produk = [
-    { id: 1, name: 'Pengaman, Kesehatan & Keamanan' },
-    { id: 2, name: 'Perkakas Tangan, Listrik & Pneumatic' },
-    { id: 3, name: 'Mesin Industrial' },
-    { id: 4, name: 'Mesin Pertanian & Perkebunan' },
-    { id: 5, name: 'Mesin Pembersih & Janitorial' },
-    { id: 6, name: 'Cairan Berbahan Kimia' },
-    { id: 7, name: 'Perlengkapan Pengukuran & Pengujian' },
-    { id: 8, name: 'Peralatan Listrik & Elektronik' },
-    { id: 9, name: 'Perlengkapan Logistik & Gudang' },
-    { id: 10, name: 'Peralatan Kantor & Stationery' },
-    { id: 11, name: 'Komponen & Aksesoris' },
-    { id: 12, name: 'Peralatan Horeca & Food Service' },
-  ];
-
-  useEffect(() => {
-    const loadState = async () => {
-      let dataState = await stateApi();
-      dataState = dataState.map((state) => ({
-        value: state.id,
-        label: state.name,
-      }));
-      setState(dataState);
-    };
-    loadState();
-  }, []);
-
-  const watchState = watch('state');
-  useEffect(() => {
-    updateFormKontakPerson('city', '');
-    if (watchState) {
-      updateFormKontakPerson('state', `${watchState}`);
-      validateKontakPerson();
-      const loadCities = async () => {
-        let dataCities = await cityApi({ stateId: watchState });
-        dataCities = dataCities.map((city) => ({
-          value: city.id,
-          label: city.name,
-        }));
-        setCities(dataCities);
-      };
-      loadCities();
-    }
-  }, [watchState]);
-
-  const watchCity = watch('city');
-  useEffect(() => {
-    if (watchCity) {
-      updateFormKontakPerson('city', `${watchCity}`);
-      validateKontakPerson();
-    }
-  }, [watchCity]);
-
-  useEffect(() => {
-    const loadIndustries = async () => {
-      const dataIndustries = await odooApi('GET', '/api/v1/partner/industry');
-      setIndustries(
-        dataIndustries?.map((o) => ({
-          value: o.id,
-          label: o.name,
-          category: o.category,
-        }))
-      );
-    };
-    loadIndustries();
-  }, []);
-
-  useEffect(() => {
-    const selectedIndustryType = industries.find(
-      (industry) => industry.value === watch('industry_id')
-    );
-    if (selectedIndustryType) {
-      updateFormKontakPerson('industry_id', `${selectedIndustryType?.value}`);
-      validateKontakPerson();
-      setSelectedCategory(selectedIndustryType.category);
-    }
-  }, [watch('industry_id'), industries]);
-
-  const estimasiValue = watch('estimasi');
-  const tempoLimitValue = watch('tempoLimit');
-
-  // Memformat angka menjadi format rupiah
-  const formatRupiah = (value) => {
-    if (!value) return '';
-    const numberString = value.replace(/[^0-9]/g, ''); // Menghapus karakter non-digit
-    return numberString
-      ? 'Rp ' + new Intl.NumberFormat('id-ID').format(numberString)
-      : '';
-  };
-
-  const handleChange = (e) => {
-    const value = e.target.value;
-    const formattedValue = formatRupiah(value);
-    console.log('formattedValue', formattedValue);
-    updateFormKontakPerson('estimasi', formattedValue.replace(/^Rp\s*/, ''));
-    validateKontakPerson();
-  };
-  const onChangeTempoDuration = (e) => {
-    updateFormKontakPerson('tempoDuration', `${e}`);
-    validateKontakPerson();
-  };
-
-  const onChangeTempoLimit = (e) => {
-    updateFormKontakPerson('tempoLimit', `${e}`);
-    validateKontakPerson();
-  };
-  const handleCheckboxBersediaChange = (value) => {
-    if (value === 'bersedia') {
-      setBersedia(true);
-    } else if (value === 'tidakBersedia') {
-      setBersedia(false);
-    }
-    updateFormKontakPerson('bersedia', `${value === 'bersedia'}`);
-    validateKontakPerson();
-  };
-  const [selectedIds, setSelectedIds] = useState([]);
-
-  const handleCheckboxChange = (id) => {
-    setSelectedIds((prevSelected) =>
-      prevSelected.includes(id)
-        ? prevSelected.filter((selectedId) => selectedId !== id)
-        : [...prevSelected, id]
-    );
-    updateFormKontakPerson('categoryProduk', `${selectedIds}`);
-    validateKontakPerson();
-  };
 
   const handleInputChange = (event) => {
     const { name, value } = event.target;
@@ -152,9 +21,6 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
     validateKontakPerson();
   };
 
-  const midIndex = Math.ceil(category_produk.length / 2);
-  const firstColumn = category_produk.slice(0, midIndex);
-  const secondColumn = category_produk.slice(midIndex);
   const isFormValid = useMemo(
     () => Object.keys(errorsKontakPerson).length === 0,
     [errorsKontakPerson]
@@ -165,6 +31,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
   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);
@@ -192,6 +59,13 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           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;
@@ -227,6 +101,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
             </div>
             <div className='w-3/5'>
               <input
+                value={formKontakPerson.direkturName}
                 id='direkturName'
                 name='direkturName'
                 placeholder='Masukkan nama direktur anda'
@@ -260,6 +135,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 ref={direkturMobileRef}
                 placeholder='Masukkan nomor direktur anda'
                 type='tel'
+                value={formKontakPerson.direkturMobile}
                 className='form-input'
                 aria-invalid={errorsKontakPerson.direkturMobile}
                 onChange={handleInputChange}
@@ -288,6 +164,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 ref={direkturEmailRef}
                 placeholder='contoh@email.com'
                 type='email'
+                value={formKontakPerson.direkturEmail}
                 className='form-input'
                 aria-invalid={errorsKontakPerson.direkturEmail}
                 onChange={handleInputChange}
@@ -315,6 +192,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 name='purchasingName'
                 ref={purchasingNameRef}
                 placeholder='Masukkan nama purchasing anda'
+                value={formKontakPerson.purchasingName}
                 type='text'
                 className='form-input'
                 aria-invalid={errorsKontakPerson.purchasingName}
@@ -331,6 +209,35 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           <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'>
@@ -343,6 +250,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 name='purchasingEmail'
                 ref={purchasingEmailRef}
                 placeholder='contoh@email.com'
+                value={formKontakPerson.purchasingEmail}
                 type='email'
                 className='form-input'
                 aria-invalid={errorsKontakPerson.purchasingEmail}
@@ -371,6 +279,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 name='financeName'
                 ref={financeNameRef}
                 placeholder='Masukkan nama finance'
+                value={formKontakPerson.financeName}
                 type='text'
                 className='form-input'
                 aria-invalid={errorsKontakPerson.financeName}
@@ -398,6 +307,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 name='financeMobile'
                 ref={financeMobileRef}
                 placeholder='Masukkan nomor finance'
+                value={formKontakPerson.financeMobile}
                 type='tel'
                 className='form-input'
                 aria-invalid={errorsKontakPerson.financeMobile}
@@ -427,6 +337,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 ref={financeEmailRef}
                 placeholder='contoh@email.com'
                 type='email'
+                value={formKontakPerson.financeEmail}
                 className='form-input'
                 aria-invalid={errorsKontakPerson.financeEmail}
                 onChange={handleInputChange}
diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
index 2c10b1d6..14ea1805 100644
--- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
+++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
@@ -9,11 +9,11 @@ import {
   usePengajuanTempoStoreKontakPerson,
 } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
 import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
-import { chakra } from '@chakra-ui/react';
 const PengajuanTempo = () => {
   const [currentStep, setCurrentStep] = React.useState(0);
   const NUMBER_OF_STEPS = 6;
   const { form, errors, validate, updateForm } = usePengajuanTempoStore();
+  const { control, watch, setValue } = useForm();
   const {
     formKontakPerson,
     errorsKontakPerson,
@@ -55,6 +55,15 @@ const PengajuanTempo = () => {
     <div>Dokumen</div>,
     <div>Konfirmasi</div>,
   ];
+  const stepDivsUpdateForm = [
+    updateForm,
+    updateFormKontakPerson,
+    <div>Kontak Person</div>,
+    <div>Pengiriman</div>,
+    <div>Referensi</div>,
+    <div>Dokumen</div>,
+    <div>Konfirmasi</div>,
+  ];
   const stepLabels = [
     'informasi_perusahaan',
     'kontak_person',
@@ -69,16 +78,21 @@ const PengajuanTempo = () => {
     [stepDivsError[currentStep]]
   );
   useEffect(() => {
-    validate();
     validateKontakPerson();
-  }, []);
+    validate();
+
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }, [currentStep]);
+
   useEffect(() => {
     const cachedData = getFromLocalStorage(stepLabels[currentStep]);
-    console.log('cachedData prev button', cachedData);
     if (cachedData) {
       // const formData = JSON.parse(cachedData);
       Object.keys(cachedData).forEach((key) => {
-        updateForm(key, cachedData[key]);
+        stepDivsUpdateForm[currentStep](key, cachedData[key]);
       });
     }
   }, [currentStep]);
@@ -86,15 +100,10 @@ const PengajuanTempo = () => {
     if (!isFormValid) {
       setNotValid(true);
       setButtonSubmitClick(!buttonSubmitClick);
-      console.log('form', stepDivsForm[currentStep]);
-      console.log('error', stepDivsError[currentStep]);
       return;
     } else {
       saveToLocalStorage(stepLabels[currentStep], stepDivsForm[currentStep]);
       const cachedData = getFromLocalStorage(stepLabels[currentStep]);
-      console.log('cachedData', cachedData);
-      console.log('form', stepDivsForm[currentStep]);
-      console.log('error', stepDivsError[currentStep]);
       setButtonSubmitClick(!buttonSubmitClick);
       setNotValid(false);
     }
diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index a7d170e9..c0f9bd4a 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -7,7 +7,7 @@ import cityApi from '@/lib/address/api/cityApi';
 import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
 import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
 const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
-  const { control, watch } = useForm();
+  const { control, watch, setValue, getValues } = useForm();
   const { form, errors, validate, updateForm } = usePengajuanTempoStore();
   const [industries, setIndustries] = useState([]);
   const [selectedCategory, setSelectedCategory] = useState('');
@@ -28,6 +28,15 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
     { id: 11, name: 'Komponen & Aksesoris' },
     { id: 12, name: 'Peralatan Horeca & Food Service' },
   ];
+  const radioOptions = [
+    { label: '5.000.000', value: '5000000' },
+    { label: '10.000.000', value: '10000000' },
+    { label: '15.000.000', value: '15000000' },
+    { label: '20.000.000', value: '20000000' },
+    { label: '25.000.000', value: '25000000' },
+    { label: '30.000.000', value: '30000000' },
+    { label: '35.000.000', value: '35000000' },
+  ];
 
   useEffect(() => {
     const loadState = async () => {
@@ -107,7 +116,6 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
   const handleChange = (e) => {
     const value = e.target.value;
     const formattedValue = formatRupiah(value);
-    console.log('formattedValue', formattedValue);
     updateForm('estimasi', formattedValue.replace(/^Rp\s*/, ''));
     validate();
   };
@@ -120,27 +128,41 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
     updateForm('tempoLimit', `${e}`);
     validate();
   };
+  const [isCustom, setIsCustom] = React.useState(false);
+  const [tempoLimitValueEx, setTempoLimitValueEx] = React.useState('');
   const handleCheckboxBersediaChange = (value) => {
-    if (value === 'bersedia') {
-      setBersedia(true);
-    } else if (value === 'tidakBersedia') {
-      setBersedia(false);
-    }
-    updateForm('bersedia', `${value === 'bersedia'}`);
+    // if (value === 'bersedia') {
+    //   setBersedia(true);
+    // } else if (value === 'tidakBersedia') {
+    //   setBersedia(false);
+    // }
+    // updateForm('bersedia', `${value === 'bersedia'}`);
+    updateForm('bersedia', `${value}`);
     validate();
   };
-  const [selectedIds, setSelectedIds] = useState([]);
+  const [selectedIds, setSelectedIds] = useState(
+    form.categoryProduk ? form.categoryProduk.split(',').map(Number) : [] // Parse string menjadi array angka
+  );
 
   const handleCheckboxChange = (id) => {
-    setSelectedIds((prevSelected) =>
-      prevSelected.includes(id)
-        ? prevSelected.filter((selectedId) => selectedId !== id)
-        : [...prevSelected, id]
-    );
-    updateForm('categoryProduk', `${selectedIds}`);
+    const updatedSelected = selectedIds.includes(id)
+      ? selectedIds.filter((selectedId) => selectedId !== id)
+      : [...selectedIds, id];
+
+    setSelectedIds(updatedSelected);
+
+    // Mengubah array kembali menjadi string yang dipisahkan oleh koma
+    updateForm('categoryProduk', updatedSelected.join(','));
     validate();
   };
 
+  useEffect(() => {
+    if (form.categoryProduk) {
+      setSelectedIds(form.categoryProduk.split(',').map(Number)); // Parse string menjadi array angka
+    }
+  }, [form.categoryProduk]);
+  const isChecked = (id) => selectedIds.includes(id);
+
   const handleInputChange = (event) => {
     const { name, value } = event.target;
     updateForm(name, value);
@@ -238,6 +260,37 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
     };
     loadIndustries();
   }, [buttonSubmitClick, chekValid]);
+  useEffect(() => {
+    if (form.industry_id) {
+      setValue('industry_id', parseInt(form.industry_id));
+    }
+    if (form.state) {
+      setValue('state', parseInt(form.state));
+    }
+    if (form.city) {
+      setValue('city', parseInt(form.city));
+    }
+    if (form.tempoDuration) {
+      setValue('tempoDuration', form.tempoDuration);
+    }
+    if (form.tempoLimit) {
+      setValue('tempoLimit', form.tempoLimit);
+    }
+    if (form.tempoLimit) {
+      const isValueInOptions = radioOptions.some(
+        (option) => option.value === form.tempoLimit
+      );
+
+      if (isValueInOptions) {
+        setValue('tempoLimit', form.tempoLimit); // Set value dari radio options
+        setIsCustom(false); // Pastikan custom tidak aktif
+      } else {
+        setValue('tempoLimit', 'custom'); // Set value ke custom jika tidak termasuk dalam options
+        setIsCustom(true); // Aktifkan custom input
+        setTempoLimitValueEx(form.tempoLimit); // Set nilai input custom ke form.tempoLimit
+      }
+    }
+  }, [form]);
   return (
     <>
       <div className='flex justify-start'>
@@ -551,7 +604,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
               <div className='w-1/5' ref={tempoDurationRef}>
                 <RadioGroup
                   onChange={onChangeTempoDuration}
-                  // value={selectedValue}
+                  value={form.tempoDuration}
                 >
                   <Stack direction='column' className=''>
                     <Radio colorScheme='red' value='7'>
@@ -571,7 +624,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   </div>
                 )}
               </div>
-              <div className='w-4/5 flex flex-row justify-between items-center '>
+              <div className='w-4/5 flex flex-row justify-between items-center'>
                 <div>
                   <label className='form-label w-2/5 text-nowrap'>
                     Limit Tempo
@@ -585,48 +638,59 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   ref={tempoLimitRef}
                 >
                   <RadioGroup
-                    onChange={onChangeTempoLimit}
-                    className='flex items-center justify-between '
+                    onChange={(value) => {
+                      if (value === 'custom') {
+                        setIsCustom(true);
+                        updateForm('tempoLimit', tempoLimitValue); // Update dengan nilai input custom jika dipilih
+                      } else {
+                        setIsCustom(false);
+                        onChangeTempoLimit(value); // Update dengan nilai radio button yang dipilih
+                      }
+                    }}
+                    className='flex items-center justify-between'
+                    value={isCustom ? 'custom' : form.tempoLimit}
                   >
-                    <Stack direction='row' className=''>
+                    <Stack direction='row'>
                       {/* Kolom 1 */}
                       <Stack direction='column' spacing={2} className='mr-4'>
-                        <Radio colorScheme='red' value='5.000.000'>
-                          5.000.000
-                        </Radio>
-                        <Radio colorScheme='red' value='10.000.000'>
-                          10.000.000
-                        </Radio>
-                        <Radio colorScheme='red' value='15.000.000'>
-                          15.000.000
-                        </Radio>
-                        <Radio colorScheme='red' value='20.000.000'>
-                          20.000.000
-                        </Radio>
+                        {radioOptions.slice(0, 4).map((option) => (
+                          <Radio
+                            key={option.value}
+                            colorScheme='red'
+                            value={option.value}
+                          >
+                            {option.label}
+                          </Radio>
+                        ))}
                       </Stack>
 
                       {/* Kolom 2 */}
                       <Stack direction='column' className='ml-8' spacing={2}>
-                        <Radio colorScheme='red' value='25.000.000'>
-                          25.000.000
-                        </Radio>
-                        <Radio colorScheme='red' value='30.000.000'>
-                          30.000.000
-                        </Radio>
-                        <Radio colorScheme='red' value='35.000.000'>
-                          35.000.000
-                        </Radio>
-                        <div className='flex flex-row'>
+                        {radioOptions.slice(4).map((option) => (
+                          <Radio
+                            key={option.value}
+                            colorScheme='red'
+                            value={option.value}
+                          >
+                            {option.label}
+                          </Radio>
+                        ))}
+                        <div className='flex flex-row items-center'>
                           <Radio colorScheme='red' value='custom'></Radio>
+
                           <input
                             placeholder='Isi limit yang anda inginkan'
                             type='text'
                             className='border ml-2 p-1' // padding untuk memberi ruang untuk "RP"
-                            value={formatRupiah(tempoLimitValue)} // Menampilkan nilai terformat
+                            value={formatRupiah(tempoLimitValueEx)} // Menampilkan nilai terformat
                             onChange={(e) => {
                               const value = e.target.value;
                               const formattedValue = formatRupiah(value);
-                              updateForm('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form
+                              setTempoLimitValueEx(formattedValue);
+                              updateForm(
+                                'tempoLimit',
+                                formattedValue.replace(/^Rp\s*/, '')
+                              ); // Mengupdate nilai di react-hook-form
                             }}
                           />
                         </div>
@@ -659,7 +723,21 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
             </div>
             <div className='w-3/5 flex flex-col justify-start'>
               <div className='flex gap-x-4' ref={bersediaRef}>
-                <Checkbox
+                <RadioGroup
+                  onChange={handleCheckboxBersediaChange}
+                  value={form.bersedia}
+                >
+                  <Stack direction='row'>
+                    <Radio colorScheme='red' value='bersedia'>
+                      Saya bersedia
+                    </Radio>
+                    <Radio colorScheme='red' value='tidakBersedia'>
+                      Tidak bersedia
+                    </Radio>
+                  </Stack>
+                </RadioGroup>
+                {/* <Checkbox
+                  name='bersedia'
                   borderColor='gray.600'
                   colorScheme='red'
                   isChecked={bersedia === true} // Checked when bersedia is true
@@ -670,6 +748,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   Saya bersedia
                 </Checkbox>
                 <Checkbox
+                  name='bersedia'
                   borderColor='gray.600'
                   colorScheme='red'
                   isChecked={bersedia === false} // Checked when bersedia is false
@@ -678,7 +757,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   size='md'
                 >
                   Tidak bersedia
-                </Checkbox>
+                </Checkbox> */}
               </div>
               {chekValid && (
                 <div className='text-caption-2 text-danger-500 mt-1'>
@@ -704,6 +783,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                     <Checkbox
                       key={item.id}
                       onChange={() => handleCheckboxChange(item.id)}
+                      isChecked={isChecked(item.id)}
                     >
                       {item.name}
                     </Checkbox>
@@ -713,6 +793,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   {secondColumn.map((item) => (
                     <Checkbox
                       key={item.id}
+                      isChecked={isChecked(item.id)}
                       onChange={() => handleCheckboxChange(item.id)}
                     >
                       {item.name}