17 files changed, 1819 insertions, 432 deletions

diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx
index 9ca617ae..1007b9f8 100644
--- a/src/lib/address/components/Addresses.jsx
+++ b/src/lib/address/components/Addresses.jsx
@@ -9,6 +9,7 @@ import MobileView from '@/core/components/views/MobileView';
 import DesktopView from '@/core/components/views/DesktopView';
 import Menu from '@/lib/auth/components/Menu';
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import { MapPinIcon } from 'lucide-react';
 
 const Addresses = () => {
   const router = useRouter();
@@ -17,7 +18,7 @@ const Addresses = () => {
   const selectedAddress = getItemAddress(select || '');
   const [changeConfirmation, setChangeConfirmation] = useState(false);
   const [selectedForChange, setSelectedForChange] = useState(null); // State baru untuk simpan alamat yang akan diubah
-
+  
   const changeSelectedAddress = (id) => {
     if (!select) return;
     updateItemAddress(select, id);
@@ -177,6 +178,20 @@ const AddressCard = ({
           <p className='mt-2 text-gray_r-11'>{address.mobile}</p>
         )}
         <p className='mt-1 leading-6 text-gray_r-11'>{address.street}</p>
+
+        <div className='flex items-center mt-4'>
+          {address.addressMap ? (
+            <>
+              <MapPinIcon class='h-7 w-8 text-yellow-600 mr-3 font-semibold' />
+              <p className='text-yellow-600 font-semibold'>Sudah PinPoint</p>
+            </>
+          ) : (
+            <>
+              <MapPinIcon class='h-7 w-8 text-red-600 mr-2 font-semibold' />
+              <p className='text-red-600 font-semibold text-sm'>Belum PinPoint</p>
+            </>
+          )}
+        </div>
       </div>
       <button
         onClick={() => {
diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index 97db7ed8..fbb01fcc 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -1,18 +1,24 @@
 import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
 import useAuth from '@/core/hooks/useAuth';
+import Menu from '@/lib/auth/components/Menu';
+import { yupResolver } from '@hookform/resolvers/yup';
 import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';
 import cityApi from '../api/cityApi';
+import createAddressApi from '../api/createAddressApi';
 import districtApi from '../api/districtApi';
+import stateApi from '../api/stateApi';
 import subDistrictApi from '../api/subDistrictApi';
-import { useEffect, useState } from 'react';
-import createAddressApi from '../api/createAddressApi';
-import { toast } from 'react-hot-toast';
-import { yupResolver } from '@hookform/resolvers/yup';
-import Menu from '@/lib/auth/components/Menu';
 import useAddresses from '../hooks/useAddresses';
-import stateApi from '../api/stateApi';
+
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import { Button } from '@chakra-ui/react';
+import { MapPinIcon } from 'lucide-react';
+import PinPointMap from '../../maps/components/PinPointMap';
+import { useMaps } from '../../maps/stores/useMaps';
 
 const CreateAddress = () => {
   const auth = useAuth();
@@ -34,6 +40,27 @@ const CreateAddress = () => {
   const [districts, setDistricts] = useState([]);
   const [subDistricts, setSubDistricts] = useState([]);
   const [filteredTypes, setFilteredTypes] = useState(types); // State to manage filtered types
+  const {
+    addressMaps,
+    selectedPosition,
+    detailAddress,
+    setAddressMaps,
+    pinedMaps,
+    setPinedMaps
+  } = useMaps();
+  useEffect(() => {
+    if (detailAddress) {
+      setValue('zip', detailAddress.postalCode);
+      const selectedState = states.find(
+        (state) =>
+          detailAddress?.province.includes(state.label) ||
+          state.label.includes(detailAddress?.province)
+      );
+      setValue('state', selectedState?.value);
+      setValue('street', detailAddress?.street);
+    
+    }
+  }, [detailAddress, setValue]);
 
   useEffect(() => {
     const loadState = async () => {
@@ -45,6 +72,7 @@ const CreateAddress = () => {
       setState(dataState);
     };
     loadState();
+    setAddressMaps('');
   }, []);
 
   const watchState = watch('state');
@@ -64,6 +92,21 @@ const CreateAddress = () => {
   }, [watchState, setValue]);
 
   useEffect(() => {
+    if (detailAddress && Object.keys(detailAddress).length > 0) {
+      const selectedCities = cities.find(
+        (city) =>
+          detailAddress?.district
+            .toLowerCase()
+            .includes(city.label.toLowerCase()) ||
+          city.label
+            .toLowerCase()
+            .includes(detailAddress?.district.toLowerCase())
+      );
+      setValue('city', selectedCities?.value);
+    }
+  }, [cities, detailAddress, setValue]);
+
+  useEffect(() => {
     if (addresses) {
       let hasContactAddress = false;
 
@@ -97,6 +140,21 @@ const CreateAddress = () => {
     }
   }, [watchCity, setValue]);
 
+  useEffect(() => {
+    if (detailAddress && Object.keys(detailAddress).length > 0) {
+      const selectedDistrict = districts.find(
+        (district) =>
+          detailAddress.subDistrict
+            .toLowerCase()
+            .includes(district.label.toLowerCase()) ||
+          district.label
+            .toLowerCase()
+            .includes(detailAddress.subDistrict.toLowerCase())
+      );
+      setValue('district', selectedDistrict?.value);
+    }
+  }, [districts, detailAddress, setValue]);
+
   const watchDistrict = watch('district');
   useEffect(() => {
     setValue('subDistrict', '');
@@ -115,6 +173,22 @@ const CreateAddress = () => {
     }
   }, [watchDistrict, setValue]);
 
+  useEffect(() => {
+    if (detailAddress && Object.keys(detailAddress).length > 0) {
+      const selectedSubDistrict = subDistricts.find(
+        (district) =>
+          detailAddress.village
+            .toLowerCase()
+            .includes(district.label.toLowerCase()) ||
+          district.label
+            .toLowerCase()
+            .includes(detailAddress.village.toLowerCase())
+      );
+
+      setValue('subDistrict', selectedSubDistrict?.value);
+    }
+  }, [subDistricts, detailAddress, setValue]);
+
   const onSubmitHandler = async (values) => {
     const data = {
       ...values,
@@ -123,8 +197,10 @@ const CreateAddress = () => {
       district_id: values.district,
       sub_district_id: values.subDistrict,
       parent_id: auth.partnerId,
+      latitude: selectedPosition?.lat,
+      longtitude: selectedPosition?.lng,
+      address_map: addressMaps,
     };
-
     const address = await createAddressApi({ data });
     if (address?.id) {
       toast.success('Berhasil menambahkan alamat');
@@ -133,171 +209,197 @@ const CreateAddress = () => {
   };
 
   return (
-    <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
-      <div className='hidden md:block w-3/12 pr-4'>
-        <Menu />
-      </div>
-      <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
-        <form onSubmit={handleSubmit(onSubmitHandler)}>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
-            <div>
-              <label className='form-label mb-2'>Label Alamat</label>
-              <Controller
-                name='type'
-                control={control}
-                render={(props) => (
-                  <HookFormSelect
-                    {...props}
-                    isSearchable={false}
-                    options={filteredTypes}
-                  />
-                )}
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.type?.message}
-              </div>
+    <>
+      <BottomPopup
+        className=' !h-[75%]'
+        title='Pin Maps Address'
+        active={pinedMaps}
+        close={() => setPinedMaps(false)}
+      >
+        <div className='flex mt-4'>
+          <PinPointMap />
+        </div>
+      </BottomPopup>
+      <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
+        <div className='hidden md:block w-3/12 pr-4'>
+          <Menu />
+        </div>
+        <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+          <form onSubmit={handleSubmit(onSubmitHandler)}>
+            <div className='mb-4 items-start'>
+              <label className='form-label mb-2'>PinPoint</label>
+              {addressMaps ? (
+                <div className='flex gap-x-2 items-center'>
+                  <MapPinIcon class='h-6 w-6 text-gray-500 mr-3 cursor-pointer' onClick={() => setPinedMaps(true)} />{' '}
+                  <span> {addressMaps} </span>
+                </div>
+              ) : (
+                <Button variant='plain' onClick={() => setPinedMaps(true)}>
+                  <MapPinIcon class='h-6 w-6 text-gray-500 mr-3' />
+                  Pin Alamat
+                </Button>
+              )}
             </div>
+            <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+              <div>
+                <label className='form-label mb-2'>Label Alamat</label>
+                <Controller
+                  name='type'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect
+                      {...props}
+                      isSearchable={false}
+                      options={filteredTypes}
+                    />
+                  )}
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.type?.message}
+                </div>
+              </div>
 
-            <div>
-              <label className='form-label mb-2'>Nama</label>
-              <input
-                {...register('name')}
-                placeholder='John Doe'
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.name?.message}
+              <div>
+                <label className='form-label mb-2'>Nama</label>
+                <input
+                  {...register('name')}
+                  placeholder='John Doe'
+                  type='text'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.name?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Email</label>
-              <input
-                {...register('email')}
-                placeholder='contoh@email.com'
-                type='email'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.email?.message}
+              <div>
+                <label className='form-label mb-2'>Email</label>
+                <input
+                  {...register('email')}
+                  placeholder='contoh@email.com'
+                  type='email'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.email?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Mobile</label>
-              <input
-                {...register('mobile')}
-                placeholder='08xxxxxxxx'
-                type='tel'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.mobile?.message}
+              <div>
+                <label className='form-label mb-2'>Mobile</label>
+                <input
+                  {...register('mobile')}
+                  placeholder='08xxxxxxxx'
+                  type='tel'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.mobile?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Alamat</label>
-              <input
-                {...register('street')}
-                placeholder='Jl. Bandengan Utara 85A'
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.street?.message}
+              <div>
+                <label className='form-label mb-2'>Alamat</label>
+                <input
+                  {...register('street')}
+                  placeholder='Jl. Bandengan Utara 85A'
+                  type='text'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.street?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Kode Pos</label>
-              <input
-                {...register('zip')}
-                placeholder='10100'
-                type='number'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.zip?.message}
+              <div>
+                <label className='form-label mb-2'>Kode Pos</label>
+                <input
+                  {...register('zip')}
+                  placeholder='10100'
+                  type='number'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.zip?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Provinsi</label>
-              <Controller
-                name='state'
-                control={control}
-                render={(props) => (
-                  <HookFormSelect {...props} options={states} />
-                )}
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.state?.message}
+              <div>
+                <label className='form-label mb-2'>Provinsi</label>
+                <Controller
+                  name='state'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect {...props} options={states} />
+                  )}
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.state?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Kota</label>
-              <Controller
-                name='city'
-                control={control}
-                render={(props) => (
-                  <HookFormSelect
-                    {...props}
-                    options={cities}
-                    disabled={!watchState}
-                  />
-                )}
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.city?.message}
+              <div>
+                <label className='form-label mb-2'>Kota</label>
+                <Controller
+                  name='city'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect
+                      {...props}
+                      options={cities}
+                      disabled={!watchState}
+                    />
+                  )}
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.city?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Kecamatan</label>
-              <Controller
-                name='district'
-                control={control}
-                render={(props) => (
-                  <HookFormSelect
-                    {...props}
-                    options={districts}
-                    disabled={!watchCity}
-                  />
-                )}
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.district?.message}
+              <div>
+                <label className='form-label mb-2'>Kecamatan</label>
+                <Controller
+                  name='district'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect
+                      {...props}
+                      options={districts}
+                      disabled={!watchCity}
+                    />
+                  )}
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.district?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Kelurahan</label>
-              <Controller
-                name='subDistrict'
-                control={control}
-                render={(props) => (
-                  <HookFormSelect
-                    {...props}
-                    options={subDistricts}
-                    disabled={!watchDistrict}
-                  />
-                )}
-              />
+              <div>
+                <label className='form-label mb-2'>Kelurahan</label>
+                <Controller
+                  name='subDistrict'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect
+                      {...props}
+                      options={subDistricts}
+                      disabled={!watchDistrict}
+                    />
+                  )}
+                />
+              </div>
             </div>
-          </div>
 
-          <button
-            type='submit'
-            className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
-          >
-            Simpan
-          </button>
-        </form>
+            <button
+              type='submit'
+              className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
+            >
+              Simpan
+            </button>
+          </form>
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx
index ba6bd25b..9f038b74 100644
--- a/src/lib/address/components/EditAddress.jsx
+++ b/src/lib/address/components/EditAddress.jsx
@@ -14,6 +14,12 @@ import Menu from '@/lib/auth/components/Menu';
 import useAuth from '@/core/hooks/useAuth';
 import odooApi from '@/core/api/odooApi';
 import stateApi from '../api/stateApi';
+import { MapPinIcon } from 'lucide-react';
+import { Button } from '@chakra-ui/react';
+import { useMaps } from '../../maps/stores/useMaps';
+
+import PinPointMap from '../../maps/components/PinPointMap';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
 
 const EditAddress = ({ id, defaultValues }) => {
   const auth = useAuth();
@@ -35,6 +41,33 @@ const EditAddress = ({ id, defaultValues }) => {
   const [cities, setCities] = useState([]);
   const [districts, setDistricts] = useState([]);
   const [subDistricts, setSubDistricts] = useState([]);
+  const [pinedMaps, setPinedMaps] = useState(false);
+  const [tempAddress, setTempAddress] = useState(getValues('addressMap'));
+  const { addressMaps, selectedPosition, detailAddress } = useMaps();
+
+  console.log('ini adalah',);
+
+  useEffect(() => {
+    if (addressMaps) {
+      setTempAddress(addressMaps);
+      setValue('addressMap', addressMaps);
+      setValue('longtitude', selectedPosition.lng);
+      setValue('latitude', selectedPosition.lat);
+    }
+  }, [addressMaps, selectedPosition, setValue]);
+
+  useEffect(() => {
+    if (Object.keys(detailAddress).length > 0) {
+      setValue('zip', detailAddress.postalCode);
+      const selectedState = states.find(
+        (state) =>
+          detailAddress?.province.includes(state.label) ||
+          state.label.includes(detailAddress?.province)
+      );
+      setValue('state', selectedState?.value);  
+      setValue('street', detailAddress?.route);      
+    }
+  }, [detailAddress, setValue]);
 
   useEffect(() => {
     const loadProfile = async () => {
@@ -67,8 +100,8 @@ const EditAddress = ({ id, defaultValues }) => {
 
   const watchState = watch('state');
   useEffect(() => {
+    setValue('city', '');
     if (watchState) {
-      setValue('city', '');
       const loadCities = async () => {
         let dataCities = await cityApi({ stateId: watchState });
         dataCities = dataCities.map((city) => ({
@@ -86,6 +119,21 @@ const EditAddress = ({ id, defaultValues }) => {
     }
   }, [watchState, setValue, getValues]);
 
+  useEffect(() => {
+    if (Object.keys(detailAddress).length > 0) {
+      const selectedCities = cities.find(
+        (city) =>
+          detailAddress?.district
+            .toLowerCase()
+            .includes(city.label.toLowerCase()) ||
+          city.label
+            .toLowerCase()
+            .includes(detailAddress?.district.toLowerCase())
+      );
+      setValue('city', selectedCities?.value);
+    }
+  }, [cities, detailAddress, setValue]);
+
   const watchCity = watch('city');
   useEffect(() => {
     if (watchCity) {
@@ -107,6 +155,23 @@ const EditAddress = ({ id, defaultValues }) => {
     }
   }, [watchCity, setValue, getValues]);
 
+  useEffect(() => {
+    if (Object.keys(detailAddress).length > 0) {
+      const selectedDistrict = districts.find(
+        (district) =>
+          detailAddress.subDistrict
+            .toLowerCase()
+            .includes(district.label.toLowerCase()) ||
+          district.label
+            .toLowerCase()
+            .includes(detailAddress.subDistrict.toLowerCase())
+      );
+      setValue('district', selectedDistrict?.value);
+    }
+  }, [districts, detailAddress, setValue]);
+
+
+
   const watchDistrict = watch('district');
   useEffect(() => {
     if (watchDistrict) {
@@ -130,6 +195,24 @@ const EditAddress = ({ id, defaultValues }) => {
       loadSubDistricts();
     }
   }, [watchDistrict, setValue, getValues]);
+
+  
+  useEffect(() => {
+    if (Object.keys(detailAddress).length > 0) {
+      const selectedSubDistrict = subDistricts.find(
+        (district) =>
+          detailAddress.village
+            .toLowerCase()
+            .includes(district.label.toLowerCase()) ||
+          district.label
+            .toLowerCase()
+            .includes(detailAddress.village.toLowerCase())
+      );
+
+      setValue('subDistrict', selectedSubDistrict?.value);
+    }
+  }, [subDistricts, detailAddress, setValue]);
+
   const onSubmitHandler = async (values) => {
     const data = {
       ...values,
@@ -138,40 +221,69 @@ const EditAddress = ({ id, defaultValues }) => {
       city_id: values.city,
       district_id: values.district,
       sub_district_id: values.subDistrict,
+      longtitude: selectedPosition?.lng,
+      latitude: selectedPosition?.lat,
+      address_map: addressMaps,
     };
     if (!auth.company) {
       data.alamat_lengkap_text = values.street;
     }
-    const address = await editAddressApi({ id, data });
-    let dataAlamat;
-    let isUpdated = true;
-    if (auth.company) {
-      if (auth?.partnerId == id) {
-        dataAlamat = {
-          id_user: auth.partnerId,
-          alamat_lengkap_text: values.alamat_wajib_pajak,
-          street: values.street,
-        };
-        isUpdated = await odooApi(
-          'PUT',
-          `/api/v1/partner/${auth.parentId}`,
-          dataAlamat
-        );
+    try {
+      const address = await editAddressApi({ id, data });
+      let dataAlamat;
+      let isUpdated = true;
+      if (auth.company) {
+        if (auth?.partnerId == id) {
+          dataAlamat = {
+            id_user: auth.partnerId,
+            alamat_lengkap_text: values.alamat_wajib_pajak,
+            street: values.street,
+          };
+          isUpdated = await odooApi(
+            'PUT',
+            `/api/v1/partner/${auth.parentId}`,
+            dataAlamat
+          );
+        }
       }
-    }
-
-    // if (isUpdated?.id) {
-    if (address?.id && (auth.company && auth?.partnerId == id ? isUpdated?.id : true)) {
-      toast.success('Berhasil mengubah alamat');
-      router.back();
-    } else {
+      // if (isUpdated?.id) {
+      if (address?.id && (auth.company && auth?.partnerId == id ? isUpdated?.id : true)) {
+        toast.success('Berhasil mengubah alamat');
+        router.back();
+      } else {
+        toast.error('Terjadi kesalahan internal');
+        router.back();
+      }
+    } catch (error) {
+      console.log(error);
       toast.error('Terjadi kesalahan internal');
       router.back();
     }
+
+   
+
+    // if (isUpdated?.id) {
+    // if (address?.id && auth.company ? isUpdated?.id : true) {
+    //   toast.success('Berhasil mengubah alamat');
+    //   router.back();
+    // } else {
+    //   toast.error('Terjadi kesalahan internal');
+    //   router.back();
+    // }
   };
 
   return (
     <>
+      <BottomPopup
+        className=' !h-[75%]'
+        title='Pin Maps Address'
+        active={pinedMaps}
+        close={() => setPinedMaps(false)}
+      >
+        <div className='flex mt-4'>
+          <PinPointMap />
+        </div>
+      </BottomPopup>
       <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
         <div className='hidden md:block w-3/12 pr-4'>
           <Menu />
@@ -184,6 +296,20 @@ const EditAddress = ({ id, defaultValues }) => {
             {auth?.partnerId == id && <div className='badge-green'>Utama</div>}
           </div>
           <form onSubmit={handleSubmit(onSubmitHandler)}>
+            <div className='mb-4 items-start'>
+              <label className='form-label mb-2'>PinPoint</label>
+              {tempAddress ? (
+                <div className='flex gap-x-2 items-center'>
+                  <MapPinIcon class='h-6 w-6 text-gray-500 mr-3 cursor-pointer' onClick={() => setPinedMaps(true)} />{' '}
+                  <span> {tempAddress} </span>
+                </div>
+              ) : (
+                <Button variant='plain' onClick={() => setPinedMaps(true)}>
+                  <MapPinIcon class='h-6 w-6 text-gray-500 mr-3' />
+                  Pin Alamat
+                </Button>
+              )}
+            </div>
             <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
               <div>
                 <label className='form-label mb-2'>Label Alamat</label>
diff --git a/src/lib/checkout/api/ExpedisiList.js b/src/lib/checkout/api/ExpedisiList.js
index ca22bec1..67ef93e2 100644
--- a/src/lib/checkout/api/ExpedisiList.js
+++ b/src/lib/checkout/api/ExpedisiList.js
@@ -1,8 +1,7 @@
-import odooApi from '@/core/api/odooApi'
-
+import odooApi from '@/core/api/odooApi';
 const ExpedisiList = async () => {
-  const dataExpedisi = await odooApi('GET', '/api/v1/courier')
-  return dataExpedisi
-}
+  const dataExpedisi = await odooApi('GET', '/api/v1/courier');
+  return dataExpedisi;
+};
 
-export default ExpedisiList
+export default ExpedisiList;
diff --git a/src/lib/checkout/api/checkoutApi.js b/src/lib/checkout/api/checkoutApi.js
index fd982fff..c30d9631 100644
--- a/src/lib/checkout/api/checkoutApi.js
+++ b/src/lib/checkout/api/checkoutApi.js
@@ -18,3 +18,12 @@ export const getProductsCheckout = async (query) => {
   const result = await odooApi('GET', url);
   return result;
 };
+
+export const getProductsSla = async ({data}) => {
+  const dataSLA = await odooApi(
+    'GET',
+    `/api/v1/product/variants/sla`,
+    data
+  )
+  return dataSLA
+} 
diff --git a/src/lib/checkout/api/getRatesCourier.js b/src/lib/checkout/api/getRatesCourier.js
new file mode 100644
index 00000000..8db02d50
--- /dev/null
+++ b/src/lib/checkout/api/getRatesCourier.js
@@ -0,0 +1,22 @@
+import axios from "axios";
+import biteShipAPI from "../../../core/api/biteShip";
+
+const GetRatesCourierBiteship = async ({ destination, items }) => {
+  const couriers = process.env.NEXT_PUBLIC_BITESHIP_CODE_COURIERS;
+  let body = {
+    ...destination,
+    couriers: 'gojek, grab, deliveree, lalamove, jne, tiki, ninja, lion, rara, sicepat, jnt, pos, idexpress, rpx, wahana, jdl, pos, anteraja, sap, paxel, borzo',
+    items: items,
+  };
+
+  const response  = await axios(`${process.env.NEXT_PUBLIC_SELF_HOST}/api/biteship-service?method=POST&url=/v1/rates/couriers&body=` + JSON.stringify(body));
+
+  // const featch = await biteShipAPI('POST', '/v1/rates/couriers', body);
+  console.log('ini featch', response);
+
+
+  return response;
+};
+
+
+export default GetRatesCourierBiteship
\ No newline at end of file
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 5256a328..0b386c30 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -28,10 +28,15 @@ import getFileBase64 from '@/core/utils/getFileBase64';
 import { gtagPurchase } from '@/core/utils/googleTag';
 import whatsappUrl from '@/core/utils/whatsappUrl';
 import addressesApi from '@/lib/address/api/addressesApi';
+import { MapPinIcon } from 'lucide-react';
 import CartItem from '~/modules/cart/components/Item.tsx';
 import ExpedisiList from '../api/ExpedisiList';
 import { findVoucher, getVoucher, getVoucherNew } from '../api/getVoucher';
 
+import { useAddress } from '../stores/useAdress';
+import SectionExpedition from './SectionExpedition';
+import { useCheckout } from '../stores/stateCheckout';
+import { formatShipmentRange, getToDate } from '../utils/functionCheckouit';
 const SELF_PICKUP_ID = 32;
 
 const { checkoutApi } = require('../api/checkoutApi');
@@ -68,14 +73,28 @@ const Checkout = () => {
         source: query,
         voucher: activeVoucher,
         voucher_shipping: activeVoucherShipping,
-      })
+      }),
+    //biteship
+      {
+        keepPreviousData: true, // Menjaga data sebelumnya sampai data baru tersedia
+      }
   );
 
-  const [selectedAddress, setSelectedAddress] = useState({
-    shipping: null,
-    invoicing: null,
-  });
-  const [addresses, setAddresses] = useState(null);
+  // const [selectedAddress, setSelectedAddress] = useState({
+  //   shipping: null,
+  //   invoicing: null,
+  // });
+  // const [addresses, setAddresses] = useState(null);
+
+  const {
+    selectedAddress,
+    setSelectedAddress,
+    addresses,
+    setAddresses,
+    setAddressMaps,
+    setCoordinate,
+    setPostalCode,
+  } = useAddress();
 
   useEffect(() => {
     if (!auth) return;
@@ -105,26 +124,37 @@ const Checkout = () => {
       return addresses[0];
     };
 
+    let ship = matchAddress('shipping');
+
     setSelectedAddress({
       shipping: matchAddress('shipping'),
       invoicing: matchAddress('invoicing'),
     });
+    setPostalCode(ship?.zip);
+    if (ship?.addressMap) {
+      setAddressMaps(ship?.addressMap);
+      setCoordinate({
+        destination_latitude: ship?.latitude,
+        destination_longitude: ship?.longtitude,
+      });
+    }
   }, [addresses]);
 
-  const [products, setProducts] = useState(null);
+  // const [products, setProducts] = useState(null);
   const [totalWeight, setTotalWeight] = useState(0);
   const [priceCheck, setPriceCheck] = useState(false);
-  const [listExpedisi, setExpedisi] = useState([]);
+  // const [listExpedisi, setExpedisi] = useState([]);
   const [listserviceExpedisi, setListServiceExpedisi] = useState([]);
   const [selectedExpedisi, setSelectedExpedisi] = useState(0);
   const [selectedCarrierId, setselectedCarrierId] = useState(0);
   const [selectedCarrier, setselectedCarrier] = useState(0);
-  const [biayaKirim, setBiayaKirim] = useState(0);
-  const [checkWeigth, setCheckWeight] = useState(false);
+  //new release
+  // const [biayaKirim, setBiayaKirim] = useState(0);
+  // const [checkWeigth, setCheckWeight] = useState(false);
   const [selectedServiceType, setSelectedServiceType] = useState(null);
   const [selectedExpedisiService, setselectedExpedisiService] = useState(null);
-  const [etd, setEtd] = useState(null);
-  const [etdFix, setEtdFix] = useState(null);
+  // const [etd, setEtd] = useState(null);
+  // const [etdFix, setEtdFix] = useState(null);
   const [bottomPopup, SetBottomPopup] = useState(null);
   const [bottomPopupTnC, SetBottomPopupTnC] = useState(null);
   const [itemTnC, setItemTnC] = useState(null);
@@ -135,12 +165,31 @@ const Checkout = () => {
   const [findCodeVoucher, SetFindVoucher] = useState(null);
   const [selisihHargaCode, SetSelisihHargaCode] = useState(null);
   const [buttonTerapkan, SetButtonTerapkan] = useState(false);
-  const [checkoutValidation, setCheckoutValidation] = useState(false);
+  // const [checkoutValidation, setCheckoutValidation] = useState(false);
   const [loadingVoucher, setLoadingVoucher] = useState(true);
   const [loadingRajaOngkir, setLoadingRajaOngkir] = useState(false);
   const [grandTotal, setGrandTotal] = useState(0);
   const [hasFlashSale, setHasFlashSale] = useState(false);
 
+  const {
+    checkWeigth,
+    setCheckWeight,
+    hasFlashSale,
+    setHasFlashSale,
+    checkoutValidation,
+    setCheckoutValidation,
+    biayaKirim,
+    products,
+    setProducts,
+    etd,
+    unit,
+    selectedCourier,
+    selectedCourierId,
+    selectedService,
+    listExpedisi,
+    setExpedisi,
+    productSla
+  } = useCheckout();
   const expedisiValidation = useRef(null);
 
   const voucher = async () => {
@@ -296,6 +345,7 @@ const Checkout = () => {
         value: expedisi.id,
         label: expedisi.name,
         carrierId: expedisi.deliveryCarrierId,
+        logo: expedisi.image,
       }));
       setExpedisi(dataExpedisi);
     };
@@ -381,70 +431,71 @@ const Checkout = () => {
     setHasFlashSale(hasFlashSale);
   }, [cartCheckout]);
 
-  useEffect(() => {
-    setCheckoutValidation(false);
-    const loadServiceRajaOngkir = async () => {
-      setLoadingRajaOngkir(true);
-      const body = {
-        origin: 2127,
-        destination: selectedAddress.shipping.rajaongkirCityId,
-        weight: totalWeight,
-        courier: selectedCarrier,
-        originType: 'subdistrict',
-        destinationType: 'subdistrict',
-      };
-      setBiayaKirim(0);
-      const dataService = await axios(
-        '/api/rajaongkir-service?body=' + JSON.stringify(body)
-      );
-      setLoadingRajaOngkir(false);
-      setListServiceExpedisi(dataService.data[0].costs);
-      if (dataService.data[0].costs[0]) {
-        setBiayaKirim(dataService.data[0].costs[0]?.cost[0].value);
-        setselectedExpedisiService(
-          dataService.data[0].costs[0]?.description +
-            '-' +
-            dataService.data[0].costs[0]?.service
-        );
-        setEtd(dataService.data[0].costs[0]?.cost[0].etd);
-        toast.success('Harap pilih tipe layanan pengiriman');
-      } else {
-        toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.');
-      }
-    };
-    if (selectedCarrier != 0 && selectedCarrier != 1 && totalWeight > 0) {
-      loadServiceRajaOngkir();
-    } else {
-      setListServiceExpedisi();
-      setBiayaKirim(0);
-      setselectedExpedisiService();
-      setEtd();
-    }
-  }, [selectedCarrier, selectedAddress, totalWeight]);
-
-  useEffect(() => {
-    if (selectedServiceType) {
-      let serviceType = selectedServiceType.split(',');
-      setBiayaKirim(serviceType[0]);
-      setselectedExpedisiService(serviceType[1]);
-      setEtd(serviceType[2]);
-    }
-  }, [selectedServiceType]);
-
-  useEffect(() => {
-    if (etd) setEtdFix(calculateEstimatedArrival(etd));
-  }, [etd]);
-
-  useEffect(() => {
-    if (selectedExpedisi) {
-      let serviceType = selectedExpedisi.split(',');
-      if (serviceType[0] === 0) return;
-
-      setselectedCarrier(serviceType[0]);
-      setselectedCarrierId(serviceType[1]);
-      setListServiceExpedisi([]);
-    }
-  }, [selectedExpedisi]);
+  // useEffect(() => {
+  //   setCheckoutValidation(false);
+  //   const loadServiceRajaOngkir = async () => {
+  //     setLoadingRajaOngkir(true);
+  //     const body = {
+  //       origin: 2127,
+  //       destination: selectedAddress.shipping.rajaongkirCityId,
+  //       weight: totalWeight,
+  //       courier: selectedCarrier,
+  //       originType: 'subdistrict',
+  //       destinationType: 'subdistrict',
+  //     };
+  //     setBiayaKirim(0);
+  //     const dataService = await axios(
+  //       '/api/rajaongkir-service?body=' + JSON.stringify(body)
+  //     );
+  //     setLoadingRajaOngkir(false);
+  //     setListServiceExpedisi(dataService.data[0].costs);
+  //     if (dataService.data[0].costs[0]) {
+  //       setBiayaKirim(dataService.data[0].costs[0]?.cost[0].value);
+  //       setselectedExpedisiService(
+  //         dataService.data[0].costs[0]?.description +
+  //           '-' +
+  //           dataService.data[0].costs[0]?.service
+  //       );
+  //       setEtd(dataService.data[0].costs[0]?.cost[0].etd);
+  //       toast.success('Harap pilih tipe layanan pengiriman');
+  //     } else {
+  //       toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.');
+  //     }
+  //   };
+  //   if (selectedCarrier != 0 && selectedCarrier != 1 && totalWeight > 0) {
+  //     loadServiceRajaOngkir();
+  //   } else {
+  //     setListServiceExpedisi();
+  //     setBiayaKirim(0);
+  //     setselectedExpedisiService();
+  //     setEtd();
+  //   }
+  // }, [selectedCarrier, selectedAddress, totalWeight]);
+  //
+  // useEffect(() => {
+  //   if (selectedServiceType) {
+  //     let serviceType = selectedServiceType.split(',');
+  //     setBiayaKirim(serviceType[0]);
+  //     setselectedExpedisiService(serviceType[1]);
+  //     setEtd(serviceType[2]);
+  //   }
+  // }, [selectedServiceType]);
+  //
+  // useEffect(() => {
+  //   if (etd) setEtdFix(calculateEstimatedArrival(etd));
+  // }, [etd]);
+  //
+  // useEffect(() => {
+  //   if (selectedExpedisi) {
+  //     let serviceType = selectedExpedisi.split(',');
+  //     if (serviceType[0] === 0) return;
+  //
+  //     setselectedCarrier(serviceType[0]);
+  //     setselectedCarrierId(serviceType[1]);
+  //     setListServiceExpedisi([]);
+  //   }
+  // }, [selectedExpedisi]);
+  //
 
   const poNumber = useRef(null);
   const poFile = useRef(null);
@@ -472,7 +523,7 @@ const Checkout = () => {
       });
       return;
     }
-    if (selectedExpedisi === 0) {
+    if (selectedCourier === 0 || !selectedCourier) {
       setCheckoutValidation(true);
       if (expedisiValidation.current) {
         const position = expedisiValidation.current.getBoundingClientRect();
@@ -483,7 +534,16 @@ const Checkout = () => {
       }
       return;
     }
-    if (selectedCarrier != 1 && biayaKirim == 0) {
+    //new release
+    // if (selectedCarrier != 1 && biayaKirim == 0) {
+    //   toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.');
+    //   return;
+    // }
+    // if (!selectedService) {
+    //   toast.error('Harap pilih tipe layanan pengiriman');
+    //   return;
+    // }
+    if (selectedCourier != 1 && biayaKirim == 0) {
       toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.');
       return;
     }
@@ -493,17 +553,26 @@ const Checkout = () => {
       quantity: product.quantity,
       available_quantity: product?.availableQuantity,
     }));
+    let estimated_courier = etd.split('-').map(Number);
+    let eta_courier = Math.max(...estimated_courier);
+    let eta_courier_start = Math.min(...estimated_courier);
+
     let data = {
-      // partner_shipping_id: auth.partnerId,
+      // partner_shipping_id: auth.partnerId,,
       // partner_invoice_id: auth.partnerId,
       partner_shipping_id: selectedAddress?.shipping?.id || auth.partnerId,
       partner_invoice_id: selectedAddress?.invoicing?.id || auth.partnerId,
       user_id: auth.id,
       order_line: JSON.stringify(productOrder),
       delivery_amount: biayaKirim,
-      carrier_id: selectedCarrierId,
-      estimated_arrival_days: splitDuration(etd),
-      delivery_service_type: selectedExpedisiService,
+      carrier_id: selectedCourierId,
+      estimated_arrival_days_start : parseInt(eta_courier_start) + parseInt(productSla),
+      estimated_arrival_days: parseInt(eta_courier) + parseInt(productSla),
+      delivery_service_type: selectedService?.service_type,
+      // New release
+      // carrier_id: selectedCarrierId,
+      // estimated_arrival_days: splitDuration(etd),
+      // delivery_service_type: selectedExpedisiService,
       flash_sale: hasFlashSale, // dibuat negasi untuk ngetest kebalikan nilai false
       voucher: activeVoucher,
       voucher_shipping: activeVoucherShipping,
@@ -1160,20 +1229,21 @@ const Checkout = () => {
         )}
         <Divider />
         <SectionValidation address={selectedAddress.shipping} />
-        <SectionExpedisi
-          address={selectedAddress.shipping}
-          listExpedisi={listExpedisi}
-          setSelectedExpedisi={setSelectedExpedisi}
-          checkWeigth={checkWeigth}
-          checkoutValidation={checkoutValidation}
-          expedisiValidation={expedisiValidation}
-          loadingRajaOngkir={loadingRajaOngkir}
-        />
-        <Divider />
-        <SectionListService
-          listserviceExpedisi={listserviceExpedisi}
-          setSelectedServiceType={setSelectedServiceType}
-        />
+        {/*new-relase*/}
+       {/*<SectionExpedisi*/}
+       {/*   address={selectedAddress.shipping}*/}
+       {/*   listExpedisi={listExpedisi}*/}
+       {/*   setSelectedExpedisi={setSelectedExpedisi}*/}
+       {/*   checkWeigth={checkWeigth}*/}
+       {/*   checkoutValidation={checkoutValidation}*/}
+       {/*   expedisiValidation={expedisiValidation}*/}
+       {/*   loadingRajaOngkir={loadingRajaOngkir}*/}
+       {/* />*/}
+       {/* <Divider />*/}
+       {/* <SectionListService*/}
+       {/*   listserviceExpedisi={listserviceExpedisi}*/}
+       {/*   setSelectedServiceType={setSelectedServiceType}*/}
+       {/* />*/}
 
         <div className='p-4 flex flex-col gap-y-4'>
           {!!products &&
@@ -1262,7 +1332,10 @@ const Checkout = () => {
               </div>
               <div className='flex gap-x-2 justify-between'>
                 <div className='text-gray_r-11'>
-                  Biaya Kirim <p className='text-xs mt-1'>{etdFix}</p>
+                  Biaya Kirim{' '}
+                  <p className='text-xs mt-1'>
+                    {formatShipmentRange(etd, unit, productSla)}
+                  </p>
                 </div>
                 <div>
                   {currencyFormat(
@@ -1386,7 +1459,8 @@ const Checkout = () => {
             className='flex-1 btn-yellow'
             onClick={checkout}
             disabled={
-              isLoading ||
+            //new release
+              // isLoading ||
               !products ||
               products?.length == 0 ||
               priceCheck ||
@@ -1458,9 +1532,10 @@ const Checkout = () => {
                   />
                 </Skeleton>
               )}
+              {products && <SectionExpedition products={products} />}
               <Divider />
               <SectionValidation address={selectedAddress.shipping} />
-              <SectionExpedisi
+              {/* <SectionExpedisi
                 address={selectedAddress.shipping}
                 listExpedisi={listExpedisi}
                 setSelectedExpedisi={setSelectedExpedisi}
@@ -1473,7 +1548,7 @@ const Checkout = () => {
               <SectionListService
                 listserviceExpedisi={listserviceExpedisi}
                 setSelectedServiceType={setSelectedServiceType}
-              />
+              /> */}
 
               <div className='p-4'>
                 <div className='font-medium mb-6'>Detail Pesanan</div>
@@ -1569,7 +1644,9 @@ const Checkout = () => {
                     <div className='flex gap-x-2 justify-between'>
                       <div className='text-gray_r-11'>
                         Biaya Kirim
-                        <p className='text-xs mt-1'>{etdFix}</p>
+                        <p className='text-xs mt-1'>
+                          {formatShipmentRange(etd, unit, productSla)}
+                        </p>
                       </div>
                       <div>
                         {currencyFormat(
@@ -1691,7 +1768,8 @@ const Checkout = () => {
                   className='w-full btn-yellow mt-4'
                   onClick={checkout}
                   disabled={
-                    isLoading ||
+                  // new-relase
+                    // isLoading ||
                     !products ||
                     products?.length == 0 ||
                     priceCheck ||
@@ -1740,14 +1818,32 @@ const SectionAddress = ({ address, label, url }) => (
         <p className='mt-1 text-gray_r-11'>
           {address.street}, {address?.city?.name}
         </p>
+        <div className='flex gap-x-2 items-center mt-4 cursor-pointer'>
+          <MapPinIcon
+            className={
+              address.addressMap
+                ? `h-6 w-6 text-gray-500`
+                : `h-6 w-6 text-red-500`
+            }
+          />
+          {address.addressMap ? (
+            <label>Sudah Pinpoint</label>
+          ) : (
+            <Link href={'/my/address/' + address.id + '/edit'} target='_blank' className='cursor-pointer'>
+              <label className='text-red-500 cursor-pointer '>Belum Pinpoint</label>
+            </Link>
+          )}
+        </div>
       </div>
     )}
   </div>
 );
 
 const SectionValidation = ({ address }) =>
-  address?.stateId == 0 ||
-  (address?.rajaongkirCityId == 0 && (
+  //new release
+  // address?.stateId == 0 ||
+  // (address?.rajaongkirCityId == 0 && (
+  address?.stateId == 0 && (
     <BottomPopup active={true} title='Update Alamat'>
       <div className='leading-7 text-gray_r-12/80'>
         Mohon untuk memperbarui alamat Anda dengan mengklik tombol di bawah ini.{' '}
@@ -1761,7 +1857,9 @@ const SectionValidation = ({ address }) =>
         </Link>
       </div>
     </BottomPopup>
-  ));
+  )
+// )
+;
 
 const SectionExpedisi = ({
   address,
diff --git a/src/lib/checkout/components/SectionExpedition.jsx b/src/lib/checkout/components/SectionExpedition.jsx
new file mode 100644
index 00000000..40084048
--- /dev/null
+++ b/src/lib/checkout/components/SectionExpedition.jsx
@@ -0,0 +1,503 @@
+import { Skeleton, Spinner } from '@chakra-ui/react';
+import axios from 'axios';
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { useEffect, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useQuery } from 'react-query';
+import { useAddress } from '../stores/useAdress';
+
+import currencyFormat from '@/core/utils/currencyFormat';
+import { useCheckout } from '../stores/stateCheckout';
+import { formatShipmentRange } from '../utils/functionCheckouit';
+import Image from 'next/image';
+import toast from 'react-hot-toast';
+
+import odooApi from '@/core/api/odooApi';
+import { getProductsSla } from '../api/checkoutApi';
+
+function mappingItems(products) {
+  return products?.map((item) => ({
+    name: item.parent.name,
+    description: `${item.code} - ${item.name}`,
+    value: item.price.priceDiscount,
+    weight: item.weight * 1000,
+    quantity: item.quantity,
+  }));
+}
+
+function reverseMappingCourier(couriersOdoo, couriers, includeInstant = false) {
+  // Buat peta courier berdasarkan nama courier dari couriers
+  const courierMap = couriers.reduce((acc, item) => {
+    const { courier_name, courier_code, courier_service_code } = item;
+    const key = courier_code.toLowerCase();
+
+    if (
+      !includeInstant && (['hours'].includes(item.shipment_duration_unit.toLowerCase()) || item.service_type == 'same_day')
+      
+    ) {
+      return acc;
+    }
+
+    if (!acc[key]) {
+      acc[key] = {
+        courier_name: item.courier_name,
+        courier_code: courier_code,
+        service_type: {},
+      };
+    }
+
+    acc[key].service_type[courier_service_code] = {
+      service_name: item.courier_service_name,
+      duration: item.duration,
+      shipment_range: item.shipment_duration_range,
+      shipment_unit: item.shipment_duration_unit,
+      price: item.price,
+      service_type: courier_service_code,
+      description: item.description,
+    };
+
+    return acc;
+  }, {});
+
+  // Iterasi berdasarkan couriersOdoo
+  return couriersOdoo.map((courierOdoo) => {
+    const courierNameKey = courierOdoo.label.toLowerCase();
+    const carrierId = courierOdoo.carrierId;
+
+    const mappedCourier = courierMap[courierNameKey] || false;
+
+    if (!mappedCourier) {
+      return {
+        ...courierOdoo,
+        courier: false,
+      };
+    }
+
+    return {
+      ...courierOdoo,
+      courier: {
+        ...mappedCourier,
+        courier_id_odoo: carrierId,
+      },
+    };
+  });
+}
+
+function mappingCourier(couriersOdoo, couriers, notIncludeInstant = false) {
+  const validCourierMap = couriersOdoo.reduce((acc, courier) => {
+    acc[courier.label.toLowerCase()] = courier.carrierId;
+    return acc;
+  }, {});
+
+  return couriers?.reduce((result, item) => {
+    const { courier_name, courier_code, courier_service_code } = item;
+    if (!validCourierMap[courier_name.toLowerCase()]) {
+      return result; // Jika tidak ada, lewati item ini
+    }
+
+    if (
+      notIncludeInstant &&
+      ['hours'].includes(item.shipment_duration_unit.toLowerCase())
+    ) {
+      return result;
+    }
+
+    const carrierId = validCourierMap[courier_name];
+
+    // Jika courier_code belum ada di result, buat objek baru untuknya
+    if (!result[courier_code]) {
+      result[courier_code] = {
+        courier_name: item.courier_name,
+        courier_code: courier_code,
+        courier_id_odoo: carrierId,
+        service_type: {
+          [courier_service_code]: {
+            service_name: item.courier_service_name,
+            duration: item.duration,
+            shipment_range: item.shipment_duration_range,
+            shipment_unit: item.shipment_duration_unit,
+            price: item.price,
+            service_type: item.service_type,
+            description: item.description,
+          },
+        },
+      };
+    } else {
+      result[courier_code].service_type[courier_service_code] = {
+        service_name: item.courier_service_name,
+        duration: item.duration,
+        shipment_range: item.shipment_duration_range,
+        shipment_unit: item.shipment_duration_unit,
+        shipment_duration: item.duration,
+        price: item.price,
+        service_type: item.service_type,
+        description: item.description,
+      };
+    }
+
+    return result;
+  }, {});
+}
+
+// interface CourierService {
+//   courier_name: string;
+//   courier_code: string;
+//   service_type: {
+//     [key: string]: {
+//       service_name: string;
+//       duration: number;
+//       shipment_duration: number;
+//       price: number;
+//       service_type: string;
+//       description: string;
+//     };
+//   };
+// }
+
+// interface ServiceOption {
+//   service_name: string;
+//   duration: number;
+//   shipment_duration: number;
+//   price: number;
+//   service_type: string;
+//   description: string;
+// }
+
+export default function SectionExpedition({ products }) {
+  const { addressMaps, coordinate, postalCode } = useAddress();
+  const [serviceOptions, setServiceOptions] = useState([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [onFocusSelectedCourier, setOnFocuseSelectedCourier] = useState(false);
+  const [couriers, setCouriers] = useState(null);
+  const [slaProducts, setSlaProducts] = useState(null);
+  const [savedServiceOptions, setSavedServiceOptions] = useState([]);
+
+  const {
+    checkWeigth,
+    checkoutValidation,
+    setBiayaKirim,
+    setUnit,
+    setEtd,
+    selectedCourier,
+    setSelectedCourier,
+    selectedService,
+    setSelectedService,
+    listExpedisi,
+    productSla,
+    setProductSla,
+    setSelectedCourierId,
+  } = useCheckout();
+
+  let destination = {};
+  let items = mappingItems(products);
+
+  if (addressMaps) {
+    destination = {
+      origin_latitude: -6.3031123,
+      origin_longitude: 106.7794934999,
+      ...coordinate,
+    };
+  } else if (postalCode) {
+    destination = {
+      origin_postal_code: 14440,
+      destination_postal_code: postalCode,
+    };
+  }
+
+  const fetchSlaProducts = async () => {
+    try {
+      let productsMapped = products.map((item) => ({
+        id: item.id,
+        quantity: item.quantity,
+      }));
+
+      let data = {
+        products: JSON.stringify(productsMapped),
+      }
+      const res = await odooApi('POST', `/api/v1/product/variants/sla`, data);
+      setSlaProducts(res);
+    } catch (error) {
+      console.error('Failed to fetch expedition rates:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchSlaProducts();
+  }, []);
+
+  useEffect(() => {
+    if (slaProducts) {
+      let productSla = slaProducts?.slaTotal;
+      if (slaProducts.slaUnit === 'jam') {
+        productSla = 1;
+      }
+      setProductSla(productSla);
+    }
+  }, [slaProducts]);
+
+  const fetchExpedition = async () => {
+    let body = {
+      ...destination,
+      couriers:
+        'gojek,grab,deliveree,lalamove,jne,tiki,ninja,lion,rara,sicepat,jnt,pos,idexpress,rpx,wahana,jdl,pos,anteraja,sap,paxel,borzo',
+      items: items,
+    };
+    try {
+      const response = await axios.get(`/api/biteship-service`, {
+        params: { body: JSON.stringify(body) },
+      });
+      return response;
+    } catch (error) {
+      console.error('Failed to fetch expedition rates:', error);
+    }
+  };
+
+  const { data, isLoading } = useQuery(
+    ['expedition', JSON.stringify(destination), JSON.stringify(items)],
+    fetchExpedition,
+    {
+      enabled:
+        Boolean(Object.keys(destination).length) &&
+        items?.length > 0 &&
+        !checkWeigth &&
+        onFocusSelectedCourier,
+      staleTime: Infinity,
+      cacheTime: Infinity,
+    }
+  );
+
+  useEffect(() => {
+    const instant = slaProducts?.includeInstant || false;
+    if (data) {
+      const couriers = reverseMappingCourier(
+        listExpedisi,
+        data?.data?.pricing,
+        instant
+      );
+      setCouriers(couriers);
+    }
+  }, [data, slaProducts]);
+
+  const onCourierChange = (code) => {
+    setIsOpen(false);
+    setOnFocuseSelectedCourier(false);
+    const courier = code;
+    setSelectedService(null);
+    setBiayaKirim(0);
+    if (courier !== 0 && courier !== 32) {
+      if (courier.courier) {
+        setSelectedCourier(courier.courier.courier_code);
+        setSelectedCourierId(courier.carrierId);
+        setServiceOptions(Object.values(courier.courier.service_type));
+      } else {
+        if (
+          (courier.label === 'GRAB' || courier.label === 'GOJEK') &&
+          !addressMaps
+        ) {
+          toast.error(
+            'Maaf, layanan kurir ' +
+              courier.label +
+              ' tidak tersedia. Karena Anda Belum Melakukan Pengaturan PinPoint Alamat Pegiriman.'
+          );
+        } else {
+          toast.error(
+            'Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.'
+          );
+        }
+        setServiceOptions([]);
+      }
+    } else {
+      setSelectedCourier(courier === 32 ? 'SELF PICKUP' : null);
+      setServiceOptions([]);
+    }
+  };
+
+  const handleOnFocuse = (value) => {
+    setOnFocuseSelectedCourier(!value);
+    setIsOpen(false);
+  };
+
+  const handleSelect = (service) => {
+    setSelectedService(service);
+    setBiayaKirim(service?.price);
+    setEtd(service?.shipment_range);
+    setUnit(service?.shipment_unit);
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+  if (serviceOptions.length > 0) {
+    setSavedServiceOptions(serviceOptions);
+  }
+}, [serviceOptions]);
+
+  return (
+    <form >
+      <div className='px-4 py-2'>
+        <div className='flex justify-between items-center'>
+          <div className='font-medium'>Pilih Ekspedisi: </div>
+          <div className='w-[350px] max'>
+            <div className='px-4 py-2'>
+              <div className='flex justify-between items-center'>
+                <div className='w-[450px]'>
+                  <div className='relative'>
+                    {/* Custom Select Input Field */}
+                    <div
+                      className='w-full p-2 border rounded-lg bg-white cursor-pointer'
+                      onClick={() => handleOnFocuse(onFocusSelectedCourier)}
+                    >
+                      {selectedCourier ? (
+                        <div className='flex justify-between'>
+                          <span>{selectedCourier}</span>
+                        </div>
+                      ) : (
+                        <span className='text-gray-500'>Pilih Expedisi</span>
+                      )}
+                    </div>
+
+                    {/* Dropdown Options */}
+                    {onFocusSelectedCourier && (
+                      <div className='absolute w-full bg-white border rounded-lg mt-1 shadow-lg z-10 max-h-[200px] overflow-y-auto'>
+                        {!isLoading ? (
+                          <>
+                            <div
+                              key={32}
+                              onClick={() => onCourierChange(32)}
+                              className='flex justify-between p-2 items-center hover:bg-gray-100 cursor-pointer'
+                            >
+                              <div>
+                                <p className='font-semibold'>SELF PICKUP</p>
+                              </div>
+                            </div>
+                            {couriers?.map((courier) => (
+                              <div
+                                key={courier?.courier?.courier_code}
+                                onClick={() => onCourierChange(courier)}
+                                className='flex justify-between p-2 items-center hover:bg-gray-100 cursor-pointer'
+                              >
+                                <div>
+                                  <p className='font-semibold'>
+                                    {courier?.label}
+                                  </p>
+                                </div>
+                                <span className='font-semibold'>
+                                  <Image
+                                    src={courier?.logo}
+                                    alt={courier?.courier?.courier_name}
+                                    width={50}
+                                    height={50}
+                                  />
+                                </span>
+                              </div>
+                            ))}
+                          </>
+                        ) : (
+                          <>
+                            <Skeleton height={40} containerClassName='w-full' />
+                            <Skeleton height={40} containerClassName='w-full' />
+                          </>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+            {checkoutValidation && (
+              <span className='text-sm text-red-500'>
+                *silahkan pilih expedisi
+              </span>
+            )}
+          </div>
+          <style jsx>{`
+            .shake {
+              animation: shake 0.4s ease-in-out;
+            }
+          `}</style>
+        </div>
+        {checkWeigth == true && (
+          <p className='mt-4 text-gray_r-11 leading-6'>
+            Mohon maaf, pengiriman hanya tersedia untuk self pickup karena
+            terdapat barang yang belum diatur beratnya. Mohon atur berat barang
+            dengan menghubungi admin melalui{' '}
+            <a
+              className='text-danger-500 inline'
+              href='https://api.whatsapp.com/send?phone=6281717181922'
+            >
+              tautan ini
+            </a>
+          </p>
+        )}
+      </div>
+
+      {(serviceOptions.length > 0 ||
+        selectedService )&&
+        selectedCourier &&
+        selectedCourier !== 32 &&
+        selectedCourier !== 0 && (
+          <div className='px-4 py-2'>
+            <div className='flex justify-between items-center'>
+              <div className='font-medium'>Tipe Layanan Ekspedisi: </div>
+              <div className='w-[350px]'>
+                <div className='relative'>
+                  {/* Custom Select Input Field */}
+                  <div
+                    className='w-full p-2 border rounded-lg bg-white cursor-pointer'
+                    onClick={() => setIsOpen(!isOpen)}
+                  >
+                    {selectedService ? (
+                      <div className='flex justify-between'>
+                        <span>{selectedService.service_name}</span>
+                        <span className='font-semibold'>
+                          {currencyFormat(
+                            Math.round(
+                              parseInt(selectedService?.price * 1.1) / 1000
+                            ) * 1000
+                          )}
+                        </span>
+                      </div>
+                    ) : (
+                      <span className='text-gray-500'>
+                        Pilih layanan pengiriman
+                      </span>
+                    )}
+                  </div>
+                  {isOpen && (
+                    <div className='absolute w-full bg-white border rounded-lg mt-1 shadow-lg z-10'>
+                      {serviceOptions.map((service) => (
+                        <div
+                          key={service.service_type}
+                          onClick={() => handleSelect(service)}
+                          className='flex justify-between p-2 items-center hover:bg-gray-100 cursor-pointer'
+                        >
+                          <div>
+                            <p className='font-semibold'>
+                              {service.service_name}
+                            </p>
+                            <p className='text-gray-600 text-sm'>
+                              {formatShipmentRange(
+                                service.shipment_range,
+                                service.shipment_unit,
+                                productSla
+                              )}
+                            </p>
+                          </div>
+                          <span className='font-semibold'>
+                            {currencyFormat(
+                              Math.round(
+                                parseInt(service?.price * 1.1) / 1000
+                              ) * 1000
+                            )}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+    </form>
+  );
+}
diff --git a/src/lib/checkout/stores/stateCheckout.js b/src/lib/checkout/stores/stateCheckout.js
new file mode 100644
index 00000000..52210d7f
--- /dev/null
+++ b/src/lib/checkout/stores/stateCheckout.js
@@ -0,0 +1,30 @@
+import { create } from "zustand";
+
+export const useCheckout = create((set) => ({
+    products : null,
+    checkWeigth : false,
+    hasFlashSale : false,
+    checkoutValidation : false,
+    biayaKirim : 0,
+    etd : null,
+    unit : null,
+    selectedCourier : null,
+    selectedCourierId : null,
+    selectedService : null,
+    listExpedisi : [],
+    productSla : null,
+    setCheckWeight : (checkWeigth) => set({ checkWeigth }),
+    setHasFlashSale : (hasFlashSale) => set({ hasFlashSale }),
+    setCheckoutValidation : (checkoutValidation) => set({ checkoutValidation }),
+    setBiayaKirim : (biayaKirim) => set({ biayaKirim }),
+    setProducts : (products) => set({ products }),
+    setEtd : (etd) => set({ etd }),
+    setUnit : (unit) => set({ unit }),
+    setSelectedCourier : (selectedCourier) => set({ selectedCourier }),
+    setSelectedService : (selectedService) => set({ selectedService }),
+    setSelectedCourierId : (selectedCourierId) => set({ selectedCourierId }),
+    setExpedisi : (listExpedisi) => set({ listExpedisi }),
+    setProductSla : (productSla) => set({ productSla })
+
+
+}))
\ No newline at end of file
diff --git a/src/lib/checkout/stores/useAdress.js b/src/lib/checkout/stores/useAdress.js
new file mode 100644
index 00000000..5274ecfe
--- /dev/null
+++ b/src/lib/checkout/stores/useAdress.js
@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+
+export const useAddress = create((set) => ({
+  selectedAddress: {
+    shipping: null,
+    invoicing: null,
+  },
+  addresses: null,
+  addressMaps : null,
+  coordinate : {
+    destination_latitude : null,
+    destination_longitude : null
+  },
+  postalCode : null,
+  setAddresses: (addresses) => set({ addresses }),
+  setSelectedAddress: (selectedAddress) => set({ selectedAddress }),
+  setCoordinate: (coordinate) => set({ coordinate }),
+  setPostalCode: (postalCode) => set({ postalCode }),
+  setAddressMaps: (addressMaps) => set({ addressMaps }),
+
+}));
diff --git a/src/lib/checkout/utils/functionCheckouit.js b/src/lib/checkout/utils/functionCheckouit.js
new file mode 100644
index 00000000..a7fa8c5a
--- /dev/null
+++ b/src/lib/checkout/utils/functionCheckouit.js
@@ -0,0 +1,92 @@
+import { m } from 'framer-motion';
+import { min } from 'moment/moment';
+
+export function formatShipmentRange(
+  shipmentDurationRange,
+  shipmentDurationUnit,
+  productSLA
+) {
+  if (!shipmentDurationRange || !shipmentDurationUnit) {
+    return '';
+  }
+  let minRange, maxRange;
+
+  console.log('ini masuk format shipment range', shipmentDurationRange, shipmentDurationUnit, productSLA);
+
+  // Cek apakah durasi berupa range atau angka tunggal
+  if (shipmentDurationRange.includes('-')) {
+    [minRange, maxRange] = shipmentDurationRange.split(' - ').map(Number);
+    // if (minRange === maxRange) {
+    //   maxRange = minRange + 3;
+    // }
+  } else {
+    minRange = Number(shipmentDurationRange); // Jika angka tunggal
+    maxRange = Number(shipmentDurationRange);
+  }
+
+  const start = new Date(); // Tanggal saat ini
+
+  let minDate, maxDate;
+
+  // Hitung estimasi berdasarkan unit waktu
+  if (shipmentDurationUnit === 'days' || shipmentDurationUnit === 'day') {
+    minDate = new Date(start);
+    minDate.setDate(start.getDate() + (minRange + productSLA));
+
+    maxDate = new Date(start);
+    maxDate.setDate(start.getDate() + (maxRange + productSLA));
+  } else if (shipmentDurationUnit === 'hours') {
+    minDate = new Date(start);
+    minDate.setDate(start.getDate() + (1 + productSLA));
+
+    maxDate = new Date(start);
+    maxDate.setDate(start.getDate() + (1 + productSLA + 1));
+    // minDate = new Date(start.getTime() + (minRange + 3) * 60 * 60 * 1000);
+    // maxDate = new Date(start.getTime() + (maxRange + 3) * 60 * 60 * 1000);
+  } else {
+    throw new Error("Unsupported unit. Please use 'days' or 'hours'.");
+  }
+
+  const minDateStr = formatDate(minDate);
+  const maxDateStr = formatDate(maxDate);
+  if (minDateStr === maxDateStr) {
+    return `Estimasi tiba ${minDateStr}`;
+  }
+  return `Estimasi tiba ${minDateStr} - ${maxDateStr}`;
+}
+
+export function getToDate(shipmentDurationRange, shipmentDurationUnit) {
+  if (!shipmentDurationRange || !shipmentDurationUnit) {
+    return '';
+  }
+  const start = new Date(); // Tanggal saat ini
+
+  let maxRange;
+
+  // Cek apakah durasi berupa range atau angka tunggal
+  if (shipmentDurationRange.includes('-')) {
+    [, maxRange] = shipmentDurationRange.split(' - ').map(Number);
+  } else {
+    maxRange = Number(shipmentDurationRange); // Jika angka tunggal
+  }
+
+  let maxDate;
+
+  // Hitung estimasi berdasarkan unit waktu
+  if (shipmentDurationUnit === 'days' || shipmentDurationUnit === 'day') {
+    maxDate = new Date(start);
+    maxDate.setDate(start.getDate() + (maxRange + 3));
+  } else if (shipmentDurationUnit === 'hours') {
+    maxDate = new Date(start.getTime() + (maxRange + 3) * 60 * 60 * 1000);
+  } else {
+    throw new Error("Unsupported unit. Please use 'days' or 'hours'.");
+  }
+
+  return maxDate.getDate();
+}
+
+function formatDate(date) {
+  const day = date.getDate();
+  const month = date.toLocaleString('default', { month: 'short' });
+  return `${day} ${month}`;
+}
diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx
new file mode 100644
index 00000000..acd5ab92
--- /dev/null
+++ b/src/lib/maps/components/PinPointMap.jsx
@@ -0,0 +1,197 @@
+import React, { useState, useCallback, useRef } from 'react';
+import {
+  GoogleMap,
+  useJsApiLoader,
+  Marker,
+  Autocomplete,
+} from '@react-google-maps/api';
+import { useMaps } from '../stores/useMaps';
+import { LocateFixed, MapPinIcon } from 'lucide-react';
+import { Button } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
+
+const containerStyle = {
+  width: '100%',
+  height: '400px',
+};
+
+const center = {
+  lat: -6.2, // Default latitude (Jakarta)
+  lng: 106.816666, // Default longitude (Jakarta)
+};
+
+const PinpointLocation = () => {
+  const { isLoaded } = useJsApiLoader({
+    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY, // Pastikan API key ada di .env.local
+    libraries: ['places'],
+  });
+
+  const { addressMaps, setAddressMaps, selectedPosition, setSelectedPosition, setDetailAddress, setPinedMaps } =
+    useMaps();
+
+  const [tempAddress, setTempAddress] = useState('');
+  const [tempPosition, setTempPosition] = useState(center);
+  const { setValue } = useForm();
+
+  const autocompleteRef = useRef(null);
+
+  const onMapClick = useCallback((event) => {
+    const lat = event.latLng.lat();
+    const lng = event.latLng.lng();
+    setTempPosition({ lat, lng });
+    getAddress(lat, lng);
+  }, []);
+
+  const handlePlaceSelect = () => {
+    const place = autocompleteRef.current.getPlace();
+    if (place && place.geometry) {
+      const lat = place.geometry.location.lat();
+      const lng = place.geometry.location.lng();
+      setTempPosition({ lat, lng });
+      setTempAddress(place.formatted_address);
+    }
+  };
+
+  const getAddressComponent = (components, type) => {
+    const component = components.find((comp) => comp.types.includes(type));
+    return component ? component.long_name : '';
+  };
+
+  const getAddress = async (lat, lng) => {
+    try {
+      const response = await fetch(
+        `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${process.env.NEXT_PUBLIC_GOOGLE_API_KEY}`
+      );
+      const data = await response.json();
+      if (data.results[0]) {
+        const addressComponents = data.results[0].address_components;
+        const details = {
+          route : getAddressComponent(addressComponents, 'route')+' '+getAddressComponent(addressComponents, 'street_number')+' '+getAddressComponent(addressComponents, 'administrative_area_level_7')+' '+getAddressComponent(addressComponents, 'administrative_area_level_6'),
+          province: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_1'
+          ),
+          district: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_2'
+          ),
+          subDistrict: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_3'
+          ),
+          village: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_4'
+          ),
+          postalCode: getAddressComponent(addressComponents, 'postal_code'),
+        };
+        setDetailAddress(details);
+        setTempAddress(data.results[0].formatted_address);
+      }
+    } catch (error) {
+      console.error('Error fetching address:', error);
+    }
+  };
+
+  const handleUseCurrentLocation = () => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const lat = position.coords.latitude;
+          const lng = position.coords.longitude;
+          setTempPosition({ lat, lng });
+          getAddress(lat, lng);
+        },
+        (error) => {
+          console.error('Error getting current location:', error);
+        }
+      );
+    }
+  };
+
+  const handleSavePinpoint = (event) => {
+    event.preventDefault();
+    if (tempAddress === '') {
+      alert('Silahkan pilih lokasi terlebih dahulu');
+      return;
+    }
+    // console.log('tempPosition', tempPosition.lat);
+    getAddress(tempPosition.lat, tempPosition.lng);
+    setSelectedPosition(tempPosition);
+    setAddressMaps(tempAddress);
+    setPinedMaps(false)
+  };
+
+  console.log('set selected position',selectedPosition);
+
+  return (
+    <div className='w-full'>
+      <h3>Tentukan Pinpoint Lokasi</h3>
+      <div style={{ marginBottom: '10px' }}>
+        {isLoaded ? (
+          <Autocomplete
+            onLoad={(ref) => (autocompleteRef.current = ref)}
+            onPlaceChanged={handlePlaceSelect}
+          >
+            <input
+              type='text'
+              placeholder='Cari Alamat...'
+              style={{ width: '100%', padding: '8px' }}
+            />
+          </Autocomplete>
+        ) : (
+          <p>Loading autocomplete...</p>
+        )}
+      </div>
+
+      <div>
+        {isLoaded ? (
+          <GoogleMap
+            mapContainerStyle={containerStyle}
+            center={tempPosition}
+            zoom={15}
+            onClick={onMapClick}
+          >
+            <Marker
+              position={tempPosition}
+              draggable={true}
+              onDragEnd={(e) => onMapClick(e)}
+              icon={{
+                url: 'https://maps.google.com/mapfiles/ms/icons/red-pushpin.png',
+                scaledSize: new window.google.maps.Size(40, 40),
+              }}
+            />
+          </GoogleMap>
+        ) : (
+          <p>Loading map...</p>
+        )}
+      </div>
+
+      <div style={{ marginTop: '20px' }}>
+        <Button variant='solid' onClick={handleUseCurrentLocation}>
+          <LocateFixed class='h-6 w-6 text-gray-500 mr-2' /> Gunakan Lokasi Saat
+          ini
+        </Button>
+      </div>
+
+      <div style={{ marginTop: '10px' }}>
+        <p>PinPoint :</p>
+        <div className='flex gap-x-2 shadow-md rounded-sm text-gray-500 p-3 items-center'>
+          <MapPinIcon class='h-8 w-8 text-gray-500 mr-3' />
+          <label> {tempAddress}</label>
+        </div>
+      </div>
+
+      <div className='mt-6 flex justify-end'>
+        <button
+          className='p-3 border border-red-500 bg-red-600 text-white font-semibold rounded-lg'
+          onClick={handleSavePinpoint}
+        >
+          Simpan Lokasi Ini
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default PinpointLocation;
diff --git a/src/lib/maps/stores/useMaps.js b/src/lib/maps/stores/useMaps.js
new file mode 100644
index 00000000..4daf7f62
--- /dev/null
+++ b/src/lib/maps/stores/useMaps.js
@@ -0,0 +1,17 @@
+import { create } from "zustand";
+
+const center = {
+  lat: -6.200000, // Default latitude (Jakarta)
+  lng: 106.816666, // Default longitude (Jakarta)
+};
+
+export const useMaps = create((set) => ({
+    selectedPosition: center,
+    addressMaps: '',
+    detailAddress: {},
+    pinedMaps : false,
+    setSelectedPosition: (position) => set({ selectedPosition: position }),
+    setAddressMaps: (addressMaps) => set({ addressMaps }),
+    setDetailAddress: (detailAddress) => set({ detailAddress }),
+    setPinedMaps: (pinedMaps) => set({pinedMaps})
+  }));
\ No newline at end of file
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index eb86485d..2fb3138a 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -498,7 +498,7 @@ const ProductSearch = ({
           <Pagination
             pageCount={pageCount}
             currentPage={parseInt(page)}
-            url={`${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
+            url={`${prefixUrl}?${toQuery(_.omit(query, ['page', 'fq']))}`}
             // url={prefixUrl.includes('category') || prefixUrl.includes('lob')? `${prefixUrl}?${toQuery(_.omit(finalQuery, ['page']))}` : `${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
             className='mt-6 mb-2'
           />
@@ -688,7 +688,7 @@ const ProductSearch = ({
               <Pagination
                 pageCount={pageCount}
                 currentPage={parseInt(page)}
-                url={`${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
+                url={`${prefixUrl}?${toQuery(_.omit(query, ['page', 'fq']))}`}
                 // url={prefixUrl.includes('category') || prefixUrl.includes('lob')? `${prefixUrl}?${toQuery(_.omit(finalQuery, ['page']))}` : `${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
                 className='!justify-end'
               />
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 709fa5d4..8b3a8dd0 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -41,6 +41,8 @@ import { useRouter } from 'next/router';
 import { gtagPurchase } from '@/core/utils/googleTag';
 import { deleteItemCart } from '@/core/utils/cart';
 import axios from 'axios';
+import InformationSection from '../../treckingAwb/component/InformationSection';
+import { Button } from '@chakra-ui/react';
 const Transaction = ({ id }) => {
   const PPN = process.env.NEXT_PUBLIC_PPN;
   const router = useRouter();
@@ -443,6 +445,8 @@ const Transaction = ({ id }) => {
                     <span className='mt-2 font-medium'>
                       No Resi : {airway?.trackingNumber || '-'}{' '}
                     </span>
+                    {/*biteship*/}
+                    {/*<p className='mt-1 font-medium'>{airway?.name}</p>*/}
                   </div>
                   <div className='flex gap-x-2'>
                     <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1 text-center'>
@@ -622,19 +626,25 @@ const Transaction = ({ id }) => {
                 )}
               </div>
 
-              <div className='flex items-center justify-between mb-3'>
-                <div className='flex items-center gap-x-2'>
-                  <span className='text-h-sm font-medium'>
-                    {transaction?.data?.name}
-                  </span>
-                  <TransactionStatusBadge status={transaction?.data?.status} />
-                </div>
-                <div className='text-h-sm'>
-                  Estimasi Barang Siap:{' '}
-                  <span className='text-red-500 font-semibold'>
-                    {transaction?.data?.expectedReadyToShip}
-                  </span>
-                </div>
+              {/*new-release*/}
+              {/*<div className='flex items-center justify-between mb-3'>*/}
+              {/*  <div className='flex items-center gap-x-2'>*/}
+              {/*    <span className='text-h-sm font-medium'>*/}
+              {/*      {transaction?.data?.name}*/}
+              {/*    </span>*/}
+              {/*    <TransactionStatusBadge status={transaction?.data?.status} />*/}
+              {/*  </div>*/}
+              {/*  <div className='text-h-sm'>*/}
+              {/*    Estimasi Barang Siap:{' '}*/}
+              {/*    <span className='text-red-500 font-semibold'>*/}
+              {/*      {transaction?.data?.expectedReadyToShip}*/}
+              {/*    </span>*/}
+              {/*  </div>*/}
+              <div className='flex items-center gap-x-2 mb-3'>
+                <span className='text-h-sm font-medium'>
+                  {transaction?.data?.name}
+                </span>
+                <TransactionStatusBadge status={transaction?.data?.status} />
               </div>
               <div className='flex gap-x-4'>
                 <button
@@ -746,54 +756,103 @@ const Transaction = ({ id }) => {
                 </div>
               </div>
 
-              <div className='text-h-sm font-semibold mt-10 mb-4'>
-                Informasi Pelanggan
-              </div>
-              <div className='grid grid-cols-2 gap-x-4'>
-                <div className='border border-gray_r-6 rounded p-3'>
-                  <div className='font-medium mb-4'>Detail Pelanggan</div>
-                  <SectionContent
-                    address={transaction?.data?.address?.customer}
-                  />
+              <div className='flex gap-x-3'>
+                <div className='w-1/2'>
+                  <div className='text-h-sm font-semibold mt-10 mb-4'>
+                    Informasi Pelanggan
+                  </div>
+                  <div className='border border-gray_r-6 rounded p-3'>
+                    <div className='font-medium mb-4'>Detail Pelanggan</div>
+                    <SectionContent
+                      address={transaction?.data?.address?.customer}
+                    />
+                  </div>
                 </div>
-              </div>
-              <div className='flex '>
                 <div className='w-1/2'>
                   <div className='text-h-sm font-semibold mt-10 mb-4'>
-                    Pengiriman
+                    Informasi Pengiriman
                   </div>
                   {transaction?.data?.pickings.length == 0 && (
                     <div className='badge-red text-sm'>
                       Belum ada pengiriman
                     </div>
                   )}
-                  <div className='grid grid-cols-1 gap-1 w-2/3'>
-                    {transaction?.data?.pickings?.map((airway) => (
-                      <button
-                        className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left h-20'
-                        key={airway?.id}
-                        onClick={() => setIdAWB(airway?.id)}
-                      >
-                        <div>
-                          <p className='text-sm text-gray_r-11'>
-                            {airway?.name}
-                          </p>
-                          <span className='text-md text-bold mt-1'>
-                            No Resi : {airway?.trackingNumber || '-'}{' '}
-                          </span>
-                        </div>
-                        <div className='flex gap-x-2'>
-                          <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1 text-center'>
-                            {airway?.delivered
-                              ? 'Pesanan Tiba'
-                              : 'Sedang Dikirim'}
-                          </div>
-                          <ChevronRightIcon className='w-5 stroke-2' />
-                        </div>
-                      </button>
-                    ))}
-                  </div>
+                  {/* <div className='grid grid-cols-1 gap-1 w-1/2'> */}
+                  {transaction?.data?.pickings?.map((airway) => (
+                    <div
+                      key={airway?.id}
+                      className='border border-gray_r-6 rounded p-3'
+                    >
+                      <InformationSection manifests={airway} />
+                      <div className='p-4'>
+                        <button
+                          className='bg-transparent text-red-600 hover:underline p-0 font-semibold'
+                          onClick={() => {
+                            if (airway?.waybillNumber == '-') {
+                              toast.error('Nomor Resi belum tersedia');
+                              return;
+                            }
+                            setIdAWB(airway.id);
+                          }}
+                        >
+                          Lacak Pengiriman
+                        </button>
+                      </div>
+                    </div>
+                    // <button
+                    //   className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left h-20'
+                    //   key={airway?.id}
+                    //   onClick={() => setIdAWB(airway?.id)}
+                    // >
+                    //   <div>
+                    //     <span className='text-sm text-gray_r-11'>
+                    //       No Resi : {airway?.trackingNumber || '-'}{' '}
+                    //     </span>
+                    //     <p className='mt-1 font-medium'>{airway?.name}</p>
+                    //   </div>
+                    //   <div className='flex gap-x-2'>
+                    //     <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1'>
+                    //       {airway?.delivered
+                    //         ? 'Pesanan Tiba'
+                    //         : 'Sedang Dikirim'}
+                    //     </div>
+                    //     <ChevronRightIcon className='w-5 stroke-2' />
+                    //   </div>
+                    // </button>
+                  ))}
+                  {/* </div> */}
                 </div>
+              </div>
+
+              <div className='flex '>
+                {/*New release*/}
+                {/*  <div className='grid grid-cols-1 gap-1 w-2/3'>*/}
+                {/*    {transaction?.data?.pickings?.map((airway) => (*/}
+                {/*      <button*/}
+                {/*        className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left h-20'*/}
+                {/*        key={airway?.id}*/}
+                {/*        onClick={() => setIdAWB(airway?.id)}*/}
+                {/*      >*/}
+                {/*        <div>*/}
+                {/*          <p className='text-sm text-gray_r-11'>*/}
+                {/*            {airway?.name}*/}
+                {/*          </p>*/}
+                {/*          <span className='text-md text-bold mt-1'>*/}
+                {/*            No Resi : {airway?.trackingNumber || '-'}{' '}*/}
+                {/*          </span>*/}
+                {/*        </div>*/}
+                {/*        <div className='flex gap-x-2'>*/}
+                {/*          <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1 text-center'>*/}
+                {/*            {airway?.delivered*/}
+                {/*              ? 'Pesanan Tiba'*/}
+                {/*              : 'Sedang Dikirim'}*/}
+                {/*          </div>*/}
+                {/*          <ChevronRightIcon className='w-5 stroke-2' />*/}
+                {/*        </div>*/}
+                {/*      </button>*/}
+                {/*    ))}*/}
+                {/*  </div>*/}
+                {/*</div>*/}
                 <div className='invoice w-1/2 '>
                   <div className='text-h-sm font-semibold mt-10 mb-4 '>
                     Invoice
diff --git a/src/lib/treckingAwb/component/InformationSection.jsx b/src/lib/treckingAwb/component/InformationSection.jsx
new file mode 100644
index 00000000..bb37d4ae
--- /dev/null
+++ b/src/lib/treckingAwb/component/InformationSection.jsx
@@ -0,0 +1,73 @@
+import { useState } from "react";
+import toast from "react-hot-toast";
+
+const InformationSection = ({ manifests}) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyClick = () => {
+    const textToCopy = manifests?.waybillNumber;
+    navigator.clipboard.writeText(textToCopy);
+    setCopied(true);
+    toast.success('No Resi Berhasil di Copy');
+    setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
+  };
+
+  return (
+    <div className=''>
+      <div className='grid gap-y-4 p-4'>
+        <div className='grid grid-cols-[150px_auto] mb-4'>
+          <span className='font-semibold '>Nomor Resi</span>
+          <div className='flex gap-x-3'>
+            <span className='font-semibold'>: {manifests?.waybillNumber} </span>
+            <button
+              className={`${copied ? 'text-gray-400' : 'text-red-600 '}`}
+              onClick={() => handleCopyClick()}
+            >
+              <svg
+                aria-hidden='true'
+                fill='none'
+                stroke='currentColor'
+                stroke-width='1.5'
+                viewBox='0 0 24 24'
+                className='w-5 h-6'
+              >
+                <path
+                  d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75'
+                  stroke-linecap='round'
+                  stroke-linejoin='round'
+                ></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div className='grid grid-cols-[150px_auto]'>
+          <span>Kurir</span>
+          <span className='font-semibold'>
+            {' '}
+            : {manifests?.deliveryOrder?.carrier}
+          </span>
+        </div>
+        <div className='grid grid-cols-[150px_auto]'>
+          <span>Jenis Service</span>
+          <span className='font-semibold'>
+            {' '}
+            : {manifests?.deliveryOrder?.service}
+          </span>
+        </div>
+        <div className='grid grid-cols-[150px_auto]'>
+          <span>Tanggal Dikirim</span>
+          <span className='font-semibold'> : {manifests?.deliveredDate}</span>
+        </div>
+        <div className='grid grid-cols-[150px_auto]'>
+          <span>Estimasi Tiba</span>
+          <span className='font-semibold'>
+            :{' '}
+            <span className='text-red-600 font-semibold'>{manifests?.eta}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InformationSection;
diff --git a/src/lib/treckingAwb/component/Manifest.jsx b/src/lib/treckingAwb/component/Manifest.jsx
index 87e01e38..acb86f57 100644
--- a/src/lib/treckingAwb/component/Manifest.jsx
+++ b/src/lib/treckingAwb/component/Manifest.jsx
@@ -6,6 +6,32 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import ImageNext from 'next/image';
 import { list } from 'postcss';
+import InformationSection from './InformationSection';
+import Link from 'next/link';
+
+function capitalizeFirstLetter(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+function capitalizeWords(str) {
+  return str
+    .split(' ')
+    .map((word) => capitalizeFirstLetter(word))
+    .join(' ');
+}
+
+function mappingLiveTracking(kurir, resi){
+  let url = null
+  switch (kurir){
+    case('grab'):
+      url = 'https://express.grab.com/track/orders?ids='+resi
+      break;
+    default:
+      url = false
+  }
+
+  return url
+}
 
 const Manifest = ({ idAWB, closePopup }) => {
   const [manifests, setManifests] = useState(null);
@@ -60,15 +86,7 @@ const Manifest = ({ idAWB, closePopup }) => {
     }
   }, [idAWB]);
 
-  const [copied, setCopied] = useState(false);
-
-  const handleCopyClick = () => {
-    const textToCopy = manifests?.waybillNumber;
-    navigator.clipboard.writeText(textToCopy);
-    setCopied(true);
-    toast.success('No Resi Berhasil di Copy');
-    setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
-  };
+  const isLiveTracking = mappingLiveTracking(manifests?.deliveryOrder?.carrier.toLowerCase(), manifests?.waybillNumber)
 
   return (
     <>
@@ -85,7 +103,7 @@ const Manifest = ({ idAWB, closePopup }) => {
       {!isLoading && (
         <BottomPopup
           key={manifests?.waybillNumber}
-          title='Detail Pengiriman'
+          title='Lacak Pengiriman'
           active={idAWB}
           close={closePopup}
         >
@@ -101,104 +119,110 @@ const Manifest = ({ idAWB, closePopup }) => {
                 <p className='text-yellow-600 text-sm'>Sedang Dikirim</p>
               </div>
             )}
+            {manifests?.status === 'cancelled' && (
+              <div className='bg-red-800 p-2 rounded '>
+                <p className='text-white text-sm'>Di Batalkan</p>
+              </div>
+            )}
+            {manifests?.status === 'on_hold' && (
+              <div className='bg-red-800 p-2 rounded '>
+                <p className='text-white text-sm'>Ditunda Sementara </p>
+              </div>
+            )}
             {manifests?.status === 'pending' && (
               <div className='bg-red-100 p-2 rounded '>
                 <p className='text-red-600 text-sm'>Pending</p>
               </div>
             )}
           </div>
-          <div className=''>
-            <h1 className='text-body-1'>
-              Estimasi tiba pada{' '}
-              <span className='text-gray_r-11 text-sm'>({manifests?.eta})</span>
-            </h1>
-            <h1 className='text-sm mt-2 mb-3'>
-              Dikirim Menggunakan{' '}
-              <span className='text-red-500 font-semibold'>
-                {manifests?.deliveryOrder.carrier}
-              </span>
-            </h1>
-            {manifests?.waybillNumber && (
-              <div className='flex justify-between items-center'>
-                <h1>No. Resi</h1>
-                <div className='flex justify-between gap-x-2 items-center'>
-                  <h1 className='font-semibold'>{manifests?.waybillNumber}</h1>
-                  <button
-                    className={`${copied ? 'text-gray-400' : 'text-red-600 '}`}
-                    onClick={() => handleCopyClick()}
-                  >
-                    <svg
-                      aria-hidden='true'
-                      fill='none'
-                      stroke='currentColor'
-                      stroke-width='1.5'
-                      viewBox='0 0 24 24'
-                      className='w-5 h-6'
-                    >
-                      <path
-                        d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75'
-                        stroke-linecap='round'
-                        stroke-linejoin='round'
-                      ></path>
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            )}
-          </div>
+
+          <InformationSection manifests={manifests} />
+
           <hr className='mt-4' />
+          {manifests?.isDelay && (
+            <div
+              class='flex items-center p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50'
+              role='alert'
+            >
+              <svg
+                class='flex-shrink-0 inline w-4 h-4 mr-3'
+                aria-hidden='true'
+                fill='currentColor'
+                viewBox='0 0 20 20'
+              >
+                <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
+              </svg>
+              <div>Pesanan anda mungkin mengalami keterlambatan tiba</div>
+            </div>
+          )}
           <div className='pt-4'>
-            <ol class='relative border-l border-gray_r-7'>
-              {manifests?.manifests?.map((manifest, index) => (
-                <>
-                  <li class='mb-6 ml-4' key={index}>
-                    {manifests.delivered == true && index == 0 ? (
-                      <div
-                        class={`absolute w-6 h-6 rounded-full mt-1.5 -left-3 border ${
-                          index == 0
-                            ? 'bg-green-100 border-green-100'
-                            : 'bg-gray_r-7 border-white'
-                        }`}
-                      >
-                        <ImageNext
-                          src='/images/open-box(1).svg'
-                          width={30}
-                          height={20}
-                        />
-                      </div>
-                    ) : (
-                      <div
-                        class={`absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border bg-gray_r-7 border-white`}
-                      />
-                    )}
-                    {manifests.delivered != true && (
+            <ol className='relative'>
+              {manifests?.manifests?.map((manifest, index) => {
+                const isFirst = index === 0;
+                const isDelivered = manifests.delivered === true;
+                const isBiteship = manifests.isBiteship === true;
+                const statusTitle =
+                  isDelivered && isFirst && !isBiteship
+                    ? 'Pesanan sampai'
+                    : isBiteship
+                    ? capitalizeWords(manifest.status)
+                    : '';
+
+                return (
+                  <li
+                    className='grid grid-cols-[80px_20px_1fr] gap-2 mb-6 items-start'
+                    key={index}
+                  >
+                    {/* Kolom 1: Tanggal + Jam */}
+                    <div className='text-sm text-gray-400 whitespace-nowrap'>
+                      {formatCustomDate(manifest.datetime)}
+                    </div>
+
+                    {/* Kolom 2: Bullet/Poin */}
+                    <div className='relative flex items-start justify-center pt-1'>
                       <div
-                        class={`absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border ${
-                          index == 0
+                        className={`w-3 h-3 rounded-full border ${
+                          index === 0 && manifests.delivered
                             ? 'bg-green-600 border-green-600'
-                            : 'bg-gray_r-7 border-white'
-                        } `}
+                            : 'bg-gray-400 border-white'
+                        }`}
                       />
-                    )}
+                    </div>
 
-                    <time class='text-sm leading-none text-gray-400'>
-                      {formatCustomDate(manifest.datetime)}
-                    </time>
-                    {manifests.delivered == true && index == 0 && (
-                      <p
-                        class={`leading-6 font-semibold text-sm text-green-600 `}
-                      >
-                        Sudah Sampai
+                    {/* Kolom 3: Status dan Deskripsi */}
+                    <div>
+                      <p className='text-sm font-semibold text-green-600'>
+                        {manifests?.deliveryOrder.carrier != 'Self Pick Up'
+                          ? capitalizeWords(manifest.status)
+                          : ''}
                       </p>
-                    )}
-                    <p class={`leading-6 text-[12px] text-gray_r-11`}>
-                      {manifest.description}
-                    </p>
+                      <p
+                        className='text-xs text-gray-600'
+                        dangerouslySetInnerHTML={{
+                          __html: manifest.description,
+                        }}
+                      />
+                    </div>
                   </li>
-                </>
-              ))}
+                );
+              })}
             </ol>
           </div>
+          <div className='pt-2'>
+            {
+              isLiveTracking &&
+                manifests?.status === 'shipment' && (
+                  <Link
+                    href={isLiveTracking}
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="inline-block px-4 py-2 bg-red-600 text-white font-semibold rounded-lg shadow-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75"
+                  >
+                    Live Tracking
+                  </Link>
+                )
+            }
+          </div>
         </BottomPopup>
       )}
     </>