add: transaltion sidebar & home & company

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

@@ -6,12 +6,13 @@
     import {getTypeCompany} from '../helpers/type_company'
     import {getDateMonthDay} from '../helpers/date_formats'
     import EditCompanyModal from '../components/ui/EditCompanyModal.vue';
-import { storeToRefs } from 'pinia';
+    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>