From 2de6b5b4fd26e62f878950c849f31f542780556c Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Thu, 30 May 2024 20:59:46 -0600
Subject: [PATCH] add: translation in direction & loads

---
 src/components/CardLoad.vue            |  62 ++++++++-------
 src/components/CreateLocationModal.vue |  52 ++++++-------
 src/components/FormLoadModal.vue       | 101 ++++++++++++++-----------
 src/components/Pagination.vue          |   2 +-
 src/i18n/en.js                         |  75 ++++++++++++++++--
 src/i18n/es.js                         |  71 ++++++++++++++++-
 src/views/HomeView.vue                 |  16 ++--
 src/views/LoadsPublishedView.vue       |  19 +++--
 src/views/LocationsView.vue            |  24 ++++--
 9 files changed, 290 insertions(+), 132 deletions(-)

diff --git a/src/components/CardLoad.vue b/src/components/CardLoad.vue
index d864778..88b301e 100644
--- a/src/components/CardLoad.vue
+++ b/src/components/CardLoad.vue
@@ -1,13 +1,12 @@
 <script setup>
-    import { RouterLink, useRouter } from 'vue-router';
     import { getDateMonthDay } from '../helpers/date_formats';
     import { getStatusPublished } from '../helpers/status';
     import { getStatusLoad } from '../helpers/status';
     import { useLoadsStore } from '../stores/loads';
     import Swal from 'sweetalert2'
     import { useAuthStore } from '../stores/auth';
+    import { useI18n } from 'vue-i18n';
 
-    const router = useRouter();
     const loadsStore = useLoadsStore();
     const authStore = useAuthStore();
 
@@ -23,8 +22,7 @@
         }
     });
 
-    console.log(props.load)
-
+    const { t } = useI18n()
     defineEmits(['set-load'])
 
 
@@ -35,18 +33,18 @@
 
     const handleDeleteLoad = async() => {
         Swal.fire({
-            title: 'Eliminar carga!',
-            text: '¿Estás seguro de eliminar esta carga?',
+            title: t('loads.titleDel'),
+            text: t('loads.textDel'),
             icon: 'warning',
             showCancelButton: true,
             cancelButtonColor: "#d33",
-            confirmButtonText: 'Eliminar',
-            cancelButtonText: 'Cancelar',
+            confirmButtonText: t('buttons.delete'),
+            cancelButtonText: t('buttons.cancel'),
         }).then(async(result) => {
             if(result.isConfirmed) {
                 Swal.fire({
-                    title: 'Por favor espere!',
-                    html: 'Eliminando carga...',// add html attribute if you want or remove
+                    title: t('messages.loading'),
+                    html: t('loads.loadingDel') + '...',// add html attribute if you want or remove
                     allowOutsideClick: false,
                     didOpen: () => {
                         Swal.showLoading()
@@ -56,14 +54,14 @@
                 if(resp != null) {
                     loadsStore.loads = loadsStore.loads.filter(load => load._id !== props.load._id);
                     Swal.fire({
-                        title: "Carga eliminada!",
-                        text: "Tu carga ha sido eliminada exitosamente.",
+                        title: t('loads.msgTitleDel'),
+                        text: t('loads.msgDel'),
                         icon: "success"
                     });
                 } else {
                     Swal.fire({
-                        title: "No eliminado!",
-                        text: "Tu carga no se pudo eliminar, intente más tarde.",
+                        title: t('errors.msgTitleNotDel'),
+                        text: t('loads.msgNotDel'),
                         icon: "error"
                     });
                 }
@@ -111,7 +109,7 @@
         <div class="row">
             <div class="col-lg-6 col-sm-12">
                 <p>
-                    <span>Origen: </span> 
+                    <span>{{t('loads.origin')}}: </span> 
                     <template v-if="load.origin.company_name"> {{ load.origin.company_name }}, </template> 
                     <template v-if="load.origin.street_address1">{{ load.origin.street_address1 }}, </template>
                     <template v-if="load.origin.city">{{ load.origin.city }}, </template>
@@ -120,7 +118,7 @@
                     <template v-if="load.origin.zipcode">{{ load.origin.zipcode }} </template>
                 </p>
                 <p>
-                    <span>Destino: </span> 
+                    <span>{{t('loads.destination')}}: </span> 
                     <template v-if="load.destination.company_name"> {{ load.destination.company_name }}, </template> 
                     <template v-if="load.destination.street_address1">{{ load.destination.street_address1 }}, </template>
                     <template v-if="load.destination.city">{{ load.destination.city }}, </template>
@@ -131,26 +129,26 @@
                 
             </div>
             <div class="col-lg-6 col-sm-12" v-if="authStore.user?.permissions === 'role_shipper'">
-                <p><span>Status de la publicación:</span> <span>{{ getStatusPublished(load) }}</span></p>
-                <p :style="{color: getStatusLoad(load).color}"><span>Status de la carga:</span> <span>{{ getStatusLoad(load).status }}</span></p>
+                <p><span>{{t('loads.postStatus')}}:</span> <span>{{ getStatusPublished(load) }}</span></p>
+                <p :style="{color: getStatusLoad(load).color}"><span>{{t('loads.loadStatus')}}:</span> <span>{{ getStatusLoad(load).status }}</span></p>
             </div>
         </div>
         <div class="divider"></div>
         <br>
         <div class="row">
             <div class="col-lg-4 col-sm-12">
-                <p><span>Tipo de camión: </span> {{ load.truck_type }}</p>
-                <p><span>Peso: </span> {{ load.weight }} KG</p>
-                <p><span>Fecha de carga: </span> {{ getDateMonthDay(load.est_loading_date) }}</p>
+                <p><span>{{t('loads.truckType')}}: </span> {{ load.truck_type }}</p>
+                <p><span>{{t('loads.weight')}}: </span> {{ load.weight }} KG</p>
+                <p><span>{{t('loads.dateLoad')}}: </span> {{ getDateMonthDay(load.est_loading_date) }}</p>
             </div>
             <div class="col-lg-4 col-sm-12">
-                <p><span>Producto: </span> {{ load?.product?.name }}</p>
-                <p><span>Costo real: </span> {{ load.actual_cost }}</p>
-                <p><span>Fecha de descarga: </span> {{getDateMonthDay(load.est_unloading_date)  }}</p>
+                <p><span>{{t('loads.product')}}: </span> {{ load?.product?.name }}</p>
+                <p><span>{{t('loads.cost')}}: </span> {{ load.actual_cost }}</p>
+                <p><span>{{t('loads.dateDownload')}}: </span> {{getDateMonthDay(load.est_unloading_date)  }}</p>
             </div>
             <div class="col-lg-4 col-sm-12">
-                <p><span>Segmento: </span> {{ load.categories?.map((e) => e.name).join(', ') }}</p>
-                <p><span>Código de carga: </span> {{ load.shipment_code }}
+                <p><span>{{t('global.segment')}}: </span> {{ load.categories?.map((e) => e.name).join(', ') }}</p>
+                <p><span>{{t('loads.loadCode')}}: </span> {{ load.shipment_code }}
                     <!-- <RouterLink
                         v-if="load.load_status !== 'Draft' && !readOnly" 
                         class="tracking-icon" 
@@ -166,10 +164,10 @@
                         </svg>
                     </span>
                 </p>
-                <p><span>Publicación hecha por: </span> {{ load.posted_by_name }}</p>
+                <p><span>{{t('loads.postBy')}}: </span> {{ load.posted_by_name }}</p>
             </div>
         </div>
-        <p v-if="load.notes"><span>Notas adicionales:</span></p>
+        <p v-if="load.notes"><span>{{ t('loads.note') }}:</span></p>
         <div v-if="load.notes" class="box-note">
             {{ load.notes }}
         </div>
@@ -178,7 +176,7 @@
                 v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.load.posted_by"
                 class="btn-primary-sm bg-danger"
                 @click="handleDeleteLoad"
-            ><i class="fa-solid fa-ban clear-sm"></i> Cancelar</button>
+            ><i class="fa-solid fa-ban clear-sm"></i> {{ t('buttons.cancel') }}</button>
             <button  v-if="load.status !== 'Draft' && load.load_status !== 'Published' && load.load_status !== 'Loading'" 
                 type="button" 
                  data-toggle="modal" data-target="#attachmentModal" 
@@ -193,14 +191,14 @@
                 class="btn-primary-sm"
                 data-toggle="modal" data-target="#formLoadModal"
                 @click="openEditModal"
-            ><i class="fa-solid fa-pen-to-square clear-sm"></i> Editar carga</button>
+            ><i class="fa-solid fa-pen-to-square clear-sm"></i> {{t('loads.editLoad')}}</button>
             <button
                 v-if="load.status !== 'Draft'"
                 class="btn-primary-sm"
                 @click="openProposalsModal"
                 data-toggle="modal" 
                 data-target="#proposalsModal"
-            >#{{ load.no_of_proposals }} Ofertas</button>
+            >#{{ load.no_of_proposals }} {{t('loads.offers')}}</button>
         </div>
         <div class="btn-row" v-if="!readOnly && authStore.user?.permissions === 'role_carrier'">
             <button
@@ -208,7 +206,7 @@
                 data-toggle="modal" 
                 data-target="#makeProposalModal"
                 @click="event => $emit('set-load')"
-            >Hacer oferta</button>
+            >{{t('loads.makeOffer')}}</button>
             <!-- <button
                 class="btn-primary-sm"
                 @click="makeCall('+529889662382')"
diff --git a/src/components/CreateLocationModal.vue b/src/components/CreateLocationModal.vue
index 3dd7ce3..be82cee 100644
--- a/src/components/CreateLocationModal.vue
+++ b/src/components/CreateLocationModal.vue
@@ -100,7 +100,7 @@
 			}
 
             let result = 'error';
-            let action = 'Creado';
+            let action = t('directory.msgLocationCreated');
             loading.value = true;
 
             const localData = {
@@ -110,18 +110,18 @@
             if(props.location !== null) {
                 // Se actualiza
                 result = await companyStore.updateLocationCompany(props.location._id, branchData, localData);
-                action = 'actualizada';
+                action = t('directory.msgLocationUpdate');
             } else {
                 // Se crea
                 result = await companyStore.createLocationCompany(branchData, localData);
-                action = 'creada';
+                action = t('directory.msgLocationCreated');
             }
 
             loading.value = false;
             if(result === 'success') {
                 document.getElementById('btnCloseLocationFormModal').click();
                 Swal.fire({
-                    title: `<strong>Locación ${action} con éxito!</strong>`,
+                    title: `<strong>${action}</strong>`,
                     icon: 'success'
                 })
             } else {
@@ -135,12 +135,12 @@
 
     const validations = () => {
         errors.value = {
-            branch_name: locationForm.branch_name.length < 2 ? 'Ingrese nombre' : null,
-            address: locationForm.address.length <= 4 ? 'Ingrese dirección valida' : null,
-            city: locationForm.city.length <= 0 ? 'Seleccione municipio' : null,
-            state: locationForm.state.length < 0 ? 'Seleccione estado' : null,
-            location_type: locationForm.location_type.length <= 0 ? 'Seleccione el tipo de directorio' : null,
-            zipcode: locationForm.zipcode.length < 5 ? 'Ingrese código postal valido' : null,
+            branch_name: locationForm.branch_name.length < 2 ? t('errors.nameRequired') : null,
+            address: locationForm.address.length <= 4 ? t('errors.address') : null,
+            city: locationForm.city.length <= 0 ? t('errors.city') : null,
+            state: locationForm.state.length <= 0 ? t('errors.state') : null,
+            location_type: locationForm.location_type.length <= 0 ? t('errors.directoryType') : null,
+            zipcode: locationForm.zipcode.length < 5 ? t('errors.zipcode') : null,
         };
     }
 </script>
@@ -162,51 +162,51 @@
                 <div class="modal-body form-content px-5">
                     <form @submit.prevent="saveLocation" autocomplete="off" method="post" ref="formRef">
                         <CustomInput
-                            label="Nombre de la locación*"
+                            :label="t('directory.name') + '*'"
                             name="name"
                             v-model:field="locationForm.branch_name"
                             :filled="false"
                             :error="errors.branch_name"
                         />
                         <CustomInput
-                            label="Dirección*"
+                            :label="t('directory.address') + '*'"
                             name="address"
                             v-model:field="locationForm.address"
                             :filled="false"
                             :error="errors.address"
                         />
                         <div class="mb-4 mt-3">
-                            <label class="custom-label">Estado de la locación*</label>
+                            <label class="custom-label">{{ t('directory.state')}}*</label>
                             <States
                                 v-model="locationForm.state" 
                             />
                             <span class="error-msg" v-if="errors.state">{{ errors.state }}</span>
                         </div>
                         <div class="mb-4 mt-3">
-                            <label class="custom-label">Municipio de la locación*</label>
+                            <label class="custom-label">{{ t('directory.city')}}*</label>
                             <Cities
                                 v-model="locationForm.city" 
                             />
                             <span class="error-msg" v-if="errors.city">{{ errors.city }}</span>
                         </div>
                         <div class="d-flex flex-column mb-4">
-                            <label class="custom-label" for="role">Tipo de directorio:</label>
+                            <label class="custom-label" for="role">{{ t('directory.typeDirectory')}}</label>
                             <select 
                                 class="custom-input-light"
                                 name="type" 
                                 id="type" 
                                 v-model="locationForm.location_type"
                             >
-                                <option disabled value="">-- Seleccionar --</option>
+                                <option disabled value="">-- {{ t('labels.select')}} --</option>
                                 <!-- <option value="owner">Dueño</option> -->
-                                <option value="load">Carga</option>
-                                <option value="download">Descarga</option>
-                                <option value="both">Ambas</option>
+                                <option value="load">{{ t('labels.load')}}</option>
+                                <option value="download">{{ t('labels.download')}}</option>
+                                <option value="both">{{ t('labels.both')}}</option>
                             </select>
                             <span class="error-msg" v-if="errors.location_type">{{ errors.location_type }}</span>
                         </div>
                         <CustomInput
-                            label="Código postal"
+                            :label="t('directory.zipCode')"
                             name="zipcode"
                             type="number"
                             v-model:field="locationForm.zipcode"
@@ -214,28 +214,28 @@
                             :error="errors.zipcode"
                         />
                         <CustomInput
-                            label="Teléfono"
+                            :label="t('labels.phone')"
                             name="phone"
                             type="number"
                             v-model:field="locationForm.phone"
                             :filled="false"
                         />
                         <div class="mb-4 mt-3">
-                            <label class="custom-label">Segmento</label>
+                            <label class="custom-label">{{ t('global.segments') }}</label>
                             <Segments
                                 v-model="locationForm.categories" 
                                 :multiple="true"
                             />
                         </div>
                         <div class="mb-4 mt-3">
-                            <label class="custom-label">Tipo de transporte</label>
+                            <label class="custom-label">{{ t('directory.typeTruck') }}</label>
                             <TruckTypes
                                 v-model="locationForm.truck_type" 
                                 :multiple="true"
                             />
                         </div>
                         <div class="d-flex flex-column">
-                            <label class="custom-label" for="description">Información adicional:</label>
+                            <label class="custom-label" for="description">{{ t('directory.additionalInfoLocation') }}</label>
                             <textarea 
                                 class="custom-input-light"
                                 name="description" 
@@ -248,7 +248,7 @@
                             <Spiner v-if="loading"/>
                             <button 
                                 v-else
-                                class="btn btn-dark" type="submit">Guardar</button>
+                                class="btn btn-dark" type="submit">{{ t('buttons.save') }}</button>
                         </div> 
                     </form>
                 </div>
@@ -257,7 +257,7 @@
                         type="button" 
                         class="btn btn-dark" 
                         @click="$emit('reset-location')"
-                        data-dismiss="modal">Cerrar</button>
+                        data-dismiss="modal">{{ t('buttons.close') }}</button>
                 </div>
             </div>
         </div>
diff --git a/src/components/FormLoadModal.vue b/src/components/FormLoadModal.vue
index 70fe09f..1c73371 100644
--- a/src/components/FormLoadModal.vue
+++ b/src/components/FormLoadModal.vue
@@ -14,6 +14,8 @@
     import Swal from 'sweetalert2';
     import { useNotificationsStore } from '../stores/notifications';
     import { useCompanyStore } from '../stores/company';
+    import { useI18n } from 'vue-i18n';
+    import { computed } from 'vue';
 
     const loadStore = useLoadsStore();
     const notyStore = useNotificationsStore();
@@ -37,6 +39,8 @@
     const checkLocationDownload = ref(false);
     const locationLoadSelected = ref(null)
     const locationDownloadSelected = ref(null)
+    const originRef = ref('')
+    const destinationRef = ref('')
 
     const errors = ref({
         segment: null,
@@ -48,6 +52,7 @@
     });
 
     const mapKey = import.meta.env.VITE_MAP_KEY;
+    const { t } = useI18n()
 
     
     const clearLoad = () => {
@@ -120,6 +125,7 @@
                 originCoords.value = await geocodeAddress(startLocation.value);
             }
         })
+        
 
         watch(destination, async() => {
             if(destination.city && destination.state) {
@@ -294,12 +300,12 @@
         const resp = await updateLoad(loadData);
         if(resp === 'success') {
             notyStore.show = 'true';
-            notyStore.text = 'Carga guardada!'
+            notyStore.text = t('loads.msgSave');
             document.getElementById('btnCloseFormLoadModal').click();
         } else {
             Swal.fire({
                 title: "Error!",
-                text: "No se pudo guardar carga, intente más tarde",
+                text: t('loads.msgNotSave'),
                 icon: "error"
             });
         }
@@ -307,12 +313,12 @@
 
     const validations = () => {
         errors.value = {
-            segment: (!formLoad.segment || formLoad.segment?.length <= 0) ? 'Seleccione segmento' : null,
-            truckType: formLoad.truckType ? null : 'Seleccione tipo de transporte',
-            cityOrigin: origin.city ? null : 'Seleccione ciudad',
-            stateOrigin: origin.state ? null : 'Seleccione estado',
-            cityDestination: destination.city ? null : 'Seleccione ciudad',
-            stateDestination: destination.state ? null : 'Seleccione estado',
+            segment: (!formLoad.segment || formLoad.segment?.length <= 0) ? t('errors.segment') : null,
+            truckType: formLoad.truckType ? null : t('errors.truck'),
+            cityOrigin: origin.city ? null : t('errors.city'),
+            stateOrigin: origin.state ? null : t('errors.state'),
+            cityDestination: destination.city ? null : t('errors.city'),
+            stateDestination: destination.state ? null : t('errors.state'),
         };
 
     }
@@ -335,12 +341,12 @@
                     const resp = await updateLoad(loadData);
                     if(resp === 'success') {
                         notyStore.show = 'true';
-                        notyStore.text = 'Carga publicada!'
+                        notyStore.text = t('loads.msgPost')
                         document.getElementById('btnCloseFormLoadModal').click();
                     } else {
                         Swal.fire({
                             title: "Error!",
-                            text: "No se pudo publicar carga, intente más tarde",
+                            text: t('loads.msgNotPost'),
                             icon: "error"
                         });
                     }
@@ -349,6 +355,11 @@
         }, 200)
         
     }
+
+    const title = computed(() => loadStore.currentLoad == null 
+        ? t('loads.create')
+        : t('loads.edit')
+    )
 </script>
 
 <template>
@@ -356,7 +367,7 @@
         <div class="modal-dialog modal-fullscreen modal-dialog-centered" role="document">
             <div class="modal-content">
             <div class="modal-header">
-                <h2 class="title mt-2 mb-3">Crear nueva carga</h2>
+                <h2 class="title mt-2 mb-3">{{ title }}</h2>
                 <button 
                     id="btnCloseFormLoadModal" 
                     type="button" 
@@ -372,21 +383,21 @@
                     <div class="form-box">
                         <div class="form-section">
                             <div class="mb-4 mt-3">
-                                <label class="custom-label">Segmento*</label>
+                                <label class="custom-label">{{ t('global.segment') }}*</label>
                                 <Segments
                                     v-model="formLoad.segment" 
                                 />
                                 <span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span>
                             </div>
                             <div class="mb-4 mt-3">
-                                <label class="custom-label">Tipo de transporte*</label>
+                                <label class="custom-label">{{ t('directory.typeTruck') }}*</label>
                                 <TruckTypes
                                     v-model="formLoad.truckType" 
                                 />
                                 <span class="error-msg" v-if="submited && errors.truckType">{{ errors.truckType }}</span>
                             </div>
                             <Custominput
-                                label="Fecha de carga*"
+                                :label="t('loads.dateLoad') + '*'" 
                                 type="date"
                                 :filled="false"
                                 name="date-load"
@@ -395,7 +406,7 @@
                                 v-model:field="formLoad.dateLoad"
                             />
                             <Custominput
-                                label="Fecha de descarga*"
+                                :label="t('loads.dateDownload') + '*'"
                                 type="date"
                                 :filled="false"
                                 name="date-download"
@@ -404,7 +415,7 @@
                                 v-model:field="formLoad.dateDownload"
                             />
                             <Custominput
-                                label="Peso de la carga en Kg*"
+                                :label="t('loads.labelWeight') + '*'"
                                 type="number"
                                 :filled="false"
                                 name="weight"
@@ -415,27 +426,27 @@
                         </div>
                         <div class="form-section">
                             <div class="mb-4 mt-3">
-                                <label class="custom-label">Productos</label>
+                                <label class="custom-label">{{ t('loads.product') }}</label>
                                 <Products
                                     v-model="formLoad.terms" 
                                 />
                             </div>
                             <Custominput
-                                label="Precio en MXN"
+                                :label="t('loads.labelPrice')"
                                 type="Number"
                                 :filled="false"
                                 name="price"
                                 v-model:field="formLoad.price"
                             />
                             <Custominput
-                                label="Notas"
+                                :label="t('loads.notes')"
                                 type="text"
                                 :filled="false"
                                 name="notes"
                                 v-model:field="formLoad.notes"
                             />
                             <Custominput
-                                label="Publicación hecha por"
+                                :label="t('loads.postBy')"
                                 type="text"
                                 :filled="false"
                                 :readonly="true"
@@ -446,70 +457,70 @@
                     </div>
                     <div class="form-box">
                         <div class="form-section">
-                            <h2>Dirección de origen</h2>
+                            <h2>{{ t('loads.addressOrigin') }}</h2>
 
                             <div class="form-check my-4" v-if="loadingLocations === false">
                                 <input class="form-check-input chekmark" type="checkbox" id="directoryOrigin" v-model="checkLocationLoad">
                                 <label class="form-check-label custom-label" for="directoryOrigin">
-                                    Usar locaciones registradas 
+                                    {{ t('loads.checkAddress') }}
                                 </label>
                             </div>
                             <div class="d-flex flex-column mb-4" v-if="checkLocationLoad">
-                                <label class="custom-label mb-2" for="locationLoad">Locaciones registradas:</label>
+                                <label class="custom-label mb-2" for="locationLoad">{{ t('loads.locationsRegistered') }}:</label>
                                 <select 
                                     class="custom-input-light"
                                     name="locationLoad" 
                                     id="locationLoad" 
                                     v-model="locationLoadSelected"
                                 >
-                                    <option disabled value="">-- Seleccionar locación --</option>
+                                    <option disabled value="">-- {{ t('loads.selectedLocation') }} --</option>
                                     <option v-for="loc in companyStore.locationsLoads" :value="loc">{{ loc.branch_name }}</option>
                                 </select>
                             </div>
                             <Custominput
-                                label="Nombre locación de carga"
+                                :label="t('loads.addressNameLoad')"
                                 type="text"
                                 :filled="false"
                                 name="name-location-origin"
                                 v-model:field="origin.locationName"
                             />
                             <Custominput
-                                label="Dirección"
+                                :label="t('directory.address')"
                                 type="text"
                                 :filled="false"
                                 name="address-origin"
                                 v-model:field="origin.address"
                             />
                             <div class="mb-4 mt-3">
-                                <label class="custom-label">Ciudad*</label>
+                                <label class="custom-label">{{ t('global.city') }}*</label>
                                 <Cities
                                     v-model="origin.city" 
                                 />
                                 <span class="error-msg" v-if="submited && errors.cityOrigin">{{ errors.cityOrigin }}</span>
                             </div>
                             <div class="mb-4 mt-3">
-                                <label class="custom-label">Estado*</label>
+                                <label class="custom-label">{{ t('global.state') }}*</label>
                                 <States
                                     v-model="origin.state" 
                                 />
                                 <span class="error-msg" v-if="submited && errors.stateOrigin">{{ errors.stateOrigin }}</span>
                             </div>
                             <Custominput
-                                label="País"
+                                :label="t('global.country')"
                                 type="text"
                                 :filled="false"
                                 name="country-origin"
                                 v-model:field="origin.country"
                             />
                             <Custominput
-                                label="Código Postal"
+                                :label="t('directory.zipCode')"
                                 type="text"
                                 :filled="false"
                                 name="postalCode-origin"
                                 v-model:field="origin.postalCode"
                             />
                             <Custominput
-                                label="Punto de referencia"
+                                :label="t('global.ref')"
                                 type="text"
                                 :filled="false"
                                 name="ref-origin"
@@ -517,69 +528,69 @@
                             />
                         </div>
                         <div class="form-section">
-                            <h2>Dirección de destino</h2>
+                            <h2>{{ t('loads.addressDestination') }}</h2>
                             <div class="form-check my-4" v-if="loadingLocations === false">
                                 <input class="form-check-input chekmark" type="checkbox" id="directoryDestination" v-model="checkLocationDownload">
                                 <label class="form-check-label custom-label" for="directoryDestination">
-                                    Usar locaciones registradas 
+                                    {{ t('loads.checkAddress') }}
                                 </label>
                             </div>
                             <div class="d-flex flex-column mb-4" v-if="checkLocationDownload">
-                                <label class="custom-label mb-2" for="locationDownload">Locaciones registradas:</label>
+                                <label class="custom-label mb-2" for="locationDownload">{{ t('loads.locationsRegistered') }}:</label>
                                 <select 
                                     class="custom-input-light"
                                     name="locationDownload" 
                                     id="locationDownload" 
                                     v-model="locationDownloadSelected"
                                 >
-                                    <option disabled value="">-- Seleccionar locación --</option>
+                                    <option disabled value="">-- {{ t('loads.selectedLocation') }} --</option>
                                     <option v-for="loc in companyStore.locationsLoads" :value="loc">{{ loc.branch_name }}</option>
                                 </select>
                             </div>
                             <Custominput
-                                label="Nombre locación de descarga"
+                                :label="t('loads.addressNameDownload')"
                                 type="text"
                                 :filled="false"
                                 name="name-location-destination"
                                 v-model:field="destination.locationName"
                             />
                             <Custominput
-                                label="Dirección"
+                                :label="t('directory.address')"
                                 type="text"
                                 :filled="false"
                                 name="address-destination"
                                 v-model:field="destination.address"
                             />
                             <div class="mb-4 mt-3">
-                                <label class="custom-label">Ciudad*</label>
+                                <label class="custom-label">{{t('global.city')}}*</label>
                                 <Cities
                                     v-model="destination.city" 
                                 />
                                 <span class="error-msg" v-if="submited && errors.cityDestination">{{ errors.cityDestination }}</span>
                             </div>
                             <div class="mb-4 mt-3">
-                                <label class="custom-label">Estado*</label>
+                                <label class="custom-label">{{t('global.state')}}*</label>
                                 <States
                                     v-model="destination.state" 
                                 />
                                 <span class="error-msg" v-if="submited && errors.stateDestination">{{ errors.stateDestination }}</span>
                             </div>
                             <Custominput
-                                label="País"
+                                :label="t('global.country')"
                                 type="text"
                                 :filled="false"
                                 name="country-destination"
                                 v-model:field="destination.country"
                             />
                             <Custominput
-                                label="Código Postal"
+                                :label="t('directory.zipCode')"
                                 type="text"
                                 :filled="false"
                                 name="postalCode-destination"
                                 v-model:field="destination.postalCode"
                             />
                             <Custominput
-                                label="Punto de referencia"
+                                :label="t('global.ref')"
                                 type="text"
                                 :filled="false"
                                 name="ref-destination"
@@ -627,17 +638,17 @@
                         type="button" 
                         class="btn btn-dark" 
                         @click="clearLoad"
-                        data-dismiss="modal">Cerrar</button>
+                        data-dismiss="modal">{{ t('buttons.close') }}</button>
                     <button 
                         type="button" 
                         class="btn btn-dark" 
                         @click="handleSave"
-                    >Guardar</button>
+                    >{{ t('buttons.save') }}</button>
                     <button 
                         type="submit" 
                         @click.prevent="handlePostLoad"
                         class="btn-primary-sm radius-sm" 
-                    >Publicar</button>
+                    >{{ t('buttons.post') }}</button>
                 </div>
             </div>
             </div>
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
index 56625a2..168a56a 100644
--- a/src/components/Pagination.vue
+++ b/src/components/Pagination.vue
@@ -34,7 +34,7 @@ import { onMounted, ref } from 'vue';
 
 <template>
     <div class="pagination" v-if="totalPage > 1">
-        <h4>Paginación</h4>
+        <h4>{{$t('global.pagination')}}</h4>
         <div class="box-pages" v-if="totalPage > 1">
             <div 
                 v-for="p in totalPage"
diff --git a/src/i18n/en.js b/src/i18n/en.js
index ecd68d1..2292090 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -48,6 +48,7 @@ const en = {
         select: 'Select',
         additionalInformation: 'Additional information',
         writeHere: 'Write here',
+        create: 'Create',
     },
     buttons: {
         enter: "Enter here",
@@ -66,7 +67,8 @@ const en = {
         edit: "Edit",
         delete: "Delete",
         cancel: "Cancel",
-        add: 'Add'
+        add: 'Add',
+        post: 'Post'
     },
     errors: {
         requireds: "All fields required",
@@ -80,11 +82,19 @@ const en = {
         states: 'Select at least one state',
         cities: 'Select at least one city',
         trucks: 'Select at least one type of transport',
+        truck: 'Select type of transport',
+        segment: 'Select segment',
         name: 'Enter valid name(s)',
         lastname: 'Enter valid last name(s)',
         phone: 'Enter valid phone number',
         generic: "Something went wrong, try again later",
-        msgTitleNotDel: 'Not removed!'
+        msgTitleNotDel: 'Not removed!',
+        nameRequired: 'Enter name',
+        address: 'Enter valid address',
+        city: 'Select municipality',
+        state: 'Select state',
+        directoryType: 'select directory type',
+        zipcode: 'Enter valid zip code',
     },
     messages: {
         sendCode: 'We send you a code to the email, entered!',
@@ -128,8 +138,14 @@ const en = {
         calculator: 'Calculator',
         cities: 'Cities',
         states: 'States',
+        city: 'City',
+        state: 'State',
+        ref: 'Reference point',
+        country: 'Country',
         segments: 'Segments',
-        notification: "Notification"
+        segment: 'Segment',
+        notification: "Notification",
+        pagination: 'Pagination'
     },
     login: {
         title: 'Sign in',
@@ -178,7 +194,7 @@ const en = {
         name: 'Location name',
         address: 'Address',
         state: 'State of the location',
-        city: 'Municipality of the location',
+        city: 'City of the location',
         typeDirectory: 'Type of directory',
         zipCode: 'Zip Code',
         typeTruck: 'Type of transport',
@@ -190,7 +206,56 @@ const en = {
         loadingDel: 'Deleting location',
         msgTitleDel: 'Location deleted!',
         msgDel: 'Your location has been successfully deleted.',
-        msgNotDel: 'Your location could not be deleted, try again later.'
+        msgNotDel: 'Your location could not be deleted, try again later.',
+        msgEmpty: 'No locations added',
+        msgLocationUpdate: 'Location updated successfully!',
+        msgLocationCreated: 'Location created successfully!'
+    },
+    loads: {
+        title: 'My published loads',
+        history: 'History',
+        querySearch: 'Name of person who posted',
+        empty: 'No loads added',
+        origin: 'Origin',
+        destination: 'Destination',
+        postStatus: 'Post status', 
+        loadStatus: 'Load status',
+        truckType: 'Truck type',
+        weight: 'Weight',
+        dateLoad: 'Load date',
+        dateDownload: 'Download date',
+        product: 'Product',
+        cost: 'Actual cost',
+        loadCode: 'Load code',
+        postBy: 'Post made by',
+        editLoad: 'Edit load',
+        offers: 'Offers',
+        makeOffer: 'Make offer',
+        note: 'Additional notes',
+        create: 'Create new load',
+        edit: 'Edit load',
+        labelPrice: 'Price in MXN',
+        labelWeight: 'Weight of the load in Kg',
+        notes: 'Notes',
+        addressOrigin: 'Origin address',
+        addressDestination: 'Destination address',
+        checkAddress: 'Use registered locations',
+        addressNameLoad: 'Load location name',
+        addressNameDownload: 'Download location name',
+        locationsRegistered: 'Registered locations',
+        selectedLocation: 'Select location',
+
+        titleDel: 'Delete load!',
+        textDel: 'Are you sure to delete this load?',
+        loadingDel: 'Removing load',
+        msgTitleDel: 'Load removed!',
+        msgDel: 'Your load has been successfully deleted.',
+        msgNotDel: '"Your load could not be deleted, please try later.',
+
+        msgSave: 'Load saved!',
+        msgNotSave: '"Could not save upload, try later',
+        msgPost: 'Load posted!',
+        msgNotPost: 'Could not post load, please try later'
     }
 };
 
diff --git a/src/i18n/es.js b/src/i18n/es.js
index e3f0352..7760e71 100644
--- a/src/i18n/es.js
+++ b/src/i18n/es.js
@@ -50,6 +50,7 @@ const es = {
         select: 'Seleccionar',
         additionalInformation: 'Información adicional',
         writeHere: 'Escribe aqui',
+        create: 'Crear',
     },
     buttons: {
         enter: "Ingresa aqui",
@@ -68,7 +69,8 @@ const es = {
         edit: "Editar",
         delete: "Eliminar",
         cancel: "Cancelar",
-        add: 'Agregar'
+        add: 'Agregar',
+        post: 'Publicar'
     },
     errors: {
         requireds: 'Todos los campos con obligatorios',
@@ -82,11 +84,20 @@ const es = {
         states: 'Selecciona al menos un estado',
         cities: 'Selecciona al menos un municipio',
         trucks: 'Selecciona al menos un tipo de transporte',
+        truck: 'Seleccione tipo de transporte',
+        segment: 'Seleccione segmento',
         name: 'Ingresa nombre(s) valido',
         lastname: 'Ingresa apellido(s) valido',
         phone: 'Ingresa teléfono valido',
         generic: "Algo salio mal, intente más tarde",
         msgTitleNotDel: 'No eliminado!',
+        nameRequired: 'Ingrese nombre',
+        address: 'Ingrese dirección valida',
+        city: 'Seleccione ciudad',
+        state: 'Seleccione estado',
+        directoryType: 'seleccione el tipo de directorio',
+        zipcode: 'Ingrese código postal valido',
+
     },
     messages: {
         sendCode: 'Te enviamos un código al correo, ingresado!',
@@ -130,8 +141,14 @@ const es = {
         calculator: 'Calculadora',
         cities: 'Ciudades',
         states: 'Estados',
+        city: 'Ciudad',
+        state: 'Estado',
+        ref: 'Punto de referencia',
+        country: 'País',
         segments: 'Segmentos',
+        segment: 'Segmento',
         notification:  "Notificación",
+        pagination: 'Paginación',
     },
     login: {
         title: 'Iniciar sesión',
@@ -186,13 +203,63 @@ const es = {
         typeTruck: 'Tipo de transporte',
         typeTruckNeed: 'Tipos de camiones que se necesitan',
         additionalInfoLocation: 'Información adicional de la locación',
+        labelPrice: 'Precio en MXN',
+        labelWeight: 'Peso de la carga en Kg',
+        notes: 'Notas',
 
         titleDel: 'Eliminar Locación!',
         textDel: '¿Estás seguro de eliminar este locación?',
         loadingDel: 'Eliminando locación',
         msgTitleDel: 'Locación eliminado!',
         msgDel: 'Tu locación ha sido eliminado exitosamente.',
-        msgNotDel: 'Tu locación no se pudo eliminar, intente más tarde.'
+        msgNotDel: 'Tu locación no se pudo eliminar, intente más tarde.',
+        msgEmpty: 'No hay ubicaciones agregadas',
+        msgLocationUpdate: 'Locación actualizada con éxito!',
+        msgLocationCreated: 'Locación creada con éxito!'
+    },
+    loads: {
+        title: 'Mis cargas publicadas',
+        history: 'Historial',
+        querySearch: 'Nombre de la persona quien publica',
+        empty: 'No hay cargas agregadas',
+        origin: 'Origen',
+        destination: 'Destino',
+        postStatus: 'Status de la publicación', 
+        loadStatus: 'Status de la carga',
+        truckType: 'Tipo de camión',
+        weight: 'Peso',
+        dateLoad: 'Fecha de carga',
+        dateDownload: 'Fecha de descarga',
+        product: 'Producto',
+        cost: 'Costo real',
+        loadCode: 'Código de carga',
+        postBy: 'Publicación hecha por',
+        editLoad: 'Editar carga',
+        offers: 'Ofertas',
+        makeOffer: 'Hacer oferta',
+        note: 'Notas adicionales',
+        create: 'Crear nueva carga',
+        edit: 'Editar carga',
+        addressOrigin: 'Dirección de origen',
+        addressDestination: 'Dirección de destino',
+        checkAddress: 'Usar locaciones registradas',
+        addressNameLoad: 'Nombre locación de carga',
+        addressNameDownload: 'Nombre locación de descarga',
+        locationsRegistered: 'Locaciones registradas',
+        selectedLocation: 'Seleccionar locación',
+
+        titleDel: 'Eliminar carga!',
+        textDel: '¿Estás seguro de eliminar esta carga?',
+        loadingDel: 'Eliminando carga',
+        msgTitleDel: 'Carga eliminada!',
+        msgDel: 'Tu carga ha sido eliminada exitosamente.',
+        msgNotDel: '"Tu carga no se pudo eliminar, intente más tarde.',
+
+        msgSave: 'Carga guardada!',
+        msgNotSave: '"No se pudo guardar carga, intente más tarde',
+        msgPost: 'Carga publicada!',
+        msgNotPost: 'No se pudo publicar carga, intente más tarde'
+
     }
 };
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ceaf965..8f8dfd1 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -38,13 +38,17 @@
 
   const getData = async() => {
     loading.value = true;
-    if(user.value?.permissions === "role_carrier") {
-      await loads.getProposalCompanyAll();
-    } else {
-      await loads.getLoadsAll();
+    try {
+      if(user.value?.permissions === "role_carrier") {
+        await loads.getProposalCompanyAll();
+      } else {
+        await loads.getLoadsAll();
+      }
+      dataMap();
+      loading.value = false;
+    } catch (error) {
+      loading.value = false;
     }
-    dataMap();
-    loading.value = false;
   }
 
 
diff --git a/src/views/LoadsPublishedView.vue b/src/views/LoadsPublishedView.vue
index aa6b5e2..52c06a2 100644
--- a/src/views/LoadsPublishedView.vue
+++ b/src/views/LoadsPublishedView.vue
@@ -8,6 +8,7 @@
     import ProposalsModal from '../components/ProposalsModal.vue';
     import CardEmpty from '../components/CardEmpty.vue';
     import Pagination from '../components/Pagination.vue';
+    import { useI18n } from 'vue-i18n';
 
     const loadStore = useLoadsStore();
     const loading = ref(false);
@@ -22,6 +23,8 @@
 
     ///loads?company=64fa70c130d2650011ac4f3a&elements=3&page=0&status[$ne]=Closed&$sort%5BcreatedAt%5D=-1
 
+    const { t } = useI18n();
+
     watch(query, () => {
         filterQuery.value.page = "page="+ 0;
         filterQuery.value.limit = "elements="+ 100;
@@ -100,26 +103,26 @@
     <FormLoadModal v-if="loadStore.openModalEdit"/>
     <ProposalsModal v-if="loadStore.openProposalsModal"/>
     <div>
-        <h2 class="title mb-5">Mis cargas publicadas</h2>
+        <h2 class="title mb-5">{{ t('loads.title') }}</h2>
         <div>
             <div class="box-filters">
                 <div class="box-search">
-                    <input class="form-control custom-search" type="search" name="" placeholder="Nombre de la persona que publica" id="" @:input="search()" v-model="query" aria-label="Search">
+                    <input class="form-control custom-search" type="search" name="" :placeholder="t('loads.querySearch')" id="" @:input="search()" v-model="query" aria-label="Search">
                 </div>
                 <button 
                     class="btn btn-danger bg-dark" type="button" @click="clearFilter">
                     <i class="fa-solid fa-arrow-rotate-right"></i>
-                    <span class="clear-sm"> Reset</span><span class="clear-md"> filtros</span>
+                    <span class="clear-sm"> Reset </span><span class="clear-md"> {{ t('labels.filters').toLowerCase() }}</span>
                 </button>
                 <button
                     @click="loadHistory"
                     class="btn-primary-sm radius-sm"
-                ><i class="fa-solid fa-clock-rotate-left"></i><span class="clear-sm"> Historial</span><span class="clear-md"> de cargas</span></button>
+                ><i class="fa-solid fa-clock-rotate-left"></i> <span class="clear-sm"> {{ t('loads.history') }}</span></button>
                 <button
                     class="btn-primary-sm radius-sm"
                     data-toggle="modal" data-target="#formLoadModal"
                     @click="loadStore.openModalEdit = true"
-                ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Crear</span><span class="clear-md"> carga</span></button>
+                ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> {{ t('labels.create') }}</span> <span class="clear-md"> {{ t('labels.load').toLowerCase() }}</span></button>
             </div>
             <Spiner v-if="loading"/>
             <div v-else>
@@ -129,7 +132,7 @@
                     :key="load._id"
                     :load="load" 
                 />
-                <CardEmpty v-else text="No hay cargas agregadas"/>
+                <CardEmpty v-else :text="t('loads.empty')"/>
                 <Pagination
                     :limit="limit"
                     :total="loadStore.loadsTotal"
@@ -150,7 +153,9 @@
     }
 
     .box-search {
-        width: 40%;
+        /* width: 40%; */
+        display: flex;
+        flex: 1;
     }
 
     .radius-sm{
diff --git a/src/views/LocationsView.vue b/src/views/LocationsView.vue
index 3200957..d62a843 100644
--- a/src/views/LocationsView.vue
+++ b/src/views/LocationsView.vue
@@ -16,9 +16,10 @@
     const query = ref('');
     const locationCurrent = ref(null);
     const openModal = ref(false);
-    const { t } = useI18n();
+    const { t, locale } = useI18n();
     // const typeDirection = ref(null)
     const typeDirection = ref({value: 'both', label: t('labels.both')})
+    const optionsFilter = ref([]);
     const openPopup = ref(false);
 
 
@@ -35,9 +36,22 @@
         filterQuery.value.limit = "elements=" + limit;
         filterQuery.value.page = "page=" + 0;
         await companyStore.getLocationsCompany(filterQuery.value, false)
+        optionsFilter.value = [
+            {value: 'both',label: t('labels.both')},
+            {value: 'load',label: t('labels.load')},
+            {value: 'download',label: t('labels.download')}
+        ]
         loading.value = false;
     }
 
+    watch(locale, () => {
+        optionsFilter.value = [
+            {value: 'both',label: t('labels.both')},
+            {value: 'load',label: t('labels.load')},
+            {value: 'download',label: t('labels.download')}
+        ]
+    })
+
     const getLocationsByPage = async(data) => {
         loading.value = true;
         filterQuery.value.company = "company="+ localStorage.getItem('id');
@@ -107,12 +121,6 @@
         openPopup.value = false
     }
 
-    const optionsFilter = [
-        {value: 'both',label: t('labels.both')},
-        {value: 'load',label: t('labels.load')},
-        {value: 'download',label: t('labels.download')}
-    ]
-
     const closePopup = () => {
         openPopup.value = false
     }
@@ -171,7 +179,7 @@
                 :location="location" 
                 @set-location="handleSetCurrentLocation(location)"
             />
-            <CardEmpty v-else text="No hay ubicaciones agregadas"/>
+            <CardEmpty v-else :text="t('directory.msgEmpty')"/>
             <Pagination
                 :limit="limit"
                 :total="companyStore.locationsTotal"