Merge branch 'new-release' into feature/integrasi_biteship

# Conflicts:
#	src/lib/address/components/CreateAddress.jsx
#	src/lib/address/components/EditAddress.jsx

1 files changed, 2078 insertions, 0 deletions

diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
new file mode 100644
index 00000000..755cf45d
--- /dev/null
+++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
@@ -0,0 +1,2078 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { Controller, set, useForm } from 'react-hook-form';
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import odooApi from '~/libs/odooApi';
+import stateApi from '@/lib/address/api/stateApi.js';
+import cityApi from '@/lib/address/api/cityApi';
+import districtApi from '@/lib/address/api/districtApi';
+import subDistrictApi from '@/lib/address/api/subDistrictApi';
+import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
+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();
+  const { isDesktop, isMobile } = useDevice();
+  const {
+    formPengiriman,
+    errorsPengiriman,
+    validatePengiriman,
+    updateFormPengiriman,
+  } = usePengajuanTempoStorePengiriman();
+  const { form } = usePengajuanTempoStore();
+  const [states, setState] = useState([]);
+  const [cities, setCities] = useState([]);
+  const [districts, setDistricts] = useState([]);
+  const [subDistricts, setSubDistricts] = useState([]);
+  const [zips, setZips] = useState([]);
+  const [citiesInvoice, setCitiesInvoice] = useState([]);
+  const [districtsInvoice, setDistrictsInvoice] = useState([]);
+  const [subDistrictsInvoice, setSubDistrictsInvoice] = useState([]);
+  const [zipsInvoice, setZipsInvoice] = useState([]);
+  const [sameAddress, setSameAddress] = useState(false);
+  const [sameAddressStreet, setSameAddressStreet] = useState(false);
+
+  const [selectedIds, setSelectedIds] = useState(
+    formPengiriman.dokumenPengiriman
+      ? formPengiriman.dokumenPengiriman.split(',').map(Number)
+      : []
+  );
+  const [selectedIdsDokumenInvoice, setSelectedIdsselectedIdsDokumenInvoice] =
+    useState(
+      formPengiriman.dokumenPengirimanInvoice
+        ? formPengiriman.dokumenPengirimanInvoice.split(',').map(Number)
+        : []
+    );
+
+  const handleCheckboxChange = (id) => {
+    const updatedSelected = selectedIds.includes(id)
+      ? selectedIds.filter((selectedId) => selectedId !== id)
+      : [...selectedIds, id];
+
+    setSelectedIds(updatedSelected);
+
+    // Jika checkbox 'Lainnya' dipilih, aktifkan input custom
+
+    updateFormPengiriman('dokumenPengiriman', updatedSelected.join(','));
+    validatePengiriman();
+  };
+  const handleCheckboxChangeDokumenPengirimanInvoice = (id) => {
+    const updatedSelected = selectedIdsDokumenInvoice.includes(id)
+      ? selectedIdsDokumenInvoice.filter((selectedId) => selectedId !== id)
+      : [...selectedIdsDokumenInvoice, id];
+
+    setSelectedIdsselectedIdsDokumenInvoice(updatedSelected);
+
+    // Jika checkbox 'Lainnya' dipilih, aktifkan input custom
+
+    updateFormPengiriman('dokumenPengirimanInvoice', updatedSelected.join(','));
+    validatePengiriman();
+  };
+
+  useEffect(() => {
+    if (formPengiriman.dokumenPengiriman) {
+      setSelectedIds(formPengiriman.dokumenPengiriman.split(',').map(Number)); // Parse string menjadi array angka
+    }
+  }, [formPengiriman.dokumenPengiriman]);
+  useEffect(() => {
+    if (formPengiriman.dokumenPengirimanInvoice) {
+      setSelectedIdsselectedIdsDokumenInvoice(
+        formPengiriman.dokumenPengirimanInvoice.split(',').map(Number)
+      ); // Parse string menjadi array angka
+    }
+  }, [formPengiriman.dokumenPengirimanInvoice]);
+
+  // Fungsi untuk memeriksa apakah item sudah dipilih
+  const isChecked = (id) => selectedIds.includes(id);
+  const isCheckedInvoice = (id) => selectedIdsDokumenInvoice.includes(id);
+
+  useEffect(() => {
+    const loadState = async () => {
+      let dataState = await stateApi({ tempo: true });
+      dataState = dataState.map((state) => ({
+        value: state.id,
+        label: state.name,
+      }));
+      setState(dataState);
+    };
+    loadState();
+  }, []);
+
+  const watchState = watch('statePengiriman');
+  useEffect(() => {
+    // updateFormPengiriman('cityPengiriman', '');
+    // setValue('cityPengiriman', '');
+    // setValue('districtPengiriman', '');
+    // setValue('subDistrictPengiriman', '');
+    // setValue('zipPengiriman', '');
+    if (watchState) {
+      updateFormPengiriman('statePengiriman', `${watchState}`);
+      validatePengiriman();
+      const loadCities = async () => {
+        let dataCities = await cityApi({ stateId: watchState });
+        dataCities = dataCities.map((city) => ({
+          value: city.id,
+          label: city.name,
+        }));
+        setCities(dataCities);
+      };
+      loadCities();
+    }
+  }, [watchState]);
+
+  const watchCity = watch('cityPengiriman');
+
+  useEffect(() => {
+    if (watchCity) {
+      updateFormPengiriman('cityPengiriman', `${watchCity}`);
+      validatePengiriman();
+      const loadDistricts = async () => {
+        let dataDistricts = await districtApi({ cityId: watchCity });
+        dataDistricts = dataDistricts.map((district) => ({
+          value: district.id,
+          label: district.name,
+        }));
+        setDistricts(dataDistricts);
+      };
+      loadDistricts();
+    }
+  }, [watchCity, setValue]);
+
+  const watchDistrict = watch('districtPengiriman');
+  useEffect(() => {
+    // setValue('subDistrictPengiriman', '');
+    if (watchDistrict) {
+      updateFormPengiriman('districtPengiriman', `${watchDistrict}`);
+      validatePengiriman();
+      const loadSubDistricts = async () => {
+        let dataSubDistricts = await subDistrictApi({
+          districtId: watchDistrict,
+        });
+        dataSubDistricts = dataSubDistricts.map((district) => ({
+          value: district.id,
+          label: district.name,
+        }));
+        setSubDistricts(dataSubDistricts);
+      };
+      loadSubDistricts();
+    }
+  }, [watchDistrict, setValue]);
+
+  const watchsubDistrict = watch('subDistrictPengiriman');
+
+  useEffect(() => {
+    let kelurahan = '';
+
+    if (watchsubDistrict) {
+      updateFormPengiriman('subDistrictPengiriman', `${watchsubDistrict}`);
+      validatePengiriman();
+      for (const data in subDistricts) {
+        if (subDistricts[data].value == watchsubDistrict) {
+          kelurahan = subDistricts[data].label.toLowerCase();
+        }
+      }
+      const loadZip = async () => {
+        const response = await fetch(
+          `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}`
+        );
+
+        const result = await response.json();
+        const dataZips = result.result.map((zip) => ({
+          value: parseInt(zip.kodepos),
+          label: zip.kodepos,
+        }));
+        setZips(dataZips);
+      };
+      loadZip();
+    }
+  }, [watchsubDistrict, setValue, subDistricts]);
+
+  const watchZip = watch('zipPengiriman');
+  useEffect(() => {
+    if (watchZip) {
+      updateFormPengiriman('zipPengiriman', `${watchZip}`);
+      validatePengiriman();
+    }
+  }, [watchZip, setValue]);
+
+  const watchStateInvoice = watch('stateInvoice');
+  useEffect(() => {
+    // setValue('cityInvoice', '');
+    // setValue('districtInvoice', '');
+    // setValue('subDistrictInvoice', '');
+    // setValue('zipInvoice', '');
+    if (watchStateInvoice) {
+      updateFormPengiriman('stateInvoice', `${watchStateInvoice}`);
+      validatePengiriman();
+      const loadCities = async () => {
+        let dataCities = await cityApi({ stateId: watchStateInvoice });
+        dataCities = dataCities.map((city) => ({
+          value: city.id,
+          label: city.name,
+        }));
+        setCitiesInvoice(dataCities);
+      };
+      loadCities();
+    }
+  }, [watchStateInvoice]);
+
+  const watchCityInvoice = watch('cityInvoice');
+  useEffect(() => {
+    if (watchCityInvoice) {
+      updateFormPengiriman('cityInvoice', `${watchCityInvoice}`);
+      validatePengiriman();
+      const loadDistricts = async () => {
+        let dataDistricts = await districtApi({ cityId: watchCityInvoice });
+        dataDistricts = dataDistricts.map((district) => ({
+          value: district.id,
+          label: district.name,
+        }));
+        setDistrictsInvoice(dataDistricts);
+      };
+      loadDistricts();
+    }
+  }, [watchCityInvoice]);
+
+  const watchDistrictInvoice = watch('districtInvoice');
+  useEffect(() => {
+    // setValue('subDistrictInvoice', '');
+    if (watchDistrictInvoice) {
+      updateFormPengiriman('districtInvoice', `${watchDistrictInvoice}`);
+      validatePengiriman();
+      const loadSubDistricts = async () => {
+        let dataSubDistricts = await subDistrictApi({
+          districtId: watchDistrictInvoice,
+        });
+        dataSubDistricts = dataSubDistricts.map((district) => ({
+          value: district.id,
+          label: district.name,
+        }));
+        setSubDistrictsInvoice(dataSubDistricts);
+      };
+      loadSubDistricts();
+    }
+  }, [watchDistrictInvoice, setValue]);
+
+  const watchsubDistrictInvoice = watch('subDistrictInvoice');
+
+  useEffect(() => {
+    let kelurahan = '';
+
+    if (watchsubDistrictInvoice) {
+      updateFormPengiriman('subDistrictInvoice', `${watchsubDistrictInvoice}`);
+      validatePengiriman();
+      for (const data in subDistrictsInvoice) {
+        if (subDistrictsInvoice[data].value == watchsubDistrictInvoice) {
+          kelurahan = subDistrictsInvoice[data].label.toLowerCase();
+        }
+      }
+      const loadZip = async () => {
+        const response = await fetch(
+          `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}`
+        );
+
+        const result = await response.json();
+        const dataZips = result.result.map((zip) => ({
+          value: parseInt(zip.kodepos),
+          label: zip.kodepos,
+        }));
+        setZipsInvoice(dataZips);
+      };
+      loadZip();
+    }
+  }, [watchsubDistrictInvoice, setValue, subDistrictsInvoice]);
+
+  const watchZipInvoice = watch('zipInvoice');
+  useEffect(() => {
+    if (watchZipInvoice) {
+      updateFormPengiriman('zipInvoice', `${watchZipInvoice}`);
+      validatePengiriman();
+    }
+  }, [watchZipInvoice, setValue]);
+
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    updateFormPengiriman(name, value);
+    validatePengiriman();
+  };
+
+  const isFormValid = useMemo(
+    () => Object.keys(errorsPengiriman).length === 0,
+    [errorsPengiriman]
+  );
+
+  const PICNameRef = useRef(null);
+  const streetPengirimanRef = useRef(null);
+  const statePengirimanRef = useRef(null);
+  const cityPengirimanRef = useRef(null);
+  const districtPengirimanRef = useRef(null);
+  const subDistrictPengirimanRef = useRef(null);
+  const zipRef = useRef(null);
+  const invoicePicRef = useRef(null);
+  const streetInvoiceRef = useRef(null);
+  const stateInvoiceRef = useRef(null);
+  const cityInvoiceRef = useRef(null);
+  const districtInvoiceRef = useRef(null);
+  const subDistrictInvoiceRef = useRef(null);
+  const zipInvoiceRef = useRef(null);
+  const everyWeekdayInputRef = useRef(null);
+  const everyWeekInputRef = useRef(null);
+  const dokumenPengirimanRef = useRef(null);
+  const dokumenPengirimanInputRef = useRef(null);
+  const dokumenPengirimanInvoiceRef = useRef(null);
+  const dokumenPengirimanInvoiceInputRef = useRef(null);
+
+  useEffect(() => {
+    const loadIndustries = async () => {
+      if (!isFormValid) {
+        const options = {
+          behavior: 'smooth',
+          block: 'center',
+        };
+        if (errorsPengiriman.PICName && PICNameRef.current) {
+          PICNameRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsPengiriman.streetPengiriman && streetPengirimanRef.current) {
+          streetPengirimanRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsPengiriman.statePengiriman && statePengirimanRef.current) {
+          statePengirimanRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsPengiriman.cityPengiriman && cityPengirimanRef.current) {
+          cityPengirimanRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          errorsPengiriman.districtsPengiriman &&
+          districtPengirimanRef.current
+        ) {
+          districtPengirimanRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          errorsPengiriman.subDistrictsPengiriman &&
+          subDistrictPengirimanRef.current
+        ) {
+          subDistrictPengirimanRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsPengiriman.zip && zipRef.current) {
+          zipRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsPengiriman.invoicePic && invoicePicRef.current) {
+          invoicePicRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsPengiriman.streetInvoice && streetInvoiceRef.current) {
+          streetInvoiceRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsPengiriman.stateInvoice && stateInvoiceRef.current) {
+          stateInvoiceRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsPengiriman.cityInvoice && cityInvoiceRef.current) {
+          cityInvoiceRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsPengiriman.districtsInvoice && districtInvoiceRef.current) {
+          districtInvoiceRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          errorsPengiriman.subDistrictsInvoice &&
+          subDistrictInvoiceRef.current
+        ) {
+          subDistrictInvoiceRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsPengiriman.zipInvoice && zipInvoiceRef.current) {
+          zipInvoiceRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          errorsPengiriman.everyWeekdayInput &&
+          everyWeekdayInputRef.current
+        ) {
+          everyWeekdayInputRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsPengiriman.everyWeekInput && everyWeekInputRef.current) {
+          everyWeekInputRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          errorsPengiriman.dokumenPengiriman &&
+          dokumenPengirimanRef.current
+        ) {
+          dokumenPengirimanRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          errorsPengiriman.dokumenInvoice &&
+          dokumenPengirimanInvoiceRef.current
+        ) {
+          dokumenPengirimanInvoiceRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          selectedIds &&
+          formPengiriman.dokumenPengirimanInput === '' &&
+          dokumenPengirimanInputRef.current
+        ) {
+          dokumenPengirimanInputRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          selectedIdsDokumenInvoice &&
+          formPengiriman.dokumenPengirimanInvoiceInput === '' &&
+          dokumenPengirimanInvoiceInputRef.current
+        ) {
+          dokumenPengirimanInvoiceInputRef.current.scrollIntoView(options);
+          return;
+        }
+      }
+    };
+    loadIndustries();
+  }, [buttonSubmitClick, chekValid]);
+
+  useEffect(() => {
+    if (formPengiriman.isSameAddreesStreet == 'true') {
+      setSameAddressStreet(true);
+    } else {
+      setSameAddressStreet(false);
+    }
+  }, [formPengiriman.isSameAddreesStreet]);
+  useEffect(() => {
+    if (formPengiriman.isSameAddrees == 'true') {
+      setSameAddress(true);
+    } else {
+      setSameAddress(false);
+    }
+  }, [formPengiriman.isSameAddrees]);
+
+  // useEffect(() => {
+  //   validatePengiriman();
+  //   if (formPengiriman.isSameAddrees) {
+  //     const isSame = formPengiriman.isSameAddrees;
+  //     if (isSame == 'true') {
+  //       setSameAddress(true);
+  //     } else {
+  //       setSameAddress(false);
+  //     }
+  //   }
+  //   if (formPengiriman.isSameAddreesStreet) {
+  //     const isSame = formPengiriman.isSameAddreesStreet;
+  //     if (isSame == 'true') {
+  //       setSameAddressStreet(true);
+  //     } else {
+  //       setSameAddressStreet(false);
+  //     }
+  //   }
+  //   validatePengiriman();
+  // }, [buttonSubmitClick]);
+  // useEffect(() => {
+  //   if (formPengiriman.isSameAddrees) {
+  //     const isSame = formPengiriman.isSameAddrees;
+  //     if (isSame == 'true') {
+  //       setSameAddress(true);
+  //     } else {
+  //       setSameAddress(false);
+  //     }
+  //   }
+  //   if (formPengiriman.isSameAddreesStreet) {
+  //     const isSame = formPengiriman.isSameAddreesStreet;
+  //     if (isSame == 'true') {
+  //       setSameAddressStreet(true);
+  //     } else {
+  //       setSameAddressStreet(false);
+  //     }
+  //   }
+  //   validatePengiriman();
+  // }, [formPengiriman.isSameAddrees, formPengiriman.isSameAddreesStreet]);
+
+  useEffect(() => {
+    if (sameAddressStreet) {
+      updateFormPengiriman('streetPengiriman', form.street);
+      updateFormPengiriman('statePengiriman', form.state);
+      setValue('statePengiriman', parseInt(form.state));
+      updateFormPengiriman('cityPengiriman', form.city);
+      setValue('cityPengiriman', parseInt(form.city));
+      updateFormPengiriman('districtPengiriman', form.district);
+      setValue('districtPengiriman', parseInt(form.district));
+      updateFormPengiriman('subDistrictPengiriman', form.subDistrict);
+      setValue('subDistrictPengiriman', parseInt(form.subDistrict));
+      updateFormPengiriman('zipPengiriman', form.zip);
+      setValue('zipPengiriman', parseInt(form.zip));
+    }
+    // else {
+    //   updateFormPengiriman('streetPengiriman', '');
+    //   updateFormPengiriman('statePengiriman', '');
+    //   updateFormPengiriman('cityPengiriman', '');
+    //   updateFormPengiriman('zipPengiriman', '');
+    //   setValue('streetPengiriman', '');
+    //   setValue('statePengiriman', '');
+    //   setValue('cityPengiriman', '');
+    // }
+    validatePengiriman();
+  }, [
+    sameAddressStreet,
+    form.state,
+    form.city,
+    form.district,
+    form.subDistrict,
+    form.zip,
+  ]);
+
+  useEffect(() => {
+    if (sameAddress) {
+      updateFormPengiriman('streetInvoice', form.street);
+      updateFormPengiriman('stateInvoice', form.state);
+      setValue('stateInvoice', parseInt(form.state));
+      updateFormPengiriman('cityInvoice', form.city);
+      setValue('cityInvoice', parseInt(form.city));
+      updateFormPengiriman('districtInvoice', form.district);
+      setValue('districtInvoice', parseInt(form.district));
+      updateFormPengiriman('subDistrictInvoice', form.subDistrict);
+      setValue('subDistrictInvoice', parseInt(form.subDistrict));
+      updateFormPengiriman('zipInvoice', form.zip);
+      setValue('zipInvoice', parseInt(form.zip));
+    } else {
+      // updateFormPengiriman('streetInvoice', '');
+      // updateFormPengiriman('stateInvoice', '');
+      // updateFormPengiriman('cityInvoice', '');
+      // setValue('streetInvoice', '');
+      // setValue('stateInvoice', '');
+      // setValue('cityInvoice', '');
+    }
+    validatePengiriman();
+  }, [
+    sameAddress,
+    form.street,
+    form.state,
+    form.city,
+    form.district,
+    form.subDistrict,
+  ]);
+
+  // useEffect(() => {
+  //   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('stateInvoice', formPengiriman.stateInvoice);
+  //     // setValue('stateInvoice', parseInt(formPengiriman.stateInvoice));
+  //     // updateFormPengiriman('cityInvoice', formPengiriman.cityInvoice);
+  //     // setValue('cityInvoice', parseInt(formPengiriman.cityInvoice));
+  //   }
+  //   validatePengiriman();
+  // }, [
+  //   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 (formPengiriman.districtPengiriman) {
+      setValue(
+        'districtPengiriman',
+        parseInt(formPengiriman.districtPengiriman)
+      );
+    }
+  }, [formPengiriman.districtPengiriman]);
+  useEffect(() => {
+    if (formPengiriman.subDistrictPengiriman) {
+      setValue(
+        'subDistrictPengiriman',
+        parseInt(formPengiriman.subDistrictPengiriman)
+      );
+    }
+  }, [formPengiriman.subDistrictPengiriman]);
+  useEffect(() => {
+    if (formPengiriman.zipPengiriman) {
+      setValue('zipPengiriman', parseInt(formPengiriman.zipPengiriman));
+    }
+  }, [formPengiriman.zipPengiriman]);
+  useEffect(() => {
+    if (formPengiriman.stateInvoice) {
+      setValue('stateInvoice', parseInt(formPengiriman.stateInvoice));
+    }
+  }, [formPengiriman.stateInvoice]);
+  useEffect(() => {
+    if (formPengiriman.cityInvoice) {
+      setValue('cityInvoice', parseInt(formPengiriman.cityInvoice));
+    }
+  }, [formPengiriman.cityInvoice]);
+  useEffect(() => {
+    if (formPengiriman.districtInvoice) {
+      setValue('districtInvoice', parseInt(formPengiriman.districtInvoice));
+    }
+  }, [formPengiriman.districtInvoice]);
+  useEffect(() => {
+    if (formPengiriman.subDistrictInvoice) {
+      setValue(
+        'subDistrictInvoice',
+        parseInt(formPengiriman.subDistrictInvoice)
+      );
+    }
+  }, [formPengiriman.subDistrictInvoice]);
+  useEffect(() => {
+    if (formPengiriman.zipInvoice) {
+      setValue('zipInvoice', parseInt(formPengiriman.zipInvoice));
+    }
+  }, [formPengiriman.zipInvoice]);
+
+  const getFromLocalStorage = (key) => {
+    const itemStr = localStorage.getItem(key);
+    if (!itemStr) return null;
+
+    const item = JSON.parse(itemStr);
+    return item;
+  };
+
+  // const cachedData = getFromLocalStorage('Pengiriman');
+  // useEffect(() => {
+  //   if (cachedData) {
+  //     setValue('cityPengiriman', parseInt(cachedData?.cityPengiriman));
+  //     updateFormPengiriman('cityPengiriman', `${cachedData?.cityPengiriman}`);
+  //   }
+  //   if (cachedData?.statePengiriman) {
+  //     setValue('statePengiriman', parseInt(cachedData?.statePengiriman));
+  //   }
+  //   if (cachedData?.stateInvoice) {
+  //     setValue('stateInvoice', parseInt(cachedData?.stateInvoice));
+  //   }
+  //   if (cachedData?.cityInvoice) {
+  //     setValue('cityInvoice', parseInt(cachedData?.cityInvoice));
+  //   }
+  //   if (cachedData?.isSameAddrees) {
+  //     updateFormPengiriman('isSameAddrees', `${cachedData?.isSameAddrees}`);
+  //   }
+  //   validatePengiriman();
+  // }, [cachedData?.cityPengiriman]);
+  // useEffect(() => {
+  //   if (cachedData?.everyWeek) {
+  //     updateFormPengiriman('everyWeek', cachedData?.everyWeek);
+  //     setEveryWeek(cachedData?.everyWeek);
+  //   }
+  //   if (cachedData?.everyWeekday) {
+  //     updateFormPengiriman('everyWeekday', cachedData?.everyWeekday);
+  //     setEveryWeekday(cachedData?.everyWeekday);
+  //   }
+  //   if (cachedData?.tukarInvoice) {
+  //     updateFormPengiriman('tukarInvoice', cachedData?.tukarInvoice);
+  //     setTukarInvoice(cachedData?.tukarInvoice);
+  //   }
+  //   if (cachedData?.everyWeekPembayaran) {
+  //     updateFormPengiriman(
+  //       'everyWeekPembayaran',
+  //       cachedData?.everyWeekPembayaran
+  //     );
+  //     setEveryWeekPembayaran(cachedData?.everyWeekPembayaran);
+  //   }
+  //   if (cachedData?.everyWeekdayPembayaran) {
+  //     updateFormPengiriman(
+  //       'everyWeekdayPembayaran',
+  //       cachedData?.everyWeekdayPembayaran
+  //     );
+  //     setEveryWeekdayPembayaran(cachedData?.everyWeekdayPembayaran);
+  //   }
+  //   if (cachedData?.tukarInvoicePembayaran) {
+  //     updateFormPengiriman(
+  //       'tukarInvoicePembayaran',
+  //       cachedData?.tukarInvoicePembayaran
+  //     );
+  //     setTukarInvoicePembayaran(cachedData?.tukarInvoicePembayaran);
+  //   }
+  //   validatePengiriman();
+  // }, [
+  //   cachedData?.everyWeek,
+  //   cachedData?.everyWeekday,
+  //   cachedData?.tukarInvoice,
+  //   cachedData?.everyWeekdayPembayaran,
+  //   cachedData?.everyWeekPembayaran,
+  //   cachedData?.tukarInvoicePembayaran,
+  // ]);
+  const handleChangeSameAddress = () => {
+    // setSameAddress(!sameAddress);
+    // if (sameAddress) {
+    //   updateFormPengiriman('sameAddress', `true`);
+    // } else {
+    // }
+    updateFormPengiriman('isSameAddrees', `${!sameAddress}`);
+    validatePengiriman();
+  };
+  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}`);
+    validatePengiriman();
+  };
+
+  return (
+    <>
+      {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 className='w-3/5'>
+                  <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} {errorsPengiriman.PICTittle}
+                    </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'>
+                  <Checkbox
+                    colorScheme='red'
+                    isChecked={sameAddressStreet}
+                    onChange={handleChangeSameAddressStreet}
+                  >
+                    Alamat Pengiriman sama dengan alamat perusahaan
+                  </Checkbox>
+
+                  <>
+                    <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 ${
+                        isKonfirmasi ? 'flex-col' : 'flex-row'
+                      } w-full gap-3`}
+                    >
+                      <div
+                        className={`flex  ${
+                          isKonfirmasi
+                            ? ' flex-row gap-3 w-full'
+                            : 'flex-row gap-3 w-2/5'
+                        }`}
+                      >
+                        <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>
+                          )}
+                        </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>
+                          )}
+                        </div>
+                      </div>
+                      <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'>
+                              {errorsPengiriman.subDistrictPengiriman}
+                            </div>
+                          )}
+                        </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'>
+                              {errorsPengiriman.subDistrictPengiriman}
+                            </div>
+                          )}
+                        </div>
+                        <div className='w-full' ref={zipRef}>
+                          <Controller
+                            name='zipPengiriman'
+                            control={control}
+                            render={(props) => (
+                              <>
+                                {/* Jika zips tidak kosong, tampilkan dropdown */}
+                                {zips.length > 0 ? (
+                                  <HookFormSelect
+                                    {...props}
+                                    options={zips}
+                                    disabled={
+                                      !watchsubDistrict || sameAddressStreet
+                                    }
+                                    placeholder='Zip'
+                                  />
+                                ) : (
+                                  // Jika zips kosong, tampilkan input manual
+                                  <input
+                                    id='zipPengiriman'
+                                    name='zipPengiriman'
+                                    ref={zipRef}
+                                    placeholder='Kode Pos'
+                                    type='number'
+                                    disabled={
+                                      !watchsubDistrict || sameAddressStreet
+                                    }
+                                    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>
+
+              <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'>
+                  <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}{' '}
+                      {errorsPengiriman.invoicePicTittle}
+                    </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 perusahaan
+                    </Checkbox>
+                  </div>
+
+                  <>
+                    <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 ${
+                        isKonfirmasi ? 'flex-col' : 'flex-row'
+                      } w-full gap-3`}
+                    >
+                      <div
+                        className={`flex  ${
+                          isKonfirmasi
+                            ? ' flex-row gap-3 w-full'
+                            : 'flex-row gap-3 w-2/5'
+                        }`}
+                      >
+                        <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>
+                          )}
+                        </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={`flex-row flex gap-2 justify-between  ${
+                          isKonfirmasi ? 'w-full' : 'w-3/5'
+                        }`}
+                      >
+                        <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'>
+                              {errorsPengiriman.districtInvoice}
+                            </div>
+                          )}
+                        </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'>
+                              {errorsPengiriman.subDistrictsInvoice}
+                            </div>
+                          )}
+                        </div>
+                        <div className='w-full' ref={zipInvoiceRef}>
+                          <Controller
+                            name='zipInvoice'
+                            control={control}
+                            render={(props) => (
+                              <>
+                                {zipsInvoice.length > 0 ? (
+                                  <HookFormSelect
+                                    {...props}
+                                    options={zipsInvoice}
+                                    disabled={
+                                      !watchsubDistrictInvoice || sameAddress
+                                    }
+                                    placeholder='Zip'
+                                  />
+                                ) : (
+                                  <input
+                                    id='zipInvoice'
+                                    name='zipInvoice'
+                                    ref={zipInvoiceRef}
+                                    placeholder='Kode Pos'
+                                    type='number'
+                                    disabled={
+                                      !watchsubDistrictInvoice || sameAddress
+                                    }
+                                    value={formPengiriman.zipInvoice}
+                                    className='form-input'
+                                    onChange={handleInputChange}
+                                  />
+                                )}
+                              </>
+                            )}
+                          />
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errorsPengiriman.zipInvoice}
+                            </div>
+                          )}
+                        </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'>
+                      isi jika perusahaan anda memiliki jadwal penukaran invoice
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5 flex gap-3 flex-col'>
+                  <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>
+
+              <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'>
+                      isi jika perusahaan anda memiliki jadwal pembayaran
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5 flex gap-3 flex-col'>
+                  <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'>
+                    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 tanda terima saat pengiriman barang jika ada
+                    </span>
+                  )}
+                </div>
+                <div
+                  className='w-3/5 flex gap-3 flex-col'
+                  ref={dokumenPengirimanRef}
+                  aria-label='dokumenPengirimanInput'
+                >
+                  <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) || formPengiriman.dokumenKirimInput
+                      }
+                      onChange={() => handleCheckboxChange(4)}
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='dokumenKirimInput'
+                      name='dokumenKirimInput'
+                      aria-label='dokumenKirimInput'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      ref={dokumenPengirimanInputRef}
+                      value={formPengiriman.dokumenKirimInput}
+                      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-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label   text-wrap'>
+                    Dokumen yang dibawa saat pengiriman barang
+                    <span className=' opacity-60'>(Opsional)</span>
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      Dokumen lampiran yang dibawa 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}
+                    </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{' '}
+                    <span className=' opacity-60'>(Opsional)</span>
+                  </label>
+                  <span className='text-xs opacity-60'>
+                    Dokumen lampiran saat pengiriman invoice
+                  </span>
+                </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}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </form>
+        </div>
+      )}
+      {isMobile && (
+        <div className='text-sm'>
+          <h1
+            className={`font-bold py-4 mt-8 ${
+              isKonfirmasi ? 'hidden' : '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>
+                <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} {errorsPengiriman.PICTittle}
+                  </div>
+                )}
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label   text-nowrap'>
+                  Alamat Pengiriman Barang
+                </label>
+                <Checkbox
+                  colorScheme='red'
+                  isChecked={sameAddressStreet}
+                  onChange={handleChangeSameAddressStreet}
+                  size='sm'
+                >
+                  Alamat Pengiriman sama dengan alamat perusahaan
+                </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}
+                    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}
+                    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-3/5'
+                    ref={cityPengirimanRef}
+                    aria-label='cityPengiriman'
+                  >
+                    <Controller
+                      name='cityPengiriman'
+                      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='zipPengiriman'
+                      aria-label='zipPengiriman'
+                      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> */}
+                </div>
+                <div className='flex flex-row w-full gap-2'>
+                  <div className='w-1/3' 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'>
+                        {errorsPengiriman.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'
+                        />
+                      )}
+                    />
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errorsPengiriman.subDistrictPengiriman}
+                      </div>
+                    )}
+                  </div>
+                  <div className='w-1/3' ref={zipRef}>
+                    <Controller
+                      name='zipPengiriman'
+                      control={control}
+                      render={(props) => (
+                        <>
+                          {/* Jika zips tidak kosong, tampilkan dropdown */}
+                          {zips.length > 0 ? (
+                            <HookFormSelect
+                              {...props}
+                              options={zips}
+                              disabled={!watchsubDistrict || sameAddressStreet}
+                              placeholder='Zip'
+                            />
+                          ) : (
+                            // Jika zips kosong, tampilkan input manual
+                            <input
+                              id='zipPengiriman'
+                              name='zipPengiriman'
+                              ref={zipRef}
+                              placeholder='Kode Pos'
+                              type='number'
+                              disabled={!watchsubDistrict || sameAddressStreet}
+                              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 className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>
+                  Nama PIC Penerimaan Invoice
+                </label>
+                <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}{' '}
+                    {errorsPengiriman.invoicePicTittle}
+                  </div>
+                )}
+              </div>
+
+              <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>
+
+                <>
+                  <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.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 || sameAddress}
+                            placeholder='Kota'
+                          />
+                        )}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errorsPengiriman.cityInvoice}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className='sub-alamat flex flex-row w-full gap-3'>
+                    <div className='w-1/3' 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'>
+                          {errorsPengiriman.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'
+                          />
+                        )}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errorsPengiriman.subDistrictsInvoice}
+                        </div>
+                      )}
+                    </div>
+                    <div className='w-1/3' ref={zipInvoiceRef}>
+                      <Controller
+                        name='zipInvoice'
+                        control={control}
+                        render={(props) => (
+                          <>
+                            {zipsInvoice.length > 0 ? (
+                              <HookFormSelect
+                                {...props}
+                                options={zipsInvoice}
+                                disabled={
+                                  !watchsubDistrictInvoice || sameAddress
+                                }
+                                placeholder='Zip'
+                              />
+                            ) : (
+                              <input
+                                id='zipInvoice'
+                                name='zipInvoice'
+                                ref={zipInvoiceRef}
+                                placeholder='Kode Pos'
+                                type='number'
+                                disabled={
+                                  !watchsubDistrictInvoice || sameAddress
+                                }
+                                value={formPengiriman.zipInvoice}
+                                className='form-input'
+                                onChange={handleInputChange}
+                              />
+                            )}
+                          </>
+                        )}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errorsPengiriman.zipInvoice}
+                        </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'>
+                    isi jika perusahaan anda memiliki jadwal penukaran invoice
+                  </span>
+                )}
+                <div className='w-full flex gap-2 flex-col'>
+                  <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>
+
+              <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'>
+                    isi jika perusahaan anda memiliki jadwal pembayaran
+                  </span>
+                )}
+                <div className='w-full flex gap-2 flex-col'>
+                  <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'>
+                  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
+                  </span>
+                )}
+                <div
+                  className='w-full flex gap-2 flex-col'
+                  ref={dokumenPengirimanRef}
+                  aria-label='dokumenPengirimanInput'
+                >
+                  <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
+                      colorScheme='red'
+                      key='4'
+                      isChecked={
+                        isChecked(4) || formPengiriman.dokumenKirimInput
+                      }
+                      onChange={() => handleCheckboxChange(4)}
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='dokumenKirimInput'
+                      name='dokumenKirimInput'
+                      aria-label='dokumenKirimInput'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      ref={dokumenPengirimanInputRef}
+                      value={formPengiriman.dokumenKirimInput}
+                      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 yang dibawa saat pengiriman barang
+                  <span className=' opacity-60'>(Opsional)</span>
+                </label>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>
+                    Dokumen lampiran yang dibawa 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}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <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'>
+                  Dokumen lampiran saat pengiriman invoice
+                </span>
+                <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}
+                    </div>
+                  )}
+                </div>
+                <div className='w-2/5'></div>
+              </div>
+            </div>
+          </form>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Pengiriman;