template view store done

package-lock.json

@@ -731,11 +731,11 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
+      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -789,15 +789,9 @@
       }
     },
     "node_modules/chokidar": {
-      "version": "3.5.3",
+      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://paulmillr.com/funding/"
-        }
-      ],
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -810,6 +804,9 @@
       "engines": {
         "node": ">= 8.10.0"
       },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
       "optionalDependencies": {
         "fsevents": "~2.3.2"
       }
@@ -997,9 +994,9 @@
       "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
+      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -1272,9 +1269,9 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
+      "version": "3.3.8",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "funding": [
         {
           "type": "github",
@@ -1326,9 +1323,9 @@
       "optional": true
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
+      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -1401,9 +1398,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.31",
+      "version": "8.5.1",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -1419,9 +1416,9 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.8",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.1.1",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -1554,9 +1551,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
+      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "engines": {
         "node": ">=0.10.0"
       }

src/assets/main.css

@@ -183,6 +183,16 @@ td {
     font-size: 1rem;
 }
 
+.custom-input-fill {
+    background-color: white;
+    border-radius: 8px;
+    border-width: 1px !important;
+    border-color: rgb(226, 214, 214) !important;
+    border-style: solid !important;
+    padding: 12px 12px;
+    font-size: 1rem;
+}
+
 .custom-input:enabled{
     border: none;
 }

src/components/Sidebar.vue

@@ -136,6 +136,14 @@
                         class="nav-link" :to="{name: 'calendar'}">{{ t('global.calendar') }}</RouterLink>
                 </div>
             </li>
+            <li :class="[route.name === 'store' ? 'bg-nav-active' : '']">
+                <div>
+                    <i class="fa-solid fa-shop-lock" :class="[route.name === 'store' ? 'router-link-active' : '']"></i>
+                    <RouterLink 
+                        active-class="router-link-active"
+                        class="nav-link" :to="{name: 'store'}">{{ t('store.title') }}</RouterLink>
+                </div>
+            </li>
             <li 
                 v-if="permission === 'role_carrier' && jobRole !== roleCheck"
                 :class="[route.name === 'calculator' ? 'bg-nav-active' : '']">

src/data/store-dumies.json

@@ -0,0 +1,110 @@
+[
+    {
+        "status": "Loading",
+        "date": "2025-01-08T03:24:18.821Z",
+        "shipment_code": "ETA1010",
+        "product": "Maiz",
+        "truck-plates": "YUC9101",
+        "driver-name": "Alexandro Uc",
+        "company": "ALTOS"
+    },
+    {
+        "status": "Loading",
+        "date": "2025-02-08T03:24:18.821Z",
+        "shipment_code": "ETA1010",
+        "product": "Maiz",
+        "truck-plates": "YUC9102",
+        "driver-name": "Jose Santos",
+        "company": "ALTOS"
+    },
+    {
+        "status": "Loading",
+        "date": "2025-02-08T01:00:57.627Z",
+        "shipment_code": "ETA1007",
+        "product": "Maiz",
+        "truck-plates": "YUC9102",
+        "driver-name": "Raul Torres",
+        "company": "SOPAA"
+    },
+    {
+        "status": "Loading",
+        "date": "2025-02-09T19:36:13.562Z",
+        "shipment_code": "ETA1014",
+        "product": "Maiz",
+        "truck-plates": "YUC9123",
+        "driver-name": "Manuel Yuc",
+        "company": "USIOA"
+    },
+    {
+        "status": "Loading",
+        "date": "2025-02-08T00:29:10.471Z",
+        "shipment_code": "ETA1021",
+        "product": "Maiz",
+        "truck-plates": "YUC9101",
+        "driver-name": "Alexandro Uc",
+        "company": "ALTOS"
+    },
+    {
+        "status": "Loading",
+        "date": "2025-02-08T02:47:28.823Z",
+        "shipment_code": "ETA1013",
+        "product": "Maiz",
+        "truck-plates": "YUC9120",
+        "driver-name": "Ramiro Alcocer",
+        "company": "JSKA"
+    },
+    {
+        "status": "Loading",
+        "date": "2025-02-09T02:47:28.823Z",
+        "shipment_code": "ETA1023",
+        "product": "Maiz",
+        "truck-plates": "YUC9101",
+        "driver-name": "Alexandro Uc",
+        "company": "ALTOS"
+    },
+    {
+        "status": "Transit",
+        "date": "2025-02-08T02:47:28.823Z",
+        "shipment_code": "ETA1024",
+        "product": "Maiz",
+        "truck-plates": "DKS9101",
+        "driver-name": "Sergio Martinez",
+        "company": "SILA"
+    },
+    {
+        "status": "Loading",
+        "date": "2025-02-08T02:47:28.823Z",
+        "shipment_code": "ETA1025",
+        "product": "Maiz",
+        "truck-plates": "YUC9101",
+        "driver-name": "Alexandro Uc",
+        "company": "ALTOS"
+    },
+    {
+        "status": "Loading",
+        "date": "2025-02-09T02:31:45.679Z",
+        "shipment_code": "ETA1006",
+        "product": "Maiz",
+        "truck-plates": "DLS9101",
+        "driver-name": "Juan Perez",
+        "company": "SOA"
+    },
+    {
+        "status": "Loading",
+        "date": "2025-02-08T00:42:43.588Z",
+        "shipment_code": "ETA1022",
+        "product": "Maiz",
+        "truck-plates": "YUC9101",
+        "driver-name": "Alexandro Uc",
+        "company": "ALTOS"
+    },
+    {
+        "status": "Loading",
+        "date": "2025-02-09T00:57:26.432Z",
+        "shipment_code": "ETA1016",
+        "product": "Maiz",
+        "truck-plates": "DSA9101",
+        "driver-name": "Alexandro Uc",
+        "company": "ALTOS"
+    }
+]

src/i18n/en.js

@@ -478,6 +478,9 @@ const en = {
         acceptedProposalDesc: 'Your offer has been accepted in the upload',
         rejectedProposalDesc: 'Your offer has been rejected on upload',
     },
+    store: {
+        title: "Warehouse"
+    }
 };
 
 export default en;

src/i18n/es.js

@@ -487,6 +487,9 @@ const es = {
         acceptedProposalDesc: 'Tu oferta ha sido aceptada en la carga',
         rejectedProposalDesc: 'Tu oferta ha sido rechazada en la carga',
     },
+    store: {
+        title: "Bodega"
+    }
 };
 
 export default es;

src/router/index.js

@@ -142,6 +142,15 @@ const router = createRouter({
           },
           component: () => import('../views/CalendarView.vue'),
         },
+        {
+          path: 'bodega',
+          name: 'store',
+          meta: {
+            permissions: ['role_shipper'],
+            roles: ['owner', 'manager', 'store']
+          },
+          component: () => import('../views/StoreView.vue'),
+        },
         {
           path: 'cargas',
           meta: { permissions: ['role_shipper'] },
@@ -219,6 +228,7 @@ router.beforeEach( async(to, from, next) => {
         }
 
         if(roles && !roles.includes(role)) {
+            console.log('tiene perminsos');
             return next({name: 'calendar'});
         }
 

src/views/StoreView.vue

@@ -0,0 +1,104 @@
+<script setup>
+    import { ref } from 'vue';
+    import { getDateTime } from '../helpers/date_formats';
+    import { onMounted } from 'vue';
+    import loads from '../data/store-dumies.json';
+    import { useI18n } from 'vue-i18n';
+
+    const query = ref('');
+    const date = ref('');
+    const loadsFilters = ref(loads);
+    const { t } = useI18n()
+
+    onMounted(() => {
+        date.value = getDateTime(new Date(), 0).substring(0, 10);
+    })
+
+    /// methods:
+    const search = () => {
+        if(query.value == "") {
+            loadsFilters.value = loads;
+        }
+        if(query.value.length >= 1){
+            loadsFilters.value = loads.filter(
+                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['driver-name'].toLowerCase().includes(query.value.toLowerCase())
+            );
+        } else {
+            loadsFilters.value = loads;
+        } 
+    }
+
+</script>
+
+<template>
+    <h2 class="title mb-4">{{ t('store.title') }}</h2>
+    <div class="box-filters">
+        <div class="box-search">
+            <input 
+                class="form-control custom-search" 
+                type="search" name="" 
+                :placeholder="t('buttons.search')" 
+                id="store-search" 
+                @:input="search()" 
+                v-model="query" 
+                aria-label="Search"
+            />
+        </div>
+        <div>
+            <input
+                placeholder="Fecha"
+                type="date"
+                class="custom-input-fill"
+                v-model="date"
+            />
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-12 mt-4"
+            v-for="load in loadsFilters"
+            :key="load.id"
+        >
+            <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>
+
+<style lang="scss" scoped>
+    .box-filters {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        gap: 1rem;
+    }
+
+    .box-search {
+        display: flex;
+        flex: 1;
+    }
+
+    .custom-search {
+        width: 100%;
+        padding: 12px 20px;
+    }
+
+    .bg-white {
+        background-color: white;
+    }
+
+</style>