diff options
Diffstat (limited to 'src/lib/pengajuan-tempo/component/Pengiriman.jsx')
| -rw-r--r-- | src/lib/pengajuan-tempo/component/Pengiriman.jsx | 657 |
1 files changed, 444 insertions, 213 deletions
diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx index 91772c7f..a281916c 100644 --- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx +++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx @@ -7,7 +7,7 @@ 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'; const Pengiriman = ({ chekValid, buttonSubmitClick }) => { - const { control, watch } = useForm(); + const { control, watch, setValue } = useForm(); const { formPengiriman, errorsPengiriman, @@ -17,6 +17,65 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { const [states, setState] = useState([]); const [cities, setCities] = useState([]); const [sameAddress, setSameAddress] = useState(false); + const [everyWeekday, setEveryWeekday] = useState(false); + const [everyWeek, setEveryWeek] = useState(false); + const [tukarInvoice, setTukarInvoice] = useState(false); + const [everyWeekdayPembayaran, setEveryWeekdayPembayaran] = useState(false); + const [everyWeekPembayaran, setEveryWeekPembayaran] = useState(false); + const [tukarInvoicePembayaran, setTukarInvoicePembayaran] = useState(false); + const [selectedIds, setSelectedIds] = useState( + formPengiriman.dokumenPengiriman + ? formPengiriman.dokumenPengiriman.split(',').map(Number) + : [] + ); + const [selectedIdsDokumenInvoice, setSelectedIdsselectedIdsDokumenInvoice] = + useState( + formPengiriman.dokumenPengirimanInvoice + ? formPengiriman.dokumenPengirimanInvoice.split(',').map(Number) + : [] + ); + + const handleCheckboxChange = (id) => { + const updatedSelected = selectedIds.includes(id) + ? selectedIds.filter((selectedId) => selectedId !== id) + : [...selectedIds, id]; + + setSelectedIds(updatedSelected); + + // Jika checkbox 'Lainnya' dipilih, aktifkan input custom + + updateFormPengiriman('dokumenPengiriman', updatedSelected.join(',')); + validatePengiriman(); + }; + const handleCheckboxChangeDokumenPengirimanInvoice = (id) => { + const updatedSelected = selectedIdsDokumenInvoice.includes(id) + ? selectedIdsDokumenInvoice.filter((selectedId) => selectedId !== id) + : [...selectedIdsDokumenInvoice, id]; + + setSelectedIdsselectedIdsDokumenInvoice(updatedSelected); + + // Jika checkbox 'Lainnya' dipilih, aktifkan input custom + + updateFormPengiriman('dokumenPengirimanInvoice', updatedSelected.join(',')); + validatePengiriman(); + }; + + useEffect(() => { + if (formPengiriman.dokumenPengiriman) { + setSelectedIds(formPengiriman.dokumenPengiriman.split(',').map(Number)); // Parse string menjadi array angka + } + }, [formPengiriman.dokumenPengiriman]); + useEffect(() => { + if (formPengiriman.dokumenPengirimanInvoice) { + setSelectedIdsselectedIdsDokumenInvoice( + formPengiriman.dokumenPengirimanInvoice.split(',').map(Number) + ); // Parse string menjadi array angka + } + }, [formPengiriman.dokumenPengirimanInvoice]); + + // Fungsi untuk memeriksa apakah item sudah dipilih + const isChecked = (id) => selectedIds.includes(id); + const isCheckedInvoice = (id) => selectedIdsDokumenInvoice.includes(id); useEffect(() => { const loadState = async () => { @@ -30,12 +89,12 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { loadState(); }, []); - const watchState = watch('state'); + const watchState = watch('statePengiriman'); useEffect(() => { - updateFormPengiriman('city', ''); + updateFormPengiriman('cityPengiriman', ''); if (watchState) { - updateFormPengiriman('state', `${watchState}`); - validate(); + updateFormPengiriman('statePengiriman', `${watchState}`); + validatePengiriman(); const loadCities = async () => { let dataCities = await cityApi({ stateId: watchState }); dataCities = dataCities.map((city) => ({ @@ -48,12 +107,50 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { } }, [watchState]); + const watchCity = watch('cityPengiriman'); + useEffect(() => { + if (watchCity) { + updateFormPengiriman('cityPengiriman', `${watchCity}`); + validatePengiriman(); + } + }, [watchCity]); const handleInputChange = (event) => { const { name, value } = event.target; updateFormPengiriman(name, value); validatePengiriman(); }; + const handleEveryWeekday = () => { + setEveryWeekday(!everyWeekday); + updateFormPengiriman('everyWeekday', everyWeekday); + validatePengiriman(); + }; + const handleEveryWeek = () => { + setEveryWeek(!everyWeek); + updateFormPengiriman('everyWeek', everyWeek); + validatePengiriman(); + }; + const handleTukarInvoice = () => { + setTukarInvoice(!tukarInvoice); + updateFormPengiriman('tukarInvoice', tukarInvoice); + validatePengiriman(); + }; + const handleEveryWeekdayPembayaran = () => { + setEveryWeekdayPembayaran(!everyWeekdayPembayaran); + updateFormPengiriman('everyWeekdayPembayaran', everyWeekdayPembayaran); + validatePengiriman(); + }; + const handleEveryWeekPembayaran = () => { + setEveryWeekPembayaran(!everyWeekPembayaran); + updateFormPengiriman('everyWeekPembayaran', everyWeekPembayaran); + validatePengiriman(); + }; + const handleTukarInvoicePembayaran = () => { + setTukarInvoicePembayaran(!tukarInvoicePembayaran); + updateFormPengiriman('tukarInvoicePembayaran', tukarInvoicePembayaran); + validatePengiriman(); + }; + const isFormValid = useMemo( () => Object.keys(errorsPengiriman).length === 0, [errorsPengiriman] @@ -65,14 +162,15 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { const cityPengirimanRef = useRef(null); const zipRef = useRef(null); const invoicePicRef = useRef(null); - - const direkturEmailRef = useRef(null); - const purchasingNameRef = useRef(null); - const purchasingEmailRef = useRef(null); - const purchasingMobileRef = useRef(null); - const financeNameRef = useRef(null); - const financeMobileRef = useRef(null); - const financeEmailRef = useRef(null); + const streetInvoiceRef = useRef(null); + const stateInvoiceRef = useRef(null); + const cityInvoiceRef = useRef(null); + const everyWeekdayInputRef = useRef(null); + const everyWeekInputRef = useRef(null); + const dokumenPengirimanRef = useRef(null); + const dokumenPengirimanInputRef = useRef(null); + const dokumenPengirimanInvoiceRef = useRef(null); + const dokumenPengirimanInvoiceInputRef = useRef(null); useEffect(() => { const loadIndustries = async () => { @@ -105,33 +203,57 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { invoicePicRef.current.scrollIntoView(options); return; } - - if (errorsPengiriman.direkturEmail && direkturEmailRef.current) { - direkturEmailRef.current.scrollIntoView(options); + if (errorsPengiriman.streetInvoice && streetInvoiceRef.current) { + streetInvoiceRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.stateInvoice && stateInvoiceRef.current) { + stateInvoiceRef.current.scrollIntoView(options); return; } - if (errorsPengiriman.purchasingName && purchasingNameRef.current) { - purchasingNameRef.current.scrollIntoView(options); + if (errorsPengiriman.cityInvoice && cityInvoiceRef.current) { + cityInvoiceRef.current.scrollIntoView(options); return; } - if (errorsPengiriman.purchasingMobile && purchasingMobileRef.current) { - purchasingMobileRef.current.scrollIntoView(options); + if ( + errorsPengiriman.everyWeekdayInput && + everyWeekdayInputRef.current + ) { + everyWeekdayInputRef.current.scrollIntoView(options); return; } - if (errorsPengiriman.purchasingEmail && purchasingEmailRef.current) { - purchasingEmailRef.current.scrollIntoView(options); + if (errorsPengiriman.everyWeekInput && everyWeekInputRef.current) { + everyWeekInputRef.current.scrollIntoView(options); return; } - if (errorsPengiriman.financeName && financeNameRef.current) { - financeNameRef.current.scrollIntoView(options); + if ( + errorsPengiriman.dokumenPengiriman && + dokumenPengirimanRef.current + ) { + dokumenPengirimanRef.current.scrollIntoView(options); return; } - if (errorsPengiriman.financeMobile && financeMobileRef.current) { - financeMobileRef.current.scrollIntoView(options); + if ( + errorsPengiriman.dokumenInvoice && + dokumenPengirimanInvoiceRef.current + ) { + dokumenPengirimanInvoiceRef.current.scrollIntoView(options); return; } - if (errorsPengiriman.financeEmail && financeEmailRef.current) { - financeEmailRef.current.scrollIntoView(options); + if ( + selectedIds && + formPengiriman.dokumenPengirimanInput === '' && + dokumenPengirimanInputRef.current + ) { + dokumenPengirimanInputRef.current.scrollIntoView(options); + return; + } + if ( + selectedIdsDokumenInvoice && + formPengiriman.dokumenPengirimanInvoiceInput === '' && + dokumenPengirimanInvoiceInputRef.current + ) { + dokumenPengirimanInvoiceInputRef.current.scrollIntoView(options); return; } } @@ -144,12 +266,36 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { }, [buttonSubmitClick]); useEffect(() => { if (sameAddress) { - updateFormPengiriman('streetPengiriman', formPengiriman.streetPengiriman); - updateFormPengiriman('statePengiriman', formPengiriman.statePengiriman); - updateFormPengiriman('cityPengiriman', formPengiriman.cityPengiriman); - updateFormPengiriman('zip', formPengiriman.zip); + updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman); + updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman); + updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman); } }, [sameAddress]); + + useEffect(() => { + if (formPengiriman.statePengiriman) { + setValue('statePengiriman', parseInt(formPengiriman.statePengiriman)); + } + if (formPengiriman.stateInvoice) { + setValue('stateInvoice', parseInt(formPengiriman.stateInvoice)); + } + if (formPengiriman.cityInvoice) { + setValue('cityInvoice', parseInt(formPengiriman.cityInvoice)); + } + }, [formPengiriman]); + useEffect(() => { + const cachedData = getFromLocalStorage('Pengiriman'); + if (cachedData) { + setValue('cityPengiriman', parseInt(cachedData.cityPengiriman)); + } + }, [formPengiriman]); + const getFromLocalStorage = (key) => { + const itemStr = localStorage.getItem(key); + if (!itemStr) return null; + + const item = JSON.parse(itemStr); + return item; + }; return ( <> <div className='flex justify-start'> @@ -318,25 +464,25 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { <> <div> <input - id='streetPengiriman' - name='streetPengiriman' - ref={streetPengirimanRef} - placeholder='Masukkan alamat lengkap pengiriman barang' + id='streetInvoice' + name='streetInvoice' + ref={streetInvoiceRef} + placeholder='Masukkan alamat lengkap pengiriman invoice' type='text' - value={formPengiriman.streetPengiriman} + value={formPengiriman.streetInvoice} className='form-input' onChange={handleInputChange} /> {chekValid && ( <div className='text-caption-2 text-danger-500 mt-1'> - {errorsPengiriman.streetPengiriman} + {errorsPengiriman.streetInvoice} </div> )} </div> <div className='sub-alamat flex flex-row w-full gap-3'> - <div className='w-2/5' ref={statePengirimanRef}> + <div className='w-3/5' ref={stateInvoiceRef}> <Controller - name='statePengiriman' + name='stateInvoice' control={control} render={(props) => ( <HookFormSelect @@ -348,13 +494,13 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { /> {chekValid && ( <div className='text-caption-2 text-danger-500 mt-1'> - {errorsPengiriman.statePengiriman} + {errorsPengiriman.stateInvoice} </div> )} </div> - <div className='w-1/3' ref={cityPengirimanRef}> + <div className='w-2/5' ref={cityInvoiceRef}> <Controller - name='cityPengiriman' + name='cityInvoice' control={control} render={(props) => ( <HookFormSelect @@ -367,24 +513,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { /> {chekValid && ( <div className='text-caption-2 text-danger-500 mt-1'> - {errorsPengiriman.cityPengiriman} - </div> - )} - </div> - <div className='w-1/3'> - <input - id='zip' - name='zip' - ref={zipRef} - placeholder='Kode Pos' - type='number' - value={formPengiriman.zip} - className='form-input' - onChange={handleInputChange} - /> - {chekValid && ( - <div className='text-caption-2 text-danger-500 mt-1'> - {errorsPengiriman.zip} + {errorsPengiriman.cityInvoice} </div> )} </div> @@ -397,114 +526,216 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { <div className='flex flex-row justify-between items-start'> <div> <label className='form-label w-2/5 text-nowrap'> - Email Direktur + Jadwal Penukaran Invoice{' '} + <span className=' opacity-60'>(Opsional)</span> </label> <span className='text-xs opacity-60'> - isi email Direktur yang sesuai + Pilih jika bisnis anda memiliki jadwal penukaran invoice </span> </div> - <div className='w-3/5'> - <input - id='direkturEmail' - name='direkturEmail' - ref={direkturEmailRef} - placeholder='contoh@email.com' - type='email' - value={formPengiriman.direkturEmail} - className='form-input' - aria-invalid={errorsPengiriman.direkturEmail} - onChange={handleInputChange} - /> - {chekValid && ( - <div className='text-caption-2 text-danger-500 mt-1'> - {errorsPengiriman.direkturEmail} - </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> <label className='form-label w-2/5 text-nowrap'> - Nama Purchasing + Jadwal Pembayaran{' '} + <span className=' opacity-60'>(Opsional)</span> </label> <span className='text-xs opacity-60'> - isi nama purchasing yang bertanggung jawab di perusahaan anda + Pilih jika bisnis anda memiliki jadwal pembayaran </span> </div> - <div className='w-3/5'> - <input - id='purchasingName' - name='purchasingName' - ref={purchasingNameRef} - placeholder='Masukkan nama purchasing anda' - value={formPengiriman.purchasingName} - type='text' - className='form-input' - aria-invalid={errorsPengiriman.purchasingName} - onChange={handleInputChange} - /> - {chekValid && ( - <div className='text-caption-2 text-danger-500 mt-1'> - {errorsPengiriman.purchasingName} - </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 flex-row justify-between items-start'> <div> <label className='form-label w-2/5 text-nowrap'> - No. Telpon Purchasing + Dokumen saat Pengiriman Barang </label> <span className='text-xs opacity-60'> - isi nomor purchasing yang bertanggung jawab di perusahaan anda + Pilih dokumen lampiran saat pengiriman barang </span> </div> - <div className='w-3/5'> - <input - id='purchasingMobile' - name='purchasingMobile' - ref={financeMobileRef} - placeholder='Masukkan nomor purchasing anda' - value={formPengiriman.purchasingMobile} - type='tel' - className='form-input' - aria-invalid={errorsPengiriman.purchasingMobile} - onChange={handleInputChange} - /> - {chekValid && ( - <div className='text-caption-2 text-danger-500 mt-1'> - {errorsPengiriman.purchasingMobile} - </div> - )} - </div> - </div> + <div + className='w-3/5 flex gap-3 flex-col' + ref={dokumenPengirimanRef} + > + <Checkbox + colorScheme='red' + key='1' + isChecked={isChecked(1)} + onChange={() => handleCheckboxChange(1)} + > + Surat Tanda Terima Barang (STTB) + </Checkbox> + <Checkbox + colorScheme='red' + key='2' + isChecked={isChecked(2)} + onChange={() => handleCheckboxChange(2)} + > + Good Receipt (GR) + </Checkbox> + <Checkbox + colorScheme='red' + key='3' + isChecked={isChecked(3)} + onChange={() => handleCheckboxChange(3)} + > + Surat Terima Barang (STB) + </Checkbox> + <Checkbox + colorScheme='red' + key='4' + isChecked={isChecked(4)} + onChange={() => handleCheckboxChange(4)} + > + Lembar Penerimaan Barang (LPB) + </Checkbox> - <div className='flex flex-row justify-between items-start'> - <div> - <label className='form-label w-2/5 text-nowrap'> - Email Purchasing - </label> - <span className='text-xs opacity-60'> - isi email purchasing benar - </span> - </div> - <div className='w-3/5'> - <input - id='purchasingEmail' - name='purchasingEmail' - ref={purchasingEmailRef} - placeholder='contoh@email.com' - value={formPengiriman.purchasingEmail} - type='email' - className='form-input' - aria-invalid={errorsPengiriman.purchasingEmail} - onChange={handleInputChange} - /> + <div className='flex gap-3 flex-col'> + <Checkbox + colorScheme='red' + key='4' + isChecked={isChecked(5)} + onChange={() => handleCheckboxChange(5)} + > + 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.purchasingEmail} + {errorsPengiriman.dokumenPengiriman} </div> )} </div> @@ -513,84 +744,84 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { <div className='flex flex-row justify-between items-start'> <div> <label className='form-label w-2/5 text-nowrap'> - Nama Finance + Dokumen yang dilampirkan saat Pengiriman Invoice </label> <span className='text-xs opacity-60'> - isi nama finance yang bertanggung jawab di perusahaan anda + Dokumen akan dikirimkan sesuai dengan yang anda pilih </span> </div> - <div className='w-3/5'> - <input - id='financeName' - name='financeName' - ref={financeNameRef} - placeholder='Masukkan nama finance' - value={formPengiriman.financeName} - type='text' - className='form-input' - aria-invalid={errorsPengiriman.financeName} - onChange={handleInputChange} - /> - {chekValid && ( - <div className='text-caption-2 text-danger-500 mt-1'> - {errorsPengiriman.financeName} - </div> - )} - </div> - </div> - <div className='flex flex-row justify-between items-start'> - <div> - <label className='form-label w-2/5 text-nowrap'> - No. Telpon Finance - </label> - <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={formPengiriman.financeMobile} - type='tel' - className='form-input' - aria-invalid={errorsPengiriman.financeMobile} - onChange={handleInputChange} - /> - {chekValid && ( - <div className='text-caption-2 text-danger-500 mt-1'> - {errorsPengiriman.financeMobile} - </div> - )} - </div> - </div> + <div + className='w-3/5 flex gap-3 flex-col' + ref={dokumenPengirimanInvoiceRef} + > + <Checkbox + colorScheme='red' + key='1' + isChecked={isCheckedInvoice(1)} + onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(1)} + > + Invoice Pembelian + </Checkbox> + <Checkbox + colorScheme='red' + key='2' + isChecked={isCheckedInvoice(2)} + onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(2)} + > + Surat Jalan + </Checkbox> + <Checkbox + colorScheme='red' + key='3' + isChecked={isCheckedInvoice(3)} + onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(3)} + > + Berita Acara Serah Terima (BAST) + </Checkbox> + <Checkbox + colorScheme='red' + key='4' + isChecked={isCheckedInvoice(4)} + onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(4)} + > + Faktur Pajak + </Checkbox> + <Checkbox + colorScheme='red' + key='4' + isChecked={isCheckedInvoice(5)} + onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(5)} + > + Good Receipt (GR) + </Checkbox> - <div className='flex flex-row justify-between items-start'> - <div> - <label className='form-label w-2/5 text-nowrap'> - Email Finance - </label> - <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={formPengiriman.financeEmail} - className='form-input' - aria-invalid={errorsPengiriman.financeEmail} - onChange={handleInputChange} - /> + <div className='flex gap-3 flex-col'> + <Checkbox + colorScheme='red' + key='4' + isChecked={isCheckedInvoice(6)} + onChange={() => + handleCheckboxChangeDokumenPengirimanInvoice(6) + } + > + 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.financeEmail} + {errorsPengiriman.dokumenInvoicePengiriman} </div> )} </div> |