validations of role store

src/components/NavBar.vue

@@ -8,6 +8,8 @@
 
     const auth = useAuthStore();
     const noty = useNotificationsStore();
+    const permission = auth.user.permissions;
+    const jobRole = auth.user.job_role;
     const { t } = useI18n()
 
      $(document).ready(function() {
@@ -31,6 +33,8 @@
         }
         noty.notifications = resp.data;
     }
+
+    const roleCheck = 'store';
 </script>
 
 <template>
@@ -41,19 +45,19 @@
                 </button>
                 <div class="nav-options">
                     <RouterLink 
-                        v-if="auth.user?.permissions === 'role_shipper'"
+                        v-if="permission === 'role_shipper' && jobRole !== roleCheck"
                         active-class="router-link-active"
                         class="nav-link" :to="{name: 'search-vehicles'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> <span class="clear-xsm">{{ t('global.vehicles') }}</span></RouterLink>
                     <RouterLink 
-                        v-if="auth.user?.permissions === 'role_shipper'"
+                        v-if="permission === 'role_shipper' && jobRole !== roleCheck"
                         active-class="router-link-active"
                         class="nav-link" :to="{name: 'carriers'}"><i class="fa-solid fa-truck me-1"></i> <span class="clear-xsm">{{ t('global.carriers') }}</span></RouterLink>
                     <RouterLink 
-                        v-if="auth.user?.permissions === 'role_carrier'"
+                        v-if="permission === 'role_carrier' && jobRole !== roleCheck"
                         active-class="router-link-active"
                         class="nav-link" :to="{name: 'search-loads'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> <span class="clear-xsm">{{ t('global.loads') }}</span></RouterLink>
                     <RouterLink 
-                        v-if="auth.user?.permissions === 'role_carrier'"
+                        v-if="permission === 'role_carrier' && jobRole !== roleCheck"
                         active-class="router-link-active"
                         class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> <span class="clear-xsm">{{ t('global.shippers') }}</span></RouterLink>
                     <div 

src/components/Sidebar.vue

@@ -15,6 +15,8 @@
     const loads = useLoadsStore();
     const noty = useNotificationsStore();
     const router = useRouter();
+    const permission = auth.user?.permissions;
+    const jobRole = auth.user?.job_role;
     const { t } = useI18n()
 
    const handleLogout = () => {
@@ -37,6 +39,10 @@
             }
         });
    }
+
+   const roleCheck = 'store';
+
+
 </script>
 
 <template>
@@ -52,7 +58,9 @@
             <div class="divider"></div>
         </div>
         <ul class="list-unstyled components">
-            <li :class="[route.name === 'home' ? 'bg-nav-active' : '']">
+            <li 
+                v-if="jobRole !== roleCheck"
+                :class="[route.name === 'home' ? 'bg-nav-active' : '']">
                 <div>
                     <i class="fa-solid fa-gauge-high" :class="[route.name === 'home' ? 'router-link-active' : '']"></i>
                     <RouterLink 
@@ -60,7 +68,9 @@
                         class="nav-link" :to="{name: 'home'}">Dashboard</RouterLink>
                 </div>
             </li>
-            <li :class="[route.name === 'company' ? 'bg-nav-active' : '']">
+            <li 
+                v-if="jobRole !== roleCheck"
+                :class="[route.name === 'company' ? 'bg-nav-active' : '']">
                 <div>
                     <i class="fa-regular fa-building" :class="[route.name === 'company' ? 'router-link-active' : '']"></i>
                     <RouterLink 
@@ -68,7 +78,9 @@
                         class="nav-link" :to="{name: 'company'}">{{ t('global.company') }}</RouterLink>
                 </div>
             </li>
-            <li :class="[route.name === 'users' ? 'bg-nav-active' : '']">
+            <li 
+                v-if="jobRole !== roleCheck"
+                :class="[route.name === 'users' ? 'bg-nav-active' : '']">
                 <div>
                     <i class="fa-regular fa-user" :class="[route.name === 'users' ? 'router-link-active' : '']"></i>
                     <RouterLink 
@@ -76,7 +88,9 @@
                         class="nav-link" :to="{name: 'users'}">{{ t('global.users') }}</RouterLink>
                 </div>
             </li>
-            <li :class="[route.name === 'locations' ? 'bg-nav-active' : '']">
+            <li 
+                v-if="jobRole !== roleCheck"
+                :class="[route.name === 'locations' ? 'bg-nav-active' : '']">
                 <div>
                     <i class="fa-solid fa-location-dot" :class="[route.name === 'locations' ? 'router-link-active' : '']"></i>
                     <RouterLink 
@@ -85,7 +99,7 @@
                 </div>
             </li>
             <li 
-                v-if="auth.user?.permissions === 'role_carrier'"
+                v-if="permission === 'role_carrier' && jobRole !== roleCheck"
                 :class="[route.name === 'vehicles' ? 'bg-nav-active' : '']">
                 <div>
                     <i class="fa-solid fa-truck-fast" :class="[route.name === 'vehicles' ? 'router-link-active' : '']"></i>
@@ -94,7 +108,9 @@
                         class="nav-link" :to="{name: 'vehicles'}">{{t('global.vehicles')}}</RouterLink>
                 </div>
             </li>
-            <li v-if="auth.user?.permissions === 'role_shipper'" :class="[route.name === 'published-loads' ? 'bg-nav-active' : '']">
+            <li 
+                v-if="permission === 'role_shipper' && jobRole !== roleCheck" 
+                :class="[route.name === 'published-loads' ? 'bg-nav-active' : '']">
                 <div>
                     <i class="fa-solid fa-bullhorn" :class="[route.name === 'published-loads' ? 'router-link-active' : '']"></i>
                     <RouterLink 
@@ -102,7 +118,9 @@
                         class="nav-link" :to="{name: 'published-loads'}">{{t('global.publications')}}</RouterLink>
                 </div>
             </li>
-            <li v-if="auth.user?.permissions === 'role_carrier'" :class="[route.name === 'published-trucks' ? 'bg-nav-active' : '']">
+            <li 
+                v-if="permission === 'role_carrier' && jobRole !== roleCheck" 
+                :class="[route.name === 'published-trucks' ? 'bg-nav-active' : '']">
                 <div>
                     <i class="fa-solid fa-bullhorn" :class="[route.name === 'published-trucks' ? 'router-link-active' : '']"></i>
                     <RouterLink 
@@ -119,7 +137,7 @@
                 </div>
             </li>
             <li 
-                v-if="auth.user?.permissions === 'role_carrier'"
+                v-if="permission === 'role_carrier' && jobRole !== roleCheck"
                 :class="[route.name === 'calculator' ? 'bg-nav-active' : '']">
                 <div>
                     <i class="fa-solid fa-calculator" :class="[route.name === 'calculator' ? 'router-link-active' : '']"></i>

src/views/CalendarView.vue

@@ -3,22 +3,24 @@
     import {eventStatusLoad} from '../helpers/status';
     import {getDateTime, formatOnlyDate} from '../helpers/date_formats';
     import { onMounted, ref } from 'vue';
-    import { useRouter } from 'vue-router';
     import { useI18n } from 'vue-i18n';
     import useCalendar from '../composables/useCalendar';
     import CustomPopup from '../components/CustomPopup.vue';
     import { watch } from 'vue';
+import { useAuthStore } from '../stores/auth';
 
     const events = ref([]);
-    const router = useRouter();
 
     const { t, locale } = useI18n()
+    const auth = useAuthStore();
     const { getCalendarDate, loading, loads } = useCalendar()
     const filter = ref({value: 'my', label: t('calendar.my')})
     const startDate = ref('');
     const endDate = ref('');
     const optionsFilter = ref([])
     const openPopup = ref(false);
+    const jobRole = auth.user.job_role;
+    const roleCheck = 'store';
 
     const config = {
       week: {
@@ -166,11 +168,12 @@
                 <div class="indicators">
                     <span><i class="fa-solid fa-circle" style="color: #A9B0B2"></i> {{ t('global.published') }}</span>
                     <span><i class="fa-solid fa-circle" style="color: #F44336"></i> {{ t('global.loading') }}</span>
-                    <span><i class="fa-solid fa-circle" style="color: #ffd22b"></i> {{ t('global.transit') }}</span>
-                    <span><i class="fa-solid fa-circle" style="color: #428502"></i> {{ t('global.downloading') }}</span>
-                    <span><i class="fa-solid fa-circle" style="color: #1B70AF"></i> {{ t('global.delivered') }}</span>
+                    <span v-if="jobRole !== roleCheck"><i class="fa-solid fa-circle" style="color: #ffd22b"></i> {{ t('global.transit') }}</span>
+                    <span v-if="jobRole !== roleCheck"><i class="fa-solid fa-circle" style="color: #428502"></i> {{ t('global.downloading') }}</span>
+                    <span v-if="jobRole !== roleCheck"><i class="fa-solid fa-circle" style="color: #1B70AF"></i> {{ t('global.delivered') }}</span>
                 </div>
                 <div class="box-filter"
+                    v-if="jobRole !== roleCheck"
                     @click="openPopup = true"
                 >
                     <span class="clear-sm" v-if="filter === null">{{ t('directory.directory') }}</span>