<iman> update pengajuan tempo

6 files changed, 864 insertions, 4 deletions

diff --git a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts
index 6f3bc13d..8891e6ea 100644
--- a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts
+++ b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand';
-import { TempoProps } from '~/types/tempo';
-import { TempoSchema } from '~/validations/tempo';
+import { TempoProps, TempoPropsKontakPerson } from '~/types/tempo';
+import { TempoSchema, TempoSchemaKontakPerson } from '~/validations/tempo';
 import { boolean, ZodError } from 'zod';
 
 type State = {
@@ -91,3 +91,85 @@ export const usePengajuanTempoStore = create<State & Action>((set, get) => ({
       },
     }),
 }));
+
+type StateKontakPerson = {
+  form: TempoPropsKontakPerson;
+  errors: {
+    [key in keyof TempoPropsKontakPerson]?: string;
+  };
+  isCheckedTNC: boolean;
+  isOpenTNC: boolean;
+  isValidCaptcha: boolean;
+};
+export const usePengajuanTempoStoreKontakPerson = create<
+  StateKontakPerson & Action
+>((set, get) => ({
+  form: {
+    direkturName: '',
+    direkturMobile: '',
+    direkturEmail: '',
+    industry_id: '',
+    street: '',
+    state: '',
+    city: '',
+    zip: '',
+    bankName: '',
+    accountName: '',
+    accountNumber: '',
+    estimasi: '',
+    tempoDuration: '',
+    bersedia: '',
+    categoryProduk: '',
+    tempoLimit: '',
+  },
+  updateForm: (name, value) =>
+    set((state) => ({ form: { ...state.form, [name]: value } })),
+
+  errors: {},
+  validate: () => {
+    try {
+      TempoSchemaKontakPerson.parse(get().form);
+      set({ errors: {} });
+    } catch (error) {
+      if (error instanceof ZodError) {
+        const errors: StateKontakPerson['errors'] = {};
+        error.errors.forEach(
+          (e) => (errors[e.path[0] as keyof TempoPropsKontakPerson] = e.message)
+        );
+        set({ errors });
+      }
+    }
+  },
+
+  isCheckedTNC: false,
+  toggleCheckTNC: () => set((state) => ({ isCheckedTNC: !state.isCheckedTNC })),
+
+  isOpenTNC: false,
+  openTNC: () => set(() => ({ isOpenTNC: true })),
+  closeTNC: () => set(() => ({ isOpenTNC: false })),
+
+  isValidCaptcha: false,
+  updateValidCaptcha: (value) => set(() => ({ isValidCaptcha: value })),
+
+  resetForm: () =>
+    set({
+      form: {
+        direkturName: '',
+        direkturMobile: '',
+        direkturEmail: '',
+        industry_id: '',
+        street: '',
+        state: '',
+        city: '',
+        zip: '',
+        bankName: '',
+        accountName: '',
+        accountNumber: '',
+        estimasi: '',
+        tempoDuration: '',
+        bersedia: '',
+        categoryProduk: '',
+        tempoLimit: '',
+      },
+    }),
+}));
diff --git a/src-migrate/types/tempo.ts b/src-migrate/types/tempo.ts
index f8a3c5b8..a4bd3d0a 100644
--- a/src-migrate/types/tempo.ts
+++ b/src-migrate/types/tempo.ts
@@ -1,4 +1,4 @@
-import { TempoSchema } from '~/validations/tempo';
+import { TempoSchema, TempoSchemaKontakPerson } from '~/validations/tempo';
 import { OdooApiRes } from './odoo';
 import { z } from 'zod';
 
@@ -18,9 +18,27 @@ export type tempoProps = {
   bersedia: string;
 };
 
+export type tempoPropsKontakPerson = {
+  direkturName: string;
+  direkturMobile: string;
+  direkturEmail: string;
+  industry_id: string;
+  street: string;
+  state: string;
+  city: string;
+  zip: string;
+  bankName: string;
+  accountName: string;
+  accountNumber: string;
+  estimasi: string;
+  tempoDuration: string;
+  bersedia: string;
+};
+
 export type TempoApiProps = OdooApiRes<TempoProps>;
 
 export type TempoProps = z.infer<typeof TempoSchema>;
+export type TempoPropsKontakPerson = z.infer<typeof TempoSchemaKontakPerson>;
 
 export type TempoResApiProps = {
   Tempo: boolean;
diff --git a/src-migrate/validations/tempo.ts b/src-migrate/validations/tempo.ts
index 6999c1c6..dca60869 100644
--- a/src-migrate/validations/tempo.ts
+++ b/src-migrate/validations/tempo.ts
@@ -26,3 +26,33 @@ export const TempoSchema = z.object({
     .string()
     .min(1, { message: 'Category produk harus dipilih' }),
 });
+export const TempoSchemaKontakPerson = z.object({
+  direkturName: z.string().min(1, { message: 'Nama harus diisi' }),
+  direkturMobile: z
+    .string()
+    .min(1, { message: 'Nomor telepon harus diisi' })
+    .refine((val) => /^\d{10,12}$/.test(val), {
+      message: 'Format nomor telepon tidak valid, contoh: 081234567890',
+    }),
+  direkturEmail: z
+    .string()
+    .min(1, { message: 'Email harus diisi' })
+    .email({ message: 'Email harus menggunakan format example@mail.com' }),
+  street: z.string().min(1, { message: 'Alamat harus diisi' }),
+  industry_id: z.string().min(1, { message: 'Jenis usaha harus dipilih' }),
+  zip: z.string().min(1, { message: 'Kode pos harus diisi' }),
+  state: z.string().min(1, { message: 'Provinsi harus dipilih' }),
+  city: z.string().min(1, { message: 'Kota harus dipilih' }),
+  bankName: z.string().min(1, { message: 'Nama bank harus diisi' }),
+  accountName: z.string().min(1, { message: 'Nama rekening harus diisi' }),
+  accountNumber: z.string().min(1, { message: 'Nomor rekening harus diisi' }),
+  estimasi: z
+    .string()
+    .min(1, { message: 'Estimasi pemmbelian pertahun harus diisi' }),
+  tempoDuration: z.string().min(1, { message: 'Durasi tempo harus dipilih' }),
+  tempoLimit: z.string().min(1, { message: 'Limit tempo harus dipilih' }),
+  bersedia: z.string().min(1, { message: 'Harus dipilih' }),
+  categoryProduk: z
+    .string()
+    .min(1, { message: 'Category produk harus dipilih' }),
+});
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'>