add: search vehicles view & fixes: bugs state

2024-08-17 18:56:22 -06:00
parent 3cd6715c4b
commit 84c0595f5b
24 changed files with 392 additions and 75 deletions
--- a/src/components/AttachmentsModal.vue
+++ b/src/components/AttachmentsModal.vue
@@ -89,11 +89,18 @@
    }

    .attachment img {
-        width: 50%;
+        width: 33%;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        align-content: center;
    }

+    @media (max-width: 568px) {
+        .attachment img {
+            width: 50%;
+        }
+        
+    }
+
 </style>
--- a/src/components/CardLoad.vue
+++ b/src/components/CardLoad.vue
@@ -19,13 +19,17 @@
            type: Boolean,
            required: false,
            default: false
+        },
+        tracking: {
+            type: Boolean,
+            required: false,
+            default: true
        }
    });

    const { t } = useI18n()
    defineEmits(['set-load'])

-
    const openAttachmentsModal = () => {
        loadsStore.currentLoad = props.load;
        loadsStore.openAttachmentsModal = true;
@@ -94,34 +98,34 @@
            <div class="col-lg-6 col-sm-12">
                <p>
                    <span>{{t('loads.origin')}}: </span> 
-                    <template v-if="load.origin.company_name"> {{ load.origin.company_name }}, </template> 
-                    <template v-if="load.origin.street_address1">{{ load.origin.street_address1 }}, </template>
-                    <template v-if="load.origin.city">{{ load.origin.city }}, </template>
-                    <template v-if="load.origin.state">{{ load.origin.state }}, </template>
-                    <template v-if="load.origin.country">{{ load.origin.country }}, </template>
-                    <template v-if="load.origin.zipcode">{{ load.origin.zipcode }} </template>
+                    <template v-if="load.origin?.company_name"> {{ load.origin?.company_name }}, </template> 
+                    <template v-if="load.origin?.street_address1">{{ load.origin?.street_address1 }}, </template>
+                    <template v-if="load.origin?.city">{{ load.origin?.city }}, </template>
+                    <template v-if="load.origin?.state">{{ load.origin?.state }}, </template>
+                    <template v-if="load.origin?.country">{{ load.origin?.country }}, </template>
+                    <template v-if="load.origin?.zipcode">{{ load.origin?.zipcode }} </template>
                </p>
                <p>
                    <span>{{t('loads.destination')}}: </span> 
-                    <template v-if="load.destination.company_name"> {{ load.destination.company_name }}, </template> 
-                    <template v-if="load.destination.street_address1">{{ load.destination.street_address1 }}, </template>
-                    <template v-if="load.destination.city">{{ load.destination.city }}, </template>
-                    <template v-if="load.destination.state">{{ load.destination.state }}, </template>
-                    <template v-if="load.destination.country">{{ load.destination.country }}, </template>
-                    <template v-if="load.destination.zipcode">{{ load.destination.zipcode }} </template>
+                    <template v-if="load.destination?.company_name"> {{ load.destination?.company_name }}, </template> 
+                    <template v-if="load.destination?.street_address1">{{ load.destination?.street_address1 }}, </template>
+                    <template v-if="load.destination?.city">{{ load.destination?.city }}, </template>
+                    <template v-if="load.destination?.state">{{ load.destination?.state }}, </template>
+                    <template v-if="load.destination?.country">{{ load.destination?.country }}, </template>
+                    <template v-if="load.destination?.zipcode">{{ load.destination?.zipcode }} </template>
                </p>
            </div>
-            <div class="col-lg-6 col-sm-12" v-if="readOnly">
-                <p>
+            <div class="col-lg-6 col-sm-12">
+                <p v-if="readOnly">
                    <span>{{t('loads.company')}}: </span> 
-                    {{ load.company.company_name }} 
+                    {{ load.company?.company_name }} 
                </p>
-            </div>
-            <div class="col-lg-6 col-sm-12" v-if="authStore.user?.permissions === 'role_shipper'">
+                <div v-if="!readOnly">
                    <p><span>{{t('loads.postStatus')}}:</span> <span class="simple">{{ getStatusPublished(load) }}</span></p>
                    <p :style="{color: getStatusLoad(load).color}"><span>{{t('loads.loadStatus')}}:</span> <span class="simple">{{ getStatusLoad(load).status }}</span></p>
                </div>
            </div>
+        </div>
        <div class="divider"></div>
        <br>
        <div class="row">
@@ -139,7 +143,7 @@
                <p><span>{{t('global.segment')}}: </span> {{ load.categories?.map((e) => e.name).join(', ') }}</p>
                <p><span>{{t('loads.loadCode')}}: </span> {{ load.shipment_code?.toUpperCase() }}
                    <span 
-                        v-if="load.load_status !== 'Draft' && !readOnly" 
+                        v-if="load.status !== 'Draft' && tracking" 
                        class="tracking-icon" 
                        @click="handleTracking" 
                        data-target="_blank"
@@ -156,7 +160,7 @@
        <div v-if="load.notes" class="box-note">
            {{ load.notes }}
        </div>
-        <div class="btn-row" v-if="!readOnly && authStore.user?.permissions === 'role_shipper'">
+        <div class="btn-row" v-if="load?.company?._id === authStore?.user?.company._id">
            <button
                v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.load.posted_by"
                class="btn-primary-sm bg-danger"
@@ -185,7 +189,7 @@
                data-target="#proposalsModal"
            >#{{ load.no_of_proposals }} {{t('loads.offers')}}</button>
        </div>
-        <div class="btn-row" v-if="!readOnly && authStore.user?.permissions === 'role_carrier'">
+        <div class="btn-row" v-if="readOnly && authStore.user?.permissions === 'role_carrier'">
            <button
                class="btn-primary-sm bg-dark"
                data-toggle="modal" 
--- a/src/components/CardProposal.vue
+++ b/src/components/CardProposal.vue
@@ -1,6 +1,6 @@
 <script setup>
    import Swal from 'sweetalert2';
-    import { getDateMonthDay } from '../helpers/date_formats';
+    import { getDateOnly } from '../helpers/date_formats';
    import { getStatusLoad } from '../helpers/status';
    import { useCompanyStore } from '../stores/company';
    import { useAuthStore } from '../stores/auth';
@@ -87,10 +87,10 @@
                <p v-if="proposal.vehicle"><span>{{ t('labels.codeId') }}:</span> {{proposal.vehicle.vehicle_code?.toUpperCase()}}</p>
                <p v-if="proposal.vehicle"><span>{{ t('global.segment') }}:</span> {{proposal.load.categories?.map((e) => e.name).join(', ')}}</p>
                <p v-if="proposal.vehicle"><span>{{ t('directory.typeTruck') }}:</span> {{proposal.vehicle.truck_type}}</p>
-                <p v-if="proposal.vehicle"><span>{{ t('labels.datePublished') }}:</span> {{ getDateMonthDay(proposal.vehicle.published_date) }}</p>
-                <p v-if="proposal.vehicle"><span>{{ t('labels.dateAvailable') }}:</span> {{ getDateMonthDay(proposal.vehicle.available_date) }}</p>
-                <p v-if="proposal.vehicle"><span>{{ t('vehicles.availableIn') }}:</span> {{proposal.vehicle.city}}<template v-if="proposal.vehicle.state">, {{proposal.vehicle.state}}</template></p>
-                <p v-if="proposal.vehicle"><span>{{ t('loads.destination') }}:</span> {{proposal.vehicle.destino}}</p>
+                <p v-if="proposal.vehicle?.published_date"><span>{{ t('labels.datePublished') }}:</span> {{ getDateOnly(proposal.vehicle.published_date) }}</p>
+                <p v-if="proposal.vehicle?.is_available"><span>{{ t('labels.dateAvailable') }}:</span> {{ getDateOnly(proposal.vehicle.available_date) }}</p>
+                <p v-if="proposal.vehicle?.is_available"><span>{{ t('vehicles.availableIn') }}:</span> {{proposal.vehicle.city}}<template v-if="proposal.vehicle.state">, {{proposal.vehicle.state}}</template></p>
+                <p v-if="proposal.vehicle"><span>{{ t('loads.destination') }}:</span> {{proposal.vehicle?.destino.replace(';', ', ')}}</p>
                <p><span>{{ t('vehicles.truckPlates') }}:</span> {{ proposal.vehicle.circulation_serial_number }}</p>
                <p v-if="proposal.vehicle"><span>{{ t('vehicles.trailerPlates') }} 1:</span> {{proposal.vehicle.trailer_plate_1}}</p>
                <p v-if="proposal.vehicle"><span>{{ t('vehicles.trailerPlates') }} 2:</span> {{proposal.vehicle.trailer_plate_2}}</p>
@@ -103,7 +103,7 @@
                        @click="$emit('set-proposal', {proposal: proposal, modal: 'detail'})"
                        data-toggle="modal" data-target="#loadDetailModal"
                    >{{proposal.load.shipment_code.toUpperCase()}}</span></p>
-                <p v-if="proposal.vehicle" :style="{color: getStatusLoad(proposal.load, locale).color}"><span>{{  t('loads.loadStatus') }}:</span> {{ getStatusLoad(proposal.load, locale).status}}</p>
+                <p v-if="proposal.vehicle" :style="{color: getStatusLoad(proposal.load, locale).color, fontWeight: 'bold'}"><span>{{  t('loads.loadStatus') }}:</span> {{ getStatusLoad(proposal.load, locale).status}}</p>
                <p v-if="proposal._driver">{{ t('labels.operator') }}: {{proposal._driver}}</p>

            </div>
@@ -222,4 +222,5 @@
            gap: 0.2rem;
        }
    }
+    
 </style>
--- a/src/components/CardVehicle.vue
+++ b/src/components/CardVehicle.vue
@@ -1,6 +1,6 @@
 <script setup>
    import Swal from 'sweetalert2';
-    import { getDateMonthDayEs } from '../helpers/date_formats';
+    import { getDateOnly } from '../helpers/date_formats';
    import { useVehiclesStore } from '../stores/vehicles';
    import { useAuthStore } from '../stores/auth';
    import { useI18n } from 'vue-i18n';
@@ -10,6 +10,11 @@
        vehicle: {
            type: Object,
            required: true
+        },
+        readOnly: {
+            type: Boolean,
+            required: false,
+            default: false
        }
    })
    defineEmits(['set-vehicle']);
@@ -70,15 +75,17 @@
    <div class="card-fixed card-vehicle">
        <div class="row my-2">
            <div class="col-lg-6">
+                <p v-if="vehicle.company !== authStore?.user?.company._id">{{ t('global.company') }}: <span>{{ vehicle?.company_name }}</span></p>
                <p>{{ t('labels.codeId') }}: <span>{{ vehicle?.vehicle_code.toUpperCase() }}</span></p>
                <p>{{ t('directory.typeTruck') }}: <span>{{ vehicle.truck_type }}</span></p>
-                <p>{{ t('vehicles.serialNumber') }}: <span>{{ vehicle.vehicle_number }}</span></p>
+                <p v-if="!readOnly">{{ t('vehicles.serialNumber') }}: <span>{{ vehicle.vehicle_number }}</span></p>
                <p>{{ t('global.segment') }}: <span>{{vehicle.categories?.map((e) => e.name).join(', ')}}</span></p>
                <p>{{ t('labels.driver') }}: 
                    <span>
                        <span v-if="vehicle?.driver">{{ vehicle?.driver?.first_name }} {{ vehicle?.driver?.last_name }} </span> 
                        <span v-else>{{ t('vehicles.noDriver') }} </span> 
                        <i 
+                        v-if="!readOnly"
                        class="fa-solid fa-pen-to-square icon-btn" 
                        data-toggle="modal"
                        data-target="#editDriverVehicle"
@@ -92,11 +99,12 @@
            <div class="col-lg-6">
                <p>{{ t('vehicles.trailerPlates') }} 2: <span>{{ vehicle.trailer_plate_2 }}</span></p>
                <p>{{ t('vehicles.chargingBase') }}: <span>{{ vehicle.city }}, {{ vehicle.state }}</span></p>
-                <p v-if="vehicle.destino">{{ t('loads.destination') }}: <span>{{ vehicle.destino.replace(';', ', ') }}</span></p>
                <p v-if="vehicle.available_in">{{ t('vehicles.availableIn') }}: <span>{{ vehicle.available_in.replace(';', ', ') }}</span></p>
+                <p v-if="vehicle.destino">{{ t('loads.destination') }}: <span>{{ vehicle.destino.replace(';', ', ') }}</span></p>
                <p>Status: 
                    <span>{{ vehicle.is_available ? t('vehicles.available') : t('vehicles.reserved')}} 
                        <i 
+                            v-if="!readOnly"
                            class="fa-solid fa-pen-to-square icon-btn" 
                            data-toggle="modal"
                            data-target="#editStatusVehicle"
@@ -104,23 +112,26 @@
                        </i>
                    </span>
                </p>
-                <p v-if="vehicle.is_available">{{ t('vehicles.availableDate') }}: <span>{{ getDateMonthDayEs(vehicle.available_date, false) }}</span></p>
-                <p v-if="vehicle.active_load">
+                <p v-if="vehicle.is_available">{{ t('vehicles.availableDate') }}: <span>{{ getDateOnly(vehicle.available_date) }}</span></p>
+                <p v-if="vehicle.active_load && !readOnly">
                    {{ t('loads.loadCode') }}: 
                    <span
-                        class="code-enruta"
+                        class="code-enruta font-bold"
                        @click="handleTracking" 
                        data-target="_blank"
                    >{{ vehicle.active_load.shipment_code?.toUpperCase() }}</span>
                </p>
-                <p v-if="vehicle.active_load">{{ t('loads.loadStatus') }}: <span>{{ getStatusLoad(vehicle.active_load, locale).status}}</span></p>
+                <p v-if="vehicle.active_load && !readOnly">
+                    {{ t('loads.loadStatus') }}: 
+                    <span :style="{color: getStatusLoad(vehicle.active_load).color, fontWeight: 'bold'}">{{ getStatusLoad(vehicle.active_load, locale).status}}</span>
+                </p>
            </div>
        </div>
        <p v-if="vehicle.notes">{{ t('vehicles.additionalInfoVehicle') }}:</p>
        <div v-if="vehicle.notes" class="box-note mb-4">
            {{ vehicle.notes }}
        </div>
-        <div class="card-footer">
+        <div class="card-footer" v-if="vehicle.company === authStore?.user?.company._id">
            <button 
                v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.vehicle.posted_by"
                class="btn btn-dark radius-sm"
@@ -182,4 +193,7 @@
        cursor: pointer;
        color: rgb(107, 107, 227);
    }
+    .font-bold {
+        font-weight: 700;
+    }
 </style>
--- a/src/components/CreateVehicleModal.vue
+++ b/src/components/CreateVehicleModal.vue
@@ -53,9 +53,8 @@

    onMounted(() => {
        
-        const [destinoCityName = '', destinoStateName = ''] = props.vehicle.destino?.split(';') || [];
-
        if(props.vehicle) {
+            const [destinoCityName = '', destinoStateName = ''] = props.vehicle.destino?.split(';') || [];
            vehicleForm.truck_type = {
                meta_value: props.vehicle.truck_type
            };
@@ -162,15 +161,15 @@
                </div>
                <div class="modal-body form-content">
                    <form @submit.prevent="handleSaveVehicle" autocomplete="off" class="vehicle-form">
-                        <div class="row mt-4">
-                            <div class="col-lg-6 col-12">
+                        <div class="row">
+                            <div class="col-lg-6 col-12 mt-4">
                                <label class="custom-label">{{ t('directory.typeTruck') }}*</label>
                                <TruckTypes
                                    v-model="vehicleForm.truck_type" 
                                />
                                <span class="error-msg" v-if="errors.truck_type">{{ errors.truck_type }}</span>
                            </div>
-                            <div class="col-lg-6 col-12">
+                            <div class="col-lg-6 col-12 mt-4">
                                <label class="custom-label">{{ t('vehicles.segments') }}*</label>
                                <Segments
                                    v-model="vehicleForm.categories" 
--- a/src/components/FormLoadModal.vue
+++ b/src/components/FormLoadModal.vue
@@ -86,11 +86,8 @@
        formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name;
        //origin_formatted_address
        if(loadStore.currentLoad){
-            // console.log(loadStore.currentLoad)
            const dateStart = getDateTime(loadStore.currentLoad.est_loading_date, 0);
            const dateEnd = getDateTime(loadStore.currentLoad.est_unloading_date, 0);
-            console.log(dateStart)
-            console.log(dateEnd)
            formLoad.price = loadStore.currentLoad.actual_cost;
 			formLoad.segment = loadStore.currentLoad.categories?.length <= 0 ? [] : loadStore.currentLoad.categories.map(m =>{
 				return m;
@@ -275,13 +272,18 @@
        if(loadStore.currentLoad){
            const resp = await loadStore.updateLoad(loadStore.currentLoad._id, loadData);
            isLoading.value = false;
+            const dataLocal = {
+                company: auth.user.company,
+                categories: formLoad.segment || null,
+                product: formLoad.terms?.length <= 0 ? null :  formLoad.terms
+            };
            if(resp) {
                const index = loadStore.loads.findIndex((load) => load._id === resp._id);
                loadStore.loads[index] = {
                    ...loadStore.loads[index],
-                    ...resp
+                    ...resp,
+                    ...dataLocal,
                };
-                
                return 'success';
            } else {
                return 'error';
@@ -295,6 +297,7 @@
                    ...loadData,
                    categories: [loadData.categories]
                }
+
                loadStore.loads.unshift(load);
                return 'success';
            } else {
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -23,6 +23,10 @@
                    <i class="fas fa-align-left"></i>
                </button>
                <div class="nav-options">
+                    <RouterLink 
+                        v-if="auth.user?.permissions === 'role_shipper'"
+                        active-class="router-link-active"
+                        class="nav-link" :to="{name: 'search-vehicles'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> <span class="clear-xsm">{{ t('global.vehicles') }}</span></RouterLink>
                    <RouterLink 
                        v-if="auth.user?.permissions === 'role_shipper'"
                        active-class="router-link-active"
--- a/src/components/ProposalsModal.vue
+++ b/src/components/ProposalsModal.vue
@@ -44,10 +44,16 @@
        isLoadingActions.value = true;
        let load = await loadsStore.updateLoad(load_id, loadData);
        if(load != null) {
+            const dataLocal = {
+                company: authStore.user.company,
+                categories: loadsStore?.currentLoad?.categories,
+                product: loadsStore?.currentLoad?.product
+            };
            const index = loadsStore.loads.findIndex((load) => load._id === load_id);
            loadsStore.loads[index] = {
                ...loadsStore.loads[index],
-                ...load
+                ...load,
+                ...dataLocal
            };
            const proposal_id = proposal._id;
    
@@ -109,10 +115,16 @@
            isLoadingActions.value = true;
            let load = await loadsStore.updateLoad(load_id, loadData);
            if(load) {
+                const dataLocal = {
+                    company: authStore.user.company,
+                    categories: loadsStore?.currentLoad?.categories,
+                    product: loadsStore?.currentLoad?.product
+                };
                const index = loadsStore.loads.findIndex((load) => load._id === load_id);
                loadsStore.loads[index] = {
                    ...loadsStore.loads[index],
-                    ...load
+                    ...load,
+                    ...dataLocal
                };
                let formData = {
                    accepted_by : null,
--- a/src/components/StatusVehicleModal.vue
+++ b/src/components/StatusVehicleModal.vue
@@ -7,8 +7,10 @@
    import States from './ui/States.vue';
    import Cities from './ui/Cities.vue';
    import Swal from 'sweetalert2';
+    import { getDateTime } from '../helpers/date_formats';
    import { useI18n } from 'vue-i18n';

+
    const props = defineProps({
        vehicle: {
            type: Object
@@ -24,12 +26,12 @@
        
        const [destinoCityName = '', destinoStateName = ''] = props.vehicle.destino?.split(';') || [];
        const [availableCityName = '', availableStateName = ''] = props.vehicle.available_in?.split(';') || [];
-        
+        const date = getDateTime( props.vehicle?.available_date || new Date(), 0);
        formAvailiable.destinoCity = destinoCityName ? { city_name: destinoCityName } : '';
        formAvailiable.destinoState = destinoStateName ? { state_name: destinoStateName } : '';
        formAvailiable.availableCity = availableCityName ? { city_name: availableCityName } : '';
        formAvailiable.availableState = availableStateName ?  { state_name: availableStateName } : '';
-        formAvailiable.available_date = props.vehicle.available_date?.substring(0, 10);
+        formAvailiable.available_date = date.substring(0, 10);
    });

    defineEmits(['reset-vehicle']);
@@ -53,18 +55,19 @@

    const handleSetStatusVehicle = async() => {
        let vehicleData;
-        // console.log(statusSelected.value);
+        const currentDate = new Date();
+        const hours = currentDate.getHours().toString().padStart(2, '0');
+        const minutes = currentDate.getMinutes().toString().padStart(2, '0');
+        const seconds = currentDate.getSeconds().toString().padStart(2, '0');
        if(statusSelected.value === 'Availiable') {
-            // console.log('check validations');
            validations();
            if(errors.value.availableCity || errors.value.availableState || errors.value.destinoCity || errors.value.destinoState ) return;
            vehicleData = {
-				available_date : formAvailiable.available_date,
+				available_date : new Date(`${formAvailiable.available_date}T${hours}:${minutes}:${seconds}`).toISOString(),
                destino: formAvailiable.destinoCity.city_name + ';' + formAvailiable.destinoState.state_name,
                available_in: formAvailiable.availableCity.city_name + ';' + formAvailiable.availableState.state_name,
                is_available : true
 			}
-            console.log(vehicleData);
        } else {
            vehicleData = {
 				available_date : null,
@@ -73,7 +76,8 @@
        }
        let localData = {
            driver: props.vehicle.driver,
-            categories: props.vehicle.categories
+            categories: props.vehicle.categories,
+            active_load: props.vehicle.active_load,
        }
        loading.value = true;
        const result = await vehicleStore.updateVehicleCompany(props.vehicle._id, vehicleData, localData);
--- a/src/composables/useSearchVehicles.js
+++ b/src/composables/useSearchVehicles.js
@@ -0,0 +1,37 @@
+import { ref } from "vue";
+import api from "../lib/axios";
+
+export default function useSearchVehicles() {
+    const vehicles = ref([]);
+    const loading = ref(false);
+    const total = ref(0);
+    const currentPage = ref(0);
+
+    const getVehiclesPublished = async(filterQuery) => {
+        loading.value = true;
+        let filterArr = Object.values(filterQuery);
+        let cleanfilterArr =  filterArr.filter(n=>n);
+        var filterStr = "";
+        if(cleanfilterArr.length >0){
+            filterStr = "?"+cleanfilterArr.join("&");
+        }
+        try {
+            const endpoint = `/v1/vehicles/global/find${filterStr}&$sort[createdAt]=-1`;
+            const {data} = await api.get(endpoint);
+            total.value = data.total;
+            vehicles.value = data.data;
+        } catch (error) {
+            vehicles.value = [];
+            total.value = 0;
+        }
+        loading.value = false;
+    }
+
+    return {
+        getVehiclesPublished,
+        loading,
+        vehicles, 
+        total,
+        currentPage,
+    }
+}
--- a/src/composables/userSearchLoads.js
+++ b/src/composables/userSearchLoads.js
@@ -17,7 +17,7 @@ export default function useSearchLoads() {
        }
        try {
            const endpoint = `/v1/loads/find${filterStr}&$sort[createdAt]=-1`;
-            console.log(endpoint);
+            // console.log(endpoint);
            const {data} = await api.get(endpoint);
            total.value = data.total;
            loads.value = data.data;
--- a/src/helpers/date_formats.js
+++ b/src/helpers/date_formats.js
@@ -89,7 +89,7 @@ export const getDateTime = (value, hour) => {
 export const getDateOnly = (value) => {

  const date = new Date(value);
-  date.setHours(date.getHours());
+  date.setHours(date.getHours(), 0);

  // Obtener los componentes de la fecha
  const year = date.getFullYear();
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -336,7 +336,7 @@ const en = {
        loadingRetired: 'Withdrawing offer',
        msgTitleRetire: 'Offer withdrawn!',

-        title: 'My offers accepted',
+        title: 'Offers',
        retired: 'Retired',
        withdraw: 'Withdraw',

--- a/src/i18n/es.js
+++ b/src/i18n/es.js
@@ -170,7 +170,7 @@ const es = {
        shippers: 'Embarcadores',
        vehicles: 'Vehiculos',
        loads: 'Cargas',
-        acceptedOffers: 'Ofertas aceptadas',
+        acceptedOffers: 'Ofertas',
        calculator: 'Calculadora',
        cities: 'Ciudades',
        states: 'Estados',
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -148,6 +148,11 @@ const router = createRouter({
          name: 'search-loads',
          component: () => import('../views/SearchLoadsView.vue'),
        },
+        {
+          path: 'buscar-vehiclulos',
+          name: 'search-vehicles',
+          component: () => import('../views/SearchVehiclesView.vue'),
+        },
      ]
    }
  ]
--- a/src/services/company.js
+++ b/src/services/company.js
@@ -132,7 +132,7 @@ export const deleteBudget = async(id) => {

 export const getLocations = async(filter) => {
    try {
-        const endpoint = `/v1/branches/find${filter}&$sort%5BcreatedAt%5D=-1`;
+        const endpoint = `/v1/branches/find${filter}&$sort[createdAt]=1`;
        console.log(endpoint);
        const {data} = await api.get(endpoint);
        return data;
--- a/src/stores/company.js
+++ b/src/stores/company.js
@@ -318,14 +318,14 @@ export const useCompanyStore = defineStore('company', () => {

    const createLocationCompany = async(formData, localData) => {
        const data = await createLocation(formData);
-        if(data) {
+        if(data?.data) {
            locations.value.unshift({
-                ...data,
+                ...data?.data,
                ...localData
            });
            locationsTotal.value++;
            locationsLoads.value.unshift({
-                ...data,
+                ...data?.data,
                ...localData
            })
            return 'success';
--- a/src/stores/loads.js
+++ b/src/stores/loads.js
@@ -53,6 +53,7 @@ export const useLoadsStore = defineStore('load', () => {
        if(loads.value.length <= 0 || reload) {
            try {
                const endpoint = `/v1/loads/find?company=${companyid}&${filterStr}&$sort%5BcreatedAt%5D=-1`;
+                console.log(endpoint);
                const {data} = await api.get(endpoint);
                loads.value = data.data;
                loadsTotal.value = data.total;
--- a/src/stores/vehicles.js
+++ b/src/stores/vehicles.js
@@ -19,7 +19,7 @@ export const useVehiclesStore = defineStore('vehicles', () => {
        }
        if(vehicles.value.length <= 0 || reload === true) {
            const resp = await getVehicles(filterStr + '&$sort%5BcreatedAt%5D=-1');
-            console.log(resp);
+            // console.log(resp);
            if(resp !== null) {
                vehiclesTotal.value = resp.total;
                vehicles.value = resp.data;
--- a/src/views/CompleteRegisterView.vue
+++ b/src/views/CompleteRegisterView.vue
@@ -33,7 +33,7 @@

    const company = reactive({
        name: '',
-        rfc: 'USAL950402D96',
+        rfc: '',
        segments: [],
        states: [],
        cities: [],
--- a/src/views/LoadsPublishedView.vue
+++ b/src/views/LoadsPublishedView.vue
@@ -133,7 +133,7 @@
                    :key="load._id"
                    :load="load" 
                />
-                <CardEmpty v-else :text="t('loads.empty')"/>
+                <CardEmpty v-else :text="t('loads.empty')" class="mt-5"/>
                <Pagination
                    :limit="limit"
                    :total="loadStore.loadsTotal"
--- a/src/views/SearchLoadsView.vue
+++ b/src/views/SearchLoadsView.vue
@@ -204,7 +204,7 @@
            v-if="loads.length > 0" 
            v-for="load in loads"
            :load="load"
-            :read-only="false"
+            :read-only="true"
            @set-load="handleSetCurrentLoad(load)"
        />
        <CardEmpty 
--- a/src/views/SearchVehiclesView.vue
+++ b/src/views/SearchVehiclesView.vue
@@ -0,0 +1,226 @@
+<script setup>
+    import { onMounted, ref, watch } from 'vue';
+    import useSearchVehicles from '../composables/useSearchVehicles';
+    import Spiner from '../components/ui/Spiner.vue';
+    import CardVehicle from '../components/CardVehicle.vue';
+    import CardEmpty from '../components/CardEmpty.vue'
+    import TruckTypes from '../components/ui/TruckTypes.vue';
+    import Segments from '../components/ui/Segments.vue';
+    import States from '../components/ui/States.vue';
+    import Cities from '../components/ui/Cities.vue';
+    import Pagination from '../components/Pagination.vue';
+    import { useI18n } from 'vue-i18n';
+
+    const filterQuery = ref([]);
+    const query = ref('');
+    const selectedTruckType = ref([]);
+    const selectedCategory = ref([]);
+    const selectedState = ref([]);
+    const selectedCities = ref([]);
+    const limit = 10;
+    const isSearch = ref(false);
+    const { getVehiclesPublished, vehicles, loading, currentPage, total } = useSearchVehicles();
+
+    onMounted(() => {
+        getInitData();
+    });
+
+    const { t } = useI18n()
+
+    watch(query, () => {
+        isSearch.value = true;
+        setFilterUnlimited();
+        if(query.value.length === 0){
+            if(selectedCategory.value?.length === 0  && selectedTruckType.value?.length === 0 && selectedCities.value?.length === 0 && selectedState.value?.length === 0 ) {
+                clearRequest();
+                isSearch.value = false;
+            }
+            filterQuery.value.search = "";
+            getVehiclesPublished(filterQuery.value);
+        }
+    });
+
+    watch(selectedState, () => {
+        if(selectedState.value != null){
+            setFilterUnlimited()
+            filterQuery.value.state = "state[$in][]="+ selectedState.value.state_name;
+            getVehiclesPublished(filterQuery.value);
+        } 
+    });
+
+    watch(selectedCities, () => {
+        if(selectedCities.value != null){
+            setFilterUnlimited()
+            filterQuery.value.city = "city[$regex]="+ selectedCities.value.city_name;
+            getVehiclesPublished(filterQuery.value);
+        } 
+    });
+
+    watch(selectedCategory, () => {
+        if(selectedCategory.value != null){
+            setFilterUnlimited()
+            filterQuery.value.category = "categories[$in][]=" + selectedCategory.value._id;
+            getVehiclesPublished(filterQuery.value);
+        } 
+    });
+
+    watch(selectedTruckType, () => {
+        if(selectedTruckType.value != null){
+            setFilterUnlimited()
+            filterQuery.value.truck_type = "truck_type[$in][]="+ selectedTruckType.value.meta_value;
+            getVehiclesPublished(filterQuery.value);
+        } 
+    });
+
+    const search = () => {
+        if(query.value.length >= 2){
+            // filterQuery.value.search = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
+            filterQuery.value.search = `company_name[$regex]=${query.value}&company_name[$options]=i`;
+            getVehiclesPublished(filterQuery.value);
+        } 
+    
+    }
+
+    const clearFilter = () => {
+        clearRequest();
+        isSearch.value = false;
+        selectedCities.value = null;
+        selectedCategory.value = null;
+        selectedState.value = null;
+        selectedTruckType.value = null;
+
+        filterQuery.value.truck_type = "";
+        filterQuery.value.category = "";
+        filterQuery.value.city = "";
+        filterQuery.value.state = "";
+
+        filterQuery.value.status = "is_available=true";
+
+        if(query.value == ''){
+            getVehiclesPublished(filterQuery.value);
+        } else {
+            query.value = '';
+        }
+    }
+
+    const clearState = () => {
+        filterQuery.value.state = "";
+        getVehiclesPublished(filterQuery.value);
+    }
+
+    const clearCity = () => {
+        filterQuery.value.city = "";
+        getVehiclesPublished(filterQuery.value);
+    }
+
+    const clearTruckType = () => {
+        filterQuery.value.truck_type = "";
+        getVehiclesPublished(filterQuery.value);
+    }
+
+    const clearCategory = () => {
+        filterQuery.value.category = "";
+        getVehiclesPublished(filterQuery.value);
+    }
+
+    const getInitData = async() => {
+        filterQuery.value.limit = 'elements=' + limit;
+        filterQuery.value.page = "page=0";
+        filterQuery.value.company = "";
+
+        filterQuery.value.status = "is_available=true";
+        await getVehiclesPublished(filterQuery.value);
+    }
+
+    const getLoadsByPage = (data) => {
+        filterQuery.value.page = "page="+ data.page;
+        currentPage.value = data.page
+        getVehiclesPublished(filterQuery.value);
+    }
+
+    const clearRequest = () => {
+        filterQuery.value.page = "page="+ 0;
+        filterQuery.value.limit = "elements="+ limit;
+        currentPage.value = 0;
+    }
+
+    const setFilterUnlimited = () => {
+        filterQuery.value.page = "page="+ 0;
+        filterQuery.value.limit = "elements="+ 100;
+    }
+
+</script>
+
+<template>
+    <h2 class="title mb-5">{{ t('vehicles.search') }}</h2>
+
+    <div class="card-filters">
+        <div class="d-flex mb-2">
+            <input class="form-control me-2" type="search" name="" :placeholder="t('carriers.searchByCarrier')" id="" @:input="search()" v-model="query" aria-label="Search">
+            <button class="btn btn-outline-dark me-2" type="button" @click="search">{{ t('buttons.search') }}</button>
+            <button 
+                class="btn btn-danger" type="button" @click="clearFilter">
+                <i class="fa-solid fa-arrow-rotate-right"></i>
+            </button>
+        </div>
+        <div class="row">
+            <div class="col-xs-12 col-sm-6 px-2 py-2">
+                <TruckTypes v-model="selectedTruckType" @clear-option="clearTruckType"/>
+            </div>
+            <div class=" col-xs-12 col-sm-6 px-2 py-2">
+                <Segments v-model="selectedCategory" @clear-option="clearCategory"/>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12 col-sm-6 px-2 py-2">
+                <States v-model="selectedState" @clear-option="clearState"/>
+            </div>
+            <div class="col-xs-12 col-sm-6 px-2 py-2">
+                <Cities v-model="selectedCities" @clear-option="clearCity"/>
+            </div>
+        </div>
+    </div>
+    <Spiner class="mt-4" v-if="loading"/>
+    <div v-else>
+        <CardVehicle
+            v-if="vehicles.length > 0"
+            v-for="vehicle in vehicles"
+            :vehicle="vehicle"
+            :key="vehicle._id"
+            :read-only="true"
+        />
+        <CardEmpty 
+            v-else
+            text="No hay vehiculos publicadas"
+        />
+        <Pagination
+            v-if="!isSearch"
+            :limit="limit"
+            :total="total"
+            :current-page="currentPage"
+            @get-elements="getLoadsByPage"
+        />
+    </div>
+</template>
+
+<style scoped>
+    .card-filters {
+        display: flex;
+        margin: 0 auto;
+        background-color: #FFF;
+        border-radius: 13px;
+        /* background-color: red; */
+        flex-direction: column;
+        /* align-items: center; */
+        justify-content: center;
+        width: 100%;
+        padding: 20px 10%;
+        margin-bottom: 24px;
+    }
+
+    @media (max-width: 768px) {
+        .card-filters {
+            padding: 20px 16px;
+        }
+    }
+</style>
--- a/src/views/TrackingLoadView.vue
+++ b/src/views/TrackingLoadView.vue
@@ -94,7 +94,7 @@
    <Spiner v-if="loading"/>
    <div v-else>
        <div v-if="load">
-            <CardLoad :load="load" :read-only="true"/>
+            <CardLoad :load="load" :read-only="true" :tracking="false"/>
            <br/>
            <GoogleMap
                    :api-key="mapKey"