<iman> pengajuan tempo

1 files changed, 598 insertions, 706 deletions

diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
index 8b8961c5..0352b54f 100644
--- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx
+++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
@@ -9,7 +9,7 @@ import {
   usePengajuanTempoStorePengiriman,
   usePengajuanTempoStore,
 } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
-
+import { toast } from 'react-hot-toast';
 import useDevice from '@/core/hooks/useDevice';
 const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const { control, watch, setValue } = useForm();
@@ -102,7 +102,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
 
   const watchState = watch('statePengiriman');
   useEffect(() => {
-    updateFormPengiriman('cityPengiriman', '');
+    // updateFormPengiriman('cityPengiriman', '');
     if (watchState) {
       updateFormPengiriman('statePengiriman', `${watchState}`);
       validatePengiriman();
@@ -352,35 +352,63 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     if (sameAddress) {
       updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman);
       updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman);
+      setValue('stateInvoice', parseInt(formPengiriman.statePengiriman));
       updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman);
+      setValue('cityInvoice', parseInt(formPengiriman.cityPengiriman));
+      updateFormPengiriman('isSameAddrees', `${sameAddress}`);
     } else {
-      updateFormPengiriman('streetInvoice', '');
-      updateFormPengiriman('stateInvoice', '');
-      updateFormPengiriman('cityInvoice', '');
-      setValue('streetInvoice', '');
-      setValue('stateInvoice', '');
-      setValue('cityInvoice', '');
+      // updateFormPengiriman('streetInvoice', '');
+      // updateFormPengiriman('stateInvoice', '');
+      // updateFormPengiriman('cityInvoice', '');
+      // setValue('streetInvoice', '');
+      // setValue('stateInvoice', '');
+      // setValue('cityInvoice', '');
     }
-    updateFormPengiriman('isSameAddrees', `${sameAddress}`);
     validatePengiriman();
-  }, [sameAddress]);
+  }, [
+    sameAddress,
+    formPengiriman.streetPengiriman,
+    formPengiriman.statePengiriman,
+    formPengiriman.cityPengiriman,
+  ]);
+  useEffect(() => {
+    if (formPengiriman.sameAddressStreet?.toLowerCase().includes('true')) {
+      setSameAddressStreet(true);
+    } else {
+      setSameAddressStreet(false);
+    }
+  }, [formPengiriman.sameAddressStreet]);
+  useEffect(() => {
+    if (formPengiriman.statePengiriman) {
+      setValue('statePengiriman', parseInt(formPengiriman.statePengiriman));
+    }
+  }, [formPengiriman.statePengiriman]);
+  useEffect(() => {
+    if (formPengiriman.cityPengiriman) {
+      setValue('cityPengiriman', parseInt(formPengiriman.cityPengiriman));
+    }
+  }, [formPengiriman.cityPengiriman]);
 
   useEffect(() => {
     if (sameAddressStreet) {
+      console.log('form.state', form);
       updateFormPengiriman('streetPengiriman', form.street);
       updateFormPengiriman('statePengiriman', form.state);
+      setValue('statePengiriman', parseInt(form.state));
       updateFormPengiriman('cityPengiriman', form.city);
+      setValue('cityPengiriman', parseInt(form.city));
       updateFormPengiriman('zipPengiriman', form.zip);
-    } else {
-      updateFormPengiriman('streetPengiriman', '');
-      updateFormPengiriman('statePengiriman', '');
-      updateFormPengiriman('cityPengiriman', '');
-      updateFormPengiriman('zipPengiriman', '');
-      setValue('streetPengiriman', '');
-      setValue('statePengiriman', '');
-      setValue('cityPengiriman', '');
+      updateFormPengiriman('isSameAddreesStreet', `${sameAddressStreet}`);
     }
-    updateFormPengiriman('isSameAddreesStreet', `${sameAddressStreet}`);
+    // else {
+    //   updateFormPengiriman('streetPengiriman', '');
+    //   updateFormPengiriman('statePengiriman', '');
+    //   updateFormPengiriman('cityPengiriman', '');
+    //   updateFormPengiriman('zipPengiriman', '');
+    //   setValue('streetPengiriman', '');
+    //   setValue('statePengiriman', '');
+    //   setValue('cityPengiriman', '');
+    // }
     validatePengiriman();
   }, [sameAddressStreet]);
 
@@ -459,8 +487,70 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     setSameAddress(!sameAddress);
   };
   const handleChangeSameAddressStreet = () => {
+    // updateFormPengiriman('sameAddressStreet', `${!sameAddressStreet}`);
     setSameAddressStreet(!sameAddressStreet);
+    if (sameAddressStreet == false) {
+      updateFormPengiriman('streetPengiriman', '');
+      updateFormPengiriman('statePengiriman', '');
+      updateFormPengiriman('cityPengiriman', '');
+      updateFormPengiriman('zipPengiriman', '');
+      setValue('streetPengiriman', '');
+      setValue('statePengiriman', '');
+      setValue('cityPengiriman', '');
+      updateFormPengiriman('isSameAddreesStreet', `${sameAddressStreet}`);
+      validate();
+    }
   };
+
+  useEffect(() => {
+    const options = {
+      behavior: 'smooth',
+      block: 'center',
+    };
+
+    const loadIndustries = async () => {
+      const watchZip = formPengiriman.zipPengiriman?.trim(); // Menghapus spasi berlebih
+
+      // Validasi: hanya eksekusi jika watchZip valid (contoh: minimal 5 karakter)
+      if (watchZip && watchZip.length >= 5) {
+        const loadZip = async () => {
+          try {
+            const response = await fetch(
+              `https://alamat.thecloudalert.com/api/cari/index/?keyword=${watchZip}`
+            );
+
+            const result = await response.json();
+
+            if (!result.result.length > 0) {
+              toast.error('Alamat pos salah');
+              updateFormPengiriman('zipPengiriman', ''); // Reset form.zip jika salah
+              validate(); // Memanggil validasi formulir
+              return false;
+            } else {
+              updateFormPengiriman('zipPengiriman', watchZip);
+              validate();
+              return true; // Jika valid
+            }
+          } catch (error) {
+            toast.error('Terjadi kesalahan saat memeriksa alamat pos.');
+            console.error('Error:', error);
+            return false;
+          }
+        };
+
+        const isValidZip = await loadZip();
+        if (!isValidZip) {
+          zipRef.current.scrollIntoView(options);
+        }
+      }
+    };
+
+    loadIndustries();
+  }, [formPengiriman.zipPengiriman]);
+
+  console.log('formPengiriman', formPengiriman);
+  console.log('errorsPengiriman', errorsPengiriman);
+
   return (
     <>
       {isDesktop && (
@@ -477,18 +567,33 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   </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}
-                    aria-label='PICName'
-                    onChange={handleInputChange}
-                  />
+                  <div className='flex items-center border border-gray-300 rounded-md'>
+                    <select
+                      value={formPengiriman.PICTittle || ''}
+                      id='PICTittle'
+                      name='PICTittle'
+                      className=' p-2   rounded-l-md'
+                      onChange={handleInputChange}
+                    >
+                      <option value='' disabled>
+                        Pilih
+                      </option>
+                      <option value='Bpk'>Bpk</option>
+                      <option value='Ibu'>Ibu</option>
+                    </select>
+                    <input
+                      value={formPengiriman.PICName}
+                      id='PICName'
+                      name='PICName'
+                      placeholder='Masukkan nama pic penerimaan barang disini'
+                      type='text'
+                      className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none'
+                      aria-invalid={errorsPengiriman.PICName}
+                      ref={PICNameRef}
+                      aria-label='PICName'
+                      onChange={handleInputChange}
+                    />
+                  </div>
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
                       {errorsPengiriman.PICName}
@@ -515,92 +620,95 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                     isChecked={sameAddressStreet}
                     onChange={handleChangeSameAddressStreet}
                   >
-                    Alamat Pengiriman sama dengan alamat pengiriman
+                    Alamat Pengiriman sama dengan alamat bisnis
                   </Checkbox>
-                  {!sameAddressStreet && (
-                    <>
-                      <div>
+
+                  <>
+                    <div>
+                      <input
+                        id='streetPengiriman'
+                        name='streetPengiriman'
+                        ref={streetPengirimanRef}
+                        aria-label='streetPengiriman'
+                        placeholder='Masukkan alamat lengkap pengiriman barang'
+                        type='text'
+                        value={formPengiriman.streetPengiriman}
+                        className='form-input'
+                        onChange={handleInputChange}
+                        disabled={sameAddressStreet}
+                      />
+                      {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}
+                        aria-label='statePengiriman'
+                      >
+                        <Controller
+                          name='statePengiriman'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              disabled={sameAddressStreet}
+                              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'
+                          aria-label='cityPengiriman'
+                          disabled={sameAddressStreet}
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={cities}
+                              disabled={!watchState || sameAddressStreet}
+                              placeholder='Kota'
+                            />
+                          )}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errorsPengiriman.cityPengiriman}
+                          </div>
+                        )}
+                      </div>
+                      <div className='w-1/3'>
                         <input
-                          id='streetPengiriman'
-                          name='streetPengiriman'
-                          ref={streetPengirimanRef}
-                          aria-label='streetPengiriman'
-                          placeholder='Masukkan alamat lengkap pengiriman barang'
-                          type='text'
-                          value={formPengiriman.streetPengiriman}
+                          id='zipPengiriman'
+                          aria-label='zipPengiriman'
+                          disabled={sameAddressStreet}
+                          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.streetPengiriman}
+                            {errorsPengiriman.zipPengiriman}
                           </div>
                         )}
                       </div>
-                      <div className='sub-alamat flex flex-row w-full gap-3'>
-                        <div
-                          className='w-2/5'
-                          ref={statePengirimanRef}
-                          aria-label='statePengiriman'
-                        >
-                          <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'
-                            aria-label='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'>
-                          <input
-                            id='zipPengiriman'
-                            aria-label='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>
 
@@ -611,18 +719,33 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   </label>
                 </div>
                 <div className='w-3/5'>
-                  <input
-                    value={formPengiriman.invoicePic}
-                    id='invoicePic'
-                    name='invoicePic'
-                    aria-label='invoicePic'
-                    placeholder='Masukkan nama pic invoice disini'
-                    type='text'
-                    className='form-input'
-                    aria-invalid={errorsPengiriman.invoicePic}
-                    ref={invoicePicRef}
-                    onChange={handleInputChange}
-                  />
+                  <div className='flex items-center border border-gray-300 rounded-md'>
+                    <select
+                      value={formPengiriman.invoicePicTittle || ''}
+                      id='invoicePicTittle'
+                      name='invoicePicTittle'
+                      className=' p-2   rounded-l-md'
+                      onChange={handleInputChange}
+                    >
+                      <option value='' disabled>
+                        Pilih
+                      </option>
+                      <option value='Bpk'>Bpk</option>
+                      <option value='Ibu'>Ibu</option>
+                    </select>
+                    <input
+                      value={formPengiriman.invoicePic}
+                      id='invoicePic'
+                      name='invoicePic'
+                      aria-label='invoicePic'
+                      placeholder='Masukkan nama pic invoice disini'
+                      type='text'
+                      className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none'
+                      aria-invalid={errorsPengiriman.invoicePic}
+                      ref={invoicePicRef}
+                      onChange={handleInputChange}
+                    />
+                  </div>
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
                       {errorsPengiriman.invoicePic}
@@ -653,75 +776,76 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       Alamat invoice sama dengan alamat pengiriman
                     </Checkbox>
                   </div>
-                  {!sameAddress && (
-                    <>
-                      <div>
-                        <input
-                          id='streetInvoice'
-                          name='streetInvoice'
-                          aria-label='streetInvoice'
-                          ref={streetInvoiceRef}
-                          placeholder='Masukkan alamat lengkap pengiriman invoice'
-                          type='text'
-                          value={formPengiriman.streetInvoice}
-                          className='form-input'
-                          onChange={handleInputChange}
+
+                  <>
+                    <div>
+                      <input
+                        id='streetInvoice'
+                        name='streetInvoice'
+                        aria-label='streetInvoice'
+                        ref={streetInvoiceRef}
+                        disabled={sameAddress}
+                        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}
+                        aria-label='stateInvoice'
+                      >
+                        <Controller
+                          name='stateInvoice'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={states}
+                              disabled={sameAddress}
+                              placeholder='Provinsi'
+                            />
+                          )}
                         />
                         {chekValid && (
                           <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errorsPengiriman.streetInvoice}
+                            {errorsPengiriman.stateInvoice}
                           </div>
                         )}
                       </div>
-                      <div className='sub-alamat flex flex-row w-full gap-3'>
-                        <div
-                          className='w-3/5'
-                          ref={stateInvoiceRef}
-                          aria-label='stateInvoice'
-                        >
-                          <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}
-                          aria-label='cityInvoice'
-                        >
-                          <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
+                        className='w-2/5'
+                        ref={cityInvoiceRef}
+                        aria-label='cityInvoice'
+                      >
+                        <Controller
+                          name='cityInvoice'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={cities}
+                              disabled={!watchState || sameAddress}
+                              placeholder='Kota'
+                            />
                           )}
-                        </div>
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errorsPengiriman.cityInvoice}
+                          </div>
+                        )}
                       </div>
-                    </>
-                  )}
+                    </div>
+                  </>
                 </div>
               </div>
 
@@ -738,59 +862,17 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   )}
                 </div>
                 <div className='w-3/5 flex gap-3 flex-col'>
-                  <RadioGroup
-                    onChange={handleRadioChange}
-                    value={selectedRadio}
-                  >
-                    <div className='flex gap-3 flex-col'>
-                      <Radio value='everyWeekday' colorScheme='red'>
-                        Setiap Minggu di hari
-                      </Radio>
-                      <input
-                        id='everyWeekdayInput'
-                        aria-label='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'>
-                      <Radio value='everyWeek' colorScheme='red'>
-                        Setiap Bulan di minggu ke
-                      </Radio>
-                      <input
-                        id='everyWeekInput'
-                        aria-label='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'>
-                      <Radio value='tukarInvoice' colorScheme='red'>
-                        Lainnya
-                      </Radio>
-                      <textarea
-                        id='tukarInvoiceInput'
-                        name='tukarInvoiceInput'
-                        aria-label='tukarInvoiceInput'
-                        placeholder='Isi manual dokumen yang anda mau'
-                        value={formPengiriman.tukarInvoiceInput}
-                        className='form-input'
-                        rows={4}
-                        cols={40}
-                        onChange={handleInputChange}
-                      />
-                    </div>
-                  </RadioGroup>
+                  <textarea
+                    id='tukarInvoiceInput'
+                    name='tukarInvoiceInput'
+                    aria-label='tukarInvoiceInput'
+                    placeholder='Masukkan jadwal penukaran invoice'
+                    value={formPengiriman.tukarInvoiceInput}
+                    className='form-input'
+                    rows={4}
+                    cols={40}
+                    onChange={handleInputChange}
+                  />
                 </div>
               </div>
 
@@ -807,65 +889,29 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   )}
                 </div>
                 <div className='w-3/5 flex gap-3 flex-col'>
-                  <RadioGroup
-                    onChange={handleRadioChangeInvoice}
-                    value={selectedRadioInvoice}
-                  >
-                    <div className='flex gap-3 flex-col'>
-                      <Radio value='everyWeekdayPembayaran' colorScheme='red'>
-                        Setiap Minggu di hari
-                      </Radio>
-                      <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'>
-                      <Radio value='everyWeekPembayaran' colorScheme='red'>
-                        Setiap Bulan di minggu ke
-                      </Radio>
-                      <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'>
-                      <Radio value='tukarInvoicePembayaran' colorScheme='red'>
-                        Lainnya
-                      </Radio>
-                      <textarea
-                        id='tukarInvoiceInputPembayaran'
-                        name='tukarInvoiceInputPembayaran'
-                        placeholder='isi manual dokumen yang anda mau'
-                        value={formPengiriman.tukarInvoiceInputPembayaran}
-                        className='form-input'
-                        rows={4}
-                        cols={40}
-                        onChange={handleInputChange}
-                      />
-                    </div>
-                  </RadioGroup>
+                  <textarea
+                    id='tukarInvoiceInputPembayaran'
+                    name='tukarInvoiceInputPembayaran'
+                    placeholder='Masukkan jadwal pembayaran'
+                    value={formPengiriman.tukarInvoiceInputPembayaran}
+                    className='form-input'
+                    rows={4}
+                    cols={40}
+                    onChange={handleInputChange}
+                  />
                 </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
+                    Apakah ada dokumen tanda terima yang diberikan pada saat
+                    pengiriman barang?{' '}
+                    <span className=' opacity-60'>(Opsional)</span>
                   </label>
                   {!isKonfirmasi && (
                     <span className='text-xs opacity-60'>
-                      Pilih dokumen lampiran saat pengiriman barang
+                      Pilih dokumen tanda terima saat pengiriman barang jika ada
                     </span>
                   )}
                 </div>
@@ -907,7 +953,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                     Lembar Penerimaan Barang (LPB)
                   </Checkbox>
 
-                  <div className='flex gap-3 flex-col'>
+                  {/* <div className='flex gap-3 flex-col'>
                     <Checkbox
                       colorScheme='red'
                       key='4'
@@ -929,7 +975,41 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       cols={40}
                       onChange={handleInputChange}
                     />
-                  </div>
+                  </div> */}
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.dokumenPengiriman}
+                    </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{' '}
+                    <span className=' opacity-60'>(Opsional)</span>
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      Dokumen lampiran saat pengiriman barang
+                    </span>
+                  )}
+                </div>
+                <div className='flex gap-3 flex-col w-3/5 '>
+                  <textarea
+                    id='dokumenPengirimanInput'
+                    name='dokumenPengirimanInput'
+                    aria-label='dokumenPengirimanInput'
+                    placeholder='isi manual dokumen yang anda mau'
+                    type='textarea'
+                    ref={dokumenPengirimanInputRef}
+                    value={formPengiriman.dokumenPengirimanInput}
+                    className='form-input'
+                    rows={4}
+                    cols={40}
+                    onChange={handleInputChange}
+                  />
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
                       {errorsPengiriman.dokumenPengiriman}
@@ -941,93 +1021,27 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <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
+                    Dokumen yang dilampirkan saat Pengiriman Invoice{' '}
+                    <span className=' opacity-60'>(Opsional)</span>
                   </label>
                   <span className='text-xs opacity-60'>
-                    Dokumen akan dikirimkan sesuai dengan yang anda pilih
+                    Dokumen lampiran saat pengiriman invoice
                   </span>
                 </div>
-                <div
-                  className='w-3/5 flex gap-3 flex-col'
-                  ref={dokumenPengirimanInvoiceRef}
-                  name='dokumenPengirimanInvoiceInput'
-                >
-                  <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'
-                      aria-label='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>
+                <div className='flex gap-3 flex-col w-3/5'>
+                  <textarea
+                    id='dokumenPengirimanInvoice'
+                    aria-label='dokumenPengirimanInvoice'
+                    name='dokumenPengirimanInvoice'
+                    placeholder='isi manual dokumen yang anda mau'
+                    type='textarea'
+                    ref={dokumenPengirimanInvoiceRef}
+                    value={formPengiriman.dokumenPengirimanInvoice}
+                    className='form-input'
+                    rows={4}
+                    cols={40}
+                    onChange={handleInputChange}
+                  />
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
                       {errorsPengiriman.dokumenPengirimanInvoice}
@@ -1054,18 +1068,33 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 <label className='form-label  text-nowrap'>
                   Nama PIC Penerimaan Barang
                 </label>
-                <input
-                  value={formPengiriman.PICName}
-                  id='PICName'
-                  name='PICName'
-                  aria-label='PICName'
-                  placeholder='Masukkan nama pic pengiriman disini'
-                  type='text'
-                  className='form-input'
-                  aria-invalid={errorsPengiriman.PICName}
-                  ref={PICNameRef}
-                  onChange={handleInputChange}
-                />
+                <div className='flex items-center border border-gray-300 rounded-md w-full'>
+                  <select
+                    value={formPengiriman.PICTittle || ''}
+                    id='PICTittle'
+                    name='PICTittle'
+                    className=' p-2   rounded-l-md'
+                    onChange={handleInputChange}
+                  >
+                    <option value='' disabled>
+                      Pilih
+                    </option>
+                    <option value='Bpk'>Bpk</option>
+                    <option value='Ibu'>Ibu</option>
+                  </select>
+                  <input
+                    value={formPengiriman.PICName}
+                    id='PICName'
+                    name='PICName'
+                    aria-label='PICName'
+                    placeholder='Masukkan nama pic penerima barang disini'
+                    type='text'
+                    className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none'
+                    aria-invalid={errorsPengiriman.PICName}
+                    ref={PICNameRef}
+                    onChange={handleInputChange}
+                  />
+                </div>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errorsPengiriman.PICName}
@@ -1077,12 +1106,21 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 <label className='form-label   text-nowrap'>
                   Alamat Pengiriman Barang
                 </label>
+                <Checkbox
+                  colorScheme='red'
+                  isChecked={sameAddressStreet}
+                  onChange={handleChangeSameAddressStreet}
+                  size='sm'
+                >
+                  Alamat Pengiriman sama dengan alamat bisnis
+                </Checkbox>
                 <div className='w-full'>
                   <input
                     id='streetPengiriman'
                     name='streetPengiriman'
                     aria-label='streetPengiriman'
                     ref={streetPengirimanRef}
+                    disabled={sameAddressStreet}
                     placeholder='Masukkan alamat lengkap pengiriman barang'
                     type='text'
                     value={formPengiriman.streetPengiriman}
@@ -1107,11 +1145,17 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       render={(props) => (
                         <HookFormSelect
                           {...props}
+                          disabled={sameAddressStreet}
                           options={states}
                           placeholder='Provinsi'
                         />
                       )}
                     />
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errorsPengiriman.statePengiriman}
+                      </div>
+                    )}
                   </div>
                   <div
                     className='w-1/3'
@@ -1125,11 +1169,16 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                         <HookFormSelect
                           {...props}
                           options={cities}
-                          disabled={!watchState}
+                          disabled={!watchState || sameAddressStreet}
                           placeholder='Kota'
                         />
                       )}
                     />
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errorsPengiriman.cityPengiriman}
+                      </div>
+                    )}
                   </div>
                   <div className='w-1/3'>
                     <input
@@ -1138,27 +1187,18 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       name='zipPengiriman'
                       ref={zipRef}
                       placeholder='Kode Pos'
+                      disabled={sameAddressStreet}
                       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>
-                  {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>
 
@@ -1166,18 +1206,33 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 <label className='form-label  text-nowrap'>
                   Nama PIC Penerimaan Invoice
                 </label>
-                <input
-                  value={formPengiriman.invoicePic}
-                  id='invoicePic'
-                  aria-label='invoicePic'
-                  name='invoicePic'
-                  placeholder='Masukkan nama pic invoice disini'
-                  type='text'
-                  className='form-input'
-                  aria-invalid={errorsPengiriman.invoicePic}
-                  ref={invoicePicRef}
-                  onChange={handleInputChange}
-                />
+                <div className='flex items-center border border-gray-300 rounded-md w-full'>
+                  <select
+                    value={formPengiriman.invoicePicTittle || ''}
+                    id='invoicePicTittle'
+                    name='invoicePicTittle'
+                    className=' p-2   rounded-l-md'
+                    onChange={handleInputChange}
+                  >
+                    <option value='' disabled>
+                      Pilih
+                    </option>
+                    <option value='Bpk'>Bpk</option>
+                    <option value='Ibu'>Ibu</option>
+                  </select>
+                  <input
+                    value={formPengiriman.invoicePic}
+                    id='invoicePic'
+                    aria-label='invoicePic'
+                    name='invoicePic'
+                    placeholder='Masukkan nama pic invoice disini'
+                    type='text'
+                    className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none'
+                    aria-invalid={errorsPengiriman.invoicePic}
+                    ref={invoicePicRef}
+                    onChange={handleInputChange}
+                  />
+                </div>
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errorsPengiriman.invoicePic}
@@ -1199,75 +1254,76 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                     Alamat invoice sama dengan alamat pengiriman
                   </Checkbox>
                 </div>
-                {!sameAddress && (
-                  <>
-                    <div className='w-full'>
-                      <input
-                        id='streetInvoice'
-                        aria-label='streetInvoice'
-                        name='streetInvoice'
-                        ref={streetInvoiceRef}
-                        placeholder='Masukkan alamat lengkap pengiriman invoice'
-                        type='text'
-                        value={formPengiriman.streetInvoice}
-                        className='form-input'
-                        onChange={handleInputChange}
+
+                <>
+                  <div className='w-full'>
+                    <input
+                      id='streetInvoice'
+                      aria-label='streetInvoice'
+                      name='streetInvoice'
+                      ref={streetInvoiceRef}
+                      disabled={sameAddress}
+                      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}
+                      aria-label='stateInvoice'
+                    >
+                      <Controller
+                        name='stateInvoice'
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={states}
+                            disabled={sameAddress}
+                            placeholder='Provinsi'
+                          />
+                        )}
                       />
                       {chekValid && (
                         <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errorsPengiriman.streetInvoice}
+                          {errorsPengiriman.stateInvoice}
                         </div>
                       )}
                     </div>
-                    <div className='sub-alamat flex flex-row w-full gap-3'>
-                      <div
-                        className='w-3/5'
-                        ref={stateInvoiceRef}
-                        aria-label='stateInvoice'
-                      >
-                        <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}
-                        aria-label='cityInvoice'
-                      >
-                        <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
+                      className='w-2/5'
+                      ref={cityInvoiceRef}
+                      aria-label='cityInvoice'
+                    >
+                      <Controller
+                        name='cityInvoice'
+                        control={control}
+                        render={(props) => (
+                          <HookFormSelect
+                            {...props}
+                            options={cities}
+                            disabled={!watchState || sameAddress}
+                            placeholder='Kota'
+                          />
                         )}
-                      </div>
+                      />
+                      {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'>
@@ -1277,73 +1333,21 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </label>
                 {!isKonfirmasi && (
                   <span className='text-xs opacity-60'>
-                    Pilih jika bisnis anda memiliki jadwal penukaran invoice
+                    Isi 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'
-                      aria-label='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'
-                      aria-label='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>
+                  <textarea
+                    id='tukarInvoiceInput'
+                    name='tukarInvoiceInput'
+                    placeholder='Masukkan jadwal penukaran invoice'
+                    type='textarea'
+                    value={formPengiriman.tukarInvoiceInput}
+                    className='form-input'
+                    rows={4}
+                    cols={40}
+                    onChange={handleInputChange}
+                  />
                 </div>
                 <div className='w-2/5'></div>
               </div>
@@ -1355,75 +1359,29 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </label>
                 {!isKonfirmasi && (
                   <span className='text-xs opacity-60'>
-                    Pilih jika bisnis anda memiliki jadwal pembayaran
+                    Isi 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>
+                  <textarea
+                    id='tukarInvoiceInputPembayaran'
+                    name='tukarInvoiceInputPembayaran'
+                    placeholder='Masukkan jadwal pembayaran'
+                    type='textarea'
+                    value={formPengiriman.tukarInvoiceInputPembayaran}
+                    className='form-input'
+                    rows={4}
+                    cols={40}
+                    onChange={handleInputChange}
+                  />
                 </div>
               </div>
 
               <div className='flex flex-col gap-2  justify-between items-start'>
                 <label className='form-label   text-wrap'>
-                  Dokumen saat Pengiriman Barang
+                  Apakah ada dokumen tanda terima yang diberikan pada saat
+                  pengiriman barang?{' '}
+                  <span className=' opacity-60'>(Opsional)</span>
                 </label>
                 {!isKonfirmasi && (
                   <span className='text-xs opacity-60'>
@@ -1472,30 +1430,36 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                     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'
-                      aria-label='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 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'>
+                    Dokumen lampiran saat pengiriman barang
+                  </span>
+                )}
+                <div className='flex gap-3 flex-col w-full'>
+                  <textarea
+                    id='dokumenPengirimanInput'
+                    aria-label='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}
+                  />
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
                       {errorsPengiriman.dokumenPengiriman}
@@ -1507,97 +1471,25 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
               <div className='flex flex-col gap-2  justify-between items-start'>
                 <label className='form-label  text-wrap'>
                   Dokumen yang dilampirkan saat Pengiriman Invoice
+                  <span className=' opacity-60'>(Opsional)</span>
                 </label>
                 <span className='text-xs opacity-60'>
-                  Pilih dokumen lampiran saat pengiriman invoice
+                  Dokumen lampiran saat pengiriman invoice
                 </span>
-                <div
-                  className='w-full flex gap-2 flex-col'
-                  ref={dokumenPengirimanInvoiceRef}
-                  aria-label='dokumenPengirimanInvoiceInput'
-                >
-                  <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'
-                      aria-label='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>
+                <div className='flex gap-3 flex-col w-full'>
+                  <textarea
+                    id='dokumenPengirimanInvoice'
+                    aria-label='dokumenPengirimanInvoice'
+                    name='dokumenPengirimanInvoice'
+                    placeholder='isi manual dokumen yang anda mau'
+                    type='textarea'
+                    ref={dokumenPengirimanInvoiceRef}
+                    value={formPengiriman.dokumenPengirimanInvoice}
+                    className='form-input'
+                    rows={4}
+                    cols={40}
+                    onChange={handleInputChange}
+                  />
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
                       {errorsPengiriman.dokumenInvoicePengiriman}