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

add: translations in carriers & public users

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-06-04 21:20:32 -06:00
parent 97f4f93fd3
commit b32b2c310c
8 changed files with 122 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/CardCompany.vue
View File

@@ -1,6 +1,7 @@
<script setup> <script setup>
import { RouterLink } from 'vue-router'; import { RouterLink } from 'vue-router';
import { getDateMonthDay } from '../helpers/date_formats'; import { getDateMonthDay } from '../helpers/date_formats';
import { useI18n } from 'vue-i18n';
defineProps({ defineProps({
company: { company: {
@@ -9,6 +10,7 @@
} }
}); });
const { t } = useI18n()
</script> </script>
<template> <template>
@@ -19,23 +21,23 @@
<div class="col-lg-6 col-sm-12"> <div class="col-lg-6 col-sm-12">
<!-- <p><span>RFC:</span> {{ company.rfc }}</p> --> <!-- <p><span>RFC:</span> {{ company.rfc }}</p> -->
<!-- <p><span>Tipo de empresa:</span> {{ company.company_type || 'No definido' }}</p> --> <!-- <p><span>Tipo de empresa:</span> {{ company.company_type || 'No definido' }}</p> -->
<p><span>Código:</span> {{ company.company_code }}</p> <p><span>{{ t('labels.codeId') }}:</span> {{ company.company_code }}</p>
<p><span>Empresa miembro desde: </span>{{getDateMonthDay(company.createdAt)}}</p> <p><span>{{ t('labels.dateMembership') }}: </span>{{getDateMonthDay(company.createdAt)}}</p>
<p><span>Segmento empresa:</span> {{ company._categories }}</p> <p><span>{{ t('company.segment') }}:</span> {{ company._categories }}</p>
<!-- <p><span>Afiliación: </span> {{company.membership}}</p> --> <!-- <p><span>Afiliación: </span> {{company.membership}}</p> -->
</div> </div>
<div class="col-lg-6 col-sm-12"> <div class="col-lg-6 col-sm-12">
<p><span>Locaciones de carga por estado: </span>{{company._company_state}}</p> <p><span>{{ t('labels.locationLoadState') }}: </span>{{company._company_state}}</p>
<p><span>Locaciones de carga por municipio: </span>{{company._company_city}}</p> <p><span>{{ t('labels.locationLoadCity') }}: </span>{{company._company_city}}</p>
<p><span>Transportes utilizados: </span>{{company._truck_types}}</p> <p><span>{{ t('labels.truckUsed') }}: </span>{{company._truck_types}}</p>
<p><span>Información general de la empresa: </span>{{company.company_description}}</p> <p><span>{{ t('labels.infoCompany') }}: </span>{{company.company_description}}</p>
</div> </div>
</div> </div>
<div class="d-flex justify-content-end"> <div class="d-flex justify-content-end">
<RouterLink <RouterLink
class="btn-primary-sm" class="btn-primary-sm"
:to="{name: 'public-users', params: {id: company._id}}" :to="{name: 'public-users', params: {id: company._id}}"
>Ver perfil</RouterLink> >{{ t('buttons.profile') }}</RouterLink>
</div> </div>
</div> </div>
</template> </template>

41
src/components/CardVehicle.vue
View File

@@ -3,6 +3,7 @@
import { getDateMonthDayEs } from '../helpers/date_formats'; import { getDateMonthDayEs } from '../helpers/date_formats';
import { useVehiclesStore } from '../stores/vehicles'; import { useVehiclesStore } from '../stores/vehicles';
import { useAuthStore } from '../stores/auth'; import { useAuthStore } from '../stores/auth';
import { useI18n } from 'vue-i18n';
const props = defineProps({ const props = defineProps({
vehicle: { vehicle: {
@@ -13,6 +14,8 @@ import { useAuthStore } from '../stores/auth';
console.log(props.vehicle); console.log(props.vehicle);
defineEmits(['set-vehicle']); defineEmits(['set-vehicle']);
const { t } = useI18n()
const vehicleStore = useVehiclesStore(); const vehicleStore = useVehiclesStore();
const authStore = useAuthStore(); const authStore = useAuthStore();
@@ -23,12 +26,12 @@ import { useAuthStore } from '../stores/auth';
icon: 'warning', icon: 'warning',
showCancelButton: true, showCancelButton: true,
cancelButtonColor: "#d33", cancelButtonColor: "#d33",
confirmButtonText: 'Eliminar', confirmButtonText: t('buttons.delete'),
cancelButtonText: 'Cancelar', cancelButtonText: t('buttons.cancel'),
}).then(async(result) => { }).then(async(result) => {
if(result.isConfirmed) { if(result.isConfirmed) {
Swal.fire({ Swal.fire({
title: 'Por favor espere!', title: t('messages.loading'),
html: 'Eliminando vehiculo...',// add html attribute if you want or remove html: 'Eliminando vehiculo...',// add html attribute if you want or remove
allowOutsideClick: false, allowOutsideClick: false,
didOpen: () => { didOpen: () => {
@@ -62,14 +65,14 @@ import { useAuthStore } from '../stores/auth';
<div class="card-fixed card-vehicle"> <div class="card-fixed card-vehicle">
<div class="row my-2"> <div class="row my-2">
<div class="col-lg-6"> <div class="col-lg-6">
<p>Código: <span>{{ vehicle?.vehicle_code }}</span></p> <p>{{ t('labels.codeId') }}: <span>{{ vehicle?.vehicle_code }}</span></p>
<p>Tipo de transporte: <span>{{ vehicle.truck_type }}</span></p> <p>{{ t('directory.typeTruck') }}: <span>{{ vehicle.truck_type }}</span></p>
<p>Número de Serie: <span>{{ vehicle.vehicle_number }}</span></p> <p>{{ t('vehicles.serialNumber') }}: <span>{{ vehicle.vehicle_number }}</span></p>
<p>Segmento: <span>{{vehicle.categories?.map((e) => e.name).join(', ')}}</span></p> <p>{{ t('global.segment') }}: <span>{{vehicle.categories?.map((e) => e.name).join(', ')}}</span></p>
<p>Conductor: <p>{{ t('labels.driver') }}:
<span> <span>
<span v-if="vehicle?.driver">{{ vehicle?.driver?.first_name }} {{ vehicle?.driver?.last_name }} </span> <span v-if="vehicle?.driver">{{ vehicle?.driver?.first_name }} {{ vehicle?.driver?.last_name }} </span>
<span v-else>No asignado </span> <span v-else>{{ t('vehicles.noDriver') }} </span>
<i <i
class="fa-solid fa-pen-to-square icon-btn" class="fa-solid fa-pen-to-square icon-btn"
data-toggle="modal" data-toggle="modal"
@@ -78,15 +81,15 @@ import { useAuthStore } from '../stores/auth';
</i> </i>
</span> </span>
</p> </p>
<p v-if="vehicle.is_available">Disponible en: <span>{{ vehicle.destino }}</span></p> <p v-if="vehicle.is_available">{{ t('vehicles.availableIn') }}: <span>{{ vehicle.destino }}</span></p>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<p>Placas Tracto Camión: <span>{{ vehicle.circulation_serial_number }}</span></p> <p>{{ t('vehicles.truckPlates') }}: <span>{{ vehicle.circulation_serial_number }}</span></p>
<p>Placas Remolque 1: <span>{{ vehicle.trailer_plate_1 }}</span></p> <p>{{ t('vehicles.trailerPlates') }} 1: <span>{{ vehicle.trailer_plate_1 }}</span></p>
<p>Placas Remolque 2: <span>{{ vehicle.trailer_plate_2 }}</span></p> <p>{{ t('vehicles.trailerPlates') }} 2: <span>{{ vehicle.trailer_plate_2 }}</span></p>
<p>Base de carga: <span>{{ vehicle.city }}, {{ vehicle.state }}</span></p> <p>{{ t('vehicles.chargingBase') }}: <span>{{ vehicle.city }}, {{ vehicle.state }}</span></p>
<p>Status: <p>Status:
<span>{{ vehicle.is_available ? 'Disponible' : 'Reservado'}} <span>{{ vehicle.is_available ? t('vehicles.available') : t('vehicles.reserved')}}
<i <i
class="fa-solid fa-pen-to-square icon-btn" class="fa-solid fa-pen-to-square icon-btn"
data-toggle="modal" data-toggle="modal"
@@ -95,10 +98,10 @@ import { useAuthStore } from '../stores/auth';
</i> </i>
</span> </span>
</p> </p>
<p v-if="vehicle.is_available">Fecha Disponible: <span>{{ getDateMonthDayEs(vehicle.available_date, false) }}</span></p> <p v-if="vehicle.is_available">{{ t('vehicles.availableDate') }}: <span>{{ getDateMonthDayEs(vehicle.available_date, false) }}</span></p>
</div> </div>
</div> </div>
<p v-if="vehicle.notes">Información Adicional del Transporte:</p> <p v-if="vehicle.notes">{{ t('vehicles.additionalInfoVehicle') }}:</p>
<div v-if="vehicle.notes" class="box-note mb-4"> <div v-if="vehicle.notes" class="box-note mb-4">
{{ vehicle.notes }} {{ vehicle.notes }}
</div> </div>
@@ -108,7 +111,7 @@ import { useAuthStore } from '../stores/auth';
class="btn btn-dark radius-sm" class="btn btn-dark radius-sm"
@click="handleDeleteVehicle" @click="handleDeleteVehicle"
> >
<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>
<button <button
v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.vehicle.posted_by" v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.vehicle.posted_by"
@@ -117,7 +120,7 @@ import { useAuthStore } from '../stores/auth';
data-toggle="modal" data-toggle="modal"
data-target="#createVehicleModal" data-target="#createVehicleModal"
> >
<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> </button>
</div> </div>
</div> </div>

27
src/i18n/en.js
View File

@@ -76,6 +76,7 @@ const en = {
accepted: 'Accepted', accepted: 'Accepted',
confirm: 'Confirm', confirm: 'Confirm',
search: 'Search', search: 'Search',
profile: 'View profile'
}, },
errors: { errors: {
requireds: "All fields required", requireds: "All fields required",
@@ -158,7 +159,13 @@ const en = {
notification: "Notification", notification: "Notification",
pagination: 'Pagination', pagination: 'Pagination',
lang: 'Language', lang: 'Language',
prefs: 'User Preferences' prefs: 'User Preferences',
loading: 'Loading',
published: 'Published',
transit: 'Transit',
delivered: 'Delivered',
downloading: 'Downloading',
add: 'Add',
}, },
login: { login: {
title: 'Sign in', title: 'Sign in',
@@ -188,6 +195,8 @@ const en = {
company: { company: {
title: 'My company', title: 'My company',
edit: 'Edit company', edit: 'Edit company',
segment: 'Company segment',
users: 'Company <span class="title-main">Users</span>'
}, },
users: { users: {
titleDel: 'User deletion!', titleDel: 'User deletion!',
@@ -294,12 +303,21 @@ const en = {
msgNotCancel: 'Could not withdraw offer, try later', msgNotCancel: 'Could not withdraw offer, try later',
}, },
vehicles: { vehicles: {
title: 'Vehicles',
modalEdit: 'Edit vehicle',
search: 'Search vehicles',
infoVehicle: 'Vehicle information', infoVehicle: 'Vehicle information',
truckPlates: 'Truck Tract Plates', truckPlates: 'Truck Tract Plates',
trailerPlates: 'Trailer Plates', trailerPlates: 'Trailer Plates',
chargingBase: 'Charging Base', chargingBase: 'Charging Base',
additionalInfoVehicle: 'Additional Transportation Information', additionalInfoVehicle: 'Additional Transportation Information',
serialNumber: 'Serial Number', serialNumber: 'Serial Number',
empty: 'No vehicles added',
noDriver: 'Not assigned',
availableIn: 'Available in',
available: 'Available',
reserved: 'Reserved',
availableDate: 'Available date'
}, },
profile: { profile: {
profile: 'User data', profile: 'User data',
@@ -316,7 +334,12 @@ const en = {
}, },
carriers: { carriers: {
title: '<span class="title-main">Carriers</span> directory', title: '<span class="title-main">Carriers</span> directory',
searchByCarrier: 'Search by carrier' searchByCarrier: 'Search by carrier',
empty: 'No records'
},
calendar: {
title: 'Calendar',
helpText: 'Load status indicators'
} }
}; };

38
src/i18n/es.js
View File

@@ -29,8 +29,8 @@ const es = {
codeId: 'Código', codeId: 'Código',
dateMembership: 'Empresa miembro desde', dateMembership: 'Empresa miembro desde',
segmentsCompany: 'Segmentos de la empresa', segmentsCompany: 'Segmentos de la empresa',
locationLoadState: 'Ubicaciones de carga por estado', locationLoadState: 'Locaciones de carga por estado',
locationLoadCity: 'Ubicaciones de carga por municipio', locationLoadCity: 'Locaciones de carga por municipio',
truckUsed: 'Transportes utilizados', truckUsed: 'Transportes utilizados',
infoCompany: 'Información general de la empresa', infoCompany: 'Información general de la empresa',
registryNumber: "Número de registro", registryNumber: "Número de registro",
@@ -78,6 +78,7 @@ const es = {
accepted: 'Aceptado', accepted: 'Aceptado',
confirm: 'Confirmar', confirm: 'Confirmar',
search: 'Buscar', search: 'Buscar',
profile: 'Ver perfil'
}, },
errors: { errors: {
requireds: 'Todos los campos con obligatorios', requireds: 'Todos los campos con obligatorios',
@@ -161,6 +162,12 @@ const es = {
pagination: 'Paginación', pagination: 'Paginación',
lang: 'Idioma', lang: 'Idioma',
prefs: 'Preferencias de usuario', prefs: 'Preferencias de usuario',
loading: 'Cargando',
published: 'Publicado',
transit: 'En transito',
delivered: 'Entregado',
downloading: 'Descargando',
add: 'Agregar',
}, },
login: { login: {
title: 'Iniciar sesión', title: 'Iniciar sesión',
@@ -190,6 +197,8 @@ const es = {
company: { company: {
title: 'Mi empresa', title: 'Mi empresa',
edit: 'Editar empresa', edit: 'Editar empresa',
segment: 'Segmento empresa',
users: 'Usuarios de la <span class="title-main">Empresa</span>'
}, },
users: { users: {
titleDel: 'Eliminación de usuario!', titleDel: 'Eliminación de usuario!',
@@ -300,12 +309,28 @@ const es = {
msgNotCancel: 'No se pudo retirar oferta, intente más tarde', msgNotCancel: 'No se pudo retirar oferta, intente más tarde',
}, },
vehicles: { vehicles: {
title: 'Vehiculos',
modalEdit: 'Editar vehiculo',
search: 'Buscar vehiculos',
infoVehicle: 'Información del vehiculo', infoVehicle: 'Información del vehiculo',
truckPlates: 'Placas Tracto Camión', truckPlates: 'Placas Tracto Camión',
trailerPlates: 'Placas Remolque', trailerPlates: 'Placas Remolque',
chargingBase: 'Base de carga', chargingBase: 'Base de carga',
additionalInfoVehicle: 'Información Adicional del Transporte', additionalInfoVehicle: 'Información Adicional del Transporte',
serialNumber: 'Número de Serie', serialNumber: 'Número de Serie',
empty: 'No hay vehiculos agregados',
noDriver: 'No asignado',
availableIn: 'Disponible en',
available: 'Disponible',
reserved: 'Reservado',
availableDate: 'Fecha disponible',
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.',
}, },
profile: { profile: {
profile: 'Datos de usuario', profile: 'Datos de usuario',
@@ -322,8 +347,13 @@ const es = {
}, },
carriers: { carriers: {
title: 'Directorio de <span class="title-main">Transportistas</span>', title: 'Directorio de <span class="title-main">Transportistas</span>',
searchByCarrier: 'Buscar por transportista' searchByCarrier: 'Buscar por transportista',
} empty: 'No hay registros'
},
calendar: {
title: 'Calendario',
helpText: 'Indicadores de estado de la carga'
},
}; };
export default es; export default es;

18
src/views/CalendarView.vue
View File

@@ -5,8 +5,12 @@
import {getDateTime} from '../helpers/date_formats'; import {getDateTime} from '../helpers/date_formats';
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
const events = ref([]); const events = ref([]);
const router = useRouter(); const router = useRouter();
const { t } = useI18n()
const config = { const config = {
week: { week: {
startsOn: 'monday', startsOn: 'monday',
@@ -72,15 +76,15 @@
<template> <template>
<div> <div>
<h2 class="title mb-4">Calendario</h2> <h2 class="title mb-4">{{ t('calendar.title') }}</h2>
<div class="box-indicators"> <div class="box-indicators">
<h2>Indicadores de estado de la carga</h2> <h2>{{ t('calendar.helpText') }}</h2>
<div class="indicators"> <div class="indicators">
<i class="fa-solid fa-circle" style="color: yellow"></i> Publicado <i class="fa-solid fa-circle" style="color: yellow"></i> {{ t('global.published') }}
<i class="fa-solid fa-circle" style="color: green"></i> Cargando <i class="fa-solid fa-circle" style="color: green"></i> {{ t('global.loading') }}
<i class="fa-solid fa-circle" style="color: red"></i> En transito <i class="fa-solid fa-circle" style="color: red"></i> {{ t('global.transit') }}
<i class="fa-solid fa-circle" style="color: blue"></i> Descargando <i class="fa-solid fa-circle" style="color: blue"></i> {{ t('global.downloading') }}
<i class="fa-solid fa-circle" style="color: blue"></i> Entregado <i class="fa-solid fa-circle" style="color: blue"></i> {{ t('global.delivered') }}
</div> </div>
</div> </div>
<div class="calendar"> <div class="calendar">

2
src/views/CarriersView.vue
View File

@@ -166,7 +166,7 @@
v-if="loading === false && companies.length <= 0" v-if="loading === false && companies.length <= 0"
> >
<img src="/images/logo.png" alt="logo" width="100"> <img src="/images/logo.png" alt="logo" width="100">
<h2 class="title">No hay registros</h2> <h2 class="title">{{ t('carriers.empty') }}</h2>
</div> </div>
<CardCompany <CardCompany

5
src/views/PublicUsersCompanyView.vue
View File

@@ -4,11 +4,14 @@
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import useDirectory from '../composables/useDirectory'; import useDirectory from '../composables/useDirectory';
import CardUser from '../components/CardUser.vue'; import CardUser from '../components/CardUser.vue';
import { useI18n } from 'vue-i18n';
const {loading, users, getUsersData} = useDirectory(); const {loading, users, getUsersData} = useDirectory();
const {params} = useRoute(); const {params} = useRoute();
const { t } = useI18n()
onMounted(() => { onMounted(() => {
const id = params.id; const id = params.id;
getUsersData(id); getUsersData(id);
@@ -17,7 +20,7 @@
<template> <template>
<div class="mb-5"> <div class="mb-5">
<h2 class="title mt-5 mb-5">Usuarios de la <span class="title-main">Empresa</span></h2> <h2 class="title mt-5 mb-5" v-html="t('company.users')"></h2>
<Spiner v-if="loading"/> <Spiner v-if="loading"/>
<div <div
class="card-info flex-column align-items-center" class="card-info flex-column align-items-center"

24
src/views/VehiclesView.vue
View File

@@ -9,6 +9,7 @@
import StatusVehicleModal from '../components/StatusVehicleModal.vue'; import StatusVehicleModal from '../components/StatusVehicleModal.vue';
import DriverVehicleModal from '../components/DriverVehicleModal.vue'; import DriverVehicleModal from '../components/DriverVehicleModal.vue';
import Pagination from '../components/Pagination.vue'; import Pagination from '../components/Pagination.vue';
import { useI18n } from 'vue-i18n';
const companyStore = useCompanyStore(); const companyStore = useCompanyStore();
const vehicleStore = useVehiclesStore(); const vehicleStore = useVehiclesStore();
@@ -27,6 +28,8 @@
getInitData(); getInitData();
}) })
const { t } = useI18n()
const getInitData = async() => { const getInitData = async() => {
loading.value = true; loading.value = true;
filterQuery.value.limit = 'elements=' + limit; filterQuery.value.limit = 'elements=' + limit;
@@ -127,22 +130,22 @@
:vehicle="vehicleCurrent" :vehicle="vehicleCurrent"
@reset-vehicle="handleResetCurrentVehicle" @reset-vehicle="handleResetCurrentVehicle"
/> />
<h2 class="title">Vehiculos</h2> <h2 class="title">{{ t('vehicles.title') }}</h2>
<div class="box-filters"> <div class="box-filters">
<div class="box-search"> <div class="box-search">
<input class="form-control custom-search" type="search" name="" placeholder="Buscar vehicles" id="" @:input="search()" v-model="query" aria-label="Search"> <input class="form-control custom-search" type="search" name="" :placeholder="t('vehicles.search')" id="" @:input="search()" v-model="query" aria-label="Search">
</div> </div>
<button <button
class="btn btn-danger bg-dark" type="button" @click="clearFilter"> class="btn btn-danger bg-dark" type="button" @click="clearFilter">
<i class="fa-solid fa-arrow-rotate-right"></i> <i class="fa-solid fa-arrow-rotate-right"></i>
<span class="clear-sm"> Reset</span><span class="clear-md"> filtros</span> <span class="clear-sm"> Reset </span><span class="clear-md"> {{ t('labels.filters').toLowerCase() }}</span>
</button> </button>
<button <button
class="btn-primary-sm radius-sm" class="btn-primary-sm radius-sm"
data-toggle="modal" data-toggle="modal"
data-target="#createVehicleModal" data-target="#createVehicleModal"
@click="handleSetCurrentVehicle({vehicle: null, modal: 'form'})" @click="handleSetCurrentVehicle({vehicle: null, modal: 'form'})"
><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Agregar</span><span class="clear-md"> vehiculo</span></button> ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> {{ t('global.add') }} </span> <span class="clear-md"> {{ t('global.vehicles').toLowerCase() }}</span></button>
</div> </div>
<Spiner v-if="loading"/> <Spiner v-if="loading"/>
<div v-else> <div v-else>
@@ -153,7 +156,7 @@
:key="vehicle._id" :key="vehicle._id"
@set-vehicle="handleSetCurrentVehicle" @set-vehicle="handleSetCurrentVehicle"
/> />
<CardEmpty v-else text="No hay vehiculos agregados"/> <CardEmpty v-else :text="t('vehicles.empty')"/>
<Pagination <Pagination
:current-page="vehicleStore.vehiclesCurrentPage" :current-page="vehicleStore.vehiclesCurrentPage"
:total="vehicleStore.vehiclesTotal" :total="vehicleStore.vehiclesTotal"
@@ -174,7 +177,8 @@
} }
.box-search { .box-search {
width: 60%; /* width: 60%; */
flex: 1;
} }
.custom-search { .custom-search {
width: 100%; width: 100%;
@@ -182,9 +186,9 @@
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.box-search { /* .box-search {
width: 60%; width: 60%;
} } */
.box-filters { .box-filters {
gap: .4rem; gap: .4rem;
} }
@@ -192,9 +196,9 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.box-search { /* .box-search {
width: 100%; width: 100%;
} } */
.box-filters { .box-filters {
gap: .3rem; gap: .3rem;
} }