<iman> update pengajuan tempo mobile 80%

1 files changed, 1028 insertions, 458 deletions

diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
index 956febcc..3ff14e18 100644
--- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx
+++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
@@ -6,8 +6,10 @@ import stateApi from '@/lib/address/api/stateApi.js';
 import cityApi from '@/lib/address/api/cityApi';
 import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
 import { usePengajuanTempoStorePengiriman } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+import useDevice from '@/core/hooks/useDevice';
 const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const { control, watch, setValue } = useForm();
+  const { isDesktop, isMobile } = useDevice();
   const {
     formPengiriman,
     errorsPengiriman,
@@ -292,8 +294,16 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
       updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman);
       updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman);
       updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman);
+    } else {
+      updateFormPengiriman('streetInvoice', '');
+      updateFormPengiriman('stateInvoice', '');
+      updateFormPengiriman('cityInvoice', '');
+      setValue('streetInvoice', '');
+      setValue('stateInvoice', '');
+      setValue('cityInvoice', '');
     }
     updateFormPengiriman('isSameAddrees', `${sameAddress}`);
+    validatePengiriman();
   }, [sameAddress]);
 
   const getFromLocalStorage = (key) => {
@@ -322,6 +332,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     if (cachedData?.isSameAddrees) {
       updateFormPengiriman('isSameAddrees', `${cachedData?.isSameAddrees}`);
     }
+    validatePengiriman();
   }, [cachedData?.cityPengiriman]);
   useEffect(() => {
     if (cachedData?.everyWeek) {
@@ -357,6 +368,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
       );
       setTukarInvoicePembayaran(cachedData?.tukarInvoicePembayaran);
     }
+    validatePengiriman();
   }, [
     cachedData?.everyWeek,
     cachedData?.everyWeekday,
@@ -370,197 +382,73 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   };
   return (
     <>
-      <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
-        Pengiriman
-      </h1>
-      <form className='flex flex-col w-full '>
-        <div className='w-full grid grid-row-2 gap-5'>
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label  text-nowrap'>
-                Nama PIC Penerimaan Barang
-              </label>
-            </div>
-            <div className='w-3/5'>
-              <input
-                value={formPengiriman.PICName}
-                id='PICName'
-                name='PICName'
-                placeholder='Masukkan nama pic pengiriman disini'
-                type='text'
-                className='form-input'
-                aria-invalid={errorsPengiriman.PICName}
-                ref={PICNameRef}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsPengiriman.PICName}
+      {isDesktop && (
+        <div>
+          <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
+            Pengiriman
+          </h1>
+          <form className='flex flex-col w-full '>
+            <div className='w-full grid grid-row-2 gap-5'>
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    Nama PIC Penerimaan Barang
+                  </label>
                 </div>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label   text-nowrap'>
-                Alamat Pengiriman Barang
-              </label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  pastikan alamat yang anda isi sesuai dengan alamat kirim
-                  barang
-                </span>
-              )}
-            </div>
-            <div className='w-3/5 flex gap-3 flex-col'>
-              <div>
-                <input
-                  id='streetPengiriman'
-                  name='streetPengiriman'
-                  ref={streetPengirimanRef}
-                  placeholder='Masukkan alamat lengkap pengiriman barang'
-                  type='text'
-                  value={formPengiriman.streetPengiriman}
-                  className='form-input'
-                  onChange={handleInputChange}
-                />
-                {chekValid && (
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errorsPengiriman.streetPengiriman}
-                  </div>
-                )}
-              </div>
-              <div className='sub-alamat flex flex-row w-full gap-3'>
-                <div className='w-2/5' ref={statePengirimanRef}>
-                  <Controller
-                    name='statePengiriman'
-                    control={control}
-                    render={(props) => (
-                      <HookFormSelect
-                        {...props}
-                        options={states}
-                        placeholder='Provinsi'
-                      />
-                    )}
-                  />
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errorsPengiriman.statePengiriman}
-                    </div>
-                  )}
-                </div>
-                <div className='w-1/3' ref={cityPengirimanRef}>
-                  <Controller
-                    name='cityPengiriman'
-                    control={control}
-                    render={(props) => (
-                      <HookFormSelect
-                        {...props}
-                        options={cities}
-                        disabled={!watchState}
-                        placeholder='Kota'
-                      />
-                    )}
-                  />
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errorsPengiriman.cityPengiriman}
-                    </div>
-                  )}
-                </div>
-                <div className='w-1/3'>
+                <div className='w-3/5'>
                   <input
-                    id='zipPengiriman'
-                    name='zipPengiriman'
-                    ref={zipRef}
-                    placeholder='Kode Pos'
-                    type='number'
-                    value={formPengiriman.zipPengiriman}
+                    value={formPengiriman.PICName}
+                    id='PICName'
+                    name='PICName'
+                    placeholder='Masukkan nama pic pengiriman disini'
+                    type='text'
                     className='form-input'
+                    aria-invalid={errorsPengiriman.PICName}
+                    ref={PICNameRef}
                     onChange={handleInputChange}
                   />
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errorsPengiriman.zipPengiriman}
+                      {errorsPengiriman.PICName}
                     </div>
                   )}
                 </div>
               </div>
-            </div>
-          </div>
 
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label  text-nowrap'>
-                Nama PIC Penerimaan Invoice
-              </label>
-            </div>
-            <div className='w-3/5'>
-              <input
-                value={formPengiriman.invoicePic}
-                id='invoicePic'
-                name='invoicePic'
-                placeholder='Masukkan nama pic invoice disini'
-                type='text'
-                className='form-input'
-                aria-invalid={errorsPengiriman.invoicePic}
-                ref={invoicePicRef}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsPengiriman.invoicePic}
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label   text-nowrap'>
+                    Alamat Pengiriman Barang
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      pastikan alamat yang anda isi sesuai dengan alamat kirim
+                      barang
+                    </span>
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label text-nowrap'>
-                Alamat Pengiriman Invoice
-              </label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  Pastikan alamat yang anda isi sesuai dengan alamat kirim
-                  invoice
-                </span>
-              )}
-            </div>
-            <div className='w-3/5 flex gap-3 flex-col'>
-              <div>
-                <Checkbox
-                  colorScheme='red'
-                  isChecked={sameAddress}
-                  onChange={handleChangeSameAddress}
-                >
-                  Alamat invoice sama dengan alamat pengiriman
-                </Checkbox>
-              </div>
-              {!sameAddress && (
-                <>
+                <div className='w-3/5 flex gap-3 flex-col'>
                   <div>
                     <input
-                      id='streetInvoice'
-                      name='streetInvoice'
-                      ref={streetInvoiceRef}
-                      placeholder='Masukkan alamat lengkap pengiriman invoice'
+                      id='streetPengiriman'
+                      name='streetPengiriman'
+                      ref={streetPengirimanRef}
+                      placeholder='Masukkan alamat lengkap pengiriman barang'
                       type='text'
-                      value={formPengiriman.streetInvoice}
+                      value={formPengiriman.streetPengiriman}
                       className='form-input'
                       onChange={handleInputChange}
                     />
                     {chekValid && (
                       <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errorsPengiriman.streetInvoice}
+                        {errorsPengiriman.streetPengiriman}
                       </div>
                     )}
                   </div>
                   <div className='sub-alamat flex flex-row w-full gap-3'>
-                    <div className='w-3/5' ref={stateInvoiceRef}>
+                    <div className='w-2/5' ref={statePengirimanRef}>
                       <Controller
-                        name='stateInvoice'
+                        name='statePengiriman'
                         control={control}
                         render={(props) => (
                           <HookFormSelect
@@ -572,13 +460,13 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       />
                       {chekValid && (
                         <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errorsPengiriman.stateInvoice}
+                          {errorsPengiriman.statePengiriman}
                         </div>
                       )}
                     </div>
-                    <div className='w-2/5' ref={cityInvoiceRef}>
+                    <div className='w-1/3' ref={cityPengirimanRef}>
                       <Controller
-                        name='cityInvoice'
+                        name='cityPengiriman'
                         control={control}
                         render={(props) => (
                           <HookFormSelect
@@ -591,327 +479,1009 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       />
                       {chekValid && (
                         <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errorsPengiriman.cityInvoice}
+                          {errorsPengiriman.cityPengiriman}
+                        </div>
+                      )}
+                    </div>
+                    <div className='w-1/3'>
+                      <input
+                        id='zipPengiriman'
+                        name='zipPengiriman'
+                        ref={zipRef}
+                        placeholder='Kode Pos'
+                        type='number'
+                        value={formPengiriman.zipPengiriman}
+                        className='form-input'
+                        onChange={handleInputChange}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errorsPengiriman.zipPengiriman}
                         </div>
                       )}
                     </div>
                   </div>
-                </>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label   text-wrap'>
-                Jadwal Penukaran Invoice{' '}
-                <span className=' opacity-60'>(Opsional)</span>
-              </label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  Pilih jika bisnis anda memiliki jadwal penukaran invoice
-                </span>
-              )}
-            </div>
-            <div className='w-3/5 flex gap-3 flex-col'>
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  isChecked={everyWeekday}
-                  onChange={handleEveryWeekday}
-                >
-                  Setiap Minggu dihari
-                </Checkbox>
-                <input
-                  id='everyWeekdayInput'
-                  name='everyWeekdayInput'
-                  ref={everyWeekdayInputRef}
-                  placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
-                  type='text'
-                  value={formPengiriman.everyWeekdayInput}
-                  className='form-input'
-                  onChange={handleInputChange}
-                />
+                </div>
+              </div>
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    Nama PIC Penerimaan Invoice
+                  </label>
+                </div>
+                <div className='w-3/5'>
+                  <input
+                    value={formPengiriman.invoicePic}
+                    id='invoicePic'
+                    name='invoicePic'
+                    placeholder='Masukkan nama pic invoice disini'
+                    type='text'
+                    className='form-input'
+                    aria-invalid={errorsPengiriman.invoicePic}
+                    ref={invoicePicRef}
+                    onChange={handleInputChange}
+                  />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.invoicePic}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label text-nowrap'>
+                    Alamat Pengiriman Invoice
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      Pastikan alamat yang anda isi sesuai dengan alamat kirim
+                      invoice
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5 flex gap-3 flex-col'>
+                  <div>
+                    <Checkbox
+                      colorScheme='red'
+                      isChecked={sameAddress}
+                      onChange={handleChangeSameAddress}
+                    >
+                      Alamat invoice sama dengan alamat pengiriman
+                    </Checkbox>
+                  </div>
+                  {!sameAddress && (
+                    <>
+                      <div>
+                        <input
+                          id='streetInvoice'
+                          name='streetInvoice'
+                          ref={streetInvoiceRef}
+                          placeholder='Masukkan alamat lengkap pengiriman invoice'
+                          type='text'
+                          value={formPengiriman.streetInvoice}
+                          className='form-input'
+                          onChange={handleInputChange}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errorsPengiriman.streetInvoice}
+                          </div>
+                        )}
+                      </div>
+                      <div className='sub-alamat flex flex-row w-full gap-3'>
+                        <div className='w-3/5' ref={stateInvoiceRef}>
+                          <Controller
+                            name='stateInvoice'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={states}
+                                placeholder='Provinsi'
+                              />
+                            )}
+                          />
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errorsPengiriman.stateInvoice}
+                            </div>
+                          )}
+                        </div>
+                        <div className='w-2/5' ref={cityInvoiceRef}>
+                          <Controller
+                            name='cityInvoice'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={cities}
+                                disabled={!watchState}
+                                placeholder='Kota'
+                              />
+                            )}
+                          />
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errorsPengiriman.cityInvoice}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </>
+                  )}
+                </div>
+              </div>
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label   text-wrap'>
+                    Jadwal Penukaran Invoice{' '}
+                    <span className=' opacity-60'>(Opsional)</span>
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      Pilih jika bisnis anda memiliki jadwal penukaran invoice
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5 flex gap-3 flex-col'>
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      isChecked={everyWeekday}
+                      onChange={handleEveryWeekday}
+                    >
+                      Setiap Minggu dihari
+                    </Checkbox>
+                    <input
+                      id='everyWeekdayInput'
+                      name='everyWeekdayInput'
+                      ref={everyWeekdayInputRef}
+                      placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+                      type='text'
+                      value={formPengiriman.everyWeekdayInput}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      isChecked={everyWeek}
+                      onChange={handleEveryWeek}
+                    >
+                      Setiap Bulan di minggu ke
+                    </Checkbox>
+                    <input
+                      id='everyWeekInput'
+                      name='everyWeekInput'
+                      ref={everyWeekInputRef}
+                      placeholder='Format: Minggu 1 & Minggu 2'
+                      type='text'
+                      value={formPengiriman.everyWeekInput}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      isChecked={tukarInvoice}
+                      onChange={handleTukarInvoice}
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='tukarInvoiceInput'
+                      name='tukarInvoiceInput'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      value={formPengiriman.tukarInvoiceInput}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label text-nowrap'>
+                    Jadwal Pembayaran{' '}
+                    <span className=' opacity-60'>(Opsional)</span>
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      Pilih jika bisnis anda memiliki jadwal pembayaran
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5 flex gap-3 flex-col'>
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      isChecked={everyWeekdayPembayaran}
+                      onChange={handleEveryWeekdayPembayaran}
+                    >
+                      Setiap Minggu dihari
+                    </Checkbox>
+                    <input
+                      id='everyWeekdayInputPembayaran'
+                      name='everyWeekdayInputPembayaran'
+                      placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+                      type='text'
+                      value={formPengiriman.everyWeekdayInputPembayaran}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      isChecked={everyWeekPembayaran}
+                      onChange={handleEveryWeekPembayaran}
+                    >
+                      Setiap Bulan di minggu ke
+                    </Checkbox>
+                    <input
+                      id='everyWeekInputPembayaran'
+                      name='everyWeekInputPembayaran'
+                      placeholder='Format: Minggu 1 & Minggu 2'
+                      type='text'
+                      value={formPengiriman.everyWeekInputPembayaran}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      isChecked={tukarInvoicePembayaran}
+                      onChange={handleTukarInvoicePembayaran}
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='tukarInvoiceInputPembayaran'
+                      name='tukarInvoiceInputPembayaran'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      value={formPengiriman.tukarInvoiceInputPembayaran}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                </div>
               </div>
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  isChecked={everyWeek}
-                  onChange={handleEveryWeek}
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label   text-wrap'>
+                    Dokumen saat Pengiriman Barang
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      Pilih dokumen lampiran saat pengiriman barang
+                    </span>
+                  )}
+                </div>
+                <div
+                  className='w-3/5 flex gap-3 flex-col'
+                  ref={dokumenPengirimanRef}
                 >
-                  Setiap Bulan di minggu ke
-                </Checkbox>
-                <input
-                  id='everyWeekInput'
-                  name='everyWeekInput'
-                  ref={everyWeekInputRef}
-                  placeholder='Format: Minggu 1 & Minggu 2'
-                  type='text'
-                  value={formPengiriman.everyWeekInput}
-                  className='form-input'
-                  onChange={handleInputChange}
-                />
+                  <Checkbox
+                    colorScheme='red'
+                    key='0'
+                    isChecked={isChecked(0)}
+                    onChange={() => handleCheckboxChange(0)}
+                  >
+                    Surat Tanda Terima Barang (STTB)
+                  </Checkbox>
+                  <Checkbox
+                    colorScheme='red'
+                    key='1'
+                    isChecked={isChecked(1)}
+                    onChange={() => handleCheckboxChange(1)}
+                  >
+                    Good Receipt (GR)
+                  </Checkbox>
+                  <Checkbox
+                    colorScheme='red'
+                    key='2'
+                    isChecked={isChecked(2)}
+                    onChange={() => handleCheckboxChange(2)}
+                  >
+                    Surat Terima Barang (STB)
+                  </Checkbox>
+                  <Checkbox
+                    colorScheme='red'
+                    key='3'
+                    isChecked={isChecked(3)}
+                    onChange={() => handleCheckboxChange(3)}
+                  >
+                    Lembar Penerimaan Barang (LPB)
+                  </Checkbox>
+
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      key='4'
+                      isChecked={isChecked(4)}
+                      onChange={() => handleCheckboxChange(4)}
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='dokumenPengirimanInput'
+                      name='dokumenPengirimanInput'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      ref={dokumenPengirimanInputRef}
+                      value={formPengiriman.dokumenPengirimanInput}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.dokumenPengiriman}
+                    </div>
+                  )}
+                </div>
               </div>
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  isChecked={tukarInvoice}
-                  onChange={handleTukarInvoice}
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-wrap'>
+                    Dokumen yang dilampirkan saat Pengiriman Invoice
+                  </label>
+                  <span className='text-xs opacity-60'>
+                    Dokumen akan dikirimkan sesuai dengan yang anda pilih
+                  </span>
+                </div>
+                <div
+                  className='w-3/5 flex gap-3 flex-col'
+                  ref={dokumenPengirimanInvoiceRef}
                 >
-                  Lainnya
-                </Checkbox>
-                <textarea
-                  id='tukarInvoiceInput'
-                  name='tukarInvoiceInput'
-                  placeholder='isi manual dokumen yang anda mau'
-                  type='textarea'
-                  value={formPengiriman.tukarInvoiceInput}
-                  className='form-input'
-                  rows={4}
-                  cols={40}
-                  onChange={handleInputChange}
-                />
+                  <Checkbox
+                    colorScheme='red'
+                    key='0'
+                    isChecked={isCheckedInvoice(0)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(0)
+                    }
+                  >
+                    Invoice Pembelian
+                  </Checkbox>
+                  <Checkbox
+                    colorScheme='red'
+                    key='1'
+                    isChecked={isCheckedInvoice(1)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(1)
+                    }
+                  >
+                    Surat Jalan
+                  </Checkbox>
+                  <Checkbox
+                    colorScheme='red'
+                    key='2'
+                    isChecked={isCheckedInvoice(2)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(2)
+                    }
+                  >
+                    Berita Acara Serah Terima (BAST)
+                  </Checkbox>
+                  <Checkbox
+                    colorScheme='red'
+                    key='3'
+                    isChecked={isCheckedInvoice(3)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(3)
+                    }
+                  >
+                    Faktur Pajak
+                  </Checkbox>
+                  <Checkbox
+                    colorScheme='red'
+                    key='4'
+                    isChecked={isCheckedInvoice(4)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(4)
+                    }
+                  >
+                    Good Receipt (GR)
+                  </Checkbox>
+
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      key='5'
+                      isChecked={isCheckedInvoice(5)}
+                      onChange={() =>
+                        handleCheckboxChangeDokumenPengirimanInvoice(5)
+                      }
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='dokumenPengirimanInvoiceInput'
+                      name='dokumenPengirimanInvoiceInput'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      ref={dokumenPengirimanInvoiceInputRef}
+                      value={formPengiriman.dokumenPengirimanInvoiceInput}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.dokumenInvoicePengiriman}
+                    </div>
+                  )}
+                </div>
               </div>
             </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label text-nowrap'>
-                Jadwal Pembayaran{' '}
-                <span className=' opacity-60'>(Opsional)</span>
-              </label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  Pilih jika bisnis anda memiliki jadwal pembayaran
-                </span>
-              )}
-            </div>
-            <div className='w-3/5 flex gap-3 flex-col'>
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  isChecked={everyWeekdayPembayaran}
-                  onChange={handleEveryWeekdayPembayaran}
-                >
-                  Setiap Minggu dihari
-                </Checkbox>
+          </form>
+        </div>
+      )}
+      {isMobile && (
+        <div className='text-sm'>
+          <h1
+            className={`font-bold py-4 mt-8 ${
+              isKonfirmasi ? 'text-xl' : 'text-xl'
+            }`}
+          >
+            Pengiriman
+          </h1>
+          <form className='flex flex-col w-full '>
+            <div className='w-full grid grid-row-2 gap-2'>
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>
+                  Nama PIC Penerimaan Barang
+                </label>
                 <input
-                  id='everyWeekdayInputPembayaran'
-                  name='everyWeekdayInputPembayaran'
-                  placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+                  value={formPengiriman.PICName}
+                  id='PICName'
+                  name='PICName'
+                  placeholder='Masukkan nama pic pengiriman disini'
                   type='text'
-                  value={formPengiriman.everyWeekdayInputPembayaran}
                   className='form-input'
+                  aria-invalid={errorsPengiriman.PICName}
+                  ref={PICNameRef}
                   onChange={handleInputChange}
                 />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsPengiriman.PICName}
+                  </div>
+                )}
               </div>
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  isChecked={everyWeekPembayaran}
-                  onChange={handleEveryWeekPembayaran}
-                >
-                  Setiap Bulan di minggu ke
-                </Checkbox>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label   text-nowrap'>
+                  Alamat Pengiriman Barang
+                </label>
+                <div className='w-full'>
+                  <input
+                    id='streetPengiriman'
+                    name='streetPengiriman'
+                    ref={streetPengirimanRef}
+                    placeholder='Masukkan alamat lengkap pengiriman barang'
+                    type='text'
+                    value={formPengiriman.streetPengiriman}
+                    className='form-input'
+                    onChange={handleInputChange}
+                  />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.streetPengiriman}
+                    </div>
+                  )}
+                </div>
+                <div className='sub-alamat flex flex-row w-full gap-2'>
+                  <div className='w-2/5' ref={statePengirimanRef}>
+                    <Controller
+                      name='statePengiriman'
+                      control={control}
+                      render={(props) => (
+                        <HookFormSelect
+                          {...props}
+                          options={states}
+                          placeholder='Provinsi'
+                        />
+                      )}
+                    />
+                  </div>
+                  <div className='w-1/3' ref={cityPengirimanRef}>
+                    <Controller
+                      name='cityPengiriman'
+                      control={control}
+                      render={(props) => (
+                        <HookFormSelect
+                          {...props}
+                          options={cities}
+                          disabled={!watchState}
+                          placeholder='Kota'
+                        />
+                      )}
+                    />
+                  </div>
+                  <div className='w-1/3'>
+                    <input
+                      id='zipPengiriman'
+                      name='zipPengiriman'
+                      ref={zipRef}
+                      placeholder='Kode Pos'
+                      type='number'
+                      value={formPengiriman.zipPengiriman}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.statePengiriman}
+                    </div>
+                  )}
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.cityPengiriman}
+                    </div>
+                  )}
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.zipPengiriman}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>
+                  Nama PIC Penerimaan Invoice
+                </label>
                 <input
-                  id='everyWeekInputPembayaran'
-                  name='everyWeekInputPembayaran'
-                  placeholder='Format: Minggu 1 & Minggu 2'
+                  value={formPengiriman.invoicePic}
+                  id='invoicePic'
+                  name='invoicePic'
+                  placeholder='Masukkan nama pic invoice disini'
                   type='text'
-                  value={formPengiriman.everyWeekInputPembayaran}
                   className='form-input'
+                  aria-invalid={errorsPengiriman.invoicePic}
+                  ref={invoicePicRef}
                   onChange={handleInputChange}
                 />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsPengiriman.invoicePic}
+                  </div>
+                )}
               </div>
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  isChecked={tukarInvoicePembayaran}
-                  onChange={handleTukarInvoicePembayaran}
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label text-nowrap'>
+                  Alamat Pengiriman Invoice
+                </label>
+                <div>
+                  <Checkbox
+                    colorScheme='red'
+                    isChecked={sameAddress}
+                    onChange={handleChangeSameAddress}
+                    size='sm'
+                  >
+                    Alamat invoice sama dengan alamat pengiriman
+                  </Checkbox>
+                </div>
+                {!sameAddress && (
+                  <>
+                    <div className='w-full'>
+                      <input
+                        id='streetInvoice'
+                        name='streetInvoice'
+                        ref={streetInvoiceRef}
+                        placeholder='Masukkan alamat lengkap pengiriman invoice'
+                        type='text'
+                        value={formPengiriman.streetInvoice}
+                        className='form-input'
+                        onChange={handleInputChange}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errorsPengiriman.streetInvoice}
+                        </div>
+                      )}
+                    </div>
+                    <div className='sub-alamat flex flex-row w-full gap-3'>
+                      <div className='w-3/5' ref={stateInvoiceRef}>
+                        <Controller
+                          name='stateInvoice'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={states}
+                              placeholder='Provinsi'
+                            />
+                          )}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errorsPengiriman.stateInvoice}
+                          </div>
+                        )}
+                      </div>
+                      <div className='w-2/5' ref={cityInvoiceRef}>
+                        <Controller
+                          name='cityInvoice'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={cities}
+                              disabled={!watchState}
+                              placeholder='Kota'
+                            />
+                          )}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errorsPengiriman.cityInvoice}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label   text-wrap'>
+                  Jadwal Penukaran Invoice
+                  <span className=' opacity-60'>(Opsional)</span>
+                </label>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>
+                    Pilih jika bisnis anda memiliki jadwal penukaran invoice
+                  </span>
+                )}
+                <div className='w-full flex gap-2 flex-col'>
+                  <div className='flex gap-2 flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      isChecked={everyWeekday}
+                      onChange={handleEveryWeekday}
+                    >
+                      Setiap Minggu dihari
+                    </Checkbox>
+                    <input
+                      id='everyWeekdayInput'
+                      name='everyWeekdayInput'
+                      ref={everyWeekdayInputRef}
+                      placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+                      type='text'
+                      value={formPengiriman.everyWeekdayInput}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-2 w-full flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      isChecked={everyWeek}
+                      onChange={handleEveryWeek}
+                    >
+                      Setiap Bulan di minggu ke
+                    </Checkbox>
+                    <input
+                      id='everyWeekInput'
+                      name='everyWeekInput'
+                      ref={everyWeekInputRef}
+                      placeholder='Format: Minggu 1 & Minggu 2'
+                      type='text'
+                      value={formPengiriman.everyWeekInput}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-2 flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      isChecked={tukarInvoice}
+                      onChange={handleTukarInvoice}
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='tukarInvoiceInput'
+                      name='tukarInvoiceInput'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      value={formPengiriman.tukarInvoiceInput}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                </div>
+                <div className='w-2/5'></div>
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label text-nowrap'>
+                  Jadwal Pembayaran
+                  <span className=' opacity-60'>(Opsional)</span>
+                </label>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>
+                    Pilih jika bisnis anda memiliki jadwal pembayaran
+                  </span>
+                )}
+                <div className='w-full flex gap-2 flex-col'>
+                  <div className='flex gap-2 flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      isChecked={everyWeekdayPembayaran}
+                      onChange={handleEveryWeekdayPembayaran}
+                    >
+                      Setiap Minggu dihari
+                    </Checkbox>
+                    <input
+                      id='everyWeekdayInputPembayaran'
+                      name='everyWeekdayInputPembayaran'
+                      placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+                      type='text'
+                      value={formPengiriman.everyWeekdayInputPembayaran}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-2 flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      isChecked={everyWeekPembayaran}
+                      onChange={handleEveryWeekPembayaran}
+                    >
+                      Setiap Bulan di minggu ke
+                    </Checkbox>
+                    <input
+                      id='everyWeekInputPembayaran'
+                      name='everyWeekInputPembayaran'
+                      placeholder='Format: Minggu 1 & Minggu 2'
+                      type='text'
+                      value={formPengiriman.everyWeekInputPembayaran}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-2 flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      isChecked={tukarInvoicePembayaran}
+                      onChange={handleTukarInvoicePembayaran}
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='tukarInvoiceInputPembayaran'
+                      name='tukarInvoiceInputPembayaran'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      value={formPengiriman.tukarInvoiceInputPembayaran}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label   text-wrap'>
+                  Dokumen saat Pengiriman Barang
+                </label>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>
+                    Pilih dokumen lampiran saat pengiriman barang
+                  </span>
+                )}
+                <div
+                  className='w-full flex gap-2 flex-col'
+                  ref={dokumenPengirimanRef}
                 >
-                  Lainnya
-                </Checkbox>
-                <textarea
-                  id='tukarInvoiceInputPembayaran'
-                  name='tukarInvoiceInputPembayaran'
-                  placeholder='isi manual dokumen yang anda mau'
-                  type='textarea'
-                  value={formPengiriman.tukarInvoiceInputPembayaran}
-                  className='form-input'
-                  rows={4}
-                  cols={40}
-                  onChange={handleInputChange}
-                />
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='0'
+                    isChecked={isChecked(0)}
+                    onChange={() => handleCheckboxChange(0)}
+                  >
+                    Surat Tanda Terima Barang (STTB)
+                  </Checkbox>
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='1'
+                    isChecked={isChecked(1)}
+                    onChange={() => handleCheckboxChange(1)}
+                  >
+                    Good Receipt (GR)
+                  </Checkbox>
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='2'
+                    isChecked={isChecked(2)}
+                    onChange={() => handleCheckboxChange(2)}
+                  >
+                    Surat Terima Barang (STB)
+                  </Checkbox>
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='3'
+                    isChecked={isChecked(3)}
+                    onChange={() => handleCheckboxChange(3)}
+                  >
+                    Lembar Penerimaan Barang (LPB)
+                  </Checkbox>
+
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      key='4'
+                      isChecked={isChecked(4)}
+                      onChange={() => handleCheckboxChange(4)}
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='dokumenPengirimanInput'
+                      name='dokumenPengirimanInput'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      ref={dokumenPengirimanInputRef}
+                      value={formPengiriman.dokumenPengirimanInput}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.dokumenPengiriman}
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label   text-wrap'>
-                Dokumen saat Pengiriman Barang
-              </label>
-              {!isKonfirmasi && (
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-wrap'>
+                  Dokumen yang dilampirkan saat Pengiriman Invoice
+                </label>
                 <span className='text-xs opacity-60'>
-                  Pilih dokumen lampiran saat pengiriman barang
+                  Pilih dokumen lampiran saat pengiriman invoice
                 </span>
-              )}
-            </div>
-            <div
-              className='w-3/5 flex gap-3 flex-col'
-              ref={dokumenPengirimanRef}
-            >
-              <Checkbox
-                colorScheme='red'
-                key='0'
-                isChecked={isChecked(0)}
-                onChange={() => handleCheckboxChange(0)}
-              >
-                Surat Tanda Terima Barang (STTB)
-              </Checkbox>
-              <Checkbox
-                colorScheme='red'
-                key='1'
-                isChecked={isChecked(1)}
-                onChange={() => handleCheckboxChange(1)}
-              >
-                Good Receipt (GR)
-              </Checkbox>
-              <Checkbox
-                colorScheme='red'
-                key='2'
-                isChecked={isChecked(2)}
-                onChange={() => handleCheckboxChange(2)}
-              >
-                Surat Terima Barang (STB)
-              </Checkbox>
-              <Checkbox
-                colorScheme='red'
-                key='3'
-                isChecked={isChecked(3)}
-                onChange={() => handleCheckboxChange(3)}
-              >
-                Lembar Penerimaan Barang (LPB)
-              </Checkbox>
-
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  key='4'
-                  isChecked={isChecked(4)}
-                  onChange={() => handleCheckboxChange(4)}
+                <div
+                  className='w-full flex gap-2 flex-col'
+                  ref={dokumenPengirimanInvoiceRef}
                 >
-                  Lainnya
-                </Checkbox>
-                <textarea
-                  id='dokumenPengirimanInput'
-                  name='dokumenPengirimanInput'
-                  placeholder='isi manual dokumen yang anda mau'
-                  type='textarea'
-                  ref={dokumenPengirimanInputRef}
-                  value={formPengiriman.dokumenPengirimanInput}
-                  className='form-input'
-                  rows={4}
-                  cols={40}
-                  onChange={handleInputChange}
-                />
-              </div>
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsPengiriman.dokumenPengiriman}
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='0'
+                    isChecked={isCheckedInvoice(0)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(0)
+                    }
+                  >
+                    Invoice Pembelian
+                  </Checkbox>
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='1'
+                    isChecked={isCheckedInvoice(1)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(1)
+                    }
+                  >
+                    Surat Jalan
+                  </Checkbox>
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='2'
+                    isChecked={isCheckedInvoice(2)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(2)
+                    }
+                  >
+                    Berita Acara Serah Terima (BAST)
+                  </Checkbox>
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='3'
+                    isChecked={isCheckedInvoice(3)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(3)
+                    }
+                  >
+                    Faktur Pajak
+                  </Checkbox>
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='4'
+                    isChecked={isCheckedInvoice(4)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(4)
+                    }
+                  >
+                    Good Receipt (GR)
+                  </Checkbox>
+
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      key='5'
+                      isChecked={isCheckedInvoice(5)}
+                      onChange={() =>
+                        handleCheckboxChangeDokumenPengirimanInvoice(5)
+                      }
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='dokumenPengirimanInvoiceInput'
+                      name='dokumenPengirimanInvoiceInput'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      ref={dokumenPengirimanInvoiceInputRef}
+                      value={formPengiriman.dokumenPengirimanInvoiceInput}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.dokumenInvoicePengiriman}
+                    </div>
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label  text-wrap'>
-                Dokumen yang dilampirkan saat Pengiriman Invoice
-              </label>
-              <span className='text-xs opacity-60'>
-                Dokumen akan dikirimkan sesuai dengan yang anda pilih
-              </span>
-            </div>
-            <div
-              className='w-3/5 flex gap-3 flex-col'
-              ref={dokumenPengirimanInvoiceRef}
-            >
-              <Checkbox
-                colorScheme='red'
-                key='0'
-                isChecked={isCheckedInvoice(0)}
-                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(0)}
-              >
-                Invoice Pembelian
-              </Checkbox>
-              <Checkbox
-                colorScheme='red'
-                key='1'
-                isChecked={isCheckedInvoice(1)}
-                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(1)}
-              >
-                Surat Jalan
-              </Checkbox>
-              <Checkbox
-                colorScheme='red'
-                key='2'
-                isChecked={isCheckedInvoice(2)}
-                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(2)}
-              >
-                Berita Acara Serah Terima (BAST)
-              </Checkbox>
-              <Checkbox
-                colorScheme='red'
-                key='3'
-                isChecked={isCheckedInvoice(3)}
-                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(3)}
-              >
-                Faktur Pajak
-              </Checkbox>
-              <Checkbox
-                colorScheme='red'
-                key='4'
-                isChecked={isCheckedInvoice(4)}
-                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(4)}
-              >
-                Good Receipt (GR)
-              </Checkbox>
-
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  key='5'
-                  isChecked={isCheckedInvoice(5)}
-                  onChange={() =>
-                    handleCheckboxChangeDokumenPengirimanInvoice(5)
-                  }
-                >
-                  Lainnya
-                </Checkbox>
-                <textarea
-                  id='dokumenPengirimanInvoiceInput'
-                  name='dokumenPengirimanInvoiceInput'
-                  placeholder='isi manual dokumen yang anda mau'
-                  type='textarea'
-                  ref={dokumenPengirimanInvoiceInputRef}
-                  value={formPengiriman.dokumenPengirimanInvoiceInput}
-                  className='form-input'
-                  rows={4}
-                  cols={40}
-                  onChange={handleInputChange}
-                />
+                <div className='w-2/5'></div>
               </div>
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsPengiriman.dokumenInvoicePengiriman}
-                </div>
-              )}
             </div>
-          </div>
+          </form>
         </div>
-      </form>
+      )}
     </>
   );
 };