add: Form create load

package-lock.json

@@ -13,7 +13,8 @@
         "sass": "^1.69.5",
         "vue": "^3.3.4",
         "vue-multiselect": "^3.0.0-beta.3",
-        "vue-router": "^4.2.5"
+        "vue-router": "^4.2.5",
+        "vue3-google-map": "^0.18.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.4.0",
@@ -383,6 +384,23 @@
         "node": ">=12"
       }
     },
+    "node_modules/@googlemaps/js-api-loader": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz",
+      "integrity": "sha512-psGw5u0QM6humao48Hn4lrChOM2/rA43ZCm3tKK9qQsEj1/VzqkCqnvGfEOshDbBQflydfaRovbKwZMF4AyqbA==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      }
+    },
+    "node_modules/@googlemaps/markerclusterer": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.5.1.tgz",
+      "integrity": "sha512-TLASLyWPoJiTdbuPtqIzQS8t/+JIvd+whoNkeSxWpP2eIoTscgsWt72Is3Cu5I68GuX3qn+oUSxqagFYc1O+wg==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "supercluster": "^8.0.1"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -646,6 +664,11 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -756,6 +779,11 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/kdbush": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
+    },
     "node_modules/magic-string": {
       "version": "0.30.5",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
@@ -960,6 +988,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "dependencies": {
+        "kdbush": "^4.0.2"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1068,6 +1104,22 @@
       "peerDependencies": {
         "vue": "^3.2.0"
       }
+    },
+    "node_modules/vue3-google-map": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/vue3-google-map/-/vue3-google-map-0.18.0.tgz",
+      "integrity": "sha512-dhDlXK5XxKxH3Mj6n6C7y99M5LRwPDHlgGWgfLkmzVMpwlxBhaSxDhSTaduAFUjeHVusEfYdPxJSSP7yPJr8sg==",
+      "dependencies": {
+        "@googlemaps/js-api-loader": "^1.16.2",
+        "@googlemaps/markerclusterer": "^2.4.0",
+        "fast-deep-equal": "^3.1.3"
+      },
+      "engines": {
+        "node": ">=16.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3"
+      }
     }
   }
 }

package.json

@@ -13,7 +13,8 @@
     "sass": "^1.69.5",
     "vue": "^3.3.4",
     "vue-multiselect": "^3.0.0-beta.3",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue3-google-map": "^0.18.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.4.0",

src/assets/main.css

@@ -182,6 +182,9 @@ td {
       font-size: 12px;
       font-weight: 300;
     }
+    .clear-md {
+        display: none;
+    }
   }
 
 @media (max-width: 768px) {
@@ -189,6 +192,11 @@ td {
         padding: 16px 16px;
     }
 
+    .card-fixed {
+        padding: 16px 16px;
+    }
+    
+
     .card-info h2{
         font-size: 1.2rem;
         font-weight: 700;
@@ -206,7 +214,7 @@ td {
     .btn-primary-lg {
         padding: 8px 15px;
         border: none;
-        border-radius: 13px;
+        border-radius: 8px;
         font-size: 16px;
         font-weight: 700;
     }
@@ -214,9 +222,13 @@ td {
         padding: 8px 12px;
         font-size: 14px;
         border: none;
-        border-radius: 13px;
+        border-radius: 8px;
         font-weight: 700;
     }
+
+    .clear-sm {
+        display: none !important;
+    }
 }
 
 @media (max-width: 568px) {

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>

src/composables/useAttachments.js

@@ -0,0 +1,30 @@
+import { ref } from "vue";
+import { useLoadsStore } from "../stores/loads";
+import api from "../lib/axios";
+
+export default function useAttachments() {
+
+    const loading = ref(false);
+    const attachments = ref(null);
+    const loadStore = useLoadsStore();
+
+    const getAttachmentLoad = async() => {
+        try {
+            loading.value = true;
+            const endpoint = "/v1" + "/load-attachments/load/" + loadStore.currentLoad._id;
+            const {data} = await api.get(endpoint);
+            attachments.value = data;
+        } catch (error) {
+            attachments.value = null;
+            console.log(error);
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    return {
+        getAttachmentLoad,
+        loading,
+        attachments
+    }
+}

src/helpers/status.js

@@ -0,0 +1,58 @@
+export const getStatusLoad = (load) => {
+    let status;
+    let color;
+    switch (load.load_status) {
+        case 'Published':
+            status = "Publicado";
+            color = "#000000";
+            break;
+        case 'Loading':
+            color = "#F44336";
+            status = "Cargando";
+            break;
+        case 'Transit':
+            status = "En Transito";
+            color = "#ffd22b"
+            break;
+        case 'Downloading':
+            status = "Descargando";
+            color = "#428502"
+            break;
+        case 'Delivered':
+            status = "Entregado";
+            color = "#000000";
+            break;
+        default:
+            status = 'Publicado';
+            color = "#428502";
+            break;
+    }
+    return {
+        status,
+        color,
+    };
+}
+
+export const getStatusPublished = (load) => {
+    let status;
+    switch (load.status) {
+        case 'Draft':
+            status = "Guardado";
+            break;
+        case 'Published':
+            status = "Publicado";
+            break;
+        case 'Completed':
+            status = "Conectado";
+            break;
+        case 'Closed':
+            status = "Completado";
+            break;
+        default:
+            status = 'Guardado';
+            break;
+    }
+    
+    return status;
+}
+

src/layouts/AdminLayout.vue

@@ -52,7 +52,7 @@
             width: 100wv !important;
         }
         .view {
-            margin: 24px 12px;
+            margin: 24px 0px;
         }
     }
 </style>

src/lib/axios.js

@@ -1,9 +1,12 @@
 import axios from "axios";
 
 const baseUrl = import.meta.env.VITE_API_URL;
-
+const accessToken = localStorage.getItem('access');
 const api = axios.create({
-    baseURL: baseUrl
+    baseURL: baseUrl,
+    headers: {
+        'Authorization': 'Bearer ' + accessToken
+    }
 });
 
 export default api;

src/router/index.js

@@ -56,9 +56,9 @@ const router = createRouter({
           component: () => import('../views/LocationsView.vue'),
         },
         {
-          path: 'publicaciones',
+          path: 'camiones',
-          name: 'published',
+          name: 'published-trucks',
-          component: () => import('../views/PublishedView.vue'),
+          component: () => import('../views/TrucksPublishedView.vue'),
         },
         {
           path: 'usuarios',
@@ -82,8 +82,8 @@ const router = createRouter({
         },
         {
           path: 'cargas',
-          name: 'loads',
+          name: 'published-loads',
-          component: () => import('../views/LoadsView.vue'),
+          component: () => import('../views/LoadsPublishedView.vue'),
         },
         {
           path: 'vehiculos',

src/services/auth.js

@@ -38,7 +38,7 @@ export const renewToken = async() => {
     try {
         const endpoint = `/v1/account/authorize/${session}`;
         const {data} = await api.get(endpoint);
-        console.log(data.user);
+        console.log(data);
         if(data.accessToken !== null){
             return {
                 msg: 'success',

src/services/company.js

@@ -21,4 +21,15 @@ export const editCompany = async(companyId, formData) => {
         console.log(error);
         return null;
     }
-}
+}
+
+// export const editCompany = async(companyId, formData) => {
+//     try {
+//         const endpoint = `/companies/${companyId}`;
+//         const {data} = await api.patch(endpoint, formData);
+//         return data;
+//     } catch (error) {
+//         console.log(error);
+//         return null;
+//     }
+// }

src/services/public.js

@@ -76,7 +76,7 @@ export const getUsersCompany = async(filter) => {
 
 export const getSettingsQuery = async(filter) => {
     try {
-        const endpoint = "/meta-data/find?regex=" + filter.query;
+        const endpoint = "/v1/meta-data/find?regex=" + filter.query;
         const {data} = await api.get(endpoint);
         return data.data;
     } catch (error) {
@@ -96,6 +96,17 @@ export const searchcategories = async(query) => {
     }
 }
 
+export const searchProducts = async(query) => {
+    try {
+        const endpoint = "/products/?name[$regex]=" + query + "&name[$options]=i";
+        const {data} = await api.get(endpoint);
+        return data.data;
+    } catch (error) {
+        console.log(error);
+        return [];
+    }
+}
+
 export const searchstates = async(query) => {
     try {
         const endpoint = "/v1/states/find?regex=" + query;
@@ -110,7 +121,7 @@ export const searchstates = async(query) => {
 export const searchcities = async(query) => {
     try {
         // const endpoint = "/cities/?city_name[$regex]=" + query + "&city_name[$options]=i";
-        const endpoint = "/cities/find?regex=" + query;
+        const endpoint = "/v1/cities/find?regex=" + query;
         const {data} = await api.get(endpoint);
         return data.data;
     } catch (error) {

src/stores/auth.js

@@ -32,6 +32,8 @@ export const useAuthStore = defineStore('auth', () => {
                 sesion.value = resp.data.session_token;
                 token.value = resp.data.accessToken;
                 localStorage.setItem('session', resp.data.session_token);
+                localStorage.setItem('access', resp.data.accessToken);
+                localStorage.setItem('id', resp.data.user.company);
                 checking.value = false;
             } else {
                 noty.show = true;
@@ -53,6 +55,8 @@ export const useAuthStore = defineStore('auth', () => {
     const logout = () => {
         
         localStorage.removeItem('session');
+        localStorage.removeItem('access');
+        localStorage.removeItem('id');
         company.clear();
         router.push({name: 'login'});
         sesion.value = '';

src/stores/company.js

@@ -1,22 +1,22 @@
 import { defineStore } from "pinia";
-import { ref, watch, onMounted } from "vue";
+import { ref } from "vue";
 import { useAuthStore } from "./auth";
 import { getCompany } from "../services/company";
+import api from "../lib/axios";
 
 export const useCompanyStore = defineStore('company', () => {
 
-    const auth = useAuthStore();
+    const companyid = localStorage.getItem('id');
     const company = ref(null)
+    const loads = ref([])
+    const proposals = ref([])
     const loading = ref(false);
 
     const getCompanyData = async() => {
         loading.value = true;
         if(!company.value) {
-            console.log('Se ejecuta');
             loading.value = true;
-            const companyId = auth.user?.company;
+            const resp = await getCompany(companyid);
-            console.log({companyId});
-            const resp = await getCompany(companyId);
             console.log(resp);
             company.value = resp;
         }
@@ -28,11 +28,49 @@ export const useCompanyStore = defineStore('company', () => {
         loading.value = false;
     }
 
+    const getCompanyLoads = async(filterQuery) => {
+		let filterArr = Object.values(filterQuery);
+        let cleanfilterArr =  filterArr.filter(n=>n);
+        var filterStr = "";
+        if(cleanfilterArr.length >0){
+            filterStr = cleanfilterArr.join("&");
+        }
+        console.log(filterStr);
+        try {
+            const endpoint = `/loads?company=${companyid}&${filterStr}`;
+            console.log(endpoint);
+            const {data} = await api.get(endpoint);
+            loads.value = data.data;
+        } catch (error) {
+            loads.value = [];
+            console.log(error);
+        }
+    }
+
+    ///loads?company=64fa70c130d2650011ac4f3a&status[$ne]=Closed,posted_by_name[$regex]=ju&posted_by_name[$options]=i
+
+    const getProposalsCompany = async() => {
+        try {
+            const endpoint = `/proposals?carrier=${companyid}`;
+            console.log(endpoint);
+            const {data} = await api.get(endpoint);
+            proposals.value = data.data;
+            console.log(data);
+        } catch (error) {
+            proposals.value = [];
+            console.log(error);
+        }
+    }
+
 
    return {
-        company,
+       getCompanyData,
-        loading,
+       getCompanyLoads,
-        getCompanyData,
+       getProposalsCompany,
-        clear
+       clear,
+       loading,
+       loads,
+       proposals,
+       company,
    }
 });

src/stores/loads.js

@@ -0,0 +1,11 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useLoadsStore = defineStore('load', () => {
+
+   const currentLoad = ref(null);
+
+   return {
+       currentLoad
+   }
+});

src/views/LoadsPublishedView.vue

@@ -0,0 +1,142 @@
+<script setup>
+    import { onMounted, ref, watch } from 'vue';
+    import { useCompanyStore } from '../stores/company';
+    import Spiner from '../components/ui/Spiner.vue';
+    import CardLoad from '../components/CardLoad.vue';
+    import AttachmentsModal from '../components/AttachmentsModal.vue';
+    import { useLoadsStore } from '../stores/loads';
+    import FormLoadModal from '../components/FormLoadModal.vue';
+
+    const companyStore = useCompanyStore();
+    const loadStore = useLoadsStore();
+    const loading = ref(false);
+    const query = ref('');
+    const filterQuery = ref([]);
+
+    onMounted(() =>{
+        getDataLoadsInit();
+    })
+
+    watch(query, () => {
+        if(query.value.length === 0){
+            filterQuery.value.search = "";
+            getLoadWithFilters(filterQuery.value);
+        }
+    });
+
+    const getDataLoadsInit = async() => {
+        filterQuery.value.status = "status[$ne]="+"Closed";
+        loading.value = true;
+        await companyStore.getCompanyLoads(filterQuery.value);
+        loading.value = false;
+    }
+    
+    const getLoadWithFilters = async(filter) => {
+        loading.value = true;
+        await companyStore.getCompanyLoads(filter);
+        loading.value = false;
+    }
+
+    const search = () => {
+        if(query.value.length >= 2){
+            // filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
+            filterQuery.value.search = "posted_by_name[$regex]="+query.value+"&posted_by_name[$options]=i";
+            getLoadWithFilters(filterQuery.value);
+        } 
+    
+    }
+
+    const clearFilter = () => {
+        filterQuery.value.search = ""
+        filterQuery.value.status = "status[$ne]="+"Closed";
+
+        if(query.value == ''){
+            getDataLoadsInit();
+        } else {
+            query.value = '';
+        }
+    }
+
+    const loadHistory = () => {
+        filterQuery.value.status = ""
+        filterQuery.value.status = "status="+ "Closed";
+        getLoadWithFilters(filterQuery.value);
+    }
+</script>
+
+<template>
+    <AttachmentsModal v-if="loadStore.currentLoad"/>
+    <FormLoadModal/>
+    <div>
+        <h2 class="title mb-5">Mis cargas publicadas</h2>
+        <div>
+            <div class="box-filters">
+                <div class="box-search">
+                    <input class="form-control custom-search" type="search" name="" placeholder="Nombre de la persona que publica" id="" @:input="search()" v-model="query" aria-label="Search">
+                </div>
+                <button 
+                    class="btn btn-danger bg-dark" type="button" @click="clearFilter">
+                    <i class="fa-solid fa-arrow-rotate-right"></i>
+                    <span class="clear-sm"> Reset</span><span class="clear-md"> filtros</span>
+                </button>
+                <button
+                    @click="loadHistory"
+                    class="btn-primary-sm radius-sm"
+                ><i class="fa-solid fa-clock-rotate-left"></i><span class="clear-sm"> Historial</span><span class="clear-md"> de cargas</span></button>
+                <button
+                    class="btn-primary-sm radius-sm"
+                    data-toggle="modal" data-target="#formLoadModal"
+                ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Crear</span><span class="clear-md"> carga</span></button>
+            </div>
+            <Spiner v-if="loading"/>
+            <CardLoad 
+                v-else
+                v-for="load in companyStore.loads"
+                :key="load._id"
+                :load="load" 
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .box-filters {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        gap: 1rem;
+    }
+
+    .box-search {
+        width: 40%;
+    }
+
+    .radius-sm{
+        border-radius: 5px;
+    }
+
+    .custom-search {
+        width: 100%;
+        padding: 12px 20px;
+    }
+
+    @media (max-width: 1024px) {
+        .box-search {
+            width: 50%;
+        }
+        .box-filters {
+            gap: .4rem;
+        }
+    }
+
+    @media (max-width: 768px) {
+
+        .box-search {
+            width: 100%;
+        }
+        .box-filters {
+            gap: .3rem;
+        }
+    }
+
+</style>

src/views/LoadsView.vue

@@ -1,13 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-    <div>
-        <h2 class="title">Cargas</h2>
-    </div>
-</template>
-
-<style scoped>
-
-</style>

src/views/LoginView.vue

@@ -8,7 +8,6 @@
     import { RouterLink, useRouter } from 'vue-router';
     import { useAuthStore } from '../stores/auth';
 
-
     const form = reactive({
         email: 'alexandrous.dev@gmail.com',
         password: 'Password0',
@@ -41,6 +40,8 @@
                 console.log(resp.data.user);
                 if(resp.data.user.first_name && resp.data.user.last_name) {
                     localStorage.setItem('session', resp.data.session_token);
+                    localStorage.setItem('access', resp.data.accessToken);
+                    localStorage.setItem('id', resp.data.user.company);
                     router.push({name: 'home'});
                     auth.$patch({
                         sesion: resp.data.session_token,

src/views/PublishedView.vue

@@ -1,13 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-    <div>
-        <h2 class="title">Mis publicaciones</h2>
-    </div>
-</template>
-
-<style scoped>
-
-</style>

src/views/TrucksPublishedView.vue

@@ -0,0 +1,36 @@
+<script setup>
+    import { onMounted, ref } from 'vue';
+    import { useCompanyStore } from '../stores/company';
+    import Spiner from '../components/ui/Spiner.vue';
+    import CardProposal from '../components/CardProposal.vue';
+
+    const companyStore = useCompanyStore();
+    const loading = ref(false);
+
+    onMounted(() =>{
+        getInitData();
+    })
+
+    const getInitData = async() => {
+        loading.value = true;
+        await companyStore.getProposalsCompany();
+        loading.value = false;
+    }
+</script>
+
+<template>
+    <div>
+        <h2 class="title mb-5">Mis vehiculos publicadas</h2>
+        <Spiner v-if="loading"/>
+        <CardProposal 
+            v-else
+            v-for="proposal in companyStore.proposals"
+            :key="proposal._id"
+            :proposal="proposal" 
+        />
+    </div>
+</template>
+
+<style scoped>
+
+</style>