add: services warehouse & fix modal carrierInfo

src/components/CardLoad.vue

@@ -90,6 +90,11 @@
         loadsStore.openProposalsModal = true;
     }
 
+    const openCarrierInfoModal = () => {
+        loadsStore.currentLoad = props.load
+        loadsStore.openCarrierInfoModal = true;
+    }
+
     const handleTracking = () => {
         let code = props.load._id;
         window.open('/publico/tracking/' + code, '_blank');
@@ -142,7 +147,18 @@
                     {{ load.company?.company_name }} 
                 </p>
                 <div v-if="!readOnly">
-                    <p><span>{{t('loads.postStatus')}}:</span> <span class="simple">{{ getStatusPublished(load) }}</span></p>
+                    <p>
+                        <span>{{t('loads.postStatus')}}: </span> 
+                        <span class="simple"> {{ getStatusPublished(load) }}</span>
+                        <i 
+                            v-if="load.status !== 'Draft' && load.status !== 'Published'"
+                            class="fa-solid fa-truck me-1 ms-1 pointer" 
+                            data-toggle="modal" 
+                            data-target="#carrierInfoModal"
+                            @click="openCarrierInfoModal()"
+                            style="color: green; font-size: 20px;"
+                        ></i>
+                    </p>
                     <p :style="{color: getStatusLoad(load).color}"><span>{{t('loads.loadStatus')}}:</span> <span class="simple">{{ getStatusLoad(load).status }}</span></p>
                 </div>
             </div>

src/components/CarrierInfoModal.vue

@@ -0,0 +1,109 @@
+<script setup>
+    import { getDateMonthDay } from '../helpers/date_formats';
+    import { useLoadsStore } from '../stores/loads';
+    import VehicleInfo from './VehicleInfo.vue';
+    import { useI18n } from 'vue-i18n';
+
+    const props = defineProps({
+        load: {
+            type: Object,
+            required: true
+        }
+    });
+
+    const { t } = useI18n();
+    const loadsStore = useLoadsStore();
+
+    const clearModal = () => {
+      loadsStore.currentLoad = null;
+      loadsStore.openCarrierInfoModal = false;
+    }
+    
+
+
+</script>
+
+<template>
+   <div class="modal fade" id="carrierInfoModal" tabindex="-1" role="dialog" aria-labelledby="editcompany" 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">Información del transportista</h2>
+                <button 
+                    id="btnCloseCarrierInfoModal" 
+                    type="button" 
+                    @click="clearModal()"
+                    class="close bg-white" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body view-proposals">
+                <div>
+                    <div class="row">
+                        <div class="col-lg-6 col-md-12">
+                            <p>{{ t('global.company') }}: <span>{{ load?.carrier?.company_name }}</span></p>
+                            <p>{{ t('proposals.bidder') }}: <span>{{ load?.bidder?.first_name }} {{ load?.bidder?.last_name }}</span></p>
+                            <p>{{ t('proposals.numCarrier') }}: <span>{{load?.carrier?.company_code}}</span></p>
+                        </div>
+                        <div class="col-lg-6 col-md-12">
+                            <p>{{ t('labels.date') }}: <span>{{ getDateMonthDay(load?.carrier?.createdAt) }}</span></p>
+                            <p>RFC: <span v-if="load.vehicle">{{load?.carrier?.rfc}}</span></p>
+                        </div>
+                    </div>
+                    <VehicleInfo 
+                        v-if="load.vehicle" 
+                        :vehicle="load.vehicle"
+                        :driver="load.driver"
+                    />
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button 
+                    type="button" 
+                    class="btn btn-dark" 
+                    @click="clearModal()"
+                    data-dismiss="modal">{{ t('buttons.close') }}</button>
+            </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+    .view-proposals {
+        width: 100%;
+    }
+
+    .card-proposal {
+        flex-direction: column;
+        width: 100% !important;
+    }
+
+    p {
+        font-size: 1rem;
+        font-weight: 400;
+        color: #323032;
+        font-weight: 700;
+    }
+    
+    p span {
+        color: #323032;
+        font-weight: normal;
+    }
+
+    .indicator-check {
+        width: 120px;
+        padding: 10px 12px;
+        background: #FFF;
+        border: 1px solid green;
+        border-radius: 50px;
+        color: green;
+    }
+
+    .box-note {
+        padding: 12px 16px;
+        background-color: aqua;
+        border-radius: 13px;
+    }
+</style>

src/components/ProposalsModal.vue

@@ -22,6 +22,7 @@
     const getProposalsData = async() => {
         isLoading.value = true;
         await loadsStore.getProposalsOfLoads(loadsStore.currentLoad._id);
+        console.log(loadsStore.proposalsOfLoads)
         isLoading.value = false;
     }
 
@@ -185,18 +186,21 @@
                             <div class="col-lg-6 col-md-12">
                                 <p>{{ t('global.company') }}: <span>{{ proposal.carrier.company_name }}</span></p>
                                 <p>{{ t('proposals.bidder') }}: <span>{{ proposal.bidder.first_name }} {{ proposal.bidder.last_name }}</span></p>
-                                <p>{{ t('proposals.numCarrier') }}: <span v-if="proposal.vehicle">{{proposal.vehicle.vehicle_code}}</span></p>
+                                <p>{{ t('proposals.numCarrier') }}: <span>{{proposal.carrier.company_code}}</span></p>
                             </div>
                             <div class="col-lg-6 col-md-12">
-                                <p>{{ t('labels.date') }}: <span>{{ getDateMonthDay(proposal.createdAt) }}</span></p>
-                                <p>{{ t('directory.typeTruck') }}: <span v-if="proposal.vehicle">{{proposal.vehicle.truck_type}}</span></p>
-                                <p>{{ t('global.carrier')  }}: <span v-if="proposal._driver">{{proposal._driver}}</span></p>
+                                <p>{{ t('labels.date') }}: <span>{{ getDateMonthDay(proposal.carrier.createdAt) }}</span></p>
+                                <p>RFC: <span>{{proposal.carrier.rfc}}</span></p>
                             </div>
                         </div>
                         <div v-if="proposal.comment" class="box-note">
                             {{ proposal.comment }}
                         </div>
-                        <VehicleInfo v-if="proposal.vehicle" :vehicle="proposal.vehicle"/>
+                        <VehicleInfo 
+                            v-if="proposal.vehicle" 
+                            :vehicle="proposal.vehicle"
+                            :driver="proposal.driver"
+                        />
                         <Spiner v-if="isLoadingActions"/>
                         <div class="d-flex justify-content-end gap-3" v-else>
                             <div v-if="proposal.is_accepted" class="indicator-check">

src/components/VehicleInfo.vue

@@ -1,11 +1,16 @@
 <script setup>
+import { computed } from 'vue';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-    defineProps({
+    const props = defineProps({
         vehicle: {
             type: Object,
             required: true
+        },
+        driver: {
+            type: Object,
+            required: false
         }
     })
 
@@ -16,6 +21,16 @@ import { useI18n } from 'vue-i18n';
     const toogle = () => {
         isShow.value = !isShow.value;
     }
+
+    const driver = computed(() => {
+        console.log(props.driver);
+        if(props?.driver) {
+            return !props?.driver ? 'No definido'
+                : props?.driver.first_name + ' ' + props?.driver.last_name
+        } else {
+            return props.vehicle.driver.first_name + ' ' + props.vehicle.driver.last_name;            
+        }
+    });
 </script>
 
 <template>
@@ -31,7 +46,7 @@ import { useI18n } from 'vue-i18n';
             <div class="col-lg-6">
                 <p>{{ t('labels.codeId') }}: <span>{{ vehicle.vehicle_code.toUpperCase() }}</span></p>
                 <p>{{ t('directory.typeTruck') }}: <span>{{ vehicle.truck_type }}</span></p>
-                <p>{{ t('vehicles.assignedDriver') }}: <span>{{ vehicle.driver.first_name + ' ' + vehicle.driver.last_name }}</span></p>
+                <p>{{ t('vehicles.assignedDriver') }}: <span>{{ driver }}</span></p>
                 <p>{{ t('global.segment') }}: <span>{{ vehicle._categories }}</span></p>
             </div>
             <div class="col-lg-6">