diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 912ce8ea7e..c8d83b6c44 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -1,6 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useState } from 'src/composables/useState';
@@ -8,6 +9,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { useValidator } from 'src/composables/useValidator';
 import useNotify from 'src/composables/useNotify.js';
 import SkeletonForm from 'components/ui/SkeletonForm.vue';
+import VnConfirm from './ui/VnConfirm.vue';
 
 const quasar = useQuasar();
 const state = useState();
@@ -93,6 +95,19 @@ onMounted(async () => {
     }
 });
 
+onBeforeRouteLeave((to, from, next) => {
+    if (!hasChanges.value) next();
+
+    quasar.dialog({
+        component: VnConfirm,
+        componentProps: {
+            title: t('Unsaved changes will be lost'),
+            message: t('Are you sure exit without saving?'),
+            promise: () => next(),
+        },
+    });
+});
+
 onUnmounted(() => {
     state.unset($props.model);
 });
@@ -255,3 +270,8 @@ watch(formUrl, async () => {
     padding: 32px;
 }
 </style>
+<i18n>
+es:
+    Unsaved changes will be lost: Los cambios que no haya guardado se perderán
+    Are you sure exit without saving?: ¿Seguro que quiere salir sin guardar?
+</i18n>
diff --git a/src/pages/Customer/components/CustomerConsigneeCreate.vue b/src/pages/Customer/components/CustomerConsigneeCreate.vue
index ef01879c29..e4302ed652 100644
--- a/src/pages/Customer/components/CustomerConsigneeCreate.vue
+++ b/src/pages/Customer/components/CustomerConsigneeCreate.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
 import axios from 'axios';
-
+import VnLocation from 'src/components/common/VnLocation.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -20,13 +20,9 @@ const router = useRouter();
 
 const formInitialData = reactive({ isDefaultAddress: false });
 
-const townsFetchDataRef = ref(null);
-const postcodeFetchDataRef = ref(null);
 const urlCreate = ref('');
 
 const postcodesOptions = ref([]);
-const citiesLocationOptions = ref([]);
-const provincesLocationOptions = ref([]);
 const agencyModes = ref([]);
 const incoterms = ref([]);
 const customsAgents = ref([]);
@@ -36,14 +32,6 @@ onBeforeMount(() => {
     getCustomsAgents();
 });
 
-const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
-    await postcodeFetchDataRef.value.fetch();
-    await townsFetchDataRef.value.fetch();
-    formData.postalCode = code;
-    formData.provinceFk = provinceFk;
-    formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
-};
-
 const getCustomsAgents = async () => {
     const { data } = await axios.get('CustomsAgents');
     customsAgents.value = data;
@@ -61,26 +49,16 @@ const toCustomerConsignees = () => {
         },
     });
 };
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
+    data.postalCode = code;
+    data.city = town;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
+}
 </script>
 
 <template>
-    <FetchData
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (citiesLocationOptions = data)"
-        auto-load
-        ref="townsFetchDataRef"
-        url="Towns/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (provincesLocationOptions = data)"
-        auto-load
-        url="Provinces/location"
-    />
     <fetch-data
         @on-fetch="(data) => (agencyModes = data)"
         auto-load
@@ -113,83 +91,17 @@ const toCustomerConsignees = () => {
 
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectDialog
-                        :label="t('Postcode')"
-                        :options="postcodesOptions"
-                        :roles-allowed-to-create="['deliveryAssistant']"
+                    <VnLocation
                         :rules="validate('Worker.postcode')"
-                        hide-selected
-                        option-label="code"
-                        option-value="code"
-                        v-model="data.postalCode"
-                    >
-                        <template #form>
-                            <CustomerCreateNewPostcode
-                                @on-data-saved="onPostcodeCreated($event, data)"
-                            />
-                        </template>
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection v-if="scope.opt">
-                                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ scope.opt.code }} -
-                                        {{ scope.opt.town.name }}
-                                        ({{ scope.opt.town.province.name }},
-                                        {{ scope.opt.town.province.country.country }})
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectDialog>
-                </div>
-                <div class="col">
-                    <!-- ciudades -->
-                    <VnSelectFilter
-                        :label="t('City')"
-                        :options="citiesLocationOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="name"
-                        v-model="data.city"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt.name }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{
-                                            `${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
-                                        }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :options="postcodesOptions"
+                        v-model="data.location"
+                        @update:model-value="(location) => handleLocation(data, location)"
+                    ></VnLocation>
                 </div>
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Province')"
-                        :options="provincesLocationOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.provinceFk"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{
-                                        `${scope.opt.name} (${scope.opt.country.country})`
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
                 <div class="col">
                     <VnSelectFilter
                         :label="t('Agency')"
diff --git a/src/pages/Customer/components/CustomerConsigneeEdit.vue b/src/pages/Customer/components/CustomerConsigneeEdit.vue
index 98996e479a..afa6afa5d3 100644
--- a/src/pages/Customer/components/CustomerConsigneeEdit.vue
+++ b/src/pages/Customer/components/CustomerConsigneeEdit.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import axios from 'axios';
-
+import VnLocation from 'src/components/common/VnLocation.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -17,13 +17,8 @@ import CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCus
 const { t } = useI18n();
 const route = useRoute();
 
-const townsFetchDataRef = ref(null);
-const postcodeFetchDataRef = ref(null);
 const urlUpdate = ref('');
-
 const postcodesOptions = ref([]);
-const citiesLocationOptions = ref([]);
-const provincesLocationOptions = ref([]);
 const agencyModes = ref([]);
 const incoterms = ref([]);
 const customsAgents = ref([]);
@@ -34,14 +29,6 @@ onBeforeMount(() => {
     urlUpdate.value = `Clients/${route.params.id}/updateAddress/${route.params.consigneeId}`;
 });
 
-const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
-    await postcodeFetchDataRef.value.fetch();
-    await townsFetchDataRef.value.fetch();
-    formData.postalCode = code;
-    formData.provinceFk = provinceFk;
-    formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
-};
-
 const getData = async (observations) => {
     observationTypes.value = observations;
 
@@ -97,26 +84,16 @@ const onDataSaved = () => {
     };
     axios.post('AddressObservations/crud', payload);
 };
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
+    data.postalCode = code;
+    data.city = town;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
+}
 </script>
 
 <template>
-    <FetchData
-        ref="postcodeFetchDataRef"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-        url="Postcodes/location"
-    />
-    <FetchData
-        ref="townsFetchDataRef"
-        @on-fetch="(data) => (citiesLocationOptions = data)"
-        auto-load
-        url="Towns/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (provincesLocationOptions = data)"
-        auto-load
-        url="Provinces/location"
-    />
     <fetch-data
         @on-fetch="(data) => (agencyModes = data)"
         auto-load
@@ -168,83 +145,17 @@ const onDataSaved = () => {
 
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectDialog
-                        :label="t('Postcode')"
-                        :options="postcodesOptions"
-                        :roles-allowed-to-create="['deliveryAssistant']"
+                    <VnLocation
                         :rules="validate('Worker.postcode')"
-                        hide-selected
-                        option-label="code"
-                        option-value="code"
-                        v-model="data.postalCode"
-                    >
-                        <template #form>
-                            <CustomerCreateNewPostcode
-                                @on-data-saved="onPostcodeCreated($event, data)"
-                            />
-                        </template>
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection v-if="scope.opt">
-                                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ scope.opt.code }} -
-                                        {{ scope.opt.town.name }}
-                                        ({{ scope.opt.town.province.name }},
-                                        {{ scope.opt.town.province.country.country }})
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectDialog>
-                </div>
-                <div class="col">
-                    <!-- ciudades -->
-                    <VnSelectFilter
-                        :label="t('City')"
-                        :options="citiesLocationOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="name"
-                        v-model="data.city"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt.name }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{
-                                            `${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
-                                        }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :options="postcodesOptions"
+                        v-model="data.location"
+                        @update:model-value="(location) => handleLocation(data, location)"
+                    ></VnLocation>
                 </div>
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Province')"
-                        :options="provincesLocationOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.provinceFk"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{
-                                        `${scope.opt.name} (${scope.opt.country.country})`
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
                 <div class="col">
                     <VnSelectFilter
                         :label="t('Agency')"
diff --git a/src/pages/Shelving/Card/ShelvingSummary.vue b/src/pages/Shelving/Card/ShelvingSummary.vue
index 409329c882..27ef33c340 100644
--- a/src/pages/Shelving/Card/ShelvingSummary.vue
+++ b/src/pages/Shelving/Card/ShelvingSummary.vue
@@ -6,7 +6,7 @@ import { useStateStore } from 'stores/useStateStore';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
-import VnUserLink from "components/ui/VnUserLink.vue";
+import VnUserLink from 'components/ui/VnUserLink.vue';
 
 const $props = defineProps({
     id: {
diff --git a/src/pages/Supplier/Card/SupplierAddressesCreate.vue b/src/pages/Supplier/Card/SupplierAddressesCreate.vue
index 21c0cd61a5..69c180e0a3 100644
--- a/src/pages/Supplier/Card/SupplierAddressesCreate.vue
+++ b/src/pages/Supplier/Card/SupplierAddressesCreate.vue
@@ -10,6 +10,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -55,27 +56,16 @@ onMounted(() => {
         updateAddressForm(addressData);
     }
 });
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
+    data.postalCode = code;
+    data.city = town;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
+}
 </script>
 
 <template>
-    <FetchData
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        ref="provincesFetchDataRef"
-        @on-fetch="(data) => (provincesOptions = data)"
-        auto-load
-        url="Provinces"
-    />
-    <FetchData
-        ref="townsFetchDataRef"
-        @on-fetch="(data) => (townsLocationOptions = data)"
-        auto-load
-        url="Towns/location"
-    />
     <QPage>
         <FormModel
             model="supplierAddresses"
@@ -104,59 +94,15 @@ onMounted(() => {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectDialog
-                            v-model="data.postalCode"
-                            :label="t('supplier.addresses.postcode')"
-                            :rules="validate('supplierAddress.postcode')"
+                        <VnLocation
+                            :rules="validate('Worker.postcode')"
                             :roles-allowed-to-create="['deliveryAssistant']"
                             :options="postcodesOptions"
-                            option-label="code"
-                            option-value="code"
-                            hide-selected
-                        >
-                            <template #form>
-                                <CustomerCreateNewPostcode
-                                    @on-data-saved="onPostcodeCreated($event)"
-                                />
-                            </template>
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection v-if="scope.opt">
-                                        <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                        <QItemLabel caption
-                                            >{{ scope.opt.code }} -
-                                            {{ scope.opt.town.name }} ({{
-                                                scope.opt.town.province.name
-                                            }},
-                                            {{
-                                                scope.opt.town.province.country.country
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectDialog>
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('supplier.addresses.city')"
-                            :options="townsLocationOptions"
-                            v-model="data.city"
-                            hide-selected
-                            option-label="name"
-                            option-value="id"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('supplier.addresses.province')"
-                            :options="provincesOptions"
-                            hide-selected
-                            map-options
-                            option-label="name"
-                            option-value="id"
-                            v-model="data.provinceFk"
-                        />
+                            v-model="data.location"
+                            @update:model-value="
+                                (location) => handleLocation(data, location)
+                            "
+                        ></VnLocation>
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
diff --git a/src/pages/Supplier/Card/SupplierFiscalData.vue b/src/pages/Supplier/Card/SupplierFiscalData.vue
index b26582065a..becf6d8182 100644
--- a/src/pages/Supplier/Card/SupplierFiscalData.vue
+++ b/src/pages/Supplier/Card/SupplierFiscalData.vue
@@ -21,7 +21,7 @@ const postcodesOptions = ref([]);
 
 function handleLocation(data, location) {
     const { town, code, provinceFk, countryFk } = location ?? {};
-    data.postcode = code;
+    data.postCode = code;
     data.city = town;
     data.provinceFk = provinceFk;
     data.countryFk = countryFk;