ETA/WebETA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: transaltion sidebar & home & company

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-05-22 20:42:42 -06:00
parent 6aa95a6bd1
commit 264a6c6dfc
9 changed files with 190 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Header.vue
View File

@@ -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')},

12
src/components/NavBar.vue
View File

@@ -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 { 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"

47
src/components/ProfilePopup.vue
View File

@@ -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;

33
src/components/Sidebar.vue
View File

@@ -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',
text: '¿Estás seguro de cerrar sesión?',
title: t('buttons.closeSesion'),
text: t('labels.questionSignOut'),
icon: 'question',
showCancelButton: true,
cancelButtonColor: "#d33",
confirmButtonText: 'Si',
cancelButtonText: 'No',
confirmButtonText: t('buttons.yes'),
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: 'terms-conditions'}" target="_blank">Términos y condiciones</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('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>

80
src/i18n/i18n.js
View File

@@ -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',
}
}
}

17
src/services/auth.js
View File

@@ -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
};
}

4
src/stores/auth.js
View File

@@ -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
}
});

24
src/views/HomeView.vue
View File

@@ -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>

27
src/views/MyCompanyView.vue
View File

@@ -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>