Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into test

2022-05-17 15:27:10 +02:00 · 2022-05-17 15:27:10 +02:00 · 66cbe7eeb8
parent c51bfc6b3d 229ddb8f2d
commit 66cbe7eeb8
32 changed files with 932 additions and 352 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -14,5 +14,8 @@
    ],
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "[vue]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
 }
--- a/jsconfig.json
+++ b/jsconfig.json
@ -13,5 +13,8 @@
            "vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"]
        }
    },
-    "exclude": ["dist", ".quasar", "node_modules"]
+    "exclude": ["dist", ".quasar", "node_modules"],
+    "vueCompilerOptions": {
+        "experimentalDisableTemplateSupport": true
+    }
 }
--- a/src/components/LeftMenu.vue
+++ b/src/components/LeftMenu.vue
@ -7,21 +7,37 @@ import routes from 'src/router/routes';
 const { t } = useI18n();
 const { hasAny } = useRole();

-const mainRoute = routes.find(route => route.path === '/');
-const moduleRoutes = mainRoute && mainRoute.children || []
+const mainRoute = routes.find((route) => route.path === '/');
+const moduleRoutes = (mainRoute && mainRoute.children) || [];

 const modules = ref([]);
 for (const route of moduleRoutes) {
    const module = {
-        path: route.path,
+        stateName: route.name,
        name: route.name.toLowerCase(),
-        roles: []
+        roles: [],
    };

    if (route.meta) {
        Object.assign(module, route.meta);
    }

+    if (route.children && route.children.length) {
+        const [moduleMain] = route.children;
+        const routes = moduleMain.children;
+
+        module.children = routes.map((route) => {
+            const submodule = {
+                stateName: route.name,
+                name: route.name,
+            };
+
+            Object.assign(submodule, route.meta);
+
+            return submodule;
+        });
+    }
+
    modules.value.push(module);
 }
 </script>
@ -29,18 +45,47 @@ for (const route of moduleRoutes) {
 <template>
    <q-list padding>
        <template v-for="module in modules" :key="module.title">
-            <q-item
-                clickable
-                v-ripple
-                :to="{ path: module.path }"
-                v-if="!module.roles.length || hasAny(module.roles)"
-                active-class="text-orange"
-            >
-                <q-item-section avatar :if="module.icon">
-                    <q-icon :name="module.icon" />
-                </q-item-section>
-                <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
-            </q-item>
+            <template v-if="!module.children">
+                <q-item
+                    clickable
+                    v-ripple
+                    active-class="text-orange"
+                    :key="module.title"
+                    :to="{ name: module.stateName }"
+                    v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
+                >
+                    <q-item-section avatar :if="module.icon">
+                        <q-icon :name="module.icon" />
+                    </q-item-section>
+                    <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
+                </q-item>
+            </template>
+
+            <template v-if="module.children">
+                <q-expansion-item
+                    expand-separator
+                    active-class="text-orange"
+                    :icon="module.icon"
+                    :label="t(`${module.name}.pageTitles.${module.title}`)"
+                    v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
+                    :to="{ name: module.stateName }"
+                >
+                    <template v-for="section in module.children" :key="section.title">
+                        <q-item
+                            clickable
+                            v-ripple
+                            active-class="text-orange"
+                            :to="{ name: section.stateName }"
+                            v-if="!section.roles || !section.roles.length || hasAny(section.roles)"
+                        >
+                            <q-item-section avatar :if="section.icon">
+                                <q-icon :name="section.icon" />
+                            </q-item-section>
+                            <q-item-section>{{ t(`${module.name}.pageTitles.${section.title}`) }}</q-item-section>
+                        </q-item>
+                    </template>
+                </q-expansion-item>
+            </template>
        </template>
    </q-list>
-</template>
+</template>
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@ -1,28 +1,36 @@
-
-
 <script setup>
+import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import UserPanel from 'src/components/UserPanel.vue';

+const { t } = useI18n();
 const session = useSession();
 const state = useState();
 const user = state.getUser();
 const token = session.getToken();

-defineEmits(['toggle-drawer']);
-
+function onToggleDrawer() {
+    state.drawer.value = !state.drawer.value;
+}
 </script>

 <template>
    <q-header class="bg-dark" color="white" elevated bordered>
        <q-toolbar class="q-py-sm q-px-md">
-            <q-btn flat @click="$emit('toggle-drawer')" round dense icon="menu" />
+            <q-btn flat @click="onToggleDrawer()" round dense icon="menu">
+                <q-tooltip bottom anchor="bottom right">
+                    {{ t('globals.collapseMenu') }}
+                </q-tooltip>
+            </q-btn>
            <router-link to="/">
                <q-btn flat round class="q-ml-xs" v-if="$q.screen.gt.xs">
                    <q-avatar square size="md">
                        <q-img src="~/assets/logo_icon.svg" alt="Logo" />
                    </q-avatar>
+                    <q-tooltip bottom>
+                        {{ t('globals.backToDashboard') }}
+                    </q-tooltip>
                </q-btn>
            </router-link>
            <q-toolbar-title shrink class="text-weight-bold">Salix</q-toolbar-title>
@ -41,16 +49,31 @@ defineEmits(['toggle-drawer']);
                        </q-list>
                    </q-menu>
                </q-btn>
-                <q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications" />
+                <q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications">
+                    <q-badge color="red" text-color="white" floating> 2 </q-badge>
+                    <q-tooltip bottom>
+                        {{ t('globals.notifications') }}
+                    </q-tooltip>
+                    <q-menu class="q-pa-md" style="min-width: 250px">
+                        <strong>Notifications</strong>
+                        <q-separator />
+                        <div style="text-align: center; font-size: 2em">
+                            <q-spinner-puff color="orange" />
+                        </div>
+                    </q-menu>
+                </q-btn>
                <q-btn dense flat no-wrap>
                    <q-avatar size="lg">
                        <q-img
                            :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
                            spinner-color="white"
-                        />
+                        >
+                        </q-img>
                    </q-avatar>
-                    <q-tooltip>Account</q-tooltip>
                    <q-icon name="arrow_drop_down" size="s" />
+                    <q-tooltip bottom>
+                        {{ t('globals.userPanel') }}
+                    </q-tooltip>
                    <UserPanel />
                </q-btn>
            </div>
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@ -1,17 +1,15 @@
 <script setup>
 import { onMounted, computed } from 'vue';
-import { Dark, useQuasar } from 'quasar';
+import { Dark } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import axios from 'axios';

 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
-import { useRole } from 'src/composables/useRole';

-const quasar = useQuasar();
 const state = useState();
 const session = useSession();
-const role = useRole();
 const router = useRouter();
 const { t, locale } = useI18n();

@ -28,53 +26,67 @@ const user = state.getUser();
 const token = session.getToken();

 onMounted(async () => {
-    try {
-        const stateRoles = state.getRoles().value
-        if (stateRoles.length === 0) {
-            await role.fetch();
-        }
-    } catch (error) {
-        quasar.notify({
-            message: t('errors.statusUnauthorized'),
-            type: 'negative',
-        });
-        logout();
-    }
+    updatePreferences();
 });

+function updatePreferences() {
+    if (user.value.darkMode) {
+        darkMode.value = user.value.darkMode;
+    }
+    if (user.value.lang) {
+        locale.value = user.value.lang;
+    }
+}
+
+async function saveDarkMode(value) {
+    const query = `/api/UserConfigs/${user.value.id}`;
+    await axios.patch(query, {
+        darkMode: value,
+    });
+    user.value.darkMode = value;
+}
+
+async function saveLanguage(value) {
+    const query = `/api/Accounts/${user.value.id}`;
+    await axios.patch(query, {
+        lang: value,
+    });
+    user.value.lang = value;
+}
+
 function logout() {
    session.destroy();
    router.push('/login');
 }
-
 </script>

 <template>
-    <q-menu>
+    <q-menu anchor="bottom left">
        <div class="row no-wrap q-pa-md">
-            <div class="column">
+            <div class="column panel">
                <div class="text-h6 q-mb-md">{{ t('components.userPanel.settings') }}</div>
                <q-toggle
+                    v-model="locale"
+                    @update:model-value="saveLanguage"
                    :label="t(`globals.lang['${locale}']`)"
                    icon="public"
                    color="orange"
                    false-value="es"
                    true-value="en"
-                    v-model="locale"
                />
                <q-toggle
                    v-model="darkMode"
+                    @update:model-value="saveDarkMode"
+                    :label="t(`globals.theme`)"
                    checked-icon="dark_mode"
                    color="orange"
                    unchecked-icon="light_mode"
                />
-
-                <q-btn color="orange" outline size="sm" label="Settings" icon="settings" />
            </div>

            <q-separator vertical inset class="q-mx-lg" />

-            <div class="column items-center" style="min-width: 150px">
+            <div class="column items-center panel">
                <q-avatar size="80px">
                    <q-img
                        :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
@ -90,7 +102,7 @@ function logout() {
                <q-btn
                    color="orange"
                    flat
-                    label="Log Out"
+                    :label="t('globals.logOut')"
                    size="sm"
                    icon="logout"
                    @click="logout()"
@ -100,3 +112,9 @@ function logout() {
        </div>
    </q-menu>
 </template>
+
+<style lang="scss" scoped>
+.panel {
+    width: 150px;
+}
+</style>
--- a/src/components/tests/Leftmenu.spec.js
+++ b/src/components/tests/Leftmenu.spec.js
@ -0,0 +1,98 @@
+import { jest, describe, expect, it, beforeAll } from '@jest/globals';
+import { createWrapper } from 'app/tests/jest/jestHelpers';
+import Leftmenu from '../LeftMenu.vue';
+
+const mockPush = jest.fn();
+
+jest.mock('vue-router', () => ({
+    useRouter: () => ({
+        push: mockPush,
+        currentRoute: { value: 'myCurrentRoute' }
+    }),
+}));
+
+jest.mock('src/router/routes', () => ([
+    {
+        path: '/',
+        name: 'Main',
+        children: [
+            {
+                path: '/dashboard',
+                name: 'Dashboard',
+                meta: { title: 'dashboard', icon: 'dashboard' }
+            },
+            {
+                path: '/customer',
+                name: 'Customer',
+                meta: {
+                    title: 'customers',
+                    icon: 'vn:client'
+                },
+                children: [
+                    {
+                        path: '',
+                        name: 'CustomerMain',
+                        children: [
+                            {
+                                path: 'list',
+                                name: 'CustomerList',
+                                meta: {
+                                    title: 'list',
+                                    icon: 'view_list',
+                                }
+                            },
+                            {
+                                path: 'create',
+                                name: 'CustomerCreate',
+                                meta: {
+                                    title: 'createCustomer',
+                                    icon: 'vn:addperson',
+                                }
+                            },
+                        ]
+                    }
+                ]
+            }
+        ],
+    },
+]));
+
+describe('Leftmenu', () => {
+    let vm;
+    beforeAll(() => {
+        vm = createWrapper(Leftmenu).vm;
+    });
+
+    it('should return a proper formated object without the children property', async () => {
+        const expectedMenuItem = {
+            stateName: 'Dashboard',
+            name: 'dashboard',
+            roles: [],
+            icon: 'dashboard',
+            title: 'dashboard'
+        }
+
+        const firstMenuItem = vm.modules[0];
+        expect(firstMenuItem.children).toBeUndefined();
+        expect(firstMenuItem).toEqual(expect.objectContaining(expectedMenuItem));
+    });
+
+    it('should return a proper formated object with two child items', async () => {
+        const expectedMenuItem = [{
+            name: 'CustomerList',
+            title: 'list',
+            icon: 'view_list',
+            stateName: 'CustomerList'
+        },
+        {
+            name: 'CustomerCreate',
+            title: 'createCustomer',
+            icon: 'vn:addperson',
+            stateName: 'CustomerCreate'
+        }];
+
+        const secondMenuItem = vm.modules[1];
+        expect(secondMenuItem.children).toEqual(expect.arrayContaining(expectedMenuItem));
+        expect(secondMenuItem.children.length).toEqual(2)
+    });
+});
--- a/src/components/tests/UserPanel.spec.js
+++ b/src/components/tests/UserPanel.spec.js
@ -1,47 +0,0 @@
-import { describe, expect, it, jest } from '@jest/globals';
-import { createWrapper, axios, flushPromises } from 'app/tests/jest/jestHelpers';
-import UserPanel from '../UserPanel.vue';
-
-const mockPush = jest.fn();
-
-jest.mock('vue-router', () => ({
-    useRouter: () => ({
-        push: mockPush,
-    }),
-}));
-
-describe('UserPanel', () => {
-    describe('onMounted', () => {
-        it.only('should define the user into state', async () => {
-            const userMock = {
-                user: {
-                    id: 1,
-                    name: 'myName',
-                    nickname: 'myNickName'
-                },
-                roles: []
-            }
-            jest.spyOn(axios, 'get').mockResolvedValue({ data: userMock });
-            const { vm } = createWrapper(UserPanel);
-
-            await flushPromises()
-
-            const expectedUser = expect.objectContaining(userMock.user)
-            expect(vm.state.getUser().value).toEqual(expectedUser);
-        });
-
-        it('should logout and notify the expected error', async () => {
-            jest.spyOn(axios, 'get').mockRejectedValue(new Error('error'));
-
-            const { vm } = createWrapper(UserPanel);
-
-            jest.spyOn(vm.quasar, 'notify');
-
-            await flushPromises()
-
-            expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
-                { 'type': 'negative' }
-            ));
-        });
-    });
-});
--- a/src/composables/tests/useRole.spec.js
+++ b/src/composables/tests/useRole.spec.js
@ -0,0 +1,76 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { axios, flushPromises } from 'app/tests/jest/jestHelpers';
+import { useRole } from '../useRole';
+const role = useRole();
+
+describe('useRole', () => {
+
+    describe('fetch', () => {
+        it('should call setUser and setRoles of the state with the expected data', async () => {
+            const rolesData = [
+                {
+                    role: {
+                        name: 'salesPerson'
+                    }
+                },
+                {
+                    role: {
+                        name: 'admin'
+                    }
+                }
+            ];
+            const fetchedUser = {
+                id: 999,
+                name: `T'Challa`,
+                nickname: 'Black Panther',
+                lang: 'en',
+                userConfig: {
+                    darkMode: false,
+                }
+            }
+            const expectedUser = {
+                id: 999,
+                name: `T'Challa`,
+                nickname: 'Black Panther',
+                lang: 'en',
+                darkMode: false,
+            }
+            const expectedRoles = ['salesPerson', 'admin']
+            jest.spyOn(axios, 'get').mockResolvedValue({
+                data: { roles: rolesData, user: fetchedUser }
+            });
+
+            jest.spyOn(role.state, 'setUser');
+            jest.spyOn(role.state, 'setRoles');
+
+            role.fetch();
+
+            await flushPromises();
+
+            expect(role.state.setUser).toHaveBeenCalledWith(expectedUser);
+            expect(role.state.setRoles).toHaveBeenCalledWith(expectedRoles);
+
+            role.state.setRoles([])
+        });
+    });
+    describe('hasAny', () => {
+        it('should return true if a role matched', async () => {
+            role.state.setRoles(['admin'])
+            const hasRole = role.hasAny(['admin']);
+
+            await flushPromises();
+
+            expect(hasRole).toBe(true);
+
+            role.state.setRoles([])
+        });
+
+        it('should return false if no roles matched', async () => {
+            const hasRole = role.hasAny(['admin']);
+
+            await flushPromises();
+
+            expect(hasRole).toBe(false);
+        });
+    });
+});
--- a/src/composables/tests/useSession.spec.js
+++ b/src/composables/tests/useSession.spec.js
@ -0,0 +1,133 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { useSession } from '../useSession';
+import { useState } from '../useState';
+import { axios } from 'app/tests/jest/jestHelpers';
+
+const session = useSession();
+const state = useState();
+
+describe('session', () => {
+    describe('getToken / setToken', () => {
+        it('should return an empty string if no token is found in local or session storage', async () => {
+            const expectedToken = ''
+
+            const token = session.getToken();
+
+            expect(token).toEqual(expectedToken);
+        });
+
+        it('should return the token stored in local or session storage', async () => {
+            const expectedToken = 'myToken'
+            const data = {
+                token: expectedToken,
+                keepLogin: false
+            }
+            session.setToken(data);
+
+            const token = session.getToken();
+
+            expect(token).toEqual(expectedToken);
+        });
+    });
+
+    describe('destroy', () => {
+        it('should remove the token from the local storage and set a blank user', async () => {
+            const previousUser = {
+                id: 999,
+                name: `T'Challa`,
+                nickname: 'Black Panther',
+                lang: 'en',
+                darkMode: false,
+            }
+            const expectedUser = {
+                id: 0,
+                name: '',
+                nickname: '',
+                lang: '',
+                darkMode: null,
+            }
+            let user = state.getUser();
+
+            localStorage.setItem('token', 'tokenToBeGone');
+            state.setUser(previousUser)
+
+            expect(localStorage.getItem('token')).toEqual('tokenToBeGone');
+            expect(user.value).toEqual(previousUser);
+
+
+            session.destroy();
+
+            user = state.getUser();
+            expect(localStorage.getItem('token')).toBeNull();
+            expect(user.value).toEqual(expectedUser);
+        });
+    });
+
+    describe('login', () => {
+        const expectedUser = {
+            id: 999,
+            name: `T'Challa`,
+            nickname: 'Black Panther',
+            lang: 'en',
+            userConfig: {
+                darkMode: false,
+            }
+        }
+        const rolesData = [
+            {
+                role: {
+                    name: 'salesPerson'
+                }
+            },
+            {
+                role: {
+                    name: 'admin'
+                }
+            }
+        ];
+
+        it('should fetch the user roles and then set token in the sessionStorage', async () => {
+            const expectedRoles = ['salesPerson', 'admin']
+            jest.spyOn(axios, 'get').mockResolvedValue({
+                data: { roles: rolesData, user: expectedUser }
+            });
+
+            const expectedToken = 'mySessionToken'
+            const keepLogin = false
+
+            await session.login(expectedToken, keepLogin);
+
+            const roles = state.getRoles();
+            const localToken = localStorage.getItem('token');
+            const sessionToken = sessionStorage.getItem('token');
+
+            expect(roles.value).toEqual(expectedRoles);
+            expect(localToken).toBeNull();
+            expect(sessionToken).toEqual(expectedToken);
+
+            session.destroy() // this clears token and user for any other test
+        });
+
+        it('should fetch the user roles and then set token in the localStorage', async () => {
+            const expectedRoles = ['salesPerson', 'admin']
+            jest.spyOn(axios, 'get').mockResolvedValue({
+                data: { roles: rolesData, user: expectedUser }
+            });
+
+            const expectedToken = 'myLocalToken'
+            const keepLogin = true
+
+            await session.login(expectedToken, keepLogin);
+
+            const roles = state.getRoles();
+            const localToken = localStorage.getItem('token');
+            const sessionToken = sessionStorage.getItem('token');
+
+            expect(roles.value).toEqual(expectedRoles);
+            expect(localToken).toEqual(expectedToken);
+            expect(sessionToken).toBeNull();
+
+            session.destroy() // this clears token and user for any other test
+        });
+    });
+});
--- a/src/composables/useRole.js
+++ b/src/composables/useRole.js
@ -1,14 +1,21 @@
 import { useState } from './useState';
 import axios from 'axios';

-const state = useState();
-
 export function useRole() {
+    const state = useState();
+
    async function fetch() {
        const { data } = await axios.get('/api/accounts/acl');
        const roles = data.roles.map(userRoles => userRoles.role.name);

-        state.setUser(data.user);
+        const userData = {
+            id: data.user.id,
+            name: data.user.name,
+            nickname: data.user.nickname,
+            lang: data.user.lang || 'es',
+            darkMode: data.user.userConfig.darkMode,
+        }
+        state.setUser(userData);
        state.setRoles(roles);
    }

@ -25,6 +32,6 @@ export function useRole() {
    return {
        fetch,
        hasAny,
+        state
    };
-}
-
+}
--- a/src/composables/useSession.js
+++ b/src/composables/useSession.js
@ -18,15 +18,20 @@ export function useSession() {
    }

    function destroy() {
-        localStorage.removeItem('token');
-        sessionStorage.getItem('token');
+        if (localStorage.getItem('token'))
+            localStorage.removeItem('token')
+
+        if (sessionStorage.getItem('token'))
+            sessionStorage.removeItem('token');

        const { setUser } = useState();

        setUser({
            id: 0,
-            username: '',
+            name: '',
            nickname: '',
+            lang: '',
+            darkMode: null,
        });
    }

--- a/src/composables/useState.js
+++ b/src/composables/useState.js
@ -4,10 +4,14 @@ const user = ref({
    id: 0,
    name: '',
    nickname: '',
+    lang: '',
+    darkMode: null,
 });

 const roles = ref([]);

+const drawer = ref(true);
+
 export function useState() {
    function getUser() {
        return computed(() => {
@ -15,6 +19,8 @@ export function useState() {
                id: user.value.id,
                name: user.value.name,
                nickname: user.value.nickname,
+                lang: user.value.lang,
+                darkMode: user.value.darkMode,
            };
        });
    }
@ -24,6 +30,8 @@ export function useState() {
            id: data.id,
            name: data.name,
            nickname: data.nickname,
+            lang: data.lang,
+            darkMode: data.darkMode,
        };
    }

@ -42,5 +50,6 @@ export function useState() {
        setUser,
        getRoles,
        setRoles,
+        drawer
    };
 }
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@ -4,6 +4,12 @@ export default {
            es: 'Spanish',
            en: 'English',
        },
+        collapseMenu: 'Collapse left menu',
+        backToDashboard: 'Return to dashboard',
+        notifications: 'Notifications',
+        userPanel: 'User panel',
+        theme: 'Theme',
+        logOut: 'Log out',
    },
    errors: {
        statusUnauthorized: 'Access denied',
@ -27,12 +33,16 @@ export default {
        pageTitles: {
            customers: 'Customers',
            list: 'List',
+            createCustomer: 'Create customer',
            basicData: 'Basic Data'
        }
    },
    ticket: {
        pageTitles: {
-            tickets: 'Tickets'
+            tickets: 'Tickets',
+            list: 'List',
+            createTicket: 'Create ticket',
+            basicData: 'Basic Data'
        }
    },
    components: {
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@ -4,6 +4,12 @@ export default {
            es: 'Español',
            en: 'Inglés',
        },
+        collapseMenu: 'Contraer menú lateral',
+        backToDashboard: 'Volver al tablón',
+        notifications: 'Notificaciones',
+        userPanel: 'Panel de usuario',
+        theme: 'Tema',
+        logOut: 'Cerrar sesión',
    },
    errors: {
        statusUnauthorized: 'Acceso denegado',
@ -27,12 +33,16 @@ export default {
        pageTitles: {
            customers: 'Clientes',
            list: 'Listado',
+            createCustomer: 'Crear cliente',
            basicData: 'Datos básicos'
        }
    },
    ticket: {
        pageTitles: {
-            tickets: 'Tickets'
+            tickets: 'Tickets',
+            list: 'Listado',
+            createTicket: 'Crear ticket',
+            basicData: 'Datos básicos'
        }
    },
    components: {
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@ -1,35 +1,11 @@
 <script setup>
-import { ref } from 'vue';
 import Navbar from 'src/components/Navbar.vue';
-import LeftMenu from 'src/components/LeftMenu.vue';
-const drawer = ref(false);
-const miniState = ref(true);
-
-function onToggleDrawer() {
-    drawer.value = !drawer.value;
-}
 </script>

 <template>
    <q-layout view="hHh lpR fFf">
-        <Navbar @toggle-drawer="onToggleDrawer()" />
-        <q-drawer
-            v-model="drawer"
-            show-if-above
-            :mini="miniState"
-            @mouseover="miniState = false"
-            @mouseout="miniState = true"
-            mini-to-overlay
-            :width="200"
-            :breakpoint="500"
-        >
-            <q-scroll-area class="fit text-grey-8">
-                <LeftMenu />
-            </q-scroll-area>
-        </q-drawer>
-        <q-page-container>
-            <router-view></router-view>
-        </q-page-container>
+        <Navbar />
+        <router-view></router-view>
    </q-layout>
 </template>

--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@ -1,15 +1,24 @@
-<template>
-    <div class="row fit fixed">
-        <div class="col-2">
-            <q-card square>
-                <router-link :to="{ path: '/customer/list' }">
-                    <q-icon name="arrow_back" size="md" color="primary" />
-                </router-link>Descriptor
-            </q-card>
-        </div>
+<script setup>
+import { computed } from 'vue';
+import { useState } from 'src/composables/useState';
+import { useRouter } from 'vue-router';

-        <div class="col">
-            <router-view></router-view>
-        </div>
-    </div>
+const state = useState();
+const router = useRouter();
+const entityId = computed(function () {
+    return router.currentRoute.value.params.id;
+});
+</script>
+<template>
+    <q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
+        <q-scroll-area class="fit text-grey-8">
+            <router-link :to="{ path: '/customer/list' }">
+                <q-icon name="arrow_back" size="md" color="primary" />
+            </router-link>
+            <div>Customer ID: {{ entityId }}</div>
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
 </template>
--- a/src/pages/Customer/CustomerLayout.vue
+++ b/src/pages/Customer/CustomerLayout.vue
@ -1,3 +0,0 @@
-<template>
-    <router-view></router-view>
-</template>
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@ -67,13 +67,7 @@ function navigate(id) {
                    </q-btn>
                    <q-separator vertical />
                    <q-card-actions vertical class="justify-between">
-                        <q-btn
-                            flat
-                            round
-                            color="orange"
-                            icon="arrow_circle_right"
-                            @click="navigate(customer.id)"
-                        />
+                        <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(customer.id)" />
                        <q-btn flat round color="accent" icon="preview" />
                        <q-btn flat round color="accent" icon="vn:ticket" />
                        <q-card-actions>
@ -103,33 +97,6 @@ function navigate(id) {
                        </q-card-section>
                    </div>
                </q-slide-transition>
-                <!-- <q-card-section horizontal>
-                    <q-card-section vertical class="col">
-                        <div class="text-h6">{{ customer.name }}</div>
-                        <div class="text-subtitle2">@{{ customer.username }}</div>
-
-                        <q-card-section vertical>text</q-card-section>
-                    </q-card-section>
-
-                    <q-separator vertical />
-
-                    <q-card-actions vertical class="justify-around">
-                        <q-btn flat round color="red" icon="favorite" />
-                        <q-btn flat round color="accent" icon="bookmark" />
-                        <q-btn color="grey-7" round flat icon="more_vert">
-                            <q-menu cover auto-close>
-                                <q-list>
-                                    <q-item clickable>
-                                        <q-item-section>Action 1</q-item-section>
-                                    </q-item>
-                                    <q-item clickable>
-                                        <q-item-section>Action 2</q-item-section>
-                                    </q-item>
-                                </q-list>
-                            </q-menu>
-                        </q-btn>
-                    </q-card-actions>
-                </q-card-section>-->
            </q-card>
        </div>
    </q-page>
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@ -0,0 +1,28 @@
+<script setup>
+import { ref } from 'vue';
+import { useState } from 'src/composables/useState';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const state = useState();
+const miniState = ref(true);
+</script>
+
+<template>
+    <q-drawer
+        v-model="state.drawer.value"
+        show-if-above
+        :mini="miniState"
+        @mouseover="miniState = false"
+        @mouseout="miniState = true"
+        mini-to-overlay
+        :width="200"
+        :breakpoint="500"
+    >
+        <q-scroll-area class="fit text-grey-8">
+            <LeftMenu />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
+</template>
--- a/src/pages/Dashboard/Dashboard.vue
+++ b/src/pages/Dashboard/Dashboard.vue
@ -1,87 +1,101 @@
 <script setup>
 import { ref } from 'vue';
+import { useState } from 'src/composables/useState';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const state = useState();
+const miniState = ref(true);

 const slide = ref('style');
 const slideText = 'Description text';
-
-
 </script>

 <template>
-    <q-page class="q-pa-md">
-        <q-banner
-            v-if="$q.screen.gt.xs"
-            inline-actions
-            rounded
-            class="bg-orange text-white q-mb-lg"
-        >
-            Employee notification message
-            <template #action>
-                <q-btn flat label="Dismiss" />
-            </template>
-        </q-banner>
+    <q-drawer
+        v-model="state.drawer.value"
+        show-if-above
+        :mini="miniState"
+        @mouseover="miniState = false"
+        @mouseout="miniState = true"
+        mini-to-overlay
+        :width="200"
+        :breakpoint="500"
+    >
+        <q-scroll-area class="fit text-grey-8">
+            <LeftMenu />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <q-page class="q-pa-md">
+            <q-banner v-if="$q.screen.gt.xs" inline-actions rounded class="bg-orange text-white q-mb-lg">
+                Employee notification message
+                <template #action>
+                    <q-btn flat label="Dismiss" />
+                </template>
+            </q-banner>

-        <div class="row items-start wrap q-col-gutter-md q-mb-lg">
-            <div class="col-12 col-md">
-                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                <q-carousel
-                    v-model="slide"
-                    transition-prev="scale"
-                    transition-next="scale"
-                    swipeable
-                    animated
-                    control-color="white"
-                    navigation
-                    padding
-                    arrows
-                    height="300px"
-                    class="bg-orange-3 text-white shadow-1 rounded-borders"
-                >
-                    <q-carousel-slide name="style" class="column no-wrap flex-center">
-                        <q-icon name="style" size="56px" />
-                        <div class="q-mt-md text-center">{{ slideText }}</div>
-                    </q-carousel-slide>
-                    <q-carousel-slide name="tv" class="column no-wrap flex-center">
-                        <q-icon name="live_tv" size="56px" />
-                        <div class="q-mt-md text-center">{{ slideText }}</div>
-                    </q-carousel-slide>
-                    <q-carousel-slide name="layers" class="column no-wrap flex-center">
-                        <q-icon name="layers" size="56px" />
-                        <div class="q-mt-md text-center">{{ slideText }}</div>
-                    </q-carousel-slide>
-                    <q-carousel-slide name="map" class="column no-wrap flex-center">
-                        <q-icon name="terrain" size="56px" />
-                        <div class="q-mt-md text-center">{{ slideText }}</div>
-                    </q-carousel-slide>
-                </q-carousel>
+            <div class="row items-start wrap q-col-gutter-md q-mb-lg">
+                <div class="col-12 col-md">
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                    <q-carousel
+                        v-model="slide"
+                        transition-prev="scale"
+                        transition-next="scale"
+                        swipeable
+                        animated
+                        control-color="white"
+                        navigation
+                        padding
+                        arrows
+                        height="300px"
+                        class="bg-orange-3 text-white shadow-1 rounded-borders"
+                    >
+                        <q-carousel-slide name="style" class="column no-wrap flex-center">
+                            <q-icon name="style" size="56px" />
+                            <div class="q-mt-md text-center">{{ slideText }}</div>
+                        </q-carousel-slide>
+                        <q-carousel-slide name="tv" class="column no-wrap flex-center">
+                            <q-icon name="live_tv" size="56px" />
+                            <div class="q-mt-md text-center">{{ slideText }}</div>
+                        </q-carousel-slide>
+                        <q-carousel-slide name="layers" class="column no-wrap flex-center">
+                            <q-icon name="layers" size="56px" />
+                            <div class="q-mt-md text-center">{{ slideText }}</div>
+                        </q-carousel-slide>
+                        <q-carousel-slide name="map" class="column no-wrap flex-center">
+                            <q-icon name="terrain" size="56px" />
+                            <div class="q-mt-md text-center">{{ slideText }}</div>
+                        </q-carousel-slide>
+                    </q-carousel>
+                </div>
+                <div class="col-12 col-md">
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                    <q-card class="q-pa-md">Dashboard page..</q-card>
+                </div>
+                <div class="col-12 col-md">
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                    <q-card class="q-pa-md">Dashboard page..</q-card>
+                </div>
            </div>
-            <div class="col-12 col-md">
-                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                <q-card class="q-pa-md">Dashboard page..</q-card>
+            <div class="row items-start q-col-gutter-md q-mb-lg">
+                <div class="col-12 col-md">
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                    <q-card class="q-pa-md">Dashboard page..</q-card>
+                </div>
+                <div class="col-12 col-md">
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                    <q-card class="q-pa-md">Dashboard page..</q-card>
+                </div>
            </div>
-            <div class="col-12 col-md">
-                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                <q-card class="q-pa-md">Dashboard page..</q-card>
-            </div>
-        </div>
-        <div class="row items-start q-col-gutter-md q-mb-lg">
-            <div class="col-12 col-md">
-                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                <q-card class="q-pa-md">Dashboard page..</q-card>
-            </div>
-            <div class="col-12 col-md">
-                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                <q-card class="q-pa-md">Dashboard page..</q-card>
-            </div>
-        </div>

-        <div class="row items-start q-col-gutter-md q-mb-lg">
-            <div class="col">
-                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                <q-card class="q-pa-md">Dashboard page..</q-card>
+            <div class="row items-start q-col-gutter-md q-mb-lg">
+                <div class="col">
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                    <q-card class="q-pa-md">Dashboard page..</q-card>
+                </div>
            </div>
-        </div>
-    </q-page>
+        </q-page>
+    </q-page-container>
 </template>

 <style lang="scss" scoped></style>
--- a/src/pages/Login/Login.vue
+++ b/src/pages/Login/Login.vue
@ -1,6 +1,6 @@
 <script setup>
-import { computed, ref } from 'vue';
-import { Dark, useQuasar } from 'quasar';
+import { ref } from 'vue';
+import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
@ -10,21 +10,12 @@ import { useSession } from 'src/composables/useSession';
 const quasar = useQuasar();
 const session = useSession();
 const router = useRouter();
-const { t, locale } = useI18n();
+const { t } = useI18n();

 const username = ref('');
 const password = ref('');
 const keepLogin = ref(true);

-const darkMode = computed({
-    get() {
-        return Dark.isActive;
-    },
-    set(value) {
-        Dark.set(value);
-    },
-});
-
 async function onSubmit() {
    try {
        const { data } = await axios.post('/api/accounts/login', {
@ -66,36 +57,11 @@ async function onSubmit() {

 <template>
    <q-layout>
-        <q-header class="transparent">
-            <q-toolbar>
-                <q-space></q-space>
-                <q-toggle
-                    :label="t(`globals.lang['${locale}']`)"
-                    icon="public"
-                    color="orange"
-                    false-value="es"
-                    true-value="en"
-                    v-model="locale"
-                />
-                <q-toggle
-                    v-model="darkMode"
-                    checked-icon="dark_mode"
-                    color="orange"
-                    unchecked-icon="light_mode"
-                />
-            </q-toolbar>
-        </q-header>
        <q-page-container>
            <q-page>
                <div id="login">
                    <q-card class="login q-pa-xl">
-                        <q-img
-                            src="~/assets/logo.svg"
-                            alt="Logo"
-                            fit="contain"
-                            :ratio="16 / 9"
-                            class="q-mb-md"
-                        />
+                        <q-img src="~/assets/logo.svg" alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
                        <q-form @submit="onSubmit" class="q-gutter-md">
                            <q-input
                                filled
@ -103,9 +69,7 @@ async function onSubmit() {
                                v-model="username"
                                :label="t('login.username')"
                                lazy-rules
-                                :rules="[
-                                    (val) => (val && val.length > 0) || 'Please type something',
-                                ]"
+                                :rules="[(val) => (val && val.length > 0) || 'Please type something']"
                            />
                            <q-input
                                filled
@ -114,15 +78,9 @@ async function onSubmit() {
                                v-model="password"
                                :label="t('login.password')"
                                lazy-rules
-                                :rules="[
-                                    (val) => (val && val.length > 0) || 'Please type something',
-                                ]"
-                            />
-                            <q-toggle
-                                v-model="keepLogin"
-                                :label="t('login.keepLogin')"
-                                color="orange"
+                                :rules="[(val) => (val && val.length > 0) || 'Please type something']"
                            />
+                            <q-toggle v-model="keepLogin" :label="t('login.keepLogin')" color="orange" />

                            <div>
                                <q-btn :label="t('login.submit')" type="submit" color="orange" />
--- a/src/pages/Login/tests/Login.spec.js
+++ b/src/pages/Login/tests/Login.spec.js
@ -18,8 +18,17 @@ describe('Login', () => {
    });

    it('should successfully set the token into session', async () => {
+        const expectedUser = {
+            id: 999,
+            name: `T'Challa`,
+            nickname: 'Black Panther',
+            lang: 'en',
+            userConfig: {
+                darkMode: false,
+            }
+        }
        jest.spyOn(axios, 'post').mockResolvedValue({ data: { token: 'token' } });
-        jest.spyOn(axios, 'get').mockResolvedValue({ data: { roles: [], user: { id: 1 } } });
+        jest.spyOn(axios, 'get').mockResolvedValue({ data: { roles: [], user: expectedUser } });
        jest.spyOn(vm.quasar, 'notify')

        expect(vm.session.getToken()).toEqual('');
--- a/src/pages/Ticket/Card/TicketBasicData.vue
+++ b/src/pages/Ticket/Card/TicketBasicData.vue
@ -0,0 +1,3 @@
+<template>
+    <q-card>Basic Data</q-card>
+</template>
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue';
+import { useState } from 'src/composables/useState';
+import { useRouter } from 'vue-router';
+
+const state = useState();
+const router = useRouter();
+const entityId = computed(function () {
+    return router.currentRoute.value.params.id;
+});
+</script>
+<template>
+    <q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
+        <q-scroll-area class="fit text-grey-8">
+            <router-link :to="{ path: '/customer/list' }">
+                <q-icon name="arrow_back" size="md" color="primary" />
+            </router-link>
+            <div>Customer ID: {{ entityId }}</div>
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
+</template>
--- a/src/pages/Ticket/TicketLayout.vue
+++ b/src/pages/Ticket/TicketLayout.vue
@ -1,3 +0,0 @@
-<template>
-    <router-view></router-view>
-</template>
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@ -0,0 +1,110 @@
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+
+const customers = [
+    {
+        id: 1101,
+        name: 'Bruce Wayne',
+        username: 'batman',
+        email: 'batman@gotham',
+        phone: '555-555-5555',
+        expanded: ref(false),
+    },
+    {
+        id: 1102,
+        name: 'James Gordon',
+        username: 'jamesgordon',
+        email: 'jamesgordon@gotham',
+        phone: '555-555-1111',
+        expanded: ref(false),
+    },
+];
+
+function navigate(id) {
+    router.push({ path: `/customer/${id}` });
+}
+</script>
+
+<template>
+    <q-page class="q-pa-md">
+        <div class="column items-center q-gutter-y-md">
+            <q-card v-for="customer in customers" :key="customer.id" class="card">
+                <!-- v-ripple :to="{ path: '/dashboard' }" -->
+                <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
+                    <q-item-section class="q-pa-md">
+                        <div class="text-h6">{{ customer.name }}</div>
+                        <q-item-label caption>@{{ customer.username }}</q-item-label>
+                        <div class="q-mt-md">
+                            <q-list>
+                                <q-item class="q-pa-none">
+                                    <q-item-section>
+                                        <q-item-label caption>Email</q-item-label>
+                                        <q-item-label>{{ customer.email }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item class="q-pa-none">
+                                    <q-item-section>
+                                        <q-item-label caption>Phone</q-item-label>
+                                        <q-item-label>{{ customer.phone }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
+                        </div>
+                    </q-item-section>
+                    <q-btn color="grey-7" round flat icon="more_vert">
+                        <q-menu cover auto-close>
+                            <q-list>
+                                <q-item clickable>
+                                    <q-item-section>Action 1</q-item-section>
+                                </q-item>
+                                <q-item clickable>
+                                    <q-item-section>Action 2</q-item-section>
+                                </q-item>
+                            </q-list>
+                        </q-menu>
+                    </q-btn>
+                    <q-separator vertical />
+                    <q-card-actions vertical class="justify-between">
+                        <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(customer.id)" />
+                        <q-btn flat round color="accent" icon="preview" />
+                        <q-btn flat round color="accent" icon="vn:ticket" />
+                        <q-card-actions>
+                            <q-btn
+                                color="grey"
+                                round
+                                flat
+                                dense
+                                :icon="customer.expanded.value ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+                                @click="customer.expanded.value = !customer.expanded.value"
+                            />
+                        </q-card-actions>
+                    </q-card-actions>
+                </q-item>
+                <q-slide-transition>
+                    <div v-show="customer.expanded.value">
+                        <q-separator />
+                        <q-card-section class="text-subitle2">
+                            <q-list>
+                                <q-item clickable>
+                                    <q-item-section>
+                                        <q-item-label>Address</q-item-label>
+                                        <q-item-label caption>Avenue 11</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
+                        </q-card-section>
+                    </div>
+                </q-slide-transition>
+            </q-card>
+        </div>
+    </q-page>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
--- a/src/pages/Ticket/TicketMain.vue
+++ b/src/pages/Ticket/TicketMain.vue
@ -0,0 +1,28 @@
+<script setup>
+import { ref } from 'vue';
+import { useState } from 'src/composables/useState';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const state = useState();
+const miniState = ref(true);
+</script>
+
+<template>
+    <q-drawer
+        v-model="state.drawer.value"
+        show-if-above
+        :mini="miniState"
+        @mouseover="miniState = false"
+        @mouseout="miniState = true"
+        mini-to-overlay
+        :width="200"
+        :breakpoint="500"
+    >
+        <q-scroll-area class="fit text-grey-8">
+            <LeftMenu />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
+</template>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -1,11 +1,16 @@
 import { route } from 'quasar/wrappers';
 import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
+import { Notify } from 'quasar';
 import routes from './routes';
 import { i18n } from 'src/boot/i18n';
+import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import { useRole } from 'src/composables/useRole';
+
+const state = useState();
 const session = useSession();
 const role = useRole();
+const { t } = i18n.global;

 /*
 * If not building with SSR mode, you can
@ -33,12 +38,29 @@ export default route(function (/* { store, ssrContext } */) {
        history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE),
    });

-    Router.beforeEach((to, from, next) => {
+    Router.beforeEach(async (to, from, next) => {
        const { isLoggedIn } = session;

        if (!isLoggedIn() && to.name !== 'Login') {
-            next({ name: 'Login', query: { redirect: to.fullPath } });
-        } else {
+            return next({ name: 'Login', query: { redirect: to.fullPath } });
+        }
+
+        if (isLoggedIn()) {
+            try {
+                const stateRoles = state.getRoles().value;
+                if (stateRoles.length === 0) {
+                    await role.fetch();
+                }
+            } catch (error) {
+                Notify.create({
+                    message: t('errors.statusUnauthorized'),
+                    type: 'negative',
+                });
+
+                session.destroy();
+                return next({ path: '/login' });
+            }
+
            const matches = to.matched;
            const hasRequiredRoles = matches.every(route => {
                const meta = route.meta;
@ -47,16 +69,15 @@ export default route(function (/* { store, ssrContext } */) {
                return true;
            });

-            if (hasRequiredRoles) {
-                next();
-            } else {
-                next({ path: '/' });
+            if (!hasRequiredRoles) {
+                return next({ path: '/' });
            }
        }
+
+        next();
    });

    Router.afterEach((to) => {
-        const { t } = i18n.global;
        let title = t(`login.title`);

        const matches = to.matched;
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@ -1,29 +1,40 @@
+import { RouterView } from 'vue-router';
+
 export default {
    path: '/customer',
    name: 'Customer',
    meta: {
        title: 'customers',
-        icon: 'vn:client',
-        roles: ['salesPerson'],
+        icon: 'vn:client'
    },
-    component: () => import('src/pages/Customer/CustomerLayout.vue'),
-    redirect: { name: 'CustomerList' },
+    component: RouterView,
+    redirect: { name: 'CustomerMain' },
    children: [
        {
-            path: 'list',
-            name: 'CustomerList',
-            meta: {
-                title: 'list'
-            },
-            component: () => import('src/pages/Customer/CustomerList.vue'),
-        },
-        {
-            path: 'create',
-            name: 'CustomerCreate',
-            meta: {
-                title: 'create'
-            },
-            component: () => import('src/pages/Customer/CustomerCreate.vue'),
+            path: '',
+            name: 'CustomerMain',
+            component: () => import('src/pages/Customer/CustomerMain.vue'),
+            redirect: { name: 'CustomerList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'CustomerList',
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Customer/CustomerList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'CustomerCreate',
+                    meta: {
+                        title: 'createCustomer',
+                        icon: 'vn:addperson',
+                    },
+                    component: () => import('src/pages/Customer/CustomerCreate.vue'),
+                },
+            ]
        },
        {
            path: ':id',
@ -40,5 +51,5 @@ export default {
                }
            ]
        },
-    ],
+    ]
 };
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@ -1,18 +1,57 @@
+import { RouterView } from 'vue-router';
+
 export default {
    path: '/ticket',
    name: 'Ticket',
    meta: {
        title: 'tickets',
-        icon: 'vn:ticket',
+        icon: 'vn:ticket'
    },
-    component: () => import('src/pages/Ticket/TicketLayout.vue'),
-    redirect: { path: '/ticket/list' },
+    component: RouterView,
+    redirect: { name: 'TicketMain' },
    children: [
        {
-            path: 'list',
-            name: 'TicketList',
-            meta: { title: 'list' },
-            component: () => import('src/pages/Ticket/TicketList.vue'),
-        }
-    ],
+            path: '',
+            name: 'TicketMain',
+            component: () => import('src/pages/Ticket/TicketMain.vue'),
+            redirect: { name: 'TicketList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'TicketList',
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Ticket/TicketList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'TicketCreate',
+                    meta: {
+                        title: 'createTicket',
+                        icon: 'vn:ticketAdd',
+                        roles: ['salesPerson'],
+                    },
+                    component: () => import('src/pages/Ticket/TicketList.vue'),
+                },
+
+            ]
+        },
+        {
+            path: ':id',
+            component: () => import('src/pages/Ticket/Card/TicketCard.vue'),
+            redirect: { name: 'TicketBasicData' },
+            children: [
+                {
+                    path: 'basic-data',
+                    name: 'TicketBasicData',
+                    meta: {
+                        title: 'basicData'
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketBasicData.vue'),
+                }
+            ]
+        },
+    ]
 };
--- a/src/router/routes.js
+++ b/src/router/routes.js
@ -20,16 +20,16 @@ const routes = [
                meta: { title: 'dashboard', icon: 'dashboard' },
                component: () => import('../pages/Dashboard/Dashboard.vue'),
            },
-            /*             {
-                            path: '/:pathMatch(.*)*',
-                            name: 'NotFound',
-                            component: () => import('../pages/NotFound.vue'),
-                        }, */
            // Module routes
            customer,
            ticket,
        ],
    },
+    {
+        path: '/:pathMatch(.*)*',
+        name: 'NotFound',
+        component: () => import('../pages/NotFound.vue'),
+    }
 ];

 export default routes;
--- a/src/types/route.ts
+++ b/src/types/route.ts
@ -1,4 +0,0 @@
-export interface Route {
-    path: string;
-    component: any;
-}