From d18f12150740461971b0ed145740246ada96e9e9 Mon Sep 17 00:00:00 2001
From: Joan <jsanchezbarruguer@gmail.com>
Date: Tue, 8 Nov 2022 07:41:36 +0100
Subject: [PATCH 1/6] Descriptor component

---
 src/components/ui/CardDescriptor.vue     | 91 +++++++++++++++++++++++
 src/pages/Claim/Card/ClaimCard.vue       | 92 ++++++++++++++++++++----
 src/pages/Claim/Card/ClaimDescriptor.vue |  0
 3 files changed, 169 insertions(+), 14 deletions(-)
 create mode 100644 src/components/ui/CardDescriptor.vue
 create mode 100644 src/pages/Claim/Card/ClaimDescriptor.vue

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
new file mode 100644
index 000000000..e8fc2c675
--- /dev/null
+++ b/src/components/ui/CardDescriptor.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { useSlots, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+    data: {
+        type: Object,
+        required: true,
+    },
+});
+const slots = useSlots();
+const route = useRoute();
+const { t } = useI18n();
+
+const module = computed(() => {
+    return route.matched[1];
+});
+</script>
+
+<template>
+    <div class="descriptor">
+        <div class="header bg-primary q-pa-sm">
+            <router-link :to="{ name: `${module.name}List` }">
+                <q-btn round flat dense size="md" icon="view_list" color="white">
+                    <q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
+                </q-btn>
+            </router-link>
+            <router-link :to="{ name: `${module.name}Summary`, params: { id: route.params.id } }">
+                <q-btn round flat dense size="md" icon="launch" color="white">
+                    <q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
+                </q-btn>
+            </router-link>
+
+            <q-btn v-if="slots.menu" size="md" icon="more_vert" color="white" round flat dense>
+                <q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
+                <q-menu>
+                    <q-list>
+                        <slot name="menu" />
+                    </q-list>
+                </q-menu>
+            </q-btn>
+        </div>
+
+        <div v-if="$props.data" class="q-py-sm">
+            <slot name="body" />
+        </div>
+
+        <!-- Skeleton -->
+        <div id="descriptor-skeleton" v-if="!$props.data">
+            <div class="col q-pl-sm q-pa-sm">
+                <q-skeleton type="text" square height="45px" />
+                <q-skeleton type="text" square height="18px" />
+                <q-skeleton type="text" square height="18px" />
+                <q-skeleton type="text" square height="18px" />
+            </div>
+
+            <q-card-actions>
+                <q-skeleton size="40px" />
+                <q-skeleton size="40px" />
+                <q-skeleton size="40px" />
+                <q-skeleton size="40px" />
+                <q-skeleton size="40px" />
+            </q-card-actions>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.descriptor {
+    max-width: 256px;
+
+    h5 {
+        margin: 0 15px;
+    }
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: stretch;
+    }
+
+    .q-card__actions {
+        justify-content: center;
+    }
+
+    #descriptor-skeleton .q-card__actions {
+        justify-content: space-between;
+    }
+}
+</style>
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 29b3b4ee7..4ef530103 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { useState } from 'src/composables/useState';
 import { toDate } from 'src/filters';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -13,7 +14,7 @@ const state = useState();
 onMounted(async () => {
     await fetch();
 });
-const claim = ref({});
+const claim = ref();
 
 async function fetch() {
     const entityId = route.params.id;
@@ -46,8 +47,71 @@ function stateColor(code) {
 </script>
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
-        <q-scroll-area class="fit text-grey-8 descriptor">
-            <div class="header bg-primary q-pa-sm">
+        <q-scroll-area class="fit">
+            <card-descriptor module="" :data="claim">
+                <template #menu>
+                    <q-item clickable v-ripple>Option 1</q-item>
+                    <q-item clickable v-ripple>Option 2</q-item>
+                </template>
+                <template #body>
+                    <q-list>
+                        <q-item-label header class="ellipsis text-h5" :lines="1">
+                            {{ claim.client.name }}
+                            <q-tooltip>{{ claim.client.name }}</q-tooltip>
+                        </q-item-label>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.card.claimId') }}</q-item-label>
+                                <q-item-label>#{{ claim.id }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.card.created') }}</q-item-label>
+                                <q-item-label>{{ toDate(claim.created) }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.card.assignedTo') }}</q-item-label>
+                                <q-item-label>{{ claim.worker.user.name }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.card.state') }}</q-item-label>
+                                <q-item-label>
+                                    <q-chip :color="stateColor(claim.claimState.code)" dense>
+                                        {{ claim.claimState.description }}
+                                    </q-chip>
+                                </q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.card.ticketId') }}</q-item-label>
+                                <q-item-label>{{ claim.ticketFk }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+
+                    <q-card-actions>
+                        <q-btn
+                            size="md"
+                            icon="vn:client"
+                            color="primary"
+                            :to="{ name: 'CustomerCard', params: { id: claim.clientFk } }"
+                        >
+                            <q-tooltip>{{ t('claim.card.customerSummary') }}</q-tooltip>
+                        </q-btn>
+                        <q-btn
+                            size="md"
+                            icon="vn:ticket"
+                            color="primary"
+                            :to="{ name: 'TicketCard', params: { id: claim.ticketFk } }"
+                        >
+                            <q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
+                        </q-btn>
+                    </q-card-actions>
+                </template>
+            </card-descriptor>
+            <!-- <div class="header bg-primary q-pa-sm">
                 <router-link :to="{ path: '/claim/list' }">
                     <q-btn round flat dense size="md" icon="view_list" color="white">
                         <q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
@@ -61,17 +125,17 @@ function stateColor(code) {
 
                 <q-btn round flat dense size="md" icon="more_vert" color="white">
                     <q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
-                    <!-- <q-menu>
+                    <q-menu>
                         <q-list>
                             <q-item clickable v-ripple>Option 1</q-item>
                             <q-item clickable v-ripple>Option 2</q-item>
                         </q-list>
-                    </q-menu> -->
+                    </q-menu>
                 </q-btn>
-            </div>
+            </div> -->
 
-            <div v-if="claim.client" class="q-py-sm">
-                <q-list>
+            <!-- <div v-if="claim.client" class="q-py-sm"> -->
+            <!-- <q-list>
                     <q-item-label header class="ellipsis text-h5" :lines="1">
                         {{ claim.client.name }}
                         <q-tooltip>{{ claim.client.name }}</q-tooltip>
@@ -106,8 +170,8 @@ function stateColor(code) {
                             <q-item-label>{{ claim.ticketFk }}</q-item-label>
                         </q-item-section>
                     </q-item>
-                </q-list>
-                <q-card-actions>
+                </q-list> -->
+            <!-- <q-card-actions>
                     <q-btn
                         size="md"
                         icon="vn:client"
@@ -124,10 +188,10 @@ function stateColor(code) {
                     >
                         <q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
                     </q-btn>
-                </q-card-actions>
-            </div>
+                </q-card-actions> -->
+            <!-- </div> -->
             <!-- Skeleton -->
-            <div id="descriptor-skeleton" v-if="!claim.client">
+            <!-- <div id="descriptor-skeleton" v-if="!claim.client">
                 <div class="col q-pl-sm q-pa-sm">
                     <q-skeleton type="text" square height="45px" />
                     <q-skeleton type="text" square height="18px" />
@@ -142,7 +206,7 @@ function stateColor(code) {
                     <q-skeleton size="40px" />
                     <q-skeleton size="40px" />
                 </q-card-actions>
-            </div>
+            </div> -->
 
             <q-separator />
 
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
new file mode 100644
index 000000000..e69de29bb

From 50486990dd9b4a6381f956ee3d4f6210c6f67928 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 8 Nov 2022 13:36:22 +0100
Subject: [PATCH 2/6] Modules cards

---
 src/components/ui/CardDescriptor.vue          |  59 +++--
 src/css/app.scss                              |   9 +
 src/i18n/en/index.js                          |   7 +-
 src/i18n/es/index.js                          |   5 +-
 src/pages/Claim/Card/ClaimCard.vue            | 203 +-----------------
 src/pages/Claim/Card/ClaimDescriptor.vue      | 118 ++++++++++
 src/pages/Claim/ClaimList.vue                 |  26 ++-
 src/pages/Customer/Card/CustomerCard.vue      | 165 +-------------
 .../Customer/Card/CustomerDescriptor.vue      | 111 ++++++++++
 .../Card/CustomerDescriptorPopover.vue        |  15 ++
 src/pages/Ticket/Card/TicketCard.vue          | 141 +-----------
 src/pages/Ticket/Card/TicketDescriptor.vue    | 109 ++++++++++
 .../Ticket/Card/TicketDescriptorPopover.vue   |  15 ++
 13 files changed, 454 insertions(+), 529 deletions(-)
 create mode 100644 src/pages/Customer/Card/CustomerDescriptor.vue
 create mode 100644 src/pages/Customer/Card/CustomerDescriptorPopover.vue
 create mode 100644 src/pages/Ticket/Card/TicketDescriptor.vue
 create mode 100644 src/pages/Ticket/Card/TicketDescriptorPopover.vue

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index e8fc2c675..34575cfb4 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,39 +1,41 @@
 <script setup>
-import { useSlots, computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useSlots } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 defineProps({
+    module: {
+        type: String,
+        required: true,
+    },
     data: {
         type: Object,
         required: true,
     },
+    description: {
+        type: String,
+        required: true,
+    },
 });
 const slots = useSlots();
-const route = useRoute();
 const { t } = useI18n();
-
-const module = computed(() => {
-    return route.matched[1];
-});
 </script>
 
 <template>
     <div class="descriptor">
         <div class="header bg-primary q-pa-sm">
-            <router-link :to="{ name: `${module.name}List` }">
+            <router-link :to="{ name: `${module}List` }">
                 <q-btn round flat dense size="md" icon="view_list" color="white">
-                    <q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
+                    <q-tooltip>{{ t('components.cardDescriptor.mainList') }}</q-tooltip>
                 </q-btn>
             </router-link>
-            <router-link :to="{ name: `${module.name}Summary`, params: { id: route.params.id } }">
+            <router-link :to="{ name: `${module}Summary`, params: { id: data.id } }">
                 <q-btn round flat dense size="md" icon="launch" color="white">
-                    <q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
+                    <q-tooltip>{{ t('components.cardDescriptor.summary') }}</q-tooltip>
                 </q-btn>
             </router-link>
 
             <q-btn v-if="slots.menu" size="md" icon="more_vert" color="white" round flat dense>
-                <q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
+                <q-tooltip>{{ t('components.cardDescriptor.moreOptions') }}</q-tooltip>
                 <q-menu>
                     <q-list>
                         <slot name="menu" />
@@ -42,7 +44,16 @@ const module = computed(() => {
             </q-btn>
         </div>
 
-        <div v-if="$props.data" class="q-py-sm">
+        <div v-if="$props.data" class="body q-py-sm">
+            <q-list>
+                <q-item-label header class="ellipsis text-h5" :lines="1">
+                    {{ $props.description }}
+                    <q-tooltip>{{ $props.description }}</q-tooltip>
+                </q-item-label>
+                <q-item dense>
+                    <q-item-label class="text-subtitle2" caption>#{{ data.id }}</q-item-label>
+                </q-item>
+            </q-list>
             <slot name="body" />
         </div>
 
@@ -66,13 +77,21 @@ const module = computed(() => {
     </div>
 </template>
 
+<style lang="scss">
+.body {
+    .q-card__actions {
+        justify-content: center;
+    }
+    .text-h5 {
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+}
+</style>
+
 <style lang="scss" scoped>
 .descriptor {
-    max-width: 256px;
-
-    h5 {
-        margin: 0 15px;
-    }
+    width: 256px;
 
     .header {
         display: flex;
@@ -80,10 +99,6 @@ const module = computed(() => {
         align-items: stretch;
     }
 
-    .q-card__actions {
-        justify-content: center;
-    }
-
     #descriptor-skeleton .q-card__actions {
         justify-content: space-between;
     }
diff --git a/src/css/app.scss b/src/css/app.scss
index 81037be75..3b40d40a2 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1,2 +1,11 @@
 // app global css in SCSS form
 @import './icons.scss';
+
+.link {
+    color: $primary;
+    cursor: pointer
+}
+
+.link:hover {
+    color: $orange-4;
+}
\ No newline at end of file
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 0b2cb4451..857df8d89 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -257,12 +257,13 @@ export default {
         smartCard: {
             noData: 'No data to display',
             openCard: 'View card',
-            openSummary: 'Open summary'
+            openSummary: 'Open summary',
+            viewDescription: 'View description'
         },
-        card: {
+        cardDescriptor: {
             mainList: 'Main list',
             summary: 'Summary',
-            moreOptions: 'More options',
+            moreOptions: 'More options'
         }
     },
 };
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 3c240c138..57ed01b0d 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -256,9 +256,10 @@ export default {
         smartCard: {
             noData: 'Sin datos que mostrar',
             openCard: 'Ver ficha',
-            openSummary: 'Abrir detalles'
+            openSummary: 'Abrir detalles',
+            viewDescription: 'Ver descripción'
         },
-        card: {
+        cardDescriptor: {
             mainList: 'Listado principal',
             summary: 'Resumen',
             moreOptions: 'Más opciones',
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 4ef530103..d85469571 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -1,215 +1,16 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import axios from 'axios';
 import { useState } from 'src/composables/useState';
-import { toDate } from 'src/filters';
-import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
+import ClaimDescriptor from './ClaimDescriptor.vue';
 
-const route = useRoute();
 const { t } = useI18n();
 const state = useState();
-
-onMounted(async () => {
-    await fetch();
-});
-const claim = ref();
-
-async function fetch() {
-    const entityId = route.params.id;
-    const filter = {
-        include: [
-            { relation: 'client' },
-            { relation: 'claimState' },
-            {
-                relation: 'claimState',
-            },
-            {
-                relation: 'worker',
-                scope: {
-                    include: { relation: 'user' },
-                },
-            },
-        ],
-    };
-    const options = { params: { filter } };
-    const { data } = await axios.get(`Claims/${entityId}`, options);
-
-    if (data) claim.value = data;
-}
-
-function stateColor(code) {
-    if (code === 'pending') return 'green';
-    if (code === 'managed') return 'orange';
-    if (code === 'resolved') return 'red';
-}
 </script>
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
-            <card-descriptor module="" :data="claim">
-                <template #menu>
-                    <q-item clickable v-ripple>Option 1</q-item>
-                    <q-item clickable v-ripple>Option 2</q-item>
-                </template>
-                <template #body>
-                    <q-list>
-                        <q-item-label header class="ellipsis text-h5" :lines="1">
-                            {{ claim.client.name }}
-                            <q-tooltip>{{ claim.client.name }}</q-tooltip>
-                        </q-item-label>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>{{ t('claim.card.claimId') }}</q-item-label>
-                                <q-item-label>#{{ claim.id }}</q-item-label>
-                            </q-item-section>
-                            <q-item-section>
-                                <q-item-label caption>{{ t('claim.card.created') }}</q-item-label>
-                                <q-item-label>{{ toDate(claim.created) }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>{{ t('claim.card.assignedTo') }}</q-item-label>
-                                <q-item-label>{{ claim.worker.user.name }}</q-item-label>
-                            </q-item-section>
-                            <q-item-section>
-                                <q-item-label caption>{{ t('claim.card.state') }}</q-item-label>
-                                <q-item-label>
-                                    <q-chip :color="stateColor(claim.claimState.code)" dense>
-                                        {{ claim.claimState.description }}
-                                    </q-chip>
-                                </q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>{{ t('claim.card.ticketId') }}</q-item-label>
-                                <q-item-label>{{ claim.ticketFk }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
-
-                    <q-card-actions>
-                        <q-btn
-                            size="md"
-                            icon="vn:client"
-                            color="primary"
-                            :to="{ name: 'CustomerCard', params: { id: claim.clientFk } }"
-                        >
-                            <q-tooltip>{{ t('claim.card.customerSummary') }}</q-tooltip>
-                        </q-btn>
-                        <q-btn
-                            size="md"
-                            icon="vn:ticket"
-                            color="primary"
-                            :to="{ name: 'TicketCard', params: { id: claim.ticketFk } }"
-                        >
-                            <q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
-                        </q-btn>
-                    </q-card-actions>
-                </template>
-            </card-descriptor>
-            <!-- <div class="header bg-primary q-pa-sm">
-                <router-link :to="{ path: '/claim/list' }">
-                    <q-btn round flat dense size="md" icon="view_list" color="white">
-                        <q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
-                    </q-btn>
-                </router-link>
-                <router-link :to="{ name: 'ClaimSummary', params: { id: route.params.id } }">
-                    <q-btn round flat dense size="md" icon="launch" color="white">
-                        <q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
-                    </q-btn>
-                </router-link>
-
-                <q-btn round flat dense size="md" icon="more_vert" color="white">
-                    <q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
-                    <q-menu>
-                        <q-list>
-                            <q-item clickable v-ripple>Option 1</q-item>
-                            <q-item clickable v-ripple>Option 2</q-item>
-                        </q-list>
-                    </q-menu>
-                </q-btn>
-            </div> -->
-
-            <!-- <div v-if="claim.client" class="q-py-sm"> -->
-            <!-- <q-list>
-                    <q-item-label header class="ellipsis text-h5" :lines="1">
-                        {{ claim.client.name }}
-                        <q-tooltip>{{ claim.client.name }}</q-tooltip>
-                    </q-item-label>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.card.claimId') }}</q-item-label>
-                            <q-item-label>#{{ claim.id }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.card.created') }}</q-item-label>
-                            <q-item-label>{{ toDate(claim.created) }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.card.assignedTo') }}</q-item-label>
-                            <q-item-label>{{ claim.worker.user.name }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.card.state') }}</q-item-label>
-                            <q-item-label>
-                                <q-chip :color="stateColor(claim.claimState.code)" dense>
-                                    {{ claim.claimState.description }}
-                                </q-chip>
-                            </q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.card.ticketId') }}</q-item-label>
-                            <q-item-label>{{ claim.ticketFk }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list> -->
-            <!-- <q-card-actions>
-                    <q-btn
-                        size="md"
-                        icon="vn:client"
-                        color="primary"
-                        :to="{ name: 'CustomerCard', params: { id: claim.clientFk } }"
-                    >
-                        <q-tooltip>{{ t('claim.card.customerSummary') }}</q-tooltip>
-                    </q-btn>
-                    <q-btn
-                        size="md"
-                        icon="vn:ticket"
-                        color="primary"
-                        :to="{ name: 'TicketCard', params: { id: claim.ticketFk } }"
-                    >
-                        <q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
-                    </q-btn>
-                </q-card-actions> -->
-            <!-- </div> -->
-            <!-- Skeleton -->
-            <!-- <div id="descriptor-skeleton" v-if="!claim.client">
-                <div class="col q-pl-sm q-pa-sm">
-                    <q-skeleton type="text" square height="45px" />
-                    <q-skeleton type="text" square height="18px" />
-                    <q-skeleton type="text" square height="18px" />
-                    <q-skeleton type="text" square height="18px" />
-                </div>
-
-                <q-card-actions>
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                </q-card-actions>
-            </div> -->
-
+            <claim-descriptor />
             <q-separator />
-
             <q-list>
                 <q-item :to="{ name: 'ClaimBasicData' }" clickable v-ripple>
                     <q-item-section avatar>
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index e69de29bb..331acd759 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -0,0 +1,118 @@
+<script setup>
+import { onMounted, computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toDate } from 'src/filters';
+import axios from 'axios';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
+import TicketDescriptorPopover from 'src/pages/Ticket/Card/TicketDescriptorPopover.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 claim = ref();
+async function fetch() {
+    const filter = {
+        include: [
+            { relation: 'client' },
+            { relation: 'claimState' },
+            {
+                relation: 'claimState',
+            },
+            {
+                relation: 'worker',
+                scope: {
+                    include: { relation: 'user' },
+                },
+            },
+        ],
+    };
+    const options = { params: { filter } };
+    const { data } = await axios.get(`Claims/${entityId.value}`, options);
+
+    if (data) claim.value = data;
+}
+
+function stateColor(code) {
+    if (code === 'pending') return 'green';
+    if (code === 'managed') return 'orange';
+    if (code === 'resolved') return 'red';
+}
+</script>
+
+<template>
+    <card-descriptor v-if="claim" module="Claim" :data="claim" :description="claim.client.name">
+        <template #menu>
+            <q-item clickable v-ripple>Option 1</q-item>
+            <q-item clickable v-ripple>Option 2</q-item>
+        </template>
+        <template #body>
+            <q-list>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('claim.card.created') }}</q-item-label>
+                        <q-item-label>{{ toDate(claim.created) }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('claim.card.state') }}</q-item-label>
+                        <q-item-label>
+                            <q-chip :color="stateColor(claim.claimState.code)" dense>
+                                {{ claim.claimState.description }}
+                            </q-chip>
+                        </q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('claim.card.ticketId') }}</q-item-label>
+                        <q-item-label class="link">
+                            {{ claim.ticketFk }}
+                            <q-popup-proxy>
+                                <ticket-descriptor-popover :id="claim.ticketFk" />
+                            </q-popup-proxy>
+                        </q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('claim.card.assignedTo') }}</q-item-label>
+                        <q-item-label>{{ claim.worker.user.name }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+            </q-list>
+
+            <q-card-actions>
+                <q-btn
+                    size="md"
+                    icon="vn:client"
+                    color="primary"
+                    :to="{ name: 'CustomerCard', params: { id: claim.clientFk } }"
+                >
+                    <q-tooltip>{{ t('claim.card.customerSummary') }}</q-tooltip>
+                </q-btn>
+                <q-btn
+                    size="md"
+                    icon="vn:ticket"
+                    color="primary"
+                    :to="{ name: 'TicketCard', params: { id: claim.ticketFk } }"
+                >
+                    <q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
+                </q-btn>
+            </q-card-actions>
+        </template>
+    </card-descriptor>
+</template>
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 57ea94137..9649d8ee3 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -2,11 +2,14 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+// import { useQuasar } from 'quasar';
 import Paginate from 'src/components/Paginate.vue';
 import { toDate } from 'src/filters/index';
 import ClaimSummary from './Card/ClaimSummary.vue';
+import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
 
 const router = useRouter();
+// const quasar = useQuasar();
 const { t } = useI18n();
 
 const filter = {
@@ -46,6 +49,16 @@ function showPreview(id) {
         claimId: id,
     };
 }
+
+// function showPopover($event, customer) {
+//     $event.preventDefault();
+//     quasar.dialog({
+//         component: CustomerDescriptorPopover,
+//         componentProps: {
+//             customer: customer,
+//         },
+//     });
+// }
 </script>
 
 <template>
@@ -55,7 +68,12 @@ function showPreview(id) {
                 <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)">
-                            <div class="text-h6">{{ row.name }}</div>
+                            <div class="text-h6 link">
+                                {{ row.client.name }}
+                                <q-popup-proxy>
+                                    <customer-descriptor-popover :customer="row.client" />
+                                </q-popup-proxy>
+                            </div>
                             <q-item-label caption>#{{ row.id }}</q-item-label>
                             <q-list>
                                 <q-item class="q-pa-none">
@@ -112,6 +130,12 @@ function showPreview(id) {
                             <q-btn flat round color="grey-7" icon="preview" @click="showPreview(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
                             </q-btn>
+                            <q-btn flat round color="grey-7" icon="vn:client">
+                                <q-tooltip>{{ t('components.smartCard.viewDescription') }}</q-tooltip>
+                                <q-popup-proxy>
+                                    <customer-descriptor-popover :customer="row.client" />
+                                </q-popup-proxy>
+                            </q-btn>
                         </q-card-actions>
                     </q-item>
                 </q-card>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index f1e05bcb4..e78602aae 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -1,152 +1,16 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import axios from 'axios';
-
 import { useState } from 'src/composables/useState';
-import { toCurrency } from 'src/filters';
+import CustomerDescriptor from './CustomerDescriptor.vue';
 
-const route = useRoute();
 const state = useState();
 const { t } = useI18n();
-
-onMounted(async () => {
-    await fetch();
-});
-
-const customer = ref(null);
-
-async function fetch() {
-    const entityId = route.params.id;
-
-    const { data } = await axios.get(`Clients/${entityId}/getCard`);
-
-    if (data) customer.value = data;
-}
 </script>
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
-        <q-scroll-area class="fit text-grey-8 descriptor">
-            <div class="header bg-primary q-pa-sm">
-                <router-link :to="{ path: '/customer/list' }">
-                    <q-btn round flat dense size="md" icon="view_list" color="white">
-                        <q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
-                    </q-btn>
-                </router-link>
-                <router-link :to="{ name: 'CustomerSummary', params: { id: route.params.id } }">
-                    <q-btn round flat dense size="md" icon="launch" color="white">
-                        <q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
-                    </q-btn>
-                </router-link>
-
-                <q-btn round flat dense size="md" icon="more_vert" color="white">
-                    <q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
-                    <!-- <q-menu>
-                        <q-list>
-                            <q-item clickable v-ripple>Option 1</q-item>
-                            <q-item clickable v-ripple>Option 2</q-item>
-                        </q-list>
-                    </q-menu> -->
-                </q-btn>
-            </div>
-
-            <div v-if="customer" class="q-py-sm">
-                <q-list>
-                    <q-item-label header class="ellipsis text-h5" :lines="1">
-                        {{ customer.name }}
-                        <q-tooltip>{{ customer.name }}</q-tooltip>
-                    </q-item-label>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('customer.card.customerId') }}</q-item-label>
-                            <q-item-label>#{{ customer.id }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('customer.card.salesPerson') }}</q-item-label>
-                            <q-item-label>{{ customer.salesPersonUser.name }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('customer.card.credit') }}</q-item-label>
-                            <q-item-label>{{ toCurrency(customer.credit) }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('customer.card.securedCredit') }}</q-item-label>
-                            <q-item-label>{{ toCurrency(customer.creditInsurance) }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('customer.card.payMethod') }}</q-item-label>
-                            <q-item-label>{{ customer.payMethod.name }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('customer.card.debt') }}</q-item-label>
-                            <q-item-label>{{ toCurrency(customer.debt) }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-                <q-card-actions class="q-gutter-md">
-                    <q-icon v-if="customer.isActive == false" name="vn:disabled" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.isDisabled') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.isFreezed == true" name="vn:frozen" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.debt > customer.credit" name="vn:risk" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.isTaxDataChecked == false" name="vn:no036" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.account.active == false" name="vn:noweb" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
-                    </q-icon>
-                </q-card-actions>
-                <!-- <q-card-actions>
-                    <q-btn size="md" icon="vn:ticket" color="primary">
-                        <q-tooltip>Ticket list</q-tooltip>
-                    </q-btn>
-
-                    <q-btn size="md" icon="vn:invoice-out" color="primary">
-                        <q-tooltip>Invoice Out list</q-tooltip>
-                    </q-btn>
-
-                    <q-btn size="md" icon="vn:basketadd" color="primary">
-                        <q-tooltip>Order list</q-tooltip>
-                    </q-btn>
-
-                    <q-btn size="md" icon="face" color="primary">
-                        <q-tooltip>View user</q-tooltip>
-                    </q-btn>
-
-                    <q-btn size="md" icon="expand_more" color="primary">
-                        <q-tooltip>More options</q-tooltip>
-                    </q-btn>
-                </q-card-actions> -->
-            </div>
-            <!-- Skeleton -->
-            <div id="descriptor-skeleton" v-if="!customer">
-                <div class="col q-pl-sm q-pa-sm">
-                    <q-skeleton type="text" square height="45px" />
-                    <q-skeleton type="text" square height="18px" />
-                    <q-skeleton type="text" square height="18px" />
-                    <q-skeleton type="text" square height="18px" />
-                </div>
-
-                <q-card-actions>
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                </q-card-actions>
-            </div>
-
+        <q-scroll-area class="fit">
+            <customer-descriptor />
             <q-separator />
-
             <q-list>
                 <q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple>
                     <q-item-section avatar>
@@ -179,26 +43,3 @@ async function fetch() {
         </q-page>
     </q-page-container>
 </template>
-
-<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/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
new file mode 100644
index 000000000..3f125a836
--- /dev/null
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -0,0 +1,111 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toCurrency } from 'src/filters';
+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 customer = ref();
+async function fetch() {
+    const { data } = await axios.get(`Clients/${entityId.value}/getCard`);
+
+    if (data) customer.value = data;
+}
+</script>
+
+<template>
+    <card-descriptor v-if="customer" module="Customer" :data="customer" :description="customer.name">
+        <template #menu>
+            <q-item clickable v-ripple>Option 1</q-item>
+            <q-item clickable v-ripple>Option 2</q-item>
+        </template>
+        <template #body>
+            <q-list>
+                <q-item v-if="customer.salesPersonUser">
+                    <q-item-section>
+                        <q-item-label caption>{{ t('customer.card.salesPerson') }}</q-item-label>
+                        <q-item-label>{{ customer.salesPersonUser.name }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('customer.card.credit') }}</q-item-label>
+                        <q-item-label>{{ toCurrency(customer.credit) }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('customer.card.securedCredit') }}</q-item-label>
+                        <q-item-label>{{ toCurrency(customer.creditInsurance) }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section v-if="customer.payMethod">
+                        <q-item-label caption>{{ t('customer.card.payMethod') }}</q-item-label>
+                        <q-item-label>{{ customer.payMethod.name }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('customer.card.debt') }}</q-item-label>
+                        <q-item-label>{{ toCurrency(customer.debt) }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+            </q-list>
+            <q-card-actions class="q-gutter-md">
+                <q-icon v-if="customer.isActive == false" name="vn:disabled" size="xs" color="primary">
+                    <q-tooltip>{{ t('customer.card.isDisabled') }}</q-tooltip>
+                </q-icon>
+                <q-icon v-if="customer.isFreezed == true" name="vn:frozen" size="xs" color="primary">
+                    <q-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
+                </q-icon>
+                <q-icon v-if="customer.debt > customer.credit" name="vn:risk" size="xs" color="primary">
+                    <q-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
+                </q-icon>
+                <q-icon v-if="customer.isTaxDataChecked == false" name="vn:no036" size="xs" color="primary">
+                    <q-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
+                </q-icon>
+                <q-icon v-if="customer.account.active == false" name="vn:noweb" size="xs" color="primary">
+                    <q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
+                </q-icon>
+            </q-card-actions>
+            <!-- <q-card-actions>
+                    <q-btn size="md" icon="vn:ticket" color="primary">
+                        <q-tooltip>Ticket list</q-tooltip>
+                    </q-btn>
+
+                    <q-btn size="md" icon="vn:invoice-out" color="primary">
+                        <q-tooltip>Invoice Out list</q-tooltip>
+                    </q-btn>
+
+                    <q-btn size="md" icon="vn:basketadd" color="primary">
+                        <q-tooltip>Order list</q-tooltip>
+                    </q-btn>
+
+                    <q-btn size="md" icon="face" color="primary">
+                        <q-tooltip>View user</q-tooltip>
+                    </q-btn>
+
+                    <q-btn size="md" icon="expand_more" color="primary">
+                        <q-tooltip>More options</q-tooltip>
+                    </q-btn>
+                </q-card-actions> -->
+        </template>
+    </card-descriptor>
+</template>
diff --git a/src/pages/Customer/Card/CustomerDescriptorPopover.vue b/src/pages/Customer/Card/CustomerDescriptorPopover.vue
new file mode 100644
index 000000000..78d1c5801
--- /dev/null
+++ b/src/pages/Customer/Card/CustomerDescriptorPopover.vue
@@ -0,0 +1,15 @@
+<script setup>
+import CustomerDescriptor from './CustomerDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+<template>
+    <q-card>
+        <customer-descriptor v-if="$props.id" :id="$props.id" />
+    </q-card>
+</template>
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 0e7ec6193..b5645c8cf 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -1,151 +1,16 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import axios from 'axios';
-
 import { useState } from 'src/composables/useState';
-import { toDate } from 'src/filters';
+import TicketDescriptor from './TicketDescriptor.vue';
 
-const route = useRoute();
 const state = useState();
 const { t } = useI18n();
-
-onMounted(async () => {
-    await fetch();
-});
-
-const ticket = ref(null);
-
-async function fetch() {
-    const entityId = route.params.id;
-
-    const { data } = await axios.get(`Tickets/${entityId}/summary`);
-
-    if (data) ticket.value = data;
-}
-
-function stateColor(state) {
-    if (state.code === 'OK') return 'text-green';
-    if (state.code === 'FREE') return 'text-blue-3';
-    if (state.alertLevel === 1) return 'text-primary';
-    if (state.alertLevel === 0) return 'text-red';
-}
 </script>
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
-        <q-scroll-area class="fit text-grey-8 descriptor">
-            <div class="header bg-primary q-pa-sm">
-                <router-link :to="{ path: '/ticket/list' }">
-                    <q-btn round flat dense size="md" icon="view_list" color="white">
-                        <q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
-                    </q-btn>
-                </router-link>
-                <router-link :to="{ name: 'TicketSummary', params: { id: route.params.id } }">
-                    <q-btn round flat dense size="md" icon="launch" color="white">
-                        <q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
-                    </q-btn>
-                </router-link>
-
-                <q-btn round flat dense size="md" icon="more_vert" color="white">
-                    <q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
-                    <!-- <q-menu>
-                        <q-list>
-                            <q-item clickable v-ripple>Option 1</q-item>
-                            <q-item clickable v-ripple>Option 2</q-item>
-                        </q-list>
-                    </q-menu> -->
-                </q-btn>
-            </div>
-
-            <div v-if="ticket" class="q-py-sm">
-                <q-list>
-                    <q-item-label header class="ellipsis text-h5" :lines="1">
-                        {{ ticket.nickname }}
-                        <q-tooltip>{{ ticket.nickname }}</q-tooltip>
-                    </q-item-label>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.card.ticketId') }}</q-item-label>
-                            <q-item-label>#{{ ticket.id }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.card.state') }}</q-item-label>
-                            <q-item-label :class="stateColor(ticket.ticketState.state)">
-                                {{ ticket.ticketState.state.name }}
-                            </q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.card.customerId') }}</q-item-label>
-                            <q-item-label>{{ ticket.clientFk }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.card.salesPerson') }}</q-item-label>
-                            <q-item-label>{{ ticket.client.salesPersonUser.name }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.card.agency') }}</q-item-label>
-                            <q-item-label>{{ ticket.agencyMode.name }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.card.shipped') }}</q-item-label>
-                            <q-item-label>{{ toDate(ticket.shipped) }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.card.warehouse') }}</q-item-label>
-                            <q-item-label>{{ ticket.warehouse.name }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-                <!-- <q-card-actions class="q-gutter-md">
-                    <q-icon v-if="customer.isActive == false" name="vn:disabled" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.isDisabled') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.isFreezed == true" name="vn:frozen" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.debt > customer.credit" name="vn:risk" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.isTaxDataChecked == false" name="vn:no036" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
-                    </q-icon>
-                    <q-icon v-if="customer.account.active == false" name="vn:noweb" size="xs" color="primary">
-                        <q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
-                    </q-icon>
-                </q-card-actions> -->
-                <q-card-actions>
-                    <q-btn size="md" icon="vn:client" color="primary">
-                        <q-tooltip>{{ t('ticket.card.customerCard') }}</q-tooltip>
-                    </q-btn>
-                </q-card-actions>
-            </div>
-            <!-- Skeleton -->
-            <div id="descriptor-skeleton" v-if="!ticket">
-                <div class="col q-pl-sm q-pa-sm">
-                    <q-skeleton type="text" square height="45px" />
-                    <q-skeleton type="text" square height="18px" />
-                    <q-skeleton type="text" square height="18px" />
-                    <q-skeleton type="text" square height="18px" />
-                </div>
-
-                <q-card-actions>
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                    <q-skeleton size="40px" />
-                </q-card-actions>
-            </div>
-
+        <q-scroll-area class="fit">
+            <ticket-descriptor />
             <q-separator />
-
             <q-list>
                 <q-item :to="{ name: 'TicketBoxing' }" clickable v-ripple>
                     <q-item-section avatar>
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
new file mode 100644
index 000000000..50927d64a
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -0,0 +1,109 @@
+<script setup>
+import { onMounted, computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toDate } from 'src/filters';
+import axios from 'axios';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
+import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.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 ticket = ref();
+async function fetch() {
+    const { data } = await axios.get(`Tickets/${entityId.value}/summary`);
+
+    if (data) ticket.value = data;
+}
+
+function stateColor(state) {
+    if (state.code === 'OK') return 'text-green';
+    if (state.code === 'FREE') return 'text-blue-3';
+    if (state.alertLevel === 1) return 'text-primary';
+    if (state.alertLevel === 0) return 'text-red';
+}
+</script>
+
+<template>
+    <card-descriptor v-if="ticket" module="Ticket" :data="ticket" :description="ticket.client.name">
+        <template #menu>
+            <q-item clickable v-ripple>Option 1</q-item>
+            <q-item clickable v-ripple>Option 2</q-item>
+        </template>
+        <template #body>
+            <q-list>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.card.ticketId') }}</q-item-label>
+                        <q-item-label>#{{ ticket.id }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.card.state') }}</q-item-label>
+                        <q-item-label :class="stateColor(ticket.ticketState.state)">
+                            {{ ticket.ticketState.state.name }}
+                        </q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.card.customerId') }}</q-item-label>
+                        <q-item-label class="link">
+                            {{ ticket.clientFk }}
+                            <q-popup-proxy>
+                                <customer-descriptor-popover :id="ticket.client.id" />
+                            </q-popup-proxy>
+                        </q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.card.salesPerson') }}</q-item-label>
+                        <q-item-label>{{ ticket.client.salesPersonUser.name }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.card.agency') }}</q-item-label>
+                        <q-item-label>{{ ticket.agencyMode.name }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.card.shipped') }}</q-item-label>
+                        <q-item-label>{{ toDate(ticket.shipped) }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.card.warehouse') }}</q-item-label>
+                        <q-item-label>{{ ticket.warehouse.name }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+            </q-list>
+
+            <q-card-actions>
+                <q-btn
+                    size="md"
+                    icon="vn:client"
+                    color="primary"
+                    :to="{ name: 'CustomerCard', params: { id: ticket.clientFk } }"
+                >
+                    <q-tooltip>{{ t('ticket.card.customerCard') }}</q-tooltip>
+                </q-btn>
+            </q-card-actions>
+        </template>
+    </card-descriptor>
+</template>
diff --git a/src/pages/Ticket/Card/TicketDescriptorPopover.vue b/src/pages/Ticket/Card/TicketDescriptorPopover.vue
new file mode 100644
index 000000000..891ffb3a8
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketDescriptorPopover.vue
@@ -0,0 +1,15 @@
+<script setup>
+import TicketDescriptor from './TicketDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+<template>
+    <q-card>
+        <ticket-descriptor v-if="$props.id" :id="$props.id" />
+    </q-card>
+</template>

From d28b9f187ca0f847e19f174de8f487b4d8e4a11f Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 8 Nov 2022 14:43:04 +0100
Subject: [PATCH 3/6] Summaries have now a dialog component

---
 src/pages/Claim/Card/ClaimSummary.vue         |  4 +-
 src/pages/Claim/Card/ClaimSummaryDialog.vue   | 21 ++++++++++
 src/pages/Claim/ClaimList.vue                 | 38 ++++++-------------
 src/pages/Customer/Card/CustomerSummary.vue   |  4 +-
 .../Customer/Card/CustomerSummaryDialog.vue   | 21 ++++++++++
 src/pages/Customer/CustomerList.vue           | 26 ++++++-------
 6 files changed, 68 insertions(+), 46 deletions(-)
 create mode 100644 src/pages/Claim/Card/ClaimSummaryDialog.vue
 create mode 100644 src/pages/Customer/Card/CustomerSummaryDialog.vue

diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 2f9f28e49..b02137f22 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -12,13 +12,13 @@ const route = useRoute();
 const { t } = useI18n();
 
 const $props = defineProps({
-    claimId: {
+    id: {
         type: Number,
         default: 0,
     },
 });
 
-const entityId = computed(() => $props.claimId || route.params.id);
+const entityId = computed(() => $props.id || route.params.id);
 
 const claim = ref(null);
 const salesClaimed = ref(null);
diff --git a/src/pages/Claim/Card/ClaimSummaryDialog.vue b/src/pages/Claim/Card/ClaimSummaryDialog.vue
new file mode 100644
index 000000000..e0b4d22c1
--- /dev/null
+++ b/src/pages/Claim/Card/ClaimSummaryDialog.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import ClaimSummary from './ClaimSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <q-dialog ref="dialogRef" @hide="onDialogHide">
+        <claim-summary v-if="$props.id" :id="$props.id" />
+    </q-dialog>
+</template>
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 9649d8ee3..93c656d38 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -1,15 +1,14 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-// import { useQuasar } from 'quasar';
+import { useQuasar } from 'quasar';
 import Paginate from 'src/components/Paginate.vue';
 import { toDate } from 'src/filters/index';
-import ClaimSummary from './Card/ClaimSummary.vue';
+import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
 import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
 
 const router = useRouter();
-// const quasar = useQuasar();
+const quasar = useQuasar();
 const { t } = useI18n();
 
 const filter = {
@@ -39,26 +38,14 @@ function navigate(id) {
     router.push({ path: `/claim/${id}` });
 }
 
-const preview = ref({
-    shown: false,
-});
-
-function showPreview(id) {
-    preview.value.shown = true;
-    preview.value.data = {
-        claimId: id,
-    };
+function viewSummary(id) {
+    quasar.dialog({
+        component: ClaimSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
 }
-
-// function showPopover($event, customer) {
-//     $event.preventDefault();
-//     quasar.dialog({
-//         component: CustomerDescriptorPopover,
-//         componentProps: {
-//             customer: customer,
-//         },
-//     });
-// }
 </script>
 
 <template>
@@ -127,7 +114,7 @@ function showPreview(id) {
                             <q-btn flat round color="orange" 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="showPreview(row.id)">
+                            <q-btn flat round color="grey-7" icon="preview" @click="viewSummary(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
                             </q-btn>
                             <q-btn flat round color="grey-7" icon="vn:client">
@@ -142,7 +129,4 @@ function showPreview(id) {
             </template>
         </paginate>
     </q-page>
-    <q-dialog v-model="preview.shown">
-        <claim-summary :claim-id="preview.data.claimId" />
-    </q-dialog>
 </template>
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index dd06bd52d..7151b291e 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -12,13 +12,13 @@ const route = useRoute();
 const { t } = useI18n();
 
 const $props = defineProps({
-    customerId: {
+    id: {
         type: Number,
         default: 0,
     },
 });
 
-const entityId = computed(() => $props.customerId || route.params.id);
+const entityId = computed(() => $props.id || route.params.id);
 
 const customer = ref(null);
 function fetch() {
diff --git a/src/pages/Customer/Card/CustomerSummaryDialog.vue b/src/pages/Customer/Card/CustomerSummaryDialog.vue
new file mode 100644
index 000000000..84ecaf084
--- /dev/null
+++ b/src/pages/Customer/Card/CustomerSummaryDialog.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import CustomerSummary from './CustomerSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <q-dialog ref="dialogRef" @hide="onDialogHide">
+        <customer-summary v-if="$props.id" :id="$props.id" />
+    </q-dialog>
+</template>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 1cba2f7b0..342eda587 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -1,26 +1,25 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
 import Paginate from 'src/components/Paginate.vue';
-import CustomerSummary from './Card/CustomerSummary.vue';
+import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
 
 const router = useRouter();
+const quasar = useQuasar();
 const { t } = useI18n();
 
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
 
-const preview = ref({
-    shown: false,
-});
-
-function showPreview(id) {
-    preview.value.shown = true;
-    preview.value.data = {
-        customerId: id,
-    };
+function viewSummary(id) {
+    quasar.dialog({
+        component: CustomerSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
 }
 </script>
 
@@ -73,7 +72,7 @@ function showPreview(id) {
                             <q-btn flat round color="orange" 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="showPreview(row.id)">
+                            <q-btn flat round color="grey-7" icon="preview" @click="viewSummary(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
                             </q-btn>
                             <!-- <q-btn flat round color="grey-7" icon="vn:ticket">
@@ -85,7 +84,4 @@ function showPreview(id) {
             </template>
         </paginate>
     </q-page>
-    <q-dialog v-model="preview.shown">
-        <customer-summary :customer-id="preview.data.customerId" />
-    </q-dialog>
 </template>

From 2118854d527a3dc2fc231474aa5e96b64d6540d3 Mon Sep 17 00:00:00 2001
From: Joan <jsanchezbarruguer@gmail.com>
Date: Wed, 9 Nov 2022 07:35:33 +0100
Subject: [PATCH 4/6] Disabled descriptor menus

---
 quasar.config.js                               | 1 -
 src/pages/Claim/Card/ClaimDescriptor.vue       | 4 ----
 src/pages/Customer/Card/CustomerDescriptor.vue | 4 ++--
 src/pages/Ticket/Card/TicketDescriptor.vue     | 4 ++--
 4 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/quasar.config.js b/quasar.config.js
index d04c43cf8..828633cf6 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -86,7 +86,6 @@ module.exports = configure(function (ctx) {
                 type: 'http',
             },
             port: 8080,
-            open: true, // opens browser window automatically
             proxy: {
                 '/api': {
                     target: 'http://0.0.0.0:3000',
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 331acd759..2200c8c23 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -58,10 +58,6 @@ function stateColor(code) {
 
 <template>
     <card-descriptor v-if="claim" module="Claim" :data="claim" :description="claim.client.name">
-        <template #menu>
-            <q-item clickable v-ripple>Option 1</q-item>
-            <q-item clickable v-ripple>Option 2</q-item>
-        </template>
         <template #body>
             <q-list>
                 <q-item>
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 3f125a836..62804d43a 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -35,10 +35,10 @@ async function fetch() {
 
 <template>
     <card-descriptor v-if="customer" module="Customer" :data="customer" :description="customer.name">
-        <template #menu>
+        <!-- <template #menu>
             <q-item clickable v-ripple>Option 1</q-item>
             <q-item clickable v-ripple>Option 2</q-item>
-        </template>
+        </template> -->
         <template #body>
             <q-list>
                 <q-item v-if="customer.salesPersonUser">
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index 50927d64a..147406166 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -43,10 +43,10 @@ function stateColor(state) {
 
 <template>
     <card-descriptor v-if="ticket" module="Ticket" :data="ticket" :description="ticket.client.name">
-        <template #menu>
+        <!-- <template #menu>
             <q-item clickable v-ripple>Option 1</q-item>
             <q-item clickable v-ripple>Option 2</q-item>
-        </template>
+        </template> -->
         <template #body>
             <q-list>
                 <q-item>

From 4e0668006b56f0676509e014845eb1e8ca908cc0 Mon Sep 17 00:00:00 2001
From: Joan <jsanchezbarruguer@gmail.com>
Date: Wed, 9 Nov 2022 08:26:55 +0100
Subject: [PATCH 5/6] Updated unit test

---
 .../{useModule.spec.js => useNavigation.spec.js}          | 3 ++-
 src/pages/Ticket/Card/TicketDescriptor.vue                | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)
 rename src/composables/__tests__/{useModule.spec.js => useNavigation.spec.js} (94%)

diff --git a/src/composables/__tests__/useModule.spec.js b/src/composables/__tests__/useNavigation.spec.js
similarity index 94%
rename from src/composables/__tests__/useModule.spec.js
rename to src/composables/__tests__/useNavigation.spec.js
index d706612cd..e633d46c4 100644
--- a/src/composables/__tests__/useModule.spec.js
+++ b/src/composables/__tests__/useNavigation.spec.js
@@ -32,7 +32,8 @@ describe('useNavigation', () => {
             name: 'CustomerCreate',
             title: 'createCustomer',
             icon: 'vn:addperson',
-            stateName: 'CustomerCreate'
+            stateName: 'CustomerCreate',
+            roles: ['developer']
         }];
 
         const secondMenuItem = navigation.modules.value[1]
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index 147406166..ce875d1cd 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -78,8 +78,8 @@ function stateColor(state) {
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-item-label caption>{{ t('ticket.card.agency') }}</q-item-label>
-                        <q-item-label>{{ ticket.agencyMode.name }}</q-item-label>
+                        <q-item-label caption>{{ t('ticket.card.warehouse') }}</q-item-label>
+                        <q-item-label>{{ ticket.warehouse.name }}</q-item-label>
                     </q-item-section>
                     <q-item-section>
                         <q-item-label caption>{{ t('ticket.card.shipped') }}</q-item-label>
@@ -88,8 +88,8 @@ function stateColor(state) {
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-item-label caption>{{ t('ticket.card.warehouse') }}</q-item-label>
-                        <q-item-label>{{ ticket.warehouse.name }}</q-item-label>
+                        <q-item-label caption>{{ t('ticket.card.agency') }}</q-item-label>
+                        <q-item-label>{{ ticket.agencyMode.name }}</q-item-label>
                     </q-item-section>
                 </q-item>
             </q-list>

From 821ebd5d2eaf9af3bb8034f23b1fced2b8c287d3 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Wed, 9 Nov 2022 08:29:04 +0100
Subject: [PATCH 6/6] Removed bordered header

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

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index d352d7f78..e5c5676f7 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -17,7 +17,7 @@ function onToggleDrawer() {
 </script>
 
 <template>
-    <q-header class="bg-dark" color="white" elevated bordered>
+    <q-header class="bg-dark" color="white" elevated>
         <q-toolbar class="q-py-sm q-px-md">
             <q-btn flat @click="onToggleDrawer()" round dense icon="menu">
                 <q-tooltip bottom anchor="bottom right">