From 7868be545edebd0b54e0ed0b59bc80361bbf36d6 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 15 Oct 2024 17:01:36 +0700
Subject: <iman> update informasi perusahaan

---
 .../component/informasiPerusahaan.jsx              | 246 +++++++++++++++++++++
 1 file changed, 246 insertions(+)
 create mode 100644 src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
new file mode 100644
index 00000000..aca88439
--- /dev/null
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -0,0 +1,246 @@
+import React, { useState, useEffect } from 'react';
+import * as Yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Controller, 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';
+const informasiPerusahaan = ({}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    control,
+    reset,
+    watch,
+    setValue,
+    values,
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+    defaultValues,
+  });
+  const [industries, setIndustries] = useState([]);
+  const [selectedCategory, setSelectedCategory] = useState('');
+  const [states, setState] = useState([]);
+  const [cities, setCities] = useState([]);
+
+  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(() => {
+    setValue('city', '');
+    if (watchState) {
+      const loadCities = async () => {
+        let dataCities = await cityApi({ stateId: watchState });
+        dataCities = dataCities.map((city) => ({
+          value: city.id,
+          label: city.name,
+        }));
+        setCities(dataCities);
+      };
+      loadCities();
+    }
+  }, [watchState, setValue]);
+
+  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) {
+      // updateForm('industry_id', `${selectedIndustryType?.value}`);
+      setSelectedCategory(selectedIndustryType.category);
+    }
+  }, [watch('industry_id'), industries]);
+
+  const onSubmitHandler = async (values) => {
+    console.log('values', values);
+  };
+  return (
+    <>
+      <div className='flex justify-start'>
+        <h1>Informasi Perusahaan</h1>
+      </div>
+      <form
+        onSubmit={handleSubmit(onSubmitHandler)}
+        className='flex mt-4 flex-col w-full '
+      >
+        <div className='w-full grid grid-row-2 gap-4'>
+          <div className='flex flex-row  justify-between items-center'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                Nama Perusahaan
+              </label>
+              <span className='text-xs opacity-60'>
+                isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
+              </span>
+            </div>
+            <div className='w-3/5'>
+              <input
+                {...register('name')}
+                placeholder='Masukkan nama perusahaan'
+                type='text'
+                className='form-input'
+                aria-invalid={errors.id?.message}
+              />
+              <span className='text-xs opacity-60'>
+                Format: PT. INDOTEKNIK DOTCOM GEMILANG
+              </span>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.name?.message}
+              </div>
+            </div>
+          </div>
+          <div className='flex flex-row  justify-between items-center'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>Industri</label>
+              <span className='text-xs opacity-60'>
+                isi detail perusahaan sesuai dengan nama yang terdaftar
+              </span>
+            </div>
+            <div className='w-3/5'>
+              <Controller
+                {...register('industry_id')}
+                control={control}
+                render={(props) => (
+                  <HookFormSelect
+                    {...props}
+                    options={industries}
+                    placeholder={'Pilih industri bisnis anda'}
+                  />
+                )}
+              />
+              {selectedCategory && (
+                <span className='text-gray_r-11 text-xs'>
+                  Kategori : {selectedCategory}
+                </span>
+              )}
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.industry_id?.message}
+              </div>
+            </div>
+          </div>
+
+          <div className='flex flex-row  justify-between items-center'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                Alamat Perusahaan
+              </label>
+              <span className='text-xs opacity-60'>
+                alamat sesuai dengan alamat kantor pusat
+              </span>
+            </div>
+            <div className='w-3/5 flex gap-3 flex-col'>
+              <input
+                {...register('street')}
+                placeholder='Masukkan alamat lengkap perusahaan'
+                type='text'
+                className='form-input'
+              />
+              <div className='sub-alamat flex flex-row w-full gap-3'>
+                <div className='w-2/5'>
+                  <Controller
+                    name='state'
+                    control={control}
+                    render={(props) => (
+                      <HookFormSelect
+                        {...props}
+                        options={states}
+                        placeholder='Provinsi'
+                      />
+                    )}
+                  />
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.state?.message}
+                  </div>
+                </div>
+                <div className='w-1/3'>
+                  <Controller
+                    name='city'
+                    control={control}
+                    render={(props) => (
+                      <HookFormSelect
+                        {...props}
+                        options={cities}
+                        disabled={!watchState}
+                        placeholder='Kota'
+                      />
+                    )}
+                  />
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.city?.message}
+                  </div>
+                </div>
+                <div className='w-1/3'>
+                  <input
+                    {...register('zip')}
+                    placeholder='Kode Pos'
+                    type='number'
+                    className='form-input'
+                  />
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.zip?.message}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <button
+          type='submit'
+          className='bg-red-600 border mt-8 border-red-600 rounded-md text-sm text-white w-24 h-11 mb-1 content-center flex flex-row justify-center items-center'
+        >
+          <p>Selanjutnya</p>
+        </button>
+      </form>
+    </>
+  );
+};
+
+const validationSchema = Yup.object().shape({
+  // email: Yup.string()
+  //   .email('Format harus seperti contoh@email.com')
+  //   .required('Harus di-isi'),
+  name: Yup.string().required('Harus di-isi'),
+  industry_id: Yup.string().required('Harus di-pilih'),
+  street: Yup.string().required('Harus di-isi'),
+  zip: Yup.string().required('Harus di-isi'),
+  state: Yup.string().required('Harus di-pilih'),
+  city: Yup.string().required('Harus di-pilih'),
+});
+
+const defaultValues = {
+  // email: '',
+  name: '',
+  industry_id: '',
+  street: '',
+  state: '',
+  city: '',
+  zip: '',
+};
+
+export default informasiPerusahaan;
-- 
cgit v1.2.3


From 795db900a8a5abeaf22b98a5ca05d28c03387e4d Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 16 Oct 2024 09:56:52 +0700
Subject: <iman> update pengajuan tempo

---
 .../component/informasiPerusahaan.jsx              | 127 +++++++++++++++++++--
 1 file changed, 115 insertions(+), 12 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index aca88439..c3625217 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -89,8 +89,8 @@ const informasiPerusahaan = ({}) => {
         onSubmit={handleSubmit(onSubmitHandler)}
         className='flex mt-4 flex-col w-full '
       >
-        <div className='w-full grid grid-row-2 gap-4'>
-          <div className='flex flex-row  justify-between items-center'>
+        <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 Perusahaan
@@ -105,7 +105,7 @@ const informasiPerusahaan = ({}) => {
                 placeholder='Masukkan nama perusahaan'
                 type='text'
                 className='form-input'
-                aria-invalid={errors.id?.message}
+                aria-invalid={errors.name?.message}
               />
               <span className='text-xs opacity-60'>
                 Format: PT. INDOTEKNIK DOTCOM GEMILANG
@@ -115,7 +115,7 @@ const informasiPerusahaan = ({}) => {
               </div>
             </div>
           </div>
-          <div className='flex flex-row  justify-between items-center'>
+          <div className='flex flex-row  justify-between items-start'>
             <div>
               <label className='form-label w-2/5 text-nowrap'>Industri</label>
               <span className='text-xs opacity-60'>
@@ -135,7 +135,7 @@ const informasiPerusahaan = ({}) => {
                 )}
               />
               {selectedCategory && (
-                <span className='text-gray_r-11 text-xs'>
+                <span className='text-gray_r-11 text-xs opacity-60'>
                   Kategori : {selectedCategory}
                 </span>
               )}
@@ -145,7 +145,7 @@ const informasiPerusahaan = ({}) => {
             </div>
           </div>
 
-          <div className='flex flex-row  justify-between items-center'>
+          <div className='flex flex-row  justify-between items-start'>
             <div>
               <label className='form-label w-2/5 text-nowrap'>
                 Alamat Perusahaan
@@ -155,12 +155,17 @@ const informasiPerusahaan = ({}) => {
               </span>
             </div>
             <div className='w-3/5 flex gap-3 flex-col'>
-              <input
-                {...register('street')}
-                placeholder='Masukkan alamat lengkap perusahaan'
-                type='text'
-                className='form-input'
-              />
+              <div>
+                <input
+                  {...register('street')}
+                  placeholder='Masukkan alamat lengkap perusahaan'
+                  type='text'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.street?.message}
+                </div>
+              </div>
               <div className='sub-alamat flex flex-row w-full gap-3'>
                 <div className='w-2/5'>
                   <Controller
@@ -209,6 +214,96 @@ const informasiPerusahaan = ({}) => {
               </div>
             </div>
           </div>
+          <div className='flex flex-row  justify-between items-start'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                No. Telfon Perusahaan
+              </label>
+              <span className='text-xs opacity-60'>
+                isi no telfon perusahaan yang sesuai
+              </span>
+            </div>
+            <div className='w-3/5'>
+              <input
+                {...register('mobile')}
+                placeholder='Masukkan nomor telfon perusahaan'
+                type='text'
+                className='form-input'
+                aria-invalid={errors.mobile?.message}
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.mobile?.message}
+              </div>
+            </div>
+          </div>
+
+          <div className='flex flex-row  justify-between items-start'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>Data Bank</label>
+              <span className='text-xs opacity-60'>
+                Isi detail data bank perusahaan anda
+              </span>
+            </div>
+            <div className='w-3/5 flex gap-3 flex-row'>
+              <div>
+                <input
+                  {...register('bankName')}
+                  placeholder='Nama bank'
+                  type='text'
+                  className='form-input'
+                />
+                <span className='text-xs opacity-60'>
+                  Format: BCA, Mandiri, CIMB, BNI dll
+                </span>
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.bankName?.message}
+                </div>
+              </div>
+              <div>
+                <input
+                  {...register('accountName')}
+                  placeholder='Nama Rekening'
+                  type='text'
+                  className='form-input'
+                />
+                <span className='text-xs opacity-60'>Format: John Doe</span>
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.accountName?.message}
+                </div>
+              </div>
+              <div>
+                <input
+                  {...register('accountNumber')}
+                  placeholder='Nomor Rekening Bank'
+                  type='text'
+                  className='form-input'
+                />
+                <span className='text-xs opacity-60'>Format: 01234567896</span>
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.accountNumber?.message}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className='flex flex-row  justify-between items-start'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                Website <span className=' opacity-60'>(Opsional)</span>
+              </label>
+              <span className='text-xs opacity-60'>
+                isi no telfon perusahaan yang sesuai
+              </span>
+            </div>
+            <div className='w-3/5'>
+              <input
+                {...register('website')}
+                placeholder='www.indoteknik.com'
+                type='text'
+                className='form-input'
+              />
+            </div>
+          </div>
         </div>
         <button
           type='submit'
@@ -231,6 +326,10 @@ const validationSchema = Yup.object().shape({
   zip: Yup.string().required('Harus di-isi'),
   state: Yup.string().required('Harus di-pilih'),
   city: Yup.string().required('Harus di-pilih'),
+  mobile: Yup.string().required('Harus di-isi'),
+  bankName: Yup.string().required('Harus di-isi'),
+  accountName: Yup.string().required('Harus di-isi'),
+  accountNumber: Yup.string().required('Harus di-isi'),
 });
 
 const defaultValues = {
@@ -241,6 +340,10 @@ const defaultValues = {
   state: '',
   city: '',
   zip: '',
+  mobile: '',
+  bankName: '',
+  accountName: '',
+  accountNumber: '',
 };
 
 export default informasiPerusahaan;
-- 
cgit v1.2.3


From 6ea86ff925228528d0323df1ca2fc157afca8fab Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 16 Oct 2024 17:06:27 +0700
Subject: <iman> update informasi perusahaan

---
 .../component/informasiPerusahaan.jsx              | 289 ++++++++++++++++++++-
 1 file changed, 282 insertions(+), 7 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index c3625217..62280f13 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -6,6 +6,7 @@ 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';
 const informasiPerusahaan = ({}) => {
   const {
     register,
@@ -15,6 +16,7 @@ const informasiPerusahaan = ({}) => {
     reset,
     watch,
     setValue,
+    getValues,
     values,
   } = useForm({
     resolver: yupResolver(validationSchema),
@@ -24,7 +26,22 @@ const informasiPerusahaan = ({}) => {
   const [selectedCategory, setSelectedCategory] = useState('');
   const [states, setState] = useState([]);
   const [cities, setCities] = useState([]);
-
+  const [bersedia, setBersedia] = useState(true);
+  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' },
+  ];
+  console.log('defaultValues', getValues());
   useEffect(() => {
     const loadState = async () => {
       let dataState = await stateApi();
@@ -78,8 +95,53 @@ const informasiPerusahaan = ({}) => {
   }, [watch('industry_id'), industries]);
 
   const onSubmitHandler = async (values) => {
+    setValue('bersedia', `${bersedia}`);
     console.log('values', values);
   };
+
+  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)
+      : '';
+  };
+
+  // Memperbarui nilai input dengan format rupiah
+  const handleChange = (e) => {
+    const value = e.target.value;
+    const formattedValue = formatRupiah(value);
+    setValue('estimasi', formattedValue); // Mengupdate nilai di react-hook-form
+  };
+  const onChangeTempoDuration = (e) => {
+    setValue('tempoDuration', `${e}`); // Mengupdate nilai di react-hook-form
+  };
+
+  const onChangeTempoLimit = (e) => {
+    setValue('tempoLimit', `${e}`); // Mengupdate nilai di react-hook-form
+  };
+  const handleBersediaChange = () => {
+    setBersedia(!bersedia);
+    setValue('bersedia', `${bersedia}`);
+  };
+  const [selectedIds, setSelectedIds] = useState([]);
+
+  const handleCheckboxChange = (id) => {
+    setSelectedIds((prevSelected) =>
+      prevSelected.includes(id)
+        ? prevSelected.filter((selectedId) => selectedId !== id)
+        : [...prevSelected, id]
+    );
+    setValue('categoryProduk', `${selectedIds}`);
+  };
+
+  const midIndex = Math.ceil(category_produk.length / 2);
+  const firstColumn = category_produk.slice(0, midIndex);
+  const secondColumn = category_produk.slice(midIndex);
   return (
     <>
       <div className='flex justify-start'>
@@ -304,13 +366,220 @@ const informasiPerusahaan = ({}) => {
               />
             </div>
           </div>
+
+          <div className='flex flex-row  justify-between items-start'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                Estimasi Pembelian pertahun
+              </label>
+            </div>
+            <div className='w-3/5'>
+              <div className='relative'>
+                <input
+                  {...register('estimasi', {
+                    setValueAs: (value) => value.replace(/^Rp\s*/, ''), // Menyimpan hanya angka
+                  })}
+                  placeholder='Isi estimasi pembelian produk pertahun'
+                  type='text'
+                  className='form-input' // padding untuk memberi ruang untuk "RP"
+                  value={formatRupiah(estimasiValue)} // Menampilkan nilai terformat
+                  onChange={handleChange} // Mengatur perubahan input
+                />
+              </div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.estimasi?.message}
+              </div>
+            </div>
+          </div>
+
+          <div className='flex flex-row  justify-between items-center'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                Durasi Tempo
+              </label>
+              <span className='text-xs opacity-60'>
+                Pilih durasi tempo yang anda inginkan
+              </span>
+            </div>
+            <div className='w-3/5 flex flex-row items-center'>
+              <div className='w-1/5 '>
+                <RadioGroup
+                  onChange={onChangeTempoDuration}
+                  // value={selectedValue}
+                >
+                  <Stack direction='column' className=''>
+                    <Radio colorScheme='red' value='7'>
+                      7 Hari
+                    </Radio>
+                    <Radio colorScheme='red' value='14' className=''>
+                      14 Hari
+                    </Radio>
+                    <Radio colorScheme='red' value='30' className=''>
+                      30 Hari
+                    </Radio>
+                  </Stack>
+                </RadioGroup>
+              </div>
+              <div className='w-4/5 flex flex-row justify-between items-center '>
+                <div>
+                  <label className='form-label w-2/5 text-nowrap'>
+                    Limit Tempo
+                  </label>
+                  <span className='text-xs opacity-60'>
+                    Ajukan nilai limit yang anda mau
+                  </span>
+                </div>
+                <div className='flex items-center'>
+                  <RadioGroup
+                    onChange={onChangeTempoLimit}
+                    className='flex items-center justify-between'
+                  >
+                    <Stack direction='row' className=''>
+                      {/* 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>
+                      </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'>
+                          <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
+                            onChange={(e) => {
+                              const value = e.target.value;
+                              const formattedValue = formatRupiah(value);
+                              setValue('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form
+                            }}
+                          />
+                        </div>
+                      </Stack>
+                    </Stack>
+                  </RadioGroup>
+                </div>
+              </div>
+              {/* <input
+                {...register('tempoDuration')}
+                placeholder='Nomor Rekening Bank'
+                type='text'
+                className='form-input'
+              /> */}
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.tempoDuration?.message}
+              </div>
+            </div>
+          </div>
+
+          <div className='text-red-500'>
+            *Durasi dan limit dapat berbeda sesuaui dengan verifikasi oleh tim
+            Indoteknik.com
+          </div>
+
+          <div className='flex flex-row  justify-between items-start'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                Apakah bersedia transaksi via website?
+              </label>
+              <span className='text-xs opacity-60'>
+                Pilih produk bisa lebih dari 1
+              </span>
+            </div>
+            <div className='w-3/5 flex justify-start'>
+              <div className='flex gap-x-4'>
+                <Checkbox
+                  borderColor='gray.600'
+                  colorScheme='red'
+                  isChecked={bersedia}
+                  onChange={handleBersediaChange}
+                  value={true}
+                  size='md'
+                >
+                  Saya bersedia
+                </Checkbox>
+                <Checkbox
+                  borderColor='gray.600'
+                  colorScheme='red'
+                  isChecked={!bersedia}
+                  onChange={handleBersediaChange}
+                  value={false}
+                  size='md'
+                >
+                  Tidak bersedia
+                </Checkbox>
+              </div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.estimasi?.message}
+              </div>
+            </div>
+          </div>
+
+          <div className='flex flex-row  justify-between items-start'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                Kategori Produk yang Digunakan
+              </label>
+              <span className='text-xs opacity-60'>
+                Pilih produk bisa lebih dari 1
+              </span>
+            </div>
+            <div className='w-3/5 flex flex-row justify-between'>
+              <div className='flex flex-col gap-2'>
+                {firstColumn.map((item) => (
+                  <Checkbox
+                    key={item.id}
+                    onChange={() => handleCheckboxChange(item.id)}
+                  >
+                    {item.name}
+                  </Checkbox>
+                ))}
+              </div>
+              <div className='flex flex-col gap-2'>
+                {secondColumn.map((item) => (
+                  <Checkbox
+                    key={item.id}
+                    onChange={() => handleCheckboxChange(item.id)}
+                  >
+                    {item.name}
+                  </Checkbox>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className='flex flex-row justify-end items-center gap-4 mb-8'>
+            <span className='text-xs opacity-60'>
+              *Pastikan data yang anda masukan sudah benar dan sesuai
+            </span>
+            <button
+              type='submit'
+              className='bg-red-600 border border-red-600 rounded-md text-sm text-white w-28 h-11 mb-1 content-center flex flex-row justify-center items-center'
+            >
+              <p>Selanjutnya</p>
+            </button>
+          </div>
         </div>
-        <button
-          type='submit'
-          className='bg-red-600 border mt-8 border-red-600 rounded-md text-sm text-white w-24 h-11 mb-1 content-center flex flex-row justify-center items-center'
-        >
-          <p>Selanjutnya</p>
-        </button>
       </form>
     </>
   );
@@ -330,6 +599,9 @@ const validationSchema = Yup.object().shape({
   bankName: Yup.string().required('Harus di-isi'),
   accountName: Yup.string().required('Harus di-isi'),
   accountNumber: Yup.string().required('Harus di-isi'),
+  estimasi: Yup.string().required('Harus di-isi'),
+  tempoDuration: Yup.string().required('Harus di-isi'),
+  bersedia: Yup.string().required('Harus di-pilih'),
 });
 
 const defaultValues = {
@@ -344,6 +616,9 @@ const defaultValues = {
   bankName: '',
   accountName: '',
   accountNumber: '',
+  estimasi: '',
+  tempoDuration: '',
+  bersedia: '',
 };
 
 export default informasiPerusahaan;
-- 
cgit v1.2.3


From f555e7bc9d070e7e0bd4900941592480d4ba6c6a Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 17 Oct 2024 14:39:17 +0700
Subject: <iman> update pengajuan tempo

---
 .../component/informasiPerusahaan.jsx              | 472 +++++++++++++--------
 1 file changed, 288 insertions(+), 184 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 62280f13..82cf4aee 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -1,32 +1,19 @@
-import React, { useState, useEffect } from 'react';
-import * as Yup from 'yup';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { Controller, useForm } from 'react-hook-form';
+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';
-const informasiPerusahaan = ({}) => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    control,
-    reset,
-    watch,
-    setValue,
-    getValues,
-    values,
-  } = useForm({
-    resolver: yupResolver(validationSchema),
-    defaultValues,
-  });
+import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
+  const { control, watch } = useForm();
+  const { form, errors, validate, updateForm } = usePengajuanTempoStore();
   const [industries, setIndustries] = useState([]);
   const [selectedCategory, setSelectedCategory] = useState('');
   const [states, setState] = useState([]);
   const [cities, setCities] = useState([]);
-  const [bersedia, setBersedia] = useState(true);
+  const [bersedia, setBersedia] = useState(null);
   const category_produk = [
     { id: 1, name: 'Pengaman, Kesehatan & Keamanan' },
     { id: 2, name: 'Perkakas Tangan, Listrik & Pneumatic' },
@@ -41,7 +28,7 @@ const informasiPerusahaan = ({}) => {
     { id: 11, name: 'Komponen & Aksesoris' },
     { id: 12, name: 'Peralatan Horeca & Food Service' },
   ];
-  console.log('defaultValues', getValues());
+
   useEffect(() => {
     const loadState = async () => {
       let dataState = await stateApi();
@@ -56,8 +43,10 @@ const informasiPerusahaan = ({}) => {
 
   const watchState = watch('state');
   useEffect(() => {
-    setValue('city', '');
+    updateForm('city', '');
     if (watchState) {
+      updateForm('state', `${watchState}`);
+      validate();
       const loadCities = async () => {
         let dataCities = await cityApi({ stateId: watchState });
         dataCities = dataCities.map((city) => ({
@@ -68,7 +57,15 @@ const informasiPerusahaan = ({}) => {
       };
       loadCities();
     }
-  }, [watchState, setValue]);
+  }, [watchState]);
+
+  const watchCity = watch('city');
+  useEffect(() => {
+    if (watchCity) {
+      updateForm('city', `${watchCity}`);
+      validate();
+    }
+  }, [watchCity]);
 
   useEffect(() => {
     const loadIndustries = async () => {
@@ -89,16 +86,12 @@ const informasiPerusahaan = ({}) => {
       (industry) => industry.value === watch('industry_id')
     );
     if (selectedIndustryType) {
-      // updateForm('industry_id', `${selectedIndustryType?.value}`);
+      updateForm('industry_id', `${selectedIndustryType?.value}`);
+      validate();
       setSelectedCategory(selectedIndustryType.category);
     }
   }, [watch('industry_id'), industries]);
 
-  const onSubmitHandler = async (values) => {
-    setValue('bersedia', `${bersedia}`);
-    console.log('values', values);
-  };
-
   const estimasiValue = watch('estimasi');
   const tempoLimitValue = watch('tempoLimit');
 
@@ -111,22 +104,30 @@ const informasiPerusahaan = ({}) => {
       : '';
   };
 
-  // Memperbarui nilai input dengan format rupiah
   const handleChange = (e) => {
     const value = e.target.value;
     const formattedValue = formatRupiah(value);
-    setValue('estimasi', formattedValue); // Mengupdate nilai di react-hook-form
+    console.log('formattedValue', formattedValue);
+    updateForm('estimasi', formattedValue.replace(/^Rp\s*/, ''));
+    validate();
   };
   const onChangeTempoDuration = (e) => {
-    setValue('tempoDuration', `${e}`); // Mengupdate nilai di react-hook-form
+    updateForm('tempoDuration', `${e}`);
+    validate();
   };
 
   const onChangeTempoLimit = (e) => {
-    setValue('tempoLimit', `${e}`); // Mengupdate nilai di react-hook-form
+    updateForm('tempoLimit', `${e}`);
+    validate();
   };
-  const handleBersediaChange = () => {
-    setBersedia(!bersedia);
-    setValue('bersedia', `${bersedia}`);
+  const handleCheckboxBersediaChange = (value) => {
+    if (value === 'bersedia') {
+      setBersedia(true);
+    } else if (value === 'tidakBersedia') {
+      setBersedia(false);
+    }
+    updateForm('bersedia', value === 'bersedia');
+    validate();
   };
   const [selectedIds, setSelectedIds] = useState([]);
 
@@ -136,21 +137,113 @@ const informasiPerusahaan = ({}) => {
         ? prevSelected.filter((selectedId) => selectedId !== id)
         : [...prevSelected, id]
     );
-    setValue('categoryProduk', `${selectedIds}`);
+    updateForm('categoryProduk', `${selectedIds}`);
+    validate();
+  };
+
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    updateForm(name, value);
+    validate();
   };
 
   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(errors).length === 0, [errors]);
+
+  const nameRef = useRef(null);
+  const industry_idRef = useRef(null);
+  const streetRef = useRef(null);
+  const stateRef = useRef(null);
+  const cityRef = useRef(null);
+  const zipRef = useRef(null);
+  const mobileRef = useRef(null);
+  const bankNameRef = useRef(null);
+  const accountNameRef = useRef(null);
+  const accountNumberRef = useRef(null);
+  const estimasiRef = useRef(null);
+  const tempoDurationRef = useRef(null);
+  const bersediaRef = useRef(null);
+  const categoryProdukRef = useRef(null);
+  const tempoLimitRef = useRef(null);
+  useEffect(() => {
+    const loadIndustries = async () => {
+      if (!isFormValid) {
+        const options = {
+          behavior: 'smooth',
+          block: 'center',
+        };
+        if (errors.name && nameRef.current) {
+          nameRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.industry_id && industry_idRef.current) {
+          industry_idRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.street && streetRef.current) {
+          streetRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.state && stateRef.current) {
+          stateRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.city && cityRef.current) {
+          cityRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.zip && zipRef.current) {
+          zipRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.mobile && mobileRef.current) {
+          mobileRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.bankName && bankNameRef.current) {
+          bankNameRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.accountName && accountNameRef.current) {
+          accountNameRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.accountNumber && accountNumberRef.current) {
+          accountNumberRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.estimasi && estimasiRef.current) {
+          estimasiRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.tempoDuration && tempoDurationRef.current) {
+          tempoDurationRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.bersedia && bersediaRef.current) {
+          bersediaRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.categoryProduk && categoryProdukRef.current) {
+          categoryProdukRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.tempoLimit && tempoLimitRef.current) {
+          tempoLimitRef.current.scrollIntoView(options);
+          return;
+        }
+      }
+    };
+    loadIndustries();
+  }, [buttonSubmitClick, chekValid]);
   return (
     <>
       <div className='flex justify-start'>
         <h1>Informasi Perusahaan</h1>
       </div>
-      <form
-        onSubmit={handleSubmit(onSubmitHandler)}
-        className='flex mt-4 flex-col w-full '
-      >
+      <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>
@@ -163,22 +256,27 @@ const informasiPerusahaan = ({}) => {
             </div>
             <div className='w-3/5'>
               <input
-                {...register('name')}
+                id='name'
+                name='name'
                 placeholder='Masukkan nama perusahaan'
                 type='text'
                 className='form-input'
-                aria-invalid={errors.name?.message}
+                aria-invalid={errors.name}
+                ref={nameRef}
+                onChange={handleInputChange}
               />
               <span className='text-xs opacity-60'>
                 Format: PT. INDOTEKNIK DOTCOM GEMILANG
               </span>
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.name?.message}
-              </div>
+              {chekValid && (
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.name}
+                </div>
+              )}
             </div>
           </div>
           <div className='flex flex-row  justify-between items-start'>
-            <div>
+            <div ref={industry_idRef}>
               <label className='form-label w-2/5 text-nowrap'>Industri</label>
               <span className='text-xs opacity-60'>
                 isi detail perusahaan sesuai dengan nama yang terdaftar
@@ -186,7 +284,7 @@ const informasiPerusahaan = ({}) => {
             </div>
             <div className='w-3/5'>
               <Controller
-                {...register('industry_id')}
+                name='industry_id'
                 control={control}
                 render={(props) => (
                   <HookFormSelect
@@ -201,9 +299,11 @@ const informasiPerusahaan = ({}) => {
                   Kategori : {selectedCategory}
                 </span>
               )}
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.industry_id?.message}
-              </div>
+              {chekValid && (
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.industry_id}
+                </div>
+              )}
             </div>
           </div>
 
@@ -219,17 +319,22 @@ const informasiPerusahaan = ({}) => {
             <div className='w-3/5 flex gap-3 flex-col'>
               <div>
                 <input
-                  {...register('street')}
+                  id='street'
+                  name='street'
+                  ref={streetRef}
                   placeholder='Masukkan alamat lengkap perusahaan'
                   type='text'
                   className='form-input'
+                  onChange={handleInputChange}
                 />
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.street?.message}
-                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.street}
+                  </div>
+                )}
               </div>
               <div className='sub-alamat flex flex-row w-full gap-3'>
-                <div className='w-2/5'>
+                <div className='w-2/5' ref={stateRef}>
                   <Controller
                     name='state'
                     control={control}
@@ -241,11 +346,13 @@ const informasiPerusahaan = ({}) => {
                       />
                     )}
                   />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.state?.message}
-                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.state}
+                    </div>
+                  )}
                 </div>
-                <div className='w-1/3'>
+                <div className='w-1/3' ref={cityRef}>
                   <Controller
                     name='city'
                     control={control}
@@ -258,20 +365,27 @@ const informasiPerusahaan = ({}) => {
                       />
                     )}
                   />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.city?.message}
-                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.city}
+                    </div>
+                  )}
                 </div>
                 <div className='w-1/3'>
                   <input
-                    {...register('zip')}
+                    id='zip'
+                    name='zip'
+                    ref={zipRef}
                     placeholder='Kode Pos'
                     type='number'
                     className='form-input'
+                    onChange={handleInputChange}
                   />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.zip?.message}
-                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.zip}
+                    </div>
+                  )}
                 </div>
               </div>
             </div>
@@ -287,15 +401,20 @@ const informasiPerusahaan = ({}) => {
             </div>
             <div className='w-3/5'>
               <input
-                {...register('mobile')}
+                id='mobile'
+                name='mobile'
+                ref={mobileRef}
                 placeholder='Masukkan nomor telfon perusahaan'
                 type='text'
                 className='form-input'
-                aria-invalid={errors.mobile?.message}
+                aria-invalid={errors.mobile}
+                onChange={handleInputChange}
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.mobile?.message}
-              </div>
+              {chekValid && (
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.mobile}
+                </div>
+              )}
             </div>
           </div>
 
@@ -309,41 +428,56 @@ const informasiPerusahaan = ({}) => {
             <div className='w-3/5 flex gap-3 flex-row'>
               <div>
                 <input
-                  {...register('bankName')}
+                  id='bankName'
+                  name='bankName'
+                  ref={bankNameRef}
                   placeholder='Nama bank'
                   type='text'
                   className='form-input'
+                  onChange={handleInputChange}
                 />
                 <span className='text-xs opacity-60'>
                   Format: BCA, Mandiri, CIMB, BNI dll
                 </span>
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.bankName?.message}
-                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.bankName}
+                  </div>
+                )}
               </div>
               <div>
                 <input
-                  {...register('accountName')}
+                  id='accountName'
+                  name='accountName'
+                  ref={accountNameRef}
                   placeholder='Nama Rekening'
                   type='text'
                   className='form-input'
+                  onChange={handleInputChange}
                 />
                 <span className='text-xs opacity-60'>Format: John Doe</span>
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.accountName?.message}
-                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.accountName}
+                  </div>
+                )}
               </div>
               <div>
                 <input
-                  {...register('accountNumber')}
+                  id='accountNumber'
+                  name='accountNumber'
+                  ref={accountNumberRef}
                   placeholder='Nomor Rekening Bank'
                   type='text'
                   className='form-input'
+                  onChange={handleInputChange}
                 />
                 <span className='text-xs opacity-60'>Format: 01234567896</span>
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.accountNumber?.message}
-                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.accountNumber}
+                  </div>
+                )}
               </div>
             </div>
           </div>
@@ -353,16 +487,15 @@ const informasiPerusahaan = ({}) => {
               <label className='form-label w-2/5 text-nowrap'>
                 Website <span className=' opacity-60'>(Opsional)</span>
               </label>
-              <span className='text-xs opacity-60'>
-                isi no telfon perusahaan yang sesuai
-              </span>
             </div>
             <div className='w-3/5'>
               <input
-                {...register('website')}
+                id='website'
+                name='website'
                 placeholder='www.indoteknik.com'
                 type='text'
                 className='form-input'
+                onChange={handleInputChange}
               />
             </div>
           </div>
@@ -376,19 +509,24 @@ const informasiPerusahaan = ({}) => {
             <div className='w-3/5'>
               <div className='relative'>
                 <input
-                  {...register('estimasi', {
-                    setValueAs: (value) => value.replace(/^Rp\s*/, ''), // Menyimpan hanya angka
-                  })}
+                  id='estimasi'
+                  name='estimasi'
+                  ref={estimasiRef}
+                  // {...register('estimasi', {
+                  //   setValueAs: (value) => value.replace(/^Rp\s*/, ''), // Menyimpan hanya angka
+                  // })}
                   placeholder='Isi estimasi pembelian produk pertahun'
                   type='text'
                   className='form-input' // padding untuk memberi ruang untuk "RP"
-                  value={formatRupiah(estimasiValue)} // Menampilkan nilai terformat
+                  value={formatRupiah(form.estimasi)}
                   onChange={handleChange} // Mengatur perubahan input
                 />
               </div>
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.estimasi?.message}
-              </div>
+              {chekValid && (
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.estimasi}
+                </div>
+              )}
             </div>
           </div>
 
@@ -402,7 +540,7 @@ const informasiPerusahaan = ({}) => {
               </span>
             </div>
             <div className='w-3/5 flex flex-row items-center'>
-              <div className='w-1/5 '>
+              <div className='w-1/5' ref={tempoDurationRef}>
                 <RadioGroup
                   onChange={onChangeTempoDuration}
                   // value={selectedValue}
@@ -419,6 +557,11 @@ const informasiPerusahaan = ({}) => {
                     </Radio>
                   </Stack>
                 </RadioGroup>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.tempoDuration}
+                  </div>
+                )}
               </div>
               <div className='w-4/5 flex flex-row justify-between items-center '>
                 <div>
@@ -429,10 +572,13 @@ const informasiPerusahaan = ({}) => {
                     Ajukan nilai limit yang anda mau
                   </span>
                 </div>
-                <div className='flex items-center'>
+                <div
+                  className='flex flex-col justify-start items-start'
+                  ref={tempoLimitRef}
+                >
                   <RadioGroup
                     onChange={onChangeTempoLimit}
-                    className='flex items-center justify-between'
+                    className='flex items-center justify-between '
                   >
                     <Stack direction='row' className=''>
                       {/* Kolom 1 */}
@@ -472,24 +618,20 @@ const informasiPerusahaan = ({}) => {
                             onChange={(e) => {
                               const value = e.target.value;
                               const formattedValue = formatRupiah(value);
-                              setValue('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form
+                              updateForm('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form
                             }}
                           />
                         </div>
                       </Stack>
                     </Stack>
                   </RadioGroup>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.tempoLimit}
+                    </div>
+                  )}
                 </div>
               </div>
-              {/* <input
-                {...register('tempoDuration')}
-                placeholder='Nomor Rekening Bank'
-                type='text'
-                className='form-input'
-              /> */}
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.tempoDuration?.message}
-              </div>
             </div>
           </div>
 
@@ -507,13 +649,13 @@ const informasiPerusahaan = ({}) => {
                 Pilih produk bisa lebih dari 1
               </span>
             </div>
-            <div className='w-3/5 flex justify-start'>
-              <div className='flex gap-x-4'>
+            <div className='w-3/5 flex flex-col justify-start'>
+              <div className='flex gap-x-4' ref={bersediaRef}>
                 <Checkbox
                   borderColor='gray.600'
                   colorScheme='red'
-                  isChecked={bersedia}
-                  onChange={handleBersediaChange}
+                  isChecked={bersedia === true} // Checked when bersedia is true
+                  onChange={() => handleCheckboxBersediaChange('bersedia')}
                   value={true}
                   size='md'
                 >
@@ -522,17 +664,19 @@ const informasiPerusahaan = ({}) => {
                 <Checkbox
                   borderColor='gray.600'
                   colorScheme='red'
-                  isChecked={!bersedia}
-                  onChange={handleBersediaChange}
+                  isChecked={bersedia === false} // Checked when bersedia is false
+                  onChange={() => handleCheckboxBersediaChange('tidakBersedia')}
                   value={false}
                   size='md'
                 >
                   Tidak bersedia
                 </Checkbox>
               </div>
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.estimasi?.message}
-              </div>
+              {chekValid && (
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.estimasi}
+                </div>
+              )}
             </div>
           </div>
 
@@ -545,80 +689,40 @@ const informasiPerusahaan = ({}) => {
                 Pilih produk bisa lebih dari 1
               </span>
             </div>
-            <div className='w-3/5 flex flex-row justify-between'>
-              <div className='flex flex-col gap-2'>
-                {firstColumn.map((item) => (
-                  <Checkbox
-                    key={item.id}
-                    onChange={() => handleCheckboxChange(item.id)}
-                  >
-                    {item.name}
-                  </Checkbox>
-                ))}
-              </div>
-              <div className='flex flex-col gap-2'>
-                {secondColumn.map((item) => (
-                  <Checkbox
-                    key={item.id}
-                    onChange={() => handleCheckboxChange(item.id)}
-                  >
-                    {item.name}
-                  </Checkbox>
-                ))}
+            <div className='w-3/5 flex flex-col'>
+              <div className='flex flex-row justify-between'>
+                <div className='flex flex-col gap-2' ref={categoryProdukRef}>
+                  {firstColumn.map((item) => (
+                    <Checkbox
+                      key={item.id}
+                      onChange={() => handleCheckboxChange(item.id)}
+                    >
+                      {item.name}
+                    </Checkbox>
+                  ))}
+                </div>
+                <div className='flex flex-col gap-2'>
+                  {secondColumn.map((item) => (
+                    <Checkbox
+                      key={item.id}
+                      onChange={() => handleCheckboxChange(item.id)}
+                    >
+                      {item.name}
+                    </Checkbox>
+                  ))}
+                </div>
               </div>
+              {chekValid && (
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.categoryProduk}
+                </div>
+              )}
             </div>
           </div>
-          <div className='flex flex-row justify-end items-center gap-4 mb-8'>
-            <span className='text-xs opacity-60'>
-              *Pastikan data yang anda masukan sudah benar dan sesuai
-            </span>
-            <button
-              type='submit'
-              className='bg-red-600 border border-red-600 rounded-md text-sm text-white w-28 h-11 mb-1 content-center flex flex-row justify-center items-center'
-            >
-              <p>Selanjutnya</p>
-            </button>
-          </div>
         </div>
       </form>
     </>
   );
 };
 
-const validationSchema = Yup.object().shape({
-  // email: Yup.string()
-  //   .email('Format harus seperti contoh@email.com')
-  //   .required('Harus di-isi'),
-  name: Yup.string().required('Harus di-isi'),
-  industry_id: Yup.string().required('Harus di-pilih'),
-  street: Yup.string().required('Harus di-isi'),
-  zip: Yup.string().required('Harus di-isi'),
-  state: Yup.string().required('Harus di-pilih'),
-  city: Yup.string().required('Harus di-pilih'),
-  mobile: Yup.string().required('Harus di-isi'),
-  bankName: Yup.string().required('Harus di-isi'),
-  accountName: Yup.string().required('Harus di-isi'),
-  accountNumber: Yup.string().required('Harus di-isi'),
-  estimasi: Yup.string().required('Harus di-isi'),
-  tempoDuration: Yup.string().required('Harus di-isi'),
-  bersedia: Yup.string().required('Harus di-pilih'),
-});
-
-const defaultValues = {
-  // email: '',
-  name: '',
-  industry_id: '',
-  street: '',
-  state: '',
-  city: '',
-  zip: '',
-  mobile: '',
-  bankName: '',
-  accountName: '',
-  accountNumber: '',
-  estimasi: '',
-  tempoDuration: '',
-  bersedia: '',
-};
-
 export default informasiPerusahaan;
-- 
cgit v1.2.3


From 0908fc0075f91844ffed4002165c638d02eb91be Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 17 Oct 2024 16:01:50 +0700
Subject: <iman> update pengajuan tempo

---
 src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 82cf4aee..d2097849 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -126,7 +126,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
     } else if (value === 'tidakBersedia') {
       setBersedia(false);
     }
-    updateForm('bersedia', value === 'bersedia');
+    updateForm('bersedia', `${value === 'bersedia'}`);
     validate();
   };
   const [selectedIds, setSelectedIds] = useState([]);
-- 
cgit v1.2.3


From ead46a6d760850530946926b390a8954ca64e1c2 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 17 Oct 2024 17:06:58 +0700
Subject: <iman> update pengajuan tempo

---
 src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index d2097849..0a33f5fb 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -241,7 +241,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
   return (
     <>
       <div className='flex justify-start'>
-        <h1>Informasi Perusahaan</h1>
+        <h1 className='font-bold'>Informasi Perusahaan</h1>
       </div>
       <form className='flex mt-4 flex-col w-full '>
         <div className='w-full grid grid-row-2 gap-5'>
-- 
cgit v1.2.3


From 661d742193b62aeb3d2a2350433bdd3714667625 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 18 Oct 2024 10:39:40 +0700
Subject: <iman> add kontak perusahaan

---
 src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 0a33f5fb..e5b2ff2c 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -405,7 +405,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 name='mobile'
                 ref={mobileRef}
                 placeholder='Masukkan nomor telfon perusahaan'
-                type='text'
+                type='tel'
                 className='form-input'
                 aria-invalid={errors.mobile}
                 onChange={handleInputChange}
-- 
cgit v1.2.3


From b884ae8fb7b3d208912f75decfe941435c59d571 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 18 Oct 2024 11:25:02 +0700
Subject: <iman> save to local storage

---
 src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index e5b2ff2c..a7d170e9 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -262,6 +262,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 type='text'
                 className='form-input'
                 aria-invalid={errors.name}
+                value={form.name}
                 ref={nameRef}
                 onChange={handleInputChange}
               />
@@ -324,6 +325,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   ref={streetRef}
                   placeholder='Masukkan alamat lengkap perusahaan'
                   type='text'
+                  value={form.street}
                   className='form-input'
                   onChange={handleInputChange}
                 />
@@ -378,6 +380,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                     ref={zipRef}
                     placeholder='Kode Pos'
                     type='number'
+                    value={form.zip}
                     className='form-input'
                     onChange={handleInputChange}
                   />
@@ -406,6 +409,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 ref={mobileRef}
                 placeholder='Masukkan nomor telfon perusahaan'
                 type='tel'
+                value={form.mobile}
                 className='form-input'
                 aria-invalid={errors.mobile}
                 onChange={handleInputChange}
@@ -433,6 +437,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   ref={bankNameRef}
                   placeholder='Nama bank'
                   type='text'
+                  value={form.bankName}
                   className='form-input'
                   onChange={handleInputChange}
                 />
@@ -452,6 +457,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   ref={accountNameRef}
                   placeholder='Nama Rekening'
                   type='text'
+                  value={form.accountName}
                   className='form-input'
                   onChange={handleInputChange}
                 />
@@ -469,6 +475,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   ref={accountNumberRef}
                   placeholder='Nomor Rekening Bank'
                   type='text'
+                  value={form.accountNumber}
                   className='form-input'
                   onChange={handleInputChange}
                 />
@@ -494,6 +501,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 name='website'
                 placeholder='www.indoteknik.com'
                 type='text'
+                value={form.website}
                 className='form-input'
                 onChange={handleInputChange}
               />
-- 
cgit v1.2.3


From 87ffd2fa7edc240693ddd81401ef23c5cd1bbb3e Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 18 Oct 2024 16:11:17 +0700
Subject: <iman> update fix kontak person

---
 .../component/informasiPerusahaan.jsx              | 173 +++++++++++++++------
 1 file changed, 127 insertions(+), 46 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

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}
-- 
cgit v1.2.3


From c61477111b95d83a9b862f242923b911364f3612 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 19 Oct 2024 11:49:38 +0700
Subject: <iman> fix section pengiriman

---
 src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

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)}
-- 
cgit v1.2.3


From c19c7eee924b70d25cb47d40fd7c8e00d5efa867 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 23 Oct 2024 17:07:37 +0700
Subject: <iman> update pengajuan tempo section konfirmasi

---
 .../component/informasiPerusahaan.jsx              | 364 ++++++++++++++-------
 1 file changed, 238 insertions(+), 126 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 6651dca8..53181027 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -6,7 +6,11 @@ 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 { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
-const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
+const informasiPerusahaan = ({
+  chekValid,
+  buttonSubmitClick,
+  isKonfirmasi,
+}) => {
   const { control, watch, setValue, getValues } = useForm();
   const { form, errors, validate, updateForm } = usePengajuanTempoStore();
   const [industries, setIndustries] = useState([]);
@@ -292,20 +296,20 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
     }
   }, [form]);
   return (
-    <>
-      <div className='flex justify-start'>
-        <h1 className='font-bold'>Informasi Perusahaan</h1>
-      </div>
-      <form className='flex mt-4 flex-col w-full '>
+    <div className=''>
+      <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
+        Informasi Perusahaan
+      </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>
-              <label className='form-label w-2/5 text-nowrap'>
-                Nama Perusahaan
-              </label>
-              <span className='text-xs opacity-60'>
-                isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
-              </span>
+            <div className='w-2/5'>
+              <label className='form-label  text-nowrap'>Nama Perusahaan</label>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <input
@@ -319,9 +323,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 ref={nameRef}
                 onChange={handleInputChange}
               />
-              <span className='text-xs opacity-60'>
-                Format: PT. INDOTEKNIK DOTCOM GEMILANG
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  Format: PT. INDOTEKNIK DOTCOM GEMILANG
+                </span>
+              )}
               {chekValid && (
                 <div className='text-caption-2 text-danger-500 mt-1'>
                   {errors.name}
@@ -330,11 +336,13 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
             </div>
           </div>
           <div className='flex flex-row  justify-between items-start'>
-            <div ref={industry_idRef}>
-              <label className='form-label w-2/5 text-nowrap'>Industri</label>
-              <span className='text-xs opacity-60'>
-                isi detail perusahaan sesuai dengan nama yang terdaftar
-              </span>
+            <div className='w-2/5' ref={industry_idRef}>
+              <label className='form-label  text-nowrap'>Industri</label>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi detail perusahaan sesuai dengan nama yang terdaftar
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <Controller
@@ -348,7 +356,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   />
                 )}
               />
-              {selectedCategory && (
+              {!isKonfirmasi && selectedCategory && (
                 <span className='text-gray_r-11 text-xs opacity-60'>
                   Kategori : {selectedCategory}
                 </span>
@@ -366,9 +374,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
               <label className='form-label w-2/5 text-nowrap'>
                 Alamat Perusahaan
               </label>
-              <span className='text-xs opacity-60'>
-                alamat sesuai dengan alamat kantor pusat
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  alamat sesuai dengan alamat kantor pusat
+                </span>
+              )}
             </div>
             <div className='w-3/5 flex gap-3 flex-col'>
               <div>
@@ -451,9 +461,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
               <label className='form-label w-2/5 text-nowrap'>
                 No. Telfon Perusahaan
               </label>
-              <span className='text-xs opacity-60'>
-                isi no telfon perusahaan yang sesuai
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi no telfon perusahaan yang sesuai
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <input
@@ -478,9 +490,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           <div className='flex flex-row  justify-between items-start'>
             <div>
               <label className='form-label w-2/5 text-nowrap'>Data Bank</label>
-              <span className='text-xs opacity-60'>
-                Isi detail data bank perusahaan anda
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  Isi detail data bank perusahaan anda
+                </span>
+              )}
             </div>
             <div className='w-3/5 flex gap-3 flex-row'>
               <div>
@@ -494,9 +508,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   className='form-input'
                   onChange={handleInputChange}
                 />
-                <span className='text-xs opacity-60'>
-                  Format: BCA, Mandiri, CIMB, BNI dll
-                </span>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>
+                    Format: BCA, Mandiri, CIMB, BNI dll
+                  </span>
+                )}
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errors.bankName}
@@ -514,7 +530,9 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   className='form-input'
                   onChange={handleInputChange}
                 />
-                <span className='text-xs opacity-60'>Format: John Doe</span>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>Format: John Doe</span>
+                )}
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errors.accountName}
@@ -532,7 +550,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   className='form-input'
                   onChange={handleInputChange}
                 />
-                <span className='text-xs opacity-60'>Format: 01234567896</span>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>
+                    Format: 01234567896
+                  </span>
+                )}
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errors.accountNumber}
@@ -592,10 +614,8 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-center'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Durasi Tempo
-              </label>
+            <div className='w-2/5'>
+              <label className='form-label text-nowrap'>Durasi Tempo</label>
               <span className='text-xs opacity-60'>
                 Pilih durasi tempo yang anda inginkan
               </span>
@@ -624,102 +644,188 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   </div>
                 )}
               </div>
-              <div className='w-4/5 flex flex-row justify-between items-center'>
-                <div>
-                  <label className='form-label w-2/5 text-nowrap'>
-                    Limit Tempo
-                  </label>
-                  <span className='text-xs opacity-60'>
-                    Ajukan nilai limit yang anda mau
-                  </span>
-                </div>
-                <div
-                  className='flex flex-col justify-start items-start'
-                  ref={tempoLimitRef}
-                >
-                  <RadioGroup
-                    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}
+              {!isKonfirmasi && (
+                <div className='w-4/5 flex flex-row justify-between items-center'>
+                  <div>
+                    <label className='form-label w-2/5 text-nowrap'>
+                      Limit Tempo
+                    </label>
+                    <span className='text-xs opacity-60'>
+                      Ajukan nilai limit yang anda mau
+                    </span>
+                  </div>
+                  <div
+                    className='flex flex-col justify-start items-start'
+                    ref={tempoLimitRef}
                   >
-                    <Stack direction='row'>
-                      {/* Kolom 1 */}
-                      <Stack direction='column' spacing={2} className='mr-4'>
-                        {radioOptions.slice(0, 4).map((option) => (
-                          <Radio
-                            key={option.value}
-                            colorScheme='red'
-                            value={option.value}
-                          >
-                            {option.label}
-                          </Radio>
-                        ))}
-                      </Stack>
+                    <RadioGroup
+                      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'>
+                        {/* Kolom 1 */}
+                        <Stack direction='column' spacing={2} className='mr-4'>
+                          {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}>
-                        {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>
+                        {/* Kolom 2 */}
+                        <Stack direction='column' className='ml-8' spacing={2}>
+                          {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(tempoLimitValueEx)} // Menampilkan nilai terformat
-                            onChange={(e) => {
-                              const value = e.target.value;
-                              const formattedValue = formatRupiah(value);
-                              setTempoLimitValueEx(formattedValue);
-                              updateForm(
-                                'tempoLimit',
-                                formattedValue.replace(/^Rp\s*/, '')
-                              ); // Mengupdate nilai di react-hook-form
-                            }}
-                          />
-                        </div>
+                            <input
+                              placeholder='Isi limit yang anda inginkan'
+                              type='text'
+                              className='border ml-2 p-1' // padding untuk memberi ruang untuk "RP"
+                              value={formatRupiah(tempoLimitValueEx)} // Menampilkan nilai terformat
+                              onChange={(e) => {
+                                const value = e.target.value;
+                                const formattedValue = formatRupiah(value);
+                                setTempoLimitValueEx(formattedValue);
+                                updateForm(
+                                  'tempoLimit',
+                                  formattedValue.replace(/^Rp\s*/, '')
+                                ); // Mengupdate nilai di react-hook-form
+                              }}
+                            />
+                          </div>
+                        </Stack>
                       </Stack>
-                    </Stack>
-                  </RadioGroup>
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.tempoLimit}
-                    </div>
-                  )}
+                    </RadioGroup>
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.tempoLimit}
+                      </div>
+                    )}
+                  </div>
                 </div>
-              </div>
+              )}
             </div>
           </div>
+          {isKonfirmasi && (
+            <div className='flex flex-row justify-between items-center'>
+              <div className='w-2/5'>
+                <label className='form-label w-2/5 text-nowrap'>
+                  Limit Tempo
+                </label>
+                <span className='text-xs opacity-60'>
+                  Ajukan nilai limit yang anda mau
+                </span>
+              </div>
+              <div
+                className='w-3/5 flex flex-col justify-start items-start'
+                ref={tempoLimitRef}
+              >
+                <RadioGroup
+                  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'>
+                    {/* Kolom 1 */}
+                    <Stack direction='column' spacing={2} className='mr-4'>
+                      {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}>
+                      {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(tempoLimitValueEx)} // Menampilkan nilai terformat
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            const formattedValue = formatRupiah(value);
+                            setTempoLimitValueEx(formattedValue);
+                            updateForm(
+                              'tempoLimit',
+                              formattedValue.replace(/^Rp\s*/, '')
+                            ); // Mengupdate nilai di react-hook-form
+                          }}
+                        />
+                      </div>
+                    </Stack>
+                  </Stack>
+                </RadioGroup>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.tempoLimit}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
 
           <div className='text-red-500'>
             *Durasi dan limit dapat berbeda sesuaui dengan verifikasi oleh tim
             Indoteknik.com
           </div>
 
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+          <div className='flex flex-row justify-between items-start'>
+            <div className='w-2/5'>
+              <label className='form-label  text-wrap '>
                 Apakah bersedia transaksi via website?
               </label>
-              <span className='text-xs opacity-60'>
-                Pilih produk bisa lebih dari 1
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  Pilih produk bisa lebih dari 1
+                </span>
+              )}
             </div>
             <div className='w-3/5 flex flex-col justify-start'>
               <div className='flex gap-x-4' ref={bersediaRef}>
@@ -767,14 +873,20 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
             </div>
           </div>
 
-          <div className='flex flex-row  justify-between items-start'>
+          <div
+            className={`flex flex-row  justify-between ${
+              isKonfirmasi ? 'items-center' : 'items-start'
+            }`}
+          >
             <div>
               <label className='form-label w-2/5 text-nowrap'>
                 Kategori Produk yang Digunakan
               </label>
-              <span className='text-xs opacity-60'>
-                Pilih produk bisa lebih dari 1
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  Pilih produk bisa lebih dari 1
+                </span>
+              )}
             </div>
             <div className='w-3/5 flex flex-col'>
               <div className='flex flex-row justify-between'>
@@ -812,7 +924,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           </div>
         </div>
       </form>
-    </>
+    </div>
   );
 };
 
-- 
cgit v1.2.3


From b5701645ce23deed5e32afc4a0f98bd523c6c92c Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 31 Oct 2024 13:58:23 +0700
Subject: <iman> update pengajuan tempo

---
 .../component/informasiPerusahaan.jsx              | 24 +++++++++++-----------
 1 file changed, 12 insertions(+), 12 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 53181027..95379fc2 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -19,18 +19,18 @@ const informasiPerusahaan = ({
   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' },
+    { id: 2040, name: 'Pengaman, Kesehatan & Keamanan' },
+    { id: 2097, name: 'Perkakas Tangan, Listrik & Pneumatic' },
+    { id: 2161, name: 'Mesin Industrial' },
+    { id: 2222, name: 'Mesin Pertanian & Perkebunan' },
+    { id: 2246, name: 'Mesin Pembersih & Janitorial' },
+    { id: 2273, name: 'Cairan Berbahan Kimia' },
+    { id: 2315, name: 'Perlengkapan Pengukuran & Pengujian' },
+    { id: 2354, name: 'Peralatan Listrik & Elektronik' },
+    { id: 2394, name: 'Perlengkapan Logistik & Gudang' },
+    { id: 2420, name: 'Peralatan Kantor & Stationery' },
+    { id: 2445, name: 'Komponen & Aksesoris' },
+    { id: 2477, name: 'Peralatan Horeca & Food Service' },
   ];
   const radioOptions = [
     { label: '5.000.000', value: '5000000' },
-- 
cgit v1.2.3


From 37ab7c5ac682e3a2ddb4153d4f7cb91593a77fe4 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 31 Oct 2024 16:39:11 +0700
Subject: <iman> update code

---
 src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 95379fc2..5c58a789 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -6,7 +6,7 @@ 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 { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
-const informasiPerusahaan = ({
+const InformasiPerusahaan = ({
   chekValid,
   buttonSubmitClick,
   isKonfirmasi,
@@ -928,4 +928,4 @@ const informasiPerusahaan = ({
   );
 };
 
-export default informasiPerusahaan;
+export default InformasiPerusahaan;
-- 
cgit v1.2.3


From 5e3b8914037fcd7b5153d94f289079ac4dd60235 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 1 Nov 2024 09:35:35 +0700
Subject: <iman> update pengajuan tempo

---
 .../component/informasiPerusahaan.jsx              | 36 +++++++++-------------
 1 file changed, 14 insertions(+), 22 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 5c58a789..87e48d4d 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -370,10 +370,8 @@ const InformasiPerusahaan = ({
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Alamat Perusahaan
-              </label>
+            <div className='w-2/5 text-nowrap'>
+              <label className='form-label '>Alamat Perusahaan</label>
               {!isKonfirmasi && (
                 <span className='text-xs opacity-60'>
                   alamat sesuai dengan alamat kantor pusat
@@ -457,10 +455,8 @@ const InformasiPerusahaan = ({
             </div>
           </div>
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                No. Telfon Perusahaan
-              </label>
+            <div className='w-2/5 text-nowrap'>
+              <label className='form-label '>No. Telfon Perusahaan</label>
               {!isKonfirmasi && (
                 <span className='text-xs opacity-60'>
                   isi no telfon perusahaan yang sesuai
@@ -488,8 +484,8 @@ const InformasiPerusahaan = ({
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>Data Bank</label>
+            <div className=' w-2/5 text-nowrap'>
+              <label className='form-label'>Data Bank</label>
               {!isKonfirmasi && (
                 <span className='text-xs opacity-60'>
                   Isi detail data bank perusahaan anda
@@ -565,8 +561,8 @@ const InformasiPerusahaan = ({
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+            <div className='w-2/5 text-nowrap'>
+              <label className='form-label '>
                 Website <span className=' opacity-60'>(Opsional)</span>
               </label>
             </div>
@@ -584,10 +580,8 @@ const InformasiPerusahaan = ({
           </div>
 
           <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Estimasi Pembelian pertahun
-              </label>
+            <div className='w-2/5 text-nowrap'>
+              <label className='form-label '>Estimasi Pembelian pertahun</label>
             </div>
             <div className='w-3/5'>
               <div className='relative'>
@@ -646,10 +640,8 @@ const InformasiPerusahaan = ({
               </div>
               {!isKonfirmasi && (
                 <div className='w-4/5 flex flex-row justify-between items-center'>
-                  <div>
-                    <label className='form-label w-2/5 text-nowrap'>
-                      Limit Tempo
-                    </label>
+                  <div className='w-2/5 text-nowrap'>
+                    <label className='form-label '>Limit Tempo</label>
                     <span className='text-xs opacity-60'>
                       Ajukan nilai limit yang anda mau
                     </span>
@@ -878,8 +870,8 @@ const InformasiPerusahaan = ({
               isKonfirmasi ? 'items-center' : 'items-start'
             }`}
           >
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
+            <div className='w-2/5 text-nowrap'>
+              <label className='form-label '>
                 Kategori Produk yang Digunakan
               </label>
               {!isKonfirmasi && (
-- 
cgit v1.2.3


From 40c6631086d5bf632fb31427e8adf87de60282d3 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 2 Nov 2024 13:30:21 +0700
Subject: <iman> update mobile

---
 .../component/informasiPerusahaan.jsx              | 1320 +++++++++++++-------
 1 file changed, 875 insertions(+), 445 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 87e48d4d..90454083 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -6,11 +6,14 @@ 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 { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+import useDevice from '@/core/hooks/useDevice';
+import Divider from '@/core/components/elements/Divider/Divider';
 const InformasiPerusahaan = ({
   chekValid,
   buttonSubmitClick,
   isKonfirmasi,
 }) => {
+  const { isDesktop, isMobile } = useDevice();
   const { control, watch, setValue, getValues } = useForm();
   const { form, errors, validate, updateForm } = usePengajuanTempoStore();
   const [industries, setIndustries] = useState([]);
@@ -296,295 +299,902 @@ const InformasiPerusahaan = ({
     }
   }, [form]);
   return (
-    <div className=''>
-      <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
-        Informasi Perusahaan
-      </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 Perusahaan</label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
-                </span>
-              )}
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='name'
-                name='name'
-                placeholder='Masukkan nama perusahaan'
-                type='text'
-                className='form-input'
-                aria-invalid={errors.name}
-                value={form.name}
-                ref={nameRef}
-                onChange={handleInputChange}
-              />
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  Format: PT. INDOTEKNIK DOTCOM GEMILANG
-                </span>
-              )}
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.name}
+    <>
+      {isDesktop && (
+        <div className=''>
+          <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
+            Informasi Perusahaan
+          </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 Perusahaan
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
+                    </span>
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5' ref={industry_idRef}>
-              <label className='form-label  text-nowrap'>Industri</label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  isi detail perusahaan sesuai dengan nama yang terdaftar
-                </span>
-              )}
-            </div>
-            <div className='w-3/5'>
-              <Controller
-                name='industry_id'
-                control={control}
-                render={(props) => (
-                  <HookFormSelect
-                    {...props}
-                    options={industries}
-                    placeholder={'Pilih industri bisnis anda'}
+                <div className='w-3/5'>
+                  <input
+                    id='name'
+                    name='name'
+                    placeholder='Masukkan nama perusahaan'
+                    type='text'
+                    className='form-input'
+                    aria-invalid={errors.name}
+                    value={form.name}
+                    ref={nameRef}
+                    onChange={handleInputChange}
                   />
-                )}
-              />
-              {!isKonfirmasi && selectedCategory && (
-                <span className='text-gray_r-11 text-xs opacity-60'>
-                  Kategori : {selectedCategory}
-                </span>
-              )}
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.industry_id}
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      Format: PT. INDOTEKNIK DOTCOM GEMILANG
+                    </span>
+                  )}
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.name}
+                    </div>
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5 text-nowrap'>
-              <label className='form-label '>Alamat Perusahaan</label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  alamat sesuai dengan alamat kantor pusat
-                </span>
-              )}
-            </div>
-            <div className='w-3/5 flex gap-3 flex-col'>
-              <div>
-                <input
-                  id='street'
-                  name='street'
-                  ref={streetRef}
-                  placeholder='Masukkan alamat lengkap perusahaan'
-                  type='text'
-                  value={form.street}
-                  className='form-input'
-                  onChange={handleInputChange}
-                />
-                {chekValid && (
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.street}
-                  </div>
-                )}
               </div>
-              <div className='sub-alamat flex flex-row w-full gap-3'>
-                <div className='w-2/5' ref={stateRef}>
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5' ref={industry_idRef}>
+                  <label className='form-label  text-nowrap'>Industri</label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi detail perusahaan sesuai dengan nama yang terdaftar
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5'>
                   <Controller
-                    name='state'
+                    name='industry_id'
                     control={control}
                     render={(props) => (
                       <HookFormSelect
                         {...props}
-                        options={states}
-                        placeholder='Provinsi'
+                        options={industries}
+                        placeholder={'Pilih industri bisnis anda'}
                       />
                     )}
                   />
+                  {!isKonfirmasi && selectedCategory && (
+                    <span className='text-gray_r-11 text-xs opacity-60'>
+                      Kategori : {selectedCategory}
+                    </span>
+                  )}
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.state}
+                      {errors.industry_id}
                     </div>
                   )}
                 </div>
-                <div className='w-1/3' ref={cityRef}>
-                  <Controller
-                    name='city'
-                    control={control}
-                    render={(props) => (
-                      <HookFormSelect
-                        {...props}
-                        options={cities}
-                        disabled={!watchState}
-                        placeholder='Kota'
-                      />
+              </div>
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5 text-nowrap'>
+                  <label className='form-label '>Alamat Perusahaan</label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      alamat sesuai dengan alamat kantor pusat
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5 flex gap-3 flex-col'>
+                  <div>
+                    <input
+                      id='street'
+                      name='street'
+                      ref={streetRef}
+                      placeholder='Masukkan alamat lengkap perusahaan'
+                      type='text'
+                      value={form.street}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.street}
+                      </div>
                     )}
+                  </div>
+                  <div className='sub-alamat flex flex-row w-full gap-3'>
+                    <div className='w-2/5' ref={stateRef}>
+                      <Controller
+                        name='state'
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={states}
+                            placeholder='Provinsi'
+                          />
+                        )}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.state}
+                        </div>
+                      )}
+                    </div>
+                    <div className='w-1/3' ref={cityRef}>
+                      <Controller
+                        name='city'
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={cities}
+                            disabled={!watchState}
+                            placeholder='Kota'
+                          />
+                        )}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.city}
+                        </div>
+                      )}
+                    </div>
+                    <div className='w-1/3'>
+                      <input
+                        id='zip'
+                        name='zip'
+                        ref={zipRef}
+                        placeholder='Kode Pos'
+                        type='number'
+                        value={form.zip}
+                        className='form-input'
+                        onChange={handleInputChange}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.zip}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5 text-nowrap'>
+                  <label className='form-label '>No. Telfon Perusahaan</label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi no telfon perusahaan yang sesuai
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5'>
+                  <input
+                    id='mobile'
+                    name='mobile'
+                    ref={mobileRef}
+                    placeholder='Masukkan nomor telfon perusahaan'
+                    type='tel'
+                    value={form.mobile}
+                    className='form-input'
+                    aria-invalid={errors.mobile}
+                    onChange={handleInputChange}
                   />
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.city}
+                      {errors.mobile}
                     </div>
                   )}
                 </div>
-                <div className='w-1/3'>
+              </div>
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className=' w-2/5 text-nowrap'>
+                  <label className='form-label'>Data Bank</label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      Isi detail data bank perusahaan anda
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5 flex gap-3 flex-row'>
+                  <div>
+                    <input
+                      id='bankName'
+                      name='bankName'
+                      ref={bankNameRef}
+                      placeholder='Nama bank'
+                      type='text'
+                      value={form.bankName}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60'>
+                        Format: BCA, Mandiri, CIMB, BNI dll
+                      </span>
+                    )}
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.bankName}
+                      </div>
+                    )}
+                  </div>
+                  <div>
+                    <input
+                      id='accountName'
+                      name='accountName'
+                      ref={accountNameRef}
+                      placeholder='Nama Rekening'
+                      type='text'
+                      value={form.accountName}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60'>
+                        Format: John Doe
+                      </span>
+                    )}
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.accountName}
+                      </div>
+                    )}
+                  </div>
+                  <div>
+                    <input
+                      id='accountNumber'
+                      name='accountNumber'
+                      ref={accountNumberRef}
+                      placeholder='Nomor Rekening Bank'
+                      type='text'
+                      value={form.accountNumber}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60'>
+                        Format: 01234567896
+                      </span>
+                    )}
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.accountNumber}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5 text-nowrap'>
+                  <label className='form-label '>
+                    Website <span className=' opacity-60'>(Opsional)</span>
+                  </label>
+                </div>
+                <div className='w-3/5'>
                   <input
-                    id='zip'
-                    name='zip'
-                    ref={zipRef}
-                    placeholder='Kode Pos'
-                    type='number'
-                    value={form.zip}
+                    id='website'
+                    name='website'
+                    placeholder='www.indoteknik.com'
+                    type='text'
+                    value={form.website}
                     className='form-input'
                     onChange={handleInputChange}
                   />
+                </div>
+              </div>
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5 text-nowrap'>
+                  <label className='form-label '>
+                    Estimasi Pembelian pertahun
+                  </label>
+                </div>
+                <div className='w-3/5'>
+                  <div className='relative'>
+                    <input
+                      id='estimasi'
+                      name='estimasi'
+                      ref={estimasiRef}
+                      // {...register('estimasi', {
+                      //   setValueAs: (value) => value.replace(/^Rp\s*/, ''), // Menyimpan hanya angka
+                      // })}
+                      placeholder='Isi estimasi pembelian produk pertahun'
+                      type='text'
+                      className='form-input' // padding untuk memberi ruang untuk "RP"
+                      value={formatRupiah(form.estimasi)}
+                      onChange={handleChange} // Mengatur perubahan input
+                    />
+                  </div>
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.zip}
+                      {errors.estimasi}
                     </div>
                   )}
                 </div>
               </div>
-            </div>
-          </div>
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5 text-nowrap'>
-              <label className='form-label '>No. Telfon Perusahaan</label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  isi no telfon perusahaan yang sesuai
-                </span>
-              )}
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='mobile'
-                name='mobile'
-                ref={mobileRef}
-                placeholder='Masukkan nomor telfon perusahaan'
-                type='tel'
-                value={form.mobile}
-                className='form-input'
-                aria-invalid={errors.mobile}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.mobile}
+
+              <div className='flex flex-row  justify-between items-center'>
+                <div className='w-2/5'>
+                  <label className='form-label text-nowrap'>Durasi Tempo</label>
+                  <span className='text-xs opacity-60'>
+                    Pilih durasi tempo yang anda inginkan
+                  </span>
+                </div>
+                <div className='w-3/5 flex flex-row items-center'>
+                  <div className='w-1/5' ref={tempoDurationRef}>
+                    <RadioGroup
+                      onChange={onChangeTempoDuration}
+                      value={form.tempoDuration}
+                    >
+                      <Stack direction='column' className=''>
+                        <Radio colorScheme='red' value='7'>
+                          7 Hari
+                        </Radio>
+                        <Radio colorScheme='red' value='14' className=''>
+                          14 Hari
+                        </Radio>
+                        <Radio colorScheme='red' value='30' className=''>
+                          30 Hari
+                        </Radio>
+                      </Stack>
+                    </RadioGroup>
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.tempoDuration}
+                      </div>
+                    )}
+                  </div>
+                  {!isKonfirmasi && (
+                    <div className='w-4/5 flex flex-row justify-between items-center'>
+                      <div className='w-2/5 text-nowrap'>
+                        <label className='form-label '>Limit Tempo</label>
+                        <span className='text-xs opacity-60'>
+                          Ajukan nilai limit yang anda mau
+                        </span>
+                      </div>
+                      <div
+                        className='flex flex-col justify-start items-start'
+                        ref={tempoLimitRef}
+                      >
+                        <RadioGroup
+                          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'>
+                            {/* Kolom 1 */}
+                            <Stack
+                              direction='column'
+                              spacing={2}
+                              className='mr-4'
+                            >
+                              {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}
+                            >
+                              {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(tempoLimitValueEx)} // Menampilkan nilai terformat
+                                  onChange={(e) => {
+                                    const value = e.target.value;
+                                    const formattedValue = formatRupiah(value);
+                                    setTempoLimitValueEx(formattedValue);
+                                    updateForm(
+                                      'tempoLimit',
+                                      formattedValue.replace(/^Rp\s*/, '')
+                                    ); // Mengupdate nilai di react-hook-form
+                                  }}
+                                />
+                              </div>
+                            </Stack>
+                          </Stack>
+                        </RadioGroup>
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.tempoLimit}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+              {isKonfirmasi && (
+                <div className='flex flex-row justify-between items-center'>
+                  <div className='w-2/5'>
+                    <label className='form-label w-2/5 text-nowrap'>
+                      Limit Tempo
+                    </label>
+                    <span className='text-xs opacity-60'>
+                      Ajukan nilai limit yang anda mau
+                    </span>
+                  </div>
+                  <div
+                    className='w-3/5 flex flex-col justify-start items-start'
+                    ref={tempoLimitRef}
+                  >
+                    <RadioGroup
+                      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'>
+                        {/* Kolom 1 */}
+                        <Stack direction='column' spacing={2} className='mr-4'>
+                          {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}>
+                          {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(tempoLimitValueEx)} // Menampilkan nilai terformat
+                              onChange={(e) => {
+                                const value = e.target.value;
+                                const formattedValue = formatRupiah(value);
+                                setTempoLimitValueEx(formattedValue);
+                                updateForm(
+                                  'tempoLimit',
+                                  formattedValue.replace(/^Rp\s*/, '')
+                                ); // Mengupdate nilai di react-hook-form
+                              }}
+                            />
+                          </div>
+                        </Stack>
+                      </Stack>
+                    </RadioGroup>
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.tempoLimit}
+                      </div>
+                    )}
+                  </div>
                 </div>
               )}
+
+              <div className='text-red-500'>
+                *Durasi dan limit dapat berbeda sesuai dengan verifikasi oleh
+                tim Indoteknik.com
+              </div>
+
+              <div className='flex flex-row justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-wrap '>
+                    Apakah bersedia transaksi via website?
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      Pilih produk bisa lebih dari 1
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5 flex flex-col justify-start'>
+                  <div className='flex gap-x-4' ref={bersediaRef}>
+                    <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
+                  onChange={() => handleCheckboxBersediaChange('bersedia')}
+                  value={true}
+                  size='md'
+                >
+                  Saya bersedia
+                </Checkbox>
+                <Checkbox
+                  name='bersedia'
+                  borderColor='gray.600'
+                  colorScheme='red'
+                  isChecked={bersedia === false} // Checked when bersedia is false
+                  onChange={() => handleCheckboxBersediaChange('tidakBersedia')}
+                  value={false}
+                  size='md'
+                >
+                  Tidak bersedia
+                </Checkbox> */}
+                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.estimasi}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div
+                className={`flex flex-row  justify-between ${
+                  isKonfirmasi ? 'items-center' : 'items-start'
+                }`}
+              >
+                <div className='w-2/5 text-nowrap'>
+                  <label className='form-label '>
+                    Kategori Produk yang Digunakan
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      Pilih produk bisa lebih dari 1
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5 flex flex-col'>
+                  <div className='flex flex-row justify-between'>
+                    <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)}
+                        >
+                          {item.name}
+                        </Checkbox>
+                      ))}
+                    </div>
+                    <div className='flex flex-col gap-2'>
+                      {secondColumn.map((item) => (
+                        <Checkbox
+                          colorScheme='red'
+                          key={item.id}
+                          isChecked={isChecked(item.id)}
+                          onChange={() => handleCheckboxChange(item.id)}
+                        >
+                          {item.name}
+                        </Checkbox>
+                      ))}
+                    </div>
+                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.categoryProduk}
+                    </div>
+                  )}
+                </div>
+              </div>
             </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div className=' w-2/5 text-nowrap'>
-              <label className='form-label'>Data Bank</label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  Isi detail data bank perusahaan anda
-                </span>
-              )}
-            </div>
-            <div className='w-3/5 flex gap-3 flex-row'>
-              <div>
+          </form>
+        </div>
+      )}
+      {isMobile && (
+        <div className=''>
+          <h1
+            className={`font-bold py-4 mt-8 ${
+              isKonfirmasi ? 'text-xl' : 'text-xl'
+            }`}
+          >
+            Informasi Perusahaan
+          </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 Perusahaan
+                </label>
                 <input
-                  id='bankName'
-                  name='bankName'
-                  ref={bankNameRef}
-                  placeholder='Nama bank'
+                  id='name'
+                  name='name'
+                  placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG'
                   type='text'
-                  value={form.bankName}
                   className='form-input'
+                  aria-invalid={errors.name}
+                  value={form.name}
+                  ref={nameRef}
                   onChange={handleInputChange}
                 />
                 {!isKonfirmasi && (
                   <span className='text-xs opacity-60'>
-                    Format: BCA, Mandiri, CIMB, BNI dll
+                    isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
                   </span>
                 )}
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.bankName}
+                    {errors.name}
                   </div>
                 )}
               </div>
-              <div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>Industri</label>
+                <div className='w-full' ref={industry_idRef}>
+                  <Controller
+                    name='industry_id'
+                    control={control}
+                    render={(props) => (
+                      <HookFormSelect
+                        {...props}
+                        options={industries}
+                        placeholder={
+                          'Pilih Industri yang sesuai dengan perusahaan'
+                        }
+                      />
+                    )}
+                  />
+                </div>
+                {!isKonfirmasi && selectedCategory && (
+                  <span className='text-gray_r-11 text-xs opacity-60'>
+                    Kategori : {selectedCategory}
+                  </span>
+                )}
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.industry_id}
+                  </div>
+                )}
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label '>Alamat Perusahaan</label>
                 <input
-                  id='accountName'
-                  name='accountName'
-                  ref={accountNameRef}
-                  placeholder='Nama Rekening'
+                  id='street'
+                  name='street'
+                  ref={streetRef}
+                  placeholder='Masukkan alamat lengkap perusahaan'
                   type='text'
-                  value={form.accountName}
+                  value={form.street}
                   className='form-input'
                   onChange={handleInputChange}
                 />
+                <div className='w-full text-nowrap'>
+                  <div className='sub-alamat flex flex-row w-full gap-3'>
+                    <div className='w-2/5' ref={stateRef}>
+                      <Controller
+                        name='state'
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={states}
+                            placeholder='Provinsi'
+                          />
+                        )}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.state}
+                        </div>
+                      )}
+                    </div>
+                    <div className='w-1/3' ref={cityRef}>
+                      <Controller
+                        name='city'
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={cities}
+                            disabled={!watchState}
+                            placeholder='Kota'
+                          />
+                        )}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.city}
+                        </div>
+                      )}
+                    </div>
+                    <div className='w-1/3'>
+                      <input
+                        id='zip'
+                        name='zip'
+                        ref={zipRef}
+                        placeholder='Kode Pos'
+                        type='number'
+                        value={form.zip}
+                        className='form-input'
+                        onChange={handleInputChange}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.zip}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
                 {!isKonfirmasi && (
-                  <span className='text-xs opacity-60'>Format: John Doe</span>
+                  <span className='text-xs opacity-60'>
+                    Isi detail alamat sesuai dengan yang terdaftar
+                  </span>
                 )}
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.accountName}
+                    {errors.street}
                   </div>
                 )}
               </div>
-              <div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label '>No. Telfon Perusahaan</label>
                 <input
-                  id='accountNumber'
-                  name='accountNumber'
-                  ref={accountNumberRef}
-                  placeholder='Nomor Rekening Bank'
-                  type='text'
-                  value={form.accountNumber}
+                  id='mobile'
+                  name='mobile'
+                  ref={mobileRef}
+                  placeholder='Format: 08123456789 / (021) 123 4567'
+                  type='tel'
+                  value={form.mobile}
                   className='form-input'
+                  aria-invalid={errors.mobile}
                   onChange={handleInputChange}
                 />
                 {!isKonfirmasi && (
                   <span className='text-xs opacity-60'>
-                    Format: 01234567896
+                    Isi detail perusahaan sesuai dengan nama yang terdaftar
                   </span>
                 )}
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.accountNumber}
+                    {errors.mobile}
                   </div>
                 )}
               </div>
-            </div>
-          </div>
 
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5 text-nowrap'>
-              <label className='form-label '>
-                Website <span className=' opacity-60'>(Opsional)</span>
-              </label>
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='website'
-                name='website'
-                placeholder='www.indoteknik.com'
-                type='text'
-                value={form.website}
-                className='form-input'
-                onChange={handleInputChange}
-              />
-            </div>
-          </div>
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label'>Data Bank</label>
+                <div className='flex gap-3 flex-row'>
+                  <div>
+                    <input
+                      id='bankName'
+                      name='bankName'
+                      ref={bankNameRef}
+                      placeholder='Nama bank'
+                      type='text'
+                      value={form.bankName}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div>
+                    <input
+                      id='accountName'
+                      name='accountName'
+                      ref={accountNameRef}
+                      placeholder='Nama Rekening'
+                      type='text'
+                      value={form.accountName}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.accountName}
+                      </div>
+                    )}
+                  </div>
+                  <div>
+                    <input
+                      id='accountNumber'
+                      name='accountNumber'
+                      ref={accountNumberRef}
+                      placeholder='Nomor Rekening Bank'
+                      type='text'
+                      value={form.accountNumber}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.accountNumber}
+                      </div>
+                    )}
+                  </div>
+                </div>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>
+                    Isi data bank perusahaan sesuai dengan yang terdaftar
+                  </span>
+                )}
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.bankName}
+                  </div>
+                )}
+              </div>
 
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5 text-nowrap'>
-              <label className='form-label '>Estimasi Pembelian pertahun</label>
-            </div>
-            <div className='w-3/5'>
-              <div className='relative'>
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label '>
+                  Website <span className=' opacity-60'>(Opsional)</span>
+                </label>
+                <input
+                  id='website'
+                  name='website'
+                  placeholder='Format: www.indoteknik.com'
+                  type='text'
+                  value={form.website}
+                  className='form-input'
+                  onChange={handleInputChange}
+                />
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label '>
+                  Estimasi Pembelian pertahun
+                </label>
                 <input
                   id='estimasi'
                   name='estimasi'
@@ -598,54 +1208,38 @@ const InformasiPerusahaan = ({
                   value={formatRupiah(form.estimasi)}
                   onChange={handleChange} // Mengatur perubahan input
                 />
-              </div>
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.estimasi}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-center'>
-            <div className='w-2/5'>
-              <label className='form-label text-nowrap'>Durasi Tempo</label>
-              <span className='text-xs opacity-60'>
-                Pilih durasi tempo yang anda inginkan
-              </span>
-            </div>
-            <div className='w-3/5 flex flex-row items-center'>
-              <div className='w-1/5' ref={tempoDurationRef}>
-                <RadioGroup
-                  onChange={onChangeTempoDuration}
-                  value={form.tempoDuration}
-                >
-                  <Stack direction='column' className=''>
-                    <Radio colorScheme='red' value='7'>
-                      7 Hari
-                    </Radio>
-                    <Radio colorScheme='red' value='14' className=''>
-                      14 Hari
-                    </Radio>
-                    <Radio colorScheme='red' value='30' className=''>
-                      30 Hari
-                    </Radio>
-                  </Stack>
-                </RadioGroup>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.tempoDuration}
+                    {errors.estimasi}
                   </div>
                 )}
               </div>
-              {!isKonfirmasi && (
-                <div className='w-4/5 flex flex-row justify-between items-center'>
-                  <div className='w-2/5 text-nowrap'>
-                    <label className='form-label '>Limit Tempo</label>
-                    <span className='text-xs opacity-60'>
-                      Ajukan nilai limit yang anda mau
-                    </span>
-                  </div>
+              <div className='h-1 bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+              <div className='flex flex-col gap-2  justify-start items-start'>
+                <label className='form-label text-nowrap'>Durasi Tempo</label>
+                <div className='' ref={tempoDurationRef}>
+                  <RadioGroup
+                    onChange={onChangeTempoDuration}
+                    value={form.tempoDuration}
+                  >
+                    <Stack direction='row' className=''>
+                      <Radio colorScheme='red' value='7'>
+                        7 Hari
+                      </Radio>
+                      <Radio colorScheme='red' value='14' className=''>
+                        14 Hari
+                      </Radio>
+                      <Radio colorScheme='red' value='30' className=''>
+                        30 Hari
+                      </Radio>
+                    </Stack>
+                  </RadioGroup>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.tempoDuration}
+                    </div>
+                  )}
+                  <label className='form-label '>Limit Tempo</label>
                   <div
                     className='flex flex-col justify-start items-start'
                     ref={tempoLimitRef}
@@ -717,206 +1311,42 @@ const InformasiPerusahaan = ({
                     )}
                   </div>
                 </div>
-              )}
-            </div>
-          </div>
-          {isKonfirmasi && (
-            <div className='flex flex-row justify-between items-center'>
-              <div className='w-2/5'>
-                <label className='form-label w-2/5 text-nowrap'>
-                  Limit Tempo
-                </label>
-                <span className='text-xs opacity-60'>
-                  Ajukan nilai limit yang anda mau
-                </span>
               </div>
-              <div
-                className='w-3/5 flex flex-col justify-start items-start'
-                ref={tempoLimitRef}
-              >
-                <RadioGroup
-                  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'>
-                    {/* Kolom 1 */}
-                    <Stack direction='column' spacing={2} className='mr-4'>
-                      {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}>
-                      {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(tempoLimitValueEx)} // Menampilkan nilai terformat
-                          onChange={(e) => {
-                            const value = e.target.value;
-                            const formattedValue = formatRupiah(value);
-                            setTempoLimitValueEx(formattedValue);
-                            updateForm(
-                              'tempoLimit',
-                              formattedValue.replace(/^Rp\s*/, '')
-                            ); // Mengupdate nilai di react-hook-form
-                          }}
-                        />
-                      </div>
+              <div className='text-red-500 text-xs'>
+                **Durasi & Limit dapat berbeda dengan verifikasi oleh tim
+                indoteknik.com
+              </div>
+              <div className='h-1 bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+              <div className='flex flex-col gap justify-between items-start'>
+                <label className='form-label  text-wrap '>
+                  Apakah bersedia transaksi via website?
+                </label>
+                <div className='flex gap-x-4' ref={bersediaRef}>
+                  <RadioGroup
+                    onChange={handleCheckboxBersediaChange}
+                    value={form.bersedia}
+                  >
+                    <Stack direction='col'>
+                      <Radio colorScheme='red' value='bersedia'>
+                        Saya bersedia
+                      </Radio>
+                      <Radio colorScheme='red' value='tidakBersedia'>
+                        Tidak bersedia
+                      </Radio>
                     </Stack>
-                  </Stack>
-                </RadioGroup>
+                  </RadioGroup>
+                </div>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.tempoLimit}
+                    {errors.estimasi}
                   </div>
                 )}
               </div>
             </div>
-          )}
-
-          <div className='text-red-500'>
-            *Durasi dan limit dapat berbeda sesuaui dengan verifikasi oleh tim
-            Indoteknik.com
-          </div>
-
-          <div className='flex flex-row justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label  text-wrap '>
-                Apakah bersedia transaksi via website?
-              </label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  Pilih produk bisa lebih dari 1
-                </span>
-              )}
-            </div>
-            <div className='w-3/5 flex flex-col justify-start'>
-              <div className='flex gap-x-4' ref={bersediaRef}>
-                <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
-                  onChange={() => handleCheckboxBersediaChange('bersedia')}
-                  value={true}
-                  size='md'
-                >
-                  Saya bersedia
-                </Checkbox>
-                <Checkbox
-                  name='bersedia'
-                  borderColor='gray.600'
-                  colorScheme='red'
-                  isChecked={bersedia === false} // Checked when bersedia is false
-                  onChange={() => handleCheckboxBersediaChange('tidakBersedia')}
-                  value={false}
-                  size='md'
-                >
-                  Tidak bersedia
-                </Checkbox> */}
-              </div>
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.estimasi}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div
-            className={`flex flex-row  justify-between ${
-              isKonfirmasi ? 'items-center' : 'items-start'
-            }`}
-          >
-            <div className='w-2/5 text-nowrap'>
-              <label className='form-label '>
-                Kategori Produk yang Digunakan
-              </label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  Pilih produk bisa lebih dari 1
-                </span>
-              )}
-            </div>
-            <div className='w-3/5 flex flex-col'>
-              <div className='flex flex-row justify-between'>
-                <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)}
-                    >
-                      {item.name}
-                    </Checkbox>
-                  ))}
-                </div>
-                <div className='flex flex-col gap-2'>
-                  {secondColumn.map((item) => (
-                    <Checkbox
-                      colorScheme='red'
-                      key={item.id}
-                      isChecked={isChecked(item.id)}
-                      onChange={() => handleCheckboxChange(item.id)}
-                    >
-                      {item.name}
-                    </Checkbox>
-                  ))}
-                </div>
-              </div>
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.categoryProduk}
-                </div>
-              )}
-            </div>
-          </div>
+          </form>
         </div>
-      </form>
-    </div>
+      )}
+    </>
   );
 };
 
-- 
cgit v1.2.3


From 3550c262e5eeb1b861ae100cd26ae853c7f153fe Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 4 Nov 2024 14:25:02 +0700
Subject: <iman> update pengajuan tempo mobile 80%

---
 .../component/informasiPerusahaan.jsx              | 176 +++++++++++++--------
 1 file changed, 112 insertions(+), 64 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 90454083..08dbbc8a 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -941,7 +941,7 @@ const InformasiPerusahaan = ({
         </div>
       )}
       {isMobile && (
-        <div className=''>
+        <div className='text-sm'>
           <h1
             className={`font-bold py-4 mt-8 ${
               isKonfirmasi ? 'text-xl' : 'text-xl'
@@ -1151,7 +1151,7 @@ const InformasiPerusahaan = ({
                       id='accountNumber'
                       name='accountNumber'
                       ref={accountNumberRef}
-                      placeholder='Nomor Rekening Bank'
+                      placeholder='Nomor Rekening'
                       type='text'
                       value={form.accountNumber}
                       className='form-input'
@@ -1214,11 +1214,12 @@ const InformasiPerusahaan = ({
                   </div>
                 )}
               </div>
-              <div className='h-1 bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+              <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
               <div className='flex flex-col gap-2  justify-start items-start'>
                 <label className='form-label text-nowrap'>Durasi Tempo</label>
                 <div className='' ref={tempoDurationRef}>
                   <RadioGroup
+                    size='sm'
                     onChange={onChangeTempoDuration}
                     value={form.tempoDuration}
                   >
@@ -1239,40 +1240,61 @@ const InformasiPerusahaan = ({
                       {errors.tempoDuration}
                     </div>
                   )}
-                  <label className='form-label '>Limit Tempo</label>
-                  <div
-                    className='flex flex-col justify-start items-start'
-                    ref={tempoLimitRef}
+                </div>
+              </div>
+              <div className='flex flex-col gap-2  justify-start items-start'>
+                <label className='form-label '>Limit Tempo</label>
+                <div
+                  className='flex justify-between items-center '
+                  ref={tempoLimitRef}
+                >
+                  <RadioGroup
+                    size='sm'
+                    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}
                   >
-                    <RadioGroup
-                      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'>
-                        {/* Kolom 1 */}
-                        <Stack direction='column' spacing={2} className='mr-4'>
-                          {radioOptions.slice(0, 4).map((option) => (
-                            <Radio
-                              key={option.value}
-                              colorScheme='red'
-                              value={option.value}
-                            >
-                              {option.label}
-                            </Radio>
-                          ))}
-                        </Stack>
+                    <Stack direction='row'>
+                      {/* Kolom 1 */}
+                      <Stack direction='row' spacing={2} className='mr-4'>
+                        {radioOptions.slice(0, 3).map((option) => (
+                          <Radio
+                            key={option.value}
+                            colorScheme='red'
+                            value={option.value}
+                          >
+                            {option.label}
+                          </Radio>
+                        ))}
+                        <Radio colorScheme='red' value='custom'></Radio>
 
-                        {/* Kolom 2 */}
-                        <Stack direction='column' className='ml-8' spacing={2}>
+                        <input
+                          placeholder='Isi limit'
+                          type='text'
+                          className='border ml-1 p-1 w-full ' // padding untuk memberi ruang untuk "RP"
+                          value={formatRupiah(tempoLimitValueEx)} // Menampilkan nilai terformat
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            const formattedValue = formatRupiah(value);
+                            setTempoLimitValueEx(formattedValue);
+                            updateForm(
+                              'tempoLimit',
+                              formattedValue.replace(/^Rp\s*/, '')
+                            ); // Mengupdate nilai di react-hook-form
+                          }}
+                        />
+                      </Stack>
+
+                      {/* Kolom 2 */}
+                      {/* <Stack direction='column' className='ml-8' spacing={2}>
                           {radioOptions.slice(4).map((option) => (
                             <Radio
                               key={option.value}
@@ -1282,47 +1304,29 @@ const InformasiPerusahaan = ({
                               {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(tempoLimitValueEx)} // Menampilkan nilai terformat
-                              onChange={(e) => {
-                                const value = e.target.value;
-                                const formattedValue = formatRupiah(value);
-                                setTempoLimitValueEx(formattedValue);
-                                updateForm(
-                                  'tempoLimit',
-                                  formattedValue.replace(/^Rp\s*/, '')
-                                ); // Mengupdate nilai di react-hook-form
-                              }}
-                            />
-                          </div>
-                        </Stack>
-                      </Stack>
-                    </RadioGroup>
-                    {chekValid && (
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.tempoLimit}
-                      </div>
-                    )}
-                  </div>
+                          <div className='flex flex-row items-center'></div>
+                        </Stack> */}
+                    </Stack>
+                  </RadioGroup>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.tempoLimit}
+                    </div>
+                  )}
                 </div>
               </div>
               <div className='text-red-500 text-xs'>
                 **Durasi & Limit dapat berbeda dengan verifikasi oleh tim
                 indoteknik.com
               </div>
-              <div className='h-1 bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+              <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
               <div className='flex flex-col gap justify-between items-start'>
                 <label className='form-label  text-wrap '>
                   Apakah bersedia transaksi via website?
                 </label>
                 <div className='flex gap-x-4' ref={bersediaRef}>
                   <RadioGroup
+                    size='sm'
                     onChange={handleCheckboxBersediaChange}
                     value={form.bersedia}
                   >
@@ -1342,6 +1346,50 @@ const InformasiPerusahaan = ({
                   </div>
                 )}
               </div>
+              <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+
+              <div
+                className={`flex flex-col gap-2  justify-between ${
+                  isKonfirmasi ? 'items-center' : 'items-start'
+                }`}
+              >
+                <label className='form-label '>
+                  Kategori Produk yang Digunakan
+                </label>
+                <div className='flex flex-col justify-between gap-2 '>
+                  <div className='flex flex-col gap-2' ref={categoryProdukRef}>
+                    {firstColumn.map((item) => (
+                      <Checkbox
+                        size='sm'
+                        colorScheme='red'
+                        key={item.id}
+                        onChange={() => handleCheckboxChange(item.id)}
+                        isChecked={isChecked(item.id)}
+                      >
+                        {item.name}
+                      </Checkbox>
+                    ))}
+                  </div>
+                  <div className='flex flex-col gap-2'>
+                    {secondColumn.map((item) => (
+                      <Checkbox
+                        size='sm'
+                        colorScheme='red'
+                        key={item.id}
+                        isChecked={isChecked(item.id)}
+                        onChange={() => handleCheckboxChange(item.id)}
+                      >
+                        {item.name}
+                      </Checkbox>
+                    ))}
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.categoryProduk}
+                  </div>
+                )}
+              </div>
             </div>
           </form>
         </div>
-- 
cgit v1.2.3


From f751fa6d398a8aab96380c832da927c60c6ccbe4 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 4 Nov 2024 16:10:09 +0700
Subject: <iman> update pengajuan tempo mobile view fix

---
 src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 08dbbc8a..8a1b3508 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -944,7 +944,7 @@ const InformasiPerusahaan = ({
         <div className='text-sm'>
           <h1
             className={`font-bold py-4 mt-8 ${
-              isKonfirmasi ? 'text-xl' : 'text-xl'
+              isKonfirmasi ? 'hidden' : 'text-xl'
             }`}
           >
             Informasi Perusahaan
@@ -1350,7 +1350,7 @@ const InformasiPerusahaan = ({
 
               <div
                 className={`flex flex-col gap-2  justify-between ${
-                  isKonfirmasi ? 'items-center' : 'items-start'
+                  isKonfirmasi ? 'items-start' : 'items-start'
                 }`}
               >
                 <label className='form-label '>
-- 
cgit v1.2.3


From 6bbf1dbd94355f34f58f4b72f134f3dbeac776aa Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 23 Nov 2024 11:55:59 +0700
Subject: <iman> update tempo

---
 .../component/informasiPerusahaan.jsx              | 324 +++++++++++++--------
 1 file changed, 210 insertions(+), 114 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 8a1b3508..6a50b0c7 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -8,15 +8,19 @@ import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
 import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
 import useDevice from '@/core/hooks/useDevice';
 import Divider from '@/core/components/elements/Divider/Divider';
+import { getAuth } from '~/libs/auth';
+import addressApi from '@/lib/address/api/addressApi';
 const InformasiPerusahaan = ({
   chekValid,
   buttonSubmitClick,
   isKonfirmasi,
 }) => {
+  const auth = getAuth();
   const { isDesktop, isMobile } = useDevice();
   const { control, watch, setValue, getValues } = useForm();
   const { form, errors, validate, updateForm } = usePengajuanTempoStore();
   const [industries, setIndustries] = useState([]);
+  const [paymentTerm, setPaymentTerm] = useState([]);
   const [selectedCategory, setSelectedCategory] = useState('');
   const [states, setState] = useState([]);
   const [cities, setCities] = useState([]);
@@ -59,7 +63,7 @@ const InformasiPerusahaan = ({
 
   const watchState = watch('state');
   useEffect(() => {
-    updateForm('city', '');
+    // updateForm('city', '');
     if (watchState) {
       updateForm('state', `${watchState}`);
       validate();
@@ -96,17 +100,42 @@ const InformasiPerusahaan = ({
     };
     loadIndustries();
   }, []);
-
   useEffect(() => {
     const selectedIndustryType = industries.find(
-      (industry) => industry.value === watch('industry_id')
+      (industry) => industry.value === watch('industryId')
     );
     if (selectedIndustryType) {
-      updateForm('industry_id', `${selectedIndustryType?.value}`);
+      updateForm('industryId', `${selectedIndustryType?.value}`);
       validate();
       setSelectedCategory(selectedIndustryType.category);
     }
-  }, [watch('industry_id'), industries]);
+  }, [watch('industryId'), industries]);
+
+  useEffect(() => {
+    const loadPaymentTerm = async () => {
+      const dataPaymentTerm = await odooApi(
+        'GET',
+        '/api/v1/partner/payment_term'
+      );
+      console.log('dataPaymentTerm', dataPaymentTerm);
+      setPaymentTerm(
+        dataPaymentTerm?.map((o) => ({
+          value: o.id,
+          label: o.name,
+        }))
+      );
+    };
+    loadPaymentTerm();
+  }, []);
+  useEffect(() => {
+    const selectedPaymentTerm = paymentTerm.find(
+      (industry) => industry.value === watch('tempoDuration')
+    );
+    if (selectedPaymentTerm) {
+      updateForm('tempoDuration', `${selectedPaymentTerm?.value}`);
+      validate();
+    }
+  }, [watch('tempoDuration'), paymentTerm]);
 
   const estimasiValue = watch('estimasi');
   const tempoLimitValue = watch('tempoLimit');
@@ -207,7 +236,7 @@ const InformasiPerusahaan = ({
           nameRef.current.scrollIntoView(options);
           return;
         }
-        if (errors.industry_id && industry_idRef.current) {
+        if (errors.industryId && industry_idRef.current) {
           industry_idRef.current.scrollIntoView(options);
           return;
         }
@@ -268,8 +297,8 @@ const InformasiPerusahaan = ({
     loadIndustries();
   }, [buttonSubmitClick, chekValid]);
   useEffect(() => {
-    if (form.industry_id) {
-      setValue('industry_id', parseInt(form.industry_id));
+    if (form.industryId) {
+      setValue('industryId', parseInt(form.industryId));
     }
     if (form.state) {
       setValue('state', parseInt(form.state));
@@ -278,7 +307,7 @@ const InformasiPerusahaan = ({
       setValue('city', parseInt(form.city));
     }
     if (form.tempoDuration) {
-      setValue('tempoDuration', form.tempoDuration);
+      setValue('tempoDuration', parseInt(form.tempoDuration));
     }
     if (form.tempoLimit) {
       setValue('tempoLimit', form.tempoLimit);
@@ -298,6 +327,52 @@ const InformasiPerusahaan = ({
       }
     }
   }, [form]);
+  useEffect(() => {
+    const loadProfile = async () => {
+      try {
+        const dataProfile = await addressApi({ id: auth.parentId });
+        console.log('dataProfile', dataProfile);
+        if (dataProfile.name) {
+          updateForm('name', dataProfile.name);
+        }
+        if (dataProfile.alamatBisnis) {
+          updateForm('street', dataProfile.alamatBisnis);
+        }
+        if (dataProfile.zip) {
+          updateForm('zip', dataProfile.zip);
+        }
+        if (dataProfile.phone) {
+          updateForm('mobile', dataProfile.phone.replace(/\D/g, ''));
+        }
+      } catch (error) {
+        console.error('Error loading profile:', error);
+      } finally {
+        validate();
+      }
+    };
+
+    if (auth?.parentId) {
+      loadProfile();
+    }
+  }, [auth?.parentId, updateForm]);
+  useEffect(() => {
+    const loadProfile = async () => {
+      try {
+        const dataProfile = await addressApi({ id: auth.parentId });
+
+        setValue('industryId', parseInt(dataProfile.industryId));
+        setValue('state', parseInt(dataProfile.stateId.id));
+        setValue('city', parseInt(dataProfile.city.id));
+      } catch (error) {
+        console.error('Error loading profile:', error);
+      }
+    };
+
+    if (auth?.parentId) {
+      loadProfile();
+    }
+  }, [auth?.parentId, setValue]);
+  console.log('form', form);
   return (
     <>
       {isDesktop && (
@@ -325,16 +400,17 @@ const InformasiPerusahaan = ({
                     placeholder='Masukkan nama perusahaan'
                     type='text'
                     className='form-input'
+                    disabled={true}
                     aria-invalid={errors.name}
                     value={form.name}
                     ref={nameRef}
                     onChange={handleInputChange}
                   />
-                  {!isKonfirmasi && (
+                  {/* {!isKonfirmasi && (
                     <span className='text-xs opacity-60'>
                       Format: PT. INDOTEKNIK DOTCOM GEMILANG
                     </span>
-                  )}
+                  )} */}
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
                       {errors.name}
@@ -353,7 +429,7 @@ const InformasiPerusahaan = ({
                 </div>
                 <div className='w-3/5'>
                   <Controller
-                    name='industry_id'
+                    name='industryId'
                     control={control}
                     render={(props) => (
                       <HookFormSelect
@@ -370,7 +446,7 @@ const InformasiPerusahaan = ({
                   )}
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.industry_id}
+                      {errors.industryId}
                     </div>
                   )}
                 </div>
@@ -625,9 +701,13 @@ const InformasiPerusahaan = ({
                     Pilih durasi tempo yang anda inginkan
                   </span>
                 </div>
-                <div className='w-3/5 flex flex-row items-center'>
-                  <div className='w-1/5' ref={tempoDurationRef}>
-                    <RadioGroup
+                <div className='w-3/5 flex flex-col '>
+                  <div className='flex flex-row items-center gap-3'>
+                    <div
+                      className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
+                      ref={tempoDurationRef}
+                    >
+                      {/* <RadioGroup
                       onChange={onChangeTempoDuration}
                       value={form.tempoDuration}
                     >
@@ -642,101 +722,122 @@ const InformasiPerusahaan = ({
                           30 Hari
                         </Radio>
                       </Stack>
-                    </RadioGroup>
-                    {chekValid && (
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.tempoDuration}
-                      </div>
-                    )}
-                  </div>
-                  {!isKonfirmasi && (
-                    <div className='w-4/5 flex flex-row justify-between items-center'>
-                      <div className='w-2/5 text-nowrap'>
-                        <label className='form-label '>Limit Tempo</label>
-                        <span className='text-xs opacity-60'>
-                          Ajukan nilai limit yang anda mau
-                        </span>
-                      </div>
-                      <div
-                        className='flex flex-col justify-start items-start'
-                        ref={tempoLimitRef}
-                      >
-                        <RadioGroup
-                          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}
+                    </RadioGroup> */}
+                      <Controller
+                        name='tempoDuration'
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={paymentTerm}
+                            placeholder={'Pilih Durasi Tempo'}
+                          />
+                        )}
+                      />
+
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.tempoDuration}
+                        </div>
+                      )}
+                    </div>
+                    {!isKonfirmasi && (
+                      <div className='w-[75%] flex flex-row justify-between items-center'>
+                        <div className='w-2/5 text-nowrap flex justify-start items-start flex-col'>
+                          <label className='form-label '>Limit Tempo</label>
+                          <span className='text-xs opacity-60'>
+                            Ajukan nilai limit yang anda mau
+                          </span>
+                        </div>
+                        <div
+                          className='flex flex-col justify-start items-start'
+                          ref={tempoLimitRef}
                         >
-                          <Stack direction='row'>
-                            {/* Kolom 1 */}
-                            <Stack
-                              direction='column'
-                              spacing={2}
-                              className='mr-4'
-                            >
-                              {radioOptions.slice(0, 4).map((option) => (
-                                <Radio
-                                  key={option.value}
-                                  colorScheme='red'
-                                  value={option.value}
-                                >
-                                  {option.label}
-                                </Radio>
-                              ))}
-                            </Stack>
+                          <RadioGroup
+                            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'>
+                              {/* Kolom 1 */}
+                              <Stack
+                                direction='column'
+                                spacing={2}
+                                className='mr-4'
+                              >
+                                {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}
-                            >
-                              {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>
+                              {/* Kolom 2 */}
+                              <Stack
+                                direction='column'
+                                className='ml-8'
+                                spacing={2}
+                              >
+                                {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(tempoLimitValueEx)} // Menampilkan nilai terformat
-                                  onChange={(e) => {
-                                    const value = e.target.value;
-                                    const formattedValue = formatRupiah(value);
-                                    setTempoLimitValueEx(formattedValue);
-                                    updateForm(
-                                      'tempoLimit',
-                                      formattedValue.replace(/^Rp\s*/, '')
-                                    ); // Mengupdate nilai di react-hook-form
-                                  }}
-                                />
-                              </div>
+                                  <input
+                                    placeholder='Isi limit yang anda inginkan'
+                                    type='text'
+                                    className='border ml-2 p-1' // padding untuk memberi ruang untuk "RP"
+                                    value={formatRupiah(tempoLimitValueEx)} // Menampilkan nilai terformat
+                                    onChange={(e) => {
+                                      const value = e.target.value;
+                                      const formattedValue =
+                                        formatRupiah(value);
+                                      setTempoLimitValueEx(formattedValue);
+                                      updateForm(
+                                        'tempoLimit',
+                                        formattedValue.replace(/^Rp\s*/, '')
+                                      ); // Mengupdate nilai di react-hook-form
+                                    }}
+                                  />
+                                </div>
+                              </Stack>
                             </Stack>
-                          </Stack>
-                        </RadioGroup>
-                        {chekValid && (
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.tempoLimit}
-                          </div>
-                        )}
+                          </RadioGroup>
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errors.tempoLimit}
+                            </div>
+                          )}
+                        </div>
                       </div>
-                    </div>
-                  )}
+                    )}
+                  </div>
+                  <div className='text-red-500'>
+                    *Durasi dan limit dapat berbeda sesuai dengan verifikasi
+                    oleh tim Indoteknik.com
+                  </div>
                 </div>
               </div>
               {isKonfirmasi && (
@@ -822,11 +923,6 @@ const InformasiPerusahaan = ({
                 </div>
               )}
 
-              <div className='text-red-500'>
-                *Durasi dan limit dapat berbeda sesuai dengan verifikasi oleh
-                tim Indoteknik.com
-              </div>
-
               <div className='flex flex-row justify-between items-start'>
                 <div className='w-2/5'>
                   <label className='form-label  text-wrap '>
@@ -878,7 +974,7 @@ const InformasiPerusahaan = ({
                   </div>
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.estimasi}
+                      {errors.bersedia}
                     </div>
                   )}
                 </div>
@@ -982,7 +1078,7 @@ const InformasiPerusahaan = ({
                 <label className='form-label  text-nowrap'>Industri</label>
                 <div className='w-full' ref={industry_idRef}>
                   <Controller
-                    name='industry_id'
+                    name='industryId'
                     control={control}
                     render={(props) => (
                       <HookFormSelect
@@ -1002,7 +1098,7 @@ const InformasiPerusahaan = ({
                 )}
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.industry_id}
+                    {errors.industryId}
                   </div>
                 )}
               </div>
-- 
cgit v1.2.3


From 9a49b8d84761781531cb417731cb9ef802f63541 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 4 Dec 2024 10:59:21 +0700
Subject: <iman> update pengajuan tempo

---
 src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 6a50b0c7..f641d8fa 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -117,7 +117,6 @@ const InformasiPerusahaan = ({
         'GET',
         '/api/v1/partner/payment_term'
       );
-      console.log('dataPaymentTerm', dataPaymentTerm);
       setPaymentTerm(
         dataPaymentTerm?.map((o) => ({
           value: o.id,
@@ -331,7 +330,6 @@ const InformasiPerusahaan = ({
     const loadProfile = async () => {
       try {
         const dataProfile = await addressApi({ id: auth.parentId });
-        console.log('dataProfile', dataProfile);
         if (dataProfile.name) {
           updateForm('name', dataProfile.name);
         }
@@ -372,7 +370,6 @@ const InformasiPerusahaan = ({
       loadProfile();
     }
   }, [auth?.parentId, setValue]);
-  console.log('form', form);
   return (
     <>
       {isDesktop && (
-- 
cgit v1.2.3


From e9cd13307f0095dc4edc5048752675d80c551564 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 6 Dec 2024 17:06:26 +0700
Subject: <iman> pengajuan tempo

---
 .../component/informasiPerusahaan.jsx              | 359 +++++----------------
 1 file changed, 79 insertions(+), 280 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index f641d8fa..19f46dec 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -10,6 +10,7 @@ import useDevice from '@/core/hooks/useDevice';
 import Divider from '@/core/components/elements/Divider/Divider';
 import { getAuth } from '~/libs/auth';
 import addressApi from '@/lib/address/api/addressApi';
+import { toast } from 'react-hot-toast';
 const InformasiPerusahaan = ({
   chekValid,
   buttonSubmitClick,
@@ -113,10 +114,12 @@ const InformasiPerusahaan = ({
 
   useEffect(() => {
     const loadPaymentTerm = async () => {
-      const dataPaymentTerm = await odooApi(
-        'GET',
-        '/api/v1/partner/payment_term'
-      );
+      const dataPaymentTerm = [
+        { id: 29, name: 'Tempo 7 Hari' },
+        { id: 24, name: 'Tempo 14 Hari' },
+        { id: 32, name: 'Tempo 21 Hari' },
+        { id: 25, name: 'Tempo 30 Hari' },
+      ];
       setPaymentTerm(
         dataPaymentTerm?.map((o) => ({
           value: o.id,
@@ -224,13 +227,60 @@ const InformasiPerusahaan = ({
   const bersediaRef = useRef(null);
   const categoryProdukRef = useRef(null);
   const tempoLimitRef = useRef(null);
+
   useEffect(() => {
+    const options = {
+      behavior: 'smooth',
+      block: 'center',
+    };
+
     const loadIndustries = async () => {
-      if (!isFormValid) {
-        const options = {
-          behavior: 'smooth',
-          block: 'center',
+      const watchZip = form.zip?.trim(); // Menghapus spasi berlebih
+
+      // Validasi: hanya eksekusi jika watchZip valid (contoh: minimal 5 karakter)
+      if (watchZip && watchZip.length >= 5) {
+        const loadZip = async () => {
+          try {
+            const response = await fetch(
+              `https://alamat.thecloudalert.com/api/cari/index/?keyword=${watchZip}`
+            );
+
+            const result = await response.json();
+
+            if (!result.result.length > 0) {
+              toast.error('Alamat pos salah');
+              updateForm('zip', ''); // Reset form.zip jika salah
+              validate(); // Memanggil validasi formulir
+              return false;
+            } else {
+              updateForm('zip', watchZip);
+              validate();
+              return true; // Jika valid
+            }
+          } catch (error) {
+            toast.error('Terjadi kesalahan saat memeriksa alamat pos.');
+            console.error('Error:', error);
+            return false;
+          }
         };
+
+        const isValidZip = await loadZip();
+        if (!isValidZip) {
+          zipRef.current.scrollIntoView(options);
+        }
+      }
+    };
+
+    loadIndustries();
+  }, [form.zip]);
+
+  useEffect(() => {
+    const options = {
+      behavior: 'smooth',
+      block: 'center',
+    };
+    const loadIndustries = async () => {
+      if (!isFormValid) {
         if (errors.name && nameRef.current) {
           nameRef.current.scrollIntoView(options);
           return;
@@ -356,8 +406,7 @@ const InformasiPerusahaan = ({
   useEffect(() => {
     const loadProfile = async () => {
       try {
-        const dataProfile = await addressApi({ id: auth.parentId });
-
+        const dataProfile = await addressApi({ id: auth.partnerId });
         setValue('industryId', parseInt(dataProfile.industryId));
         setValue('state', parseInt(dataProfile.stateId.id));
         setValue('city', parseInt(dataProfile.city.id));
@@ -664,7 +713,8 @@ const InformasiPerusahaan = ({
               <div className='flex flex-row  justify-between items-start'>
                 <div className='w-2/5 text-nowrap'>
                   <label className='form-label '>
-                    Estimasi Pembelian pertahun
+                    Estimasi Pembelian pertahun{' '}
+                    <span className=' opacity-60'>(Opsional)</span>
                   </label>
                 </div>
                 <div className='w-3/5'>
@@ -738,187 +788,13 @@ const InformasiPerusahaan = ({
                         </div>
                       )}
                     </div>
-                    {!isKonfirmasi && (
-                      <div className='w-[75%] flex flex-row justify-between items-center'>
-                        <div className='w-2/5 text-nowrap flex justify-start items-start flex-col'>
-                          <label className='form-label '>Limit Tempo</label>
-                          <span className='text-xs opacity-60'>
-                            Ajukan nilai limit yang anda mau
-                          </span>
-                        </div>
-                        <div
-                          className='flex flex-col justify-start items-start'
-                          ref={tempoLimitRef}
-                        >
-                          <RadioGroup
-                            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'>
-                              {/* Kolom 1 */}
-                              <Stack
-                                direction='column'
-                                spacing={2}
-                                className='mr-4'
-                              >
-                                {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}
-                              >
-                                {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(tempoLimitValueEx)} // Menampilkan nilai terformat
-                                    onChange={(e) => {
-                                      const value = e.target.value;
-                                      const formattedValue =
-                                        formatRupiah(value);
-                                      setTempoLimitValueEx(formattedValue);
-                                      updateForm(
-                                        'tempoLimit',
-                                        formattedValue.replace(/^Rp\s*/, '')
-                                      ); // Mengupdate nilai di react-hook-form
-                                    }}
-                                  />
-                                </div>
-                              </Stack>
-                            </Stack>
-                          </RadioGroup>
-                          {chekValid && (
-                            <div className='text-caption-2 text-danger-500 mt-1'>
-                              {errors.tempoLimit}
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    )}
                   </div>
-                  <div className='text-red-500'>
-                    *Durasi dan limit dapat berbeda sesuai dengan verifikasi
-                    oleh tim Indoteknik.com
+                  <div className='text-red-500 text-xs mt-2'>
+                    **Durasi tempo dapat berbeda sesuai dengan verifikasi oleh
+                    tim Indoteknik.com
                   </div>
                 </div>
               </div>
-              {isKonfirmasi && (
-                <div className='flex flex-row justify-between items-center'>
-                  <div className='w-2/5'>
-                    <label className='form-label w-2/5 text-nowrap'>
-                      Limit Tempo
-                    </label>
-                    <span className='text-xs opacity-60'>
-                      Ajukan nilai limit yang anda mau
-                    </span>
-                  </div>
-                  <div
-                    className='w-3/5 flex flex-col justify-start items-start'
-                    ref={tempoLimitRef}
-                  >
-                    <RadioGroup
-                      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'>
-                        {/* Kolom 1 */}
-                        <Stack direction='column' spacing={2} className='mr-4'>
-                          {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}>
-                          {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(tempoLimitValueEx)} // Menampilkan nilai terformat
-                              onChange={(e) => {
-                                const value = e.target.value;
-                                const formattedValue = formatRupiah(value);
-                                setTempoLimitValueEx(formattedValue);
-                                updateForm(
-                                  'tempoLimit',
-                                  formattedValue.replace(/^Rp\s*/, '')
-                                ); // Mengupdate nilai di react-hook-form
-                              }}
-                            />
-                          </div>
-                        </Stack>
-                      </Stack>
-                    </RadioGroup>
-                    {chekValid && (
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.tempoLimit}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )}
 
               <div className='flex flex-row justify-between items-start'>
                 <div className='w-2/5'>
@@ -1286,7 +1162,8 @@ const InformasiPerusahaan = ({
 
               <div className='flex flex-col gap-2  justify-between items-start'>
                 <label className='form-label '>
-                  Estimasi Pembelian pertahun
+                  Estimasi Pembelian pertahun{' '}
+                  <span className=' opacity-60'>(Opsional)</span>
                 </label>
                 <input
                   id='estimasi'
@@ -1310,24 +1187,18 @@ const InformasiPerusahaan = ({
               <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
               <div className='flex flex-col gap-2  justify-start items-start'>
                 <label className='form-label text-nowrap'>Durasi Tempo</label>
-                <div className='' ref={tempoDurationRef}>
-                  <RadioGroup
-                    size='sm'
-                    onChange={onChangeTempoDuration}
-                    value={form.tempoDuration}
-                  >
-                    <Stack direction='row' className=''>
-                      <Radio colorScheme='red' value='7'>
-                        7 Hari
-                      </Radio>
-                      <Radio colorScheme='red' value='14' className=''>
-                        14 Hari
-                      </Radio>
-                      <Radio colorScheme='red' value='30' className=''>
-                        30 Hari
-                      </Radio>
-                    </Stack>
-                  </RadioGroup>
+                <div className='w-full' ref={tempoDurationRef}>
+                  <Controller
+                    name='tempoDuration'
+                    control={control}
+                    render={(props) => (
+                      <HookFormSelect
+                        {...props}
+                        options={paymentTerm}
+                        placeholder={'Pilih Durasi Tempo'}
+                      />
+                    )}
+                  />
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
                       {errors.tempoDuration}
@@ -1335,81 +1206,9 @@ const InformasiPerusahaan = ({
                   )}
                 </div>
               </div>
-              <div className='flex flex-col gap-2  justify-start items-start'>
-                <label className='form-label '>Limit Tempo</label>
-                <div
-                  className='flex justify-between items-center '
-                  ref={tempoLimitRef}
-                >
-                  <RadioGroup
-                    size='sm'
-                    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'>
-                      {/* Kolom 1 */}
-                      <Stack direction='row' spacing={2} className='mr-4'>
-                        {radioOptions.slice(0, 3).map((option) => (
-                          <Radio
-                            key={option.value}
-                            colorScheme='red'
-                            value={option.value}
-                          >
-                            {option.label}
-                          </Radio>
-                        ))}
-                        <Radio colorScheme='red' value='custom'></Radio>
 
-                        <input
-                          placeholder='Isi limit'
-                          type='text'
-                          className='border ml-1 p-1 w-full ' // padding untuk memberi ruang untuk "RP"
-                          value={formatRupiah(tempoLimitValueEx)} // Menampilkan nilai terformat
-                          onChange={(e) => {
-                            const value = e.target.value;
-                            const formattedValue = formatRupiah(value);
-                            setTempoLimitValueEx(formattedValue);
-                            updateForm(
-                              'tempoLimit',
-                              formattedValue.replace(/^Rp\s*/, '')
-                            ); // Mengupdate nilai di react-hook-form
-                          }}
-                        />
-                      </Stack>
-
-                      {/* Kolom 2 */}
-                      {/* <Stack direction='column' className='ml-8' spacing={2}>
-                          {radioOptions.slice(4).map((option) => (
-                            <Radio
-                              key={option.value}
-                              colorScheme='red'
-                              value={option.value}
-                            >
-                              {option.label}
-                            </Radio>
-                          ))}
-                          <div className='flex flex-row items-center'></div>
-                        </Stack> */}
-                    </Stack>
-                  </RadioGroup>
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.tempoLimit}
-                    </div>
-                  )}
-                </div>
-              </div>
               <div className='text-red-500 text-xs'>
-                **Durasi & Limit dapat berbeda dengan verifikasi oleh tim
+                **Durasi tempo dapat berbeda dengan verifikasi oleh tim
                 indoteknik.com
               </div>
               <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
-- 
cgit v1.2.3


From 0f84963214ee6dc5b5a44d945540826a66bec9e0 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 11 Dec 2024 11:51:45 +0700
Subject: <iman> update pengajuan tempo

---
 src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 19f46dec..6a7eb3cb 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -52,7 +52,7 @@ const InformasiPerusahaan = ({
 
   useEffect(() => {
     const loadState = async () => {
-      let dataState = await stateApi();
+      let dataState = await stateApi({ tempo: true });
       dataState = dataState.map((state) => ({
         value: state.id,
         label: state.name,
@@ -115,10 +115,10 @@ const InformasiPerusahaan = ({
   useEffect(() => {
     const loadPaymentTerm = async () => {
       const dataPaymentTerm = [
-        { id: 29, name: 'Tempo 7 Hari' },
         { id: 24, name: 'Tempo 14 Hari' },
-        { id: 32, name: 'Tempo 21 Hari' },
         { id: 25, name: 'Tempo 30 Hari' },
+        { id: 29, name: 'Tempo 7 Hari' },
+        { id: 32, name: 'Tempo 21 Hari' },
       ];
       setPaymentTerm(
         dataPaymentTerm?.map((o) => ({
@@ -585,7 +585,7 @@ const InformasiPerusahaan = ({
               </div>
               <div className='flex flex-row  justify-between items-start'>
                 <div className='w-2/5 text-nowrap'>
-                  <label className='form-label '>No. Telfon Perusahaan</label>
+                  <label className='form-label '>No. HP Perusahaan</label>
                   {!isKonfirmasi && (
                     <span className='text-xs opacity-60'>
                       isi no telfon perusahaan yang sesuai
@@ -1059,7 +1059,7 @@ const InformasiPerusahaan = ({
               </div>
 
               <div className='flex flex-col gap-2  justify-between items-start'>
-                <label className='form-label '>No. Telfon Perusahaan</label>
+                <label className='form-label '>No. HP Perusahaan</label>
                 <input
                   id='mobile'
                   name='mobile'
-- 
cgit v1.2.3


From 915dc67e1ce31eab1f2415cc8df95cebb75a137d Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 13 Dec 2024 14:18:03 +0700
Subject: <iman>update pengajuan tempo request

---
 .../component/informasiPerusahaan.jsx              | 382 ++++++++++++++++-----
 1 file changed, 288 insertions(+), 94 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 6a7eb3cb..f8a0bc55 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -4,6 +4,8 @@ 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 districtApi from '@/lib/address/api/districtApi';
+import subDistrictApi from '@/lib/address/api/subDistrictApi';
 import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
 import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
 import useDevice from '@/core/hooks/useDevice';
@@ -11,21 +13,28 @@ import Divider from '@/core/components/elements/Divider/Divider';
 import { getAuth } from '~/libs/auth';
 import addressApi from '@/lib/address/api/addressApi';
 import { toast } from 'react-hot-toast';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import { useRouter } from 'next/router';
 const InformasiPerusahaan = ({
   chekValid,
   buttonSubmitClick,
   isKonfirmasi,
 }) => {
   const auth = getAuth();
+  const router = useRouter();
   const { isDesktop, isMobile } = useDevice();
   const { control, watch, setValue, getValues } = useForm();
   const { form, errors, validate, updateForm } = usePengajuanTempoStore();
+  const [states, setState] = useState([]);
+  const [cities, setCities] = useState([]);
+  const [districts, setDistricts] = useState([]);
+  const [subDistricts, setSubDistricts] = useState([]);
+  const [zips, setZips] = useState([]);
   const [industries, setIndustries] = useState([]);
   const [paymentTerm, setPaymentTerm] = useState([]);
   const [selectedCategory, setSelectedCategory] = useState('');
-  const [states, setState] = useState([]);
-  const [cities, setCities] = useState([]);
   const [bersedia, setBersedia] = useState(null);
+  const [changeConfirmation, setChangeConfirmation] = useState(false);
   const category_produk = [
     { id: 2040, name: 'Pengaman, Kesehatan & Keamanan' },
     { id: 2097, name: 'Perkakas Tangan, Listrik & Pneumatic' },
@@ -64,7 +73,9 @@ const InformasiPerusahaan = ({
 
   const watchState = watch('state');
   useEffect(() => {
-    // updateForm('city', '');
+    setValue('city', '');
+    setValue('district', '');
+    setValue('subDistrict', '');
     if (watchState) {
       updateForm('state', `${watchState}`);
       validate();
@@ -81,12 +92,79 @@ const InformasiPerusahaan = ({
   }, [watchState]);
 
   const watchCity = watch('city');
+
   useEffect(() => {
     if (watchCity) {
       updateForm('city', `${watchCity}`);
       validate();
+      const loadDistricts = async () => {
+        let dataDistricts = await districtApi({ cityId: watchCity });
+        dataDistricts = dataDistricts.map((district) => ({
+          value: district.id,
+          label: district.name,
+        }));
+        setDistricts(dataDistricts);
+      };
+      loadDistricts();
     }
-  }, [watchCity]);
+  }, [watchCity, setValue]);
+
+  const watchDistrict = watch('district');
+  useEffect(() => {
+    setValue('subDistrict', '');
+    if (watchDistrict) {
+      updateForm('district', `${watchDistrict}`);
+      validate();
+      const loadSubDistricts = async () => {
+        let dataSubDistricts = await subDistrictApi({
+          districtId: watchDistrict,
+        });
+        dataSubDistricts = dataSubDistricts.map((district) => ({
+          value: district.id,
+          label: district.name,
+        }));
+        setSubDistricts(dataSubDistricts);
+      };
+      loadSubDistricts();
+    }
+  }, [watchDistrict, setValue]);
+
+  const watchsubDistrict = watch('subDistrict');
+
+  useEffect(() => {
+    let kelurahan = '';
+
+    if (watchsubDistrict) {
+      updateForm('subDistrict', `${watchsubDistrict}`);
+      validate();
+      for (const data in subDistricts) {
+        if (subDistricts[data].value == watchsubDistrict) {
+          kelurahan = subDistricts[data].label.toLowerCase();
+        }
+      }
+      const loadZip = async () => {
+        const response = await fetch(
+          `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}`
+        );
+
+        const result = await response.json();
+        const dataZips = result.result.map((zip) => ({
+          value: parseInt(zip.kodepos),
+          label: zip.kodepos,
+        }));
+        setZips(dataZips);
+      };
+      loadZip();
+    }
+  }, [watchsubDistrict, setValue, subDistricts]);
+
+  const watchZip = watch('zip');
+  useEffect(() => {
+    if (watchZip) {
+      updateForm('zip', `${watchZip}`);
+      validate();
+    }
+  }, [watchZip]);
 
   useEffect(() => {
     const loadIndustries = async () => {
@@ -115,10 +193,10 @@ const InformasiPerusahaan = ({
   useEffect(() => {
     const loadPaymentTerm = async () => {
       const dataPaymentTerm = [
-        { id: 24, name: 'Tempo 14 Hari' },
-        { id: 25, name: 'Tempo 30 Hari' },
         { id: 29, name: 'Tempo 7 Hari' },
+        { id: 24, name: 'Tempo 14 Hari' },
         { id: 32, name: 'Tempo 21 Hari' },
+        { id: 25, name: 'Tempo 30 Hari' },
       ];
       setPaymentTerm(
         dataPaymentTerm?.map((o) => ({
@@ -157,15 +235,7 @@ const InformasiPerusahaan = ({
     updateForm('estimasi', formattedValue.replace(/^Rp\s*/, ''));
     validate();
   };
-  const onChangeTempoDuration = (e) => {
-    updateForm('tempoDuration', `${e}`);
-    validate();
-  };
 
-  const onChangeTempoLimit = (e) => {
-    updateForm('tempoLimit', `${e}`);
-    validate();
-  };
   const [isCustom, setIsCustom] = React.useState(false);
   const [tempoLimitValueEx, setTempoLimitValueEx] = React.useState('');
   const handleCheckboxBersediaChange = (value) => {
@@ -178,6 +248,16 @@ const InformasiPerusahaan = ({
     updateForm('bersedia', `${value}`);
     validate();
   };
+  const handleCheckboxPortalChange = (value) => {
+    // if (value === 'bersedia') {
+    //   setBersedia(true);
+    // } else if (value === 'tidakBersedia') {
+    //   setBersedia(false);
+    // }
+    // updateForm('bersedia', `${value === 'bersedia'}`);
+    updateForm('portal', `${value}`);
+    validate();
+  };
   const [selectedIds, setSelectedIds] = useState(
     form.categoryProduk ? form.categoryProduk.split(',').map(Number) : [] // Parse string menjadi array angka
   );
@@ -217,6 +297,8 @@ const InformasiPerusahaan = ({
   const streetRef = useRef(null);
   const stateRef = useRef(null);
   const cityRef = useRef(null);
+  const districtRef = useRef(null);
+  const subDistrictRef = useRef(null);
   const zipRef = useRef(null);
   const mobileRef = useRef(null);
   const bankNameRef = useRef(null);
@@ -225,55 +307,10 @@ const InformasiPerusahaan = ({
   const estimasiRef = useRef(null);
   const tempoDurationRef = useRef(null);
   const bersediaRef = useRef(null);
+  const portalRef = useRef(null);
   const categoryProdukRef = useRef(null);
   const tempoLimitRef = useRef(null);
 
-  useEffect(() => {
-    const options = {
-      behavior: 'smooth',
-      block: 'center',
-    };
-
-    const loadIndustries = async () => {
-      const watchZip = form.zip?.trim(); // Menghapus spasi berlebih
-
-      // Validasi: hanya eksekusi jika watchZip valid (contoh: minimal 5 karakter)
-      if (watchZip && watchZip.length >= 5) {
-        const loadZip = async () => {
-          try {
-            const response = await fetch(
-              `https://alamat.thecloudalert.com/api/cari/index/?keyword=${watchZip}`
-            );
-
-            const result = await response.json();
-
-            if (!result.result.length > 0) {
-              toast.error('Alamat pos salah');
-              updateForm('zip', ''); // Reset form.zip jika salah
-              validate(); // Memanggil validasi formulir
-              return false;
-            } else {
-              updateForm('zip', watchZip);
-              validate();
-              return true; // Jika valid
-            }
-          } catch (error) {
-            toast.error('Terjadi kesalahan saat memeriksa alamat pos.');
-            console.error('Error:', error);
-            return false;
-          }
-        };
-
-        const isValidZip = await loadZip();
-        if (!isValidZip) {
-          zipRef.current.scrollIntoView(options);
-        }
-      }
-    };
-
-    loadIndustries();
-  }, [form.zip]);
-
   useEffect(() => {
     const options = {
       behavior: 'smooth',
@@ -301,6 +338,14 @@ const InformasiPerusahaan = ({
           cityRef.current.scrollIntoView(options);
           return;
         }
+        if (errors.district && districtRef.current) {
+          districtRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.subDistrict && subDistrictRef.current) {
+          subDistrictRef.current.scrollIntoView(options);
+          return;
+        }
         if (errors.zip && zipRef.current) {
           zipRef.current.scrollIntoView(options);
           return;
@@ -333,6 +378,10 @@ const InformasiPerusahaan = ({
           bersediaRef.current.scrollIntoView(options);
           return;
         }
+        if (errors.portal && portalRef.current) {
+          portalRef.current.scrollIntoView(options);
+          return;
+        }
         if (errors.categoryProduk && categoryProdukRef.current) {
           categoryProdukRef.current.scrollIntoView(options);
           return;
@@ -355,6 +404,15 @@ const InformasiPerusahaan = ({
     if (form.city) {
       setValue('city', parseInt(form.city));
     }
+    if (form.district) {
+      setValue('district', parseInt(form.district));
+    }
+    if (form.subDistrict) {
+      setValue('subDistrict', parseInt(form.subDistrict));
+    }
+    if (form.zip) {
+      setValue('zip', parseInt(form.zip));
+    }
     if (form.tempoDuration) {
       setValue('tempoDuration', parseInt(form.tempoDuration));
     }
@@ -383,14 +441,31 @@ const InformasiPerusahaan = ({
         if (dataProfile.name) {
           updateForm('name', dataProfile.name);
         }
+        if (dataProfile.stateId.id) {
+          updateForm('state', `${dataProfile.stateId.id}`);
+        }
+        if (dataProfile.city.id) {
+          updateForm('city', `${dataProfile.city.id}`);
+        }
+        if (dataProfile.district.id) {
+          updateForm('district', `${dataProfile.district.id}`);
+        }
+        if (dataProfile.subDistrict.id) {
+          updateForm('subDistrict', `${dataProfile.subDistrict.id}`);
+        }
         if (dataProfile.alamatBisnis) {
           updateForm('street', dataProfile.alamatBisnis);
         }
         if (dataProfile.zip) {
           updateForm('zip', dataProfile.zip);
         }
-        if (dataProfile.phone) {
-          updateForm('mobile', dataProfile.phone.replace(/\D/g, ''));
+        if (dataProfile.mobile) {
+          updateForm('mobile', dataProfile.mobile.replace(/\D/g, ''));
+        } else {
+          setChangeConfirmation(true);
+        }
+        if (!dataProfile.email) {
+          setChangeConfirmation(true);
         }
       } catch (error) {
         console.error('Error loading profile:', error);
@@ -402,7 +477,7 @@ const InformasiPerusahaan = ({
     if (auth?.parentId) {
       loadProfile();
     }
-  }, [auth?.parentId, updateForm]);
+  }, [auth?.parentId]);
   useEffect(() => {
     const loadProfile = async () => {
       try {
@@ -410,6 +485,8 @@ const InformasiPerusahaan = ({
         setValue('industryId', parseInt(dataProfile.industryId));
         setValue('state', parseInt(dataProfile.stateId.id));
         setValue('city', parseInt(dataProfile.city.id));
+        setValue('district', parseInt(dataProfile.district.id));
+        setValue('subDistrict', parseInt(dataProfile.subDistrict.id));
       } catch (error) {
         console.error('Error loading profile:', error);
       }
@@ -419,8 +496,46 @@ const InformasiPerusahaan = ({
       loadProfile();
     }
   }, [auth?.parentId, setValue]);
+
+  const handleLengkapiData = () => {
+    router.push('/my/profile');
+  };
+
   return (
     <>
+      <BottomPopup
+        active={changeConfirmation}
+        close={() => {
+          toast.error(
+            'Mohon lengkapi data perusahaan sebelum melakukan pengajuan tempo'
+          );
+        }}
+        title='Data Perusahaan Anda Belum Lengkap'
+      >
+        <div className='leading-7 text-gray_r-12/80'>
+          Mohon lengkapi data perusahaan sebelum melakukan pengajuan tempo
+        </div>
+        <div className='flex mt-6 gap-x-4 md:justify-end'>
+          <button
+            className='btn-solid-red flex-1 md:flex-none'
+            type='button'
+            onClick={handleLengkapiData}
+          >
+            Lengkapi Data
+          </button>
+          <button
+            className='btn-light flex-1 md:flex-none'
+            type='button'
+            onClick={() => {
+              toast.error(
+                'Mohon lengkapi data perusahaan sebelum melakukan pengajuan tempo'
+              );
+            }}
+          >
+            Batal
+          </button>
+        </div>
+      </BottomPopup>
       {isDesktop && (
         <div className=''>
           <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
@@ -563,13 +678,71 @@ const InformasiPerusahaan = ({
                         </div>
                       )}
                     </div>
-                    <div className='w-1/3'>
+                    <div className='w-1/3' ref={districtRef}>
+                      <Controller
+                        name='district'
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={districts}
+                            disabled={!watchState || !watchCity}
+                            placeholder='Kecamatan'
+                          />
+                        )}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.district}
+                        </div>
+                      )}
+                    </div>
+                    <div className='w-1/3' ref={subDistrictRef}>
+                      <Controller
+                        name='subDistrict'
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={subDistricts}
+                            disabled={!watchDistrict}
+                            placeholder='Kelurahan'
+                          />
+                        )}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.district}
+                        </div>
+                      )}
+                    </div>
+                    <div className='w-1/3' ref={zipRef}>
+                      <Controller
+                        name='zip'
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={zips}
+                            disabled={!watchsubDistrict}
+                            placeholder='Zip'
+                          />
+                        )}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.district}
+                        </div>
+                      )}
+                    </div>
+                    {/* <div className='w-1/3'>
                       <input
                         id='zip'
                         name='zip'
                         ref={zipRef}
                         placeholder='Kode Pos'
                         type='number'
+                        disabled={!watchsubDistrict}
                         value={form.zip}
                         className='form-input'
                         onChange={handleInputChange}
@@ -579,7 +752,7 @@ const InformasiPerusahaan = ({
                           {errors.zip}
                         </div>
                       )}
-                    </div>
+                    </div> */}
                   </div>
                 </div>
               </div>
@@ -712,9 +885,9 @@ const InformasiPerusahaan = ({
 
               <div className='flex flex-row  justify-between items-start'>
                 <div className='w-2/5 text-nowrap'>
-                  <label className='form-label '>
+                  <label className='form-label text-wrap'>
                     Estimasi Pembelian pertahun{' '}
-                    <span className=' opacity-60'>(Opsional)</span>
+                    <span className=' opacity-60 '>(Opsional)</span>
                   </label>
                 </div>
                 <div className='w-3/5'>
@@ -799,14 +972,38 @@ const InformasiPerusahaan = ({
               <div className='flex flex-row justify-between items-start'>
                 <div className='w-2/5'>
                   <label className='form-label  text-wrap '>
-                    Apakah bersedia transaksi via website?
+                    Apakah terdapat vendor portal pada perusahaan anda?
                   </label>
-                  {!isKonfirmasi && (
-                    <span className='text-xs opacity-60'>
-                      Pilih produk bisa lebih dari 1
-                    </span>
+                </div>
+                <div className='w-3/5 flex flex-col justify-start'>
+                  <div className='flex gap-x-4' ref={portalRef}>
+                    <RadioGroup
+                      onChange={handleCheckboxPortalChange}
+                      value={form.portal}
+                    >
+                      <Stack direction='row'>
+                        <Radio colorScheme='red' value='ada'>
+                          Ya, ada
+                        </Radio>
+                        <Radio colorScheme='red' value='tidak'>
+                          Tidak ada
+                        </Radio>
+                      </Stack>
+                    </RadioGroup>
+                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.portal}
+                    </div>
                   )}
                 </div>
+              </div>
+              <div className='flex flex-row justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-wrap '>
+                    Apakah bersedia transaksi via website?
+                  </label>
+                </div>
                 <div className='w-3/5 flex flex-col justify-start'>
                   <div className='flex gap-x-4' ref={bersediaRef}>
                     <RadioGroup
@@ -822,28 +1019,6 @@ const InformasiPerusahaan = ({
                         </Radio>
                       </Stack>
                     </RadioGroup>
-                    {/* <Checkbox
-                  name='bersedia'
-                  borderColor='gray.600'
-                  colorScheme='red'
-                  isChecked={bersedia === true} // Checked when bersedia is true
-                  onChange={() => handleCheckboxBersediaChange('bersedia')}
-                  value={true}
-                  size='md'
-                >
-                  Saya bersedia
-                </Checkbox>
-                <Checkbox
-                  name='bersedia'
-                  borderColor='gray.600'
-                  colorScheme='red'
-                  isChecked={bersedia === false} // Checked when bersedia is false
-                  onChange={() => handleCheckboxBersediaChange('tidakBersedia')}
-                  value={false}
-                  size='md'
-                >
-                  Tidak bersedia
-                </Checkbox> */}
                   </div>
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
@@ -1027,6 +1202,25 @@ const InformasiPerusahaan = ({
                         </div>
                       )}
                     </div>
+                    <div className='w-1/3' ref={districtRef}>
+                      <Controller
+                        name='district'
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={districts}
+                            disabled={!watchCity}
+                            placeholder='Kecamatan'
+                          />
+                        )}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.district}
+                        </div>
+                      )}
+                    </div>
                     <div className='w-1/3'>
                       <input
                         id='zip'
-- 
cgit v1.2.3


From 0178a1f88d7d34824562e1413be073c0795a47cf Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 16 Dec 2024 17:42:31 +0700
Subject: <iman> update code

---
 .../component/informasiPerusahaan.jsx              | 310 +++++++++++++--------
 1 file changed, 192 insertions(+), 118 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index f8a0bc55..9850e927 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -640,100 +640,124 @@ const InformasiPerusahaan = ({
                       </div>
                     )}
                   </div>
-                  <div className='sub-alamat flex flex-row w-full gap-3'>
-                    <div className='w-2/5' ref={stateRef}>
-                      <Controller
-                        name='state'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={states}
-                            placeholder='Provinsi'
-                          />
+                  <div
+                    className={` sub-alamat flex ${
+                      isKonfirmasi ? 'flex-col' : 'flex-row'
+                    } w-full gap-3`}
+                  >
+                    <div
+                      className={`flex  ${
+                        isKonfirmasi
+                          ? ' flex-row gap-3 w-full'
+                          : 'flex-row gap-3 w-2/5'
+                      }`}
+                    >
+                      <div
+                        className={`${isKonfirmasi ? 'w-full' : 'w-full'}`}
+                        ref={stateRef}
+                      >
+                        <Controller
+                          name='state'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={states}
+                              placeholder='Provinsi'
+                            />
+                          )}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.state}
+                          </div>
                         )}
-                      />
-                      {chekValid && (
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.state}
-                        </div>
-                      )}
-                    </div>
-                    <div className='w-1/3' ref={cityRef}>
-                      <Controller
-                        name='city'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={cities}
-                            disabled={!watchState}
-                            placeholder='Kota'
-                          />
+                      </div>
+                      <div
+                        className={`${isKonfirmasi ? 'w-full' : 'w-full'}`}
+                        ref={cityRef}
+                      >
+                        <Controller
+                          name='city'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={cities}
+                              disabled={!watchState}
+                              placeholder='Kota'
+                            />
+                          )}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.city}
+                          </div>
                         )}
-                      />
-                      {chekValid && (
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.city}
-                        </div>
-                      )}
+                      </div>
                     </div>
-                    <div className='w-1/3' ref={districtRef}>
-                      <Controller
-                        name='district'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={districts}
-                            disabled={!watchState || !watchCity}
-                            placeholder='Kecamatan'
-                          />
+                    <div
+                      className={`flex-row flex gap-2 justify-between  ${
+                        isKonfirmasi ? 'w-full' : 'w-3/5'
+                      }`}
+                    >
+                      <div className='w-full' ref={districtRef}>
+                        <Controller
+                          name='district'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={districts}
+                              disabled={!watchState || !watchCity}
+                              placeholder='Kecamatan'
+                            />
+                          )}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.district}
+                          </div>
                         )}
-                      />
-                      {chekValid && (
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.district}
-                        </div>
-                      )}
-                    </div>
-                    <div className='w-1/3' ref={subDistrictRef}>
-                      <Controller
-                        name='subDistrict'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={subDistricts}
-                            disabled={!watchDistrict}
-                            placeholder='Kelurahan'
-                          />
+                      </div>
+                      <div className='w-full' ref={subDistrictRef}>
+                        <Controller
+                          name='subDistrict'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={subDistricts}
+                              disabled={!watchDistrict}
+                              placeholder='Kelurahan'
+                            />
+                          )}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.district}
+                          </div>
                         )}
-                      />
-                      {chekValid && (
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.district}
-                        </div>
-                      )}
-                    </div>
-                    <div className='w-1/3' ref={zipRef}>
-                      <Controller
-                        name='zip'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={zips}
-                            disabled={!watchsubDistrict}
-                            placeholder='Zip'
-                          />
+                      </div>
+                      <div className='w-full' ref={zipRef}>
+                        <Controller
+                          name='zip'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={zips}
+                              disabled={!watchsubDistrict}
+                              placeholder='Zip'
+                            />
+                          )}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.zip}
+                          </div>
                         )}
-                      />
-                      {chekValid && (
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.district}
-                        </div>
-                      )}
+                      </div>
                     </div>
                     {/* <div className='w-1/3'>
                       <input
@@ -1163,9 +1187,14 @@ const InformasiPerusahaan = ({
                   className='form-input'
                   onChange={handleInputChange}
                 />
-                <div className='w-full text-nowrap'>
-                  <div className='sub-alamat flex flex-row w-full gap-3'>
-                    <div className='w-2/5' ref={stateRef}>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.street}
+                  </div>
+                )}
+                <div className='w-full text-warp gap-3 flex flex-col'>
+                  <div className='sub-alamat flex flex-row w-full gap-3 '>
+                    <div className='w-full' ref={stateRef}>
                       <Controller
                         name='state'
                         control={control}
@@ -1183,7 +1212,7 @@ const InformasiPerusahaan = ({
                         </div>
                       )}
                     </div>
-                    <div className='w-1/3' ref={cityRef}>
+                    <div className='w-full' ref={cityRef}>
                       <Controller
                         name='city'
                         control={control}
@@ -1202,7 +1231,9 @@ const InformasiPerusahaan = ({
                         </div>
                       )}
                     </div>
-                    <div className='w-1/3' ref={districtRef}>
+                  </div>
+                  <div className='flex flex-row gap-3'>
+                    <div className='w-full' ref={districtRef}>
                       <Controller
                         name='district'
                         control={control}
@@ -1221,16 +1252,37 @@ const InformasiPerusahaan = ({
                         </div>
                       )}
                     </div>
-                    <div className='w-1/3'>
-                      <input
-                        id='zip'
+                    <div className='w-full' ref={subDistrictRef}>
+                      <Controller
+                        name='subDistrict'
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={subDistricts}
+                            disabled={!watchDistrict}
+                            placeholder='Kelurahan'
+                          />
+                        )}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.district}
+                        </div>
+                      )}
+                    </div>
+                    <div className='w-full'>
+                      <Controller
                         name='zip'
-                        ref={zipRef}
-                        placeholder='Kode Pos'
-                        type='number'
-                        value={form.zip}
-                        className='form-input'
-                        onChange={handleInputChange}
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={zips}
+                            disabled={!watchsubDistrict}
+                            placeholder='Zip'
+                          />
+                        )}
                       />
                       {chekValid && (
                         <div className='text-caption-2 text-danger-500 mt-1'>
@@ -1245,11 +1297,6 @@ const InformasiPerusahaan = ({
                     Isi detail alamat sesuai dengan yang terdaftar
                   </span>
                 )}
-                {chekValid && (
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.street}
-                  </div>
-                )}
               </div>
 
               <div className='flex flex-col gap-2  justify-between items-start'>
@@ -1279,6 +1326,11 @@ const InformasiPerusahaan = ({
 
               <div className='flex flex-col gap-2  justify-between items-start'>
                 <label className='form-label'>Data Bank</label>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>
+                    Isi data bank perusahaan sesuai dengan yang terdaftar
+                  </span>
+                )}
                 <div className='flex gap-3 flex-row'>
                   <div>
                     <input
@@ -1291,6 +1343,11 @@ const InformasiPerusahaan = ({
                       className='form-input'
                       onChange={handleInputChange}
                     />
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.bankName}
+                      </div>
+                    )}
                   </div>
                   <div>
                     <input
@@ -1327,16 +1384,6 @@ const InformasiPerusahaan = ({
                     )}
                   </div>
                 </div>
-                {!isKonfirmasi && (
-                  <span className='text-xs opacity-60'>
-                    Isi data bank perusahaan sesuai dengan yang terdaftar
-                  </span>
-                )}
-                {chekValid && (
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.bankName}
-                  </div>
-                )}
               </div>
 
               <div className='flex flex-col gap-2  justify-between items-start'>
@@ -1406,6 +1453,33 @@ const InformasiPerusahaan = ({
                 indoteknik.com
               </div>
               <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+
+              <div className='flex flex-col gap justify-between items-start'>
+                <label className='form-label  text-wrap '>
+                  Apakah terdapat vendor portal pada perusahaan anda?
+                </label>
+                <div className='flex gap-x-4' ref={bersediaRef}>
+                  <RadioGroup
+                    size='sm'
+                    onChange={handleCheckboxPortalChange}
+                    value={form.portal}
+                  >
+                    <Stack direction='col'>
+                      <Radio colorScheme='red' value='ada'>
+                        Ya, ada
+                      </Radio>
+                      <Radio colorScheme='red' value='tidak'>
+                        Tidak ada
+                      </Radio>
+                    </Stack>
+                  </RadioGroup>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.portal}
+                  </div>
+                )}
+              </div>
               <div className='flex flex-col gap justify-between items-start'>
                 <label className='form-label  text-wrap '>
                   Apakah bersedia transaksi via website?
@@ -1428,7 +1502,7 @@ const InformasiPerusahaan = ({
                 </div>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.estimasi}
+                    {errors.bersedia}
                   </div>
                 )}
               </div>
-- 
cgit v1.2.3


From dd8a56ad12d054e121965c41bcb077158690b208 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 17 Dec 2024 17:07:44 +0700
Subject: <iman> update code

---
 .../component/informasiPerusahaan.jsx              | 103 +++++++++++++++++----
 1 file changed, 83 insertions(+), 20 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 9850e927..4bc04a3f 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -73,9 +73,9 @@ const InformasiPerusahaan = ({
 
   const watchState = watch('state');
   useEffect(() => {
-    setValue('city', '');
-    setValue('district', '');
-    setValue('subDistrict', '');
+    // setValue('city', '');
+    // setValue('district', '');
+    // setValue('subDistrict', '');
     if (watchState) {
       updateForm('state', `${watchState}`);
       validate();
@@ -133,6 +133,15 @@ const InformasiPerusahaan = ({
 
   useEffect(() => {
     let kelurahan = '';
+    let kecamatan = '';
+
+    if (watchDistrict) {
+      for (const data in districts) {
+        if (districts[data].value == watchDistrict) {
+          kecamatan = districts[data].label.toLowerCase();
+        }
+      }
+    }
 
     if (watchsubDistrict) {
       updateForm('subDistrict', `${watchsubDistrict}`);
@@ -147,13 +156,30 @@ const InformasiPerusahaan = ({
           `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}`
         );
 
+        let dataMasuk = []; // Array untuk menyimpan kode pos yang sudah diproses
+
         const result = await response.json();
-        const dataZips = result.result.map((zip) => ({
-          value: parseInt(zip.kodepos),
-          label: zip.kodepos,
-        }));
-        setZips(dataZips);
+
+        // Filter dan map data
+        const dataZips = result.result
+          .filter((zip) => zip.kecamatan.toLowerCase() === kecamatan) // Filter berdasarkan kecamatan
+          .filter((zip) => {
+            // Pastikan zip.kodepos belum ada di dataMasuk
+            if (dataMasuk.includes(zip.kodepos)) {
+              return false; // Jika sudah ada, maka skip (tidak akan ditambahkan)
+            } else {
+              dataMasuk.push(zip.kodepos); // Tambahkan ke dataMasuk
+              return true; // Tambahkan zip ke hasil
+            }
+          })
+          .map((zip) => ({
+            value: parseInt(zip.kodepos),
+            label: zip.kodepos,
+          }));
+
+        setZips(dataZips); // Set hasil ke state
       };
+
       loadZip();
     }
   }, [watchsubDistrict, setValue, subDistricts]);
@@ -744,14 +770,33 @@ const InformasiPerusahaan = ({
                           name='zip'
                           control={control}
                           render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={zips}
-                              disabled={!watchsubDistrict}
-                              placeholder='Zip'
-                            />
+                            <>
+                              {/* Jika zips tidak kosong, tampilkan dropdown */}
+                              {zips.length > 0 ? (
+                                <HookFormSelect
+                                  {...props}
+                                  options={zips}
+                                  disabled={!watchsubDistrict}
+                                  placeholder='Zip'
+                                />
+                              ) : (
+                                // Jika zips kosong, tampilkan input manual
+                                <input
+                                  id='zip'
+                                  name='zip'
+                                  ref={zipRef}
+                                  placeholder='Kode Pos'
+                                  type='number'
+                                  disabled={!watchsubDistrict}
+                                  value={form.zip}
+                                  className='form-input'
+                                  onChange={handleInputChange}
+                                />
+                              )}
+                            </>
                           )}
                         />
+
                         {chekValid && (
                           <div className='text-caption-2 text-danger-500 mt-1'>
                             {errors.zip}
@@ -1276,12 +1321,30 @@ const InformasiPerusahaan = ({
                         name='zip'
                         control={control}
                         render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={zips}
-                            disabled={!watchsubDistrict}
-                            placeholder='Zip'
-                          />
+                          <>
+                            {/* Jika zips tidak kosong, tampilkan dropdown */}
+                            {zips.length > 0 ? (
+                              <HookFormSelect
+                                {...props}
+                                options={zips}
+                                disabled={!watchsubDistrict}
+                                placeholder='Zip'
+                              />
+                            ) : (
+                              // Jika zips kosong, tampilkan input manual
+                              <input
+                                id='zip'
+                                name='zip'
+                                ref={zipRef}
+                                placeholder='Kode Pos'
+                                type='number'
+                                disabled={!watchsubDistrict}
+                                value={form.zip}
+                                className='form-input'
+                                onChange={handleInputChange}
+                              />
+                            )}
+                          </>
                         )}
                       />
                       {chekValid && (
-- 
cgit v1.2.3


From daa0b872601789815513508d48a14cbd8e1f6518 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 23 Dec 2024 13:39:47 +0700
Subject: <iman> update pengajuan tempo

---
 src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 4bc04a3f..fc0f1c28 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -95,8 +95,6 @@ const InformasiPerusahaan = ({
 
   useEffect(() => {
     if (watchCity) {
-      updateForm('city', `${watchCity}`);
-      validate();
       const loadDistricts = async () => {
         let dataDistricts = await districtApi({ cityId: watchCity });
         dataDistricts = dataDistricts.map((district) => ({
@@ -105,9 +103,13 @@ const InformasiPerusahaan = ({
         }));
         setDistricts(dataDistricts);
       };
+      if (form.city !== `${watchCity}`) {
+        updateForm('city', `${watchCity}`);
+      }
+      validate();
       loadDistricts();
     }
-  }, [watchCity, setValue]);
+  }, [watchCity]);
 
   const watchDistrict = watch('district');
   useEffect(() => {
-- 
cgit v1.2.3


From 7f92d22feb841e1405e56505c742f90cbd365ffc Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 30 Dec 2024 15:49:18 +0700
Subject: <iman> update pengajuan tempo

---
 .../component/informasiPerusahaan.jsx              | 34 ++++++++++++----------
 1 file changed, 19 insertions(+), 15 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index fc0f1c28..d385bc3b 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -73,9 +73,6 @@ const InformasiPerusahaan = ({
 
   const watchState = watch('state');
   useEffect(() => {
-    // setValue('city', '');
-    // setValue('district', '');
-    // setValue('subDistrict', '');
     if (watchState) {
       updateForm('state', `${watchState}`);
       validate();
@@ -93,6 +90,15 @@ const InformasiPerusahaan = ({
 
   const watchCity = watch('city');
 
+  // Untuk memperbarui form.city
+  useEffect(() => {
+    if (watchCity && form.city !== `${watchCity}`) {
+      updateForm('city', `${watchCity}`);
+      validate();
+    }
+  }, [watchCity]);
+
+  // Untuk memuat distrik
   useEffect(() => {
     if (watchCity) {
       const loadDistricts = async () => {
@@ -103,10 +109,6 @@ const InformasiPerusahaan = ({
         }));
         setDistricts(dataDistricts);
       };
-      if (form.city !== `${watchCity}`) {
-        updateForm('city', `${watchCity}`);
-      }
-      validate();
       loadDistricts();
     }
   }, [watchCity]);
@@ -429,9 +431,7 @@ const InformasiPerusahaan = ({
     if (form.state) {
       setValue('state', parseInt(form.state));
     }
-    if (form.city) {
-      setValue('city', parseInt(form.city));
-    }
+
     if (form.district) {
       setValue('district', parseInt(form.district));
     }
@@ -462,6 +462,11 @@ const InformasiPerusahaan = ({
       }
     }
   }, [form]);
+  useEffect(() => {
+    if (form.city) {
+      setValue('city', parseInt(form.city));
+    }
+  }, [form.city]);
   useEffect(() => {
     const loadProfile = async () => {
       try {
@@ -469,6 +474,9 @@ const InformasiPerusahaan = ({
         if (dataProfile.name) {
           updateForm('name', dataProfile.name);
         }
+        if (dataProfile.street) {
+          updateForm('street', dataProfile.street);
+        }
         if (dataProfile.stateId.id) {
           updateForm('state', `${dataProfile.stateId.id}`);
         }
@@ -481,9 +489,6 @@ const InformasiPerusahaan = ({
         if (dataProfile.subDistrict.id) {
           updateForm('subDistrict', `${dataProfile.subDistrict.id}`);
         }
-        if (dataProfile.alamatBisnis) {
-          updateForm('street', dataProfile.alamatBisnis);
-        }
         if (dataProfile.zip) {
           updateForm('zip', dataProfile.zip);
         }
@@ -509,7 +514,7 @@ const InformasiPerusahaan = ({
   useEffect(() => {
     const loadProfile = async () => {
       try {
-        const dataProfile = await addressApi({ id: auth.partnerId });
+        const dataProfile = await addressApi({ id: auth.parentId });
         setValue('industryId', parseInt(dataProfile.industryId));
         setValue('state', parseInt(dataProfile.stateId.id));
         setValue('city', parseInt(dataProfile.city.id));
@@ -528,7 +533,6 @@ const InformasiPerusahaan = ({
   const handleLengkapiData = () => {
     router.push('/my/profile');
   };
-
   return (
     <>
       <BottomPopup
-- 
cgit v1.2.3


From 72a2c17094eca3d08c1a42c528f869befdb6131e Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 7 Jan 2025 11:10:19 +0700
Subject: <iman> update perbaiki kata kata

---
 src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index d385bc3b..25a3a7ee 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -616,7 +616,7 @@ const InformasiPerusahaan = ({
                   <label className='form-label  text-nowrap'>Industri</label>
                   {!isKonfirmasi && (
                     <span className='text-xs opacity-60'>
-                      isi detail perusahaan sesuai dengan nama yang terdaftar
+                      Pilih jenis industri perusahaan anda
                     </span>
                   )}
                 </div>
@@ -628,7 +628,7 @@ const InformasiPerusahaan = ({
                       <HookFormSelect
                         {...props}
                         options={industries}
-                        placeholder={'Pilih industri bisnis anda'}
+                        placeholder={'Pilih industri perusahaan anda'}
                       />
                     )}
                   />
-- 
cgit v1.2.3

