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