<iman> update pengajuan tempo

3 files changed, 731 insertions, 1 deletions

diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
index e69de29b..d292449b 100644
--- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
@@ -0,0 +1,725 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { Controller, set, useForm } from 'react-hook-form';
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import odooApi from '~/libs/odooApi';
+import stateApi from '@/lib/address/api/stateApi.js';
+import cityApi from '@/lib/address/api/cityApi';
+import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
+import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+const KontakPerusahaan = ({ 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(null);
+  const category_produk = [
+    { id: 1, name: 'Pengaman, Kesehatan & Keamanan' },
+    { id: 2, name: 'Perkakas Tangan, Listrik & Pneumatic' },
+    { id: 3, name: 'Mesin Industrial' },
+    { id: 4, name: 'Mesin Pertanian & Perkebunan' },
+    { id: 5, name: 'Mesin Pembersih & Janitorial' },
+    { id: 6, name: 'Cairan Berbahan Kimia' },
+    { id: 7, name: 'Perlengkapan Pengukuran & Pengujian' },
+    { id: 8, name: 'Peralatan Listrik & Elektronik' },
+    { id: 9, name: 'Perlengkapan Logistik & Gudang' },
+    { id: 10, name: 'Peralatan Kantor & Stationery' },
+    { id: 11, name: 'Komponen & Aksesoris' },
+    { id: 12, name: 'Peralatan Horeca & Food Service' },
+  ];
+
+  useEffect(() => {
+    const loadState = async () => {
+      let dataState = await stateApi();
+      dataState = dataState.map((state) => ({
+        value: state.id,
+        label: state.name,
+      }));
+      setState(dataState);
+    };
+    loadState();
+  }, []);
+
+  const watchState = watch('state');
+  useEffect(() => {
+    updateForm('city', '');
+    if (watchState) {
+      updateForm('state', `${watchState}`);
+      validate();
+      const loadCities = async () => {
+        let dataCities = await cityApi({ stateId: watchState });
+        dataCities = dataCities.map((city) => ({
+          value: city.id,
+          label: city.name,
+        }));
+        setCities(dataCities);
+      };
+      loadCities();
+    }
+  }, [watchState]);
+
+  const watchCity = watch('city');
+  useEffect(() => {
+    if (watchCity) {
+      updateForm('city', `${watchCity}`);
+      validate();
+    }
+  }, [watchCity]);
+
+  useEffect(() => {
+    const loadIndustries = async () => {
+      const dataIndustries = await odooApi('GET', '/api/v1/partner/industry');
+      setIndustries(
+        dataIndustries?.map((o) => ({
+          value: o.id,
+          label: o.name,
+          category: o.category,
+        }))
+      );
+    };
+    loadIndustries();
+  }, []);
+
+  useEffect(() => {
+    const selectedIndustryType = industries.find(
+      (industry) => industry.value === watch('industry_id')
+    );
+    if (selectedIndustryType) {
+      updateForm('industry_id', `${selectedIndustryType?.value}`);
+      validate();
+      setSelectedCategory(selectedIndustryType.category);
+    }
+  }, [watch('industry_id'), industries]);
+
+  const estimasiValue = watch('estimasi');
+  const tempoLimitValue = watch('tempoLimit');
+
+  // Memformat angka menjadi format rupiah
+  const formatRupiah = (value) => {
+    if (!value) return '';
+    const numberString = value.replace(/[^0-9]/g, ''); // Menghapus karakter non-digit
+    return numberString
+      ? 'Rp ' + new Intl.NumberFormat('id-ID').format(numberString)
+      : '';
+  };
+
+  const handleChange = (e) => {
+    const value = e.target.value;
+    const formattedValue = formatRupiah(value);
+    console.log('formattedValue', formattedValue);
+    updateForm('estimasi', formattedValue.replace(/^Rp\s*/, ''));
+    validate();
+  };
+  const onChangeTempoDuration = (e) => {
+    updateForm('tempoDuration', `${e}`);
+    validate();
+  };
+
+  const onChangeTempoLimit = (e) => {
+    updateForm('tempoLimit', `${e}`);
+    validate();
+  };
+  const handleCheckboxBersediaChange = (value) => {
+    if (value === 'bersedia') {
+      setBersedia(true);
+    } else if (value === 'tidakBersedia') {
+      setBersedia(false);
+    }
+    updateForm('bersedia', `${value === 'bersedia'}`);
+    validate();
+  };
+  const [selectedIds, setSelectedIds] = useState([]);
+
+  const handleCheckboxChange = (id) => {
+    setSelectedIds((prevSelected) =>
+      prevSelected.includes(id)
+        ? prevSelected.filter((selectedId) => selectedId !== id)
+        : [...prevSelected, id]
+    );
+    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 className='font-bold'>Kontak Person</h1>
+      </div>
+      <form className='flex mt-4 flex-col w-full '>
+        <div className='w-full grid grid-row-2 gap-5'>
+          <div className='flex flex-row  justify-between items-start'>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                Nama Lengkap Direktur
+              </label>
+            </div>
+            <div className='w-3/5'>
+              <input
+                id='name'
+                name='name'
+                placeholder='Masukkan nama perusahaan'
+                type='text'
+                className='form-input'
+                aria-invalid={errors.name}
+                ref={nameRef}
+                onChange={handleInputChange}
+              />
+              <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 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>
+            <div className='w-3/5'>
+              <Controller
+                name='industry_id'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect
+                    {...props}
+                    options={industries}
+                    placeholder={'Pilih industri bisnis anda'}
+                  />
+                )}
+              />
+              {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>
+
+          <div className='flex flex-row  justify-between items-start'>
+            <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'>
+              <div>
+                <input
+                  id='street'
+                  name='street'
+                  ref={streetRef}
+                  placeholder='Masukkan alamat lengkap perusahaan'
+                  type='text'
+                  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'
+                    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>
+              <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
+                id='mobile'
+                name='mobile'
+                ref={mobileRef}
+                placeholder='Masukkan nomor telfon perusahaan'
+                type='text'
+                className='form-input'
+                aria-invalid={errors.mobile}
+                onChange={handleInputChange}
+              />
+              {chekValid && (
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.mobile}
+                </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
+                  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>
+                {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'
+                  className='form-input'
+                  onChange={handleInputChange}
+                />
+                <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'
+                  className='form-input'
+                  onChange={handleInputChange}
+                />
+                <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>
+              <label className='form-label w-2/5 text-nowrap'>
+                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'
+                className='form-input'
+                onChange={handleInputChange}
+              />
+            </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
+                  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.estimasi}
+                </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' ref={tempoDurationRef}>
+                <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>
+                {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>
+                  <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={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);
+                              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>
+            </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 flex-col justify-start'>
+              <div className='flex gap-x-4' ref={bersediaRef}>
+                <Checkbox
+                  borderColor='gray.600'
+                  colorScheme='red'
+                  isChecked={bersedia === true} // Checked when bersedia is true
+                  onChange={() => handleCheckboxBersediaChange('bersedia')}
+                  value={true}
+                  size='md'
+                >
+                  Saya bersedia
+                </Checkbox>
+                <Checkbox
+                  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 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-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>
+      </form>
+    </>
+  );
+};
+
+export default KontakPerusahaan;
diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
index 5f250438..c15189d1 100644
--- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
+++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useMemo, useState, useEffect, useRef } from 'react';
 import Stepper from './Stepper';
 import InformasiPerusahaan from './informasiPerusahaan';
+import KontakPerusahaan from './KontakPerusahaan';
 import { Controller, useForm } from 'react-hook-form';
 import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
 import { ChevronRightIcon } from '@heroicons/react/24/outline';
@@ -13,6 +14,10 @@ const PengajuanTempo = () => {
   const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
   const [buttonSubmitClick, setButtonSubmitClick] = useState(false);
   const stepDivs = [
+    <KontakPerusahaan
+      chekValid={notValid}
+      buttonSubmitClick={buttonSubmitClick}
+    />,
     <InformasiPerusahaan
       chekValid={notValid}
       buttonSubmitClick={buttonSubmitClick}
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'>