add: Form create load

src/components/AttachmentsModal.vue

@@ -0,0 +1,97 @@
+<script setup>
+    import { onMounted } from 'vue';
+    import useAttachments from '../composables/useAttachments';
+    import Spiner from './ui/Spiner.vue';
+    import { useLoadsStore } from '../stores/loads';
+
+    const loadStore = useLoadsStore();
+    const { getAttachmentLoad, loading, attachments } = useAttachments();
+
+    onMounted(() => {
+        getAttachmentLoad();
+    })
+
+    const clearLoad = () => {
+        loadStore.currentLoad = null;
+    }
+
+</script>
+
+<template>
+    <div class="modal fade" id="attachmentModal" tabindex="-1" role="dialog" aria-labelledby="attachmentModal" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+            <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="title mt-2 mb-3">Evidencias adjuntas</h2>
+                <button 
+                    id="btnCloseAttachmentModal" 
+                    type="button" 
+                    class="close bg-white" 
+                    data-dismiss="modal" 
+                    @click="clearLoad"
+                    aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <Spiner v-if="loading"/>
+                <div v-else>
+                    <div v-if="!attachments || attachments.total == 0" class="card-body">
+                        <p class="empty">No hay evidencias subidas</p>
+                    </div>
+                    <div  v-else class="card-body">
+                        <div class="attachment" v-for="data in attachments.data">
+                            <p v-if="data.type == 'Loading'">Evidencia de carga</p>
+                            <p v-else>Evidencia de descarga</p>
+                            <img 
+                                :src="`https://api.etaviaporte.com/api/v1/public-load-attachments/download/${data._id}`" 
+                                :alt="data.type"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button 
+                    type="button" 
+                    class="btn btn-dark" 
+                    @click="clearLoad"
+                    data-dismiss="modal">Cerrar</button>
+            </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .attachment {
+        width: 100%;
+        /* border: 1px #e9e9e9 solid; */
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        margin-bottom: 20px;
+        border-radius: 13px;
+        align-content: center;
+        align-items: center;
+        box-shadow: 3px 5px 10px 5px rgba(0,0,0,0.10);
+        -webkit-box-shadow: 3px 5px 10px 5px rgba(0,0,0,0.10);
+        -moz-box-shadow: 3px 5px 10px 5px rgba(0,0,0,0.10);
+
+    }
+
+    .attachment p {
+    font-size: 1rem;
+    font-weight: 900;
+    color: black;
+    }
+
+    .attachment img {
+        width: 50%;
+        justify-content: center;
+        align-items: center;
+        margin: 0 auto;
+        align-content: center;
+    }
+
+</style>

src/components/CardLoad.vue

@@ -0,0 +1,142 @@
+<script setup>
+    import { getDateMonthDay } from '../helpers/date_formats';
+    import { getStatusPublished } from '../helpers/status';
+    import { getStatusLoad } from '../helpers/status';
+    import { useLoadsStore } from '../stores/loads';
+
+    const loadsStore = useLoadsStore();
+
+    const props = defineProps({
+        load: {
+            type: Object,
+            required: true,
+        }
+    })
+
+    const setLoad = () => {
+        loadsStore.currentLoad = props.load;
+    }
+
+</script>
+
+<template>
+    <div class="card-fixed card-load mt-4">
+        <div class="row">
+            <div class="col-lg-6 col-sm-12">
+                <p><span>Origen:</span> {{ load.origin.company_name }}, {{ load.origin_formatted_address }}</p>
+                <p><span>Destino:</span> {{ load.destination.company_name }}, {{ load.destination_formatted_address }}</p>
+            </div>
+            <div class="col-lg-6 col-sm-12">
+                <p><span>Status de la publicación:</span> <span>{{ getStatusPublished(load) }}</span></p>
+                <p :style="{color: getStatusLoad(load).color}"><span>Status de la carga:</span> <span>{{ getStatusLoad(load).status }}</span></p>
+            </div>
+        </div>
+        <div class="divider"></div>
+        <br>
+        <div class="row">
+            <div class="col-lg-4 col-sm-12">
+                <p><span>Tipo de camión: </span> {{ load.truck_type }}</p>
+                <p><span>Peso: </span> {{ load.weight }} KG</p>
+                <p><span>Fecha de carga: </span> {{ getDateMonthDay(load.est_loading_date) }}</p>
+            </div>
+            <div class="col-lg-4 col-sm-12">
+                <p><span>Producto: </span> {{ load?.product?.name }}</p>
+                <p><span>Costo real: </span> {{ load.actual_cost }}</p>
+                <p><span>Fecha de descarga: </span> {{getDateMonthDay(load.est_unloading_date)  }}</p>
+            </div>
+            <div class="col-lg-4 col-sm-12">
+                <p><span>Segmento: </span> {{ load._categories }}</p>
+                <p><span>Código de carga: </span> {{ load.shipment_code }}
+                    <span v-if="load.load_status !== 'Draft'" class="tracking-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg"  fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
+                        <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
+                        </svg>
+                    </span>
+                </p>
+                <p><span>Publicación hecha por: </span> {{ load.posted_by_name }}</p>
+            </div>
+        </div>
+        <p v-if="load.notes"><span>Notas adicionales:</span></p>
+        <div v-if="load.notes" class="box-note">
+            {{ load.notes }}
+        </div>
+        <div class="btn-row">
+            <button
+                class="btn-primary-sm bg-dark"
+                data-toggle="modal" data-target="#editcompanymodal"
+            ><i class="fa-solid fa-ban clear-sm"></i> Cancelar</button>
+            <button  v-if="load.status !== 'Draft' && load.load_status !== 'Published' && load.load_status !== 'Loading'" 
+                type="button" 
+                 data-toggle="modal" data-target="#attachmentModal" 
+                class="btn-primary-sm" 
+                @click="setLoad"
+            >
+                <i class="fa-solid fa-image"></i>
+                Evidencias
+            </button>
+            <button
+                class="btn-primary-sm"
+                data-toggle="modal" data-target="#editcompanymodal"
+            ><i class="fa-solid fa-pen-to-square clear-sm"></i> Editar carga</button>
+            <button
+                class="btn-primary-sm"
+                data-toggle="modal" data-target="#editcompanymodal"
+            >#{{ load.no_of_proposals }} Ofertas</button>
+        </div>
+    </div>
+</template>
+
+<style  scoped>
+    .card-load {
+        flex-direction: column;
+        width: 100% !important;
+    }
+
+    .tracking-icon {
+        cursor: pointer;
+        color: #f2a23f;
+    }
+
+    .tracking-icon svg{
+    height: 30px;
+    }
+    .tracking-icon:hover {
+        color: #ddb380;;
+        height: 150px;
+    }
+
+    .tracking-icon svg:hover{
+        height: 33px;
+    }
+
+    p {
+        font-size: 1rem;
+        font-weight: 400;
+        color: #323032;
+    }
+    
+    p span {
+        color: #323032;
+        font-weight: 700;
+    }
+
+    .btn-row {
+        margin-top: 2rem;
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        gap: 1rem;
+    }
+
+    .box-note {
+        padding: 12px 16px;
+        background-color: aqua;
+        border-radius: 13px;
+    }
+    
+    @media (max-width: 768px) {
+        .btn-row {
+            gap: 0.2rem;
+        }
+    }
+</style>

src/components/CardProposal.vue

@@ -0,0 +1,117 @@
+<script setup>
+    import { getDateMonthDay } from '../helpers/date_formats';
+    import { getStatusLoad } from '../helpers/status';
+
+    defineProps({
+        proposal: {
+            type: Object,
+            required: true,
+        }
+    })
+</script>
+
+<template>
+    <div class="card-fixed card-load mt-4">
+        <br>
+        <div class="box-proposal">
+            <div class="">
+                <p v-if="proposal.vehicle"><span>Código:</span> {{proposal.vehicle.vehicle_code}}</p>
+                <p v-if="proposal.vehicle"><span>Segmento:</span> {{proposal._categories}}</p>
+                <p v-if="proposal.vehicle"><span>Tipo de transporte:</span> {{proposal.vehicle.truck_type}}</p>
+                <p v-if="proposal.vehicle"><span>Fecha de publicación:</span> {{ getDateMonthDay(proposal.vehicle.published_date) }}</p>
+                <p v-if="proposal.vehicle"><span>Fecha dispobible:</span> {{ getDateMonthDay(proposal.vehicle.available_date) }}</p>
+                <p v-if="proposal.vehicle"><span>Disponible en:</span> {{proposal.vehicle.city}}<span v-if="proposal.vehicle.state">, {{proposal.vehicle.state}}</span></p>
+                <p v-if="proposal.vehicle"><span>Destino:</span> {{proposal.vehicle.destino}}</p>
+                <p v-if="proposal.vehicle"><span>Placas remolque 1:</span> {{proposal.vehicle.trailer_plate_1}}</p>
+                <p v-if="proposal.vehicle"><span>Placas remolque 2:</span> {{proposal.vehicle.trailer_plate_2}}</p>
+                <p v-if="proposal.vehicle" :style="{color: getStatusLoad(proposal.load).color}"><span>Status de la carga:</span> {{ getStatusLoad(proposal.load).status }}</p>
+            </div>
+            
+            <div class="">
+                <p v-if="proposal.load"> Código de carga: 
+                    <span 
+                        class="code-enruta"
+                    >{{proposal.load.shipment_code}}</span></p>
+                <p v-if="proposal._driver">Operator: {{proposal._driver}}</p>
+            </div>
+        </div>
+        <div class="btn-row">
+            <button
+                class="btn-primary-sm"
+                data-toggle="modal" data-target="#editcompanymodal"
+            ><i class="fa-solid fa-ban"></i> Retirar</button>
+            <button
+                class="btn-primary-sm"
+                data-toggle="modal" data-target="#editcompanymodal"
+            ><i class="fa-solid fa-pen-to-square"></i> Editar</button>
+            <button
+                class="btn-primary-sm"
+                data-toggle="modal" data-target="#editcompanymodal"
+            > Cancelar</button>
+        </div>
+    </div>
+</template>
+
+<style  scoped>
+    .card-load {
+        flex-direction: column;
+        width: 100% !important;
+    }
+
+    .box-proposal {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .tracking-icon {
+        cursor: pointer;
+        color: #f2a23f;
+    }
+
+    .tracking-icon svg{
+    height: 30px;
+    }
+    .tracking-icon:hover {
+        color: #ddb380;;
+        height: 150px;
+    }
+
+    .tracking-icon svg:hover{
+        height: 33px;
+    }
+
+    p {
+        font-size: 1rem;
+        font-weight: 400;
+        color: #323032;
+    }
+    
+    p span {
+        color: #323032;
+        font-weight: 700;
+    }
+
+    .btn-row {
+        margin-top: 2rem;
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        gap: 1rem;
+    }
+
+    .box-note {
+        padding: 8px 16px;
+        background-color: aqua;
+        border-radius: 13px;
+    }
+    
+    @media (max-width: 768px) {
+        .box-proposal {
+            flex-direction: column-reverse;
+        }
+        .btn-row {
+            gap: 0.2rem;
+        }
+    }
+</style>

src/components/FormLoadModal.vue

@@ -0,0 +1,376 @@
+<script setup>
+    import { onMounted, reactive, ref } from 'vue';
+    import { GoogleMap, Marker } from "vue3-google-map";
+    import { useLoadsStore } from '../stores/loads';
+    import Custominput from './ui/custominput.vue';
+    import Segments from './ui/Segments.vue';
+    import TruckTypes from './ui/TruckTypes.vue';
+    import Cities from './ui/Cities.vue';
+    import Products from './ui/Products.vue';
+
+
+    const props = defineProps({
+        load: {
+            type: Object,
+            required: false
+        }
+    })
+    // const startLocation = ref({query: 'C. 40 370, San Román, 97540 Izamal, Yuc.'});
+    // const endLocation = ref({query: 'Izamal-Valladolid, 97557 Sudzal, Yuc.'})
+    const startLocation = ref({ lat: 37.7749, lng: -122.4194 }); // San Francisco
+    const endLocation = ref({ lat: 34.0522, lng: -118.2437 }); // Los Angeles
+    const loadStore = useLoadsStore();
+    const windowWidth = ref(window.innerWidth);
+    const zoom = ref(6);
+    const heightMap = ref(768);
+
+    const clearLoad = () => {
+        loadStore.currentLoad = null;
+    }
+
+
+    const formLoad = reactive({
+        dateLoad: '',
+        dateDownload: '',
+        segment: [],
+        truckType: [],
+        terms: [],
+        price: 0,
+        weigth: 0,
+        notes: '',
+        owner: '',
+        locationNameOrigin: '',
+        addressOrigin: '',
+        stateOrigin: '',
+        cityOrigin: '',
+        countryOrigin: '',
+        postalCodeOrigin: '',
+        refOrigin: '',
+        locationNameDestination: '',
+        addressDestination: '',
+        stateDestination: '',
+        cityDestination: '',
+        countryDestination: '',
+        postalCodeDestination: '',
+        refDestination: '',
+    });
+
+    onMounted(() => {
+        window.addEventListener('resize', handleResize);
+
+        if(window.innerWidth <= 1024) {
+            zoom.value = 4;
+            heightMap.value = 420;
+        }
+    });  
+
+  const handleResize = () => {
+      windowWidth.value = window.innerWidth
+      if(windowWidth.value <= 1024){
+        zoom.value = 4
+        heightMap.value = 420;
+      } else {
+        zoom.value = 6;
+        heightMap.value = 768;
+      }
+  }
+
+  const onApiLoaded = () => {
+    const directionsService = new google.maps.DirectionsService();
+    const directionsRenderer = new google.maps.DirectionsRenderer();
+    directionsRenderer.setMap(mapRef.value.$map);
+    // Configurar solicitud de dirección
+    const request = {
+        origin: startLocation.value,
+        destination: endLocation.value,
+        travelMode: google.maps.TravelMode.DRIVING,
+    };
+    // Obtener ruta
+    directionsService.route(request, (response, status) => {
+        if (status === 'OK') {
+        directionsRenderer.setDirections(response);
+        } else {
+        console.error('Error al trazar la ruta:', status);
+        }
+    });
+    };
+
+</script>
+
+<template>
+    <div class="modal fade" id="formLoadModal" tabindex="-1" role="dialog" aria-labelledby="formLoadModal" aria-hidden="true">
+        <div class="modal-dialog modal-fullscreen modal-dialog-centered" role="document">
+            <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="title mt-2 mb-3">Crear nueva carga</h2>
+                <button 
+                    id="btnCloseFormLoadModal" 
+                    type="button" 
+                    class="close bg-white" 
+                    data-dismiss="modal" 
+                    @click="clearLoad"
+                    aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form class="form-content">
+                    <div class="form-box">
+                        <div class="form-section">
+                            <div class="mb-4 mt-3">
+                                <label class="custom-label">Segmento*</label>
+                                <TruckTypes
+                                    v-model="formLoad.truckType" 
+                                />
+                            </div>
+                            <div class="mb-4 mt-3">
+                                <label class="custom-label">Tipo de transporte*</label>
+                                <Segments
+                                    v-model="formLoad.segment" 
+                                />
+                            </div>
+                            <Custominput
+                                label="Fecha de carga*"
+                                type="date"
+                                :filled="false"
+                                name="date-load"
+                                v-model:field="formLoad.dateLoad"
+                            />
+                            <Custominput
+                                label="Fecha de descarga*"
+                                type="date"
+                                :filled="false"
+                                name="date-download"
+                                v-model:field="formLoad.dateDownload"
+                            />
+                            <Custominput
+                                label="Peso de la carga*"
+                                type="number"
+                                :filled="false"
+                                name="weight"
+                                v-model:field="formLoad.weigth"
+                            />
+                        </div>
+                        <div class="form-section">
+                            <div class="mb-4 mt-3">
+                                <label class="custom-label">Terminos*</label>
+                                <Products
+                                    v-model="formLoad.terms" 
+                                />
+                            </div>
+                            <Custominput
+                                label="Precio*"
+                                type="Number"
+                                :filled="false"
+                                name="price"
+                                v-model:field="formLoad.price"
+                            />
+                            <Custominput
+                                label="Notas"
+                                type="text"
+                                :filled="false"
+                                name="notes"
+                                v-model:field="formLoad.notes"
+                            />
+                            <Custominput
+                                label="Publicación hecha por*"
+                                type="text"
+                                :filled="false"
+                                name="owner"
+                                v-model:field="formLoad.owner"
+                            />
+                        </div>
+                    </div>
+                    <div class="form-box">
+                        <div class="form-section">
+                            <h2>Dirección de origen</h2>
+                            <Custominput
+                                label="Nombre locación de carga*"
+                                type="text"
+                                :filled="false"
+                                name="name-location-origin"
+                                v-model:field="formLoad.locationNameOrigin"
+                            />
+                            <Custominput
+                                label="Dirección*"
+                                type="text"
+                                :filled="false"
+                                name="address-origin"
+                                v-model:field="formLoad.addressOrigin"
+                            />
+                            <div class="mb-4 mt-3">
+                                <label class="custom-label">Ciudad*</label>
+                                <Cities
+                                    v-model="formLoad.cityOrigin" 
+                                />
+                            </div>
+                            <div class="mb-4 mt-3">
+                                <label class="custom-label">Estado*</label>
+                                <Cities
+                                    v-model="formLoad.stateOrigin" 
+                                />
+                            </div>
+                            <Custominput
+                                label="País*"
+                                type="text"
+                                :filled="false"
+                                name="country-origin"
+                                v-model:field="formLoad.countryOrigin"
+                            />
+                            <Custominput
+                                label="Código Postal*"
+                                type="text"
+                                :filled="false"
+                                name="postalCode-origin"
+                                v-model:field="formLoad.postalCodeOrigin"
+                            />
+                            <Custominput
+                                label="Punto de referencia"
+                                type="text"
+                                :filled="false"
+                                name="ref-origin"
+                                v-model:field="formLoad.refOrigin"
+                            />
+                        </div>
+                        <div class="form-section">
+                            <h2>Dirección de destino</h2>
+                            <Custominput
+                                label="Nombre locación de descarga*"
+                                type="text"
+                                :filled="false"
+                                name="name-location-destination"
+                                v-model:field="formLoad.locationNameDestination"
+                            />
+                            <Custominput
+                                label="Dirección"
+                                type="text"
+                                :filled="false"
+                                name="address-destination"
+                                v-model:field="formLoad.addressDestination"
+                            />
+                            <div class="mb-4 mt-3">
+                                <label class="custom-label">Ciudad*</label>
+                                <Cities
+                                    v-model="formLoad.cityDestination" 
+                                />
+                            </div>
+                            <div class="mb-4 mt-3">
+                                <label class="custom-label">Estado*</label>
+                                <Cities
+                                    v-model="formLoad.stateDestination" 
+                                />
+                            </div>
+                            <Custominput
+                                label="País*"
+                                type="text"
+                                :filled="false"
+                                name="country-destination"
+                                v-model:field="formLoad.countryDestination"
+                            />
+                            <Custominput
+                                label="Código Postal*"
+                                type="text"
+                                :filled="false"
+                                name="postalCode-destination"
+                                v-model:field="formLoad.postalCodeDestination"
+                            />
+                            <Custominput
+                                label="Punto de referencia"
+                                type="text"
+                                :filled="false"
+                                name="ref-destination"
+                                v-model:field="formLoad.refDestination"
+                            />
+                        </div>
+                    </div>
+                    <GoogleMap
+                        api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
+                        :center="{lat:19.432600, lng:-99.133209}"
+                        :zoom="zoom" 
+                        :min-zoom="2"
+                        :max-zoom="12"
+                        :style="{width: 100 + '%', height: heightMap + 'px'}"
+                        :options="{
+                            zoomControl: true,
+                            mapTypeControl: true,
+                            scaleControl: true,
+                            streetViewControl: true,
+                            rotateControl: true,
+                            fullscreenControl: true
+                        }"
+                        @api-loaded="onApiLoaded"
+                    >
+                        <Marker :options="{position: startLocation}" />
+                        <Marker :options="{position: endLocation}" />
+                    </GoogleMap>
+                </form>
+            </div>
+            <div class="modal-footer custom-footer">
+                <button 
+                    type="button" 
+                    class="btn btn-dark" 
+                    @click="clearLoad"
+                    data-dismiss="modal">Cerrar</button>
+                <button 
+                    type="button" 
+                    class="btn btn-dark" 
+                    @click=""
+                >Guardar</button>
+                <button 
+                    type="button" 
+                    class="btn-primary-sm radius-sm" 
+                    @click=""
+                >Publicar</button>
+            </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .form-content {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-content: center;
+        align-items: center;
+        margin: 0 auto;
+    }
+
+    .form-box {
+        width: 80%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 4rem;
+    }
+
+    .form-section {
+        width: 100%;
+    }
+
+    .custom-footer {
+        display: flex;
+        justify-content: center;
+    }
+
+    .radius-sm{
+        border-radius: 5px;
+    }
+
+    @media (max-width: 1024px) {
+        .form-box {
+            width: 95%;
+            gap: 2rem;
+        }
+    }
+
+    @media (max-width: 568px) {
+        .form-box {
+            width: 100%;
+            flex-direction: column;
+            gap: 2rem;
+        }
+    }
+</style>

src/components/NavBar.vue

@@ -21,11 +21,11 @@
                     <RouterLink 
                         v-if="auth.user?.permissions.includes('role_shipper')"
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'carriers'}">Transporte</RouterLink>
+                        class="nav-link" :to="{name: 'carriers'}">Transportistas</RouterLink>
                     <RouterLink 
                         v-if="auth.user?.permissions.includes('role_carrier')"
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'shippers'}">Cargas</RouterLink>
+                        class="nav-link" :to="{name: 'shippers'}">Embarcadores</RouterLink>
                 </div>
             </div>
     </nav>

src/components/Sidebar.vue

@@ -70,12 +70,20 @@
                         class="nav-link" :to="{name: 'vehicles'}">Vehiculos</RouterLink>
                 </div>
             </li>
-            <li :class="[route.name === 'published' ? 'bg-nav-active' : '']">
+            <li v-if="auth.user?.permissions.includes('role_shipper')" :class="[route.name === 'published-loads' ? 'bg-nav-active' : '']">
                 <div>
-                    <i class="fa-solid fa-bullhorn" :class="[route.name === 'published' ? 'router-link-active' : '']"></i>
+                    <i class="fa-solid fa-bullhorn" :class="[route.name === 'published-loads' ? 'router-link-active' : '']"></i>
                     <RouterLink 
                         active-class=""
-                        class="nav-link" :to="{name: 'published'}">Publicaciones</RouterLink>
+                        class="nav-link" :to="{name: 'published-loads'}">Publicaciones</RouterLink>
+                </div>
+            </li>
+            <li v-if="auth.user?.permissions.includes('role_carrier')" :class="[route.name === 'published-trucks' ? 'bg-nav-active' : '']">
+                <div>
+                    <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'}">Publicaciones</RouterLink>
                 </div>
             </li>
             <li :class="[route.name === 'calendar' ? 'bg-nav-active' : '']">
@@ -172,6 +180,11 @@
         margin-bottom: 5px;
         background-color: #323030;
     }
+    
+    .bg-nav-active {
+        opacity: 0.4;
+        transition: opacity 500ms ease-in-out;
+    }
 
     #sidebar ul li div{
         display: flex;
@@ -201,6 +214,10 @@
         margin-right: 1.2rem;
         font-weight: 500;
     }
+
+    .router-link-active{
+        color: #FFF;
+    }
     .nav-link:hover{
         /* color: #413f3c; */
         color: #FFF;

src/components/directionsRender.js

@@ -0,0 +1,38 @@
+export default function useDirectionRender() {
+
+    defineProps({
+        origin: { type: Object },
+        destination: { type: Object },
+        travelMode: { type: String },
+    })
+
+    const directionsRenderer = ref(null);
+    const directionsService = new window.google.maps.DirectionsService();
+
+    onMounted(() => {
+      directionsRenderer.value = new window.google.maps.DirectionsRenderer();
+
+      watch(
+        () => [props.origin, props.destination, props.travelMode],
+        () => {
+          const { origin, destination, travelMode } = props;
+          if (!origin || !destination || !travelMode) return;
+
+          directionsService.route(
+            {
+              origin,
+              destination,
+              travelMode,
+            },
+            (response, status) => {
+              if (status !== 'OK') return;
+              directionsRenderer.value.setDirections(response);
+            }
+          );
+        },
+        { immediate: true }
+      );
+    });
+
+    return { directionsRenderer };
+}

src/components/ui/CustomInput.vue

@@ -1,7 +1,7 @@
 <script setup>
     defineProps({
         field: {
-            type: String
+            type: [String, Number]
         },
         label: {
             type: String,

src/components/ui/LoadingModal.vue

@@ -17,6 +17,7 @@
 <style scoped>
     .noty-fixed {
         position: fixed;
+        z-index: 2000;
         right: 0px;
         top: 0px;
         left: 0px;

src/components/ui/Products.vue

@@ -0,0 +1,61 @@
+<script setup>
+    import { ref } from 'vue';
+    import VueMultiselect from 'vue-multiselect'
+    import { searchProducts } from '../../services/public';
+
+    const options = ref([]);
+    const isLoading = ref(false);
+
+    // defineProps(['selectedCategory']);
+    defineProps({
+        selectedProduct: {
+            type: Array
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        }
+    });
+    defineEmits(['update:selectedProduct', 'clear-option'])
+
+    const searchProductFn = async(query) => {
+        isLoading.value = true;
+        const resp = await searchProducts(query);
+        options.value = resp;
+        isLoading.value = false;
+        // truckTypes.value = resp;
+    }
+</script>
+
+<template>
+    <VueMultiselect
+        :value="selectedProduct"
+        @input="$event => $emit('update:selectedProduct', $event.target.value)"
+        :options="options"
+        :multiple="multiple"
+        :searchable="true"
+        :loading="isLoading"
+        :close-on-select="true"
+        @search-change="searchProductFn"
+        @remove="$emit('clear-option')"
+        placeholder="Busca por producto"
+        label="name"
+        track-by="name"
+        selectLabel="Presione para seleccionar"
+        selectedLabel="Selecionado"
+        deselectLabel="Presione para remover seleción"
+    >
+        <template #noResult>
+            Oops! No se encontro coincidencias.
+        </template>
+        <template #noOptions>
+            Lista vacia.
+        </template>
+    </VueMultiselect>
+</template>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
+<style scoped>
+
+</style>