translations users & directory

src/components/CardLocation.vue

@@ -2,6 +2,7 @@
     import Swal from 'sweetalert2';
     import { useCompanyStore } from '../stores/company';
     import { useAuthStore } from '../stores/auth';
+    import { useI18n } from 'vue-i18n';
 
     const props = defineProps({
         location: {
@@ -14,21 +15,22 @@
     
     const companyStore = useCompanyStore();
     const authStore = useAuthStore();
+    const { t } = useI18n();
 
     const handleDeleteLocation = async() => {
         Swal.fire({
-            title: 'Eliminar Locación!',
+            title: t('directory.titleDel'),
-            text: '¿Estás seguro de eliminar este locación?',
+            text: t('directory.textDel'),
             icon: 'warning',
             showCancelButton: true,
             cancelButtonColor: "#d33",
-            confirmButtonText: 'Eliminar',
+            confirmButtonText:  t('buttons.delete'),
-            cancelButtonText: 'Cancelar',
+            cancelButtonText:  t('buttons.cancel'),
         }).then(async(result) => {
             if(result.isConfirmed) {
                 Swal.fire({
-                    title: 'Por favor espere!',
+                    title: t('messages.loading'),
-                    html: 'Eliminando locación...',// add html attribute if you want or remove
+                    html: t('directory.loadingDel') + '..',// add html attribute if you want or remove
                     allowOutsideClick: false,
                     didOpen: () => {
                         Swal.showLoading()
@@ -41,14 +43,14 @@
                 
                 if(resp != null) {
                     Swal.fire({
-                        title: "Locación eliminado!",
+                        title: t('directory.msgTitleDel'),
-                        text: "Tu locación ha sido eliminado exitosamente.",
+                        text: t('directory.msgDel'),
                         icon: "success"
                     });
                 } else {
                     Swal.fire({
-                        title: "No eliminado!",
+                        title: t('errors.msgTitleNotDel'),
-                        text: "Tu locación no se pudo eliminar, intente más tarde.",
+                        text: t('directory.msgNotDel'),
                         icon: "error"
                     });
                 }
@@ -62,12 +64,12 @@
 <template>
     <div class="card-fixed card-location">
         <div>
-            <p><span>Nombre de la locación de carga:</span> {{location.branch_name}}</p>
+            <p><span>{{ t('directory.name') }}:</span> {{location.branch_name}}</p>
-            <p><span>Dirección:</span> <template v-if="location.address">{{location.address}}, </template><template v-if="location.city">{{location.city}}, </template><template v-if="location.state">{{location.state}}</template></p>
+            <p><span>{{ t('directory.address') }}:</span> <template v-if="location.address">{{location.address}}, </template><template v-if="location.city">{{location.city}}, </template><template v-if="location.state">{{location.state}}</template></p>
-            <p><span>Teléfono:</span> {{location.phone}}</p>
+            <p><span>{{ t('labels.phone') }}:</span> {{location.phone}}</p>
-            <p><span>Tipos de camiones que se necesitan:</span> {{location.truck_type?.map((e) => e).join(', ')}}</p>
+            <p><span>{{ t('directory.typeTruckNeed') }}:</span> {{location.truck_type?.map((e) => e).join(', ')}}</p>
-            <p><span>Segmento:</span> {{location.categories?.map((e) => e.name).join(', ')}}</p>
+            <p><span>{{ t('global.segments') }}:</span> {{location.categories?.map((e) => e.name).join(', ')}}</p>
-            <p v-if="location.description"><span>Información adicional de la locación de carga:</span></p>
+            <p v-if="location.description"><span>{{ t('directory.additionalInfoLocation') }}:</span></p>
             <div v-if="location.description" class="box-note mb-4">
                 {{ location.description }}
             </div>
@@ -77,14 +79,14 @@
                 class="btn btn-dark radius-sm"
                 @click="handleDeleteLocation"
             >
-                <i class="fa-solid fa-trash" /> <span class="clear-xsm">Eliminar</span>
+                <i class="fa-solid fa-trash" /> <span class="clear-xsm">{{ t('buttons.delete') }}</span>
             </button>
             <button 
                 class="btn-primary-sm radius-sm"
                 @click="$emit('set-location')"
                 data-toggle="modal" data-target="#locationFormModal"
             >
-                <i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">Editar</span>
+                <i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">{{ t('buttons.edit') }}</span>
             </button>
         </div>
     </div>

src/components/CardUser.vue

@@ -3,7 +3,8 @@
     import { getDateMonthDay } from '../helpers/date_formats';
     import { useCompanyStore } from '../stores/company';
     import { useAuthStore } from '../stores/auth';
-
+    import { useI18n } from 'vue-i18n';
+    
     const props = defineProps({
         user: {
             type: Object,
@@ -16,26 +17,27 @@
         }
         
     })
-
+    
     defineEmits(['set-user'])
-
+    
     const companyStore = useCompanyStore();
     const authStore = useAuthStore();
+    const { t } = useI18n()
 
     const handleDelete = async() => {
         Swal.fire({
-            title: 'Eliminación de usuario!',
+            title: t('users.titleDel'),
-            text: '¿Estás seguro de eliminar este usuario?',
+            text: t('users.textDel'),
             icon: 'warning',
             showCancelButton: true,
             cancelButtonColor: "#d33",
-            confirmButtonText: 'Eliminar',
+            confirmButtonText: t('buttons.delete'),
-            cancelButtonText: 'Cancelar',
+            cancelButtonText: t('buttons.cancel'),
         }).then(async(result) => {
             if(result.isConfirmed) {
                 Swal.fire({
-                    title: 'Por favor espere!',
+                    title: t('messages.loading'),
-                    html: 'Elimininando usuario...',// add html attribute if you want or remove
+                    html: t('users.loadingDel') + '...',// add html attribute if you want or remove
                     allowOutsideClick: false,
                     didOpen: () => {
                         Swal.showLoading()
@@ -47,14 +49,14 @@
 
                 if(resp === 'success') {
                     Swal.fire({
-                        title: "Usuario eliminado!",
+                        title: t('users.msgTitleDel'),
-                        text: "El usuario ha sido eliminado exitosamente.",
+                        text: t('users.msgDel'),
                         icon: "success"
                     });
                 } else {
                     Swal.fire({
-                        title: "No eliminado!",
+                        title: t('users.msgTitleNotDel'),
-                        text: "El usuario no se pudo eliminar, intente más tarde.",
+                        text: t('users.msgNotDel'),
                         icon: "error"
                     });
                 }
@@ -68,30 +70,30 @@
     <div class="card-fixed flex-column">
         <div class="row">
             <div class="col-lg-6 col-sm-12">
-                <p><span>Nombre de usuario:</span>  {{user.first_name}} {{user.last_name}}</p>
+                <p><span>{{ t('labels.names') }}:</span>  {{user.first_name}} {{user.last_name}}</p>
-                <p v-if="user.employee_id"><span class="font-weight-bold mr-1">Número de registro:</span> {{user.employee_id}}</p>
+                <p v-if="user.employee_id"><span class="font-weight-bold mr-1">{{ t('labels.registryNumber') }}:</span> {{user.employee_id}}</p>
-                <p><span>Rol del usuario: </span>{{user.job_role}}</p>
+                <p><span>{{ t('labels.userRole') }}: </span>{{user.job_role}}</p>
-                <p><span>Teléfono 1: </span>{{user.phone}}</p>
+                <p><span>{{ t('labels.phone1') }}: </span>{{user.phone}}</p>
                 <!-- <p><span>Teléfono 2: </span>{{user.phone2}}</p> -->
-                <p><span>Email: </span>{{user.email}}</p>
+                <p><span>{{ t('labels.email') }}: </span>{{user.email}}</p>
             </div>
             <div class="col-lg-6 col-sm-12" v-if="readonly">
-                <p><span>Segmento: </span>{{user.categories?.map((e) => e.name).join(', ')}}</p>
+                <p><span>{{ t('global.segments') }}: </span>{{user.categories?.map((e) => e.name).join(', ')}}</p>
-                <p><span>Locaciones de carga por municipio: </span>{{user._user_city}}</p>
+                <p><span>{{ t('labels.locationLoadCity') }}: </span>{{user._user_city}}</p>
-                <p><span>Locaciones de carga por estado: </span>{{user._user_state}}</p>
+                <p><span>{{ t('labels.locationLoadState') }}: </span>{{user._user_state}}</p>
-                <p v-if="user.company.truck_type"><span>Tipos de transporte que utiliza: </span> {{user._truck_type}}</p>
+                <p v-if="user.company.truck_type"><span>{{ t('labels.truckUsed') }}: </span> {{user._truck_type}}</p>
-                <p ><span>Información adicional del usuario: </span> {{user.user_description}}</p>
+                <p ><span>{{ t('labels.userInfo') }}: </span> {{user.user_description}}</p>
-                <p ><span>Miembro desde: </span>{{getDateMonthDay(user.createdAt)}}</p>
+                <p ><span>{{ t('labels.memberSince') }}: </span>{{getDateMonthDay(user.createdAt)}}</p>
                 <p v-if="readonly" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
-                <p><span>Rol del usuario: </span>{{user.job_role}}</p>
+                <p><span>{{ t('labels.userRole') }}: </span>{{user.job_role}}</p>
             </div>
             <div class="col-lg-6 col-sm-12" v-else>
-                <p><span>Segmento: </span>{{user.categories?.map((e) => e.name).join(', ')}}</p>
+                <p><span>{{ t('global.segments') }}: </span>{{user.categories?.map((e) => e.name).join(', ')}}</p>
-                <p><span>Locaciones de carga por municipio: </span>{{user.user_city?.join(', ')}}</p>
+                <p><span>{{ t('labels.locationLoadCity') }}: </span>{{user.user_city?.join(', ')}}</p>
-                <p><span>Locaciones de carga por estado: </span>{{user.user_state?.join(', ')}}</p>
+                <p><span>{{ t('labels.locationLoadState') }}: </span>{{user.user_state?.join(', ')}}</p>
-                <p v-if="user.truck_type"><span>Tipos de transporte que utiliza: </span> {{user.truck_type?.join(', ')}}</p>
+                <p v-if="user.truck_type"><span>{{ t('labels.truckUsed') }}: </span> {{user.truck_type?.join(', ')}}</p>
-                <p ><span>Información adicional del usuario: </span> {{user.user_description}}</p>
+                <p ><span>{{ t('labels.userInfo') }}: </span> {{user.user_description}}</p>
-                <p ><span>Miembro desde: </span>{{getDateMonthDay(user.createdAt)}}</p>
+                <p ><span>{{ t('labels.memberSince') }}: </span>{{getDateMonthDay(user.createdAt)}}</p>
                 <p v-if="readonly" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
             </div>
         </div>
@@ -101,11 +103,11 @@
                 data-toggle="modal" 
                 data-target="#userModal"
                 @click="$emit('set-user')"
-                ><i class="fa-solid fa-pen-to-square"></i> Editar</button>
+                ><i class="fa-solid fa-pen-to-square"></i> {{ t('buttons.edit') }}</button>
                 <button
                 class="btn btn-dark radius-sm"
                 @click="handleDelete"
-            ><i class="fa-solid fa-trash"></i> Eliminar</button>
+            ><i class="fa-solid fa-trash"></i> {{ t('buttons.delete') }}</button>
         </div>
     </div>
 </template>

src/components/CreateLocationModal.vue

@@ -9,6 +9,7 @@
     import { useAuthStore } from '../stores/auth';
     import { useCompanyStore } from '../stores/company';
     import Swal from 'sweetalert2';
+    import { useI18n } from 'vue-i18n';
 
     const props = defineProps({
         location: {
@@ -21,11 +22,12 @@
 
     const authStore = useAuthStore();
     const companyStore = useCompanyStore()
+    const { t } = useI18n()
     
     const loading = ref(false);
 
     const title = computed(() => {
-        return (props.location) ? 'Editar Locación' : 'Crear Locación';
+        return (props.location) ? t('directory.editLocation') : t('directory.createLocation');
     });
 
     const initState = {
@@ -167,7 +169,7 @@
                             :error="errors.branch_name"
                         />
                         <CustomInput
-                            label="Dirección(s)*"
+                            label="Dirección*"
                             name="address"
                             v-model:field="locationForm.address"
                             :filled="false"
@@ -226,14 +228,14 @@
                             />
                         </div>
                         <div class="mb-4 mt-3">
-                            <label class="custom-label">Tipo de transporte que se necesita</label>
+                            <label class="custom-label">Tipo de transporte</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 del usuario:</label>
+                            <label class="custom-label" for="description">Información adicional:</label>
                             <textarea 
                                 class="custom-input-light"
                                 name="description" 

src/components/CreateUserModal.vue

@@ -8,6 +8,7 @@
     import { useAuthStore } from '../stores/auth';
     import { useCompanyStore } from '../stores/company';
     import Swal from 'sweetalert2';
+    import { useI18n } from 'vue-i18n';
 
     const props = defineProps({
         user: {
@@ -16,6 +17,7 @@
         }
     });
 
+    const { t } = useI18n();
     onMounted(() => {
         if(props.user) {
             console.log(props.user)
@@ -73,7 +75,7 @@
     const loading = ref(false);
 
     const title = computed(() => {
-        return (props.user) ? 'Editar usuario' : 'Crear usuario';
+        return (props.user) ? t('labels.editUser') : t('labels.createUser');
     });
 
     defineEmits(['reset-user']);
@@ -106,22 +108,22 @@
             }
 
             let result = 'error';
-            let action = 'Creado';
+            let action = t('messages.createdUser');
             loading.value = true;
             if(props.user !== null) {
                 // Se actualiza
                 result = await companyStore.updateUserCompany(props.user._id, userData, dataUpdate);
-                action = 'actualizado';
+                action = t('messages.updatedUser');
             } else {
                 // Se crea
                 result = await companyStore.createUserCompany(userData, dataUpdate);
-                action = 'creado';
+                action = t('messages.createdUser');
             }
             loading.value = false;
             if(result === 'success') {
                 document.getElementById('btnCloseuserModal').click();
                 Swal.fire({
-                    title: `<strong>Usuario ${action} con éxito!</strong>`,
+                    title: `<strong>${action}</strong>`,
                     icon: 'success'
                 })
             } else {
@@ -135,10 +137,10 @@
 
     const validations = () => {
         errors.value = {
-            name: userForm.name.length < 4 ? 'Ingrese nombre' : null,
+            name: userForm.name.length < 4 ? t('errors.name') : null,
-            last_name: userForm.last_name.length <= 1 ? 'Ingrese apellido' : null,
+            last_name: userForm.last_name.length <= 1 ? t('errors.lastname') : null,
-            email: !validateEmail(userForm.email) ? 'Ingrese email valido' : null,
+            email: !validateEmail(userForm.email) ? t('errors.email') : null,
-            phone: userForm.phone.length < 10 ? 'Ingrese numero teléfonico valido' : null,
+            phone: userForm.phone.length < 10 ? t('errors.phone') : null,
         };
     }
 </script>
@@ -160,21 +162,21 @@
                 <div class="modal-body form-content">
                     <form @submit.prevent="saveUser" autocomplete="off" method="post" ref="formRef">
                         <CustomInput
-                            label="Nombre(s)*"
+                            :label="t('labels.names') + '*'"
                             name="name"
                             v-model:field="userForm.name"
                             :filled="false"
                             :error="errors.name"
                         />
                         <CustomInput
-                            label="Apellido(s)*"
+                        :label="t('labels.lastnames') + '*'"
                             name="lastname"
                             v-model:field="userForm.last_name"
                             :filled="false"
                             :error="errors.last_name"
                         />
                         <CustomInput
-                            label="Teléfono*"
+                            :label="t('labels.phone') + '*'"
                             name="phone1"
                             type="number"
                             v-model:field="userForm.phone"
@@ -184,7 +186,7 @@
                             :error="errors.phone"
                         />
                         <CustomInput
-                            label="Correo electronico*"
+                            :label="t('labels.email') + '*'"
                             name="email"
                             type="email"
                             v-model:field="userForm.email"
@@ -193,18 +195,18 @@
                             :error="errors.email"
                         />
                         <div class="d-flex flex-column">
-                            <label class="custom-label" for="role">Rol de usuario:</label>
+                            <label class="custom-label" for="role">{{ t('labels.userRole') }}</label>
                             <select 
                                 class="custom-input-light"
                                 name="role" 
                                 id="role" 
                                 v-model="userForm.job_role"
                             >
-                                <option disabled value="">-- Seleccionar rol --</option>
+                                <option disabled value="">-- {{ t('labels.selectedRol') }} --</option>
                                 <!-- <option value="owner">Dueño</option> -->
-                                <option value="manager">Gerente</option>
+                                <option value="manager">{{ t('labels.manager') }}</option>
-                                <option value="staff">Personal</option>
+                                <option value="staff">{{ t('labels.staff') }}</option>
-                                <option v-if="authStore.user?.permissions === 'role_carrier'" value="driver">Conductor</option>
+                                <option v-if="authStore.user?.permissions === 'role_carrier'" value="driver">{{ t('labels.driver') }}</option>
                             </select>
                         </div>
                         <!-- <div class="mb-4 mt-3">
@@ -222,21 +224,21 @@
                             />
                         </div> -->
                         <div class="mb-4 mt-3">
-                            <label class="custom-label">Locaciones de carga por estado</label>
+                            <label class="custom-label">{{ t('labels.locationLoadState') }}</label>
                             <States
                                 v-model="userForm.user_state" 
                                 :multiple="true"
                             />
                         </div>
                         <div class="mb-4 mt-3">
-                            <label class="custom-label">Locaciones de carga por municipio</label>
+                            <label class="custom-label">{{ t('labels.locationLoadCity') }}</label>
                             <Cities
                                 v-model="userForm.user_city" 
                                 :multiple="true"
                             />
                         </div>
                         <div class="d-flex flex-column">
-                            <label class="custom-label" for="description">Información adicional del usuario:</label>
+                            <label class="custom-label" for="description">{{ t('labels.userInfo') }}</label>
                             <textarea 
                                 class="custom-input-light"
                                 name="description" 
@@ -249,13 +251,13 @@
                             <div>
                                 <i class="fa-solid fa-circle-info info"></i>
                             </div>
-                            <span>Al crear un nuevo usuario, informa al beneficiario de la cuenta, que debe utilizar su correo electrónico para establecer una contraseña en la sección <span class="font-bold">Olvidé mi contraseña</span> y así poder iniciar sesión.</span>
+                            <span v-html="t('messages.msgCreatedUser')"></span>
                         </div>
                         <div class="mt-4 text-center">
                             <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>
@@ -264,7 +266,7 @@
                         type="button" 
                         class="btn btn-dark" 
                         @click="$emit('reset-user')"
-                        data-dismiss="modal">Cerrar</button>
+                        data-dismiss="modal">{{t('buttons.close')}}</button>
                 </div>
             </div>
         </div>

src/components/ui/EditCompanyModal.vue

@@ -7,6 +7,7 @@
     import Custominput from './CustomInput.vue';
     import { useCompanyStore } from '../../stores/company';
     import { useNotificationsStore } from '../../stores/notifications';
+    import { useI18n } from 'vue-i18n';
 
     const companyStore = useCompanyStore()
     const notifications = useNotificationsStore()
@@ -16,6 +17,7 @@
     const companyStates = ref([]);
     const companyCity = ref([]);
     const companyTruckType = ref([]);
+    const { t } = useI18n()
 
     onMounted(() => {
         if(companyStore.company){
@@ -57,19 +59,19 @@
                 is_company: companyStore.company._id,
                 company_type: companyStore.company.company_type,
                 meta_data: companyStore.company.meta_data,
-                categories: company.segments.map((e) => e._id),
+                categories: company.segments.map((e) => e),
-                company_city: company.cities.map((e) => e.city_name),
+                // company_city: company.cities.map((e) => e.city_name),
-                company_state: company.states.map((e) => e.state_name),
+                // company_state: company.states.map((e) => e.state_name),
                 truck_type: company.truckTypes.map((e) => e.meta_value),
                 company_description: company.description
             };
-            console.log( companyData )
+            // console.log( companyData )
             const result = await companyStore.editCompany(companyData);
             loading.value = false;
             if(result === 'success') {
                 document.getElementById('btnCloseEditCompany').click();
                 notifications.show = true;
-                notifications.text = 'Empresa actualizada';
+                notifications.text = t('messages.updateCompany');
             } else {
                 msgError.value === result;
                 clearMessages();
@@ -85,13 +87,13 @@
     
     const validations = () => {
         if(company.segments.length === 0) {
-            return 'Agregue al menos un segmento';
+            return t('errors.segments');
-        }else if(company.states.length === 0) {
+        // }else if(company.states.length === 0) {
-            return 'Agregue al menos un estado';
+        //     return t('errors.states');
-        } else if( company.cities.length === 0) {
+        // } else if( company.cities.length === 0) {
-            msgError.value = 'Agregue al menos una ciudad';
+        //     msgError.value = t('errors.cities');
         } else if(company.truckTypes.length === 0){
-            msgError.value = 'Agregue al menos un tipo de camión';
+            msgError.value = t('errors.trucks');
         } else {
             return '';
         }
@@ -106,7 +108,7 @@
         <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
             <div class="modal-content">
             <div class="modal-header">
-                <h2 class="title mt-2 mb-3">Editar Empresa</h2>
+                <h2 class="title mt-2 mb-3">{{ t('company.edit') }}</h2>
                 <button id="btnCloseEditCompany" type="button" class="close bg-white" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
@@ -115,7 +117,7 @@
                 <form @submit.prevent="handleSave" class="view-form">
                     <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
                     <div class="mb-4 mt-3">
-                        <label class="custom-label">Segmento de la empresa</label>
+                        <label class="custom-label">{{ t('labels.segmentsCompany') }}</label>
                         <Segments
                             v-model="company.segments" 
                             :multiple="true"
@@ -136,14 +138,14 @@
                         />
                     </div> -->
                     <div class="mb-4">
-                        <label class="custom-label">Tipo de transportes que utiliza</label>
+                        <label class="custom-label">{{  t('labels.truckUsed') }}</label>
                         <TruckTypes 
                             v-model="company.truckTypes"
                             :multiple="true"
                         />
                     </div>
                     <Custominput
-                        label="Descripción de la empresa:"
+                        :label=" t('labels.infoCompany')"
                         type="text"
                         name="description"
                         :filled="false"
@@ -153,11 +155,11 @@
                     <input 
                         v-else
                         type="submit" 
-                        value="Cuardar cambios" class="btn-primary-lg btn-lg-block my-4">
+                        :value="t('buttons.save')" class="btn-primary-lg btn-lg-block my-4">
                 </form>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-dark" data-dismiss="modal">Cerrar</button>
+                <button type="button" class="btn btn-dark" data-dismiss="modal">{{t('buttons.close')}}</button>
             </div>
             </div>
         </div>

src/components/ui/Notification.vue

@@ -1,6 +1,9 @@
 <script setup>
+    import { useI18n } from 'vue-i18n';
     import { useNotificationsStore } from '../../stores/notifications';
+    
     const notifications = useNotificationsStore();
+    const { t } = useI18n()
 </script>
 <template>
     <div class="noty-fixed">
@@ -9,7 +12,7 @@
                 <i v-if="notifications.error === false" class="fa-regular fa-circle-check text-success icon-category"></i>
                 <i v-else class="fa-solid fa-circle-exclamation text-danger"></i>
                 <div>
-                    <h4 class="noty-title">Notificación</h4>
+                    <h4 class="noty-title">{{ t('global.notification') }}</h4>
                     <p class="noty-body">{{ notifications.text }}</p>
                 </div>
                 <i class="fa-solid fa-xmark close-icon" @click="notifications.show = false"></i>

src/i18n/en.js

@@ -0,0 +1,197 @@
+const en = {
+    labels: {
+        email: 'Email',
+        password: 'Password',
+        password2: 'New password',
+        password3: 'Confirm Password',
+        code: 'Enter the code',
+        questionCompany: 'What is the name of the company?',
+        questionRfc: "What is the company's RFC?",
+        questionSegments: 'What segments does the company belong to?',
+        questionSates: "What are the company's loading locations by state?",
+        questionCities: "What are the company's loading locations by city?",
+        questionTrucks: "What type of transport does the company use?",
+        infoCompanies: 'Additional company information',
+        questionSignOut: 'Are you sure to sign out?',
+        selectSegment: 'Search by segment',
+        selectTruck: 'Search by type of transport',
+        selectState: 'Search by state',
+        selectCity: 'Search by city',
+        names: 'Name(s)',
+        lastnames: 'Last name',
+        phone: 'Phone',
+        phone1: 'Phone 1',
+        phone2: 'Phone 2',
+        typeCompany: 'Type of company',
+        codeId: 'Code',
+        dateMembership: 'Company member since',
+        segmentsCompany: 'Company segments',
+        locationLoadState: 'Load locations by state',
+        locationLoadCity: 'Load locations by city',
+        truckUsed: 'Transports used',
+        infoCompany: 'General company information',
+        registryNumber: "Registry number",
+        userRole: "User role",
+        userInfo: "Additional User Information",
+        memberSince: "Member since",
+        createUser: 'Create user',
+        editUser: 'Edit user',
+        selectedRol: 'Select Role',
+        manager: 'Manager',
+        staff: 'Staff',
+        driver: 'Driver',
+        filters: 'Filters',
+        location: 'Location',
+        both: 'Both',
+        load: 'Load',
+        download: 'Download',
+        select: 'Select',
+        additionalInformation: 'Additional information',
+        writeHere: 'Write here',
+    },
+    buttons: {
+        enter: "Enter here",
+        signup: "Sign up here",
+        continue: "Continue",
+        back: "Go back",
+        resendCode: "Resend code",
+        terms: 'Terms and Conditions',
+        noticePrivacity: 'Privacy notice',
+        save: 'save',
+        closeSesion: 'Sign out',
+        yes: 'Yes',
+        no: 'No',
+        close: 'Close',
+        addUser: "Add user",
+        edit: "Edit",
+        delete: "Delete",
+        cancel: "Cancel",
+        add: 'Add'
+    },
+    errors: {
+        requireds: "All fields required",
+        email: "Email is not valid",
+        weakPassword: "Weak password",
+        matchPassword: "Passwords do not match",
+        code: 'Enter valid code',
+        company: 'Enter valid company name',
+        rfc: 'Enter valid RFC',
+        segments: 'Select at least one segment',
+        states: 'Select at least one state',
+        cities: 'Select at least one city',
+        trucks: 'Select at least one type of transport',
+        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!'
+    },
+    messages: {
+        sendCode: 'We send you a code to the email, entered!',
+        changePassword: 'Password has been changed successfully!',
+        register: "Successful registration, Complete your registration!",
+        registerCompleted: 'Registration completed successfully, Welcome',
+        updateCompany: "Updated company",
+        createdUser: 'User created successfully!',
+        updatedUser: 'User successfully updated!',
+        msgCreatedUser: 'When creating a new user, you inform the account beneficiary that they must use their email to set a password in the <span class="font-bold">Forgot my password</span> section so they can log in.',
+        loading: 'Please wait!'
+    },
+    global: {
+        signIn:  "Sign In",
+        and: "and",
+        es: "Spanish",
+        en: "English",
+        shipper: 'Shipper',
+        carrier: 'Carrier',
+        brokerShipper: 'Broker (Shipper)',
+        brokerCarrier: 'Broker (Carrier)',
+        fisica: 'Persona fisica',
+        moral: 'Persona moral',
+        helpSelected: 'Press to select',
+        selected: 'Selected',
+        removeSelected: 'Press to remove selection',
+        emptyList: 'Empty list',
+        notFound: 'Oops! No matches found.',
+        infoUser: 'Personal information',
+        footer: 'ETA VIAPORTE ALL RIGHTS RESERVED',
+        company: 'Company',
+        users: 'Users',
+        directory: 'Internal directory',
+        publications: 'Publications',
+        calendar: 'Calendar',
+        carriers: 'Carriers',
+        shippers: 'Shippers',
+        vehicles: 'Vehicles',
+        loads: 'Loads',
+        acceptedOffers: 'Accepted offers',
+        calculator: 'Calculator',
+        cities: 'Cities',
+        states: 'States',
+        segments: 'Segments',
+        notification: "Notification"
+    },
+    login: {
+        title: 'Sign in',
+        recovery: 'Recover password',
+        register: 'Registration of new users',
+        completeRegister: 'Complete your registration',
+        questionTypeCompany: 'How do you want to register?',
+        questionFiscal: 'How do you work?',
+        companyData: 'Company data',
+        helptext: "The Password must be at least 8 characters, at least one uppercase letter, at least one lowercase letter, and one digit.",
+        helptextCode: "We send you a verification code to the email, enter it to confirm the password recovery. Don't forget to check the spam folder.",
+        greeting: 'Welcome! Enter your email and password',
+        notHaveAccount: "You do not have an account?",
+        forgotPassword: "Forgot your password?",
+        notice: 'By registering you accept our',
+        questionAccount: 'Do you already have an account?',
+    },
+    dashboard: {
+        title: 'Administrative Dashboard',
+        totalLoads: 'Total loads this month',
+        activeLoads: 'Active loads',
+        segmentsChart: 'Most used segments',
+        statesChart: 'Most used states',
+        citiesChart: 'Most used cities',
+        trucksChart: 'Most used type of transport'
+    },
+    company: {
+        title: 'My company',
+        edit: 'Edit company',
+    },
+    users: {
+        titleDel: 'User deletion!',
+        textDel: 'Are you sure to delete this user?',
+        loadingDel: 'Deleting user',
+        msgTitleDel: 'User deleted!',
+        msgTitleNotDel: '"Not deleted!',
+        msgDel: 'The user has been successfully deleted.',
+        msgNotDel: 'The user could not be deleted, try again later.'
+    },
+    directory: {
+        querySearch: 'Search by location name',
+        directory: 'Directory',
+        notLocations: 'No locations added',
+        editLocation: 'Edit location',
+        createLocation: 'Create Location',
+        name: 'Location name',
+        address: 'Address',
+        state: 'State of the location',
+        city: 'Municipality of the location',
+        typeDirectory: 'Type of directory',
+        zipCode: 'Zip Code',
+        typeTruck: 'Type of transport',
+        typeTruckNeed: 'Types of trucks needed',
+        additionalInfoLocation: 'Additional location information',
+
+        titleDel: 'Delete Location!',
+        textDel: 'Are you sure to delete this location?',
+        loadingDel: 'Deleting location',
+        msgTitleDel: 'Location deleted!',
+        msgDel: 'Your location has been successfully deleted.',
+        msgNotDel: 'Your location could not be deleted, try again later.'
+    }
+};
+
+export default en;

src/i18n/es.js

@@ -0,0 +1,199 @@
+
+
+const es = {
+    labels: {
+        email: 'Correo electrónico',
+        password: 'Contraseña',
+        password2: 'Nueva contraseña',
+        password3: 'Confirmar contraseña',
+        code: 'Ingresa el código',
+        questionCompany: '¿Cuál es el nombre de la empresa?',
+        questionRfc: '¿Cuál es el RFC de la empresa?',
+        questionSegments: '¿A que segmentos pertenece la empresa?',
+        questionSates: '¿Cuáles son las locaciones de carga de la empresa por estado?',
+        questionCities: '¿Cuáles son las locaciones de carga de la empresa por municipio?',
+        questionTrucks: '¿Qué tipo de transportes utiliza la empresa?',
+        questionSignOut: '¿Estás seguro de cerrar sesión?',
+        infoCompanies: 'Información adicional de la empresa',
+        selectSegment: 'Busca por segmento',
+        selectTruck: 'Busca por tipo de transporte',
+        selectState: 'Busca por estado',
+        selectCity: 'Busca por ciudad',
+        names: 'Nombre(s)',
+        lastnames: 'Apellido(s)',
+        phone1: 'Teléfono',
+        phone1: 'Teléfono 1',
+        phone2: 'Teléfono 2',
+        typeCompany: 'Tipo de empresa',
+        codeId: 'Código',
+        dateMembership: 'Empresa miembro desde',
+        segmentsCompany: 'Segmentos de la empresa',
+        locationLoadState: 'Ubicaciones de carga por estado',
+        locationLoadCity: 'Ubicaciones de carga por municipio',
+        truckUsed: 'Transportes utilizados',
+        infoCompany: 'Información general de la empresa',
+        registryNumber: "Número de registro",
+        userRole: "Rol del usuario",
+        userInfo: "Información adicional del usuario",
+        memberSince: "Miembro desde",
+        createUser: 'Crear usuario',
+        editUser: 'Editar usuario',
+        selectedRol: 'Seleccionar Rol',
+        manager: 'Gerente',
+        staff: 'Personal',
+        driver: 'Conductor',
+        filters: 'Filtros',
+        location: 'Locación',
+        both: 'Ambas',
+        load: 'Carga',
+        download: 'Descarga',
+        select: 'Seleccionar',
+        additionalInformation: 'Información adicional',
+        writeHere: 'Escribe aqui',
+    },
+    buttons: {
+        enter: "Ingresa aqui",
+        signup: "Registrate aqui",
+        continue: "Continuar",
+        back: "Volver",
+        resendCode: "Reenviar código",
+        terms: 'Términos y condiciones',
+        noticePrivacity: 'Aviso de privaciadad',
+        save: 'Guardar',
+        close: 'Cerrar',
+        closeSesion: 'Cerrar sesión',
+        yes: 'Si',
+        no: 'No',
+        addUser: "Agregar usuario",
+        edit: "Editar",
+        delete: "Eliminar",
+        cancel: "Cancelar",
+        add: 'Agregar'
+    },
+    errors: {
+        requireds: 'Todos los campos con obligatorios',
+        email: 'Correo electrónico no es valido',
+        weakPassword: 'Contraseña poco segura',
+        matchPassword: 'Las contraseñas no coinciden',
+        code: 'Ingresa código valido',
+        company: 'Ingresa nombre de empresa valido',
+        rfc: 'Ingresa RFC valido',
+        segments: 'Selecciona al menos un segmento',
+        states: 'Selecciona al menos un estado',
+        cities: 'Selecciona al menos un municipio',
+        trucks: 'Selecciona al menos un tipo de transporte',
+        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!',
+    },
+    messages: {
+        sendCode: 'Te enviamos un código al correo, ingresado!',
+        changePassword: 'Contraseña se ha cambiando exitosamente!',
+        register: "Registro exitoso, Complete su registro!",
+        registerCompleted: 'Registro completado exitosamento, Bienvenido',
+        updateCompany: "Empresa actualizada",
+        createdUser: 'Usuario creado con éxito!',
+        updatedUser: 'Usuario actualizado con éxito!',
+        msgCreatedUser: 'Al crear un nuevo usuario, informa al beneficiario de la cuenta, que debe utilizar su correo electrónico para establecer una contraseña en la sección <span class="font-bold">Olvidé mi contraseña</span> y así poder iniciar sesión.',
+        loading: 'Por favor espere!'
+    },
+    global: {
+        signIn:  'Ingresar',
+        and: "y",
+        es: 'Español',
+        en: 'Ingles',
+        shipper: 'Embarcador',
+        carrier: 'Transportista',
+        brokerShipper: 'Broker (Embarcador)',
+        brokerCarrier: 'Broker (Transportista)',
+        fisica: 'Persona fisica',
+        moral: 'Persona moral',
+        helpSelected: 'Presione para seleccionar',
+        selected: 'Seleccionado',
+        removeSelected: 'Presione para remover selecion',
+        emptyList: 'Lista vacia',
+        notFound:  'Oops! No se encontro coincidencias.',
+        infoUser: 'Información personal',
+        footer: 'ETA VIAPORTE TODOS LOS DERECHOS RESERVADOS',
+        company: 'Empresa',
+        users: 'Usuarios',
+        directory: 'Directorio interno',
+        publications: 'Publicaciones',
+        calendar: 'Calendario',
+        carriers: 'Transportistas',
+        shippers: 'Embarcadores',
+        vehicles: 'Vehiculos',
+        loads: 'Cargas',
+        acceptedOffers: 'Ofertas aceptadas',
+        calculator: 'Calculadora',
+        cities: 'Ciudades',
+        states: 'Estados',
+        segments: 'Segmentos',
+        notification:  "Notificación",
+    },
+    login: {
+        title: 'Iniciar sesión',
+        recovery: 'Recuperar contraseña',
+        register: 'Registro de nuevos usuarios', 
+        completeRegister: 'Complete su registro',
+        questionTypeCompany: '¿Como te quieres registrar?',      
+        questionFiscal: '¿Como trabajas?', 
+        companyData: 'Datos de la empresa',
+        helptext: 'La Contraseña debe ser mínimo 8 caracteres, al menos una mayúscula, al menos una minúscula, y un digito.',
+        helptextCode: "Te enviamos un código de verificación al correo electrónico, ingresalo para confirmar la recuperacion de contraseña. No olvides revisar en la carpeta spam.",
+        greeting: 'Bienvenido! Ingresa tu email y contraseña',
+        forgotPassword: '¿Olvidaste tu contreseña?',
+        notHaveAccount: '¿No tienes una cuenta?',
+        notice: 'Al registrarte aceptas nuestros',
+        questionAccount: '¿Ya tienes una cuenta?',
+    },
+    dashboard: {
+        title: 'Dashboard Administrativo',
+        totalLoads: 'Total de cargas este mes',
+        activeLoads: 'Cargas activas',
+        segmentsChart: 'Segmentos más usados',
+        statesChart: 'Estados más usados',
+        citiesChart: 'Ciudades más usadas',
+        trucksChart: 'Tipo de transporte más usados'
+    },
+    company: {
+        title: 'Mi empresa',
+        edit: 'Editar empresa',
+    },
+    users: {
+        titleDel: 'Eliminación de usuario!',
+        textDel: '¿Estás seguro de eliminar este usuario?',
+        loadingDel: 'Elimininando usuario',
+        msgTitleDel: 'Usuario eliminado!',
+        msgTitleNotDel: '"No eliminado!',
+        msgDel: 'El usuario ha sido eliminado exitosamente.',
+        msgNotDel: 'El usuario no se pudo eliminar, intente más tarde.'
+    },
+    directory: {
+        querySearch: 'Buscar por nombre de locación',
+        directory: 'Directorio',
+        notLocations: 'No hay ubicaciones agregadas',
+        editLocation: 'Editar locación',
+        createLocation: 'Crear Locación',
+        name: 'Nombre de la locación',
+        address: 'Dirección',
+        state: 'Estado de la locación',
+        city: 'Municipio de la locación',
+        typeDirectory: 'Tipo de directorio',
+        zipCode: 'Código postal',
+        typeTruck: 'Tipo de transporte',
+        typeTruckNeed: 'Tipos de camiones que se necesitan',
+        additionalInfoLocation: 'Información adicional de la locación',
+
+        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.'
+    }
+};
+
+export default es;

src/i18n/i18n.js

@@ -1,272 +1,17 @@
 import { createI18n } from 'vue-i18n';
+import es from './es';
+import en from './en';
 
 const messages = {
-  en: {
+    en: en,
-    labels: {
+    es: es,
-        email: 'Email',
-        password: 'Password',
-        password2: 'New password',
-        password3: 'Confirm Password',
-        code: 'Enter the code',
-        questionCompany: 'What is the name of the company?',
-        questionRfc: "What is the company's RFC?",
-        questionSegments: 'What segments does the company belong to?',
-        questionSates: "What are the company's loading locations by state?",
-        questionCities: "What are the company's loading locations by city?",
-        questionTrucks: "What type of transport does the company use?",
-        infoCompanies: 'Additional company information',
-        questionSignOut: 'Are you sure to sign out?',
-        selectSegment: 'Search by segment',
-        selectTruck: 'Search by type of transport',
-        selectState: 'Search by state',
-        selectCity: 'Search by city',
-        names: 'Name(s)',
-        lastnames: 'Last name',
-        phone1: 'Phone 1',
-        phone2: 'Phone 2',
-        typeCompany: 'Type of company',
-        codeId: 'Code',
-        dateMembership: 'Company member since',
-        segmentCompany: 'Company segment',
-        locationLoadState: 'Load location by state',
-        locationLoadCity: 'Load location by city',
-        truckUsed: 'Transports used',
-        infoCompany: 'General company information'
-    },
-    buttons: {
-        enter: "Enter here",
-        signup: "Sign up here",
-        continue: "Continue",
-        back: "Go back",
-        resendCode: "Resend code",
-        terms: 'Terms and Conditions',
-        noticePrivacity: 'Privacy notice',
-        save: 'save',
-        closeSesion: 'Sign out',
-        yes: 'Yes',
-        no: 'No'
-    },
-    errors: {
-        requireds: "All fields required",
-        email: "Email is not valid",
-        weakPassword: "Weak password",
-        matchPassword: "Passwords do not match",
-        code: 'Enter valid code',
-        company: 'Enter valid company name',
-        rfc: 'Enter valid RFC',
-        segments: 'Select at least one segment',
-        states: 'Select at least one state',
-        cities: 'Select at least one city',
-        trucks: 'Select at least one type of transport',
-        name: 'Enter valid name(s)',
-        lastname: 'Enter valid last name(s)',
-        phone: 'Enter valid phone number'
-    },
-    messages: {
-        sendCode: 'We send you a code to the email, entered!',
-        changePassword: 'Password has been changed successfully!',
-        register: "Successful registration, Complete your registration!",
-        registerCompleted: 'Registration completed successfully, Welcome'
-    },
-    global: {
-        signIn:  "Sign In",
-        and: "and",
-        es: "Spanish",
-        en: "English",
-        shipper: 'Shipper',
-        carrier: 'Carrier',
-        brokerShipper: 'Broker (Shipper)',
-        brokerCarrier: 'Broker (Carrier)',
-        fisica: 'Persona fisica',
-        moral: 'Persona moral',
-        helpSelected: 'Press to select',
-        selected: 'Selected',
-        removeSelected: 'Press to remove selection',
-        emptyList: 'Empty list',
-        notFound: 'Oops! No matches found.',
-        infoUser: 'Personal information',
-        footer: 'ETA VIAPORTE ALL RIGHTS RESERVED',
-        company: 'Company',
-        users: 'Users',
-        directory: 'Internal directory',
-        publications: 'Publications',
-        calendar: 'Calendar',
-        carriers: 'Carriers',
-        shippers: 'Shippers',
-        vehicles: 'Vehicles',
-        loads: 'Loads',
-        acceptedOffers: 'Accepted offers',
-        calculator: 'Calculator',
-        cities: 'Cities',
-        states: 'States',
-        segments: 'Segments',
-    },
-    login: {
-        title: 'Sign in',
-        recovery: 'Recover password',
-        register: 'Registration of new users',
-        completeRegister: 'Complete your registration',
-        questionTypeCompany: 'How do you want to register?',
-        questionFiscal: 'How do you work?',
-        companyData: 'Company data',
-        helptext: "The Password must be at least 8 characters, at least one uppercase letter, at least one lowercase letter, and one digit.",
-        helptextCode: "We send you a verification code to the email, enter it to confirm the password recovery. Don't forget to check the spam folder.",
-        greeting: 'Welcome! Enter your email and password',
-        notHaveAccount: "You do not have an account?",
-        forgotPassword: "Forgot your password?",
-        notice: 'By registering you accept our',
-        questionAccount: 'Do you already have an account?',
-    },
-    dashboard: {
-        title: 'Administrative Dashboard',
-        totalLoads: 'Total loads this month',
-        activeLoads: 'Active loads',
-        segmentsChart: 'Most used segments',
-        statesChart: 'Most used states',
-        citiesChart: 'Most used cities',
-        trucksChart: 'Most used type of transport'
-    },
-    company: {
-        title: 'My company',
-        edit: 'Edit company',
-    }
-},
-es: {
-    labels: {
-        email: 'Correo electrónico',
-        password: 'Contraseña',
-        password2: 'Nueva contraseña',
-        password3: 'Confirmar contraseña',
-        code: 'Ingresa el código',
-        questionCompany: '¿Cuál es el nombre de la empresa?',
-        questionRfc: '¿Cuál es el RFC de la empresa?',
-        questionSegments: '¿A que segmentos pertenece la empresa?',
-        questionSates: '¿Cuáles son las locaciones de carga de la empresa por estado?',
-        questionCities: '¿Cuáles son las locaciones de carga de la empresa por municipio?',
-        questionTrucks: '¿Qué tipo de transportes utiliza la empresa?',
-        questionSignOut: '¿Estás seguro de cerrar sesión?',
-        infoCompanies: 'Información adicional de la empresa',
-        selectSegment: 'Busca por segmento',
-        selectTruck: 'Busca por tipo de transporte',
-        selectState: 'Busca por estado',
-        selectCity: 'Busca por ciudad',
-        names: 'Nombre(s)',
-        lastnames: 'Apellido(s)',
-        phone1: 'Teléfono 1',
-        phone2: 'Teléfono 2',
-        typeCompany: 'Tipo de empresa',
-        codeId: 'Código',
-        dateMembership: 'Empresa miembro desde',
-        segmentCompany: 'Segmento de empresa',
-        locationLoadState: 'Ubicación de carga por estado',
-        locationLoadCity: 'Ubicación de carga por municipio',
-        truckUsed: 'Transportes utilizados',
-        infoCompany: 'Información general de la empresa'
-    },
-    buttons: {
-        enter: "Ingresa aqui",
-        signup: "Registrate aqui",
-        continue: "Continuar",
-        back: "Volver",
-        resendCode: "Reenviar código",
-        terms: 'Términos y condiciones',
-        noticePrivacity: 'Aviso de privaciadad',
-        save: 'Guardar',
-        closeSesion: 'Cerrar sesión',
-        yes: 'Si',
-        no: 'No'
-    },
-    errors: {
-        requireds: 'Todos los campos con obligatorios',
-        email: 'Correo electrónico no es valido',
-        weakPassword: 'Contraseña poco segura',
-        matchPassword: 'Las contraseñas no coinciden',
-        code: 'Ingresa código valido',
-        company: 'Ingresa nombre de empresa valido',
-        rfc: 'Ingresa RFC valido',
-        segments: 'Selecciona al menos un segmento',
-        states: 'Selecciona al menos un estado',
-        cities: 'Selecciona al menos un municipio',
-        trucks: 'Selecciona al menos un tipo de transporte',
-        name: 'Ingresa nombre(s) valido',
-        lastname: 'Ingresa apellido(s) valido',
-        phone: 'Ingresa teléfono valido'
-    },
-    messages: {
-        sendCode: 'Te enviamos un código al correo, ingresado!',
-        changePassword: 'Contraseña se ha cambiando exitosamente!',
-        register: "Registro exitoso, Complete su registro!",
-        registerCompleted: 'Registro completado exitosamento, Bienvenido'
-    },
-    global: {
-        signIn:  'Ingresar',
-        and: "y",
-        es: 'Español',
-        en: 'Ingles',
-        shipper: 'Embarcador',
-        carrier: 'Transportista',
-        brokerShipper: 'Broker (Embarcador)',
-        brokerCarrier: 'Broker (Transportista)',
-        fisica: 'Persona fisica',
-        moral: 'Persona moral',
-        helpSelected: 'Presione para seleccionar',
-        selected: 'Seleccionado',
-        removeSelected: 'Presione para remover selecion',
-        emptyList: 'Lista vacia',
-        notFound:  'Oops! No se encontro coincidencias.',
-        infoUser: 'Información personal',
-        footer: 'ETA VIAPORTE TODOS LOS DERECHOS RESERVADOS',
-        company: 'Empresa',
-        users: 'Usuarios',
-        directory: 'Directorio interno',
-        publications: 'Publicaciones',
-        calendar: 'Calendario',
-        carriers: 'Transportistas',
-        shippers: 'Embarcadores',
-        vehicles: 'Vehiculos',
-        loads: 'Cargas',
-        acceptedOffers: 'Ofertas aceptadas',
-        calculator: 'Calculadora',
-        cities: 'Ciudades',
-        states: 'Estados',
-        segments: 'Segmentos',
-    },
-    login: {
-        title: 'Iniciar sesión',
-        recovery: 'Recuperar contraseña',
-        register: 'Registro de nuevos usuarios', 
-        completeRegister: 'Complete su registro',
-        questionTypeCompany: '¿Como te quieres registrar?',      
-        questionFiscal: '¿Como trabajas?', 
-        companyData: 'Datos de la empresa',
-        helptext: 'La Contraseña debe ser mínimo 8 caracteres, al menos una mayúscula, al menos una minúscula, y un digito.',
-        helptextCode: "Te enviamos un código de verificación al correo electrónico, ingresalo para confirmar la recuperacion de contraseña. No olvides revisar en la carpeta spam.",
-        greeting: 'Bienvenido! Ingresa tu email y contraseña',
-        forgotPassword: '¿Olvidaste tu contreseña?',
-        notHaveAccount: '¿No tienes una cuenta?',
-        notice: 'Al registrarte aceptas nuestros',
-        questionAccount: '¿Ya tienes una cuenta?',
-    },
-    dashboard: {
-        title: 'Dashboard Administrativo',
-        totalLoads: 'Total de cargas este mes',
-        activeLoads: 'Cargas activas',
-        segmentsChart: 'Segmentos más usados',
-        statesChart: 'Estados más usados',
-        citiesChart: 'Ciudades más usadas',
-        trucksChart: 'Tipo de transporte más usados'
-    },
-    company: {
-        title: 'Mi empresa',
-        edit: 'Editar empresa',
-    }
-  }
 }
 
 const i18n = createI18n({
     legacy: false,
     locale: 'es', // default locale
     fallbackLocale: 'es',
+    warnHtmlMessage: false,
     messages,
 });
 

src/stores/company.js

@@ -3,6 +3,7 @@ import { ref } from "vue";
 import { getBudgets,  getCompany, updateBudget, updateCompany, deleteBudget, createBudget, getUsers, updateUser, createUser, deleteUser, getLocations, createLocation, updateLocation, deleteLocation } from "../services/company";
 import api from "../lib/axios";
 import { saveProposal, updateProposal } from "../services/vehicles";
+import { useI18n } from "vue-i18n";
 
 export const useCompanyStore = defineStore('company', () => {
 
@@ -22,6 +23,7 @@ export const useCompanyStore = defineStore('company', () => {
     const proposalsTotal = ref(0);
     const proposalsCurrentPage = ref(0)
     const loading = ref(false);
+    const { t } = useI18n();
 
     const getCompanyData = async() => {
         const companyId = localStorage.getItem('id');
@@ -81,7 +83,7 @@ export const useCompanyStore = defineStore('company', () => {
             }
             return 'success';
         } else {
-            return 'Algo salio mal, intente más tarde';
+            return t('errors.generic');
         }
     }
 
@@ -108,7 +110,7 @@ export const useCompanyStore = defineStore('company', () => {
             }
             return 'success';
         } else {
-            return 'Algo salio mal, intente más tarde';
+            return t('errors.generic');
         }
     }
 
@@ -121,14 +123,14 @@ export const useCompanyStore = defineStore('company', () => {
             }
             return 'success';
         } else {
-            return 'Algo salio mal, intente más tarde';
+            return t('errors.generic');
         }
     }
 
     const editCompany = async(formData) => {
         const data = await updateCompany(formData);
         if(data === null) {
-            return 'Algo salio mal, intente más tarde';
+            return t('errors.generic');
         } else {
             company.value = {
                 ...company.value,
@@ -190,7 +192,7 @@ export const useCompanyStore = defineStore('company', () => {
             proposalsTotal.value++;
             return 'success';
         } else {
-            return 'Algo salio mal, intente más tarde';
+            return t('errors.generic');
         }
     }
 
@@ -205,7 +207,7 @@ export const useCompanyStore = defineStore('company', () => {
             };
             return 'success';
         } else {
-            return 'Algo salio mal, intente más tarde';
+            return t('errors.generic');
         }
     }
 
@@ -250,7 +252,7 @@ export const useCompanyStore = defineStore('company', () => {
                 return 'No se pudo actualizar presupuesto, intente mas tarde';
             }
         } catch (error) {
-            return 'Algo salio mal, intente más tarde';
+            return t('errors.generic');
         }
     } 
 
@@ -268,7 +270,7 @@ export const useCompanyStore = defineStore('company', () => {
                 return 'No se pudo agregar presupuesto, intente mas tarde';
             }
         } catch (error) {
-            return 'Algo salio mal, intente más tarde';
+            return t('errors.generic');
         }
     } 
 
@@ -332,7 +334,7 @@ export const useCompanyStore = defineStore('company', () => {
             })
             return 'success';
         } else {
-            return 'Algo salio mal, intente más tarde';
+            return t('errors.generic');
         }
     }
 
@@ -357,7 +359,7 @@ export const useCompanyStore = defineStore('company', () => {
             }
             return 'success';
         } else {
-            return 'Algo salio mal, intente más tarde';
+            return t('errors.generic');
         }
     }
 
@@ -371,7 +373,7 @@ export const useCompanyStore = defineStore('company', () => {
 
             return 'success';
         } else {
-            return 'Algo salio mal, intente más tarde';
+            return t('errors.generic');
         }
     }
 

src/stores/vehicles.js

@@ -1,11 +1,13 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import { createVehicle, deleteVehicle, getVehicles, updateVehicle } from "../services/vehicles";
+import { useI18n } from "vue-i18n";
 export const useVehiclesStore = defineStore('vehicles', () => {
     
     const vehicles = ref([]);
     const vehiclesTotal = ref(0);
     const vehiclesCurrentPage = ref(0)
+    const { t } = useI18n()
 
     const fetchVehicles = async(filterQuery, reload = false) => {
         let filterArr = Object.values(filterQuery);
@@ -35,7 +37,7 @@ export const useVehiclesStore = defineStore('vehicles', () => {
             vehiclesTotal.value++;
             return 'success';
         } else {
-            return 'Algo salio mal, intente más tarde';
+            return t('errors.generic');
         }
     }
 
@@ -53,7 +55,7 @@ export const useVehiclesStore = defineStore('vehicles', () => {
             console.log(vehicles.value[index]);
             return 'success';
         } else {
-            return 'Algo salio mal, intente más tarde';
+            return t('errors.generic');
         }
     }
 
@@ -64,7 +66,7 @@ export const useVehiclesStore = defineStore('vehicles', () => {
             vehiclesTotal.value--;
             return 'success';
         } else {
-            return 'Algo salio mal, intente más tarde';
+            return t('errors.generic');
         }
     }
 

src/views/LocationsView.vue

@@ -7,6 +7,7 @@
     import CardLocation from '../components/CardLocation.vue';
     import Pagination from '../components/Pagination.vue';
     import CustomPopup from '../components/CustomPopup.vue';
+    import { useI18n } from 'vue-i18n';
 
     const companyStore = useCompanyStore();
 
@@ -15,10 +16,12 @@
     const query = ref('');
     const locationCurrent = ref(null);
     const openModal = ref(false);
+    const { t } = useI18n();
     // const typeDirection = ref(null)
-    const typeDirection = ref({value: 'both', label: 'Ambas'})
+    const typeDirection = ref({value: 'both', label: t('labels.both')})
     const openPopup = ref(false);
 
+
     onMounted(() => {
         getInitData();
     })
@@ -105,9 +108,9 @@
     }
 
     const optionsFilter = [
-        {value: 'both',label: 'Ambas'},
+        {value: 'both',label: t('labels.both')},
-        {value: 'load',label: 'Carga'},
+        {value: 'load',label: t('labels.load')},
-        {value: 'download',label: 'Descarga'}
+        {value: 'download',label: t('labels.download')}
     ]
 
     const closePopup = () => {
@@ -134,28 +137,28 @@
             :location="locationCurrent"
             @reset-location="handleResetCurrentBudget"
         />
-        <h2 class="title">Directorio interno</h2>
+        <h2 class="title">{{ t('global.directory') }}</h2>
         <div class="box-filters">
             <div class="box-search">
-                <input class="form-control custom-search" type="search" name="" placeholder="Buscar por nombre de locación" id="" @:input="search()" v-model="query" aria-label="Search">
+                <input class="form-control custom-search" type="search" name="" :placeholder="t('directory.querySearch')" id="" @:input="search()" v-model="query" aria-label="Search">
             </div>
             <div class="box-directory"
                 @click="openPopup = true"
             >
-                <span class="clear-sm" v-if="typeDirection === null">Directorio</span>
+                <span class="clear-sm" v-if="typeDirection === null">{{ t('directory.directory') }}</span>
                 <span class="clear-sm" v-else>{{typeDirection.label}}</span>
                 <i class="fa-solid fa-filter"></i>
             </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').toLocaleLowerCase() }}</span>
             </button>
             <button
                 class="btn-primary-sm radius-sm"
                 data-toggle="modal" data-target="#locationFormModal"
                 @click="handleSetCurrentLocation(null)"
-            ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Agregar</span><span class="clear-md"> locación</span></button>
+            ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> {{ t('buttons.add') }}</span> <span class="clear-md"> {{ t('labels.location') }}</span></button>
         </div>
         <div v-if="loading" class="spiner-box">
             <Spiner/>

src/views/MyCompanyView.vue

@@ -30,6 +30,8 @@
         await auth.authenticationPromise;
         // await authenticationPromise;
         await company.getCompanyData();
+        console.log(company.company)
+
     }
 
 
@@ -70,7 +72,7 @@
                             {{getDateMonthDay(company.company?.createAt)}}
                         </div>
                         <div class="item-company">
-                            <span class="font-weight-bold">{{ t('labels.segmentCompany') }}: </span>
+                            <span class="font-weight-bold">{{ t('labels.segmentsCompany') }}: </span>
                             {{company.company?.categories.map((e) => e.name).join(', ')}}
                         </div>
                         <!-- <div class="item-company">

src/views/UsersView.vue

@@ -5,11 +5,12 @@
     import { useCompanyStore } from '../stores/company';
     import CreateUserModal from '../components/CreateUserModal.vue';
     import Pagination from '../components/Pagination.vue';
-import { useAuthStore } from '../stores/auth';
+    import { useAuthStore } from '../stores/auth';
+    import { useI18n } from 'vue-i18n';
 
     const companyStore = useCompanyStore();
     const authStore = useAuthStore();
-
+    const { t } = useI18n()
     onMounted(() => {
         getInitData();
     });
@@ -53,7 +54,7 @@ import { useAuthStore } from '../stores/auth';
         @reset-user="handleResetCurrentUser"
     />
     <div>
-        <h2 class="title mb-4">Usuarios</h2>
+        <h2 class="title mb-4">{{ t('global.users') }}</h2>
         <div class="btn-row mb-4">
             <button
                 v-if="authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'"
@@ -62,7 +63,7 @@ import { useAuthStore } from '../stores/auth';
                 data-target="#userModal"
                 @click="handleSetCurrentUser(null)"
             >
-                <i class="fa-solid fa-plus"></i> Agregar usuario
+                <i class="fa-solid fa-plus"></i> {{ t('buttons.addUser') }}
             </button>
         </div>
         <Spiner v-if="loading"/>