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] 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>