mod: store card & forgotten data

src/assets/main.css

@@ -3,6 +3,11 @@ body {
     padding: 0px;
 }
 
+.flex-d-column {
+    display: flex;
+    flex-direction: column;
+}
+
 .w-lg-45{
     width: 45%;
 }

src/data/store-dumies.json

@@ -4,8 +4,11 @@
         "date": "2025-01-08T03:24:18.821Z",
         "shipment_code": "ETA1010",
         "product": "Maiz",
-        "truck-plates": "YUC9101",
+        "truck_type": "Torton",
-        "driver-name": "Alexandro Uc",
+        "truck_plates": "YUC9101",
+        "driver_name": "Alexandro Uc",
+        "note": "Comentario de prueba",
+        "weigth_load": 2000,
         "company": "ALTOS"
     },
     {
@@ -13,8 +16,11 @@
         "date": "2025-02-08T03:24:18.821Z",
         "shipment_code": "ETA1010",
         "product": "Maiz",
-        "truck-plates": "YUC9102",
+        "truck_type": "Torton",
-        "driver-name": "Jose Santos",
+        "truck_plates": "YUC9102",
+        "driver_name": "Jose Santos",
+        "note": "Comentario de prueba",
+        "weigth_load": 233.2,
         "company": "ALTOS"
     },
     {
@@ -22,8 +28,11 @@
         "date": "2025-02-08T01:00:57.627Z",
         "shipment_code": "ETA1007",
         "product": "Maiz",
-        "truck-plates": "YUC9102",
+        "truck_type": "Full",
-        "driver-name": "Raul Torres",
+        "truck_plates": "YUC9102",
+        "driver_name": "Raul Torres",
+        "note": "Comentario de prueba",
+        "weigth_load": 3000,
         "company": "SOPAA"
     },
     {
@@ -31,8 +40,11 @@
         "date": "2025-02-09T19:36:13.562Z",
         "shipment_code": "ETA1014",
         "product": "Maiz",
-        "truck-plates": "YUC9123",
+        "truck_type": "Torton",
-        "driver-name": "Manuel Yuc",
+        "truck_plates": "YUC9123",
+        "driver_name": "Manuel Yuc",
+        "note": "Comentario de prueba",
+        "weigth_load": 233.2,
         "company": "USIOA"
     },
     {
@@ -40,8 +52,11 @@
         "date": "2025-02-08T00:29:10.471Z",
         "shipment_code": "ETA1021",
         "product": "Maiz",
-        "truck-plates": "YUC9101",
+        "truck_type": "Torton",
-        "driver-name": "Alexandro Uc",
+        "truck_plates": "YUC9101",
+        "driver_name": "Alexandro Uc",
+        "note": "Comentario de prueba",
+        "weigth_load": 233.2,
         "company": "ALTOS"
     },
     {
@@ -49,8 +64,11 @@
         "date": "2025-02-08T02:47:28.823Z",
         "shipment_code": "ETA1013",
         "product": "Maiz",
-        "truck-plates": "YUC9120",
+        "truck_type": "Torton",
-        "driver-name": "Ramiro Alcocer",
+        "truck_plates": "YUC9120",
+        "driver_name": "Ramiro Alcocer",
+        "note": "Comentario de prueba",
+        "weigth_load": 3992,
         "company": "JSKA"
     },
     {
@@ -58,17 +76,23 @@
         "date": "2025-02-09T02:47:28.823Z",
         "shipment_code": "ETA1023",
         "product": "Maiz",
-        "truck-plates": "YUC9101",
+        "truck_type": "Full Trailer",
-        "driver-name": "Alexandro Uc",
+        "truck_plates": "YUC9101",
+        "driver_name": "Alexandro Uc",
+        "note": "Comentario de prueba",
+        "weigth_load": 233.2,
         "company": "ALTOS"
     },
     {
         "status": "Transit",
         "date": "2025-02-08T02:47:28.823Z",
         "shipment_code": "ETA1024",
-        "product": "Maiz",
+        "product": "Frijol",
-        "truck-plates": "DKS9101",
+        "truck_type": "Torton",
-        "driver-name": "Sergio Martinez",
+        "truck_plates": "DKS9101",
+        "driver_name": "Sergio Martinez",
+        "note": "Comentario de prueba",
+        "weigth_load": 233.20,
         "company": "SILA"
     },
     {
@@ -76,26 +100,35 @@
         "date": "2025-02-08T02:47:28.823Z",
         "shipment_code": "ETA1025",
         "product": "Maiz",
-        "truck-plates": "YUC9101",
+        "truck_type": "Torton",
-        "driver-name": "Alexandro Uc",
+        "truck_plates": "YUC9101",
+        "driver_name": "Alexandro Uc",
+        "note": "Comentario de prueba",
+        "weigth_load": 233.2,
         "company": "ALTOS"
     },
     {
         "status": "Loading",
         "date": "2025-02-09T02:31:45.679Z",
         "shipment_code": "ETA1006",
-        "product": "Maiz",
+        "product": "Cebada",
-        "truck-plates": "DLS9101",
+        "truck_type": "Torton",
-        "driver-name": "Juan Perez",
+        "truck_plates": "DLS9101",
+        "driver_name": "Juan Perez",
+        "note": "Comentario de prueba",
+        "weigth_load": 233.200,
         "company": "SOA"
     },
     {
         "status": "Loading",
         "date": "2025-02-08T00:42:43.588Z",
         "shipment_code": "ETA1022",
-        "product": "Maiz",
+        "product": "Cacahuate",
-        "truck-plates": "YUC9101",
+        "truck_type": "Torton",
-        "driver-name": "Alexandro Uc",
+        "truck_plates": "YUC9101",
+        "driver_name": "Alexandro Uc",
+        "note": "Comentario de prueba",
+        "weigth_load": 233.2,
         "company": "ALTOS"
     },
     {
@@ -103,8 +136,11 @@
         "date": "2025-02-09T00:57:26.432Z",
         "shipment_code": "ETA1016",
         "product": "Maiz",
-        "truck-plates": "DSA9101",
+        "truck_type": "Caja Seca",
-        "driver-name": "Alexandro Uc",
+        "truck_plates": "DSA9101",
+        "driver_name": "Alexandro Uc",
+        "note": "Comentario de prueba",
+        "weigth_load": 233.2,
         "company": "ALTOS"
     }
 ]

src/router/index.js

@@ -149,7 +149,7 @@ const router = createRouter({
             permissions: ['role_shipper'],
             roles: ['owner', 'manager', 'store']
           },
-          component: () => import('../views/StoreView.vue'),
+          component: () => import('../views/store/StoreView.vue'),
         },
         {
           path: 'cargas',

src/views/store/StoreView.vue

@@ -1,9 +1,10 @@
 <script setup>
     import { ref } from 'vue';
-    import { getDateTime } from '../helpers/date_formats';
+    import { getDateTime } from '../../helpers/date_formats';
     import { onMounted } from 'vue';
-    import loads from '../data/store-dumies.json';
+    import loads from '../../data/store-dumies.json';
     import { useI18n } from 'vue-i18n';
+    import LoadStoreCard from './components/LoadStoreCard.vue';
 
     const query = ref('');
     const date = ref('');
@@ -24,8 +25,9 @@
                 load => load.shipment_code.toLowerCase().includes(query.value.toLowerCase()) 
                     || load.company.toLowerCase().includes(query.value.toLowerCase())
                     || load.product.toLowerCase().includes(query.value.toLowerCase())
-                    || load['truck-plates'].toLowerCase().includes(query.value.toLowerCase())
+                    || load['truck_plates'].toLowerCase().includes(query.value.toLowerCase())
-                    || load['driver-name'].toLowerCase().includes(query.value.toLowerCase())
+                    || load['driver_name'].toLowerCase().includes(query.value.toLowerCase())
+                    || load['truck_type'].toLowerCase().includes(query.value.toLowerCase())
             );
         } else {
             loadsFilters.value = loads;
@@ -58,23 +60,11 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-lg-6 col-12 mt-4"
+        <LoadStoreCard
             v-for="load in loadsFilters" 
-            :key="load.id"
+            :key="load.shipment_code" 
-        >
+            :load="load"
-            <div class="card-info justify-content-between bg-white">
+        />
-                <div class="flex-direction-column">
-                    <h2>{{ load.shipment_code }}</h2>
-                    <p><span class="font-bold" >{{ t('global.company') }}: </span> {{ load.company }}</p>
-                    <p><span class="font-bold" >{{ t('loads.product') }}: </span> {{ load.product }}</p>
-                </div>
-                <div class="flex-direction-column">
-                    <p><span class="font-bold">{{ t('labels.date') }}: </span> {{ getDateTime(load.date, 0) }}</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>
     </div>
         
 </template>

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>