From 78baa306b07dd531a3c01a1d534ddd3fbaf2aa8f Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 12 Apr 2022 14:53:43 +0200
Subject: [PATCH 1/8] Make use of slot

---
 src/layouts/MainLayout.vue               | 36 ++++++++------------
 src/pages/Customer/Card/CustomerCard.vue | 18 +++++-----
 src/pages/Customer/CustomerLayout.vue    | 15 +++++++++
 src/pages/Dashboard/DashboardLayout.vue  | 17 ++++++++++
 src/router/routes.js                     | 42 ++++++++++++++++++++++--
 5 files changed, 93 insertions(+), 35 deletions(-)
 create mode 100644 src/pages/Dashboard/DashboardLayout.vue

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 480617886..c26912fa4 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,36 +1,26 @@
 <script setup>
-import { ref } from 'vue';
+// 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);
+//import LeftMenu from 'src/components/LeftMenu.vue';
+// const drawer = ref(false);
+// const miniState = ref(true);
 
-function onToggleDrawer() {
-    drawer.value = !drawer.value;
-}
+// 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>
+        <slot name="drawer"></slot>
         <q-page-container>
-            <router-view></router-view>
+
+            <router-view>
+            </router-view>
         </q-page-container>
     </q-layout>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+</style>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 152c8cfdc..02db481f6 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -1,15 +1,15 @@
+
+
 <template>
-    <div class="row fit fixed">
-        <div class="col-2">
-            <q-card square>
+    <slot name="drawer">
+        <q-drawer v-model="drawer" 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>Descriptor
-            </q-card>
-        </div>
+            </q-scroll-area>
+        </q-drawer>
 
-        <div class="col">
-            <router-view></router-view>
-        </div>
-    </div>
+    </slot>
+    <router-view></router-view>
 </template>
diff --git a/src/pages/Customer/CustomerLayout.vue b/src/pages/Customer/CustomerLayout.vue
index 2785996d8..755652635 100644
--- a/src/pages/Customer/CustomerLayout.vue
+++ b/src/pages/Customer/CustomerLayout.vue
@@ -1,3 +1,18 @@
+<script setup>
+import { ref } from 'vue';
+import LeftMenu from 'src/components/LeftMenu.vue';
+const drawer = ref(false);
+const miniState = ref(true);
+</script>
 <template>
+    <slot name="drawer">
+        <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>
+
+    </slot>
     <router-view></router-view>
 </template>
diff --git a/src/pages/Dashboard/DashboardLayout.vue b/src/pages/Dashboard/DashboardLayout.vue
new file mode 100644
index 000000000..917b15059
--- /dev/null
+++ b/src/pages/Dashboard/DashboardLayout.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { ref } from 'vue';
+import LeftMenu from 'src/components/LeftMenu.vue';
+const drawer = ref(false);
+const miniState = ref(true);
+</script>
+<template>
+    <slot name="drawer">
+        <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>
+    </slot>
+    <router-view></router-view>
+</template>
diff --git a/src/router/routes.js b/src/router/routes.js
index d4b63df1d..168a907e2 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,4 +1,4 @@
-import customer from './modules/customer';
+//import customer from './modules/customer';
 import ticket from './modules/ticket';
 
 const routes = [
@@ -18,7 +18,43 @@ const routes = [
                 path: '/dashboard',
                 name: 'Dashboard',
                 meta: { title: 'dashboard', icon: 'dashboard' },
-                component: () => import('../pages/Dashboard/Dashboard.vue'),
+                component: () => import('../pages/Dashboard/DashboardLayout.vue'),
+            },
+            {
+                path: '/customer',
+                name: 'Customer',
+                meta: {
+                    title: 'customers',
+                    icon: 'vn:client',
+                    roles: ['salesPerson'],
+                },
+                component: () => import('src/pages/Customer/CustomerLayout.vue'),
+                redirect: { name: 'CustomerList' },
+                children: [
+                    {
+                        path: 'list',
+                        name: 'CustomerList',
+                        meta: {
+                            title: 'list'
+                        },
+                        component: () => import('src/pages/Customer/CustomerList.vue'),
+                    },
+                    {
+                        path: ':id',
+                        component: () => import('src/pages/Customer/Card/CustomerCard.vue'),
+                        redirect: { name: 'CustomerBasicData' },
+                        children: [
+                            {
+                                path: 'basic-data',
+                                name: 'CustomerBasicData',
+                                meta: {
+                                    title: 'basicData'
+                                },
+                                component: () => import('src/pages/Customer/Card/CustomerBasicData.vue'),
+                            }
+                        ]
+                    },
+                ]
             },
             /*             {
                             path: '/:pathMatch(.*)*',
@@ -26,7 +62,7 @@ const routes = [
                             component: () => import('../pages/NotFound.vue'),
                         }, */
             // Module routes
-            customer,
+            //customer,
             ticket,
         ],
     },

From 9123ce9f5f45974a1904c78fd6c584e4a1ce6007 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 19 Apr 2022 11:03:37 +0200
Subject: [PATCH 2/8] Changes

---
 src/layouts/MainLayout.vue            |  7 +------
 src/pages/Customer/CustomerLayout.vue | 15 ---------------
 src/pages/Customer/CustomerList.vue   | 22 ++++++++--------------
 src/pages/Customer/CustomerMain.vue   | 21 +++++++++++++++++++++
 src/router/routes.js                  | 22 +++++++++++++++-------
 5 files changed, 45 insertions(+), 42 deletions(-)
 create mode 100644 src/pages/Customer/CustomerMain.vue

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index c26912fa4..4d43d79b8 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -13,12 +13,7 @@ import Navbar from 'src/components/Navbar.vue';
 <template>
     <q-layout view="hHh lpR fFf">
         <Navbar @toggle-drawer="onToggleDrawer()" />
-        <slot name="drawer"></slot>
-        <q-page-container>
-
-            <router-view>
-            </router-view>
-        </q-page-container>
+        <router-view> </router-view>
     </q-layout>
 </template>
 
diff --git a/src/pages/Customer/CustomerLayout.vue b/src/pages/Customer/CustomerLayout.vue
index 755652635..2785996d8 100644
--- a/src/pages/Customer/CustomerLayout.vue
+++ b/src/pages/Customer/CustomerLayout.vue
@@ -1,18 +1,3 @@
-<script setup>
-import { ref } from 'vue';
-import LeftMenu from 'src/components/LeftMenu.vue';
-const drawer = ref(false);
-const miniState = ref(true);
-</script>
 <template>
-    <slot name="drawer">
-        <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>
-
-    </slot>
     <router-view></router-view>
 </template>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 47960b007..22dc02b7b 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -25,9 +25,14 @@ const customers = [
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
+
+// function onToggleDrawer() {
+//     drawer.value = !drawer.value;
+// }
 </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">
@@ -67,24 +72,13 @@ 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>
-                            <q-btn
-                                color="grey"
-                                round
-                                flat
-                                dense
+                            <q-btn color="grey" round flat dense
                                 :icon="customer.expanded.value ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
-                                @click="customer.expanded.value = !customer.expanded.value"
-                            />
+                                @click="customer.expanded.value = !customer.expanded.value" />
                         </q-card-actions>
                     </q-card-actions>
                 </q-item>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
new file mode 100644
index 000000000..6f54e6e21
--- /dev/null
+++ b/src/pages/Customer/CustomerMain.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { ref } from 'vue';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const drawer = ref(false);
+const miniState = ref(true);
+
+</script>
+
+<template>
+    <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>
+</template>
diff --git a/src/router/routes.js b/src/router/routes.js
index 168a907e2..652ec4610 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -29,15 +29,23 @@ const routes = [
                     roles: ['salesPerson'],
                 },
                 component: () => import('src/pages/Customer/CustomerLayout.vue'),
-                redirect: { name: 'CustomerList' },
+                redirect: { name: 'CustomerMain' },
                 children: [
                     {
-                        path: 'list',
-                        name: 'CustomerList',
-                        meta: {
-                            title: 'list'
-                        },
-                        component: () => import('src/pages/Customer/CustomerList.vue'),
+                        path: '',
+                        name: 'CustomerMain',
+                        component: () => import('src/pages/Customer/CustomerMain.vue'),
+                        redirect: { name: 'CustomerList' },
+                        children: [
+                            {
+                                path: 'list',
+                                name: 'CustomerList',
+                                meta: {
+                                    title: 'list'
+                                },
+                                component: () => import('src/pages/Customer/CustomerList.vue'),
+                            },
+                        ]
                     },
                     {
                         path: ':id',

From 5c20871a718163a806f5bca6253e97a1284e7477 Mon Sep 17 00:00:00 2001
From: carlosjr <carlosjr@verdnatura.es>
Date: Tue, 19 Apr 2022 12:28:23 +0200
Subject: [PATCH 3/8] disabled template ts error

---
 jsconfig.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/jsconfig.json b/jsconfig.json
index 8c158e0e0..72ef27adc 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -13,5 +13,6 @@
             "vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"]
         }
     },
-    "exclude": ["dist", ".quasar", "node_modules"]
+    "exclude": ["dist", ".quasar", "node_modules"],
+    "vueCompilerOptions.experimentalDisableTemplateSupport": "disable"
 }

From a60351a0e997cce65f13fc8ee8b53fd0fafcd944 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 19 Apr 2022 12:37:47 +0200
Subject: [PATCH 4/8] Routing changes

---
 src/layouts/MainLayout.vue               |   2 +-
 src/pages/Customer/Card/CustomerCard.vue |  23 ++--
 src/pages/Customer/CustomerLayout.vue    |   3 -
 src/pages/Customer/CustomerList.vue      |  32 ------
 src/pages/Customer/CustomerMain.vue      |   1 -
 src/pages/Dashboard/Dashboard.vue        | 138 +++++++++++------------
 src/pages/Dashboard/DashboardLayout.vue  |  17 ---
 src/pages/Ticket/TicketLayout.vue        |   3 -
 src/pages/Ticket/TicketList.vue          | 105 +++++++++++++++++
 src/pages/Ticket/TicketMain.vue          |  19 ++++
 src/router/modules/customer.js           |  36 +++---
 src/router/modules/ticket.js             |  44 ++++++--
 src/router/routes.js                     |  60 ++--------
 13 files changed, 265 insertions(+), 218 deletions(-)
 delete mode 100644 src/pages/Customer/CustomerLayout.vue
 delete mode 100644 src/pages/Dashboard/DashboardLayout.vue
 delete mode 100644 src/pages/Ticket/TicketLayout.vue
 create mode 100644 src/pages/Ticket/TicketMain.vue

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 4d43d79b8..2bb425ab1 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -13,7 +13,7 @@ import Navbar from 'src/components/Navbar.vue';
 <template>
     <q-layout view="hHh lpR fFf">
         <Navbar @toggle-drawer="onToggleDrawer()" />
-        <router-view> </router-view>
+        <router-view></router-view>
     </q-layout>
 </template>
 
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 02db481f6..5d5b3ac0d 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -1,15 +1,12 @@
-
-
 <template>
-    <slot name="drawer">
-        <q-drawer v-model="drawer" 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>Descriptor
-            </q-scroll-area>
-        </q-drawer>
-
-    </slot>
-    <router-view></router-view>
+    <q-drawer v-model="drawer" 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>Descriptor
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
 </template>
diff --git a/src/pages/Customer/CustomerLayout.vue b/src/pages/Customer/CustomerLayout.vue
deleted file mode 100644
index 2785996d8..000000000
--- a/src/pages/Customer/CustomerLayout.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    <router-view></router-view>
-</template>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 22dc02b7b..cf5dfcb4b 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -25,14 +25,9 @@ const customers = [
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
-
-// function onToggleDrawer() {
-//     drawer.value = !drawer.value;
-// }
 </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">
@@ -97,33 +92,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>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index 6f54e6e21..f4366e140 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -15,7 +15,6 @@ const miniState = ref(true);
         </q-scroll-area>
     </q-drawer>
     <q-page-container>
-
         <router-view></router-view>
     </q-page-container>
 </template>
diff --git a/src/pages/Dashboard/Dashboard.vue b/src/pages/Dashboard/Dashboard.vue
index f02d33f3f..62f752875 100644
--- a/src/pages/Dashboard/Dashboard.vue
+++ b/src/pages/Dashboard/Dashboard.vue
@@ -1,87 +1,83 @@
 <script setup>
 import { ref } from 'vue';
+import LeftMenu from 'src/components/LeftMenu.vue';
 
 const slide = ref('style');
 const slideText = 'Description text';
-
+const drawer = ref(false);
+const miniState = ref(true);
 
 </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="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>
+        <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>
+<style lang="scss" scoped>
+</style>
diff --git a/src/pages/Dashboard/DashboardLayout.vue b/src/pages/Dashboard/DashboardLayout.vue
deleted file mode 100644
index 917b15059..000000000
--- a/src/pages/Dashboard/DashboardLayout.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import LeftMenu from 'src/components/LeftMenu.vue';
-const drawer = ref(false);
-const miniState = ref(true);
-</script>
-<template>
-    <slot name="drawer">
-        <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>
-    </slot>
-    <router-view></router-view>
-</template>
diff --git a/src/pages/Ticket/TicketLayout.vue b/src/pages/Ticket/TicketLayout.vue
deleted file mode 100644
index 2785996d8..000000000
--- a/src/pages/Ticket/TicketLayout.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    <router-view></router-view>
-</template>
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index e69de29bb..cf5dfcb4b 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -0,0 +1,105 @@
+<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>
diff --git a/src/pages/Ticket/TicketMain.vue b/src/pages/Ticket/TicketMain.vue
new file mode 100644
index 000000000..b763b1202
--- /dev/null
+++ b/src/pages/Ticket/TicketMain.vue
@@ -0,0 +1,19 @@
+<script setup>
+import { ref } from 'vue';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const drawer = ref(false);
+const miniState = ref(true);
+</script>
+
+<template>
+    <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>
+</template>
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 948fcc4c3..0ff5b0798 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -1,3 +1,5 @@
+import { RouterView } from 'vue-router';
+
 export default {
     path: '/customer',
     name: 'Customer',
@@ -6,24 +8,24 @@ export default {
         icon: 'vn:client',
         roles: ['salesPerson'],
     },
-    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'
+                    },
+                    component: () => import('src/pages/Customer/CustomerList.vue'),
+                },
+            ]
         },
         {
             path: ':id',
@@ -40,5 +42,5 @@ export default {
                 }
             ]
         },
-    ],
+    ]
 };
\ No newline at end of file
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 6e22a0ecc..f95f2ab34 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -1,18 +1,46 @@
+import { RouterView } from 'vue-router';
+
 export default {
     path: '/ticket',
     name: 'Ticket',
     meta: {
         title: 'tickets',
         icon: 'vn:ticket',
+        roles: ['salesPerson'],
     },
-    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'
+                    },
+                    component: () => import('src/pages/Ticket/TicketList.vue'),
+                },
+            ]
+        },
+        {
+            path: ':id',
+            component: () => import('src/pages/Customer/Card/CustomerCard.vue'),
+            redirect: { name: 'CustomerBasicData' },
+            children: [
+                {
+                    path: 'basic-data',
+                    name: 'CustomerBasicData',
+                    meta: {
+                        title: 'basicData'
+                    },
+                    component: () => import('src/pages/Customer/Card/CustomerBasicData.vue'),
+                }
+            ]
+        },
+    ]
 };
\ No newline at end of file
diff --git a/src/router/routes.js b/src/router/routes.js
index 652ec4610..6905c4116 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,4 +1,4 @@
-//import customer from './modules/customer';
+import customer from './modules/customer';
 import ticket from './modules/ticket';
 
 const routes = [
@@ -18,62 +18,18 @@ const routes = [
                 path: '/dashboard',
                 name: 'Dashboard',
                 meta: { title: 'dashboard', icon: 'dashboard' },
-                component: () => import('../pages/Dashboard/DashboardLayout.vue'),
+                component: () => import('../pages/Dashboard/Dashboard.vue'),
             },
-            {
-                path: '/customer',
-                name: 'Customer',
-                meta: {
-                    title: 'customers',
-                    icon: 'vn:client',
-                    roles: ['salesPerson'],
-                },
-                component: () => import('src/pages/Customer/CustomerLayout.vue'),
-                redirect: { name: 'CustomerMain' },
-                children: [
-                    {
-                        path: '',
-                        name: 'CustomerMain',
-                        component: () => import('src/pages/Customer/CustomerMain.vue'),
-                        redirect: { name: 'CustomerList' },
-                        children: [
-                            {
-                                path: 'list',
-                                name: 'CustomerList',
-                                meta: {
-                                    title: 'list'
-                                },
-                                component: () => import('src/pages/Customer/CustomerList.vue'),
-                            },
-                        ]
-                    },
-                    {
-                        path: ':id',
-                        component: () => import('src/pages/Customer/Card/CustomerCard.vue'),
-                        redirect: { name: 'CustomerBasicData' },
-                        children: [
-                            {
-                                path: 'basic-data',
-                                name: 'CustomerBasicData',
-                                meta: {
-                                    title: 'basicData'
-                                },
-                                component: () => import('src/pages/Customer/Card/CustomerBasicData.vue'),
-                            }
-                        ]
-                    },
-                ]
-            },
-            /*             {
-                            path: '/:pathMatch(.*)*',
-                            name: 'NotFound',
-                            component: () => import('../pages/NotFound.vue'),
-                        }, */
             // Module routes
-            //customer,
+            customer,
             ticket,
         ],
     },
+    {
+        path: '/:pathMatch(.*)*',
+        name: 'NotFound',
+        component: () => import('../pages/NotFound.vue'),
+    }
 ];
 
 export default routes;
\ No newline at end of file

From 38f0c89fbd85834792e522e4b8adeb8ace156e7d Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 19 Apr 2022 12:55:12 +0200
Subject: [PATCH 5/8] Disabled experimental template support

---
 jsconfig.json                  | 4 +++-
 src/router/modules/customer.js | 8 ++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/jsconfig.json b/jsconfig.json
index 72ef27adc..ee1a17d04 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -14,5 +14,7 @@
         }
     },
     "exclude": ["dist", ".quasar", "node_modules"],
-    "vueCompilerOptions.experimentalDisableTemplateSupport": "disable"
+    "vueCompilerOptions": {
+        "experimentalDisableTemplateSupport": true
+    }
 }
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 0ff5b0798..d72834dc9 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -25,6 +25,14 @@ export default {
                     },
                     component: () => import('src/pages/Customer/CustomerList.vue'),
                 },
+                {
+                    path: 'create',
+                    name: 'CustomerCreate',
+                    meta: {
+                        title: 'create'
+                    },
+                    component: () => import('src/pages/Customer/CustomerCreate.vue'),
+                },
             ]
         },
         {

From 4ff56927891ae4e3daa17bc56c1a4419eae7c23a Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 19 Apr 2022 13:07:23 +0200
Subject: [PATCH 6/8] Default formatter

---
 .vscode/settings.json               |  3 +++
 src/pages/Customer/CustomerList.vue |  9 ++++++--
 src/pages/Customer/CustomerMain.vue | 13 +++++++++---
 src/pages/Dashboard/Dashboard.vue   | 32 +++++++++++++++++++++--------
 src/pages/Ticket/TicketList.vue     |  9 ++++++--
 src/pages/Ticket/TicketMain.vue     | 12 +++++++++--
 6 files changed, 61 insertions(+), 17 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3dcb9b1d6..c8da3d854 100644
--- 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"
     }
 }
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index cf5dfcb4b..ebc291933 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -71,9 +71,14 @@ function navigate(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
+                            <q-btn
+                                color="grey"
+                                round
+                                flat
+                                dense
                                 :icon="customer.expanded.value ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
-                                @click="customer.expanded.value = !customer.expanded.value" />
+                                @click="customer.expanded.value = !customer.expanded.value"
+                            />
                         </q-card-actions>
                     </q-card-actions>
                 </q-item>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index f4366e140..f27c822cb 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -4,12 +4,19 @@ import LeftMenu from 'src/components/LeftMenu.vue';
 
 const drawer = ref(false);
 const miniState = ref(true);
-
 </script>
 
 <template>
-    <q-drawer v-model="drawer" show-if-above :mini="miniState" @mouseover="miniState = false"
-        @mouseout="miniState = true" mini-to-overlay :width="200" :breakpoint="500">
+    <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>
diff --git a/src/pages/Dashboard/Dashboard.vue b/src/pages/Dashboard/Dashboard.vue
index 62f752875..3b2fa8013 100644
--- a/src/pages/Dashboard/Dashboard.vue
+++ b/src/pages/Dashboard/Dashboard.vue
@@ -6,12 +6,19 @@ const slide = ref('style');
 const slideText = 'Description text';
 const drawer = ref(false);
 const miniState = ref(true);
-
 </script>
 
 <template>
-    <q-drawer v-model="drawer" show-if-above :mini="miniState" @mouseover="miniState = false"
-        @mouseout="miniState = true" mini-to-overlay :width="200" :breakpoint="500">
+    <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>
@@ -28,9 +35,19 @@ const miniState = ref(true);
             <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
+                        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>
@@ -79,5 +96,4 @@ const miniState = ref(true);
     </q-page-container>
 </template>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index cf5dfcb4b..ebc291933 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -71,9 +71,14 @@ function navigate(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
+                            <q-btn
+                                color="grey"
+                                round
+                                flat
+                                dense
                                 :icon="customer.expanded.value ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
-                                @click="customer.expanded.value = !customer.expanded.value" />
+                                @click="customer.expanded.value = !customer.expanded.value"
+                            />
                         </q-card-actions>
                     </q-card-actions>
                 </q-item>
diff --git a/src/pages/Ticket/TicketMain.vue b/src/pages/Ticket/TicketMain.vue
index b763b1202..f27c822cb 100644
--- a/src/pages/Ticket/TicketMain.vue
+++ b/src/pages/Ticket/TicketMain.vue
@@ -7,8 +7,16 @@ const miniState = ref(true);
 </script>
 
 <template>
-    <q-drawer v-model="drawer" show-if-above :mini="miniState" @mouseover="miniState = false"
-        @mouseout="miniState = true" mini-to-overlay :width="200" :breakpoint="500">
+    <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>

From 7a99ad188737ab610eae362e864a568197c28f51 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 19 Apr 2022 13:50:54 +0200
Subject: [PATCH 7/8] Change drawer state

---
 src/components/Navbar.vue                |  9 ++++-----
 src/composables/useState.js              |  3 +++
 src/layouts/MainLayout.vue               | 13 ++-----------
 src/pages/Customer/Card/CustomerCard.vue |  9 +++++++--
 src/pages/Customer/CustomerMain.vue      |  5 +++--
 src/pages/Dashboard/Dashboard.vue        |  8 +++++---
 6 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index d25fe43a2..778fda213 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,5 +1,3 @@
-
-
 <script setup>
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
@@ -10,14 +8,15 @@ 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" />
             <router-link to="/">
                 <q-btn flat round class="q-ml-xs" v-if="$q.screen.gt.xs">
                     <q-avatar square size="md">
diff --git a/src/composables/useState.js b/src/composables/useState.js
index 2f182d651..78ff4257f 100644
--- a/src/composables/useState.js
+++ b/src/composables/useState.js
@@ -8,6 +8,8 @@ const user = ref({
 
 const roles = ref([]);
 
+const drawer = ref(true);
+
 export function useState() {
     function getUser() {
         return computed(() => {
@@ -42,5 +44,6 @@ export function useState() {
         setUser,
         getRoles,
         setRoles,
+        drawer
     };
 }
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 2bb425ab1..9ba7063a4 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,21 +1,12 @@
 <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()" />
+        <Navbar />
         <router-view></router-view>
     </q-layout>
 </template>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 5d5b3ac0d..452ecb9dd 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -1,9 +1,14 @@
+<script setup>
+import { useState } from 'src/composables/useState';
+
+const state = useState();
+</script>
 <template>
-    <q-drawer v-model="drawer" show-if-above :width="200" :breakpoint="500">
+    <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>Descriptor
+            </router-link>
         </q-scroll-area>
     </q-drawer>
     <q-page-container>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index f27c822cb..731ebb803 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -1,14 +1,15 @@
 <script setup>
 import { ref } from 'vue';
+import { useState } from 'src/composables/useState';
 import LeftMenu from 'src/components/LeftMenu.vue';
 
-const drawer = ref(false);
+const state = useState();
 const miniState = ref(true);
 </script>
 
 <template>
     <q-drawer
-        v-model="drawer"
+        v-model="state.drawer.value"
         show-if-above
         :mini="miniState"
         @mouseover="miniState = false"
diff --git a/src/pages/Dashboard/Dashboard.vue b/src/pages/Dashboard/Dashboard.vue
index 3b2fa8013..28bad6e1a 100644
--- a/src/pages/Dashboard/Dashboard.vue
+++ b/src/pages/Dashboard/Dashboard.vue
@@ -1,16 +1,18 @@
 <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';
-const drawer = ref(false);
-const miniState = ref(true);
 </script>
 
 <template>
     <q-drawer
-        v-model="drawer"
+        v-model="state.drawer.value"
         show-if-above
         :mini="miniState"
         @mouseover="miniState = false"

From ab9f19445ce9ab6f6102e39ed8da5f0ef376715e Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 19 Apr 2022 14:24:15 +0200
Subject: [PATCH 8/8] Updated routes

---
 src/pages/Customer/Card/CustomerCard.vue  |  7 +++++++
 src/pages/Ticket/Card/TicketBasicData.vue |  3 +++
 src/pages/Ticket/Card/TicketCard.vue      | 24 +++++++++++++++++++++++
 src/pages/Ticket/TicketMain.vue           |  5 +++--
 src/router/modules/ticket.js              |  8 ++++----
 src/types/route.ts                        |  4 ----
 6 files changed, 41 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/Ticket/Card/TicketBasicData.vue
 create mode 100644 src/pages/Ticket/Card/TicketCard.vue
 delete mode 100644 src/types/route.ts

diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 452ecb9dd..7ac41ebf4 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -1,7 +1,13 @@
 <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">
@@ -9,6 +15,7 @@ const state = useState();
             <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>
diff --git a/src/pages/Ticket/Card/TicketBasicData.vue b/src/pages/Ticket/Card/TicketBasicData.vue
new file mode 100644
index 000000000..b4e913ad5
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketBasicData.vue
@@ -0,0 +1,3 @@
+<template>
+    <q-card>Basic Data</q-card>
+</template>
\ No newline at end of file
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
new file mode 100644
index 000000000..7ac41ebf4
--- /dev/null
+++ 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>
diff --git a/src/pages/Ticket/TicketMain.vue b/src/pages/Ticket/TicketMain.vue
index f27c822cb..731ebb803 100644
--- a/src/pages/Ticket/TicketMain.vue
+++ b/src/pages/Ticket/TicketMain.vue
@@ -1,14 +1,15 @@
 <script setup>
 import { ref } from 'vue';
+import { useState } from 'src/composables/useState';
 import LeftMenu from 'src/components/LeftMenu.vue';
 
-const drawer = ref(false);
+const state = useState();
 const miniState = ref(true);
 </script>
 
 <template>
     <q-drawer
-        v-model="drawer"
+        v-model="state.drawer.value"
         show-if-above
         :mini="miniState"
         @mouseover="miniState = false"
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index f95f2ab34..a8dd42165 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -29,16 +29,16 @@ export default {
         },
         {
             path: ':id',
-            component: () => import('src/pages/Customer/Card/CustomerCard.vue'),
-            redirect: { name: 'CustomerBasicData' },
+            component: () => import('src/pages/Ticket/Card/TicketCard.vue'),
+            redirect: { name: 'TicketBasicData' },
             children: [
                 {
                     path: 'basic-data',
-                    name: 'CustomerBasicData',
+                    name: 'TicketBasicData',
                     meta: {
                         title: 'basicData'
                     },
-                    component: () => import('src/pages/Customer/Card/CustomerBasicData.vue'),
+                    component: () => import('src/pages/Ticket/Card/TicketBasicData.vue'),
                 }
             ]
         },
diff --git a/src/types/route.ts b/src/types/route.ts
deleted file mode 100644
index ea7b84d42..000000000
--- a/src/types/route.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface Route {
-    path: string;
-    component: any;
-}
\ No newline at end of file