mod: store card & forgotten data

src/views/store/components/LoadStoreCard.vue

@@ -0,0 +1,70 @@
+<script setup>
+    import { useI18n } from 'vue-i18n';
+    import { getDateTime } from '../../../helpers/date_formats';
+    import { eventStatusLoad } from '../../../helpers/status';
+
+    const props = defineProps({
+        load: {
+            type: Object,
+            required: true
+        }
+    })
+
+    const { t } = useI18n()
+
+    const status = eventStatusLoad(props.load.status);
+</script>
+
+<template>
+   <div 
+        class="col-lg-6 col-12 mt-4"
+    >
+        <div class="card-info flex-d-column">
+            <div class="d-flex justify-content-between bg-white">
+                <div class="flex-direction-column">
+                    <h2>{{ load.shipment_code }}</h2>
+                    <p><span class="font-bold">{{ t('labels.date') }}: </span> {{ getDateTime(load.date, 0) }}</p>
+                    <p><span class="font-bold" >{{ t('global.company') }}: </span> {{ load.company }}</p>
+                    <p><span class="font-bold" >{{ t('loads.product') }}: </span> {{ load.product }}</p>
+                    <p><span class="font-bold" >{{ t('loads.weight') }}: </span> {{ load['weigth_load'] }} kg</p>
+                </div>
+                <div class="flex-direction-column">
+                    <p> <div class="indicator" :style="{backgroundColor: status.color}"></div> <strong :style="{color: status.color}">{{ status.status }}</strong></p>
+                    <p> <span class="font-bold">{{ t('directory.typeTruck') }}: </span> {{ load['truck_type'] }}</p>
+                    <p> <span class="font-bold">{{ t('vehicles.truckPlates') }}: </span> {{ load['truck_plates'] }}</p>
+                    <p> <span class="font-bold">{{ t('labels.driver') }}: </span> {{ load['driver_name'] }}</p>
+                </div>
+            </div>
+            <div class="box-note" v-if="load.note">
+                <span class="label"><i class="fa-solid fa-clipboard" style="color: #FBBA33; font-size: 1.1rem;"></i> Nota:</span>
+                <span>{{ load.note }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .indicator {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        display: inline-block;
+        margin-right: 0.5rem;
+    }
+    .box-note {
+        display: flex;
+        flex-direction: column;
+        padding: 0.8rem;
+        font-size: 1rem;
+        background-color: #FFF;
+        border-radius: 13px;
+        border: 1px solid #E5E5E5;
+        justify-content: center;
+    }
+
+    .label {
+        font-weight: bold;
+        font-size: 0.9rem;
+        color: #303233;
+    }
+</style>