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>