Store user roles

src/components/UserPanel.vue

@@ -28,8 +28,11 @@ const token = session.getToken();
 
 onMounted(async () => {
     try {
-        const roles = await axios.get('/api/accounts/acl')
-        state.setUser(roles.user);
+        const { data } = await axios.get('/api/accounts/acl');
+        const roles = data.roles.map(userRoles => userRoles.role.name);
+
+        state.setUser(data.user);
+        state.setRoles(roles);
     } catch (error) {
         quasar.notify({
             message: t('errors.statusUnauthorized'),

src/pages/Dashboard/Dashboard.vue

@@ -1,7 +1,14 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+import { useRole } from '/src/composables/useRole';
+
 const slide = ref('style');
 const slideText = 'Description text';
+
+const { hasAny } = useRole();
+
+const isSalesPerson = computed(() => hasAny(['salesPerson']));
+
 </script>
 
 <template>
@@ -12,7 +19,7 @@ const slideText = 'Description text';
             rounded
             class="bg-orange text-white q-mb-lg"
         >
-            You have lost connection to the internet. This app is offline.
+            {{ isSalesPerson }}
             <template #action>
                 <q-btn flat label="Turn ON Wifi" />
                 <q-btn flat label="Dismiss" />

src/router/modules/customer.js

@@ -3,7 +3,8 @@ export default {
     name: 'Customer',
     meta: {
         title: 'customers',
-        icon: 'vn:client'
+        icon: 'vn:client',
+        roles: ['salesPerson'],
     },
     component: () => import('src/pages/Customer/CustomerLayout.vue'),
     redirect: { path: '/customer/list' },