add: transaltion sidebar & home & company

src/components/Header.vue

@@ -4,16 +4,19 @@ import CustomPopup from './CustomPopup.vue';
 import { ref } from 'vue';
 import { onMounted } from 'vue';
 import { watch } from 'vue';
+// import { useAuthStore } from '../stores/auth';
 
 const { t, locale } = useI18n();
 
 const openPopup = ref(false);
 const options = ref([]);
 const lang = ref(null);
+// const auth = useAuthStore();
 
 onMounted(() => {
     const langInit = localStorage.getItem('lang') ?? locale.value;
     locale.value = langInit
+    // auth.lang = langInit;
     lang.value = {value: langInit, label: langInit == 'en' ? t('global.en') : t('global.es')}
     options.value = [
         {value: 'es',label: t('global.es')},

src/components/NavBar.vue

@@ -1,8 +1,8 @@
 <script setup>
     import { RouterLink } from 'vue-router';
     import { useAuthStore } from '../stores/auth';
-import { ref } from 'vue';
     import { useNotificationsStore } from '../stores/notifications';
+    import { useI18n } from 'vue-i18n';
 
     const auth = useAuthStore();
     const noty = useNotificationsStore();
@@ -12,6 +12,8 @@ import { useNotificationsStore } from '../stores/notifications';
             $('#custom-navbar').toggleClass('active');
         });
     });
+
+    const { t } = useI18n()
 </script>
 
 <template>
@@ -24,15 +26,15 @@ import { useNotificationsStore } from '../stores/notifications';
                     <RouterLink 
                         v-if="auth.user?.permissions === 'role_shipper'"
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'carriers'}"><i class="fa-solid fa-truck me-1"></i> <span class="clear-xsm">Transportistas</span></RouterLink>
+                        class="nav-link" :to="{name: 'carriers'}"><i class="fa-solid fa-truck me-1"></i> <span class="clear-xsm">{{ t('global.carriers') }}</span></RouterLink>
                     <RouterLink 
                         v-if="auth.user?.permissions === 'role_carrier'"
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'search-loads'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> <span class="clear-xsm">Cargas</span></RouterLink>
+                        class="nav-link" :to="{name: 'search-loads'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> <span class="clear-xsm">{{ t('global.loads') }}</span></RouterLink>
                     <RouterLink 
                         v-if="auth.user?.permissions === 'role_carrier'"
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> <span class="clear-xsm">Embarcadores</span></RouterLink>
+                        class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> <span class="clear-xsm">{{ t('global.shippers') }}</span></RouterLink>
                     <a 
                         active-class="router-link-active"
                         @click="noty.toggleProfile"

src/components/ProfilePopup.vue

@@ -2,10 +2,29 @@
     import { useRouter } from 'vue-router';
     import { useAuthStore } from '../stores/auth';
     import { useNotificationsStore } from '../stores/notifications';
+    import { useI18n } from 'vue-i18n';
+    import { ref } from 'vue';
+import { onMounted } from 'vue';
+import CustomRadioInput from './ui/CustomRadioInput.vue';
+import { watch } from 'vue';
 
     const noty = useNotificationsStore();
     const auth = useAuthStore();
     const router = useRouter();
+    const lang = ref(null);
+    const { t, locale } = useI18n();
+
+    onMounted(() => {
+        console.log('INIT popup');
+        lang.value = localStorage.getItem('lang') ?? 'es';
+        locale.value = lang.value;
+    });
+
+    watch(lang, () => {
+        console.log('change lang')
+        locale.value = lang.value
+        localStorage.setItem('lang', lang.value)
+    })
 
     const closePopup = () => {
         noty.toggleProfile()
@@ -32,7 +51,21 @@
             <h3>{{auth.user?.first_name}} {{ auth.user?.last_name }}</h3>
             <p>{{ auth.user?.email }}</p>
             <p>{{ auth.user?.phone }}</p>
-            <br/>
+            <p class="section-prefs">Preferencias de usuario</p>
+            <p class="label-item">Idioma:</p>
+            <CustomRadioInput
+                value="es" 
+                :label="t('global.es')"
+                name="lang"
+                v-model:typeselected="lang"
+            />
+            <CustomRadioInput
+                value="en" 
+                :label="t('global.en')"
+                name="lang"
+                v-model:typeselected="lang"
+            />
+            <br>
             <button 
                 class="btn btn-dark"
                 data-toggle="modal" 
@@ -75,6 +108,18 @@
         filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
     }
 
+    .section-prefs {
+        margin-top: 20px !important;
+        font-size: 1rem !important;
+        color: grey;
+    }
+
+    .label-item {
+        font-weight: 900 !important;
+        font-size: 1.2rem !important;
+        margin-bottom: 1rem;
+    }
+
     .profile-card h3 {
         margin-top: 20px;
         margin-bottom: 20px;

src/components/Sidebar.vue

@@ -2,20 +2,21 @@
     import { RouterLink, useRoute, useRouter } from 'vue-router';
     import { useAuthStore } from '../stores/auth';
     import Swal from 'sweetalert2';
+    import { useI18n } from 'vue-i18n';
 
     const route = useRoute();
-    const router = useRouter();
     const auth = useAuthStore();
+    const { t } = useI18n()
 
    const handleLogout = () => {
         Swal.fire({
-            title: 'Cerrar sesión',
+            title: t('buttons.closeSesion'),
-            text: '¿Estás seguro de cerrar sesión?',
+            text: t('labels.questionSignOut'),
             icon: 'question',
             showCancelButton: true,
             cancelButtonColor: "#d33",
-            confirmButtonText: 'Si',
+            confirmButtonText: t('buttons.yes'),
-            cancelButtonText: 'No',
+            cancelButtonText: t('buttons.no'),
         }).then(async(result) => {
             if(result.isConfirmed) {
                 auth.logout();
@@ -50,7 +51,7 @@
                     <i class="fa-regular fa-building" :class="[route.name === 'company' ? 'router-link-active' : '']"></i>
                     <RouterLink 
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'company'}">Empresa</RouterLink>
+                        class="nav-link" :to="{name: 'company'}">{{ t('global.company') }}</RouterLink>
                 </div>
             </li>
             <li :class="[route.name === 'users' ? 'bg-nav-active' : '']">
@@ -58,7 +59,7 @@
                     <i class="fa-regular fa-user" :class="[route.name === 'users' ? 'router-link-active' : '']"></i>
                     <RouterLink 
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'users'}">Usuarios</RouterLink>
+                        class="nav-link" :to="{name: 'users'}">{{ t('global.users') }}</RouterLink>
                 </div>
             </li>
             <li :class="[route.name === 'locations' ? 'bg-nav-active' : '']">
@@ -66,7 +67,7 @@
                     <i class="fa-solid fa-location-dot" :class="[route.name === 'locations' ? 'router-link-active' : '']"></i>
                     <RouterLink 
                         active-class=""
-                        class="nav-link" :to="{name: 'locations'}">Directorio interno</RouterLink>
+                        class="nav-link" :to="{name: 'locations'}">{{ t('global.directory') }}</RouterLink>
                 </div>
             </li>
             <li 
@@ -76,7 +77,7 @@
                     <i class="fa-solid fa-truck-fast" :class="[route.name === 'vehicles' ? 'router-link-active' : '']"></i>
                     <RouterLink 
                         active-class=""
-                        class="nav-link" :to="{name: 'vehicles'}">Vehiculos</RouterLink>
+                        class="nav-link" :to="{name: 'vehicles'}">{{t('global.vehicles')}}</RouterLink>
                 </div>
             </li>
             <li v-if="auth.user?.permissions === 'role_shipper'" :class="[route.name === 'published-loads' ? 'bg-nav-active' : '']">
@@ -84,7 +85,7 @@
                     <i class="fa-solid fa-bullhorn" :class="[route.name === 'published-loads' ? 'router-link-active' : '']"></i>
                     <RouterLink 
                         active-class=""
-                        class="nav-link" :to="{name: 'published-loads'}">Publicaciones</RouterLink>
+                        class="nav-link" :to="{name: 'published-loads'}">{{t('global.publications')}}</RouterLink>
                 </div>
             </li>
             <li v-if="auth.user?.permissions === 'role_carrier'" :class="[route.name === 'published-trucks' ? 'bg-nav-active' : '']">
@@ -92,7 +93,7 @@
                     <i class="fa-solid fa-bullhorn" :class="[route.name === 'published-trucks' ? 'router-link-active' : '']"></i>
                     <RouterLink 
                         active-class=""
-                        class="nav-link" :to="{name: 'published-trucks'}">Ofertas aceptadas</RouterLink>
+                        class="nav-link" :to="{name: 'published-trucks'}">{{ t('global.acceptedOffers') }}</RouterLink>
                 </div>
             </li>
             <li :class="[route.name === 'calendar' ? 'bg-nav-active' : '']">
@@ -100,7 +101,7 @@
                     <i class="fa-regular fa-calendar" :class="[route.name === 'calendar' ? 'router-link-active' : '']"></i>
                     <RouterLink 
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'calendar'}">Calendario</RouterLink>
+                        class="nav-link" :to="{name: 'calendar'}">{{ t('global.calendar') }}</RouterLink>
                 </div>
             </li>
             <li 
@@ -110,7 +111,7 @@
                     <i class="fa-solid fa-calculator" :class="[route.name === 'calculator' ? 'router-link-active' : '']"></i>
                     <RouterLink 
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'calculator'}">Calculadora</RouterLink>
+                        class="nav-link" :to="{name: 'calculator'}">{{ t('global.calculator') }}</RouterLink>
                 </div>
             </li>
             <!-- <li 
@@ -144,15 +145,15 @@
         </ul>
         <div class="eta-info">
             <div class="divider"></div>
-            <RouterLink class="link-eta" :to="{name: 'notice-privacy'}" target="_blank">Aviso de privaciadad</RouterLink>
+            <RouterLink class="link-eta" :to="{name: 'notice-privacy'}" target="_blank">{{ t('buttons.noticePrivacity') }}</RouterLink>
-            <RouterLink class="link-eta" :to="{name: 'terms-conditions'}" target="_blank">Términos y condiciones</RouterLink>
+            <RouterLink class="link-eta" :to="{name: 'terms-conditions'}" target="_blank">{{ t('buttons.terms') }}</RouterLink>
             <RouterLink class="link-eta" :to="{name: 'faqs'}" target="_blank">Faqs</RouterLink>
             <div class="d-flex align-items-center">
                 <i class="fa-solid fa-right-from-bracket"></i>
                 <a @click="handleLogout"
                     active-class=""
                     class="nav-link m-2">
-                    Cerrar sesión
+                    {{ t('buttons.closeSesion') }}
                 </a>
             </div>
         </div>

src/i18n/i18n.js

@@ -15,6 +15,7 @@ const messages = {
         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',
@@ -23,6 +24,14 @@ const messages = {
         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",
@@ -33,6 +42,9 @@ const messages = {
         terms: 'Terms and Conditions',
         noticePrivacity: 'Privacy notice',
         save: 'save',
+        closeSesion: 'Sign out',
+        yes: 'Yes',
+        no: 'No'
     },
     errors: {
         requireds: "All fields required",
@@ -74,6 +86,20 @@ const messages = {
         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',
@@ -90,6 +116,19 @@ const messages = {
         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: {
@@ -105,6 +144,7 @@ es: {
         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',
@@ -114,6 +154,14 @@ es: {
         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",
@@ -123,7 +171,10 @@ es: {
         resendCode: "Reenviar código",
         terms: 'Términos y condiciones',
         noticePrivacity: 'Aviso de privaciadad',
-        save: 'Guardar'
+        save: 'Guardar',
+        closeSesion: 'Cerrar sesión',
+        yes: 'Si',
+        no: 'No'
     },
     errors: {
         requireds: 'Todos los campos con obligatorios',
@@ -165,6 +216,20 @@ es: {
         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',
@@ -181,6 +246,19 @@ es: {
         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',
     }
   }
 }

src/services/auth.js

@@ -24,8 +24,7 @@ export const login = async(body) => {
           };
         }
     } catch (error) {
-        console.log(error.response)
+        const errStr = error.response?.data?.error ?? 'Algo salio mal, intente más tarde';
-        const errStr = error.response.data.error ?? 'Algo salio mal, intente más tarde';
         return {
             msg: messagesError(errStr),
             data: null
@@ -50,7 +49,7 @@ export const renewToken = async() => {
           };
         }
     } catch (error) {
-        const errStr = error.response.data.error ?? 'Algo salio mal, intente más tarde';
+        const errStr = error.response?.data?.error ?? 'Algo salio mal, intente más tarde';
         return {
             msg: 'Sesion expiro',
             data: null
@@ -68,7 +67,7 @@ export const regiter = async(body) => {
         };
     } catch (error) {
         return {
-            msg: error.response.data.error ?? 'Algo salio mal, intente más tarde',
+            msg: error.response?.data?.error ?? 'Algo salio mal, intente más tarde',
             data: null
         };
     }
@@ -85,10 +84,10 @@ export const regiterConfirm = async(body) => {
     } catch (error) {
         let msg = 'Algo salio mal, intente más tarde';
         if(error.response.data.error) {
-            if(error.response.data.error === 'Wrong OTP'){
+            if(error?.response?.data?.error === 'Wrong OTP'){
                 msg = 'Codigo ingresado incorrecto';
             } else {
-                msg = error.response.data.error;
+                msg = error?.response?.data?.error;
             }
         } 
         return {
@@ -107,7 +106,7 @@ export const recoveryPassword = async(body) => {
             data
         };
     } catch (error) {
-        const errStr = error.response.data.error ?? 'Algo salio mal, intente más tarde';
+        const errStr = error?.response?.data?.error ?? 'Algo salio mal, intente más tarde';
         return {
             msg: messagesError(errStr),
             data: null
@@ -126,7 +125,7 @@ export const recoveryPasswordConfirm = async(body) => {
     } catch (error) {
         let msg = 'Algo salio mal, intente más tarde';
         if(error.response.data.error) {
-            if(error.response.data.error === 'Wrong OTP'){
+            if(error.response?.data?.error === 'Wrong OTP'){
                 msg = 'Codigo ingresado incorrecto';
             } else {
                 msg = error.response.data.error;
@@ -149,7 +148,7 @@ export const complete_registry = async (body) => {
         };
     } catch (error) {
         return {
-            msg: error.response.data.error ?? 'Algo salio mal, intente más tarde',
+            msg: error?.response?.data?.error ?? 'Algo salio mal, intente más tarde',
             data: null
         };
     }

src/stores/auth.js

@@ -20,6 +20,7 @@ export const useAuthStore = defineStore('auth', () => {
     const checking = ref(false);
     const authStatus = ref('checking');
     const token = ref('')
+    const lang = ref('es');
     const user = ref(null);
     const publicNames = [
         'terms-conditions',
@@ -107,6 +108,7 @@ export const useAuthStore = defineStore('auth', () => {
         authStatus,
         checkSession,
         authenticationPromise,
-        updateProfile
+        updateProfile, 
+        lang
     }
 });

src/views/HomeView.vue

@@ -9,6 +9,7 @@
   import CardEmpty from '../components/CardEmpty.vue';
   import { useAuthStore } from '../stores/auth';
   import { storeToRefs } from 'pinia';
+  import { useI18n } from 'vue-i18n';
 
 
   const auth = useAuthStore();
@@ -21,6 +22,7 @@
   const states = ref([]);
   const vehicles = ref([]);
   const nOfLoads = ref(0);
+  const { t, locale } = useI18n()
 
   onMounted(() => {
     if(user.value) {
@@ -74,10 +76,10 @@
 </script>
 
 <template>
-  <h1 class="title my-4">Dashboard Administrativo</h1>
+  <h1 class="title my-4">{{ t('dashboard.title') }}</h1>
   <div class="container-dashboard" v-if="nOfLoads > 0">
     <div class="card-fixed card-dashboard">
-      <h3>Total de cargas este mes</h3>
+      <h3>{{ t('dashboard.totalLoads') }}</h3>
       <div class="main-info">
         {{ nOfLoads }}
         <div class="indicator-text" style="color: green;">
@@ -89,7 +91,7 @@
     </div>
     <!-- <ChartLoad/> -->
     <div class="card-fixed card-dashboard">
-      <h3>Cargas activas</h3>
+      <h3>{{ t('dashboard.activeLoads') }}</h3>
       <div class="card-chart">
         <Spiner v-if="loading"/>
         <DoughnutChartStatistics
@@ -97,12 +99,12 @@
           :data="loadsData"
           :data-model="loadsType"
           target-find="name"
-          target-label="status"
+          :target-label="(locale == 'es') ? 'status' : 'name'"
         /> 
       </div>
     </div>
     <div class="card-fixed card-dashboard">
-      <h3>Segmentos más usados</h3>
+      <h3>{{ t('dashboard.segmentsChart') }}</h3>
       <div class="card-chart">
         <Spiner v-if="loading"/>
         <DoughnutChartStatistics 
@@ -114,34 +116,34 @@
       </div>
     </div>
     <div class="card-fixed card-dashboard">
-      <h3>Estados más usados</h3>
+      <h3>{{ t('dashboard.statesChart') }}</h3>
       <div class="card-chart">
         <Spiner v-if="loading"/>
         <BarChartStatistics 
           v-else
-          label="Estados"
+          :label="t('global.states')"
           :data="states"
         />
       </div>
     </div>
     <div class="card-fixed card-dashboard">
-      <h3>Ciudades más usadas</h3>
+      <h3>{{ t('dashboard.citiesChart') }}</h3>
       <div class="card-chart">
         <Spiner v-if="loading"/>
         <BarChartStatistics 
           v-else
-          label="Ciudades"
+          :label="t('global.cities')"
           :data="cities"
         />
       </div>
     </div>
     <div class="card-fixed card-dashboard">
-      <h3>Tipo de transporte más usados</h3>
+      <h3>{{ t('dashboard.trucksChart') }}</h3>
       <div class="card-chart">
         <Spiner v-if="loading"/>
         <BarChartStatistics 
           v-else
-          label="Vehiculos"
+          :label="t('global.vehicles')"
           :data="vehicles"
         />
       </div>

src/views/MyCompanyView.vue

@@ -7,11 +7,12 @@
     import {getDateMonthDay} from '../helpers/date_formats'
     import EditCompanyModal from '../components/ui/EditCompanyModal.vue';
     import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
 
     const auth = useAuthStore()
     const company = useCompanyStore();
-    const { user, authStatus } = storeToRefs(auth);
+    const { user } = storeToRefs(auth);
-
+    const { t } = useI18n()
 
     onMounted(() => {
         if(user.value) {
@@ -37,7 +38,7 @@ import { storeToRefs } from 'pinia';
 <template>
     <EditCompanyModal v-if="company.loading === false"/>
     <div>
-        <h2 class="title my-5">Mi empresa</h2>
+        <h2 class="title my-5">{{ t('company.title') }}</h2>
         <div class="card-info">
             <Spiner v-if="company.loading"/>
             <div v-else class="view">
@@ -47,7 +48,7 @@ import { storeToRefs } from 'pinia';
                         v-if="auth.user?.job_role === 'owner'"
                         class="btn-primary-sm"
                         data-toggle="modal" data-target="#editcompanymodal"
-                    ><i class="fa-solid fa-pen-to-square"></i> Editar empresa</button>
+                    ><i class="fa-solid fa-pen-to-square"></i> {{ t('company.edit') }}</button>
                 </div>
                 <div class="divider mb-4"></div>
                 <div class="row">
@@ -57,19 +58,19 @@ import { storeToRefs } from 'pinia';
                             {{company.company?.rfc}}
                         </div> -->
                         <div class="item-company">
-                            <span class="font-weight-bold">Tipo de empresa: </span>
+                            <span class="font-weight-bold">{{ t('labels.typeCompany') }}: </span>
                             {{getTypeCompany(company.company?.company_type)}}
                         </div>
                         <div class="item-company">
-                            <span class="font-weight-bold">Código: </span>
+                            <span class="font-weight-bold">{{ t('labels.codeId') }}: </span>
                             {{company.company?.company_code}}
                         </div>
                         <div class="item-company">
-                            <span class="font-weight-bold">Empresa miembro desde: </span>
+                            <span class="font-weight-bold">{{ t('labels.dateMembership') }}: </span>
                             {{getDateMonthDay(company.company?.createAt)}}
                         </div>
                         <div class="item-company">
-                            <span class="font-weight-bold">Segmento de empresa: </span>
+                            <span class="font-weight-bold">{{ t('labels.segmentCompany') }}: </span>
                             {{company.company?.categories.map((e) => e.name).join(', ')}}
                         </div>
                         <!-- <div class="item-company">
@@ -79,19 +80,19 @@ import { storeToRefs } from 'pinia';
                     </div>
                     <div class="col-sm-12 col-md-6 col-lg-6">
                         <div class="item-company">
-                            <span class="font-weight-bold">Ubicación de carga por estado: </span>
+                            <span class="font-weight-bold">{{ t('labels.locationLoadState') }}: </span>
                             {{company.company?.company_state.map((e) => e).join(', ')}}
                         </div>
                         <div class="item-company">
-                            <span class="font-weight-bold">Ubicación de carga por municipio: </span>
+                            <span class="font-weight-bold">{{ t('labels.locationLoadCity') }}: </span>
                             {{company.company?.company_city.map((e) => e).join(', ')}}
                         </div>
                         <div class="item-company">
-                            <span class="font-weight-bold">Transportes utilizados: </span>
+                            <span class="font-weight-bold">{{ t('labels.truckUsed') }}: </span>
                             {{company.company?.truck_type.map((e) => e).join(', ')}}
                         </div>
                         <div class="item-company">
-                            <span class="font-weight-bold">Información general de la empresa: </span>
+                            <span class="font-weight-bold">{{ t('labels.infoCompany') }}: </span>
                             {{ company.company?.company_description }}
                         </div>
                     </div>