From 4a39e73625ac39623841e93a6adb8e6d0ffdcdc9 Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Thu, 17 Nov 2022 14:03:50 +0100
Subject: [PATCH 01/23] refs #4834 @7h

---
 src/i18n/en/index.js                          |  38 +++
 src/i18n/es/index.js                          |  37 +++
 src/pages/Worker/Card/WorkerCard.vue          |  43 +++
 src/pages/Worker/Card/WorkerSummary.vue       | 280 ++++++++++++++++++
 src/pages/Worker/Card/WorkerSummaryDialog.vue |  21 ++
 src/pages/Worker/WorkerList.vue               |  92 ++++++
 src/pages/Worker/WorkerMain.vue               |  17 ++
 src/router/modules/worker.js                  |  47 +++
 src/router/routes.js                          |   2 +
 9 files changed, 577 insertions(+)
 create mode 100644 src/pages/Worker/Card/WorkerCard.vue
 create mode 100644 src/pages/Worker/Card/WorkerSummary.vue
 create mode 100644 src/pages/Worker/Card/WorkerSummaryDialog.vue
 create mode 100644 src/pages/Worker/WorkerList.vue
 create mode 100644 src/pages/Worker/WorkerMain.vue
 create mode 100644 src/router/modules/worker.js

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 229a5b995..687fbdce7 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -249,6 +249,44 @@ export default {
             returnOfMaterial: 'Return of material authorization (RMA)'
         },
     },
+    worker: {
+        pageTitles: {
+            workers: 'Workers',
+            list: 'List',
+        },
+        list: {
+            name: 'Name',
+            email: 'Email',
+            phone: 'Phone',
+            mobile: 'Mobile',
+            active: 'Active',
+            department: 'Department',
+            schedule: 'Schedule',
+        },
+        card: {
+            workerId: 'Worker ID',
+            name: 'Name',
+            email: 'Email',
+            phone: 'Phone',
+            mobile: 'Mobile',
+            active: 'Active',
+            warehouse: 'Warehouse',
+            agency: 'Agency',
+            salesPerson: 'Sales person',
+        },
+        summary: {
+            basicData: 'Basic data',
+            boss: 'Boss',
+            phoneExtension: 'Phone extension',
+            entPhone: 'Enterprise phone',
+            personalPhone: 'Personal phone',
+            noBoss: 'No boss',
+            userData: 'User data',
+            userId: 'User ID',
+            role: 'Role',
+            sipExtension: 'Extension',
+        },
+    },
     components: {
         topbar: {},
         userPanel: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index c8dff9d30..84586ab47 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -247,6 +247,43 @@ export default {
             picked: 'Recogida',
             returnOfMaterial: 'Autorización de retorno de materiales (RMA)'
         }
+    }, worker: {
+        pageTitles: {
+            workers: 'Trabajadores',
+            list: 'Listado',
+        },
+        list: {
+            name: 'Nombre',
+            email: 'Email',
+            phone: 'Teléfono',
+            mobile: 'Móvil',
+            active: 'Activo',
+            department: 'Departamento',
+            schedule: 'Horario',
+        },
+        card: {
+            workerId: 'ID Trabajador',
+            name: 'Nombre',
+            email: 'Email',
+            phone: 'Teléfono',
+            mobile: 'Móvil',
+            active: 'Activo',
+            warehouse: 'Almacén',
+            agency: 'Empresa',
+            salesPerson: 'Comercial',
+        },
+        summary: {
+            basicData: 'Datos básicos',
+            boss: 'Jefe',
+            phoneExtension: 'Extensión de teléfono',
+            entPhone: 'Teléfono de empresa',
+            personalPhone: 'Teléfono personal',
+            noBoss: 'Sin jefe',
+            userData: 'Datos de usuario',
+            userId: 'ID del usuario',
+            role: 'Rol',
+            sipExtension: 'Extensión',
+        },
     },
     components: {
         topbar: {},
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
new file mode 100644
index 000000000..856710e17
--- /dev/null
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -0,0 +1,43 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useState } from 'src/composables/useState';
+
+const state = useState();
+const { t } = useI18n();
+</script>
+<template>
+    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+        <q-scroll-area class="fit">
+            <q-separator />
+            <q-list>
+                <q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple>
+                    <q-item-section avatar>
+                        <q-icon name="vn:settings" />
+                    </q-item-section>
+                    <q-item-section>{{ t('customer.pageTitles.basicData') }}</q-item-section>
+                </q-item>
+                <!-- <q-item clickable v-ripple>
+                    <q-item-section avatar>
+                        <q-icon name="notes" />
+                    </q-item-section>
+                    <q-item-section>Notes</q-item-section>
+                </q-item>
+                <q-expansion-item icon="more" label="More options" expand-icon-toggle expand-separator>
+                    <q-list>
+                        <q-item clickable v-ripple>
+                            <q-item-section avatar>
+                                <q-icon name="person" />
+                            </q-item-section>
+                            <q-item-section>Option</q-item-section>
+                        </q-item>
+                    </q-list>
+                </q-expansion-item> -->
+            </q-list>
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <q-page class="q-pa-md">
+            <router-view></router-view>
+        </q-page>
+    </q-page-container>
+</template>
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
new file mode 100644
index 000000000..043622340
--- /dev/null
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -0,0 +1,280 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+
+onMounted(() => fetch());
+
+const route = useRoute();
+const { t } = useI18n();
+
+t == t;
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+
+const worker = ref(null);
+
+const filter = {
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['email', 'name', 'nickname', 'roleFk'],
+                include: {
+                    relation: 'role',
+                    scope: {
+                        fields: ['name'],
+                    },
+                },
+            },
+        },
+        {
+            relation: 'department',
+            scope: {
+                include: {
+                    relation: 'department',
+                    scope: {
+                        fields: ['name'],
+                    },
+                },
+            },
+        },
+        {
+            relation: 'boss',
+        },
+        {
+            relation: 'client',
+        },
+        {
+            relation: 'sip',
+        },
+    ],
+};
+
+function fetch() {
+    const id = entityId.value;
+    axios.get(`/Workers/${id}`, { params: { filter } }).then((response) => {
+        worker.value = response.data;
+    });
+}
+
+function sipExtension() {
+    if (worker.value.sip) return worker.value.sip.extension;
+    return '-';
+}
+</script>
+
+<template>
+    <div class="summary container">
+        <q-card>
+            <skeleton-summary v-if="!worker" />
+            <template v-if="worker">
+                <div class="header bg-primary q-pa-sm q-mb-md">{{ worker.id }} - {{ worker.firstName }}</div>
+                <div class="row q-pa-md q-col-gutter-md q-mb-md">
+                    <div class="col">
+                        <q-list>
+                            <q-item-label header class="text-h6">
+                                {{ t('worker.summary.basicData') }}
+                            </q-item-label>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="grid_3x3" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption> ID </q-item-label>
+                                    <q-item-label>{{ worker.id }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="person" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.card.name') }} </q-item-label>
+                                    <q-item-label>{{ worker.user.nickname }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="group" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.list.department') }} </q-item-label>
+                                    <q-item-label>{{ worker.department.department.name }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="email" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.list.email') }} </q-item-label>
+                                    <q-item-label>{{ worker.user.email }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="person" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.summary.boss') }} </q-item-label>
+                                    <q-item-label>
+                                        <router-link
+                                            v-if="worker.boss"
+                                            :to="{ name: 'WorkerSummary', params: { id: worker.boss.id } }"
+                                            target="_blank"
+                                        >
+                                            {{ worker.boss.name == '' ? t('worker.summary.noBoss') : worker.boss.name }}
+
+                                            <q-icon name="open_in_new" />
+                                        </router-link>
+                                    </q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="grid_3x3" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.summary.phoneExtension') }} </q-item-label>
+                                    <q-item-label>
+                                        {{ worker.mobileExtension == '' ? worker.mobileExtension : '-' }}
+                                    </q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="phone" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.summary.entPhone') }} </q-item-label>
+                                    <q-item-label>{{ worker.phone }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="phone_android" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.summary.personalPhone') }} </q-item-label>
+                                    <q-item-label>{{ worker.client.phone }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                        </q-list>
+                    </div>
+                    <div class="col">
+                        <q-list>
+                            <q-item-label header class="text-h6">
+                                {{ t('worker.summary.userData') }}
+                            </q-item-label>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="grid_3x3" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption> {{ t('worker.summary.userId') }} </q-item-label>
+                                    <q-item-label>{{ worker.user.id }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="person" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.card.name') }} </q-item-label>
+                                    <q-item-label>{{ worker.user.nickname }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="group" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.summary.role') }} </q-item-label>
+                                    <q-item-label>{{ worker.user.role.name }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="extension" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.summary.sipExtension') }} </q-item-label>
+                                    <q-item-label>{{ sipExtension() }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                        </q-list>
+                    </div>
+                </div>
+            </template>
+        </q-card>
+    </div>
+</template>
+<style lang="scss" scoped>
+.container {
+    display: flex;
+    justify-content: center;
+}
+
+.q-card {
+    width: 100%;
+    max-width: 1200px;
+}
+
+.negative {
+    color: red;
+}
+
+.summary {
+    .q-list {
+        .q-item__label--header {
+            display: flex;
+            justify-content: space-between;
+
+            a {
+                color: $primary;
+            }
+        }
+    }
+    .row {
+        flex-wrap: wrap;
+
+        .col {
+            min-width: 250px;
+        }
+    }
+
+    .header {
+        text-align: center;
+        font-size: 18px;
+    }
+
+    #slider-container {
+        max-width: 80%;
+        margin: 0 auto;
+
+        .q-slider {
+            .q-slider__marker-labels:nth-child(1) {
+                transform: none;
+            }
+            .q-slider__marker-labels:nth-child(2) {
+                transform: none;
+                left: auto !important;
+                right: 0%;
+            }
+        }
+    }
+}
+
+.q-dialog .summary {
+    max-width: 1200px;
+}
+</style>
diff --git a/src/pages/Worker/Card/WorkerSummaryDialog.vue b/src/pages/Worker/Card/WorkerSummaryDialog.vue
new file mode 100644
index 000000000..4eedb6f6a
--- /dev/null
+++ b/src/pages/Worker/Card/WorkerSummaryDialog.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import WorkerSummary from './WorkerSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <q-dialog ref="dialogRef" @hide="onDialogHide">
+        <worker-summary v-if="$props.id" :id="$props.id" />
+    </q-dialog>
+</template>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
new file mode 100644
index 000000000..90a14d96d
--- /dev/null
+++ b/src/pages/Worker/WorkerList.vue
@@ -0,0 +1,92 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+import Paginate from 'src/components/Paginate.vue';
+import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue';
+
+const router = useRouter();
+const { t } = useI18n();
+const quasar = useQuasar();
+
+const filter = {
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['email', 'name', 'nickname'],
+            },
+        },
+        {
+            relation: 'department',
+            scope: {
+                include: {
+                    relation: 'department',
+                    scope: {
+                        fields: ['name'],
+                    },
+                },
+            },
+        },
+    ],
+};
+
+function navigate(id) {
+    router.push({ path: `/worker/${id}` });
+}
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: WorkerSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
+</script>
+
+<template>
+    <q-page class="q-pa-md">
+        <paginate url="/Workers" :filter="filter" sort-by="id DESC" auto-load>
+            <template #body="{ rows }">
+                <q-card class="card" v-for="row in rows" :key="row.id">
+                    <q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>
+                        <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                            <q-item-label caption>#{{ row.id }}</q-item-label>
+                            <q-item-label class="text-h6">{{ row.user.nickname }}</q-item-label>
+                            <q-list>
+                                <q-item class="q-pa-none">
+                                    <q-item-section class="q-pa-md">
+                                        <q-item-label caption>{{ t('worker.list.name') }}</q-item-label>
+                                        <q-item-label>{{ row.user.name }}</q-item-label>
+                                    </q-item-section>
+                                    <q-item-section class="q-pa-md">
+                                        <q-item-label caption>{{ t('worker.list.email') }}</q-item-label>
+                                        <q-item-label>{{ row.user.email }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item class="q-pa-none">
+                                    <q-item-section class="q-pa-md">
+                                        <q-item-label caption>{{ t('worker.list.department') }}</q-item-label>
+                                        <q-item-label>{{ row.department.department.name }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
+                        </q-item-section>
+                        <q-separator vertical />
+                        <q-card-actions vertical class="justify-between">
+                            <q-item-section side class="q-pa-md">
+                                <q-btn flat round color="orange" icon="preview" @click="viewSummary(row.id)">
+                                    <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
+                                </q-btn>
+                                <q-btn flat round color="grey-7" icon="schedule" @click="navigate(row.id)">
+                                    <q-tooltip>{{ t('worker.list.schedule') }}</q-tooltip>
+                                </q-btn>
+                            </q-item-section>
+                        </q-card-actions>
+                    </q-item>
+                </q-card>
+            </template>
+        </paginate>
+    </q-page>
+</template>
diff --git a/src/pages/Worker/WorkerMain.vue b/src/pages/Worker/WorkerMain.vue
new file mode 100644
index 000000000..099e82879
--- /dev/null
+++ b/src/pages/Worker/WorkerMain.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useState } from 'src/composables/useState';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const state = useState();
+</script>
+
+<template>
+    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :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/worker.js b/src/router/modules/worker.js
new file mode 100644
index 000000000..d5703d04b
--- /dev/null
+++ b/src/router/modules/worker.js
@@ -0,0 +1,47 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    name: 'Worker',
+    path: '/worker',
+    meta: {
+        title: 'workers',
+        icon: 'vn:worker'
+    },
+    component: RouterView,
+    redirect: { name: 'WorkerMain' },
+    children: [
+        {
+            name: 'WorkerMain',
+            path: '',
+            component: () => import('src/pages/Worker/WorkerMain.vue'),
+            redirect: { name: 'WorkerList' },
+            children: [
+                {
+                    name: 'WorkerList',
+                    path: 'list',
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Worker/WorkerList.vue'),
+                },
+            ]
+        },
+        {
+            name: 'WorkerCard',
+            path: ':id',
+            component: () => import('src/pages/Worker/Card/WorkerCard.vue'),
+            redirect: { name: 'WorkerSummary' },
+            children: [
+                {
+                    name: 'WorkerSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary'
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerSummary.vue'),
+                },
+            ]
+        },
+    ]
+};
diff --git a/src/router/routes.js b/src/router/routes.js
index a7261379f..4b9ca728c 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,6 +1,7 @@
 import customer from './modules/customer';
 import ticket from './modules/ticket';
 import claim from './modules/claim';
+import worker from './modules/worker';
 
 const routes = [
     {
@@ -25,6 +26,7 @@ const routes = [
             customer,
             ticket,
             claim,
+            worker,
             {
                 path: '/:pathMatch(.*)*',
                 name: 'NotFound',

From b74569e67149a76e1cae573331b1e45d58af31bc Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Fri, 18 Nov 2022 07:59:19 +0100
Subject: [PATCH 02/23] refs #4834 worker card & descriptor implementation @1h

---
 src/i18n/en/index.js                       |   6 +
 src/i18n/es/index.js                       |   6 +
 src/pages/Worker/Card/WorkerCard.vue       |  53 +++++----
 src/pages/Worker/Card/WorkerDescriptor.vue | 121 +++++++++++++++++++++
 src/pages/Worker/Card/WorkerPopover.vue    |  15 +++
 src/pages/Worker/Card/WorkerSummary.vue    |   2 +-
 6 files changed, 183 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/Worker/Card/WorkerDescriptor.vue
 create mode 100644 src/pages/Worker/Card/WorkerPopover.vue

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 687fbdce7..3cc76edb3 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -253,6 +253,7 @@ export default {
         pageTitles: {
             workers: 'Workers',
             list: 'List',
+            basicData: 'Basic data',
         },
         list: {
             name: 'Name',
@@ -305,4 +306,9 @@ export default {
             moreOptions: 'More options'
         }
     },
+    notFound: {
+        pageTitles: {
+            undefined: 'Undefined',
+        },
+    }
 };
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 84586ab47..cdaee02bd 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -251,6 +251,7 @@ export default {
         pageTitles: {
             workers: 'Trabajadores',
             list: 'Listado',
+            basicData: 'Datos básicos',
         },
         list: {
             name: 'Nombre',
@@ -303,4 +304,9 @@ export default {
             moreOptions: 'Más opciones',
         }
     },
+    notFound: {
+        pageTitles: {
+            undefined: 'Página no encontrada',
+        },
+    }
 };
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index 856710e17..b014e9b7f 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
+import WorkerDescriptor from './WorkerDescriptor.vue';
 
 const state = useState();
 const { t } = useI18n();
@@ -8,30 +9,15 @@ const { t } = useI18n();
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
+            <worker-descriptor />
             <q-separator />
             <q-list>
-                <q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple>
+                <q-item :to="{ name: 'WorkerBasicData' }" clickable v-ripple>
                     <q-item-section avatar>
-                        <q-icon name="vn:settings" />
+                        <q-icon name="person" />
                     </q-item-section>
-                    <q-item-section>{{ t('customer.pageTitles.basicData') }}</q-item-section>
+                    <q-item-section>{{ t('worker.pageTitles.basicData') }}</q-item-section>
                 </q-item>
-                <!-- <q-item clickable v-ripple>
-                    <q-item-section avatar>
-                        <q-icon name="notes" />
-                    </q-item-section>
-                    <q-item-section>Notes</q-item-section>
-                </q-item>
-                <q-expansion-item icon="more" label="More options" expand-icon-toggle expand-separator>
-                    <q-list>
-                        <q-item clickable v-ripple>
-                            <q-item-section avatar>
-                                <q-icon name="person" />
-                            </q-item-section>
-                            <q-item-section>Option</q-item-section>
-                        </q-item>
-                    </q-list>
-                </q-expansion-item> -->
             </q-list>
         </q-scroll-area>
     </q-drawer>
@@ -41,3 +27,32 @@ const { t } = useI18n();
         </q-page>
     </q-page-container>
 </template>
+
+<style lang="scss">
+.q-scrollarea__content {
+    max-width: 100%;
+}
+</style>
+
+<style lang="scss" scoped>
+.descriptor {
+    max-width: 256px;
+
+    h5 {
+        margin: 0 15px;
+    }
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .q-card__actions {
+        justify-content: center;
+    }
+
+    #descriptor-skeleton .q-card__actions {
+        justify-content: space-between;
+    }
+}
+</style>
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
new file mode 100644
index 000000000..3fa7af4b2
--- /dev/null
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -0,0 +1,121 @@
+<script setup>
+import { onMounted, computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+onMounted(async () => {
+    await fetch();
+});
+
+const route = useRoute();
+
+const { t } = useI18n();
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const worker = ref();
+
+const filter = {
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['email', 'name', 'nickname'],
+            },
+        },
+        {
+            relation: 'department',
+            scope: {
+                include: [
+                    {
+                        relation: 'department',
+                    },
+                ],
+            },
+        },
+        {
+            relation: 'sip',
+        },
+    ],
+};
+
+async function fetch() {
+    const { data } = await axios.get(`Workers/${entityId.value}`, {
+        params: {
+            filter: JSON.stringify(filter),
+        },
+    });
+
+    if (data) worker.value = data;
+}
+
+function sipExtension() {
+    if (worker.value.sip) return worker.value.sip.extension;
+    return '-';
+}
+</script>
+<template>
+    <card-descriptor v-if="worker" module="Worker" :data="worker" :description="worker.user.nickname">
+        <template #body>
+            <q-list>
+                <q-item>
+                    <q-item-section side>
+                        <q-icon name="person" />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption> {{ t('worker.card.name') }} </q-item-label>
+                        <q-item-label>{{ worker.user.nickname }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section side>
+                        <q-icon name="email" />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption> {{ t('worker.card.email') }} </q-item-label>
+                        <q-item-label>{{ worker.user.email }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section side>
+                        <q-icon name="work" />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption> {{ t('worker.list.department') }} </q-item-label>
+                        <q-item-label>{{ worker.department.department.name }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section side>
+                        <q-icon name="phone" />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption> {{ t('worker.card.phone') }} </q-item-label>
+                        <q-item-label>{{ worker.phone }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section side>
+                        <q-icon name="extension" />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('worker.summary.sipExtension') }} </q-item-label>
+                        <q-item-label>{{ sipExtension() }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+            </q-list>
+        </template>
+    </card-descriptor>
+</template>
diff --git a/src/pages/Worker/Card/WorkerPopover.vue b/src/pages/Worker/Card/WorkerPopover.vue
new file mode 100644
index 000000000..5aad1377c
--- /dev/null
+++ b/src/pages/Worker/Card/WorkerPopover.vue
@@ -0,0 +1,15 @@
+<script setup>
+import WorkerDescriptor from './WorkerDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+<template>
+    <q-card>
+        <worker-descriptor v-if="$props.id" :id="$props.id" />
+    </q-card>
+</template>
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index 043622340..e39027dd6 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -104,7 +104,7 @@ function sipExtension() {
                             </q-item>
                             <q-item>
                                 <q-item-section side>
-                                    <q-icon name="group" />
+                                    <q-icon name="work" />
                                 </q-item-section>
                                 <q-item-section>
                                     <q-item-label caption>{{ t('worker.list.department') }} </q-item-label>

From 863a74ee67afdb26f895fcc49ea7f51359cfead0 Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Fri, 18 Nov 2022 08:05:23 +0100
Subject: [PATCH 03/23] Translations

---
 src/i18n/en/index.js | 5 -----
 src/i18n/es/index.js | 5 -----
 2 files changed, 10 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 3cc76edb3..2f2b40d85 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -305,10 +305,5 @@ export default {
             summary: 'Summary',
             moreOptions: 'More options'
         }
-    },
-    notFound: {
-        pageTitles: {
-            undefined: 'Undefined',
-        },
     }
 };
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index cdaee02bd..179f94add 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -303,10 +303,5 @@ export default {
             summary: 'Resumen',
             moreOptions: 'Más opciones',
         }
-    },
-    notFound: {
-        pageTitles: {
-            undefined: 'Página no encontrada',
-        },
     }
 };

From f5f47f4994272d8bdfd3a9181cde45037d41e26c Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Tue, 22 Nov 2022 14:35:40 +0100
Subject: [PATCH 04/23] add worker img

---
 src/pages/Worker/Card/WorkerDescriptor.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 3fa7af4b2..1f9820524 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -65,10 +65,15 @@ function sipExtension() {
     if (worker.value.sip) return worker.value.sip.extension;
     return '-';
 }
+
+function getWorkerAvatar() {
+    return `/api/Images/user/160x160/${worker.value.user.id}/download`;
+}
 </script>
 <template>
     <card-descriptor v-if="worker" module="Worker" :data="worker" :description="worker.user.nickname">
         <template #body>
+            <q-img :src="getWorkerAvatar()" class="q-mb-md" style="width: 100px; height: 100px" />
             <q-list>
                 <q-item>
                     <q-item-section side>

From cd5bd180af07ba8f9e3047c9ff8272ea580c55c0 Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Tue, 22 Nov 2022 14:39:35 +0100
Subject: [PATCH 05/23] add image to the worker descriptor

---
 src/pages/Worker/Card/WorkerDescriptor.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 1f9820524..5746f220a 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -2,6 +2,7 @@
 import { onMounted, computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { useSession } from 'src/composables/useSession';
 import axios from 'axios';
 import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 
@@ -18,8 +19,8 @@ onMounted(async () => {
 });
 
 const route = useRoute();
-
 const { t } = useI18n();
+const { getToken } = useSession();
 
 const entityId = computed(() => {
     return $props.id || route.params.id;
@@ -67,13 +68,14 @@ function sipExtension() {
 }
 
 function getWorkerAvatar() {
-    return `/api/Images/user/160x160/${worker.value.user.id}/download`;
+    const token = getToken();
+    return `/api/Images/user/160x160/${worker.value.user.id}/download?access_token=${token}`;
 }
 </script>
 <template>
     <card-descriptor v-if="worker" module="Worker" :data="worker" :description="worker.user.nickname">
         <template #body>
-            <q-img :src="getWorkerAvatar()" class="q-mb-md" style="width: 100px; height: 100px" />
+            <q-img :src="getWorkerAvatar()" class="q-mb-md" />
             <q-list>
                 <q-item>
                     <q-item-section side>

From 0084b354d62b240fde528cb65e1b9daaa481c077 Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Wed, 23 Nov 2022 07:50:35 +0100
Subject: [PATCH 06/23] refs #4834 @1h add workerDescriptorPopover

---
 .../Worker/Card/WorkerDescriptorDialog.vue    | 21 +++++++++++++
 src/pages/Worker/Card/WorkerSummary.vue       | 30 +++++++++++--------
 2 files changed, 39 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/Worker/Card/WorkerDescriptorDialog.vue

diff --git a/src/pages/Worker/Card/WorkerDescriptorDialog.vue b/src/pages/Worker/Card/WorkerDescriptorDialog.vue
new file mode 100644
index 000000000..9c55c474f
--- /dev/null
+++ b/src/pages/Worker/Card/WorkerDescriptorDialog.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import workerDescriptor from './WorkerDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <q-dialog ref="dialogRef" @hide="onDialogHide">
+        <worker-descriptor v-if="$props.id" :id="$props.id" />
+    </q-dialog>
+</template>
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index e39027dd6..ebb0c0403 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -2,12 +2,15 @@
 import { ref, onMounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 import axios from 'axios';
+import workerDescriptorDialog from './WorkerDescriptorDialog.vue';
 
 onMounted(() => fetch());
 
 const route = useRoute();
 const { t } = useI18n();
+const quasar = useQuasar();
 
 t == t;
 
@@ -70,6 +73,15 @@ function sipExtension() {
     if (worker.value.sip) return worker.value.sip.extension;
     return '-';
 }
+
+function openDescriptorDialog(id) {
+    quasar.dialog({
+        component: workerDescriptorDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
 </script>
 
 <template>
@@ -120,22 +132,16 @@ function sipExtension() {
                                     <q-item-label>{{ worker.user.email }}</q-item-label>
                                 </q-item-section>
                             </q-item>
-                            <q-item>
-                                <q-item-section side>
+                            <q-item class="items-start cursor-pointer q-hoverable" v-if="worker.boss">
+                                <q-item-section side @click="openDescriptorDialog(worker.bossFk)">
                                     <q-icon name="person" />
                                 </q-item-section>
-                                <q-item-section>
+                                <q-item-section @click="openDescriptorDialog(worker.bossFk)">
                                     <q-item-label caption>{{ t('worker.summary.boss') }} </q-item-label>
                                     <q-item-label>
-                                        <router-link
-                                            v-if="worker.boss"
-                                            :to="{ name: 'WorkerSummary', params: { id: worker.boss.id } }"
-                                            target="_blank"
-                                        >
-                                            {{ worker.boss.name == '' ? t('worker.summary.noBoss') : worker.boss.name }}
-
-                                            <q-icon name="open_in_new" />
-                                        </router-link>
+                                        <a>
+                                            {{ worker.boss.name }}
+                                        </a>
                                     </q-item-label>
                                 </q-item-section>
                             </q-item>

From ef0ea4f503b52a016a57ce82070dc5ade36cd03c Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Wed, 23 Nov 2022 07:55:31 +0100
Subject: [PATCH 07/23] missing translations

---
 src/i18n/en/index.js | 1 +
 src/i18n/es/index.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 2f2b40d85..5d41cf88a 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -254,6 +254,7 @@ export default {
             workers: 'Workers',
             list: 'List',
             basicData: 'Basic data',
+            summary: 'Summary',
         },
         list: {
             name: 'Name',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 179f94add..2b810b399 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -252,6 +252,7 @@ export default {
             workers: 'Trabajadores',
             list: 'Listado',
             basicData: 'Datos básicos',
+            summary: 'Resumen',
         },
         list: {
             name: 'Nombre',

From e864843c282faf87ffadfef78be29263429eb222 Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Wed, 23 Nov 2022 08:06:59 +0100
Subject: [PATCH 08/23] add onUpdated to allow the data to be updated when the
 url changes

---
 src/pages/Worker/Card/WorkerDescriptor.vue | 4 +++-
 src/pages/Worker/Card/WorkerSummary.vue    | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 5746f220a..1308264c0 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed, ref } from 'vue';
+import { onMounted, computed, ref, onUpdated } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
@@ -18,6 +18,8 @@ onMounted(async () => {
     await fetch();
 });
 
+onUpdated(async () => await fetch());
+
 const route = useRoute();
 const { t } = useI18n();
 const { getToken } = useSession();
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index ebb0c0403..fcae10484 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, computed, onUpdated } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -8,6 +8,8 @@ import workerDescriptorDialog from './WorkerDescriptorDialog.vue';
 
 onMounted(() => fetch());
 
+onUpdated(() => fetch());
+
 const route = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();

From 7c0386f729f55694ddc0d3209f4193b335273743 Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Wed, 23 Nov 2022 14:50:47 +0100
Subject: [PATCH 09/23] fix descriptor doing request on loop

---
 src/pages/Worker/Card/WorkerDescriptor.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 1308264c0..5746f220a 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed, ref, onUpdated } from 'vue';
+import { onMounted, computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
@@ -18,8 +18,6 @@ onMounted(async () => {
     await fetch();
 });
 
-onUpdated(async () => await fetch());
-
 const route = useRoute();
 const { t } = useI18n();
 const { getToken } = useSession();

From c8d14c74046034750809315b224d12e90749c194 Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Mon, 28 Nov 2022 09:04:41 +0100
Subject: [PATCH 10/23] added tests and refactor code

---
 src/pages/Worker/Card/WorkerDescriptor.vue    | 20 ++++++++++---------
 src/pages/Worker/Card/WorkerSummary.vue       | 20 +++++++++++++++----
 tests/cypress/integration/workerList.spec.js  | 20 +++++++++++++++++++
 .../cypress/integration/workerSummary.spec.js | 15 ++++++++++++++
 4 files changed, 62 insertions(+), 13 deletions(-)
 create mode 100644 tests/cypress/integration/workerList.spec.js
 create mode 100644 tests/cypress/integration/workerSummary.spec.js

diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 5746f220a..27c15b6fb 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -14,8 +14,8 @@ const $props = defineProps({
     },
 });
 
-onMounted(async () => {
-    await fetch();
+onMounted(() => {
+    fetch();
 });
 
 const route = useRoute();
@@ -53,13 +53,15 @@ const filter = {
 };
 
 async function fetch() {
-    const { data } = await axios.get(`Workers/${entityId.value}`, {
-        params: {
-            filter: JSON.stringify(filter),
-        },
-    });
-
-    if (data) worker.value = data;
+    axios
+        .get(`Workers/${entityId.value}`, {
+            params: {
+                filter: JSON.stringify(filter),
+            },
+        })
+        .then((response) => {
+            worker.value = response.data;
+        });
 }
 
 function sipExtension() {
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index fcae10484..fdf6cf9d9 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -3,6 +3,7 @@ import { ref, onMounted, computed, onUpdated } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
+import { useSession } from 'src/composables/useSession';
 import axios from 'axios';
 import workerDescriptorDialog from './WorkerDescriptorDialog.vue';
 
@@ -13,6 +14,7 @@ onUpdated(() => fetch());
 const route = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();
+const { getToken } = useSession();
 
 t == t;
 
@@ -84,6 +86,11 @@ function openDescriptorDialog(id) {
         },
     });
 }
+
+function getWorkerAvatar() {
+    const token = getToken();
+    return `/api/Images/user/160x160/${worker.value.boss.id}/download?access_token=${token}`;
+}
 </script>
 
 <template>
@@ -136,14 +143,12 @@ function openDescriptorDialog(id) {
                             </q-item>
                             <q-item class="items-start cursor-pointer q-hoverable" v-if="worker.boss">
                                 <q-item-section side @click="openDescriptorDialog(worker.bossFk)">
-                                    <q-icon name="person" />
+                                    <q-img :src="getWorkerAvatar()" class="avatar" />
                                 </q-item-section>
                                 <q-item-section @click="openDescriptorDialog(worker.bossFk)">
                                     <q-item-label caption>{{ t('worker.summary.boss') }} </q-item-label>
                                     <q-item-label>
-                                        <a>
-                                            {{ worker.boss.name }}
-                                        </a>
+                                        {{ worker.boss.name }}
                                     </q-item-label>
                                 </q-item-section>
                             </q-item>
@@ -227,6 +232,13 @@ function openDescriptorDialog(id) {
     </div>
 </template>
 <style lang="scss" scoped>
+.avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
 .container {
     display: flex;
     justify-content: center;
diff --git a/tests/cypress/integration/workerList.spec.js b/tests/cypress/integration/workerList.spec.js
new file mode 100644
index 000000000..d0dd936b2
--- /dev/null
+++ b/tests/cypress/integration/workerList.spec.js
@@ -0,0 +1,20 @@
+describe('WorkerList', () => {
+    beforeEach(() => {
+        cy.viewport(1280, 720)
+        cy.login('developer')
+        cy.visit('/#/worker/list');
+    });
+
+    it('should load workers', () => {
+        cy.get('div[class="q-item__label text-h6"]').eq(0).should('have.text', 'Jessica Jones');
+        cy.get('div[class="q-item__label text-h6"]').eq(1).should('have.text', 'Bruce Banner');
+        cy.get('div[class="q-item__label text-h6"]').eq(2).should('have.text', 'Charles Xavier');
+    });
+
+    it('should open the worker summary', () => {
+        cy.get('div[class="q-item__section column q-item__section--side justify-center q-pa-md"]').eq(0).click();
+        cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should('have.text', '1110 - Jessica');
+        cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(0).should('have.text', 'Basic data');
+        cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(1).should('have.text', 'User data');
+    });
+});
\ No newline at end of file
diff --git a/tests/cypress/integration/workerSummary.spec.js b/tests/cypress/integration/workerSummary.spec.js
new file mode 100644
index 000000000..ae01378f6
--- /dev/null
+++ b/tests/cypress/integration/workerSummary.spec.js
@@ -0,0 +1,15 @@
+describe('WorkerSummary', () => {
+    beforeEach(() => {
+        cy.viewport(1280, 720)
+        cy.login('developer')
+        cy.visit('/#/worker/19/summary');
+    });
+
+    it('should load worker summary', () => {
+        cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should('have.text', '19 - salesBoss');
+        cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(0).should('have.text', 'Basic data');
+        cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(1).should('have.text', 'User data');
+        cy.get('div[class="q-item__section column q-item__section--main justify-center"]').eq(0).should('have.text', 'NamesalesBossNick');
+    });
+
+});
\ No newline at end of file

From 8ca5f33ba214e140cb2067fc25e9f999451bae1f Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Tue, 20 Dec 2022 08:57:41 +0100
Subject: [PATCH 11/23] add trailing commas and refactor import

---
 src/pages/Worker/WorkerList.vue |  2 +-
 src/router/modules/worker.js    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 90a14d96d..96918ecb2 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -2,7 +2,7 @@
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
-import Paginate from 'src/components/Paginate.vue';
+import Paginate from 'src/components/PaginateData.vue';
 import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue';
 
 const router = useRouter();
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index d5703d04b..2aeacfa88 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -5,7 +5,7 @@ export default {
     path: '/worker',
     meta: {
         title: 'workers',
-        icon: 'vn:worker'
+        icon: 'vn:worker',
     },
     component: RouterView,
     redirect: { name: 'WorkerMain' },
@@ -25,7 +25,7 @@ export default {
                     },
                     component: () => import('src/pages/Worker/WorkerList.vue'),
                 },
-            ]
+            ],
         },
         {
             name: 'WorkerCard',
@@ -37,11 +37,11 @@ export default {
                     name: 'WorkerSummary',
                     path: 'summary',
                     meta: {
-                        title: 'summary'
+                        title: 'summary',
                     },
                     component: () => import('src/pages/Worker/Card/WorkerSummary.vue'),
                 },
-            ]
+            ],
         },
-    ]
+    ],
 };

From b143f1f9c7e29f5324f46fa0623019b6315b56d6 Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Tue, 20 Dec 2022 09:11:17 +0100
Subject: [PATCH 12/23] refactor to lowerCamelCase

---
 src/router/modules/worker.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index 2aeacfa88..19d7acf4b 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -1,24 +1,27 @@
 import { RouterView } from 'vue-router';
 
 export default {
-    name: 'Worker',
     path: '/worker',
+    name: 'Worker',
     meta: {
         title: 'workers',
         icon: 'vn:worker',
     },
     component: RouterView,
-    redirect: { name: 'WorkerMain' },
+    redirect: { name: 'workerMain' },
+    menus: {
+        main: ['workerMain'],
+    },
     children: [
         {
-            name: 'WorkerMain',
             path: '',
+            name: 'workerMain',
             component: () => import('src/pages/Worker/WorkerMain.vue'),
             redirect: { name: 'WorkerList' },
             children: [
                 {
-                    name: 'WorkerList',
                     path: 'list',
+                    name: 'WorkerList',
                     meta: {
                         title: 'list',
                         icon: 'view_list',
@@ -28,13 +31,13 @@ export default {
             ],
         },
         {
-            name: 'WorkerCard',
+            name: 'workerCard',
             path: ':id',
             component: () => import('src/pages/Worker/Card/WorkerCard.vue'),
             redirect: { name: 'WorkerSummary' },
             children: [
                 {
-                    name: 'WorkerSummary',
+                    name: 'workerSummary',
                     path: 'summary',
                     meta: {
                         title: 'summary',

From b0178915080ff8558a7ee31110d7cbffb6a7bf2f Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Tue, 20 Dec 2022 09:55:47 +0100
Subject: [PATCH 13/23] refactor to follow current styles

---
 src/pages/Worker/Card/WorkerDescriptor.vue | 15 -------
 src/pages/Worker/Card/WorkerSummary.vue    | 47 ++--------------------
 src/pages/Worker/WorkerList.vue            | 10 +++--
 src/router/modules/index.js                |  4 +-
 src/router/modules/worker.js               | 10 ++---
 src/stores/useNavigationStore.js           |  2 +-
 6 files changed, 18 insertions(+), 70 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 27c15b6fb..ad23f732b 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -80,45 +80,30 @@ function getWorkerAvatar() {
             <q-img :src="getWorkerAvatar()" class="q-mb-md" />
             <q-list>
                 <q-item>
-                    <q-item-section side>
-                        <q-icon name="person" />
-                    </q-item-section>
                     <q-item-section>
                         <q-item-label caption> {{ t('worker.card.name') }} </q-item-label>
                         <q-item-label>{{ worker.user.nickname }}</q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
-                    <q-item-section side>
-                        <q-icon name="email" />
-                    </q-item-section>
                     <q-item-section>
                         <q-item-label caption> {{ t('worker.card.email') }} </q-item-label>
                         <q-item-label>{{ worker.user.email }}</q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
-                    <q-item-section side>
-                        <q-icon name="work" />
-                    </q-item-section>
                     <q-item-section>
                         <q-item-label caption> {{ t('worker.list.department') }} </q-item-label>
                         <q-item-label>{{ worker.department.department.name }}</q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
-                    <q-item-section side>
-                        <q-icon name="phone" />
-                    </q-item-section>
                     <q-item-section>
                         <q-item-label caption> {{ t('worker.card.phone') }} </q-item-label>
                         <q-item-label>{{ worker.phone }}</q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
-                    <q-item-section side>
-                        <q-icon name="extension" />
-                    </q-item-section>
                     <q-item-section>
                         <q-item-label caption>{{ t('worker.summary.sipExtension') }} </q-item-label>
                         <q-item-label>{{ sipExtension() }}</q-item-label>
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index fdf6cf9d9..1172c99b8 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -3,7 +3,6 @@ import { ref, onMounted, computed, onUpdated } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import { useSession } from 'src/composables/useSession';
 import axios from 'axios';
 import workerDescriptorDialog from './WorkerDescriptorDialog.vue';
 
@@ -14,7 +13,6 @@ onUpdated(() => fetch());
 const route = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();
-const { getToken } = useSession();
 
 t == t;
 
@@ -86,11 +84,6 @@ function openDescriptorDialog(id) {
         },
     });
 }
-
-function getWorkerAvatar() {
-    const token = getToken();
-    return `/api/Images/user/160x160/${worker.value.boss.id}/download?access_token=${token}`;
-}
 </script>
 
 <template>
@@ -98,7 +91,9 @@ function getWorkerAvatar() {
         <q-card>
             <skeleton-summary v-if="!worker" />
             <template v-if="worker">
-                <div class="header bg-primary q-pa-sm q-mb-md">{{ worker.id }} - {{ worker.firstName }}</div>
+                <div class="header bg-primary q-pa-sm q-mb-md">
+                    {{ worker.id }} - {{ worker.firstName }} {{ worker.lastName }}
+                </div>
                 <div class="row q-pa-md q-col-gutter-md q-mb-md">
                     <div class="col">
                         <q-list>
@@ -106,45 +101,30 @@ function getWorkerAvatar() {
                                 {{ t('worker.summary.basicData') }}
                             </q-item-label>
                             <q-item>
-                                <q-item-section side>
-                                    <q-icon name="grid_3x3" />
-                                </q-item-section>
                                 <q-item-section>
                                     <q-item-label caption> ID </q-item-label>
                                     <q-item-label>{{ worker.id }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
-                                <q-item-section side>
-                                    <q-icon name="person" />
-                                </q-item-section>
                                 <q-item-section>
                                     <q-item-label caption>{{ t('worker.card.name') }} </q-item-label>
                                     <q-item-label>{{ worker.user.nickname }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
-                                <q-item-section side>
-                                    <q-icon name="work" />
-                                </q-item-section>
                                 <q-item-section>
                                     <q-item-label caption>{{ t('worker.list.department') }} </q-item-label>
                                     <q-item-label>{{ worker.department.department.name }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
-                                <q-item-section side>
-                                    <q-icon name="email" />
-                                </q-item-section>
                                 <q-item-section>
                                     <q-item-label caption>{{ t('worker.list.email') }} </q-item-label>
                                     <q-item-label>{{ worker.user.email }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item class="items-start cursor-pointer q-hoverable" v-if="worker.boss">
-                                <q-item-section side @click="openDescriptorDialog(worker.bossFk)">
-                                    <q-img :src="getWorkerAvatar()" class="avatar" />
-                                </q-item-section>
                                 <q-item-section @click="openDescriptorDialog(worker.bossFk)">
                                     <q-item-label caption>{{ t('worker.summary.boss') }} </q-item-label>
                                     <q-item-label>
@@ -153,9 +133,6 @@ function getWorkerAvatar() {
                                 </q-item-section>
                             </q-item>
                             <q-item>
-                                <q-item-section side>
-                                    <q-icon name="grid_3x3" />
-                                </q-item-section>
                                 <q-item-section>
                                     <q-item-label caption>{{ t('worker.summary.phoneExtension') }} </q-item-label>
                                     <q-item-label>
@@ -164,18 +141,12 @@ function getWorkerAvatar() {
                                 </q-item-section>
                             </q-item>
                             <q-item>
-                                <q-item-section side>
-                                    <q-icon name="phone" />
-                                </q-item-section>
                                 <q-item-section>
                                     <q-item-label caption>{{ t('worker.summary.entPhone') }} </q-item-label>
                                     <q-item-label>{{ worker.phone }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
-                                <q-item-section side>
-                                    <q-icon name="phone_android" />
-                                </q-item-section>
                                 <q-item-section>
                                     <q-item-label caption>{{ t('worker.summary.personalPhone') }} </q-item-label>
                                     <q-item-label>{{ worker.client.phone }}</q-item-label>
@@ -189,36 +160,24 @@ function getWorkerAvatar() {
                                 {{ t('worker.summary.userData') }}
                             </q-item-label>
                             <q-item>
-                                <q-item-section side>
-                                    <q-icon name="grid_3x3" />
-                                </q-item-section>
                                 <q-item-section>
                                     <q-item-label caption> {{ t('worker.summary.userId') }} </q-item-label>
                                     <q-item-label>{{ worker.user.id }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
-                                <q-item-section side>
-                                    <q-icon name="person" />
-                                </q-item-section>
                                 <q-item-section>
                                     <q-item-label caption>{{ t('worker.card.name') }} </q-item-label>
                                     <q-item-label>{{ worker.user.nickname }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
-                                <q-item-section side>
-                                    <q-icon name="group" />
-                                </q-item-section>
                                 <q-item-section>
                                     <q-item-label caption>{{ t('worker.summary.role') }} </q-item-label>
                                     <q-item-label>{{ worker.user.role.name }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
-                                <q-item-section side>
-                                    <q-icon name="extension" />
-                                </q-item-section>
                                 <q-item-section>
                                     <q-item-label caption>{{ t('worker.summary.sipExtension') }} </q-item-label>
                                     <q-item-label>{{ sipExtension() }}</q-item-label>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 96918ecb2..622f858fd 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -52,21 +52,23 @@ function viewSummary(id) {
                 <q-card class="card" v-for="row in rows" :key="row.id">
                     <q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>
                         <q-item-section class="q-pa-md" @click="navigate(row.id)">
-                            <q-item-label caption>#{{ row.id }}</q-item-label>
                             <q-item-label class="text-h6">{{ row.user.nickname }}</q-item-label>
+                            <q-item-label caption>#{{ row.id }}</q-item-label>
                             <q-list>
                                 <q-item class="q-pa-none">
-                                    <q-item-section class="q-pa-md">
+                                    <q-item-section>
                                         <q-item-label caption>{{ t('worker.list.name') }}</q-item-label>
                                         <q-item-label>{{ row.user.name }}</q-item-label>
                                     </q-item-section>
-                                    <q-item-section class="q-pa-md">
+                                </q-item>
+                                <q-item class="q-pa-none">
+                                    <q-item-section>
                                         <q-item-label caption>{{ t('worker.list.email') }}</q-item-label>
                                         <q-item-label>{{ row.user.email }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
-                                    <q-item-section class="q-pa-md">
+                                    <q-item-section>
                                         <q-item-label caption>{{ t('worker.list.department') }}</q-item-label>
                                         <q-item-label>{{ row.department.department.name }}</q-item-label>
                                     </q-item-section>
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index dcb3fa5c2..ca8b3c958 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -2,10 +2,12 @@ import Customer from './customer';
 import Ticket from './ticket';
 import Claim from './claim';
 import InvoiceOut from './invoiceOut';
+import Worker from './worker';
 
 export default [
     Customer,
     Ticket,
     Claim,
-    InvoiceOut
+    InvoiceOut,
+    Worker
 ]
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index 19d7acf4b..ddba83cfa 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -8,14 +8,14 @@ export default {
         icon: 'vn:worker',
     },
     component: RouterView,
-    redirect: { name: 'workerMain' },
+    redirect: { name: 'WorkerMain' },
     menus: {
-        main: ['workerMain'],
+        main: ['WorkerList'],
     },
     children: [
         {
             path: '',
-            name: 'workerMain',
+            name: 'WorkerMain',
             component: () => import('src/pages/Worker/WorkerMain.vue'),
             redirect: { name: 'WorkerList' },
             children: [
@@ -31,13 +31,13 @@ export default {
             ],
         },
         {
-            name: 'workerCard',
+            name: 'WorkerCard',
             path: ':id',
             component: () => import('src/pages/Worker/Card/WorkerCard.vue'),
             redirect: { name: 'WorkerSummary' },
             children: [
                 {
-                    name: 'workerSummary',
+                    name: 'WorkerSummary',
                     path: 'summary',
                     meta: {
                         title: 'summary',
diff --git a/src/stores/useNavigationStore.js b/src/stores/useNavigationStore.js
index 6d1a74326..3b2c7e8a7 100644
--- a/src/stores/useNavigationStore.js
+++ b/src/stores/useNavigationStore.js
@@ -6,7 +6,7 @@ import { useRole } from 'src/composables/useRole';
 import routes from 'src/router/modules';
 
 export const useNavigationStore = defineStore('navigationStore', () => {
-    const modules = ['customer', 'claim', 'ticket', 'invoiceOut'];
+    const modules = ['customer', 'claim', 'ticket', 'invoiceOut', 'worker'];
     const pinnedModules = ref([]);
     const role = useRole();
 

From 7d0cb47405a92edc8db89ae04667c8896d4565f4 Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Tue, 20 Dec 2022 10:21:31 +0100
Subject: [PATCH 14/23] add before and after slots on card descriptor

---
 src/components/ui/CardDescriptor.vue       | 2 ++
 src/pages/Worker/Card/WorkerDescriptor.vue | 6 ++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index d80c0498c..4b8f19b77 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -45,6 +45,7 @@ const { t } = useI18n();
         </div>
 
         <div v-if="$props.data" class="body q-py-sm">
+            <slot name="before" />
             <q-list>
                 <q-item-label header class="ellipsis text-h5" :lines="1">
                     {{ $props.description }}
@@ -55,6 +56,7 @@ const { t } = useI18n();
                 </q-item>
             </q-list>
             <slot name="body" />
+            <slot name="after" />
         </div>
 
         <!-- Skeleton -->
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index ad23f732b..513bb4255 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -75,9 +75,11 @@ function getWorkerAvatar() {
 }
 </script>
 <template>
-    <card-descriptor v-if="worker" module="Worker" :data="worker" :description="worker.user.nickname">
-        <template #body>
+    <card-descriptor v-if="worker" module="Worker" :data="worker" :description="worker.user.name">
+        <template #before>
             <q-img :src="getWorkerAvatar()" class="q-mb-md" />
+        </template>
+        <template #body>
             <q-list>
                 <q-item>
                     <q-item-section>

From 9ed9e03b429c12aa84b19b4c42e051e3fc4fcb37 Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Tue, 20 Dec 2022 10:25:13 +0100
Subject: [PATCH 15/23] minor changes

---
 src/pages/Worker/Card/WorkerSummary.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index 1172c99b8..58d34165d 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -143,13 +143,15 @@ function openDescriptorDialog(id) {
                             <q-item>
                                 <q-item-section>
                                     <q-item-label caption>{{ t('worker.summary.entPhone') }} </q-item-label>
-                                    <q-item-label>{{ worker.phone }}</q-item-label>
+                                    <q-item-label>{{ worker.phone == '' ? worker.phone : '-' }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
                                 <q-item-section>
                                     <q-item-label caption>{{ t('worker.summary.personalPhone') }} </q-item-label>
-                                    <q-item-label>{{ worker.client.phone }}</q-item-label>
+                                    <q-item-label>{{
+                                        worker.client.phone == '' ? worker.client.phone : '-'
+                                    }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                         </q-list>

From df5eb9f27ed5f2e1bbbf8192b8f68f256a95e93d Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Tue, 20 Dec 2022 11:01:13 +0100
Subject: [PATCH 16/23] refactor styles and add image not found to worker
 descriptor

---
 src/i18n/en/index.js                       |  1 +
 src/i18n/es/index.js                       |  1 +
 src/pages/Worker/Card/WorkerDescriptor.vue | 15 ++++++++++++++-
 src/pages/Worker/WorkerList.vue            | 14 ++++++--------
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 89c4e3947..ca398d87c 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -376,6 +376,7 @@ export default {
             role: 'Role',
             sipExtension: 'Extension',
         },
+        imageNotFound: 'Image not found',
     },
     components: {
         topbar: {},
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index d0c370977..bc503fe96 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -375,6 +375,7 @@ export default {
             role: 'Rol',
             sipExtension: 'Extensión',
         },
+        imageNotFound: 'No se ha encontrado la imagen',
     },
     components: {
         topbar: {},
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 513bb4255..bd08fb1c1 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -77,7 +77,20 @@ function getWorkerAvatar() {
 <template>
     <card-descriptor v-if="worker" module="Worker" :data="worker" :description="worker.user.name">
         <template #before>
-            <q-img :src="getWorkerAvatar()" class="q-mb-md" />
+            <q-img :src="getWorkerAvatar()" class="q-mb-md">
+                <template #error>
+                    <div class="absolute-full bg-grey-10 text-center q-pa-md flex flex-center">
+                        <div>
+                            <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
+                                <q-icon name="vn:claims" />
+                            </div>
+                            <div class="text-grey-5" style="opacity: 0.4">
+                                {{ t('worker.imageNotFound') }}
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </q-img>
         </template>
         <template #body>
             <q-list>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 622f858fd..fc28eba96 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -77,14 +77,12 @@ function viewSummary(id) {
                         </q-item-section>
                         <q-separator vertical />
                         <q-card-actions vertical class="justify-between">
-                            <q-item-section side class="q-pa-md">
-                                <q-btn flat round color="orange" icon="preview" @click="viewSummary(row.id)">
-                                    <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
-                                </q-btn>
-                                <q-btn flat round color="grey-7" icon="schedule" @click="navigate(row.id)">
-                                    <q-tooltip>{{ t('worker.list.schedule') }}</q-tooltip>
-                                </q-btn>
-                            </q-item-section>
+                            <q-btn flat round color="orange" icon="preview" @click="viewSummary(row.id)">
+                                <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
+                            </q-btn>
+                            <q-btn flat round color="grey-7" icon="schedule" @click="navigate(row.id)">
+                                <q-tooltip>{{ t('worker.list.schedule') }}</q-tooltip>
+                            </q-btn>
                         </q-card-actions>
                     </q-item>
                 </q-card>

From 89a4ca78c14d1a6e54ef414bb666bfa5563a513f Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Tue, 20 Dec 2022 11:53:49 +0100
Subject: [PATCH 17/23] fix test

---
 tests/cypress/integration/workerList.spec.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/tests/cypress/integration/workerList.spec.js b/tests/cypress/integration/workerList.spec.js
index d0dd936b2..9f3d62448 100644
--- a/tests/cypress/integration/workerList.spec.js
+++ b/tests/cypress/integration/workerList.spec.js
@@ -1,7 +1,7 @@
 describe('WorkerList', () => {
     beforeEach(() => {
-        cy.viewport(1280, 720)
-        cy.login('developer')
+        cy.viewport(1280, 720);
+        cy.login('developer');
         cy.visit('/#/worker/list');
     });
 
@@ -13,8 +13,8 @@ describe('WorkerList', () => {
 
     it('should open the worker summary', () => {
         cy.get('div[class="q-item__section column q-item__section--side justify-center q-pa-md"]').eq(0).click();
-        cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should('have.text', '1110 - Jessica');
+        cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should('have.text', '1110 - Jessica Jones');
         cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(0).should('have.text', 'Basic data');
         cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(1).should('have.text', 'User data');
     });
-});
\ No newline at end of file
+});

From e2ea4227b17a8475bdaa62d3fefdd52e02f3b7ed Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 7 Mar 2023 09:41:46 +0100
Subject: [PATCH 18/23] Updated worker module

---
 src/components/ui/CardDescriptor.vue       | 16 +++--
 src/pages/Customer/CustomerList.vue        |  2 +-
 src/pages/Worker/Card/WorkerCard.vue       | 51 +++-----------
 src/pages/Worker/Card/WorkerDescriptor.vue | 76 ++++++++++----------
 src/pages/Worker/WorkerList.vue            | 80 ++++++++++++----------
 src/pages/Worker/WorkerMain.vue            |  6 +-
 src/router/modules/worker.js               |  1 +
 7 files changed, 107 insertions(+), 125 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 202325bbf..2d41c36a2 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -24,14 +24,18 @@ const { t } = useI18n();
 
 onMounted(() => fetch());
 
+const emit = defineEmits(['onFetch']);
+
 const entity = ref();
 async function fetch() {
     const params = {};
 
-    if (props.filter) params.filter = props.filter;
+    if (props.filter) params.filter = JSON.stringify(props.filter);
 
     const { data } = await axios.get(props.url, { params });
     entity.value = data;
+
+    emit('onFetch', data);
 }
 
 watch(props, async () => {
@@ -46,9 +50,9 @@ watch(props, async () => {
             <div class="header bg-primary q-pa-sm">
                 <router-link :to="{ name: `${module}List` }">
                     <q-btn round flat dense size="md" icon="view_list" color="white">
-                        <q-tooltip>{{
-                            t('components.cardDescriptor.mainList')
-                        }}</q-tooltip>
+                        <q-tooltip>
+                            {{ t('components.cardDescriptor.mainList') }}
+                        </q-tooltip>
                     </q-btn>
                 </router-link>
                 <router-link
@@ -80,8 +84,9 @@ watch(props, async () => {
                     </q-menu>
                 </q-btn>
             </div>
+            <slot name="before" />
             <div class="body q-py-sm">
-                <q-list>
+                <q-list dense>
                     <q-item-label header class="ellipsis text-h5" :lines="1">
                         <slot name="description" :entity="entity">
                             <span>
@@ -98,6 +103,7 @@ watch(props, async () => {
                 </q-list>
                 <slot name="body" :entity="entity" />
             </div>
+            <slot name="after" />
         </template>
         <!-- Skeleton -->
         <skeleton-descriptor v-if="!entity" />
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 745731962..e8a75bcb9 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -100,7 +100,7 @@ function viewSummary(id) {
                             <q-btn
                                 flat
                                 round
-                                color="orange"
+                                color="primary"
                                 icon="arrow_circle_right"
                                 @click="navigate(row.id)"
                             >
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index b014e9b7f..39c4cbfd9 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -1,24 +1,18 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useState } from 'src/composables/useState';
+// import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
 import WorkerDescriptor from './WorkerDescriptor.vue';
+import LeftMenu from 'components/LeftMenu.vue';
 
-const state = useState();
-const { t } = useI18n();
+const stateStore = useStateStore();
+// const { t } = useI18n();
 </script>
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
-            <worker-descriptor />
+            <WorkerDescriptor />
             <q-separator />
-            <q-list>
-                <q-item :to="{ name: 'WorkerBasicData' }" clickable v-ripple>
-                    <q-item-section avatar>
-                        <q-icon name="person" />
-                    </q-item-section>
-                    <q-item-section>{{ t('worker.pageTitles.basicData') }}</q-item-section>
-                </q-item>
-            </q-list>
+            <left-menu source="card" />
         </q-scroll-area>
     </q-drawer>
     <q-page-container>
@@ -27,32 +21,3 @@ const { t } = useI18n();
         </q-page>
     </q-page-container>
 </template>
-
-<style lang="scss">
-.q-scrollarea__content {
-    max-width: 100%;
-}
-</style>
-
-<style lang="scss" scoped>
-.descriptor {
-    max-width: 256px;
-
-    h5 {
-        margin: 0 15px;
-    }
-
-    .header {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .q-card__actions {
-        justify-content: center;
-    }
-
-    #descriptor-skeleton .q-card__actions {
-        justify-content: space-between;
-    }
-}
-</style>
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index bd08fb1c1..b763469bc 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -1,9 +1,8 @@
 <script setup>
-import { onMounted, computed, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
-import axios from 'axios';
 import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 
 const $props = defineProps({
@@ -14,10 +13,6 @@ const $props = defineProps({
     },
 });
 
-onMounted(() => {
-    fetch();
-});
-
 const route = useRoute();
 const { t } = useI18n();
 const { getToken } = useSession();
@@ -27,7 +22,6 @@ const entityId = computed(() => {
 });
 
 const worker = ref();
-
 const filter = {
     include: [
         {
@@ -52,34 +46,26 @@ const filter = {
     ],
 };
 
-async function fetch() {
-    axios
-        .get(`Workers/${entityId.value}`, {
-            params: {
-                filter: JSON.stringify(filter),
-            },
-        })
-        .then((response) => {
-            worker.value = response.data;
-        });
-}
-
-function sipExtension() {
-    if (worker.value.sip) return worker.value.sip.extension;
-    return '-';
-}
+const sip = computed(() => worker.value.sip && worker.value.sip.extension);
 
 function getWorkerAvatar() {
     const token = getToken();
-    return `/api/Images/user/160x160/${worker.value.user.id}/download?access_token=${token}`;
+    return `/api/Images/user/160x160/${route.params.id}/download?access_token=${token}`;
 }
 </script>
 <template>
-    <card-descriptor v-if="worker" module="Worker" :data="worker" :description="worker.user.name">
+    <card-descriptor
+        module="Worker"
+        :url="`Workers/${entityId}`"
+        :filter="filter"
+        @on-fetch="(data) => (worker = data)"
+    >
         <template #before>
-            <q-img :src="getWorkerAvatar()" class="q-mb-md">
+            <q-img :src="getWorkerAvatar()">
                 <template #error>
-                    <div class="absolute-full bg-grey-10 text-center q-pa-md flex flex-center">
+                    <div
+                        class="absolute-full bg-grey-10 text-center q-pa-md flex flex-center"
+                    >
                         <div>
                             <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
                                 <q-icon name="vn:claims" />
@@ -92,36 +78,52 @@ function getWorkerAvatar() {
                 </template>
             </q-img>
         </template>
-        <template #body>
+        <template #description="{ entity }">
+            <span>
+                {{ entity.user.nickname }}
+                <q-tooltip>{{ entity.user.nickname }}</q-tooltip>
+            </span>
+        </template>
+        <template #body="{ entity }">
             <q-list>
                 <q-item>
                     <q-item-section>
                         <q-item-label caption> {{ t('worker.card.name') }} </q-item-label>
-                        <q-item-label>{{ worker.user.nickname }}</q-item-label>
+                        <q-item-label>{{ entity.user.nickname }}</q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-item-label caption> {{ t('worker.card.email') }} </q-item-label>
-                        <q-item-label>{{ worker.user.email }}</q-item-label>
+                        <q-item-label caption>
+                            {{ t('worker.card.email') }}
+                        </q-item-label>
+                        <q-item-label>{{ entity.user.email }}</q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-item-label caption> {{ t('worker.list.department') }} </q-item-label>
-                        <q-item-label>{{ worker.department.department.name }}</q-item-label>
+                        <q-item-label caption>
+                            {{ t('worker.list.department') }}
+                        </q-item-label>
+                        <q-item-label>
+                            {{ entity.department.department.name }}
+                        </q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-item-label caption> {{ t('worker.card.phone') }} </q-item-label>
-                        <q-item-label>{{ worker.phone }}</q-item-label>
+                        <q-item-label caption>
+                            {{ t('worker.card.phone') }}
+                        </q-item-label>
+                        <q-item-label>{{ entity.phone }}</q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-item-label caption>{{ t('worker.summary.sipExtension') }} </q-item-label>
-                        <q-item-label>{{ sipExtension() }}</q-item-label>
+                        <q-item-label caption
+                            >{{ t('worker.summary.sipExtension') }}
+                        </q-item-label>
+                        <q-item-label>{{ sip }}</q-item-label>
                     </q-item-section>
                 </q-item>
             </q-list>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index fc28eba96..17066c64f 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -9,28 +9,6 @@ const router = useRouter();
 const { t } = useI18n();
 const quasar = useQuasar();
 
-const filter = {
-    include: [
-        {
-            relation: 'user',
-            scope: {
-                fields: ['email', 'name', 'nickname'],
-            },
-        },
-        {
-            relation: 'department',
-            scope: {
-                include: {
-                    relation: 'department',
-                    scope: {
-                        fields: ['name'],
-                    },
-                },
-            },
-        },
-    ],
-};
-
 function navigate(id) {
     router.push({ path: `/worker/${id}` });
 }
@@ -47,41 +25,71 @@ function viewSummary(id) {
 
 <template>
     <q-page class="q-pa-md">
-        <paginate url="/Workers" :filter="filter" sort-by="id DESC" auto-load>
+        <paginate data-key="WorkerList" url="Workers/filter" sort-by="id DESC" auto-load>
             <template #body="{ rows }">
-                <q-card class="card" v-for="row in rows" :key="row.id">
-                    <q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>
+                <q-card class="card" v-for="row of rows" :key="row.id">
+                    <q-item
+                        class="q-pa-none items-start cursor-pointer q-hoverable"
+                        v-ripple
+                        clickable
+                    >
                         <q-item-section class="q-pa-md" @click="navigate(row.id)">
-                            <q-item-label class="text-h6">{{ row.user.nickname }}</q-item-label>
+                            <q-item-label class="text-h6">
+                                {{ row.nickname }}
+                            </q-item-label>
                             <q-item-label caption>#{{ row.id }}</q-item-label>
                             <q-list>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('worker.list.name') }}</q-item-label>
-                                        <q-item-label>{{ row.user.name }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('worker.list.name') }}
+                                        </q-item-label>
+                                        <q-item-label>{{ row.userName }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('worker.list.email') }}</q-item-label>
-                                        <q-item-label>{{ row.user.email }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('worker.list.email') }}
+                                        </q-item-label>
+                                        <q-item-label>{{ row.email }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('worker.list.department') }}</q-item-label>
-                                        <q-item-label>{{ row.department.department.name }}</q-item-label>
+                                        <q-item-label caption>{{
+                                            t('worker.list.department')
+                                        }}</q-item-label>
+                                        <q-item-label>
+                                            {{ row.department }}
+                                        </q-item-label>
                                     </q-item-section>
                                 </q-item>
                             </q-list>
                         </q-item-section>
                         <q-separator vertical />
                         <q-card-actions vertical class="justify-between">
-                            <q-btn flat round color="orange" icon="preview" @click="viewSummary(row.id)">
-                                <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
+                            <q-btn
+                                flat
+                                round
+                                color="primary"
+                                icon="arrow_circle_right"
+                                @click="navigate(row.id)"
+                            >
+                                <q-tooltip>
+                                    {{ t('components.smartCard.openCard') }}
+                                </q-tooltip>
                             </q-btn>
-                            <q-btn flat round color="grey-7" icon="schedule" @click="navigate(row.id)">
-                                <q-tooltip>{{ t('worker.list.schedule') }}</q-tooltip>
+                            <q-btn
+                                flat
+                                round
+                                color="grey-7"
+                                icon="preview"
+                                @click="viewSummary(row.id)"
+                            >
+                                <q-tooltip>{{
+                                    t('components.smartCard.openSummary')
+                                }}</q-tooltip>
                             </q-btn>
                         </q-card-actions>
                     </q-item>
diff --git a/src/pages/Worker/WorkerMain.vue b/src/pages/Worker/WorkerMain.vue
index 099e82879..2fb079daa 100644
--- a/src/pages/Worker/WorkerMain.vue
+++ b/src/pages/Worker/WorkerMain.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { useState } from 'src/composables/useState';
+import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'src/components/LeftMenu.vue';
 
-const state = useState();
+const stateStore = useStateStore();
 </script>
 
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index ddba83cfa..b1b67fd4d 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -11,6 +11,7 @@ export default {
     redirect: { name: 'WorkerMain' },
     menus: {
         main: ['WorkerList'],
+        card: [],
     },
     children: [
         {

From 770d699304c5911acfc17087b6a93786087c9021 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 7 Mar 2023 12:35:00 +0100
Subject: [PATCH 19/23] Added worker filter

---
 src/pages/Claim/Card/ClaimCard.vue           |   5 +-
 src/pages/Claim/Card/ClaimPhoto.vue          |  50 +++--
 src/pages/Claim/ClaimList.vue                |  49 +++--
 src/pages/Customer/Card/CustomerCard.vue     |   5 +-
 src/pages/Customer/CustomerList.vue          |  41 ++--
 src/pages/InvoiceOut/Card/InvoiceOutCard.vue |   5 +-
 src/pages/InvoiceOut/InvoiceOutList.vue      |  41 ++--
 src/pages/Ticket/Card/TicketCard.vue         |   5 +-
 src/pages/Ticket/TicketList.vue              |  42 ++--
 src/pages/Worker/Card/WorkerCard.vue         |  18 +-
 src/pages/Worker/WorkerFilter.vue            | 121 +++++++++++
 src/pages/Worker/WorkerList.vue              | 200 ++++++++++++-------
 12 files changed, 411 insertions(+), 171 deletions(-)
 create mode 100644 src/pages/Worker/WorkerFilter.vue

diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index e5116a360..c03e5be85 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -3,20 +3,19 @@ import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import ClaimDescriptor from './ClaimDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 </script>
 <template>
-    <teleport-slot to="#searchbar">
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
         <VnSearchbar
             data-key="ClaimList"
             :label="t('Search claim')"
             :info="t('You can search by claim id or customer name')"
         />
-    </teleport-slot>
+    </Teleport>
     <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
             <claim-descriptor />
diff --git a/src/pages/Claim/Card/ClaimPhoto.vue b/src/pages/Claim/Card/ClaimPhoto.vue
index d47f9798f..c7d05d7ed 100644
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/src/pages/Claim/Card/ClaimPhoto.vue
@@ -1,22 +1,20 @@
 <script setup>
-import { ref, computed } from 'vue';
 import axios from 'axios';
+import { ref, computed } from 'vue';
 import { useQuasar } from 'quasar';
-import VnConfirm from 'src/components/ui/VnConfirm.vue';
-import TeleportSlot from 'src/components/ui/TeleportSlot.vue';
-
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-
-import { useSession } from 'src/composables/useSession';
+import { useStateStore } from 'stores/useStateStore';
+import { useSession } from 'composables/useSession';
+import VnConfirm from 'components/ui/VnConfirm.vue';
 import FetchData from 'components/FetchData.vue';
 
 const router = useRouter();
+const quasar = useQuasar();
 const { t } = useI18n();
-
+const stateStore = useStateStore();
 const session = useSession();
 const token = session.getToken();
-const quasar = useQuasar();
 
 const claimId = computed(() => router.currentRoute.value.params.id);
 
@@ -239,7 +237,11 @@ function onDrag() {
         </div>
     </div>
 
-    <teleport-slot v-if="!quasar.platform.is.mobile" to="#actions-prepend">
+    <Teleport
+        to="#actions-prepend"
+        v-if="stateStore.isHeaderMounted()"
+        :disabled="quasar.platform.is.mobile"
+    >
         <div class="row q-gutter-x-sm">
             <label for="fileInput">
                 <q-btn
@@ -262,9 +264,9 @@ function onDrag() {
             </label>
             <q-separator vertical />
         </div>
-    </teleport-slot>
+    </Teleport>
 
-    <teleport-slot to=".q-footer">
+    <q-page-sticky expand position="bottom" :offset="[0, 0]">
         <q-tabs align="justify" inline-label narrow-indicator>
             <q-tab
                 @click="inputFile.nativeEl.click()"
@@ -282,7 +284,31 @@ function onDrag() {
                 <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
             </q-tab>
         </q-tabs>
-    </teleport-slot>
+    </q-page-sticky>
+
+    <!-- <Teleport
+        v-if="stateStore.isHeaderMounted()"
+        to=".q-footer"
+        :disabled="!quasar.platform.is.mobile"
+    >
+        <q-tabs align="justify" inline-label narrow-indicator>
+            <q-tab
+                @click="inputFile.nativeEl.click()"
+                icon="add_circle"
+                :label="t('globals.add')"
+            >
+                <q-input
+                    ref="inputFile"
+                    type="file"
+                    style="display: none"
+                    multiple
+                    v-model="files"
+                    @update:model-value="create()"
+                />
+                <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
+            </q-tab>
+        </q-tabs>
+    </Teleport> -->
 
     <!-- MULTIMEDIA DIALOG START-->
     <q-dialog
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 071fb83c6..dbc3aa1c1 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -3,12 +3,11 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'src/filters/index';
-import Paginate from 'src/components/PaginateData.vue';
+import { toDate } from 'filters/index';
+import Paginate from 'components/PaginateData.vue';
 import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
-import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import CustomerDescriptorPopover from 'pages/Customer/Card/CustomerDescriptorPopover.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import ClaimFilter from './ClaimFilter.vue';
 
 const stateStore = useStateStore();
@@ -37,22 +36,30 @@ function viewSummary(id) {
 </script>
 
 <template>
-    <teleport-slot to="#searchbar">
-        <VnSearchbar
-            data-key="ClaimList"
-            :label="t('Search claim')"
-            :info="t('You can search by claim id or customer name')"
-        />
-    </teleport-slot>
-    <teleport-slot to="#actions-append">
-        <div class="row q-gutter-x-sm">
-            <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
-                <q-tooltip bottom anchor="bottom right">
-                    {{ t('globals.collapseMenu') }}
-                </q-tooltip>
-            </q-btn>
-        </div>
-    </teleport-slot>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="ClaimList"
+                :label="t('Search claim')"
+                :info="t('You can search by claim id or customer name')"
+            />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <q-btn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <q-tooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </q-tooltip>
+                </q-btn>
+            </div>
+        </Teleport>
+    </template>
     <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <q-scroll-area class="fit text-grey-8">
             <ClaimFilter data-key="ClaimList" />
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 010fb7b99..d3fb133cf 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -3,20 +3,19 @@ import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import CustomerDescriptor from './CustomerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 </script>
 <template>
-    <teleport-slot to="#searchbar">
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
         <VnSearchbar
             data-key="CustomerList"
             :label="t('Search customer')"
             :info="t('You can search by customer id or name')"
         />
-    </teleport-slot>
+    </Teleport>
     <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
             <CustomerDescriptor />
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 651738eb6..faa960512 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -5,7 +5,6 @@ import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import Paginate from 'src/components/PaginateData.vue';
 import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import CustomerFilter from './CustomerFilter.vue';
 
@@ -29,22 +28,30 @@ function viewSummary(id) {
 </script>
 
 <template>
-    <teleport-slot to="#searchbar">
-        <VnSearchbar
-            data-key="CustomerList"
-            :label="t('Search customer')"
-            :info="t('You can search by customer id or name')"
-        />
-    </teleport-slot>
-    <teleport-slot to="#actions-append">
-        <div class="row q-gutter-x-sm">
-            <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
-                <q-tooltip bottom anchor="bottom right">
-                    {{ t('globals.collapseMenu') }}
-                </q-tooltip>
-            </q-btn>
-        </div>
-    </teleport-slot>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="CustomerList"
+                :label="t('Search customer')"
+                :info="t('You can search by customer id or name')"
+            />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <q-btn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <q-tooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </q-tooltip>
+                </q-btn>
+            </div>
+        </Teleport>
+    </template>
     <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <q-scroll-area class="fit text-grey-8">
             <CustomerFilter data-key="CustomerList" />
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index 8e693fd81..de3862835 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -3,20 +3,19 @@ import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 </script>
 <template>
-    <teleport-slot to="#searchbar">
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
         <VnSearchbar
             data-key="InvoiceOutList"
             :label="t('Search invoice')"
             :info="t('You can search by invoice reference')"
         />
-    </teleport-slot>
+    </Teleport>
     <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
             <InvoiceOutDescriptor />
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 46228e5de..b05376079 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -7,7 +7,6 @@ import { useStateStore } from 'stores/useStateStore';
 import Paginate from 'src/components/PaginateData.vue';
 import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
 import { toDate, toCurrency } from 'src/filters/index';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import InvoiceOutFilter from './InvoiceOutFilter.vue';
 
@@ -34,22 +33,30 @@ function viewSummary(id) {
 </script>
 
 <template>
-    <teleport-slot to="#searchbar">
-        <VnSearchbar
-            data-key="InvoiceOutList"
-            :label="t('Search invoice')"
-            :info="t('You can search by invoice reference')"
-        />
-    </teleport-slot>
-    <teleport-slot to="#actions-append">
-        <div class="row q-gutter-x-sm">
-            <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
-                <q-tooltip bottom anchor="bottom right">
-                    {{ t('globals.collapseMenu') }}
-                </q-tooltip>
-            </q-btn>
-        </div>
-    </teleport-slot>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="InvoiceOutList"
+                :label="t('Search invoice')"
+                :info="t('You can search by invoice reference')"
+            />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <q-btn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <q-tooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </q-tooltip>
+                </q-btn>
+            </div>
+        </Teleport>
+    </template>
     <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <q-scroll-area class="fit text-grey-8">
             <InvoiceOutFilter data-key="InvoiceOutList" />
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 1a8c5a1af..f644d47b2 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -3,20 +3,19 @@ import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import TicketDescriptor from './TicketDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 </script>
 <template>
-    <teleport-slot to="#searchbar">
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
         <VnSearchbar
             data-key="TicketList"
             :label="t('Search ticket')"
             :info="t('You can search by ticket id or alias')"
         />
-    </teleport-slot>
+    </Teleport>
     <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
             <TicketDescriptor />
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index a0fe69b3b..7b5598048 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -7,8 +7,6 @@ import { useStateStore } from 'stores/useStateStore';
 import Paginate from 'src/components/PaginateData.vue';
 import { toDate, toCurrency } from 'src/filters/index';
 import TicketSummaryDialog from './Card/TicketSummaryDialog.vue';
-
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import TicketFilter from './TicketFilter.vue';
 
@@ -71,22 +69,30 @@ function viewSummary(id) {
 </script>
 
 <template>
-    <teleport-slot to="#searchbar">
-        <VnSearchbar
-            data-key="TicketList"
-            :label="t('Search ticket')"
-            :info="t('You can search by ticket id or alias')"
-        />
-    </teleport-slot>
-    <teleport-slot to="#actions-append">
-        <div class="row q-gutter-x-sm">
-            <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
-                <q-tooltip bottom anchor="bottom right">
-                    {{ t('globals.collapseMenu') }}
-                </q-tooltip>
-            </q-btn>
-        </div>
-    </teleport-slot>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="TicketList"
+                :label="t('Search ticket')"
+                :info="t('You can search by ticket id or alias')"
+            />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <q-btn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <q-tooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </q-tooltip>
+                </q-btn>
+            </div>
+        </Teleport>
+    </template>
     <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <q-scroll-area class="fit text-grey-8">
             <TicketFilter data-key="TicketList" />
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index 39c4cbfd9..02c472d19 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -1,13 +1,21 @@
 <script setup>
-// import { useI18n } from 'vue-i18n';
+import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import WorkerDescriptor from './WorkerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const stateStore = useStateStore();
-// const { t } = useI18n();
+const { t } = useI18n();
 </script>
 <template>
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+        <VnSearchbar
+            data-key="WorkerList"
+            :label="t('Search worker')"
+            :info="t('You can search by worker id or name')"
+        />
+    </Teleport>
     <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
             <WorkerDescriptor />
@@ -21,3 +29,9 @@ const stateStore = useStateStore();
         </q-page>
     </q-page-container>
 </template>
+
+<i18n>
+es:
+    Search worker: Buscar trabajador
+    You can search by worker id or name: Puedes buscar por id o nombre del trabajador
+</i18n>
diff --git a/src/pages/Worker/WorkerFilter.vue b/src/pages/Worker/WorkerFilter.vue
new file mode 100644
index 000000000..24dfec7a5
--- /dev/null
+++ b/src/pages/Worker/WorkerFilter.vue
@@ -0,0 +1,121 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const departments = ref();
+</script>
+
+<template>
+    <fetch-data url="Departments" @on-fetch="(data) => (departments = data)" auto-load />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <q-list dense>
+                <q-item>
+                    <q-item-section>
+                        <q-input :label="t('FI')" v-model="params.fi" lazy-rules>
+                            <template #prepend>
+                                <q-icon name="badge" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            :label="t('First Name')"
+                            v-model="params.firstName"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            :label="t('Last Name')"
+                            v-model="params.lastName"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            :label="t('User Name')"
+                            v-model="params.userName"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section v-if="!departments">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="departments">
+                        <q-select
+                            :label="t('Department')"
+                            v-model="params.departmentFk"
+                            @update:model-value="searchFn()"
+                            :options="departments"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item class="q-mb-md">
+                    <q-item-section>
+                        <q-input
+                            :label="t('Extension')"
+                            v-model="params.extension"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+            </q-list>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: Contains
+        fi: FI
+        firstName: First name
+        lastName: Last name
+        userName: User
+        extension: Extension
+es:
+    params:
+        search: Contiene
+        fi: NIF
+        firstName: Nombre
+        lastName: Apellidos
+        userName: Usuario
+        extension: Extensión
+    FI: NIF
+    First Name: Nombre
+    Last Name: Apellidos
+    User Name: Usuario
+    Department: Departamento
+    Extension: Extensión
+</i18n>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 17066c64f..2058405cd 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -2,9 +2,14 @@
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
+import { useStateStore } from 'stores/useStateStore';
 import Paginate from 'src/components/PaginateData.vue';
 import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue';
+import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import WorkerFilter from './WorkerFilter.vue';
 
+const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 const quasar = useQuasar();
@@ -24,77 +29,128 @@ function viewSummary(id) {
 </script>
 
 <template>
-    <q-page class="q-pa-md">
-        <paginate data-key="WorkerList" url="Workers/filter" sort-by="id DESC" auto-load>
-            <template #body="{ rows }">
-                <q-card class="card" v-for="row of rows" :key="row.id">
-                    <q-item
-                        class="q-pa-none items-start cursor-pointer q-hoverable"
-                        v-ripple
-                        clickable
-                    >
-                        <q-item-section class="q-pa-md" @click="navigate(row.id)">
-                            <q-item-label class="text-h6">
-                                {{ row.nickname }}
-                            </q-item-label>
-                            <q-item-label caption>#{{ row.id }}</q-item-label>
-                            <q-list>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('worker.list.name') }}
-                                        </q-item-label>
-                                        <q-item-label>{{ row.userName }}</q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('worker.list.email') }}
-                                        </q-item-label>
-                                        <q-item-label>{{ row.email }}</q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('worker.list.department')
-                                        }}</q-item-label>
-                                        <q-item-label>
-                                            {{ row.department }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                            </q-list>
-                        </q-item-section>
-                        <q-separator vertical />
-                        <q-card-actions vertical class="justify-between">
-                            <q-btn
-                                flat
-                                round
-                                color="primary"
-                                icon="arrow_circle_right"
-                                @click="navigate(row.id)"
-                            >
-                                <q-tooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </q-tooltip>
-                            </q-btn>
-                            <q-btn
-                                flat
-                                round
-                                color="grey-7"
-                                icon="preview"
-                                @click="viewSummary(row.id)"
-                            >
-                                <q-tooltip>{{
-                                    t('components.smartCard.openSummary')
-                                }}</q-tooltip>
-                            </q-btn>
-                        </q-card-actions>
-                    </q-item>
-                </q-card>
-            </template>
-        </paginate>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="WorkerList"
+                :label="t('Search worker')"
+                :info="t('You can search by worker id or name')"
+            />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <q-btn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <q-tooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </q-tooltip>
+                </q-btn>
+            </div>
+        </Teleport>
+    </template>
+    <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <q-scroll-area class="fit text-grey-8">
+            <WorkerFilter data-key="WorkerList" />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page class="column items-center q-pa-md">
+        <div class="card-list">
+            <paginate
+                data-key="WorkerList"
+                url="Workers/filter"
+                order="id DESC"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <q-item
+                            class="q-pa-none items-start cursor-pointer q-hoverable"
+                            v-ripple
+                            clickable
+                        >
+                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                                <q-item-label class="text-h6">
+                                    {{ row.nickname }}
+                                </q-item-label>
+                                <q-item-label caption>#{{ row.id }}</q-item-label>
+                                <q-list>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('worker.list.name') }}
+                                            </q-item-label>
+                                            <q-item-label>{{
+                                                row.userName
+                                            }}</q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('worker.list.email') }}
+                                            </q-item-label>
+                                            <q-item-label>{{ row.email }}</q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>{{
+                                                t('worker.list.department')
+                                            }}</q-item-label>
+                                            <q-item-label>
+                                                {{ row.department }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                </q-list>
+                            </q-item-section>
+                            <q-separator vertical />
+                            <q-card-actions vertical class="justify-between">
+                                <q-btn
+                                    flat
+                                    round
+                                    color="primary"
+                                    icon="arrow_circle_right"
+                                    @click="navigate(row.id)"
+                                >
+                                    <q-tooltip>
+                                        {{ t('components.smartCard.openCard') }}
+                                    </q-tooltip>
+                                </q-btn>
+                                <q-btn
+                                    flat
+                                    round
+                                    color="grey-7"
+                                    icon="preview"
+                                    @click="viewSummary(row.id)"
+                                >
+                                    <q-tooltip>{{
+                                        t('components.smartCard.openSummary')
+                                    }}</q-tooltip>
+                                </q-btn>
+                            </q-card-actions>
+                        </q-item>
+                    </q-card>
+                </template>
+            </paginate>
+        </div>
     </q-page>
 </template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
+
+<i18n>
+es:
+    Search worker: Buscar trabajador
+    You can search by worker id or name: Puedes buscar por id o nombre del trabajador
+</i18n>

From 06333af38ca680df82090b2db61441fb695d5089 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 7 Mar 2023 15:03:22 +0100
Subject: [PATCH 20/23] Removed TeleportSlot

---
 src/components/NavBar.vue           |  9 +++-
 src/components/ui/TeleportSlot.vue  | 20 ---------
 src/components/ui/VnSearchbar.vue   |  4 --
 src/pages/Claim/Card/ClaimPhoto.vue | 70 +++++++++++------------------
 src/pages/Claim/Card/ClaimRma.vue   | 39 ++++++++++++----
 5 files changed, 65 insertions(+), 77 deletions(-)
 delete mode 100644 src/components/ui/TeleportSlot.vue

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 80f6dba45..88f8856e6 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -21,7 +21,14 @@ onMounted(() => stateStore.setMounted());
 <template>
     <q-header class="bg-dark" color="white" elevated>
         <q-toolbar class="q-py-sm q-px-md">
-            <q-btn flat @click="stateStore.toggleLeftDrawer()" round dense icon="menu">
+            <q-btn
+                @click="stateStore.toggleLeftDrawer()"
+                icon="menu"
+                class="q-mr-sm"
+                round
+                dense
+                flat
+            >
                 <q-tooltip bottom anchor="bottom right">
                     {{ t('globals.collapseMenu') }}
                 </q-tooltip>
diff --git a/src/components/ui/TeleportSlot.vue b/src/components/ui/TeleportSlot.vue
deleted file mode 100644
index 6a3f19ef0..000000000
--- a/src/components/ui/TeleportSlot.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup>
-import { nextTick, ref } from 'vue';
-
-const $props = defineProps({
-    to: {
-        type: String,
-        required: true,
-    },
-});
-
-const isHeaderMounted = ref(false);
-nextTick(() => {
-    isHeaderMounted.value = document.querySelector($props.to) !== null;
-});
-</script>
-<template>
-    <teleport v-if="isHeaderMounted" :to="$props.to">
-        <slot />
-    </teleport>
-</template>
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 04f4d7245..cf63119b8 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -92,10 +92,6 @@ async function search() {
     cursor: help;
 }
 
-#searchbar .q-field {
-    min-width: 350px;
-}
-
 .body--light #searchbar {
     .q-field--standout.q-field--highlighted .q-field__control {
         background-color: $grey-7;
diff --git a/src/pages/Claim/Card/ClaimPhoto.vue b/src/pages/Claim/Card/ClaimPhoto.vue
index c7d05d7ed..f825f00d1 100644
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/src/pages/Claim/Card/ClaimPhoto.vue
@@ -238,9 +238,8 @@ function onDrag() {
     </div>
 
     <Teleport
+        v-if="stateStore.isHeaderMounted() && !quasar.platform.is.mobile"
         to="#actions-prepend"
-        v-if="stateStore.isHeaderMounted()"
-        :disabled="quasar.platform.is.mobile"
     >
         <div class="row q-gutter-x-sm">
             <label for="fileInput">
@@ -266,49 +265,32 @@ function onDrag() {
         </div>
     </Teleport>
 
-    <q-page-sticky expand position="bottom" :offset="[0, 0]">
-        <q-tabs align="justify" inline-label narrow-indicator>
-            <q-tab
-                @click="inputFile.nativeEl.click()"
-                icon="add_circle"
-                :label="t('globals.add')"
-            >
-                <q-input
-                    ref="inputFile"
-                    type="file"
-                    style="display: none"
-                    multiple
-                    v-model="files"
-                    @update:model-value="create()"
-                />
-                <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
-            </q-tab>
-        </q-tabs>
-    </q-page-sticky>
-
-    <!-- <Teleport
-        v-if="stateStore.isHeaderMounted()"
-        to=".q-footer"
-        :disabled="!quasar.platform.is.mobile"
+    <q-page-sticky
+        v-if="quasar.platform.is.mobile"
+        position="bottom"
+        :offset="[0, 0]"
+        expand
     >
-        <q-tabs align="justify" inline-label narrow-indicator>
-            <q-tab
-                @click="inputFile.nativeEl.click()"
-                icon="add_circle"
-                :label="t('globals.add')"
-            >
-                <q-input
-                    ref="inputFile"
-                    type="file"
-                    style="display: none"
-                    multiple
-                    v-model="files"
-                    @update:model-value="create()"
-                />
-                <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
-            </q-tab>
-        </q-tabs>
-    </Teleport> -->
+        <q-toolbar class="bg-primary text-white q-pa-none">
+            <q-tabs class="full-width" align="justify" inline-label narrow-indicator>
+                <q-tab
+                    @click="inputFile.nativeEl.click()"
+                    icon="add_circle"
+                    :label="t('globals.add')"
+                >
+                    <q-input
+                        ref="inputFile"
+                        type="file"
+                        style="display: none"
+                        multiple
+                        v-model="files"
+                        @update:model-value="create()"
+                    />
+                    <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
+                </q-tab>
+            </q-tabs>
+        </q-toolbar>
+    </q-page-sticky>
 
     <!-- MULTIMEDIA DIALOG START-->
     <q-dialog
diff --git a/src/pages/Claim/Card/ClaimRma.vue b/src/pages/Claim/Card/ClaimRma.vue
index 7b71dde53..e51de16fd 100644
--- a/src/pages/Claim/Card/ClaimRma.vue
+++ b/src/pages/Claim/Card/ClaimRma.vue
@@ -5,9 +5,9 @@ import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
 import Paginate from 'src/components/PaginateData.vue';
 import FetchData from 'components/FetchData.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
 import { toDate } from 'src/filters';
@@ -15,6 +15,7 @@ import { toDate } from 'src/filters';
 const quasar = useQuasar();
 const route = useRoute();
 const { t } = useI18n();
+const stateStore = useStateStore();
 const arrayData = useArrayData('ClaimRma');
 
 const claim = ref();
@@ -44,6 +45,12 @@ async function onFetch(data) {
 }
 
 async function addRow() {
+    if (!claim.value.rma) {
+        return quasar.notify({
+            message: `This claim is not associated to any RMA`,
+            type: 'negative',
+        });
+    }
     const formData = {
         code: claim.value.rma,
     };
@@ -138,20 +145,31 @@ async function remove(id) {
             </paginate>
         </div>
     </div>
-    <teleport-slot v-if="!quasar.platform.is.mobile" to="#actions-prepend">
+
+    <Teleport
+        v-if="stateStore.isHeaderMounted() && !quasar.platform.is.mobile"
+        to="#actions-prepend"
+    >
         <div class="row q-gutter-x-sm">
             <q-btn @click="addRow()" icon="add" color="primary" dense rounded>
                 <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
             </q-btn>
             <q-separator vertical />
         </div>
-    </teleport-slot>
+    </Teleport>
 
-    <teleport-slot to=".q-footer">
-        <q-tabs align="justify" inline-label narrow-indicator>
-            <q-tab @click="addRow()" icon="add_circle" :label="t('globals.add')" />
-        </q-tabs>
-    </teleport-slot>
+    <q-page-sticky
+        v-if="quasar.platform.is.mobile"
+        position="bottom"
+        :offset="[0, 0]"
+        expand
+    >
+        <q-toolbar class="bg-primary text-white q-pa-none">
+            <q-tabs class="full-width" align="justify" inline-label narrow-indicator>
+                <q-tab @click="addRow()" icon="add_circle" :label="t('globals.add')" />
+            </q-tabs>
+        </q-toolbar>
+    </q-page-sticky>
 </template>
 
 <style lang="scss" scoped>
@@ -170,3 +188,8 @@ async function remove(id) {
     z-index: 2998;
 }
 </style>
+
+<i18n>
+es:
+    This claim is not associated to any RMA: Esta reclamación no está asociada a ninguna ARM
+</i18n>

From e7f182bbb6a39cfaf21a573fdd402c93e7f174cd Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Wed, 8 Mar 2023 09:40:44 +0100
Subject: [PATCH 21/23] Updated WorkerDescriptorProxy

---
 quasar.config.js                              |   4 +-
 src/components/ui/VnSearchbar.vue             |  19 +++
 src/pages/Claim/Card/ClaimLog.vue             |   5 +-
 .../Customer/Card/CustomerDescriptor.vue      |   6 +-
 src/pages/Worker/Card/WorkerDescriptor.vue    |   8 +-
 .../Worker/Card/WorkerDescriptorDialog.vue    |  21 ----
 ...rPopover.vue => WorkerDescriptorProxy.vue} |   7 +-
 src/pages/Worker/Card/WorkerSummary.vue       | 115 +++++++++++-------
 src/pages/Worker/WorkerList.vue               |   7 +-
 9 files changed, 116 insertions(+), 76 deletions(-)
 delete mode 100644 src/pages/Worker/Card/WorkerDescriptorDialog.vue
 rename src/pages/Worker/Card/{WorkerPopover.vue => WorkerDescriptorProxy.vue} (65%)

diff --git a/quasar.config.js b/quasar.config.js
index 005a922d7..6e8a8f21c 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -9,7 +9,7 @@
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
 
 const { configure } = require('quasar/wrappers');
-const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/vite')
+const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/vite');
 const path = require('path');
 
 module.exports = configure(function (/* ctx */) {
@@ -140,6 +140,8 @@ module.exports = configure(function (/* ctx */) {
 
             // Quasar plugins
             plugins: ['Notify', 'Dialog'],
+            //all: 'auto',
+            //autoImportComponentCase: 'pascal',
         },
 
         // animations: 'all', // --- includes all animations
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index cf63119b8..7571c6391 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -67,6 +67,7 @@ async function search() {
             dense
             standout
             autofocus
+            hide-bottom-space
         >
             <template #prepend>
                 <q-icon name="search" />
@@ -87,6 +88,24 @@ async function search() {
     </q-form>
 </template>
 
+<style lang="scss">
+@media screen and (max-width: $breakpoint-xs-max) {
+    .q-field {
+        width: 250px;
+    }
+}
+
+@media screen and (min-width: $breakpoint-xs-max) {
+    .q-field {
+        width: 400px;
+    }
+}
+
+.q-field {
+    transition: width 0.36s;
+}
+</style>
+
 <style lang="scss">
 .cursor-info {
     cursor: help;
diff --git a/src/pages/Claim/Card/ClaimLog.vue b/src/pages/Claim/Card/ClaimLog.vue
index d9fe3eb60..175d9bd6c 100644
--- a/src/pages/Claim/Card/ClaimLog.vue
+++ b/src/pages/Claim/Card/ClaimLog.vue
@@ -3,7 +3,6 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { useSession } from 'src/composables/useSession';
 import { useStateStore } from 'stores/useStateStore';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import Paginate from 'src/components/PaginateData.vue';
 import ClaimLogFilter from './ClaimLogFilter.vue';
 
@@ -114,7 +113,7 @@ function actionColor(action) {
             </Paginate>
         </q-timeline>
     </div>
-    <TeleportSlot to="#actions-append">
+    <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">
         <div class="row q-gutter-x-sm">
             <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
                 <q-tooltip bottom anchor="bottom right">
@@ -122,7 +121,7 @@ function actionColor(action) {
                 </q-tooltip>
             </q-btn>
         </div>
-    </TeleportSlot>
+    </Teleport>
     <q-drawer v-model="stateStore.rightDrawer" show-if-above side="right" :width="300">
         <q-scroll-area class="fit text-grey-8">
             <ClaimLogFilter data-key="ClaimLogs" />
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index ca5f4adaa..91a644c71 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toCurrency } from 'src/filters';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const $props = defineProps({
     id: {
@@ -30,7 +31,10 @@ const entityId = computed(() => {
                         {{ t('customer.card.salesPerson') }}
                     </q-item-label>
                     <q-item-label class="col q-ma-none">
-                        {{ entity.salesPersonUser.name }}
+                        <span class="link">
+                            {{ entity.salesPersonUser.name }}
+                            <WorkerDescriptorProxy :id="entity.salesPersonFk" />
+                        </span>
                     </q-item-label>
                 </q-item>
                 <q-item class="row">
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index b763469bc..e138be22e 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -61,7 +61,7 @@ function getWorkerAvatar() {
         @on-fetch="(data) => (worker = data)"
     >
         <template #before>
-            <q-img :src="getWorkerAvatar()">
+            <q-img :src="getWorkerAvatar()" class="photo">
                 <template #error>
                     <div
                         class="absolute-full bg-grey-10 text-center q-pa-md flex flex-center"
@@ -130,3 +130,9 @@ function getWorkerAvatar() {
         </template>
     </card-descriptor>
 </template>
+
+<style lang="scss" scoped>
+.photo {
+    height: 256px;
+}
+</style>
diff --git a/src/pages/Worker/Card/WorkerDescriptorDialog.vue b/src/pages/Worker/Card/WorkerDescriptorDialog.vue
deleted file mode 100644
index 9c55c474f..000000000
--- a/src/pages/Worker/Card/WorkerDescriptorDialog.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import workerDescriptor from './WorkerDescriptor.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <q-dialog ref="dialogRef" @hide="onDialogHide">
-        <worker-descriptor v-if="$props.id" :id="$props.id" />
-    </q-dialog>
-</template>
diff --git a/src/pages/Worker/Card/WorkerPopover.vue b/src/pages/Worker/Card/WorkerDescriptorProxy.vue
similarity index 65%
rename from src/pages/Worker/Card/WorkerPopover.vue
rename to src/pages/Worker/Card/WorkerDescriptorProxy.vue
index 5aad1377c..be03485f7 100644
--- a/src/pages/Worker/Card/WorkerPopover.vue
+++ b/src/pages/Worker/Card/WorkerDescriptorProxy.vue
@@ -8,8 +8,9 @@ const $props = defineProps({
     },
 });
 </script>
+
 <template>
-    <q-card>
-        <worker-descriptor v-if="$props.id" :id="$props.id" />
-    </q-card>
+    <q-popup-proxy>
+        <WorkerDescriptor v-if="$props.id" :id="$props.id" />
+    </q-popup-proxy>
 </template>
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index 58d34165d..39054e6bc 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -1,20 +1,16 @@
 <script setup>
+import axios from 'axios';
 import { ref, onMounted, computed, onUpdated } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
-import axios from 'axios';
-import workerDescriptorDialog from './WorkerDescriptorDialog.vue';
+import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
+import WorkerDescriptorProxy from './WorkerDescriptorProxy.vue';
 
 onMounted(() => fetch());
-
 onUpdated(() => fetch());
 
 const route = useRoute();
 const { t } = useI18n();
-const quasar = useQuasar();
-
-t == t;
 
 const $props = defineProps({
     id: {
@@ -75,21 +71,12 @@ function sipExtension() {
     if (worker.value.sip) return worker.value.sip.extension;
     return '-';
 }
-
-function openDescriptorDialog(id) {
-    quasar.dialog({
-        component: workerDescriptorDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
     <div class="summary container">
         <q-card>
-            <skeleton-summary v-if="!worker" />
+            <SkeletonSummary v-if="!worker" />
             <template v-if="worker">
                 <div class="header bg-primary q-pa-sm q-mb-md">
                     {{ worker.id }} - {{ worker.firstName }} {{ worker.lastName }}
@@ -108,49 +95,81 @@ function openDescriptorDialog(id) {
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.card.name') }} </q-item-label>
-                                    <q-item-label>{{ worker.user.nickname }}</q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.card.name') }}
+                                    </q-item-label>
+                                    <q-item-label>
+                                        {{ worker.user.nickname }}
+                                    </q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.list.department') }} </q-item-label>
-                                    <q-item-label>{{ worker.department.department.name }}</q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.list.department') }}
+                                    </q-item-label>
+                                    <q-item-label>{{
+                                        worker.department.department.name
+                                    }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.list.email') }} </q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.list.email') }}
+                                    </q-item-label>
                                     <q-item-label>{{ worker.user.email }}</q-item-label>
                                 </q-item-section>
                             </q-item>
-                            <q-item class="items-start cursor-pointer q-hoverable" v-if="worker.boss">
-                                <q-item-section @click="openDescriptorDialog(worker.bossFk)">
-                                    <q-item-label caption>{{ t('worker.summary.boss') }} </q-item-label>
+                            <q-item
+                                class="items-start cursor-pointer q-hoverable"
+                                v-if="worker.boss"
+                            >
+                                <q-item-section>
+                                    <q-item-label caption>
+                                        {{ t('worker.summary.boss') }}
+                                    </q-item-label>
                                     <q-item-label>
-                                        {{ worker.boss.name }}
+                                        <span class="link">
+                                            {{ worker.boss.name }}
+                                            <WorkerDescriptorProxy :id="worker.bossFk" />
+                                        </span>
                                     </q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.summary.phoneExtension') }} </q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.summary.phoneExtension') }}
+                                    </q-item-label>
                                     <q-item-label>
-                                        {{ worker.mobileExtension == '' ? worker.mobileExtension : '-' }}
+                                        {{
+                                            worker.mobileExtension == ''
+                                                ? worker.mobileExtension
+                                                : '-'
+                                        }}
                                     </q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.summary.entPhone') }} </q-item-label>
-                                    <q-item-label>{{ worker.phone == '' ? worker.phone : '-' }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('worker.summary.personalPhone') }} </q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.summary.entPhone') }}
+                                    </q-item-label>
                                     <q-item-label>{{
-                                        worker.client.phone == '' ? worker.client.phone : '-'
+                                        worker.phone == '' ? worker.phone : '-'
+                                    }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section>
+                                    <q-item-label caption
+                                        >{{ t('worker.summary.personalPhone') }}
+                                    </q-item-label>
+                                    <q-item-label>{{
+                                        worker.client.phone == ''
+                                            ? worker.client.phone
+                                            : '-'
                                     }}</q-item-label>
                                 </q-item-section>
                             </q-item>
@@ -163,25 +182,37 @@ function openDescriptorDialog(id) {
                             </q-item-label>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption> {{ t('worker.summary.userId') }} </q-item-label>
+                                    <q-item-label caption>
+                                        {{ t('worker.summary.userId') }}
+                                    </q-item-label>
                                     <q-item-label>{{ worker.user.id }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.card.name') }} </q-item-label>
-                                    <q-item-label>{{ worker.user.nickname }}</q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.card.name') }}
+                                    </q-item-label>
+                                    <q-item-label>{{
+                                        worker.user.nickname
+                                    }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.summary.role') }} </q-item-label>
-                                    <q-item-label>{{ worker.user.role.name }}</q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.summary.role') }}
+                                    </q-item-label>
+                                    <q-item-label>{{
+                                        worker.user.role.name
+                                    }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.summary.sipExtension') }} </q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.summary.sipExtension') }}
+                                    </q-item-label>
                                     <q-item-label>{{ sipExtension() }}</q-item-label>
                                 </q-item-section>
                             </q-item>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 2058405cd..8b0d9392c 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -5,7 +5,6 @@ import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import Paginate from 'src/components/PaginateData.vue';
 import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import WorkerFilter from './WorkerFilter.vue';
 
@@ -129,9 +128,9 @@ function viewSummary(id) {
                                     icon="preview"
                                     @click="viewSummary(row.id)"
                                 >
-                                    <q-tooltip>{{
-                                        t('components.smartCard.openSummary')
-                                    }}</q-tooltip>
+                                    <q-tooltip>
+                                        {{ t('components.smartCard.openSummary') }}
+                                    </q-tooltip>
                                 </q-btn>
                             </q-card-actions>
                         </q-item>

From ca033951aa5c6f0a7b25bf2c4705b050aa8df074 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Wed, 8 Mar 2023 09:47:13 +0100
Subject: [PATCH 22/23] Removed unused property

---
 src/components/ui/VnSearchbar.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 7571c6391..6c39d71e2 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -67,7 +67,6 @@ async function search() {
             dense
             standout
             autofocus
-            hide-bottom-space
         >
             <template #prepend>
                 <q-icon name="search" />

From 383816d8769da0dec66073310aee1940e03ebb4f Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Wed, 8 Mar 2023 09:56:18 +0100
Subject: [PATCH 23/23] Responsive Searchbar

---
 src/components/ui/VnSearchbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 6c39d71e2..5df2bc900 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -87,7 +87,7 @@ async function search() {
     </q-form>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @media screen and (max-width: $breakpoint-xs-max) {
     .q-field {
         width: 250px;