<iman> update pengajuan tempo

1 files changed, 233 insertions, 193 deletions

diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
index 497c86a9..068cf73c 100644
--- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx
+++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
@@ -889,109 +889,129 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                         </div>
                       )}
                     </div>
-                    <div className='sub-alamat flex flex-row w-full gap-3'>
+                    <div
+                      className={` sub-alamat flex ${
+                        isKonfirmasi ? 'flex-col' : 'flex-row'
+                      } w-full gap-3`}
+                    >
                       <div
-                        className='w-2/5'
-                        ref={statePengirimanRef}
-                        aria-label='statePengiriman'
+                        className={`flex  ${
+                          isKonfirmasi
+                            ? ' flex-row gap-3 w-full'
+                            : 'flex-row gap-3 w-2/5'
+                        }`}
                       >
-                        <Controller
-                          name='statePengiriman'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              disabled={sameAddressStreet}
-                              options={states}
-                              placeholder='Provinsi'
-                            />
+                        <div
+                          className='w-full'
+                          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>
                           )}
-                        />
-                        {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'
-                            />
+                        </div>
+                        <div className='w-full' 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>
                           )}
-                        />
-                        {chekValid && (
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errorsPengiriman.cityPengiriman}
-                          </div>
-                        )}
+                        </div>
                       </div>
-                      <div className='w-1/3' ref={districtPengirimanRef}>
-                        <Controller
-                          name='districtPengiriman'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={districts}
-                              disabled={
-                                !watchState || !watchCity || sameAddressStreet
-                              }
-                              placeholder='Kelurahan'
-                            />
+                      <div
+                        className={`flex-row flex gap-2 justify-between  ${
+                          isKonfirmasi ? 'w-full' : 'w-3/5'
+                        }`}
+                      >
+                        <div className='w-full' ref={districtPengirimanRef}>
+                          <Controller
+                            name='districtPengiriman'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={districts}
+                                disabled={
+                                  !watchState || !watchCity || sameAddressStreet
+                                }
+                                placeholder='Kelurahan'
+                              />
+                            )}
+                          />
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errors.subDistrictPengiriman}
+                            </div>
                           )}
-                        />
-                        {chekValid && (
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.subDistrictPengiriman}
-                          </div>
-                        )}
-                      </div>
-                      <div className='w-1/3' ref={subDistrictPengirimanRef}>
-                        <Controller
-                          name='subDistrictPengiriman'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={subDistricts}
-                              disabled={!watchDistrict || sameAddressStreet}
-                              placeholder='Kelurahan'
-                            />
+                        </div>
+                        <div className='w-full' ref={subDistrictPengirimanRef}>
+                          <Controller
+                            name='subDistrictPengiriman'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={subDistricts}
+                                disabled={!watchDistrict || sameAddressStreet}
+                                placeholder='Kelurahan'
+                              />
+                            )}
+                          />
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errors.subDistrictPengiriman}
+                            </div>
                           )}
-                        />
-                        {chekValid && (
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.subDistrictPengiriman}
-                          </div>
-                        )}
-                      </div>
-                      <div className='w-1/3' ref={zipRef}>
-                        <Controller
-                          name='zipPengiriman'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={zips}
-                              disabled={!watchsubDistrict || sameAddressStreet}
-                              placeholder='Zip'
-                            />
+                        </div>
+                        <div className='w-full' ref={zipRef}>
+                          <Controller
+                            name='zipPengiriman'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={zips}
+                                disabled={
+                                  !watchsubDistrict || sameAddressStreet
+                                }
+                                placeholder='Zip'
+                              />
+                            )}
+                          />
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errors.zipPengiriman}
+                            </div>
                           )}
-                        />
-                        {chekValid && (
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.zipPengiriman}
-                          </div>
-                        )}
+                        </div>
                       </div>
                     </div>
                   </>
@@ -1083,113 +1103,133 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                         </div>
                       )}
                     </div>
-                    <div className='sub-alamat flex flex-row w-full gap-3'>
+                    <div
+                      className={` sub-alamat flex ${
+                        isKonfirmasi ? 'flex-col' : 'flex-row'
+                      } w-full gap-3`}
+                    >
                       <div
-                        className='w-3/5'
-                        ref={stateInvoiceRef}
-                        aria-label='stateInvoice'
+                        className={`flex  ${
+                          isKonfirmasi
+                            ? ' flex-row gap-3 w-full'
+                            : 'flex-row gap-3 w-2/5'
+                        }`}
                       >
-                        <Controller
-                          name='stateInvoice'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={states}
-                              disabled={sameAddress}
-                              placeholder='Provinsi'
-                            />
+                        <div
+                          className='w-full'
+                          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.stateInvoice}
+                            </div>
                           )}
-                        />
-                        {chekValid && (
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errorsPengiriman.stateInvoice}
-                          </div>
-                        )}
+                        </div>
+                        <div
+                          className='w-full'
+                          ref={cityInvoiceRef}
+                          aria-label='cityInvoice'
+                        >
+                          <Controller
+                            name='cityInvoice'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={citiesInvoice}
+                                disabled={!watchStateInvoice || sameAddress}
+                                placeholder='Kota'
+                              />
+                            )}
+                          />
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errorsPengiriman.cityInvoice}
+                            </div>
+                          )}
+                        </div>
                       </div>
                       <div
-                        className='w-2/5'
-                        ref={cityInvoiceRef}
-                        aria-label='cityInvoice'
+                        className={`flex-row flex gap-2 justify-between  ${
+                          isKonfirmasi ? 'w-full' : 'w-3/5'
+                        }`}
                       >
-                        <Controller
-                          name='cityInvoice'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={citiesInvoice}
-                              disabled={!watchStateInvoice || sameAddress}
-                              placeholder='Kota'
-                            />
-                          )}
-                        />
-                        {chekValid && (
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errorsPengiriman.cityInvoice}
-                          </div>
-                        )}
-                      </div>
-                      <div className='w-1/3' ref={districtInvoiceRef}>
-                        <Controller
-                          name='districtInvoice'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={districtsInvoice}
-                              disabled={
-                                !watchStateInvoice ||
-                                !watchCityInvoice ||
-                                sameAddress
-                              }
-                              placeholder='Kecamatan'
-                            />
+                        <div className='w-full' ref={districtInvoiceRef}>
+                          <Controller
+                            name='districtInvoice'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={districtsInvoice}
+                                disabled={
+                                  !watchStateInvoice ||
+                                  !watchCityInvoice ||
+                                  sameAddress
+                                }
+                                placeholder='Kecamatan'
+                              />
+                            )}
+                          />
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errors.districtInvoice}
+                            </div>
                           )}
-                        />
-                        {chekValid && (
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.districtInvoice}
-                          </div>
-                        )}
-                      </div>
-                      <div className='w-1/3' ref={subDistrictInvoiceRef}>
-                        <Controller
-                          name='subDistrictInvoice'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={subDistrictsInvoice}
-                              disabled={!watchDistrictInvoice || sameAddress}
-                              placeholder='Kelurahan'
-                            />
+                        </div>
+                        <div className='w-full' ref={subDistrictInvoiceRef}>
+                          <Controller
+                            name='subDistrictInvoice'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={subDistrictsInvoice}
+                                disabled={!watchDistrictInvoice || sameAddress}
+                                placeholder='Kelurahan'
+                              />
+                            )}
+                          />
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errors.subDistrictsInvoice}
+                            </div>
                           )}
-                        />
-                        {chekValid && (
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.subDistrictsInvoice}
-                          </div>
-                        )}
-                      </div>
-                      <div className='w-1/3' ref={zipInvoiceRef}>
-                        <Controller
-                          name='zipInvoice'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={zipsInvoice}
-                              disabled={!watchsubDistrictInvoice || sameAddress}
-                              placeholder='Zip'
-                            />
+                        </div>
+                        <div className='w-full' ref={zipInvoiceRef}>
+                          <Controller
+                            name='zipInvoice'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={zipsInvoice}
+                                disabled={
+                                  !watchsubDistrictInvoice || sameAddress
+                                }
+                                placeholder='Zip'
+                              />
+                            )}
+                          />
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errors.zipInvoice}
+                            </div>
                           )}
-                        />
-                        {chekValid && (
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.zipInvoice}
-                          </div>
-                        )}
+                        </div>
                       </div>
                     </div>
                   </>