<iman> update informasi perusahaan

2 files changed, 282 insertions, 7 deletions

diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.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;