From c61477111b95d83a9b862f242923b911364f3612 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 19 Oct 2024 11:49:38 +0700
Subject: <iman> fix section pengiriman

---
 src/lib/pengajuan-tempo/component/Pengiriman.jsx | 657 +++++++++++++++--------
 1 file changed, 444 insertions(+), 213 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/Pengiriman.jsx')

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>
-- 
cgit v1.2.3

