add: proposal status in card

src/components/AttachmentsModal.vue

@@ -5,6 +5,8 @@
     import { useLoadsStore } from '../stores/loads';
     import { useI18n } from 'vue-i18n';
 
+    const baseUrl = import.meta.env.VITE_API_URL;
+
     const loadStore = useLoadsStore();
     const { getAttachmentLoad, loading, attachments } = useAttachments();
 
@@ -46,7 +48,7 @@
                             <p v-if="data.type == 'Loading'">{{ t('evidence.loadEvidence') }}</p>
                             <p v-else>{{ t('evidence.downloadEvidence') }}</p>
                             <img 
-                                :src="`https://api.etaviaporte.com/api/v1/public-load-attachments/download/${data._id}`" 
+                                :src="`${baseUrl}/v1/public-load-attachments/download/${data._id}`" 
                                 :alt="data.type"
                             />
                         </div>

src/i18n/en.js

@@ -25,6 +25,7 @@ const en = {
         phone2: 'Phone 2',
         typeCompany: 'Type of company',
         codeId: 'Code',
+        codeVehilce: 'Vehicle code',
         dateMembership: 'Company member since',
         segmentsCompany: 'Company segments',
         locationLoadState: 'Load locations by state',

src/i18n/es.js

@@ -28,6 +28,7 @@ const es = {
         phone2: 'Teléfono 2',
         typeCompany: 'Tipo de empresa',
         codeId: 'Código',
+        codeVehilce: 'Código del vehiculo',
         dateMembership: 'Empresa miembro desde',
         segmentsCompany: 'Segmentos de la empresa',
         locationLoadState: 'Ubicaciones de carga por estado',

src/views/proposals/components/CardProposal.vue

@@ -81,6 +81,30 @@
 
     const enablePermission = computed(() => props.proposal?.load?.load_status === 'Published' 
         && (authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'));
+
+    const status = computed(() => {
+        if(props.proposal.is_withdrawn) {
+            return {
+                name: 'Oferta rechazada',
+                color: 'red'
+            }
+        } else if (props.proposal.is_completed) {
+            return {
+                name: 'Oferta finalizada',
+                color: 'blue'
+            }
+        } else if (props.proposal.is_accepted) {
+            return {
+                name: 'Oferta aceptada',
+                color: 'green'
+            }
+        } else {
+            return {
+                name: 'Oferta en espera',
+                color: 'gray'
+            }
+        }
+    });
 </script>
 
 <template>
@@ -88,13 +112,17 @@
         <br>
         <div class="box-proposal">
             <div v-if="proposal.vehicle">
-                <p v-if="proposal.vehicle"><span>{{ t('labels.codeId') }}:</span> {{proposal.vehicle.vehicle_code?.toUpperCase()}}</p>
+                <p v-if="proposal.vehicle"><span>{{ t('labels.codeVehilce') }}:</span> {{proposal.vehicle.vehicle_code?.toUpperCase()}}</p>
                 <p v-if="proposal.load"><span>{{ t('global.segment') }}:</span> {{proposal.load.categories?.map((e) => e.name).join(', ')}}</p>
                 <p v-if="proposal.vehicle"><span>{{ t('directory.typeTruck') }}:</span> {{proposal.vehicle.truck_type}}</p>
                 <p v-if="proposal.vehicle?.published_date"><span>{{ t('labels.datePublished') }}:</span> {{ getDayMonthYear(proposal.vehicle.published_date) }}</p>
                 <p v-if="proposal.vehicle?.is_available"><span>{{ t('labels.dateAvailable') }}:</span> {{ getDayMonthYear(proposal.vehicle.available_date) }}</p>
                 <p v-if="proposal.vehicle?.is_available"><span>{{ t('vehicles.availableIn') }}:</span> {{proposal.vehicle.city}}<template v-if="proposal.vehicle.state">, {{proposal.vehicle.state}}</template></p>
                 <p v-if="proposal.vehicle"><span>{{ t('loads.destination') }}:</span> {{proposal.vehicle?.destino.replace(';', ', ')}}</p>
+                <p v-if="proposal.vehicle?.driver">
+                    <span>{{ t('labels.driver') }}:</span> 
+                    {{proposal.vehicle?.driver.first_name}} {{proposal.vehicle?.driver.last_name}}
+                </p>
                 <p v-if="proposal.vehicle?.circulation_serial_number"><span>{{ t('vehicles.truckPlates') }}:</span> {{ proposal.vehicle?.circulation_serial_number }}</p>
                 <p v-if="proposal.vehicle"><span>{{ t('vehicles.trailerPlates') }} 1:</span> {{proposal.vehicle.trailer_plate_1}}</p>
                 <p v-if="proposal.vehicle"><span>{{ t('vehicles.trailerPlates') }} 2:</span> {{proposal.vehicle.trailer_plate_2}}</p>
@@ -136,7 +164,14 @@
                 </p>
                 <p v-if="proposal.vehicle" :style="{color: getStatusLoad(proposal.load, locale).color, fontWeight: 'bold'}"><span>{{  t('loads.loadStatus') }}:</span> {{ getStatusLoad(proposal.load, locale).status}}</p>
                 <p v-if="proposal._driver">{{ t('labels.operator') }}: {{proposal._driver}}</p>
-
+                <p>
+                    <span>Status de la oferta: </span> 
+                    <span :style="{color: status.color}"> {{ status.name }} 
+                        <i v-if="status.name === 'Oferta aceptada'" class="fa-solid fa-circle-check icon"></i>
+                        <i v-if="status.name === 'Oferta finalizada'" class="fa-solid fa-check-double icon"></i>
+                        <i v-if="status.name === 'Oferta rechazada'" class="fa-solid fa-circle-xmark icon"></i>
+                    </span>
+                </p>
             </div>
             <div v-else
                 class="no-data"
@@ -267,7 +302,9 @@
         font-size: 2.5rem;
         color: #e3a11e;
     }
-    
+    .icon {
+        font-size: 1.4rem;
+    }
     @media (max-width: 768px) {
         .box-proposal {
             flex-direction: column-reverse;