<iman> update mobile

2 files changed, 894 insertions, 449 deletions

diff --git a/src/lib/pengajuan-tempo/component/Stepper.jsx b/src/lib/pengajuan-tempo/component/Stepper.jsx
index e9b49e12..23c27e5a 100644
--- a/src/lib/pengajuan-tempo/component/Stepper.jsx
+++ b/src/lib/pengajuan-tempo/component/Stepper.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
-
+import useDevice from '@/core/hooks/useDevice';
 const Stepper = ({ currentStep, numberOfSteps }) => {
+  const { isDesktop, isMobile } = useDevice();
   const stepLabels = [
     'Informasi Perusahaan',
     'Kontak Person',
@@ -20,7 +21,11 @@ const Stepper = ({ currentStep, numberOfSteps }) => {
       {Array.from({ length: numberOfSteps }).map((_, index) => (
         <React.Fragment key={index}>
           {isFirstStep(index) ? null : (
-            <div className={`w-48 h-[0.8px] ${activeColor(index)}`}></div>
+            <div
+              className={`${isMobile ? 'w-12' : 'w-48'} h-[0.8px] ${activeColor(
+                index
+              )}`}
+            ></div>
           )}
           <div
             className={`w-6 h-6 ${
@@ -30,10 +35,20 @@ const Stepper = ({ currentStep, numberOfSteps }) => {
             }  rounded-full flex justify-center items-center`}
           >
             <div className='relative text-xs'>
-              <div className='absolute z-10 -top-14  w-48 h-full  -left-24'>
+              <div
+                className={`absolute z-10  ${
+                  isMobile
+                    ? `w-12 h-full top-4 ${
+                        isFinalStep(index) ? '-left-16' : '-left-4 -top-14'
+                      }`
+                    : 'w-48 h-full  -left-24'
+                }  `}
+              >
                 <div
                   className={`relative w-full max-w-md p-2 text-center ${
-                    currentStep == index ? 'text-red-500' : ''
+                    currentStep == index
+                      ? 'text-red-500'
+                      : `${isMobile ? 'hidden' : ''}`
                   }  text-nowrap`}
                 >
                   {stepLabels[index]}
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>
+      )}
+    </>
   );
 };