summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx735
-rw-r--r--src/lib/pengajuan-tempo/component/PengajuanTempo.jsx17
-rw-r--r--src/lib/pengajuan-tempo/component/Pengiriman.jsx1486
-rw-r--r--src/lib/pengajuan-tempo/component/Referensi.jsx557
-rw-r--r--src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx176
5 files changed, 2012 insertions, 959 deletions
diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
index 1281e387..091873a7 100644
--- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
@@ -1,5 +1,6 @@
import React, { useEffect, useMemo, useRef } from 'react';
import { usePengajuanTempoStoreKontakPerson } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+import useDevice from '@/core/hooks/useDevice';
const KontakPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
const {
formKontakPerson,
@@ -7,7 +8,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
validateKontakPerson,
updateFormKontakPerson,
} = usePengajuanTempoStoreKontakPerson();
-
+ const { isDesktop, isMobile } = useDevice();
const handleInputChange = (event) => {
const { name, value } = event.target;
updateFormKontakPerson(name, value);
@@ -84,279 +85,501 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
validateKontakPerson();
}, [buttonSubmitClick]);
return (
- <div className=''>
- <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
- Kontak Person
- </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 Lengkap Direktur
- </label>
- </div>
- <div className='w-3/5'>
- <input
- value={formKontakPerson.direkturName}
- id='direkturName'
- name='direkturName'
- placeholder='Masukkan nama direktur anda'
- type='text'
- className='form-input'
- aria-invalid={errorsKontakPerson.direkturName}
- ref={direkturNameRef}
- onChange={handleInputChange}
- />
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsKontakPerson.direkturName}
+ <>
+ {isDesktop && (
+ <div className=''>
+ <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
+ Kontak Person
+ </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 Lengkap Direktur
+ </label>
</div>
- )}
- </div>
- </div>
+ <div className='w-3/5'>
+ <input
+ value={formKontakPerson.direkturName}
+ id='direkturName'
+ name='direkturName'
+ placeholder='Masukkan nama direktur anda'
+ type='text'
+ className='form-input'
+ aria-invalid={errorsKontakPerson.direkturName}
+ ref={direkturNameRef}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.direkturName}
+ </div>
+ )}
+ </div>
+ </div>
- <div className='flex flex-row justify-between items-start'>
- <div className='w-2/5'>
- <label className='form-label text-nowrap'>
- No. Telpon Direktur
- </label>
- {!isKonfirmasi && (
- <span className='text-xs opacity-60'>
- isi nomor telpon direktur di perusahaan kamu
- </span>
- )}
- </div>
- <div className='w-3/5'>
- <input
- id='direkturMobile'
- name='direkturMobile'
- ref={direkturMobileRef}
- placeholder='Masukkan nomor direktur anda'
- type='tel'
- value={formKontakPerson.direkturMobile}
- className='form-input'
- aria-invalid={errorsKontakPerson.direkturMobile}
- onChange={handleInputChange}
- />
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsKontakPerson.direkturMobile}
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ No. Telpon Direktur
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ isi nomor telpon direktur di perusahaan kamu
+ </span>
+ )}
</div>
- )}
- </div>
- </div>
+ <div className='w-3/5'>
+ <input
+ id='direkturMobile'
+ name='direkturMobile'
+ ref={direkturMobileRef}
+ placeholder='Masukkan nomor direktur anda'
+ type='tel'
+ value={formKontakPerson.direkturMobile}
+ className='form-input'
+ aria-invalid={errorsKontakPerson.direkturMobile}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.direkturMobile}
+ </div>
+ )}
+ </div>
+ </div>
- <div className='flex flex-row justify-between items-start'>
- <div className='w-2/5'>
- <label className='form-label text-nowrap'>Email Direktur</label>
- {!isKonfirmasi && (
- <span className='text-xs opacity-60'>
- isi email Direktur yang sesuai
- </span>
- )}
- </div>
- <div className='w-3/5'>
- <input
- id='direkturEmail'
- name='direkturEmail'
- ref={direkturEmailRef}
- placeholder='contoh@email.com'
- type='email'
- value={formKontakPerson.direkturEmail}
- className='form-input'
- aria-invalid={errorsKontakPerson.direkturEmail}
- onChange={handleInputChange}
- />
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsKontakPerson.direkturEmail}
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Email Direktur
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ isi email Direktur yang sesuai
+ </span>
+ )}
</div>
- )}
- </div>
- </div>
+ <div className='w-3/5'>
+ <input
+ id='direkturEmail'
+ name='direkturEmail'
+ ref={direkturEmailRef}
+ placeholder='contoh@email.com'
+ type='email'
+ value={formKontakPerson.direkturEmail}
+ className='form-input'
+ aria-invalid={errorsKontakPerson.direkturEmail}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.direkturEmail}
+ </div>
+ )}
+ </div>
+ </div>
- <div className='flex flex-row justify-between items-start'>
- <div className='w-2/5'>
- <label className='form-label text-nowrap'>Nama Purchasing</label>
- {!isKonfirmasi && (
- <span className='text-xs opacity-60'>
- isi nama purchasing yang bertanggung jawab di perusahaan anda
- </span>
- )}
- </div>
- <div className='w-3/5'>
- <input
- id='purchasingName'
- name='purchasingName'
- ref={purchasingNameRef}
- placeholder='Masukkan nama purchasing anda'
- value={formKontakPerson.purchasingName}
- type='text'
- className='form-input'
- aria-invalid={errorsKontakPerson.purchasingName}
- onChange={handleInputChange}
- />
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsKontakPerson.purchasingName}
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Nama Purchasing
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ isi nama purchasing yang bertanggung jawab di perusahaan
+ anda
+ </span>
+ )}
</div>
- )}
- </div>
- </div>
+ <div className='w-3/5'>
+ <input
+ id='purchasingName'
+ name='purchasingName'
+ ref={purchasingNameRef}
+ placeholder='Masukkan nama purchasing anda'
+ value={formKontakPerson.purchasingName}
+ type='text'
+ className='form-input'
+ aria-invalid={errorsKontakPerson.purchasingName}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.purchasingName}
+ </div>
+ )}
+ </div>
+ </div>
- <div className='flex flex-row justify-between items-start'>
- <div className='w-2/5'>
- <label className='form-label text-nowrap'>
- No. Telpon Purchasing
- </label>
- {!isKonfirmasi && (
- <span className='text-xs opacity-60'>
- isi nomor purchasing yang bertanggung jawab di perusahaan anda
- </span>
- )}
- </div>
- <div className='w-3/5'>
- <input
- id='purchasingMobile'
- name='purchasingMobile'
- ref={financeMobileRef}
- placeholder='Masukkan nomor purchasing anda'
- value={formKontakPerson.purchasingMobile}
- type='tel'
- className='form-input'
- aria-invalid={errorsKontakPerson.purchasingMobile}
- onChange={handleInputChange}
- />
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsKontakPerson.purchasingMobile}
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ No. Telpon Purchasing
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ isi nomor purchasing yang bertanggung jawab di perusahaan
+ anda
+ </span>
+ )}
</div>
- )}
- </div>
- </div>
+ <div className='w-3/5'>
+ <input
+ id='purchasingMobile'
+ name='purchasingMobile'
+ ref={financeMobileRef}
+ placeholder='Masukkan nomor purchasing anda'
+ value={formKontakPerson.purchasingMobile}
+ type='tel'
+ className='form-input'
+ aria-invalid={errorsKontakPerson.purchasingMobile}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.purchasingMobile}
+ </div>
+ )}
+ </div>
+ </div>
- <div className='flex flex-row justify-between items-start'>
- <div className='w-2/5'>
- <label className='form-label text-nowrap'>
- Email Purchasing
- </label>
- {!isKonfirmasi && (
- <span className='text-xs opacity-60'>
- isi email purchasing dengan benar
- </span>
- )}
- </div>
- <div className='w-3/5'>
- <input
- id='purchasingEmail'
- name='purchasingEmail'
- ref={purchasingEmailRef}
- placeholder='contoh@email.com'
- value={formKontakPerson.purchasingEmail}
- type='email'
- className='form-input'
- aria-invalid={errorsKontakPerson.purchasingEmail}
- onChange={handleInputChange}
- />
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsKontakPerson.purchasingEmail}
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Email Purchasing
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ isi email purchasing dengan benar
+ </span>
+ )}
</div>
- )}
- </div>
- </div>
+ <div className='w-3/5'>
+ <input
+ id='purchasingEmail'
+ name='purchasingEmail'
+ ref={purchasingEmailRef}
+ placeholder='contoh@email.com'
+ value={formKontakPerson.purchasingEmail}
+ type='email'
+ className='form-input'
+ aria-invalid={errorsKontakPerson.purchasingEmail}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.purchasingEmail}
+ </div>
+ )}
+ </div>
+ </div>
- <div className='flex flex-row justify-between items-start'>
- <div className='w-2/5'>
- <label className='form-label text-nowrap'>Nama Finance</label>
- {!isKonfirmasi && (
- <span className='text-xs opacity-60'>
- isi nama finance yang bertanggung jawab di perusahaan anda
- </span>
- )}
- </div>
- <div className='w-3/5'>
- <input
- id='financeName'
- name='financeName'
- ref={financeNameRef}
- placeholder='Masukkan nama finance'
- value={formKontakPerson.financeName}
- type='text'
- className='form-input'
- aria-invalid={errorsKontakPerson.financeName}
- onChange={handleInputChange}
- />
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsKontakPerson.financeName}
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Nama Finance
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ isi nama finance yang bertanggung jawab di perusahaan anda
+ </span>
+ )}
</div>
- )}
- </div>
- </div>
- <div className='flex flex-row justify-between items-start'>
- <div className='w-2/5'>
- <label className='form-label text-nowrap'>
- No. Telpon Finance
- </label>
- {!isKonfirmasi && (
- <span className='text-xs opacity-60'>
- isi nomor finance yang bertanggung jawab di perusahaan anda
- </span>
- )}
- </div>
- <div className='w-3/5'>
- <input
- id='financeMobile'
- name='financeMobile'
- ref={financeMobileRef}
- placeholder='Masukkan nomor finance'
- value={formKontakPerson.financeMobile}
- type='tel'
- className='form-input'
- aria-invalid={errorsKontakPerson.financeMobile}
- onChange={handleInputChange}
- />
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsKontakPerson.financeMobile}
+ <div className='w-3/5'>
+ <input
+ id='financeName'
+ name='financeName'
+ ref={financeNameRef}
+ placeholder='Masukkan nama finance'
+ value={formKontakPerson.financeName}
+ type='text'
+ className='form-input'
+ aria-invalid={errorsKontakPerson.financeName}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.financeName}
+ </div>
+ )}
</div>
- )}
- </div>
- </div>
+ </div>
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ No. Telpon Finance
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ isi nomor finance yang bertanggung jawab di perusahaan
+ anda
+ </span>
+ )}
+ </div>
+ <div className='w-3/5'>
+ <input
+ id='financeMobile'
+ name='financeMobile'
+ ref={financeMobileRef}
+ placeholder='Masukkan nomor finance'
+ value={formKontakPerson.financeMobile}
+ type='tel'
+ className='form-input'
+ aria-invalid={errorsKontakPerson.financeMobile}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.financeMobile}
+ </div>
+ )}
+ </div>
+ </div>
- <div className='flex flex-row justify-between items-start'>
- <div className='w-2/5'>
- <label className='form-label text-nowrap'>Email Finance</label>
- {!isKonfirmasi && (
- <span className='text-xs opacity-60'>
- isi email finance dengan benar
- </span>
- )}
- </div>
- <div className='w-3/5'>
- <input
- id='financeEmail'
- name='financeEmail'
- ref={financeEmailRef}
- placeholder='contoh@email.com'
- type='email'
- value={formKontakPerson.financeEmail}
- className='form-input'
- aria-invalid={errorsKontakPerson.financeEmail}
- onChange={handleInputChange}
- />
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsKontakPerson.financeEmail}
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Email Finance
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ isi email finance dengan benar
+ </span>
+ )}
+ </div>
+ <div className='w-3/5'>
+ <input
+ id='financeEmail'
+ name='financeEmail'
+ ref={financeEmailRef}
+ placeholder='contoh@email.com'
+ type='email'
+ value={formKontakPerson.financeEmail}
+ className='form-input'
+ aria-invalid={errorsKontakPerson.financeEmail}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.financeEmail}
+ </div>
+ )}
</div>
- )}
+ </div>
+ </div>
+ </form>
+ </div>
+ )}
+ {isMobile && (
+ <div className='text-sm'>
+ <h1
+ className={`font-bold py-4 mt-8 ${
+ isKonfirmasi ? 'text-xl' : 'text-xl'
+ }`}
+ >
+ Kontak Person
+ </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 Lengkap Direktur
+ </label>
+ <input
+ value={formKontakPerson.direkturName}
+ id='direkturName'
+ name='direkturName'
+ placeholder='Masukkan nama direktur anda'
+ type='text'
+ className='form-input'
+ aria-invalid={errorsKontakPerson.direkturName}
+ ref={direkturNameRef}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.direkturName}
+ </div>
+ )}
+ </div>
+
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-nowrap'>
+ No. Telpon Direktur
+ </label>
+ <input
+ id='direkturMobile'
+ name='direkturMobile'
+ ref={direkturMobileRef}
+ placeholder='Masukkan nomor direktur anda'
+ type='tel'
+ value={formKontakPerson.direkturMobile}
+ className='form-input'
+ aria-invalid={errorsKontakPerson.direkturMobile}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.direkturMobile}
+ </div>
+ )}
+ </div>
+
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-nowrap'>
+ Email Direktur
+ </label>
+ <input
+ id='direkturEmail'
+ name='direkturEmail'
+ ref={direkturEmailRef}
+ placeholder='contoh@email.com'
+ type='email'
+ value={formKontakPerson.direkturEmail}
+ className='form-input'
+ aria-invalid={errorsKontakPerson.direkturEmail}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.direkturEmail}
+ </div>
+ )}
+ </div>
+
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-nowrap'>
+ Nama Purchasing
+ </label>
+ <input
+ id='purchasingName'
+ name='purchasingName'
+ ref={purchasingNameRef}
+ placeholder='Masukkan nama purchasing anda'
+ value={formKontakPerson.purchasingName}
+ type='text'
+ className='form-input'
+ aria-invalid={errorsKontakPerson.purchasingName}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.purchasingName}
+ </div>
+ )}
+ </div>
+
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-nowrap'>
+ No. Telpon Purchasing
+ </label>
+ <input
+ id='purchasingMobile'
+ name='purchasingMobile'
+ ref={financeMobileRef}
+ placeholder='Masukkan nomor purchasing anda'
+ value={formKontakPerson.purchasingMobile}
+ type='tel'
+ className='form-input'
+ aria-invalid={errorsKontakPerson.purchasingMobile}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.purchasingMobile}
+ </div>
+ )}
+ </div>
+
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-nowrap'>
+ Email Purchasing
+ </label>
+ <input
+ id='purchasingEmail'
+ name='purchasingEmail'
+ ref={purchasingEmailRef}
+ placeholder='contoh@email.com'
+ value={formKontakPerson.purchasingEmail}
+ type='email'
+ className='form-input'
+ aria-invalid={errorsKontakPerson.purchasingEmail}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.purchasingEmail}
+ </div>
+ )}
+ </div>
+
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-nowrap'>Nama Finance</label>
+ <input
+ id='financeName'
+ name='financeName'
+ ref={financeNameRef}
+ placeholder='Masukkan nama finance'
+ value={formKontakPerson.financeName}
+ type='text'
+ className='form-input'
+ aria-invalid={errorsKontakPerson.financeName}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.financeName}
+ </div>
+ )}
+ </div>
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-nowrap'>
+ No. Telpon Finance
+ </label>
+ <input
+ id='financeMobile'
+ name='financeMobile'
+ ref={financeMobileRef}
+ placeholder='Masukkan nomor finance'
+ value={formKontakPerson.financeMobile}
+ type='tel'
+ className='form-input'
+ aria-invalid={errorsKontakPerson.financeMobile}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.financeMobile}
+ </div>
+ )}
+ </div>
+
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-nowrap'>Email Finance</label>
+ <input
+ id='financeEmail'
+ name='financeEmail'
+ ref={financeEmailRef}
+ placeholder='contoh@email.com'
+ type='email'
+ value={formKontakPerson.financeEmail}
+ className='form-input'
+ aria-invalid={errorsKontakPerson.financeEmail}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsKontakPerson.financeEmail}
+ </div>
+ )}
+ </div>
</div>
- </div>
+ </form>
</div>
- </form>
- </div>
+ )}
+ </>
);
};
diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
index 04797c5f..7ed208db 100644
--- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
+++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
@@ -22,7 +22,9 @@ import createPengajuanTempoApi from '../api/createPengajuanTempoApi';
import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
import clsxm from '~/libs/clsxm';
import { toast } from 'react-hot-toast';
+import useDevice from '@/core/hooks/useDevice';
const PengajuanTempo = () => {
+ const { isDesktop, isMobile } = useDevice();
const [currentStep, setCurrentStep] = React.useState(0);
const NUMBER_OF_STEPS = 6;
const [isLoading, setIsLoading] = useState(false);
@@ -298,8 +300,17 @@ const PengajuanTempo = () => {
<Stepper currentStep={currentStep} numberOfSteps={NUMBER_OF_STEPS} />
</div>
<div>{stepDivs[currentStep]}</div>
- <section className='flex gap-10 mt-10'></section>
- <div className='flex flex-row justify-end items-center gap-4 mb-8'>
+ {isDesktop && <section className='flex gap-10 mt-10'></section>}
+ {isMobile && (
+ <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
+ )}
+ <div
+ className={`flex ${
+ isMobile
+ ? 'flex-col justify-start items-start'
+ : 'flex-row justify-end items-center'
+ } gap-4 mb-8`}
+ >
<span className='text-xs opacity-60'>
*Pastikan data yang anda masukan sudah benar dan sesuai
</span>
@@ -312,7 +323,7 @@ const PengajuanTempo = () => {
>
<Button
colorScheme='red'
- w='fit'
+ w={`${isMobile ? 'full' : 'fit'}`}
isDisabled={
(currentStep === 3 && !hasSavedata) ||
currentStep === NUMBER_OF_STEPS - 1
diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
index 956febcc..3ff14e18 100644
--- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx
+++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
@@ -6,8 +6,10 @@ 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 { usePengajuanTempoStorePengiriman } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+import useDevice from '@/core/hooks/useDevice';
const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
const { control, watch, setValue } = useForm();
+ const { isDesktop, isMobile } = useDevice();
const {
formPengiriman,
errorsPengiriman,
@@ -292,8 +294,16 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman);
updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman);
updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman);
+ } else {
+ updateFormPengiriman('streetInvoice', '');
+ updateFormPengiriman('stateInvoice', '');
+ updateFormPengiriman('cityInvoice', '');
+ setValue('streetInvoice', '');
+ setValue('stateInvoice', '');
+ setValue('cityInvoice', '');
}
updateFormPengiriman('isSameAddrees', `${sameAddress}`);
+ validatePengiriman();
}, [sameAddress]);
const getFromLocalStorage = (key) => {
@@ -322,6 +332,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
if (cachedData?.isSameAddrees) {
updateFormPengiriman('isSameAddrees', `${cachedData?.isSameAddrees}`);
}
+ validatePengiriman();
}, [cachedData?.cityPengiriman]);
useEffect(() => {
if (cachedData?.everyWeek) {
@@ -357,6 +368,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
);
setTukarInvoicePembayaran(cachedData?.tukarInvoicePembayaran);
}
+ validatePengiriman();
}, [
cachedData?.everyWeek,
cachedData?.everyWeekday,
@@ -370,197 +382,73 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
};
return (
<>
- <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
- Pengiriman
- </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 PIC Penerimaan Barang
- </label>
- </div>
- <div className='w-3/5'>
- <input
- value={formPengiriman.PICName}
- id='PICName'
- name='PICName'
- placeholder='Masukkan nama pic pengiriman disini'
- type='text'
- className='form-input'
- aria-invalid={errorsPengiriman.PICName}
- ref={PICNameRef}
- onChange={handleInputChange}
- />
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsPengiriman.PICName}
+ {isDesktop && (
+ <div>
+ <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
+ Pengiriman
+ </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 PIC Penerimaan Barang
+ </label>
</div>
- )}
- </div>
- </div>
-
- <div className='flex flex-row justify-between items-start'>
- <div className='w-2/5'>
- <label className='form-label text-nowrap'>
- Alamat Pengiriman Barang
- </label>
- {!isKonfirmasi && (
- <span className='text-xs opacity-60'>
- pastikan alamat yang anda isi sesuai dengan alamat kirim
- barang
- </span>
- )}
- </div>
- <div className='w-3/5 flex gap-3 flex-col'>
- <div>
- <input
- id='streetPengiriman'
- name='streetPengiriman'
- ref={streetPengirimanRef}
- placeholder='Masukkan alamat lengkap pengiriman barang'
- type='text'
- value={formPengiriman.streetPengiriman}
- className='form-input'
- onChange={handleInputChange}
- />
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsPengiriman.streetPengiriman}
- </div>
- )}
- </div>
- <div className='sub-alamat flex flex-row w-full gap-3'>
- <div className='w-2/5' ref={statePengirimanRef}>
- <Controller
- name='statePengiriman'
- control={control}
- render={(props) => (
- <HookFormSelect
- {...props}
- options={states}
- placeholder='Provinsi'
- />
- )}
- />
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsPengiriman.statePengiriman}
- </div>
- )}
- </div>
- <div className='w-1/3' ref={cityPengirimanRef}>
- <Controller
- name='cityPengiriman'
- control={control}
- render={(props) => (
- <HookFormSelect
- {...props}
- options={cities}
- disabled={!watchState}
- placeholder='Kota'
- />
- )}
- />
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsPengiriman.cityPengiriman}
- </div>
- )}
- </div>
- <div className='w-1/3'>
+ <div className='w-3/5'>
<input
- id='zipPengiriman'
- name='zipPengiriman'
- ref={zipRef}
- placeholder='Kode Pos'
- type='number'
- value={formPengiriman.zipPengiriman}
+ value={formPengiriman.PICName}
+ id='PICName'
+ name='PICName'
+ placeholder='Masukkan nama pic pengiriman disini'
+ type='text'
className='form-input'
+ aria-invalid={errorsPengiriman.PICName}
+ ref={PICNameRef}
onChange={handleInputChange}
/>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsPengiriman.zipPengiriman}
+ {errorsPengiriman.PICName}
</div>
)}
</div>
</div>
- </div>
- </div>
- <div className='flex flex-row justify-between items-start'>
- <div className='w-2/5'>
- <label className='form-label text-nowrap'>
- Nama PIC Penerimaan Invoice
- </label>
- </div>
- <div className='w-3/5'>
- <input
- value={formPengiriman.invoicePic}
- id='invoicePic'
- name='invoicePic'
- placeholder='Masukkan nama pic invoice disini'
- type='text'
- className='form-input'
- aria-invalid={errorsPengiriman.invoicePic}
- ref={invoicePicRef}
- onChange={handleInputChange}
- />
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsPengiriman.invoicePic}
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Alamat Pengiriman Barang
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ pastikan alamat yang anda isi sesuai dengan alamat kirim
+ barang
+ </span>
+ )}
</div>
- )}
- </div>
- </div>
-
- <div className='flex flex-row justify-between items-start'>
- <div className='w-2/5'>
- <label className='form-label text-nowrap'>
- Alamat Pengiriman Invoice
- </label>
- {!isKonfirmasi && (
- <span className='text-xs opacity-60'>
- Pastikan alamat yang anda isi sesuai dengan alamat kirim
- invoice
- </span>
- )}
- </div>
- <div className='w-3/5 flex gap-3 flex-col'>
- <div>
- <Checkbox
- colorScheme='red'
- isChecked={sameAddress}
- onChange={handleChangeSameAddress}
- >
- Alamat invoice sama dengan alamat pengiriman
- </Checkbox>
- </div>
- {!sameAddress && (
- <>
+ <div className='w-3/5 flex gap-3 flex-col'>
<div>
<input
- id='streetInvoice'
- name='streetInvoice'
- ref={streetInvoiceRef}
- placeholder='Masukkan alamat lengkap pengiriman invoice'
+ id='streetPengiriman'
+ name='streetPengiriman'
+ ref={streetPengirimanRef}
+ placeholder='Masukkan alamat lengkap pengiriman barang'
type='text'
- value={formPengiriman.streetInvoice}
+ value={formPengiriman.streetPengiriman}
className='form-input'
onChange={handleInputChange}
/>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsPengiriman.streetInvoice}
+ {errorsPengiriman.streetPengiriman}
</div>
)}
</div>
<div className='sub-alamat flex flex-row w-full gap-3'>
- <div className='w-3/5' ref={stateInvoiceRef}>
+ <div className='w-2/5' ref={statePengirimanRef}>
<Controller
- name='stateInvoice'
+ name='statePengiriman'
control={control}
render={(props) => (
<HookFormSelect
@@ -572,13 +460,13 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
/>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsPengiriman.stateInvoice}
+ {errorsPengiriman.statePengiriman}
</div>
)}
</div>
- <div className='w-2/5' ref={cityInvoiceRef}>
+ <div className='w-1/3' ref={cityPengirimanRef}>
<Controller
- name='cityInvoice'
+ name='cityPengiriman'
control={control}
render={(props) => (
<HookFormSelect
@@ -591,327 +479,1009 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
/>
{chekValid && (
<div className='text-caption-2 text-danger-500 mt-1'>
- {errorsPengiriman.cityInvoice}
+ {errorsPengiriman.cityPengiriman}
+ </div>
+ )}
+ </div>
+ <div className='w-1/3'>
+ <input
+ id='zipPengiriman'
+ name='zipPengiriman'
+ ref={zipRef}
+ placeholder='Kode Pos'
+ type='number'
+ value={formPengiriman.zipPengiriman}
+ className='form-input'
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.zipPengiriman}
</div>
)}
</div>
</div>
- </>
- )}
- </div>
- </div>
-
- <div className='flex flex-row justify-between items-start'>
- <div className='w-2/5'>
- <label className='form-label text-wrap'>
- Jadwal Penukaran Invoice{' '}
- <span className=' opacity-60'>(Opsional)</span>
- </label>
- {!isKonfirmasi && (
- <span className='text-xs opacity-60'>
- Pilih jika bisnis anda memiliki jadwal penukaran invoice
- </span>
- )}
- </div>
- <div className='w-3/5 flex gap-3 flex-col'>
- <div className='flex gap-3 flex-col'>
- <Checkbox
- colorScheme='red'
- isChecked={everyWeekday}
- onChange={handleEveryWeekday}
- >
- Setiap Minggu dihari
- </Checkbox>
- <input
- id='everyWeekdayInput'
- name='everyWeekdayInput'
- ref={everyWeekdayInputRef}
- placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
- type='text'
- value={formPengiriman.everyWeekdayInput}
- className='form-input'
- onChange={handleInputChange}
- />
+ </div>
+ </div>
+
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Nama PIC Penerimaan Invoice
+ </label>
+ </div>
+ <div className='w-3/5'>
+ <input
+ value={formPengiriman.invoicePic}
+ id='invoicePic'
+ name='invoicePic'
+ placeholder='Masukkan nama pic invoice disini'
+ type='text'
+ className='form-input'
+ aria-invalid={errorsPengiriman.invoicePic}
+ ref={invoicePicRef}
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.invoicePic}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Alamat Pengiriman Invoice
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ Pastikan alamat yang anda isi sesuai dengan alamat kirim
+ invoice
+ </span>
+ )}
+ </div>
+ <div className='w-3/5 flex gap-3 flex-col'>
+ <div>
+ <Checkbox
+ colorScheme='red'
+ isChecked={sameAddress}
+ onChange={handleChangeSameAddress}
+ >
+ Alamat invoice sama dengan alamat pengiriman
+ </Checkbox>
+ </div>
+ {!sameAddress && (
+ <>
+ <div>
+ <input
+ id='streetInvoice'
+ name='streetInvoice'
+ ref={streetInvoiceRef}
+ placeholder='Masukkan alamat lengkap pengiriman invoice'
+ type='text'
+ value={formPengiriman.streetInvoice}
+ className='form-input'
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.streetInvoice}
+ </div>
+ )}
+ </div>
+ <div className='sub-alamat flex flex-row w-full gap-3'>
+ <div className='w-3/5' ref={stateInvoiceRef}>
+ <Controller
+ name='stateInvoice'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={states}
+ placeholder='Provinsi'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.stateInvoice}
+ </div>
+ )}
+ </div>
+ <div className='w-2/5' ref={cityInvoiceRef}>
+ <Controller
+ name='cityInvoice'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={cities}
+ disabled={!watchState}
+ placeholder='Kota'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.cityInvoice}
+ </div>
+ )}
+ </div>
+ </div>
+ </>
+ )}
+ </div>
+ </div>
+
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-wrap'>
+ Jadwal Penukaran Invoice{' '}
+ <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ Pilih jika bisnis anda memiliki jadwal penukaran invoice
+ </span>
+ )}
+ </div>
+ <div className='w-3/5 flex gap-3 flex-col'>
+ <div className='flex gap-3 flex-col'>
+ <Checkbox
+ colorScheme='red'
+ isChecked={everyWeekday}
+ onChange={handleEveryWeekday}
+ >
+ Setiap Minggu dihari
+ </Checkbox>
+ <input
+ id='everyWeekdayInput'
+ name='everyWeekdayInput'
+ ref={everyWeekdayInputRef}
+ placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+ type='text'
+ value={formPengiriman.everyWeekdayInput}
+ className='form-input'
+ onChange={handleInputChange}
+ />
+ </div>
+ <div className='flex gap-3 flex-col'>
+ <Checkbox
+ colorScheme='red'
+ isChecked={everyWeek}
+ onChange={handleEveryWeek}
+ >
+ Setiap Bulan di minggu ke
+ </Checkbox>
+ <input
+ id='everyWeekInput'
+ name='everyWeekInput'
+ ref={everyWeekInputRef}
+ placeholder='Format: Minggu 1 & Minggu 2'
+ type='text'
+ value={formPengiriman.everyWeekInput}
+ className='form-input'
+ onChange={handleInputChange}
+ />
+ </div>
+ <div className='flex gap-3 flex-col'>
+ <Checkbox
+ colorScheme='red'
+ isChecked={tukarInvoice}
+ onChange={handleTukarInvoice}
+ >
+ Lainnya
+ </Checkbox>
+ <textarea
+ id='tukarInvoiceInput'
+ name='tukarInvoiceInput'
+ placeholder='isi manual dokumen yang anda mau'
+ type='textarea'
+ value={formPengiriman.tukarInvoiceInput}
+ className='form-input'
+ rows={4}
+ cols={40}
+ onChange={handleInputChange}
+ />
+ </div>
+ </div>
+ </div>
+
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Jadwal Pembayaran{' '}
+ <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ Pilih jika bisnis anda memiliki jadwal pembayaran
+ </span>
+ )}
+ </div>
+ <div className='w-3/5 flex gap-3 flex-col'>
+ <div className='flex gap-3 flex-col'>
+ <Checkbox
+ colorScheme='red'
+ isChecked={everyWeekdayPembayaran}
+ onChange={handleEveryWeekdayPembayaran}
+ >
+ Setiap Minggu dihari
+ </Checkbox>
+ <input
+ id='everyWeekdayInputPembayaran'
+ name='everyWeekdayInputPembayaran'
+ placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+ type='text'
+ value={formPengiriman.everyWeekdayInputPembayaran}
+ className='form-input'
+ onChange={handleInputChange}
+ />
+ </div>
+ <div className='flex gap-3 flex-col'>
+ <Checkbox
+ colorScheme='red'
+ isChecked={everyWeekPembayaran}
+ onChange={handleEveryWeekPembayaran}
+ >
+ Setiap Bulan di minggu ke
+ </Checkbox>
+ <input
+ id='everyWeekInputPembayaran'
+ name='everyWeekInputPembayaran'
+ placeholder='Format: Minggu 1 & Minggu 2'
+ type='text'
+ value={formPengiriman.everyWeekInputPembayaran}
+ className='form-input'
+ onChange={handleInputChange}
+ />
+ </div>
+ <div className='flex gap-3 flex-col'>
+ <Checkbox
+ colorScheme='red'
+ isChecked={tukarInvoicePembayaran}
+ onChange={handleTukarInvoicePembayaran}
+ >
+ Lainnya
+ </Checkbox>
+ <textarea
+ id='tukarInvoiceInputPembayaran'
+ name='tukarInvoiceInputPembayaran'
+ placeholder='isi manual dokumen yang anda mau'
+ type='textarea'
+ value={formPengiriman.tukarInvoiceInputPembayaran}
+ className='form-input'
+ rows={4}
+ cols={40}
+ onChange={handleInputChange}
+ />
+ </div>
+ </div>
</div>
- <div className='flex gap-3 flex-col'>
- <Checkbox
- colorScheme='red'
- isChecked={everyWeek}
- onChange={handleEveryWeek}
+
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-wrap'>
+ Dokumen saat Pengiriman Barang
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ Pilih dokumen lampiran saat pengiriman barang
+ </span>
+ )}
+ </div>
+ <div
+ className='w-3/5 flex gap-3 flex-col'
+ ref={dokumenPengirimanRef}
>
- Setiap Bulan di minggu ke
- </Checkbox>
- <input
- id='everyWeekInput'
- name='everyWeekInput'
- ref={everyWeekInputRef}
- placeholder='Format: Minggu 1 & Minggu 2'
- type='text'
- value={formPengiriman.everyWeekInput}
- className='form-input'
- onChange={handleInputChange}
- />
+ <Checkbox
+ colorScheme='red'
+ key='0'
+ isChecked={isChecked(0)}
+ onChange={() => handleCheckboxChange(0)}
+ >
+ Surat Tanda Terima Barang (STTB)
+ </Checkbox>
+ <Checkbox
+ colorScheme='red'
+ key='1'
+ isChecked={isChecked(1)}
+ onChange={() => handleCheckboxChange(1)}
+ >
+ Good Receipt (GR)
+ </Checkbox>
+ <Checkbox
+ colorScheme='red'
+ key='2'
+ isChecked={isChecked(2)}
+ onChange={() => handleCheckboxChange(2)}
+ >
+ Surat Terima Barang (STB)
+ </Checkbox>
+ <Checkbox
+ colorScheme='red'
+ key='3'
+ isChecked={isChecked(3)}
+ onChange={() => handleCheckboxChange(3)}
+ >
+ Lembar Penerimaan Barang (LPB)
+ </Checkbox>
+
+ <div className='flex gap-3 flex-col'>
+ <Checkbox
+ colorScheme='red'
+ key='4'
+ isChecked={isChecked(4)}
+ onChange={() => handleCheckboxChange(4)}
+ >
+ Lainnya
+ </Checkbox>
+ <textarea
+ id='dokumenPengirimanInput'
+ name='dokumenPengirimanInput'
+ placeholder='isi manual dokumen yang anda mau'
+ type='textarea'
+ ref={dokumenPengirimanInputRef}
+ value={formPengiriman.dokumenPengirimanInput}
+ className='form-input'
+ rows={4}
+ cols={40}
+ onChange={handleInputChange}
+ />
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.dokumenPengiriman}
+ </div>
+ )}
+ </div>
</div>
- <div className='flex gap-3 flex-col'>
- <Checkbox
- colorScheme='red'
- isChecked={tukarInvoice}
- onChange={handleTukarInvoice}
+
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-wrap'>
+ Dokumen yang dilampirkan saat Pengiriman Invoice
+ </label>
+ <span className='text-xs opacity-60'>
+ Dokumen akan dikirimkan sesuai dengan yang anda pilih
+ </span>
+ </div>
+ <div
+ className='w-3/5 flex gap-3 flex-col'
+ ref={dokumenPengirimanInvoiceRef}
>
- Lainnya
- </Checkbox>
- <textarea
- id='tukarInvoiceInput'
- name='tukarInvoiceInput'
- placeholder='isi manual dokumen yang anda mau'
- type='textarea'
- value={formPengiriman.tukarInvoiceInput}
- className='form-input'
- rows={4}
- cols={40}
- onChange={handleInputChange}
- />
+ <Checkbox
+ colorScheme='red'
+ key='0'
+ isChecked={isCheckedInvoice(0)}
+ onChange={() =>
+ handleCheckboxChangeDokumenPengirimanInvoice(0)
+ }
+ >
+ Invoice Pembelian
+ </Checkbox>
+ <Checkbox
+ colorScheme='red'
+ key='1'
+ isChecked={isCheckedInvoice(1)}
+ onChange={() =>
+ handleCheckboxChangeDokumenPengirimanInvoice(1)
+ }
+ >
+ Surat Jalan
+ </Checkbox>
+ <Checkbox
+ colorScheme='red'
+ key='2'
+ isChecked={isCheckedInvoice(2)}
+ onChange={() =>
+ handleCheckboxChangeDokumenPengirimanInvoice(2)
+ }
+ >
+ Berita Acara Serah Terima (BAST)
+ </Checkbox>
+ <Checkbox
+ colorScheme='red'
+ key='3'
+ isChecked={isCheckedInvoice(3)}
+ onChange={() =>
+ handleCheckboxChangeDokumenPengirimanInvoice(3)
+ }
+ >
+ Faktur Pajak
+ </Checkbox>
+ <Checkbox
+ colorScheme='red'
+ key='4'
+ isChecked={isCheckedInvoice(4)}
+ onChange={() =>
+ handleCheckboxChangeDokumenPengirimanInvoice(4)
+ }
+ >
+ Good Receipt (GR)
+ </Checkbox>
+
+ <div className='flex gap-3 flex-col'>
+ <Checkbox
+ colorScheme='red'
+ key='5'
+ isChecked={isCheckedInvoice(5)}
+ onChange={() =>
+ handleCheckboxChangeDokumenPengirimanInvoice(5)
+ }
+ >
+ Lainnya
+ </Checkbox>
+ <textarea
+ id='dokumenPengirimanInvoiceInput'
+ name='dokumenPengirimanInvoiceInput'
+ placeholder='isi manual dokumen yang anda mau'
+ type='textarea'
+ ref={dokumenPengirimanInvoiceInputRef}
+ value={formPengiriman.dokumenPengirimanInvoiceInput}
+ className='form-input'
+ rows={4}
+ cols={40}
+ onChange={handleInputChange}
+ />
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.dokumenInvoicePengiriman}
+ </div>
+ )}
+ </div>
</div>
</div>
- </div>
-
- <div className='flex flex-row justify-between items-start'>
- <div className='w-2/5'>
- <label className='form-label text-nowrap'>
- Jadwal Pembayaran{' '}
- <span className=' opacity-60'>(Opsional)</span>
- </label>
- {!isKonfirmasi && (
- <span className='text-xs opacity-60'>
- Pilih jika bisnis anda memiliki jadwal pembayaran
- </span>
- )}
- </div>
- <div className='w-3/5 flex gap-3 flex-col'>
- <div className='flex gap-3 flex-col'>
- <Checkbox
- colorScheme='red'
- isChecked={everyWeekdayPembayaran}
- onChange={handleEveryWeekdayPembayaran}
- >
- Setiap Minggu dihari
- </Checkbox>
+ </form>
+ </div>
+ )}
+ {isMobile && (
+ <div className='text-sm'>
+ <h1
+ className={`font-bold py-4 mt-8 ${
+ isKonfirmasi ? 'text-xl' : 'text-xl'
+ }`}
+ >
+ Pengiriman
+ </h1>
+ <form className='flex flex-col w-full '>
+ <div className='w-full grid grid-row-2 gap-2'>
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-nowrap'>
+ Nama PIC Penerimaan Barang
+ </label>
<input
- id='everyWeekdayInputPembayaran'
- name='everyWeekdayInputPembayaran'
- placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+ value={formPengiriman.PICName}
+ id='PICName'
+ name='PICName'
+ placeholder='Masukkan nama pic pengiriman disini'
type='text'
- value={formPengiriman.everyWeekdayInputPembayaran}
className='form-input'
+ aria-invalid={errorsPengiriman.PICName}
+ ref={PICNameRef}
onChange={handleInputChange}
/>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.PICName}
+ </div>
+ )}
</div>
- <div className='flex gap-3 flex-col'>
- <Checkbox
- colorScheme='red'
- isChecked={everyWeekPembayaran}
- onChange={handleEveryWeekPembayaran}
- >
- Setiap Bulan di minggu ke
- </Checkbox>
+
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-nowrap'>
+ Alamat Pengiriman Barang
+ </label>
+ <div className='w-full'>
+ <input
+ id='streetPengiriman'
+ name='streetPengiriman'
+ ref={streetPengirimanRef}
+ placeholder='Masukkan alamat lengkap pengiriman barang'
+ type='text'
+ value={formPengiriman.streetPengiriman}
+ className='form-input'
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.streetPengiriman}
+ </div>
+ )}
+ </div>
+ <div className='sub-alamat flex flex-row w-full gap-2'>
+ <div className='w-2/5' ref={statePengirimanRef}>
+ <Controller
+ name='statePengiriman'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={states}
+ placeholder='Provinsi'
+ />
+ )}
+ />
+ </div>
+ <div className='w-1/3' ref={cityPengirimanRef}>
+ <Controller
+ name='cityPengiriman'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={cities}
+ disabled={!watchState}
+ placeholder='Kota'
+ />
+ )}
+ />
+ </div>
+ <div className='w-1/3'>
+ <input
+ id='zipPengiriman'
+ name='zipPengiriman'
+ ref={zipRef}
+ placeholder='Kode Pos'
+ type='number'
+ value={formPengiriman.zipPengiriman}
+ className='form-input'
+ onChange={handleInputChange}
+ />
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.statePengiriman}
+ </div>
+ )}
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.cityPengiriman}
+ </div>
+ )}
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.zipPengiriman}
+ </div>
+ )}
+ </div>
+ </div>
+
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-nowrap'>
+ Nama PIC Penerimaan Invoice
+ </label>
<input
- id='everyWeekInputPembayaran'
- name='everyWeekInputPembayaran'
- placeholder='Format: Minggu 1 & Minggu 2'
+ value={formPengiriman.invoicePic}
+ id='invoicePic'
+ name='invoicePic'
+ placeholder='Masukkan nama pic invoice disini'
type='text'
- value={formPengiriman.everyWeekInputPembayaran}
className='form-input'
+ aria-invalid={errorsPengiriman.invoicePic}
+ ref={invoicePicRef}
onChange={handleInputChange}
/>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.invoicePic}
+ </div>
+ )}
</div>
- <div className='flex gap-3 flex-col'>
- <Checkbox
- colorScheme='red'
- isChecked={tukarInvoicePembayaran}
- onChange={handleTukarInvoicePembayaran}
+
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-nowrap'>
+ Alamat Pengiriman Invoice
+ </label>
+ <div>
+ <Checkbox
+ colorScheme='red'
+ isChecked={sameAddress}
+ onChange={handleChangeSameAddress}
+ size='sm'
+ >
+ Alamat invoice sama dengan alamat pengiriman
+ </Checkbox>
+ </div>
+ {!sameAddress && (
+ <>
+ <div className='w-full'>
+ <input
+ id='streetInvoice'
+ name='streetInvoice'
+ ref={streetInvoiceRef}
+ placeholder='Masukkan alamat lengkap pengiriman invoice'
+ type='text'
+ value={formPengiriman.streetInvoice}
+ className='form-input'
+ onChange={handleInputChange}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.streetInvoice}
+ </div>
+ )}
+ </div>
+ <div className='sub-alamat flex flex-row w-full gap-3'>
+ <div className='w-3/5' ref={stateInvoiceRef}>
+ <Controller
+ name='stateInvoice'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={states}
+ placeholder='Provinsi'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.stateInvoice}
+ </div>
+ )}
+ </div>
+ <div className='w-2/5' ref={cityInvoiceRef}>
+ <Controller
+ name='cityInvoice'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={cities}
+ disabled={!watchState}
+ placeholder='Kota'
+ />
+ )}
+ />
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.cityInvoice}
+ </div>
+ )}
+ </div>
+ </div>
+ </>
+ )}
+ </div>
+
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-wrap'>
+ Jadwal Penukaran Invoice
+ <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ Pilih jika bisnis anda memiliki jadwal penukaran invoice
+ </span>
+ )}
+ <div className='w-full flex gap-2 flex-col'>
+ <div className='flex gap-2 flex-col'>
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ isChecked={everyWeekday}
+ onChange={handleEveryWeekday}
+ >
+ Setiap Minggu dihari
+ </Checkbox>
+ <input
+ id='everyWeekdayInput'
+ name='everyWeekdayInput'
+ ref={everyWeekdayInputRef}
+ placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+ type='text'
+ value={formPengiriman.everyWeekdayInput}
+ className='form-input'
+ onChange={handleInputChange}
+ />
+ </div>
+ <div className='flex gap-2 w-full flex-col'>
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ isChecked={everyWeek}
+ onChange={handleEveryWeek}
+ >
+ Setiap Bulan di minggu ke
+ </Checkbox>
+ <input
+ id='everyWeekInput'
+ name='everyWeekInput'
+ ref={everyWeekInputRef}
+ placeholder='Format: Minggu 1 & Minggu 2'
+ type='text'
+ value={formPengiriman.everyWeekInput}
+ className='form-input'
+ onChange={handleInputChange}
+ />
+ </div>
+ <div className='flex gap-2 flex-col'>
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ isChecked={tukarInvoice}
+ onChange={handleTukarInvoice}
+ >
+ Lainnya
+ </Checkbox>
+ <textarea
+ id='tukarInvoiceInput'
+ name='tukarInvoiceInput'
+ placeholder='isi manual dokumen yang anda mau'
+ type='textarea'
+ value={formPengiriman.tukarInvoiceInput}
+ className='form-input'
+ rows={4}
+ cols={40}
+ onChange={handleInputChange}
+ />
+ </div>
+ </div>
+ <div className='w-2/5'></div>
+ </div>
+
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-nowrap'>
+ Jadwal Pembayaran
+ <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ Pilih jika bisnis anda memiliki jadwal pembayaran
+ </span>
+ )}
+ <div className='w-full flex gap-2 flex-col'>
+ <div className='flex gap-2 flex-col'>
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ isChecked={everyWeekdayPembayaran}
+ onChange={handleEveryWeekdayPembayaran}
+ >
+ Setiap Minggu dihari
+ </Checkbox>
+ <input
+ id='everyWeekdayInputPembayaran'
+ name='everyWeekdayInputPembayaran'
+ placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+ type='text'
+ value={formPengiriman.everyWeekdayInputPembayaran}
+ className='form-input'
+ onChange={handleInputChange}
+ />
+ </div>
+ <div className='flex gap-2 flex-col'>
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ isChecked={everyWeekPembayaran}
+ onChange={handleEveryWeekPembayaran}
+ >
+ Setiap Bulan di minggu ke
+ </Checkbox>
+ <input
+ id='everyWeekInputPembayaran'
+ name='everyWeekInputPembayaran'
+ placeholder='Format: Minggu 1 & Minggu 2'
+ type='text'
+ value={formPengiriman.everyWeekInputPembayaran}
+ className='form-input'
+ onChange={handleInputChange}
+ />
+ </div>
+ <div className='flex gap-2 flex-col'>
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ isChecked={tukarInvoicePembayaran}
+ onChange={handleTukarInvoicePembayaran}
+ >
+ Lainnya
+ </Checkbox>
+ <textarea
+ id='tukarInvoiceInputPembayaran'
+ name='tukarInvoiceInputPembayaran'
+ placeholder='isi manual dokumen yang anda mau'
+ type='textarea'
+ value={formPengiriman.tukarInvoiceInputPembayaran}
+ className='form-input'
+ rows={4}
+ cols={40}
+ onChange={handleInputChange}
+ />
+ </div>
+ </div>
+ </div>
+
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-wrap'>
+ Dokumen saat Pengiriman Barang
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ Pilih dokumen lampiran saat pengiriman barang
+ </span>
+ )}
+ <div
+ className='w-full flex gap-2 flex-col'
+ ref={dokumenPengirimanRef}
>
- Lainnya
- </Checkbox>
- <textarea
- id='tukarInvoiceInputPembayaran'
- name='tukarInvoiceInputPembayaran'
- placeholder='isi manual dokumen yang anda mau'
- type='textarea'
- value={formPengiriman.tukarInvoiceInputPembayaran}
- className='form-input'
- rows={4}
- cols={40}
- onChange={handleInputChange}
- />
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ key='0'
+ isChecked={isChecked(0)}
+ onChange={() => handleCheckboxChange(0)}
+ >
+ Surat Tanda Terima Barang (STTB)
+ </Checkbox>
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ key='1'
+ isChecked={isChecked(1)}
+ onChange={() => handleCheckboxChange(1)}
+ >
+ Good Receipt (GR)
+ </Checkbox>
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ key='2'
+ isChecked={isChecked(2)}
+ onChange={() => handleCheckboxChange(2)}
+ >
+ Surat Terima Barang (STB)
+ </Checkbox>
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ key='3'
+ isChecked={isChecked(3)}
+ onChange={() => handleCheckboxChange(3)}
+ >
+ Lembar Penerimaan Barang (LPB)
+ </Checkbox>
+
+ <div className='flex gap-3 flex-col'>
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ key='4'
+ isChecked={isChecked(4)}
+ onChange={() => handleCheckboxChange(4)}
+ >
+ Lainnya
+ </Checkbox>
+ <textarea
+ id='dokumenPengirimanInput'
+ name='dokumenPengirimanInput'
+ placeholder='isi manual dokumen yang anda mau'
+ type='textarea'
+ ref={dokumenPengirimanInputRef}
+ value={formPengiriman.dokumenPengirimanInput}
+ className='form-input'
+ rows={4}
+ cols={40}
+ onChange={handleInputChange}
+ />
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.dokumenPengiriman}
+ </div>
+ )}
+ </div>
</div>
- </div>
- </div>
-
- <div className='flex flex-row justify-between items-start'>
- <div className='w-2/5'>
- <label className='form-label text-wrap'>
- Dokumen saat Pengiriman Barang
- </label>
- {!isKonfirmasi && (
+
+ <div className='flex flex-col gap-2 justify-between items-start'>
+ <label className='form-label text-wrap'>
+ Dokumen yang dilampirkan saat Pengiriman Invoice
+ </label>
<span className='text-xs opacity-60'>
- Pilih dokumen lampiran saat pengiriman barang
+ Pilih dokumen lampiran saat pengiriman invoice
</span>
- )}
- </div>
- <div
- className='w-3/5 flex gap-3 flex-col'
- ref={dokumenPengirimanRef}
- >
- <Checkbox
- colorScheme='red'
- key='0'
- isChecked={isChecked(0)}
- onChange={() => handleCheckboxChange(0)}
- >
- Surat Tanda Terima Barang (STTB)
- </Checkbox>
- <Checkbox
- colorScheme='red'
- key='1'
- isChecked={isChecked(1)}
- onChange={() => handleCheckboxChange(1)}
- >
- Good Receipt (GR)
- </Checkbox>
- <Checkbox
- colorScheme='red'
- key='2'
- isChecked={isChecked(2)}
- onChange={() => handleCheckboxChange(2)}
- >
- Surat Terima Barang (STB)
- </Checkbox>
- <Checkbox
- colorScheme='red'
- key='3'
- isChecked={isChecked(3)}
- onChange={() => handleCheckboxChange(3)}
- >
- Lembar Penerimaan Barang (LPB)
- </Checkbox>
-
- <div className='flex gap-3 flex-col'>
- <Checkbox
- colorScheme='red'
- key='4'
- isChecked={isChecked(4)}
- onChange={() => handleCheckboxChange(4)}
+ <div
+ className='w-full flex gap-2 flex-col'
+ ref={dokumenPengirimanInvoiceRef}
>
- Lainnya
- </Checkbox>
- <textarea
- id='dokumenPengirimanInput'
- name='dokumenPengirimanInput'
- placeholder='isi manual dokumen yang anda mau'
- type='textarea'
- ref={dokumenPengirimanInputRef}
- value={formPengiriman.dokumenPengirimanInput}
- className='form-input'
- rows={4}
- cols={40}
- onChange={handleInputChange}
- />
- </div>
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsPengiriman.dokumenPengiriman}
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ key='0'
+ isChecked={isCheckedInvoice(0)}
+ onChange={() =>
+ handleCheckboxChangeDokumenPengirimanInvoice(0)
+ }
+ >
+ Invoice Pembelian
+ </Checkbox>
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ key='1'
+ isChecked={isCheckedInvoice(1)}
+ onChange={() =>
+ handleCheckboxChangeDokumenPengirimanInvoice(1)
+ }
+ >
+ Surat Jalan
+ </Checkbox>
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ key='2'
+ isChecked={isCheckedInvoice(2)}
+ onChange={() =>
+ handleCheckboxChangeDokumenPengirimanInvoice(2)
+ }
+ >
+ Berita Acara Serah Terima (BAST)
+ </Checkbox>
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ key='3'
+ isChecked={isCheckedInvoice(3)}
+ onChange={() =>
+ handleCheckboxChangeDokumenPengirimanInvoice(3)
+ }
+ >
+ Faktur Pajak
+ </Checkbox>
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ key='4'
+ isChecked={isCheckedInvoice(4)}
+ onChange={() =>
+ handleCheckboxChangeDokumenPengirimanInvoice(4)
+ }
+ >
+ Good Receipt (GR)
+ </Checkbox>
+
+ <div className='flex gap-3 flex-col'>
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ key='5'
+ isChecked={isCheckedInvoice(5)}
+ onChange={() =>
+ handleCheckboxChangeDokumenPengirimanInvoice(5)
+ }
+ >
+ Lainnya
+ </Checkbox>
+ <textarea
+ id='dokumenPengirimanInvoiceInput'
+ name='dokumenPengirimanInvoiceInput'
+ placeholder='isi manual dokumen yang anda mau'
+ type='textarea'
+ ref={dokumenPengirimanInvoiceInputRef}
+ value={formPengiriman.dokumenPengirimanInvoiceInput}
+ className='form-input'
+ rows={4}
+ cols={40}
+ onChange={handleInputChange}
+ />
+ </div>
+ {chekValid && (
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errorsPengiriman.dokumenInvoicePengiriman}
+ </div>
+ )}
</div>
- )}
- </div>
- </div>
-
- <div className='flex flex-row justify-between items-start'>
- <div className='w-2/5'>
- <label className='form-label text-wrap'>
- Dokumen yang dilampirkan saat Pengiriman Invoice
- </label>
- <span className='text-xs opacity-60'>
- Dokumen akan dikirimkan sesuai dengan yang anda pilih
- </span>
- </div>
- <div
- className='w-3/5 flex gap-3 flex-col'
- ref={dokumenPengirimanInvoiceRef}
- >
- <Checkbox
- colorScheme='red'
- key='0'
- isChecked={isCheckedInvoice(0)}
- onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(0)}
- >
- Invoice Pembelian
- </Checkbox>
- <Checkbox
- colorScheme='red'
- key='1'
- isChecked={isCheckedInvoice(1)}
- onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(1)}
- >
- Surat Jalan
- </Checkbox>
- <Checkbox
- colorScheme='red'
- key='2'
- isChecked={isCheckedInvoice(2)}
- onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(2)}
- >
- Berita Acara Serah Terima (BAST)
- </Checkbox>
- <Checkbox
- colorScheme='red'
- key='3'
- isChecked={isCheckedInvoice(3)}
- onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(3)}
- >
- Faktur Pajak
- </Checkbox>
- <Checkbox
- colorScheme='red'
- key='4'
- isChecked={isCheckedInvoice(4)}
- onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(4)}
- >
- Good Receipt (GR)
- </Checkbox>
-
- <div className='flex gap-3 flex-col'>
- <Checkbox
- colorScheme='red'
- key='5'
- isChecked={isCheckedInvoice(5)}
- onChange={() =>
- handleCheckboxChangeDokumenPengirimanInvoice(5)
- }
- >
- Lainnya
- </Checkbox>
- <textarea
- id='dokumenPengirimanInvoiceInput'
- name='dokumenPengirimanInvoiceInput'
- placeholder='isi manual dokumen yang anda mau'
- type='textarea'
- ref={dokumenPengirimanInvoiceInputRef}
- value={formPengiriman.dokumenPengirimanInvoiceInput}
- className='form-input'
- rows={4}
- cols={40}
- onChange={handleInputChange}
- />
+ <div className='w-2/5'></div>
</div>
- {chekValid && (
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errorsPengiriman.dokumenInvoicePengiriman}
- </div>
- )}
</div>
- </div>
+ </form>
</div>
- </form>
+ )}
</>
);
};
diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index 8732c60f..1b83358b 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -4,9 +4,14 @@ import { usePengajuanTempoStoreSupplier } from '../../../../src-migrate/modules/
import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { PlusCircleIcon } from '@heroicons/react/24/outline';
-
+import useDevice from '@/core/hooks/useDevice';
+import { Trash2Icon } from 'lucide-react';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
const initialData = [];
const Referensi = ({ chekValid, buttonSubmitClick }) => {
+ const { isDesktop, isMobile } = useDevice();
+ const [openIndexes, setOpenIndexes] = useState([]);
+
const {
register,
formState: { errors },
@@ -71,33 +76,16 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
const updatedSupplier = { ...newSupplier, [name]: formattedValue };
setNewSupplier(updatedSupplier);
-
- // if (Object.values(updatedSupplier).every((val) => val.trim() !== '')) {
- // setSupplierData((prevData) => {
- // const newData = [...prevData, updatedSupplier];
- // return newData;
- // });
-
- // setNewSupplier({
- // supplier: '',
- // pic: '',
- // telepon: '',
- // durasiTempo: '',
- // creditLimit: '',
- // });
- // }
updateHasSave(false);
};
const handleAddNewSupplier = () => {
- // Pastikan semua field sudah diisi sebelum menambahkan supplier baru
if (Object.values(newSupplier).every((val) => val.trim() !== '')) {
setSupplierData((prevData) => {
const newData = [...prevData, newSupplier];
return newData;
});
- // Reset newSupplier setelah menambahkan
setNewSupplier({
supplier: '',
pic: '',
@@ -122,7 +110,6 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
return newData;
});
- // Reset newSupplier setelah menambahkan
setNewSupplier({
supplier: '',
pic: '',
@@ -147,13 +134,7 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
return numberString ? numberString.replace(/Hari/g, '') + ' Hari' : '';
};
- // useEffect(() => {
- // setSupplierData((prevData) => {
- // const newData = [...prevData, newSupplier];
- // return newData;
- // });
- // updateFormSupplier(supplierData);
- // }, [buttonSubmitClick]);
+
useEffect(() => {
updateFormSupplier(supplierData);
}, [buttonSubmit]);
@@ -171,160 +152,380 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
updateFormSupplier(cachedData);
}
}, [buttonSubmitClick]);
+
+ useEffect(() => {
+ setOpenIndexes(supplierData.map((_, index) => index));
+ }, [supplierData]);
+
+ const toggleOpen = (index) => {
+ setOpenIndexes((prev) =>
+ prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
+ );
+ };
return (
<>
- <div className='flex flex-col justify-start'>
- <h1 className='font-bold text-2xl'>
- Referensi Supplier / Rekanan Bisnis Perusahaan{' '}
- <span className=' opacity-60 text-xl'>(Opsional)</span>
- </h1>
- <p className='opacity-60'>
- Data yang anda berikan hanya untuk bahan referensi internal kami untuk
- memberikan anda credit limit dan durasi tempo
- </p>
- </div>
- <form className='flex mt-4 flex-col w-full '>
- <table className='border' border='1' cellPadding='10'>
- <thead>
- <tr className='border '>
- <th className='text-left px-5 py-2'>Nama Supplier / Rekanan</th>
- <th className='text-left px-5 py-2'>PIC</th>
- <th className='text-left px-5 py-2'>Telepon</th>
- <th className='text-left px-5 py-2'>Durasi Tempo</th>
- <th className='text-left px-5 py-2'>Credit Limit</th>
- </tr>
- </thead>
- <tbody>
- {supplierData.map((supplier, index) => (
- <tr key={index}>
- <td>
- <input
- name='supplier'
- value={supplier.supplier}
- type='text'
- onChange={(e) => onChangeInput(e, index)}
- className='form-input border px-4 py-2'
- placeholder='Type Supplier'
- />
- </td>
- <td>
- <input
- name='pic'
- value={supplier.pic}
- type='text'
- className='form-input border px-4 py-2'
- onChange={(e) => onChangeInput(e, index)}
- placeholder='Type PIC'
- />
- </td>
- <td>
- <input
- name='telepon'
- type='text'
- className='form-input border px-4 py-2'
- value={supplier.telepon}
- onChange={(e) => onChangeInput(e, index)}
- placeholder='Type Telepon'
- />
- </td>
- <td>
- <input
- name='durasiTempo'
- type='text'
- className='form-input border px-4 py-2'
- value={formatHari(supplier.durasiTempo)}
- onChange={(e) => onChangeInput(e, index)}
- placeholder='Type Durasi Tempo'
- />
- </td>
- <td>
- <input
- name='creditLimit'
- type='text'
- value={formatRupiah(supplier.creditLimit)}
- className='form-input border px-4 py-2'
- onChange={(e) => onChangeInput(e, index)}
- placeholder='Type Credit Limit'
- />
- </td>
- </tr>
- ))}
- <tr>
- <td>
- <input
- name='supplier'
- value={newSupplier.supplier}
- type='text'
- className='form-input border px-4 py-2'
- onChange={handleNewSupplierChange}
- placeholder='Isi nama supplier anda'
- />
- </td>
- <td>
- <input
- name='pic'
- value={newSupplier.pic}
- type='text'
- className='form-input border px-4 py-2'
- onChange={handleNewSupplierChange}
- placeholder='Isi PIC supplier anda'
- />
- </td>
- <td>
- <input
- name='telepon'
- value={newSupplier.telepon}
- type='text'
- onChange={handleNewSupplierChange}
- placeholder='Isi telepon supplier anda'
- className='form-input border px-4 py-2'
- />
- </td>
- <td>
- <input
- name='durasiTempo'
- value={formatHari(newSupplier.durasiTempo)}
- type='text'
- onChange={handleNewSupplierChange}
- className='form-input border px-4 py-2'
- placeholder='Durasi jatuh tempo'
- />
- </td>
- <td>
- <input
- name='creditLimit'
- value={formatRupiah(newSupplier.creditLimit)}
- type='text'
- className='form-input border px-4 py-2'
- onChange={handleNewSupplierChange}
- placeholder='limit kredit'
- />
- </td>
- </tr>
- </tbody>
- </table>
- </form>
- <div className='flex items-center gap-4 mt-8'>
- <button
- onClick={handleAddNewSupplier}
- className='bg-gray-200 border border-gray-500 rounded-md text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
- >
- {<PlusCircleIcon className='w-5 mr-2' />}
- {''} Tambah data baru
- </button>
- <button
- onClick={simpanData}
- className='bg-gray-200 border border-gray-500 rounded-md text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
- >
- simpan data
- </button>
- <span className='text-sm opacity-60 text-red-500'>
- *Klik simpan sebelum lanjut ke tahap selanjutnya
- </span>
- </div>
- {/* <button className='mt-8' onClick={cetakData}>
- CETAK
- </button> */}
+ {isDesktop && (
+ <div>
+ <div className='flex flex-col justify-start'>
+ <h1 className='font-bold text-2xl'>
+ Referensi Supplier / Rekanan Bisnis Perusahaan{' '}
+ <span className=' opacity-60 text-xl'>(Opsional)</span>
+ </h1>
+ <p className='opacity-60'>
+ Data yang anda berikan hanya untuk bahan referensi internal kami
+ untuk memberikan anda credit limit dan durasi tempo
+ </p>
+ </div>
+ <form className='flex mt-4 flex-col w-full '>
+ <table className='border' border='1' cellPadding='10'>
+ <thead>
+ <tr className='border '>
+ <th className='text-left px-5 py-2'>
+ Nama Supplier / Rekanan
+ </th>
+ <th className='text-left px-5 py-2'>PIC</th>
+ <th className='text-left px-5 py-2'>Telepon</th>
+ <th className='text-left px-5 py-2'>Durasi Tempo</th>
+ <th className='text-left px-5 py-2'>Credit Limit</th>
+ </tr>
+ </thead>
+ <tbody>
+ {supplierData.map((supplier, index) => (
+ <tr key={index}>
+ <td>
+ <input
+ name='supplier'
+ value={supplier.supplier}
+ type='text'
+ onChange={(e) => onChangeInput(e, index)}
+ className='form-input border px-4 py-2'
+ placeholder='Type Supplier'
+ />
+ </td>
+ <td>
+ <input
+ name='pic'
+ value={supplier.pic}
+ type='text'
+ className='form-input border px-4 py-2'
+ onChange={(e) => onChangeInput(e, index)}
+ placeholder='Type PIC'
+ />
+ </td>
+ <td>
+ <input
+ name='telepon'
+ type='text'
+ className='form-input border px-4 py-2'
+ value={supplier.telepon}
+ onChange={(e) => onChangeInput(e, index)}
+ placeholder='Type Telepon'
+ />
+ </td>
+ <td>
+ <input
+ name='durasiTempo'
+ type='text'
+ className='form-input border px-4 py-2'
+ value={formatHari(supplier.durasiTempo)}
+ onChange={(e) => onChangeInput(e, index)}
+ placeholder='Type Durasi Tempo'
+ />
+ </td>
+ <td>
+ <input
+ name='creditLimit'
+ type='text'
+ value={formatRupiah(supplier.creditLimit)}
+ className='form-input border px-4 py-2'
+ onChange={(e) => onChangeInput(e, index)}
+ placeholder='Type Credit Limit'
+ />
+ </td>
+ </tr>
+ ))}
+ <tr>
+ <td>
+ <input
+ name='supplier'
+ value={newSupplier.supplier}
+ type='text'
+ className='form-input border px-4 py-2'
+ onChange={handleNewSupplierChange}
+ placeholder='Isi nama supplier anda'
+ />
+ </td>
+ <td>
+ <input
+ name='pic'
+ value={newSupplier.pic}
+ type='text'
+ className='form-input border px-4 py-2'
+ onChange={handleNewSupplierChange}
+ placeholder='Isi PIC supplier anda'
+ />
+ </td>
+ <td>
+ <input
+ name='telepon'
+ value={newSupplier.telepon}
+ type='text'
+ onChange={handleNewSupplierChange}
+ placeholder='Isi telepon supplier anda'
+ className='form-input border px-4 py-2'
+ />
+ </td>
+ <td>
+ <input
+ name='durasiTempo'
+ value={formatHari(newSupplier.durasiTempo)}
+ type='text'
+ onChange={handleNewSupplierChange}
+ className='form-input border px-4 py-2'
+ placeholder='Durasi jatuh tempo'
+ />
+ </td>
+ <td>
+ <input
+ name='creditLimit'
+ value={formatRupiah(newSupplier.creditLimit)}
+ type='text'
+ className='form-input border px-4 py-2'
+ onChange={handleNewSupplierChange}
+ placeholder='limit kredit'
+ />
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </form>
+ <div className='flex items-center gap-4 mt-8'>
+ <button
+ onClick={handleAddNewSupplier}
+ className='bg-gray-200 border border-gray-500 rounded-md text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
+ >
+ {<PlusCircleIcon className='w-5 mr-2' />}
+ {''} Tambah data baru
+ </button>
+ <button
+ onClick={simpanData}
+ className='bg-gray-200 border border-gray-500 rounded-md text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
+ >
+ simpan data
+ </button>
+ <span className='text-sm opacity-60 text-red-500'>
+ *Klik simpan sebelum lanjut ke tahap selanjutnya
+ </span>
+ </div>
+ </div>
+ )}
+ {isMobile && (
+ <div className='text-sm'>
+ <div className='flex flex-col py-4 mt-8 justify-start'>
+ <h1 className='font-bold text-xl'>
+ Referensi Supplier / Rekanan Bisnis Perusahaan{' '}
+ <span className=' opacity-60 text-xl'>(Opsional)</span>
+ </h1>
+ <p className='opacity-60'>
+ Data yang anda berikan hanya untuk bahan referensi internal kami
+ untuk memberikan anda credit limit dan durasi tempo
+ </p>
+ </div>
+ <div className='flex gap-4 flex-col'>
+ <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+ <h2 className='py-2 font-semibold text-base'>
+ Daftar Nama Supplier
+ </h2>
+ <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+ <div className=''>
+ {supplierData.map((supplier, index) => (
+ <div key={index}>
+ <div
+ className='flex flex-row justify-center items-center py-4'
+ onClick={() => toggleOpen(index)}
+ >
+ <p className='font-semibold text-base w-4/5'>
+ {supplier.supplier}
+ </p>
+ <div className='w-1/5 flex justify-end items-center gap-2'>
+ <Trash2Icon size={16} color='red' />
+ {openIndexes.includes(index) ? (
+ <ChevronUpIcon className='w-4' />
+ ) : (
+ <ChevronDownIcon className='w-4' />
+ )}
+ </div>
+ </div>
+ {openIndexes.includes(index) && (
+ <form className='flex flex-col w-full'>
+ <div className='w-full grid grid-row-2 gap-4'>
+ <div className='flex flex-row justify-start items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Nama Supplier
+ </label>
+ </div>
+ <div className='w-3/5 opacity-70'>
+ {supplier.supplier}
+ </div>
+ </div>
+
+ <div className='flex flex-row justify-start items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ PIC
+ </label>
+ </div>
+ <div className='w-3/5 opacity-70'>{supplier.pic}</div>
+ </div>
+
+ <div className='flex flex-row justify-start items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Telepon
+ </label>
+ </div>
+ <div className='w-3/5 opacity-70'>
+ {supplier.telepon}
+ </div>
+ </div>
+
+ <div className='flex flex-row justify-start items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Durasi Tempo
+ </label>
+ </div>
+ <div className='w-3/5 opacity-70'>
+ {formatHari(supplier.durasiTempo)}
+ </div>
+ </div>
+
+ <div className='flex flex-row justify-start items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Kredit Limit
+ </label>
+ </div>
+ <div className='w-3/5 opacity-70'>
+ {formatRupiah(supplier.creditLimit)}
+ </div>
+ </div>
+ </div>
+ </form>
+ )}
+ </div>
+ ))}
+ </div>
+ <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+ <h2 className='py-2 font-semibold text-base text-red-500 flex flex-row'>
+ <PlusCircleIcon className='w-5 mr-2' />
+ Tambah Data Baru
+ </h2>
+ <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+ <form className='flex flex-col w-full'>
+ <div className='w-full grid grid-row-2 gap-2'>
+ <div className='flex flex-row justify-start items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Nama Supplier
+ </label>
+ </div>
+ <div className='w-3/5 opacity-70'>
+ <input
+ name='supplier'
+ value={newSupplier.supplier}
+ type='text'
+ className='form-input border px-4 py-2'
+ onChange={handleNewSupplierChange}
+ placeholder='Format: PT. ABC TESTING INDONESIA'
+ />
+ </div>
+ </div>
+
+ <div className='flex flex-row justify-start items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>PIC</label>
+ </div>
+ <div className='w-3/5 opacity-70'>
+ <input
+ name='pic'
+ value={newSupplier.pic}
+ type='text'
+ className='form-input border px-4 py-2'
+ onChange={handleNewSupplierChange}
+ placeholder='John Doe'
+ />
+ </div>
+ </div>
+
+ <div className='flex flex-row justify-start items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>Telepon</label>
+ </div>
+ <div className='w-3/5 opacity-70'>
+ <input
+ name='telepon'
+ value={newSupplier.telepon}
+ type='text'
+ onChange={handleNewSupplierChange}
+ placeholder='Format: 08123456789'
+ className='form-input border px-4 py-2'
+ />
+ </div>
+ </div>
+
+ <div className='flex flex-row justify-start items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Durasi Tempo
+ </label>
+ </div>
+ <div className='w-3/5 opacity-70'>
+ <input
+ name='durasiTempo'
+ value={formatHari(newSupplier.durasiTempo)}
+ type='text'
+ onChange={handleNewSupplierChange}
+ className='form-input border px-4 py-2'
+ placeholder='Isi durasi tempo supplier anda (hari)'
+ />
+ </div>
+ </div>
+
+ <div className='flex flex-row justify-start items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Kredit Limit
+ </label>
+ </div>
+ <div className='w-3/5 opacity-70'>
+ <input
+ name='creditLimit'
+ value={formatRupiah(newSupplier.creditLimit)}
+ type='text'
+ className='form-input border px-4 py-2'
+ onChange={handleNewSupplierChange}
+ placeholder='Rp 999.999.999'
+ />
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ <div className='flex flex-col justify-start items-start gap-4 mt-8'>
+ <span className='text-xs opacity-60 text-red-500'>
+ *Klik simpan sebelum lanjut ke tahap selanjutnya
+ </span>
+ <button
+ onClick={simpanData}
+ className='bg-gray-200 border border-gray-500 rounded-md w-full text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
+ >
+ simpan data
+ </button>
+ </div>
+ </div>
+ )}
</>
);
};
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>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 05:49:27 +0000