refs 6105 VnNotes and ClaimNotes refactored

Reviewed-on: #84
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/components/LeftMenu.vue

@@ -31,7 +31,7 @@ function findMatches(search, item) {
     const matches = [];
     function findRoute(search, item) {
         for (const child of item.children) {
-            if (search.indexOf(child.name) > -1) {
+            if (search?.indexOf(child.name) > -1) {
                 matches.push(child);
             } else if (child.children) {
                 findRoute(search, child);

src/components/ui/AvatarPicture.vue

@@ -8,7 +8,7 @@ const session = useSession();
 const token = session.getToken();
 </script>
 <template>
-    <div class="avatar-picture">
+    <div class="avatar-picture column items-center">
         <QAvatar color="orange">
             <QImg
                 :src="`/api/Images/user/160x160/${$props.worker}/download?access_token=${token}`"
@@ -24,13 +24,3 @@ const token = session.getToken();
         </div>
     </div>
 </template>
-<style lang="scss" scoped>
-.avatar-picture {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .description {
-        text-align: center;
-    }
-}
-</style>

src/components/ui/CardDescriptor.vue

@@ -111,25 +111,23 @@ watch($props, async () => {
                 <QList dense>
                     <QItemLabel header class="ellipsis text-h5" :lines="1">
                         <div class="title">
-                            <span v-if="$props.title">
+                            <span v-if="$props.title" :title="$props.title">
                                 {{ $props.title }}
-                                <QTooltip>{{ $props.title }}</QTooltip>
                             </span>
                             <slot v-else name="description" :entity="entity">
-                                <span>
+                                <span :title="entity.name">
                                     {{ entity.name }}
-                                    <QTooltip>{{ entity.name }}</QTooltip>
                                 </span>
                             </slot>
                         </div>
                     </QItemLabel>
                     <QItem dense>
-                        <QItemLabel class="subtitle text-white" caption>
+                        <QItemLabel class="subtitle" caption>
                             #{{ $props.subtitle ?? entity.id }}
                         </QItemLabel>
                     </QItem>
                 </QList>
-                <div class="list-box">
+                <div class="list-box q-mt-xs">
                     <slot name="body" :entity="entity" />
                 </div>
             </div>
@@ -163,11 +161,12 @@ watch($props, async () => {
         display: flex;
         padding: 2px 16px;
         .label {
-            color: $label-color;
+            color: var(--vn-label);
             font-size: 12px;
             width: 47%;
         }
         .value {
+            color: var(--vn-text);
             font-size: 14px;
             margin-left: 12px;
             width: 47%;
@@ -184,22 +183,26 @@ watch($props, async () => {
 
 <style lang="scss" scoped>
 .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
     span {
         color: $primary;
         font-weight: bold;
     }
 }
 .subtitle {
+    color: var(--vn-text);
     font-size: 16px;
+    margin-bottom: 15px;
 }
 .list-box {
     width: 90%;
-    background-color: rgba(87, 86, 86, 0.2);
-    margin: 20px 10px 0 10px;
+    background-color: var(--vn-gray);
+    margin: 10px auto;
     padding: 10px 5px 10px 0px;
     border-radius: 8px;
     .q-item__label {
-        color: $label-color;
+        color: var(--vn-label);
     }
 }
 .descriptor {

src/components/ui/CardList.vue

@@ -0,0 +1,82 @@
+<script setup>
+const $props = defineProps({
+    id: { type: Number, default: null },
+    title: { type: String, default: null },
+});
+</script>
+<template>
+    <QCard class="card q-mb-md cursor-pointer q-hoverable bg-white-7 q-pa-lg">
+        <div>
+            <slot name="title">
+                <div class="title text-primary text-weight-bold text-h5">
+                    {{ $props.title ?? `#${$props.id}` }}
+                </div>
+            </slot>
+            <div class="card-list-body row">
+                <div class="list-items row flex-wrap-wrap q-mt-md">
+                    <slot name="list-items" />
+                </div>
+
+                <div class="actions column justify-center">
+                    <slot name="actions" />
+                </div>
+            </div>
+        </div>
+    </QCard>
+</template>
+<style lang="scss">
+.card-list-body {
+    .vn-label-value {
+        display: flex;
+        justify-content: flex-start;
+        gap: 2%;
+        width: 50%;
+        .label {
+            width: 30%;
+            color: var(--vn-label);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .value {
+            width: 60%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+.actions {
+    .q-btn {
+        width: 30px;
+    }
+    .q-icon {
+        color: $primary;
+        font-size: 25px;
+    }
+}
+@media (max-width: $breakpoint-xs) {
+    .card-list-body {
+        .vn-label-value {
+            width: 100%;
+        }
+    }
+}
+</style>
+
+<style lang="scss" scoped>
+.card {
+    transition: background-color 0.2s;
+}
+.card:hover {
+    background-color: var(--vn-gray);
+}
+.list-items {
+    width: 90%;
+}
+@media (max-width: $breakpoint-xs) {
+    .list-items {
+        width: 85%;
+    }
+}
+</style>

src/components/ui/CardSummary.vue

@@ -2,6 +2,8 @@
 import { onMounted, ref, watch } from 'vue';
 import axios from 'axios';
 import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+
 onMounted(() => fetch());
 
 const entity = ref();
@@ -41,15 +43,21 @@ watch(props, async () => {
 
 <template>
     <div class="summary container">
-        <QCard>
+        <QCard class="cardSummary">
             <SkeletonSummary v-if="!entity" />
             <template v-if="entity">
-                <div class="header bg-primary q-pa-sm q-mb-md">
+                <div class="summaryHeader bg-primary q-pa-md text-weight-bolder">
+                    <slot name="header-left">
+                        <span></span>
+                    </slot>
                     <slot name="header" :entity="entity">
-                        {{ entity.id }} - {{ entity.name }}
+                        <VnLv :label="`${entity.id} -`" :value="entity.name" />
+                    </slot>
+                    <slot name="header-right">
+                        <span></span>
                     </slot>
                 </div>
-                <div class="body q-pa-md q-mb-md">
+                <div class="summaryBody row q-mb-md">
                     <slot name="body" :entity="entity" />
                 </div>
             </template>
@@ -63,57 +71,87 @@ watch(props, async () => {
     justify-content: center;
 }
 
-.summary {
-    .q-card {
-        width: 100%;
-        max-width: 1200px;
-    }
-
-    .negative {
-        color: red;
-    }
-    .q-list {
-        .q-item__label--header {
-            display: flex;
-            justify-content: space-between;
-
-            a {
-                color: $primary;
-            }
-        }
-    }
-
-    .body > .q-card__section.row {
-        flex-wrap: wrap;
-
-        & > .col {
-            min-width: 250px;
-        }
-    }
-
-    .header {
+.cardSummary {
+    width: 100%;
+    .summaryHeader {
         text-align: center;
-        font-size: 18px;
+        font-size: 20px;
+        display: flex;
+        justify-content: space-between;
     }
+    .summaryBody {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+        gap: 15px;
+        padding: 15px;
 
-    #slider-container {
-        max-width: 80%;
-        margin: 0 auto;
+        > .q-card.vn-one {
+            flex: 1;
+        }
+        > .q-card.vn-two {
+            flex: 2;
+        }
+        > .q-card.vn-three {
+            flex: 3;
+        }
+        > .q-card.vn-max {
+            width: 100%;
+        }
 
-        .q-slider {
-            .q-slider__marker-labels:nth-child(1) {
-                transform: none;
+        > .q-card {
+            width: 100%;
+            background-color: var(--vn-gray);
+            padding: 15px;
+            font-size: 16px;
+            min-width: 275px;
+
+            .vn-label-value {
+                display: flex;
+                flex-direction: row;
+                margin-top: 5px;
+                .label {
+                    color: var(--vn-label);
+                    width: 10em;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    margin-right: 10px;
+                }
+                .value {
+                    color: var(--vn-text);
+                    width: max-content;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
             }
-            .q-slider__marker-labels:nth-child(2) {
-                transform: none;
-                left: auto !important;
-                right: 0%;
+            .header {
+                color: $primary;
+                font-weight: bold;
+                margin-bottom: 25px;
+                font-size: 20px;
+                display: inline-block;
+            }
+            .header.link:hover {
+                color: lighten($primary, 20%);
             }
         }
     }
-}
 
-.q-dialog .summary {
-    max-width: 1200px;
+    @media (max-width: $breakpoint-xs) {
+        .summaryBody {
+            padding: 0;
+        }
+    }
+}
+</style>
+<style lang="scss" scoped>
+.summaryHeader .vn-label-value {
+    display: flex;
+    flex-direction: row;
+}
+.summaryHeader {
+    color: $white;
 }
 </style>

src/components/ui/VnLv.vue

@@ -1,12 +1,14 @@
 <script setup>
 import { computed } from 'vue';
+import { dashIfEmpty } from 'src/filters';
+
 const $props = defineProps({
     label: { type: String, default: null },
-    value: {
-        type: [String, Boolean],
-        default: null,
-    },
+    value: { type: [Number, String, Boolean], default: null },
+    titleLabel: { type: String, default: null },
+    titleValue: { type: [Number, String, Boolean], default: null },
     info: { type: String, default: null },
+    dash: { type: Boolean, default: true },
 });
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
 </script>
@@ -14,18 +16,21 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
     <div class="vn-label-value">
         <div v-if="$props.label || $slots.label" class="label">
             <slot name="label">
-                <span>{{ $props.label }}</span>
+                <span :title="$props.titleLabel ?? $props.label">{{ $props.label }}</span>
             </slot>
         </div>
-        <div v-if="$props.value || $slots.value" class="value">
+        <div class="value">
             <span v-if="isBooleanValue">
                 <QIcon
                     :name="$props.value ? `check` : `close`"
                     :color="$props.value ? `positive` : `negative`"
+                    size="sm"
                 />
             </span>
             <slot v-else name="value">
-                <span :title="$props.value">{{ $props.value }}</span>
+                <span :title="$props.value">
+                    {{ $props.dash ? dashIfEmpty($props.value) : $props.value }}
+                </span>
             </slot>
         </div>
         <div class="info" v-if="$props.info">

src/components/ui/VnNotes.vue

@@ -4,8 +4,8 @@ import AvatarPicture from 'src/components/ui/AvatarPicture.vue';
 import { toDateHour } from 'src/filters';
 import { ref } from 'vue';
 import axios from 'axios';
-import FetchData from 'components/FetchData.vue';
 import { useI18n } from 'vue-i18n';
+import VnPaginate from './VnPaginate.vue';
 
 const $props = defineProps({
     id: { type: String, required: true },
@@ -15,36 +15,75 @@ const $props = defineProps({
     addNote: { type: Boolean, default: false },
 });
 const { t } = useI18n();
-const notes = ref([]);
 const noteModal = ref(false);
 const newNote = ref('');
-const claimObservationRef = ref();
-
-function setNotes(data) {
-    notes.value = data;
-}
+const vnPaginateRef = ref();
 
 async function fetch() {
     const body = $props.body;
     Object.assign(body, { text: newNote.value });
     await axios.post($props.url, body);
-    claimObservationRef.value.fetch();
+    vnPaginateRef.value.fetch();
 }
 </script>
 <template>
-    <FetchData
-        :url="$props.url"
-        :filter="$props.filter"
-        @on-fetch="setNotes"
-        auto-load
-        ref="claimObservationRef"
-    />
-    <div class="notes" ref="notesContainer">
+    <div class="notes">
+        <VnPaginate
+            :data-key="$props.url"
+            :url="$props.url"
+            order="created DESC"
+            :limit="20"
+            :filter="$props.filter"
+            auto-load
+            ref="vnPaginateRef"
+        >
+            <template #body="{ rows }">
+                <QCard class="q-pa-md q-ma-md" v-for="(note, index) in rows" :key="index">
+                    <div class="picture q-pa-sm">
+                        <slot name="picture">
+                            <AvatarPicture :worker="note.workerFk">
+                                <template #description>
+                                    <span class="link">
+                                        {{
+                                            `${note.worker.firstName} ${note.worker.lastName}`
+                                        }}
+                                    </span>
+                                    <WorkerDescriptorProxy :id="note.worker.id" />
+                                </template>
+                            </AvatarPicture>
+                        </slot>
+                    </div>
+                    <div class="text">
+                        <slot name="text">
+                            {{ note.text }}
+                        </slot>
+                    </div>
+                    <div class="actions">
+                        <slot name="actions">
+                            <div>
+                                {{ toDateHour(note.created) }}
+                            </div>
+                        </slot>
+                    </div>
+                </QCard>
+            </template>
+        </VnPaginate>
+        <QPageSticky position="bottom-right" :offset="[25, 25]">
+            <QBtn
+                v-if="addNote"
+                class="add-btn"
+                color="primary"
+                icon="add"
+                size="md"
+                round
+                @click="noteModal = true"
+            />
+        </QPageSticky>
         <QDialog v-model="noteModal" persistent>
-            <QCard class="note-dialog q-pa-sm">
-                <QCardSection class="note-dialog__header">
-                    <div class="note-dialog__title">
-                        <QIcon name="draft" class="note-dialog__title-icon" />
+            <QCard class="note-dialog column q-pa-sm">
+                <QCardSection class="note-dialog__header row self-start justify-between">
+                    <div class="note-dialog__title row items-center text-primary text-h6">
+                        <QIcon name="draft" class="note-dialog__title-icon q-mr-sm" />
                         <div class="text-h6 note-dialog__title-text">
                             {{ t('Add note') }}
                         </div>
@@ -61,7 +100,7 @@ async function fetch() {
                         v-model="newNote"
                     ></QInput>
                 </QCardSection>
-                <QCardActions class="note-dialog__actions q-mr-md">
+                <QCardActions class="note-dialog__actions self-end q-mr-md">
                     <QBtn
                         flat
                         :label="t('globals.close')"
@@ -77,76 +116,23 @@ async function fetch() {
                 </QCardActions>
             </QCard>
         </QDialog>
-        <QCard class="q-pa-md" v-for="(note, index) in notes" :key="index">
-            <div class="picture q-pa-sm">
-                <slot name="picture">
-                    <AvatarPicture :worker="note.workerFk">
-                        <template #description>
-                            <span class="link">
-                                {{ `${note.worker.firstName} ${note.worker.lastName}` }}
-                            </span>
-                            <WorkerDescriptorProxy :id="note.worker.id" />
-                        </template>
-                    </AvatarPicture>
-                </slot>
-            </div>
-            <div class="text">
-                <slot name="text">
-                    {{ note.text }}
-                </slot>
-            </div>
-            <div class="actions">
-                <slot name="actions">
-                    <div>
-                        {{ toDateHour(note.created) }}
-                    </div>
-                </slot>
-            </div>
-        </QCard>
-        <QBtn
-            v-if="addNote"
-            class="add-btn"
-            color="primary"
-            round
-            @click="noteModal = true"
-        >
-            <QIcon name="add" size="md"></QIcon>
-        </QBtn>
     </div>
 </template>
 <style lang="scss" scoped>
 .q-card {
-    min-width: 350px;
+    min-width: 340px;
 }
 .note-dialog {
-    display: flex;
-    flex-direction: column;
     .note-dialog__header {
         width: 100%;
-        align-self: flex-start;
-        display: flex;
-        justify-content: space-between;
-    }
-    .note-dialog__title {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        color: $primary;
-        font-size: large;
     }
     .note-dialog__content {
         width: 95%;
     }
-    .note-dialog__actions {
-        align-self: flex-end;
-    }
 }
 .add-btn {
     width: 70px;
     height: 70px;
-    position: sticky;
-    left: 95%;
-    bottom: 2%;
 }
 </style>
 <i18n>

src/components/ui/VnPaginate.vue

@@ -49,6 +49,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['onFetch', 'onPaginate']);
+defineExpose({ fetch });
 const isLoading = ref(false);
 const pagination = ref({
     sortBy: props.order,
@@ -82,7 +83,6 @@ async function fetch() {
     if (!arrayData.hasMoreData.value) {
         isLoading.value = false;
     }
-
     emit('onFetch', store.data);
 }
 

src/css/app.scss

@@ -26,13 +26,16 @@ select:-webkit-autofill {
 
 body.body--light {
     .q-header .q-toolbar {
-        background-color: white;
+        background-color: $white;
         color: #555;
     }
-
-    .summary {
-        .header {
-            color: white;
-        }
-    }
+    --vn-text: #000000;
+    --vn-gray: #f5f5f5;
+    --vn-label: #5f5f5f;
+}
+
+body.body--dark {
+    --vn-text: #ffffff;
+    --vn-gray: #313131;
+    --vn-label: #a8a8a8;
 }

src/css/quasar.variables.scss

@@ -15,6 +15,7 @@
 $primary: #ec8916;
 $secondary: #26a69a;
 $accent: #9c27b0;
+$white: #fff;
 
 $positive: #21ba45;
 $negative: #c10015;
@@ -46,5 +47,3 @@ $dark-shadow-color: #000;
 $dark: #292929;
 $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
 $spacing-md: 16px;
-
-$label-color: rgba(255, 255, 255, 0.6);

src/i18n/en/index.js

@@ -33,6 +33,9 @@ export default {
         rowRemoved: 'Row removed',
         pleaseWait: 'Please wait...',
         noPinnedModules: 'You have dont have any pinned modules',
+        summary: {
+            basicData: 'Basic data',
+        },
     },
     errors: {
         statusUnauthorized: 'Access denied',
@@ -154,6 +157,8 @@ export default {
             balanceDue: 'Balance due',
             balanceDueInfo: 'Deviated invoices minus payments',
             recoverySince: 'Recovery since',
+            businessType: 'Business Type',
+            city: 'City',
         },
         basicData: {
             socialName: 'Fiscal name',
@@ -175,6 +180,7 @@ export default {
             basicData: 'Basic Data',
             boxing: 'Boxing',
             sms: 'Sms',
+            notes: 'Notes',
         },
         list: {
             nickname: 'Nickname',
@@ -244,6 +250,7 @@ export default {
             requester: 'Requester',
             atender: 'Atender',
             request: 'Request',
+            weight: 'Weight',
             goTo: 'Go to',
         },
     },
@@ -340,11 +347,14 @@ export default {
         list: {
             ref: 'Reference',
             issued: 'Issued',
+            shortIssued: 'Issued',
             amount: 'Amount',
             client: 'Client',
             created: 'Created',
+            shortCreated: 'Created',
             company: 'Company',
             dued: 'Due date',
+            shortDued: 'Due date',
         },
         card: {
             issued: 'Issued',
@@ -411,6 +421,7 @@ export default {
             userId: 'User ID',
             role: 'Role',
             sipExtension: 'Extension',
+            locker: 'Locker',
         },
         notificationsManager: {
             activeNotifications: 'Active notifications',

src/i18n/es/index.js

@@ -33,6 +33,9 @@ export default {
         rowRemoved: 'Fila eliminada',
         pleaseWait: 'Por favor, espera...',
         noPinnedModules: 'No has fijado ningún módulo',
+        summary: {
+            basicData: 'Datos básicos',
+        },
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
@@ -119,7 +122,7 @@ export default {
             province: 'Provincia',
             country: 'País',
             street: 'Calle',
-            isEqualizated: 'Equalizado',
+            isEqualizated: 'Recargo de equivalencia',
             isActive: 'Activo',
             invoiceByAddress: 'Facturar por consignatario',
             verifiedData: 'Datos verificados',
@@ -153,6 +156,8 @@ export default {
             balanceDue: 'Saldo vencido',
             balanceDueInfo: 'Facturas fuera de plazo menos recibos',
             recoverySince: 'Recobro desde',
+            businessType: 'Tipo de negocio',
+            city: 'Población',
         },
         basicData: {
             socialName: 'Nombre fiscal',
@@ -174,6 +179,7 @@ export default {
             basicData: 'Datos básicos',
             boxing: 'Encajado',
             sms: 'Sms',
+            notes: 'Notas',
         },
         list: {
             nickname: 'Alias',
@@ -243,6 +249,7 @@ export default {
             requester: 'Solicitante',
             atender: 'Comprador',
             request: 'Petición de compra',
+            weight: 'Peso',
             goTo: 'Ir a',
         },
     },
@@ -340,11 +347,14 @@ export default {
         list: {
             ref: 'Referencia',
             issued: 'Fecha emisión',
+            shortIssued: 'F. emisión',
             amount: 'Importe',
             client: 'Cliente',
             created: 'Fecha creación',
+            shortCreated: 'F. creación',
             company: 'Empresa',
             dued: 'Fecha vencimineto',
+            shortDued: 'F. vencimiento',
         },
         card: {
             issued: 'Fecha emisión',
@@ -411,6 +421,7 @@ export default {
             userId: 'ID del usuario',
             role: 'Rol',
             sipExtension: 'Extensión',
+            locker: 'Taquilla',
         },
         notificationsManager: {
             activeNotifications: 'Notificaciones activas',

src/pages/Claim/Card/ClaimNotes.vue

@@ -9,7 +9,6 @@ const user = state.getUser();
 const id = route.params.id;
 
 const claimFilter = {
-    order: 'created DESC',
     where: { claimFk: id },
     fields: ['created', 'workerFk', 'text'],
     include: {
@@ -38,7 +37,6 @@ const body = {
 </template>
 <style lang="scss">
 .q-card {
-    width: 100%;
     max-width: 70em;
     display: flex;
     justify-content: space-between;
@@ -50,36 +48,42 @@ const body = {
         display: flex;
         flex-direction: column;
         align-items: center;
-        > * {
-            margin: 10px;
-        }
+
         .text {
-            flex: 70%;
+            width: 70%;
             padding: 10px;
         }
         .picture {
-            flex: 15%;
-            .avatar-picture {
-                width: 70px;
-            }
+            width: 15%;
         }
         .actions {
-            flex: 15%;
+            width: 15%;
             align-self: baseline;
             text-align: center;
         }
     }
 }
-@media (max-width: 1150px) {
+@media (max-width: $breakpoint-md) {
     .claim-notes {
-        .text {
-            margin-top: 20px;
-            order: 3;
-            flex: 100%;
-        }
+        .notes {
+            .picture,
+            .actions {
+                width: 50%;
+            }
+            .picture {
+                .avatar-picture {
+                    width: 135px;
+                }
+            }
+            .text {
+                width: 90%;
+                margin: 0 auto;
+                order: 3;
+            }
 
-        .actions {
-            text-align: end;
+            .actions {
+                text-align: end;
+            }
         }
     }
 }

src/pages/Claim/Card/ClaimSummary.vue

@@ -1,12 +1,14 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toCurrency } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
-import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import FetchData from 'components/FetchData.vue';
+import { getUrl } from 'src/composables/getUrl';
 import { useSession } from 'src/composables/useSession';
+import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -22,6 +24,14 @@ const $props = defineProps({
 
 const entityId = computed(() => $props.id || route.params.id);
 
+const claimUrl = ref();
+const salixUrl = ref();
+
+onMounted(async () => {
+    salixUrl.value = await getUrl('');
+    claimUrl.value = salixUrl.value + `claim/${entityId.value}/`;
+});
+
 const detailsColumns = ref([
     {
         name: 'item',
@@ -155,78 +165,52 @@ function openDialog(dmsId) {
         <template #header="{ entity: { claim } }">
             {{ claim.id }} - {{ claim.client.name }}
         </template>
-        <template #body="{ entity: { developments, observations, claim, salesClaimed } }">
-            <QCardSection class="row q-pa-none q-col-gutter-md">
-                <div class="col">
-                    <QList>
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('claim.summary.created') }}
-                                </QItemLabel>
-                                <QItemLabel>{{ toDate(claim.created) }}</QItemLabel>
-                            </QItemSection>
-                            <QItemSection v-if="claim.claimState">
-                                <QItemLabel caption>
-                                    {{ t('claim.summary.state') }}
-                                </QItemLabel>
-                                <QItemLabel>
-                                    <QChip
-                                        :color="stateColor(claim.claimState.code)"
-                                        dense
-                                    >
-                                        {{ claim.claimState.description }}
-                                    </QChip>
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem>
-                            <QItemSection v-if="claim.worker && claim.worker.user">
-                                <QItemLabel caption>
-                                    {{ t('claim.summary.assignedTo') }}
-                                </QItemLabel>
-                                <QItemLabel>
-                                    <span class="link">
-                                        {{ claim.worker.user.nickname }}
-                                        <WorkerDescriptorProxy :id="claim.workerFk" />
-                                    </span>
-                                </QItemLabel>
-                            </QItemSection>
-                            <QItemSection
-                                v-if="claim.client && claim.client.salesPersonUser"
-                            >
-                                <QItemLabel caption>
-                                    {{ t('claim.summary.attendedBy') }}
-                                </QItemLabel>
-                                <QItemLabel>
-                                    <span class="link">
-                                        {{ claim.client.salesPersonUser.name }}
-                                        <WorkerDescriptorProxy
-                                            :id="claim.client.salesPersonFk"
-                                        />
-                                    </span>
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QList>
-                </div>
-            </QCardSection>
-            <QCardSection class="q-pa-md" v-if="observations.length > 0">
-                <h6>{{ t('claim.summary.notes') }}</h6>
-                <div class="note-list" v-for="note in observations" :key="note.id">
-                    <div class="note-caption">
-                        <span
-                            >{{ note.worker.firstName }} {{ note.worker.lastName }}
+        <template #body="{ entity: { claim, salesClaimed, developments } }">
+            <QCard class="vn-one">
+                <a class="header" :href="`#/claim/${entityId}/basic-data`">
+                    {{ t('claim.pageTitles.basicData') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <VnLv
+                    :label="t('claim.summary.created')"
+                    :value="toDate(claim.created)"
+                />
+                <VnLv :label="t('claim.summary.state')">
+                    <template #value>
+                        <QChip :color="stateColor(claim.claimState.code)" dense>
+                            {{ claim.claimState.description }}
+                        </QChip>
+                    </template>
+                </VnLv>
+                <VnLv :label="t('claim.summary.assignedTo')">
+                    <template #value>
+                        <span class="link">
+                            {{ claim.worker.user.nickname }}
+                            <WorkerDescriptorProxy :id="claim.workerFk" />
                         </span>
-                        <span>{{ toDate(note.created) }}</span>
-                    </div>
-                    <div class="note-text">
-                        <span>{{ note.text }}</span>
-                    </div>
-                </div>
-            </QCardSection>
-            <QCardSection class="q-pa-md" v-if="salesClaimed.length > 0">
-                <h6>{{ t('claim.summary.details') }}</h6>
+                    </template>
+                </VnLv>
+                <VnLv :label="t('claim.summary.attendedBy')">
+                    <template #value>
+                        <span class="link">
+                            {{ claim.client.salesPersonUser.name }}
+                            <WorkerDescriptorProxy :id="claim.client.salesPersonFk" />
+                        </span>
+                    </template>
+                </VnLv>
+            </QCard>
+            <QCard class="vn-one">
+                <a class="header" :href="claimUrl + 'note/index'">
+                    {{ t('claim.summary.notes') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <!-- Use VnNotes and maybe VirtualScroll-->
+            </QCard>
+            <QCard class="vn-max" v-if="salesClaimed.length > 0">
+                <a class="header" :href="claimUrl + 'note/index'">
+                    {{ t('claim.summary.details') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
                 <QTable :columns="detailsColumns" :rows="salesClaimed" flat>
                     <template #header="props">
                         <QTr :props="props">
@@ -236,16 +220,19 @@ function openDialog(dmsId) {
                         </QTr>
                     </template>
                 </QTable>
-            </QCardSection>
-            <QCardSection class="q-pa-md" v-if="claimDms.length > 0">
-                <h6>{{ t('claim.summary.photos') }}</h6>
+            </QCard>
+            <QCard class="vn-max" v-if="claimDms.length > 0">
+                <a class="header" :href="`#/claim/${entityId}/photos`">
+                    {{ t('claim.summary.photos') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
                 <div class="container">
-                    <div class="multimediaParent bg-transparent">
-                        <div
-                            v-for="(media, index) of claimDms"
-                            :key="index"
-                            class="relative-position"
-                        >
+                    <div
+                        class="multimedia-container"
+                        v-for="(media, index) of claimDms"
+                        :key="index"
+                    >
+                        <div class="relative-position">
                             <QIcon
                                 name="play_circle"
                                 color="primary"
@@ -275,9 +262,12 @@ function openDialog(dmsId) {
                         </div>
                     </div>
                 </div>
-            </QCardSection>
-            <QCardSection class="q-pa-md" v-if="developments.length > 0">
-                <h6>{{ t('claim.summary.development') }}</h6>
+            </QCard>
+            <QCard class="vn-two" v-if="developments.length > 0">
+                <a class="header" :href="claimUrl + 'development'">
+                    {{ t('claim.summary.development') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
                 <QTable :columns="developmentColumns" :rows="developments" flat>
                     <template #header="props">
                         <QTr :props="props">
@@ -287,11 +277,13 @@ function openDialog(dmsId) {
                         </QTr>
                     </template>
                 </QTable>
-            </QCardSection>
-            <QCardSection class="q-pa-md">
-                <h6>{{ t('claim.summary.actions') }}</h6>
-                <QSeparator />
-                <div id="slider-container">
+            </QCard>
+            <QCard class="vn-max" v-if="developments.length > 0">
+                <a class="header" :href="claimUrl + 'action'">
+                    {{ t('claim.summary.actions') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <div id="slider-container" class="q-px-xl q-py-md">
                     <QSlider
                         v-model="claim.responsibility"
                         label
@@ -308,7 +300,21 @@ function openDialog(dmsId) {
                         readonly
                     />
                 </div>
-            </QCardSection>
+            </QCard>
+            <!-- <QCardSection class="q-pa-md" v-if="observations.length > 0">
+                <h6>{{ t('claim.summary.notes') }}</h6>
+                <div class="note-list" v-for="note in observations" :key="note.id">
+                    <div class="note-caption">
+                        <span
+                            >{{ note.worker.firstName }} {{ note.worker.lastName }}
+                        </span>
+                        <span>{{ toDate(note.created) }}</span>
+                    </div>
+                    <div class="note-text">
+                        <span>{{ note.text }}</span>
+                    </div>
+                </div>
+            </QCardSection> -->
             <QDialog
                 v-model="multimediaDialog"
                 transition-show="slide-up"
@@ -352,22 +358,19 @@ function openDialog(dmsId) {
     </CardSummary>
 </template>
 <style lang="scss" scoped>
-.container {
-    min-width: 80%;
-}
 .q-dialog__inner--minimized > div {
     max-width: 80%;
 }
-
-.multimediaParent {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
-
-    grid-auto-rows: auto;
-
-    grid-gap: 1rem;
+.container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 15px;
+    flex-basis: 30%;
+}
+.multimedia-container {
+    flex: 1 0 21%;
 }
-
 .multimedia {
     transition: all 0.5s;
     opacity: 1;
@@ -395,18 +398,4 @@ function openDialog(dmsId) {
 .zindex {
     z-index: 1;
 }
-
-.note-list {
-    width: 100%;
-    border: 0.1rem solid $grey-7;
-    padding: 0.5rem;
-    margin-bottom: 0.5rem;
-}
-
-.note-caption {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 0.5rem;
-    color: $grey-7;
-}
 </style>

src/pages/Claim/ClaimList.vue

@@ -9,6 +9,8 @@ import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import ClaimFilter from './ClaimFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -74,116 +76,62 @@ function viewSummary(id) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <QItem
-                            class="q-pa-none items-start cursor-pointer q-hoverable"
-                            v-ripple
-                            clickable
-                        >
-                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
-                                <div class="text-h6 link">
-                                    {{ row.clientName }}
-                                </div>
-                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
-                                <QList>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('claim.list.customer') }}
-                                            </QItemLabel>
-                                            <QItemLabel>
-                                                {{ row.clientName }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('claim.list.assignedTo') }}
-                                            </QItemLabel>
-                                            <QItemLabel>
-                                                {{ row.workerName }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('claim.list.created') }}
-                                            </QItemLabel>
-                                            <QItemLabel>
-                                                {{ toDate(row.created) }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('claim.list.state') }}
-                                            </QItemLabel>
-                                            <QItemLabel>
-                                                <QBadge
-                                                    :color="stateColor(row.stateCode)"
-                                                    class="q-ma-none"
-                                                    dense
-                                                >
-                                                    {{ row.stateDescription }}
-                                                </QBadge>
-                                            </QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                </QList>
-                            </QItemSection>
-                            <QSeparator vertical />
-                            <QCardActions vertical class="justify-between">
-                                <!-- <QBtn color="grey-7" round flat icon="more_vert">
-                                <QTooltip>{{ t('customer.list.moreOptions') }}</QTooltip>
-                                <QMenu cover auto-close>
-                                    <QList>
-                                        <QItem clickable>
-                                            <QItemSection avatar>
-                                                <QIcon name="add" />
-                                            </QItemSection>
-                                            <QItemSection>Add a note</QItemSection>
-                                        </QItem>
-                                        <QItem clickable>
-                                            <QItemSection avatar>
-                                                <QIcon name="logs" />
-                                            </QItemSection>
-                                            <QItemSection>Display claim logs</QItemSection>
-                                        </QItem>
-                                    </QList>
-                                </QMenu>
-                            </QBtn> -->
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv label="ID" :value="row.id" />
+                            <VnLv
+                                :label="t('claim.list.customer')"
+                                :value="row.clientName"
+                            />
+                            <VnLv
+                                :label="t('claim.list.assignedTo')"
+                                :value="row.workerName"
+                            />
+                            <VnLv
+                                :label="t('claim.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('claim.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        :color="stateColor(row.stateCode)"
+                                        class="q-ma-none"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                flat
+                                icon="arrow_circle_right"
+                                @click.stop="navigate(row.id)"
+                            >
+                                <QTooltip>
+                                    {{ t('components.smartCard.openCard') }}
+                                </QTooltip>
+                            </QBtn>
+                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
+                                <QTooltip>
+                                    {{ t('components.smartCard.openSummary') }}
+                                </QTooltip>
+                            </QBtn>
+                            <QBtn flat icon="vn:client" @click.stop>
+                                <QTooltip>
+                                    {{ t('components.smartCard.viewDescription') }}
+                                </QTooltip>
 
-                                <QBtn
-                                    flat
-                                    round
-                                    color="orange"
-                                    icon="arrow_circle_right"
-                                    @click="navigate(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openCard') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn
-                                    flat
-                                    round
-                                    color="grey-7"
-                                    icon="preview"
-                                    @click="viewSummary(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openSummary') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn flat round color="grey-7" icon="vn:client">
-                                    <QTooltip>
-                                        {{ t('components.smartCard.viewDescription') }}
-                                    </QTooltip>
-
-                                    <CustomerDescriptorProxy :id="row.clientFk" />
-                                </QBtn>
-                            </QCardActions>
-                        </QItem>
-                    </QCard>
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                        </template>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>

src/pages/Customer/Card/CustomerSummary.vue

@@ -1,9 +1,11 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toCurrency, toPercentage, toDate } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
+import { getUrl } from 'src/composables/getUrl';
+import VnLv from 'src/components/ui/VnLv.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -16,8 +18,13 @@ const $props = defineProps({
 });
 
 const entityId = computed(() => $props.id || route.params.id);
-const summary = ref();
 const customer = computed(() => summary.value.entity);
+const summary = ref();
+const clientUrl = ref();
+
+onMounted(async () => {
+    clientUrl.value = (await getUrl('client/')) + entityId.value + '/';
+});
 
 const balanceDue = computed(() => {
     return (
@@ -38,7 +45,7 @@ const priceIncreasingRate = computed(() => {
 });
 
 const debtWarning = computed(() => {
-    return customer.value.debt.debt > customer.value.credit ? 'negative' : '';
+    return customer.value?.debt?.debt > customer.value.credit ? 'negative' : '';
 });
 
 const creditWarning = computed(() => {
@@ -53,478 +60,212 @@ const creditWarning = computed(() => {
 <template>
     <CardSummary ref="summary" :url="`Clients/${entityId}/summary`">
         <template #body="{ entity }">
-            <QCardSection class="row q-pa-none QCol-gutter-md">
-                <div class="col">
-                    <QList dense>
-                        <QItemLabel header class="text-h6">
-                            {{ t('customer.summary.basicData') }}
-                            <RouterLink
-                                :to="{
-                                    name: 'CustomerBasicData',
-                                    params: { id: entity.id },
-                                }"
-                                target="_blank"
-                            >
-                                <QIcon name="open_in_new" />
-                            </RouterLink>
-                        </QItemLabel>
-                        <QSeparator class="q-mb-md" />
+            <QCard class="vn-one">
+                <a class="header" :href="clientUrl + `basic-data`">
+                    {{ t('customer.summary.basicData') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
+                <VnLv :label="t('customer.summary.name')" :value="entity.name" />
+                <VnLv :label="t('customer.summary.contact')" :value="entity.contact" />
+                <VnLv :label="t('customer.summary.phone')" :value="entity.phone" />
+                <VnLv :label="t('customer.summary.mobile')" :value="entity.mobile" />
+                <VnLv :label="t('customer.summary.email')" :value="entity.email" />
+                <VnLv
+                    :label="t('customer.summary.salesPerson')"
+                    :value="entity?.salesPersonUser?.name"
+                />
+                <VnLv
+                    :label="t('customer.summary.contactChannel')"
+                    :value="entity?.contactChannel?.name"
+                />
+                <VnLv
+                    :label="t('customer.summary.businessType')"
+                    :value="entity.businessType.description"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <a class="header" :href="clientUrl + `fiscal-data`">
+                    {{ t('customer.summary.fiscalAddress') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <VnLv
+                    :label="t('customer.summary.socialName')"
+                    :value="entity.socialName"
+                />
+                <VnLv :label="t('customer.summary.fiscalId')" :value="entity.fi" />
+                <VnLv :label="t('customer.summary.city')" :value="entity.city" />
+                <VnLv :label="t('customer.summary.postcode')" :value="entity.postcode" />
 
-                        <QItem class="row col">
-                            <QItemLabel class="col" caption>
-                                {{ t('customer.summary.customerId') }}
-                            </QItemLabel>
-                            <QItemLabel class="col q-ma-none">
-                                {{ entity.id }}
-                            </QItemLabel>
-                        </QItem>
-                        <QItem class="row col">
-                            <QItemLabel class="col" caption>
-                                {{ t('customer.summary.name') }}
-                            </QItemLabel>
-                            <QItemLabel class="col q-ma-none">
-                                {{ entity.name }}
-                            </QItemLabel>
-                        </QItem>
-                        <QItem class="row col">
-                            <QItemLabel class="col" caption>
-                                {{ t('customer.summary.contact') }}
-                            </QItemLabel>
-                            <QItemLabel class="col q-ma-none">
-                                {{ entity.contact }}
-                            </QItemLabel>
-                        </QItem>
+                <VnLv
+                    v-if="entity.province"
+                    :label="t('customer.summary.province')"
+                    :value="entity.province.name"
+                />
+                <VnLv
+                    v-if="entity.country"
+                    :label="t('customer.summary.country')"
+                    :value="entity.country.country"
+                />
+                <VnLv :label="t('customer.summary.street')" :value="entity.street" />
+            </QCard>
+            <QCard class="vn-one">
+                <a class="header link" :href="clientUrl + `fiscal-data`" link>
+                    {{ t('customer.summary.fiscalAddress') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <VnLv
+                    :label="t('customer.summary.isEqualizated')"
+                    :value="entity.isEqualizated"
+                />
+                <VnLv :label="t('customer.summary.isActive')" :value="entity.isActive" />
+                <VnLv
+                    :label="t('customer.summary.invoiceByAddress')"
+                    :value="entity.hasToInvoiceByAddress"
+                />
+                <VnLv
+                    :label="t('customer.summary.verifiedData')"
+                    :value="entity.isTaxDataChecked"
+                />
+                <VnLv
+                    :label="t('customer.summary.hasToInvoice')"
+                    :value="entity.hasToInvoice"
+                />
+                <VnLv
+                    :label="t('customer.summary.notifyByEmail')"
+                    :value="entity.isToBeMailed"
+                />
+                <VnLv :label="t('customer.summary.vies')" :value="entity.isVies" />
+            </QCard>
+            <QCard class="vn-one">
+                <a class="header link" :href="clientUrl + `billing-data`" link>
+                    {{ t('customer.summary.billingData') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <VnLv
+                    :label="t('customer.summary.payMethod')"
+                    :value="entity.payMethod.name"
+                />
+                <VnLv :label="t('customer.summary.bankAccount')" :value="entity.iban" />
+                <VnLv :label="t('customer.summary.dueDay')" :value="entity.dueDay" />
+                <VnLv :label="t('customer.summary.hasLcr')" :value="entity.hasLcr" />
+                <VnLv
+                    :label="t('customer.summary.hasCoreVnl')"
+                    :value="entity.hasCoreVnl"
+                />
+                <VnLv
+                    :label="t('customer.summary.hasB2BVnl')"
+                    :value="entity.hasSepaVnl"
+                />
+            </QCard>
+            <QCard class="vn-one" v-if="entity.defaultAddress">
+                <a class="header link" :href="clientUrl + `address/index`" link>
+                    {{ t('customer.summary.consignee') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <VnLv
+                    :label="t('customer.summary.addressName')"
+                    :value="entity.defaultAddress.nickname"
+                />
+                <VnLv
+                    :label="t('customer.summary.addressCity')"
+                    :value="entity.defaultAddress.city"
+                />
+                <VnLv
+                    :label="t('customer.summary.addressStreet')"
+                    :value="entity.defaultAddress.street"
+                />
+            </QCard>
+            <QCard class="vn-one" v-if="entity.account">
+                <a class="header link" :href="clientUrl + `web-access`">
+                    {{ t('customer.summary.webAccess') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <VnLv
+                    :label="t('customer.summary.username')"
+                    :value="entity.account.name"
+                />
+                <VnLv
+                    :label="t('customer.summary.webAccess')"
+                    :value="entity.account.active"
+                />
+            </QCard>
+            <QCard class="vn-one" v-if="entity.account">
+                <div class="header">
+                    {{ t('customer.summary.businessData') }}
+                </div>
+                <VnLv
+                    :label="t('customer.summary.totalGreuge')"
+                    :value="toCurrency(entity.totalGreuge)"
+                />
+                <VnLv
+                    :label="t('customer.summary.mana')"
+                    :value="toCurrency(entity?.mana?.mana)"
+                />
+                <VnLv
+                    v-if="entity.claimsRatio"
+                    :label="t('customer.summary.priceIncreasingRate')"
+                    :value="toPercentage(priceIncreasingRate)"
+                />
+                <VnLv
+                    :label="t('customer.summary.averageInvoiced')"
+                    :value="toCurrency(entity?.averageInvoiced?.invoiced)"
+                />
+                <VnLv
+                    v-if="entity.claimsRatio"
+                    :label="t('customer.summary.claimRate')"
+                    :value="toPercentage(claimRate)"
+                />
+            </QCard>
+            <QCard class="vn-one" v-if="entity.account">
+                <a
+                    class="header link"
+                    :href="`https://grafana.verdnatura.es/d/40buzE4Vk/comportamiento-pagos-clientes?orgId=1&var-clientFk=${entityId}`"
+                    link
+                >
+                    {{ t('customer.summary.financialData') }}
+                    <QIcon name="vn:grafana" color="primary" />
+                </a>
+                <VnLv
+                    :label="t('customer.summary.risk')"
+                    :value="toCurrency(entity?.debt?.debt)"
+                    :class="debtWarning"
+                    :info="t('customer.summary.riskInfo')"
+                />
 
-                        <QItem v-if="entity.salesPersonUser" class="row col">
-                            <QItemLabel class="col" caption>
-                                {{ t('customer.summary.salesPerson') }}
-                            </QItemLabel>
-                            <QItemLabel class="col q-ma-none">
-                                {{ entity.salesPersonUser.name }}
-                            </QItemLabel>
-                        </QItem>
+                <VnLv
+                    :label="t('customer.summary.credit')"
+                    :value="toCurrency(entity.credit)"
+                    :class="creditWarning"
+                    :info="t('customer.summary.creditInfo')"
+                />
 
-                        <QItem class="row col">
-                            <QItemLabel class="col" caption>
-                                {{ t('customer.summary.phone') }}
-                            </QItemLabel>
-                            <QItemLabel class="col q-ma-none">
-                                {{ entity.phone }}
-                            </QItemLabel>
-                        </QItem>
+                <VnLv
+                    v-if="entity.creditInsurance"
+                    :label="t('customer.summary.securedCredit')"
+                    :value="toCurrency(entity.creditInsurance)"
+                    :info="t('customer.summary.securedCreditInfo')"
+                />
 
-                        <QItem class="row col">
-                            <QItemLabel class="col" caption>
-                                {{ t('customer.summary.mobile') }}
-                            </QItemLabel>
-                            <QItemLabel class="col q-ma-none">{{
-                                entity.mobile
-                            }}</QItemLabel>
-                        </QItem>
+                <VnLv
+                    :label="t('customer.summary.balance')"
+                    :value="toCurrency(entity.sumRisk) || toCurrency(0)"
+                    :info="t('customer.summary.balanceInfo')"
+                />
 
-                        <QItem v-if="entity.contactChannel" class="row col">
-                            <QItemLabel class="col" caption>
-                                {{ t('customer.summary.contactChannel') }}
-                            </QItemLabel>
-                            <QItemLabel class="col q-ma-none">
-                                {{ entity.contactChannel.name }}
-                            </QItemLabel>
-                        </QItem>
-
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.email') }}
-                                </QItemLabel>
-                                <QItemLabel>{{ entity.email }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QList>
-                </div>
-                <div class="col">
-                    <QList>
-                        <QItemLabel header class="text-h6">
-                            {{ t('customer.summary.fiscalAddress') }}
-                        </QItemLabel>
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.socialName') }}
-                                </QItemLabel>
-                                <QItemLabel>{{ entity.socialName }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.fiscalId') }}
-                                </QItemLabel>
-                                <QItemLabel>{{ entity.fi }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.postcode') }}
-                                </QItemLabel>
-                                <QItemLabel>{{ entity.postcode }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem v-if="entity.province">
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.province') }}
-                                </QItemLabel>
-                                <QItemLabel>{{ entity.province.name }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem v-if="entity.country">
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.country') }}
-                                </QItemLabel>
-                                <QItemLabel>{{ entity.country.country }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.street') }}
-                                </QItemLabel>
-                                <QItemLabel>{{ entity.street }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QList>
-                </div>
-                <div class="col">
-                    <QList>
-                        <QItemLabel header class="text-h6">
-                            {{ t('customer.summary.fiscalData') }}
-                        </QItemLabel>
-                        <QItem dense>
-                            <QCheckbox
-                                v-model="entity.isEqualizated"
-                                :label="t('customer.summary.isEqualizated')"
-                                disable
-                            />
-                        </QItem>
-                        <QItem dense>
-                            <QCheckbox
-                                v-model="entity.isActive"
-                                :label="t('customer.summary.isActive')"
-                                disable
-                            />
-                        </QItem>
-                        <QItem dense>
-                            <QCheckbox
-                                v-model="entity.hasToInvoiceByAddress"
-                                :label="t('customer.summary.invoiceByAddress')"
-                                disable
-                            />
-                        </QItem>
-                        <QItem dense>
-                            <QCheckbox
-                                v-model="entity.isTaxDataChecked"
-                                :label="t('customer.summary.verifiedData')"
-                                disable
-                            />
-                        </QItem>
-                        <QItem dense>
-                            <QCheckbox
-                                v-model="entity.hasToInvoice"
-                                :label="t('customer.summary.hasToInvoice')"
-                                disable
-                            />
-                        </QItem>
-                        <QItem dense>
-                            <QCheckbox
-                                v-model="entity.isToBeMailed"
-                                :label="t('customer.summary.notifyByEmail')"
-                                disable
-                            />
-                        </QItem>
-                        <QItem dense>
-                            <QCheckbox
-                                v-model="entity.isVies"
-                                :label="t('customer.summary.vies')"
-                                disable
-                            />
-                        </QItem>
-                    </QList>
-                </div>
-                <div class="col">
-                    <QList>
-                        <QItemLabel header class="text-h6">
-                            {{ t('customer.summary.billingData') }}
-                        </QItemLabel>
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.payMethod') }}
-                                </QItemLabel>
-                                <QItemLabel>{{ entity.payMethod.name }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.bankAccount') }}
-                                </QItemLabel>
-                                <QItemLabel>{{ entity.iban }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.dueDay') }}
-                                </QItemLabel>
-                                <QItemLabel>{{ entity.dueDay }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem dense>
-                            <QCheckbox
-                                v-model="entity.hasLcr"
-                                :label="t('customer.summary.hasLcr')"
-                                disable
-                            />
-                        </QItem>
-                        <QItem dense>
-                            <QCheckbox
-                                v-model="entity.hasCoreVnl"
-                                :label="t('customer.summary.hasCoreVnl')"
-                                disable
-                            />
-                        </QItem>
-                        <QItem dense>
-                            <QCheckbox
-                                v-model="entity.hasSepaVnl"
-                                :label="t('customer.summary.hasB2BVnl')"
-                                disable
-                            />
-                        </QItem>
-                    </QList>
-                </div>
-                <div class="col" v-if="entity.defaultAddress">
-                    <QList>
-                        <QItemLabel header class="text-h6">
-                            {{ t('customer.summary.consignee') }}
-                        </QItemLabel>
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.addressName') }}
-                                </QItemLabel>
-                                <QItemLabel>
-                                    {{ entity.defaultAddress.nickname }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.addressCity') }}
-                                </QItemLabel>
-                                <QItemLabel>{{ entity.defaultAddress.city }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.addressStreet') }}
-                                </QItemLabel>
-                                <QItemLabel>
-                                    {{ entity.defaultAddress.street }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QList>
-                </div>
-                <div class="col" v-if="entity.account">
-                    <QList>
-                        <QItemLabel header class="text-h6">
-                            {{ t('customer.summary.webAccess') }}
-                        </QItemLabel>
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.username') }}
-                                </QItemLabel>
-                                <QItemLabel>{{ entity.account.name }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem dense>
-                            <QCheckbox
-                                v-model="entity.account.active"
-                                :label="t('customer.summary.webAccess')"
-                                disable
-                            />
-                        </QItem>
-                    </QList>
-                </div>
-                <div class="col">
-                    <QList>
-                        <QItemLabel header class="text-h6">
-                            {{ t('customer.summary.businessData') }}
-                        </QItemLabel>
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.totalGreuge') }}
-                                </QItemLabel>
-                                <QItemLabel>
-                                    {{ toCurrency(entity.totalGreuge) }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem v-if="entity.mana">
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.mana') }}
-                                </QItemLabel>
-                                <QItemLabel>
-                                    {{ toCurrency(entity.mana.mana) }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem v-if="entity.claimsRatio">
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.priceIncreasingRate') }}
-                                </QItemLabel>
-                                <QItemLabel>
-                                    {{ toPercentage(priceIncreasingRate) }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem v-if="entity.averageInvoiced">
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.averageInvoiced') }}
-                                </QItemLabel>
-                                <QItemLabel>
-                                    {{ toCurrency(entity.averageInvoiced.invoiced) }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                        <QItem v-if="entity.claimsRatio">
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.claimRate') }}
-                                </QItemLabel>
-                                <QItemLabel>{{ toPercentage(claimRate) }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QList>
-                </div>
-                <div class="col">
-                    <QList>
-                        <QItemLabel header class="text-h6">
-                            {{ t('customer.summary.financialData') }}
-                        </QItemLabel>
-                        <QItem v-if="entity.debt">
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.risk') }}
-                                </QItemLabel>
-                                <QItemLabel :class="debtWarning">
-                                    {{ toCurrency(entity.debt.debt) }}
-                                </QItemLabel>
-                            </QItemSection>
-                            <QItemSection side>
-                                <QIcon name="vn:info">
-                                    <QTooltip>
-                                        {{ t('customer.summary.riskInfo') }}
-                                    </QTooltip>
-                                </QIcon>
-                            </QItemSection>
-                        </QItem>
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.credit') }}
-                                </QItemLabel>
-                                <QItemLabel :class="creditWarning">
-                                    {{ toCurrency(entity.credit) }}
-                                </QItemLabel>
-                            </QItemSection>
-                            <QItemSection side>
-                                <QIcon name="vn:info">
-                                    <QTooltip>
-                                        {{ t('customer.summary.creditInfo') }}
-                                    </QTooltip>
-                                </QIcon>
-                            </QItemSection>
-                        </QItem>
-                        <QItem v-if="entity.creditInsurance">
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.securedCredit') }}
-                                </QItemLabel>
-                                <QItemLabel>
-                                    {{ toCurrency(entity.creditInsurance) }}
-                                </QItemLabel>
-                            </QItemSection>
-                            <QItemSection side>
-                                <QIcon name="vn:info">
-                                    <QTooltip>
-                                        {{ t('customer.summary.securedCreditInfo') }}
-                                    </QTooltip>
-                                </QIcon>
-                            </QItemSection>
-                        </QItem>
-                        <QItem>
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.balance') }}
-                                </QItemLabel>
-                                <QItemLabel>
-                                    {{ toCurrency(entity.sumRisk) || toCurrency(0) }}
-                                </QItemLabel>
-                            </QItemSection>
-                            <QItemSection side>
-                                <QIcon name="vn:info">
-                                    <QTooltip>
-                                        {{ t('customer.summary.balanceInfo') }}
-                                    </QTooltip>
-                                </QIcon>
-                            </QItemSection>
-                        </QItem>
-                        <QItem v-if="entity.defaulters">
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.balanceDue') }}
-                                </QItemLabel>
-                                <QItemLabel :class="balanceDueWarning">
-                                    {{ toCurrency(balanceDue) }}
-                                </QItemLabel>
-                            </QItemSection>
-                            <QItemSection side>
-                                <QIcon name="vn:info">
-                                    <QTooltip>
-                                        {{ t('customer.summary.balanceDueInfo') }}
-                                    </QTooltip>
-                                </QIcon>
-                            </QItemSection>
-                        </QItem>
-                        <QItem v-if="entity.recovery">
-                            <QItemSection>
-                                <QItemLabel caption>
-                                    {{ t('customer.summary.recoverySince') }}
-                                </QItemLabel>
-                                <QItemLabel>
-                                    {{ toDate(entity.recovery.started) }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QList>
-                </div>
-            </QCardSection>
+                <VnLv
+                    v-if="entity.defaulters"
+                    :label="t('customer.summary.balanceDue')"
+                    :value="toCurrency(balanceDue)"
+                    :class="balanceDueWarning"
+                    :info="t('customer.summary.balanceDueInfo')"
+                />
+                <VnLv
+                    v-if="entity.recovery"
+                    :label="t('customer.summary.recoverySince')"
+                    :value="toDate(entity.recovery.started)"
+                />
+            </QCard>
         </template>
     </CardSummary>
 </template>
-
-<style lang="scss">
-.q-item__label + .q-item__label {
-    margin: 0;
-}
-</style>

src/pages/Customer/CustomerList.vue

@@ -7,6 +7,8 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import CustomerFilter from './CustomerFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -66,85 +68,40 @@ function viewSummary(id) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <QItem
-                            class="q-pa-none items-start cursor-pointer q-hoverable"
-                            v-ripple
-                            clickable
-                        >
-                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
-                                <div class="text-h6">{{ row.name }}</div>
-                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
-
-                                <QList>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('customer.list.email') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.email }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('customer.list.phone') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.phone }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                </QList>
-                            </QItemSection>
-                            <QSeparator vertical />
-                            <QCardActions vertical class="justify-between">
-                                <!-- <QBtn color="grey-7" round flat icon="more_vert">
-                                    <QTooltip>{{ t('customer.list.moreOptions') }}</QTooltip>
-                                    <QMenu cover auto-close>
-                                        <QList>
-                                            <QItem clickable>
-                                                <QItemSection avatar>
-                                                    <QIcon name="add" />
-                                                </QItemSection>
-                                                <QItemSection>Add a note</QItemSection>
-                                            </QItem>
-                                            <QItem clickable>
-                                                <QItemSection avatar>
-                                                    <QIcon name="history" />
-                                                </QItemSection>
-                                                <QItemSection>Display customer history</QItemSection>
-                                            </QItem>
-                                        </QList>
-                                    </QMenu>
-                                </QBtn> -->
-
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="arrow_circle_right"
-                                    @click="navigate(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openCard') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn
-                                    flat
-                                    round
-                                    color="grey-7"
-                                    icon="preview"
-                                    @click="viewSummary(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openSummary') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <!-- <QBtn flat round color="grey-7" icon="vn:ticket">
-                                <QTooltip>{{ t('customer.list.customerOrders') }}</QTooltip>
-                            </QBtn> -->
-                            </QCardActions>
-                        </QItem>
-                    </QCard>
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="row.name"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv label="ID" :value="row.id" />
+                            <VnLv :label="t('customer.list.email')" :value="row.email" />
+                            <VnLv :label="t('customer.list.phone')" :value="row.phone" />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                flat
+                                color="primary"
+                                icon="arrow_circle_right"
+                                @click.stop="navigate(row.id)"
+                            >
+                                <QTooltip>
+                                    {{ t('components.smartCard.openCard') }}
+                                </QTooltip>
+                            </QBtn>
+                            <QBtn
+                                flat
+                                color="grey-7"
+                                icon="preview"
+                                @click.stop="viewSummary(row.id)"
+                            >
+                                <QTooltip>
+                                    {{ t('components.smartCard.openSummary') }}
+                                </QTooltip>
+                            </QBtn>
+                        </template>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>

src/pages/InvoiceOut/Card/InvoiceOutSummary.vue

@@ -4,8 +4,15 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { toCurrency, toDate } from 'src/filters';
-import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
-onMounted(() => fetch());
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import { getUrl } from 'src/composables/getUrl';
+
+onMounted(async () => {
+    fetch();
+    salixUrl.value = await getUrl('');
+    invoiceOutUrl.value = salixUrl.value + `invoiceOut/${entityId.value}/`;
+});
 
 const route = useRoute();
 const { t } = useI18n();
@@ -19,20 +26,13 @@ const $props = defineProps({
 
 const entityId = computed(() => $props.id || route.params.id);
 
-const invoiceOut = ref(null);
-const tax = ref(null);
-const tikets = ref(null);
+const salixUrl = ref();
+const invoiceOutUrl = ref();
+const tickets = ref(null);
 
 function fetch() {
-    const id = entityId.value;
-
-    axios.get(`InvoiceOuts/${id}/summary`).then(({ data }) => {
-        invoiceOut.value = data.invoiceOut;
-        tax.value = data.invoiceOut.taxesBreakdown;
-    });
-
-    axios.get(`InvoiceOuts/${id}/getTickets`).then(({ data }) => {
-        tikets.value = data;
+    axios.get(`InvoiceOuts/${entityId.value}/getTickets`).then(({ data }) => {
+        tickets.value = data;
     });
 }
 
@@ -95,124 +95,64 @@ const ticketsColumns = ref([
 </script>
 
 <template>
-    <div class="summary container">
-        <QCard>
-            <SkeletonSummary v-if="!invoiceOut" />
-            <template v-if="invoiceOut">
-                <div class="header bg-primary q-pa-sm q-mb-md">
-                    {{ invoiceOut.ref }} - {{ invoiceOut.client.socialName }}
+    <CardSummary ref="summary" :url="`InvoiceOuts/${entityId}/summary`">
+        <template #header="{ entity: { invoiceOut } }">
+            <div>{{ invoiceOut.ref }} - {{ invoiceOut.client?.socialName }}</div>
+        </template>
+        <template #body="{ entity: { invoiceOut } }">
+            <QCard class="vn-one">
+                <div class="header">
+                    {{ t('invoiceOut.pageTitles.basicData') }}
                 </div>
-                <QList>
-                    <QItem>
-                        <QItemSection>
-                            <QItemLabel caption>{{
-                                t('invoiceOut.summary.issued')
-                            }}</QItemLabel>
-                            <QItemLabel>{{ toDate(invoiceOut.issued) }}</QItemLabel>
-                        </QItemSection>
-                        <QItemSection>
-                            <QItemLabel caption>{{
-                                t('invoiceOut.summary.dued')
-                            }}</QItemLabel>
-                            <QItemLabel>{{ toDate(invoiceOut.dued) }}</QItemLabel>
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <QItemLabel caption>{{
-                                t('invoiceOut.summary.created')
-                            }}</QItemLabel>
-                            <QItemLabel>{{ toDate(invoiceOut.created) }}</QItemLabel>
-                        </QItemSection>
-                        <QItemSection>
-                            <QItemLabel caption>{{
-                                t('invoiceOut.summary.booked')
-                            }}</QItemLabel>
-                            <QItemLabel>{{ toDate(invoiceOut.booked) }}</QItemLabel>
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <QItemLabel caption>{{
-                                t('invoiceOut.summary.company')
-                            }}</QItemLabel>
-                            <QItemLabel>{{ invoiceOut.company.code }}</QItemLabel>
-                        </QItemSection>
-                    </QItem>
-                </QList>
-                <QCardSection class="q-pa-md">
-                    <h6>{{ t('invoiceOut.summary.taxBreakdown') }}</h6>
-                    <QTable :columns="taxColumns" :rows="tax" flat>
-                        <template #header="props">
-                            <QTr :props="props">
-                                <QTh
-                                    v-for="col in props.cols"
-                                    :key="col.name"
-                                    :props="props"
-                                >
-                                    {{ t(col.label) }}
-                                </QTh>
-                            </QTr>
-                        </template>
-                    </QTable>
-                </QCardSection>
-                <QCardSection class="q-pa-md">
-                    <h6>{{ t('invoiceOut.summary.tickets') }}</h6>
-                    <QTable :columns="ticketsColumns" :rows="tikets" flat>
-                        <template #header="props">
-                            <QTr :props="props">
-                                <QTh
-                                    v-for="col in props.cols"
-                                    :key="col.name"
-                                    :props="props"
-                                >
-                                    {{ t(col.label) }}
-                                </QTh>
-                            </QTr>
-                        </template>
-                    </QTable>
-                </QCardSection>
-            </template>
-        </QCard>
-    </div>
+                <VnLv
+                    :label="t('invoiceOut.summary.issued')"
+                    :value="toDate(invoiceOut.issued)"
+                />
+                <VnLv
+                    :label="t('invoiceOut.summary.dued')"
+                    :value="toDate(invoiceOut.dued)"
+                />
+                <VnLv
+                    :label="t('invoiceOut.summary.created')"
+                    :value="toDate(invoiceOut.created)"
+                />
+                <VnLv
+                    :label="t('invoiceOut.summary.booked')"
+                    :value="toDate(invoiceOut.booked)"
+                />
+                <VnLv
+                    :label="t('invoiceOut.summary.company')"
+                    :value="invoiceOut.company.code"
+                />
+            </QCard>
+            <QCard class="vn-three">
+                <div class="header">
+                    {{ t('invoiceOut.summary.taxBreakdown') }}
+                </div>
+                <QTable :columns="taxColumns" :rows="invoiceOut.taxesBreakdown" flat>
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+            <QCard class="vn-three">
+                <div class="header">
+                    {{ t('invoiceOut.summary.tickets') }}
+                </div>
+                <QTable v-if="tickets" :columns="ticketsColumns" :rows="tickets" flat>
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+        </template>
+    </CardSummary>
 </template>
-
-<style lang="scss" scoped>
-.container {
-    display: flex;
-    justify-content: center;
-}
-
-.q-card {
-    width: 100%;
-    min-width: 950px;
-    max-width: 950px;
-}
-
-.summary {
-    .header {
-        text-align: center;
-        font-size: 18px;
-    }
-
-    #slider-container {
-        max-width: 80%;
-        margin: 0 auto;
-
-        .q-slider {
-            .q-slider__marker-labels:nth-child(1) {
-                transform: none;
-            }
-            .q-slider__marker-labels:nth-child(2) {
-                transform: none;
-                left: auto !important;
-                right: 0%;
-            }
-        }
-    }
-}
-
-.q-dialog .summary {
-    max-width: 1200px;
-}
-</style>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -9,6 +9,8 @@ import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
 import { toDate, toCurrency } from 'src/filters/index';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import InvoiceOutFilter from './InvoiceOutFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -71,97 +73,59 @@ function viewSummary(id) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <QItem
-                            class="q-pa-none items-start cursor-pointer q-hoverable"
-                            v-ripple
-                            clickable
-                        >
-                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
-                                <div class="text-h6">{{ row.ref }}</div>
-                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
-                                <QList>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('invoiceOut.list.issued') }}
-                                            </QItemLabel>
-                                            <QItemLabel>
-                                                {{ toDate(row.issued) }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('invoiceOut.list.amount') }}
-                                            </QItemLabel>
-                                            <QItemLabel>
-                                                {{ toCurrency(row.amount) }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('invoiceOut.list.client') }}
-                                            </QItemLabel>
-                                            <QItemLabel>
-                                                {{ row.clientSocialName }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('invoiceOut.list.created') }}
-                                            </QItemLabel>
-                                            <QItemLabel>
-                                                {{ toDate(row.created) }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('invoiceOut.list.company') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.companyCode }}</QItemLabel>
-                                        </QItemSection>
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('invoiceOut.list.dued') }}
-                                            </QItemLabel>
-                                            <QItemLabel>
-                                                {{ toDate(row.dued) }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                </QList>
-                            </QItemSection>
-                            <QSeparator vertical />
-                            <QCardActions vertical class="justify-between">
-                                <QBtn
-                                    flat
-                                    round
-                                    color="orange"
-                                    icon="arrow_circle_right"
-                                    @click="navigate(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openCard') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn
-                                    flat
-                                    round
-                                    color="grey-7"
-                                    icon="preview"
-                                    @click="viewSummary(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openSummary') }}
-                                    </QTooltip>
-                                </QBtn>
-                            </QCardActions>
-                        </QItem>
-                    </QCard>
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="row.ref"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv label="ID" :value="row.id" />
+                            <VnLv
+                                :label="t('invoiceOut.list.shortIssued')"
+                                :title-label="t('invoiceOut.list.issued')"
+                                :value="toDate(row.issued)"
+                            />
+                            <VnLv
+                                :label="t('invoiceOut.list.amount')"
+                                :value="toCurrency(row.amount)"
+                            />
+                            <VnLv
+                                :label="t('invoiceOut.list.client')"
+                                :value="row.clientSocialName"
+                            />
+                            <VnLv
+                                :label="t('invoiceOut.list.shortCreated')"
+                                :title-label="t('invoiceOut.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv
+                                :label="t('invoiceOut.list.company')"
+                                :value="row.companyCode"
+                            />
+                            <VnLv
+                                :label="t('invoiceOut.list.shortDued')"
+                                :title-label="t('invoiceOut.list.dued')"
+                                :value="toDate(row.dued)"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                flat
+                                icon="arrow_circle_right"
+                                @click.stop="navigate(row.id)"
+                            >
+                                <QTooltip>
+                                    {{ t('components.smartCard.openCard') }}
+                                </QTooltip>
+                            </QBtn>
+                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
+                                <QTooltip>
+                                    {{ t('components.smartCard.openSummary') }}
+                                </QTooltip>
+                            </QBtn>
+                        </template>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -88,7 +88,7 @@ const setData = (entity) =>
         <template #body="{ entity }">
             <VnLv v-if="entity.ticketState" :label="t('ticket.card.state')">
                 <template #value>
-                    <QBadge :color="entity.ticketState.state.classColor ?? 'dark'">
+                    <QBadge :color="entity.ticketState.state.classColor">
                         {{ entity.ticketState.state.name }}
                     </QBadge>
                 </template>
@@ -102,16 +102,18 @@ const setData = (entity) =>
                     </span>
                 </template>
             </VnLv>
-            <VnLv
-                v-if="entity.client && entity.client.salesPersonUser"
-                :label="t('ticket.card.salesPerson')"
-                :value="entity.client.salesPersonUser.name"
-            />
-            <VnLv
-                v-if="entity.warehouse"
-                :label="t('ticket.card.warehouse')"
-                :value="entity.warehouse.name"
-            />
+            <VnLv :label="t('ticket.summary.salesPerson')">
+                <template #value>
+                    <span class="link">
+                        {{ entity.client.salesPersonUser.name }}
+                        <WorkerDescriptorProxy
+                            :id="entity.client.salesPersonFk"
+                            v-if="entity.client.salesPersonFk"
+                        />
+                    </span>
+                </template>
+            </VnLv>
+            <VnLv :label="t('ticket.card.warehouse')" :value="entity.warehouse?.name" />
             <VnLv
                 v-if="entity.agencyMode"
                 :label="t('ticket.card.agency')"

src/pages/Ticket/TicketList.vue

@@ -9,6 +9,8 @@ import { toDate, toDateString, toCurrency } from 'src/filters/index';
 import TicketSummaryDialog from './Card/TicketSummaryDialog.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import TicketFilter from './TicketFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
 
 const router = useRouter();
 const quasar = useQuasar();
@@ -81,105 +83,50 @@ function viewSummary(id) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <QItem
-                            class="q-pa-none items-start cursor-pointer q-hoverable"
-                            v-ripple
-                            clickable
-                        >
-                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
-                                <div class="text-h6">{{ row.name }}</div>
-                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
-                                <QList>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('ticket.list.nickname') }}
-                                            </QItemLabel>
-                                            <QItemLabel>
-                                                {{ row.nickname }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('ticket.list.state') }}
-                                            </QItemLabel>
-                                            <QItemLabel>
-                                                <QBadge
-                                                    :color="row.classColor ?? 'dark'"
-                                                    class="q-ma-none"
-                                                    dense
-                                                >
-                                                    {{ row.state }}
-                                                </QBadge>
-                                            </QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('ticket.list.shipped') }}
-                                            </QItemLabel>
-                                            <QItemLabel>
-                                                {{ toDate(row.shipped) }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('Zone') }}
-                                            </QItemLabel>
-                                            <QItemLabel>
-                                                {{ row.zoneName }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('ticket.list.salesPerson') }}
-                                            </QItemLabel>
-                                            <QItemLabel>
-                                                {{ row.salesPerson }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('ticket.list.total') }}
-                                            </QItemLabel>
-                                            <QItemLabel>
-                                                {{ toCurrency(row.totalWithVat) }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                </QList>
-                            </QItemSection>
-                            <QSeparator vertical />
-                            <QCardActions vertical class="justify-between">
-                                <QBtn
-                                    flat
-                                    round
-                                    color="orange"
-                                    icon="arrow_circle_right"
-                                    @click="navigate(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openCard') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn
-                                    flat
-                                    round
-                                    color="grey-7"
-                                    icon="preview"
-                                    @click="viewSummary(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openSummary') }}
-                                    </QTooltip>
-                                </QBtn>
-                            </QCardActions>
-                        </QItem>
-                    </QCard>
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv
+                                :label="t('ticket.list.nickname')"
+                                :value="row.nickname"
+                            />
+                            <VnLv :label="t('ticket.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        :color="row.classColor ?? 'orange'"
+                                        class="q-ma-none"
+                                        dense
+                                    >
+                                        {{ row.state }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('ticket.list.shipped')"
+                                :value="toDate(row.shipped)"
+                            />
+                            <VnLv :label="t('Zone')" :value="row.zoneName" />
+                            <VnLv
+                                :label="t('ticket.list.salesPerson')"
+                                :value="row.salesPerson"
+                            />
+                            <VnLv
+                                :label="t('ticket.list.total')"
+                                :value="toCurrency(row.totalWithVat)"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
+                                <QTooltip>
+                                    {{ t('components.smartCard.openSummary') }}
+                                </QTooltip>
+                            </QBtn>
+                        </template>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -63,6 +63,7 @@ const setData = (entity) =>
         :url="`Workers/${entityId}`"
         :filter="filter"
         :title="data.title"
+        :subtitle="data.subtitle"
         @on-fetch="
             (data) => {
                 worker = data;
@@ -74,7 +75,7 @@ const setData = (entity) =>
             <QImg :src="getWorkerAvatar()" class="photo">
                 <template #error>
                     <div
-                        class="absolute-full bg-grey-10 text-center q-pa-md flex flex-center"
+                        class="absolute-full picture text-center q-pa-md flex flex-center"
                     >
                         <div>
                             <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">

src/pages/Worker/Card/WorkerSummary.vue

@@ -3,11 +3,11 @@ import axios from 'axios';
 import { ref, onMounted, computed, onUpdated } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
+import CardSummary from 'components/ui/CardSummary.vue';
+import { getUrl } from 'src/composables/getUrl';
+import VnLv from 'src/components/ui/VnLv.vue';
 import WorkerDescriptorProxy from './WorkerDescriptorProxy.vue';
-
-onMounted(() => fetch());
-onUpdated(() => fetch());
+import { dashIfEmpty } from 'src/filters';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -20,8 +20,11 @@ const $props = defineProps({
 });
 
 const entityId = computed(() => $props.id || route.params.id);
+const workerUrl = ref();
 
-const worker = ref(null);
+onMounted(async () => {
+    workerUrl.value = (await getUrl('')) + `worker/${entityId.value}/`;
+});
 
 const filter = {
     include: [
@@ -59,230 +62,59 @@ const filter = {
         },
     ],
 };
-
-function fetch() {
-    const id = entityId.value;
-    axios.get(`/Workers/${id}`, { params: { filter } }).then((response) => {
-        worker.value = response.data;
-    });
-}
-
-function sipExtension() {
-    if (worker.value.sip) return worker.value.sip.extension;
-    return '-';
-}
 </script>
 
 <template>
-    <div class="summary container">
-        <QCard>
-            <SkeletonSummary v-if="!worker" />
-            <template v-if="worker">
-                <div class="header bg-primary q-pa-sm q-mb-md">
-                    {{ worker.id }} - {{ worker.firstName }} {{ worker.lastName }}
-                </div>
-                <div class="row q-pa-md q-col-gutter-md q-mb-md">
-                    <div class="col">
-                        <QList>
-                            <QItemLabel header class="text-h6">
-                                {{ t('worker.summary.basicData') }}
-                            </QItemLabel>
-                            <QItem>
-                                <QItemSection>
-                                    <QItemLabel caption> ID </QItemLabel>
-                                    <QItemLabel>{{ worker.id }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                            <QItem>
-                                <QItemSection>
-                                    <QItemLabel caption
-                                        >{{ t('worker.card.name') }}
-                                    </QItemLabel>
-                                    <QItemLabel>
-                                        {{ worker.user.nickname }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                            <QItem>
-                                <QItemSection>
-                                    <QItemLabel caption
-                                        >{{ t('worker.list.department') }}
-                                    </QItemLabel>
-                                    <QItemLabel>{{
-                                        worker.department.department.name
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                            <QItem>
-                                <QItemSection>
-                                    <QItemLabel caption
-                                        >{{ t('worker.list.email') }}
-                                    </QItemLabel>
-                                    <QItemLabel>{{ worker.user.email }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                            <QItem
-                                class="items-start cursor-pointer q-hoverable"
+    <CardSummary ref="summary" :url="`Workers/${entityId}`" :filter="filter">
+        <template #header="{ entity }">
+            <div>{{ entity.id }} - {{ entity.firstName }} {{ entity.lastName }}</div>
+        </template>
+        <template #body="{ entity: worker }">
+            <QCard class="vn-one">
+                <a class="header" :href="workerUrl + `basic-data`">
+                    {{ t('worker.summary.basicData') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
+                <VnLv
+                    :label="t('worker.list.department')"
+                    :value="worker.department.department.name"
+                />
+                <VnLv :label="t('worker.list.email')" :value="worker.user.email" />
+                <VnLv :label="t('worker.summary.boss')" link>
+                    <template #value>
+                        <span class="link">
+                            {{ dashIfEmpty(worker.boss?.name) }}
+                            <WorkerDescriptorProxy
+                                :id="worker.bossFk"
                                 v-if="worker.boss"
-                            >
-                                <QItemSection>
-                                    <QItemLabel caption>
-                                        {{ t('worker.summary.boss') }}
-                                    </QItemLabel>
-                                    <QItemLabel>
-                                        <span class="link">
-                                            {{ worker.boss.name }}
-                                            <WorkerDescriptorProxy :id="worker.bossFk" />
-                                        </span>
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                            <QItem>
-                                <QItemSection>
-                                    <QItemLabel caption
-                                        >{{ t('worker.summary.phoneExtension') }}
-                                    </QItemLabel>
-                                    <QItemLabel>
-                                        {{
-                                            worker.mobileExtension == ''
-                                                ? worker.mobileExtension
-                                                : '-'
-                                        }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                            <QItem>
-                                <QItemSection>
-                                    <QItemLabel caption
-                                        >{{ t('worker.summary.entPhone') }}
-                                    </QItemLabel>
-                                    <QItemLabel>{{
-                                        worker.phone == '' ? worker.phone : '-'
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                            <QItem>
-                                <QItemSection>
-                                    <QItemLabel caption
-                                        >{{ t('worker.summary.personalPhone') }}
-                                    </QItemLabel>
-                                    <QItemLabel>{{
-                                        worker.client.phone == ''
-                                            ? worker.client.phone
-                                            : '-'
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </QList>
-                    </div>
-                    <div class="col">
-                        <QList>
-                            <QItemLabel header class="text-h6">
-                                {{ t('worker.summary.userData') }}
-                            </QItemLabel>
-                            <QItem>
-                                <QItemSection>
-                                    <QItemLabel caption>
-                                        {{ t('worker.summary.userId') }}
-                                    </QItemLabel>
-                                    <QItemLabel>{{ worker.user.id }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                            <QItem>
-                                <QItemSection>
-                                    <QItemLabel caption
-                                        >{{ t('worker.card.name') }}
-                                    </QItemLabel>
-                                    <QItemLabel>{{ worker.user.nickname }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                            <QItem>
-                                <QItemSection>
-                                    <QItemLabel caption
-                                        >{{ t('worker.summary.role') }}
-                                    </QItemLabel>
-                                    <QItemLabel>{{ worker.user.role.name }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                            <QItem>
-                                <QItemSection>
-                                    <QItemLabel caption
-                                        >{{ t('worker.summary.sipExtension') }}
-                                    </QItemLabel>
-                                    <QItemLabel>{{ sipExtension() }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </QList>
-                    </div>
+                            />
+                        </span>
+                    </template>
+                </VnLv>
+                <VnLv
+                    :label="t('worker.summary.phoneExtension')"
+                    :value="worker.mobileExtension"
+                />
+                <VnLv :label="t('worker.summary.entPhone')" :value="worker.phone" />
+                <VnLv
+                    :label="t('worker.summary.personalPhone')"
+                    :value="worker.client.phone"
+                />
+                <VnLv :label="t('worker.summary.locker')" :value="worker.locker" />
+            </QCard>
+            <QCard class="vn-one">
+                <div class="header">
+                    {{ t('worker.summary.userData') }}
                 </div>
-            </template>
-        </QCard>
-    </div>
+                <VnLv :label="t('worker.summary.userId')" :value="worker.user.id" />
+                <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
+                <VnLv :label="t('worker.summary.role')" :value="worker.user.role.name" />
+                <VnLv
+                    :label="t('worker.summary.sipExtension')"
+                    :value="worker?.sip?.extension"
+                />
+            </QCard>
+        </template>
+    </CardSummary>
 </template>
-<style lang="scss" scoped>
-.avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    margin-right: 10px;
-}
-
-.container {
-    display: flex;
-    justify-content: center;
-}
-
-.q-card {
-    width: 100%;
-    max-width: 1200px;
-}
-
-.negative {
-    color: red;
-}
-
-.summary {
-    .q-list {
-        .q-item__label--header {
-            display: flex;
-            justify-content: space-between;
-
-            a {
-                color: $primary;
-            }
-        }
-    }
-    .row {
-        flex-wrap: wrap;
-
-        .col {
-            min-width: 250px;
-        }
-    }
-
-    .header {
-        text-align: center;
-        font-size: 18px;
-    }
-
-    #slider-container {
-        max-width: 80%;
-        margin: 0 auto;
-
-        .q-slider {
-            .q-slider__marker-labels:nth-child(1) {
-                transform: none;
-            }
-            .q-slider__marker-labels:nth-child(2) {
-                transform: none;
-                left: auto !important;
-                right: 0%;
-            }
-        }
-    }
-}
-
-.q-dialog .summary {
-    max-width: 1200px;
-}
-</style>

src/pages/Worker/WorkerList.vue

@@ -7,6 +7,8 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import WorkerFilter from './WorkerFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -66,73 +68,38 @@ function viewSummary(id) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <QItem
-                            class="q-pa-none items-start cursor-pointer q-hoverable"
-                            v-ripple
-                            clickable
-                        >
-                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
-                                <QItemLabel class="text-h6">
-                                    {{ row.nickname }}
-                                </QItemLabel>
-                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
-                                <QList>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('worker.list.name') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.userName }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('worker.list.email') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.email }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>{{
-                                                t('worker.list.department')
-                                            }}</QItemLabel>
-                                            <QItemLabel>
-                                                {{ row.department }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                </QList>
-                            </QItemSection>
-                            <QSeparator vertical />
-                            <QCardActions vertical class="justify-between">
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="arrow_circle_right"
-                                    @click="navigate(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openCard') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn
-                                    flat
-                                    round
-                                    color="grey-7"
-                                    icon="preview"
-                                    @click="viewSummary(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openSummary') }}
-                                    </QTooltip>
-                                </QBtn>
-                            </QCardActions>
-                        </QItem>
-                    </QCard>
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        @click="navigate(row.id)"
+                        :title="row.nickname"
+                    >
+                        <template #list-items>
+                            <VnLv label="ID" :value="row.id" />
+                            <VnLv :label="t('worker.list.name')" :value="row.userName" />
+                            <VnLv :label="t('worker.list.email')" :value="row.email" />
+                            <VnLv
+                                :label="t('worker.list.department')"
+                                :value="row.department"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                flat
+                                icon="arrow_circle_right"
+                                @click.stop="navigate(row.id)"
+                            >
+                                <QTooltip>
+                                    {{ t('components.smartCard.openCard') }}
+                                </QTooltip>
+                            </QBtn>
+                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
+                                <QTooltip>
+                                    {{ t('components.smartCard.openSummary') }}
+                                </QTooltip>
+                            </QBtn>
+                        </template>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>

test/cypress/integration/ClaimNotes.spec.js

@@ -11,6 +11,6 @@ describe('ClaimNotes', () => {
         cy.get('.add-btn').click();
         cy.get('.note-dialog__content').type(message);
         cy.get('.note-dialog__actions .q-btn:nth-child(2)').click();
-        cy.get('.notes > :nth-child(1) > .text').should('have.text', message);
+        cy.get('.notes .q-card .text').eq(0).should('have.text', message);
     });
 });

test/cypress/integration/workerList.spec.js

@@ -6,18 +6,21 @@ describe('WorkerList', () => {
     });
 
     it('should load workers', () => {
-        cy.get('div[class="q-item__label text-h6"]').eq(0).should('have.text', 'Jessica Jones');
-        cy.get('div[class="q-item__label text-h6"]').eq(1).should('have.text', 'Bruce Banner');
-        cy.get('div[class="q-item__label text-h6"]').eq(2).should('have.text', 'Charles Xavier');
+        cy.get('.list-items > .vn-label-value:nth-child(2) > .value')
+            .eq(0)
+            .should('have.text', 'JessicaJones');
+        cy.get('.list-items > .vn-label-value:nth-child(2) > .value')
+            .eq(1)
+            .should('have.text', 'BruceBanner');
+        cy.get('.list-items > .vn-label-value:nth-child(2) > .value')
+            .eq(2)
+            .should('have.text', 'CharlesXavier');
     });
 
     it('should open the worker summary', () => {
-        cy.get('div.text-h6')
-            .parentsUntil('div.q-card')
-            .find('div.q-card__actions')
-            .find('button').first().click();
-        cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should('have.text', '1110 - Jessica Jones');
-        cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(0).should('have.text', 'Basic data');
-        cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(1).should('have.text', 'User data');
+        cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(0).click();
+        cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones');
+        cy.get('.summary .header').eq(0).invoke('text').should('include', 'Basic data');
+        cy.get('.summary .header').eq(1).should('have.text', 'User data');
     });
 });

test/cypress/integration/workerSummary.spec.js

@@ -1,15 +1,15 @@
 describe('WorkerSummary', () => {
     beforeEach(() => {
-        cy.viewport(1280, 720)
-        cy.login('developer')
+        cy.viewport(1280, 720);
+        cy.login('developer');
         cy.visit('/#/worker/19/summary');
     });
 
     it('should load worker summary', () => {
-        cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should('have.text', '19 - salesBoss salesBoss');
-        cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(0).should('have.text', 'Basic data');
-        cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(1).should('have.text', 'User data');
-        cy.get('div[class="q-item__section column q-item__section--main justify-center"]').eq(0).should('have.text', 'NamesalesBossNick');
+        cy.get('.summaryHeader > div').should('have.text', '19 - salesBoss salesBoss');
+        cy.get(':nth-child(1) > :nth-child(2) > .value > span').should(
+            'have.text',
+            'salesBossNick'
+        );
     });
-
 });