From c0454ed3e81c1970bca5975920af73e9e63a9386 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Mon, 24 Oct 2022 08:48:53 +0200
Subject: [PATCH] Updated ticket module

---
 src/components/SkeletonSummary.vue          |  57 +++
 src/css/quasar.variables.scss               |   2 +-
 src/filters/index.js                        |   2 +
 src/filters/toCurrency.js                   |   2 +-
 src/filters/toPercentage.js                 |  18 +
 src/i18n/en/index.js                        |  81 +++-
 src/i18n/es/index.js                        |  91 +++-
 src/pages/Claim/Card/ClaimCard.vue          |  21 +-
 src/pages/Claim/Card/ClaimSummary.vue       | 110 ++---
 src/pages/Claim/ClaimList.vue               |   6 +-
 src/pages/Customer/Card/CustomerCard.vue    |  31 +-
 src/pages/Customer/Card/CustomerSummary.vue | 456 ++++++++++++++++----
 src/pages/Ticket/Card/TicketCard.vue        | 185 +++++++-
 src/pages/Ticket/Card/TicketSummary.vue     |   0
 src/pages/Ticket/TicketList.vue             | 226 +++++-----
 src/router/modules/ticket.js                |  11 +-
 16 files changed, 1031 insertions(+), 268 deletions(-)
 create mode 100644 src/components/SkeletonSummary.vue
 create mode 100644 src/filters/toPercentage.js
 create mode 100644 src/pages/Ticket/Card/TicketSummary.vue

diff --git a/src/components/SkeletonSummary.vue b/src/components/SkeletonSummary.vue
new file mode 100644
index 000000000..34244d457
--- /dev/null
+++ b/src/components/SkeletonSummary.vue
@@ -0,0 +1,57 @@
+<template>
+    <div class="header bg-primary q-pa-sm q-mb-md">
+        <q-skeleton type="rect" square />
+    </div>
+    <div class="row q-pa-md q-col-gutter-md q-mb-md">
+        <div class="col">
+            <q-skeleton type="rect" class="q-mb-md" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+        </div>
+        <div class="col">
+            <q-skeleton type="rect" class="q-mb-md" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+        </div>
+        <div class="col">
+            <q-skeleton type="rect" class="q-mb-md" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+        </div>
+        <div class="col">
+            <q-skeleton type="rect" class="q-mb-md" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+        </div>
+        <div class="col">
+            <q-skeleton type="rect" class="q-mb-md" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+            <q-skeleton type="text" square />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.row {
+    flex-wrap: wrap;
+
+    .col {
+        min-width: 250px;
+    }
+}
+</style>
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index dff10bed5..37f693da6 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -12,7 +12,7 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-$primary: #1976d2;
+$primary: #ff9800;
 $secondary: #26a69a;
 $accent: #9c27b0;
 
diff --git a/src/filters/index.js b/src/filters/index.js
index cbe044219..459087e8e 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -1,9 +1,11 @@
 import toLowerCase from './toLowerCase';
 import toDate from './toDate';
 import toCurrency from './toCurrency';
+import toPercentage from './toPercentage';
 
 export {
     toLowerCase,
     toDate,
     toCurrency,
+    toPercentage,
 };
diff --git a/src/filters/toCurrency.js b/src/filters/toCurrency.js
index 34586b5db..bbe93aa61 100644
--- a/src/filters/toCurrency.js
+++ b/src/filters/toCurrency.js
@@ -1,7 +1,7 @@
 import { useI18n } from 'vue-i18n';
 
 export default function (value, symbol = 'EUR', fractionSize = 2) {
-    if (!value) return;
+    if (value == null || value === '') return;
 
     const { locale } = useI18n();
 
diff --git a/src/filters/toPercentage.js b/src/filters/toPercentage.js
new file mode 100644
index 000000000..d701cb9e7
--- /dev/null
+++ b/src/filters/toPercentage.js
@@ -0,0 +1,18 @@
+import { useI18n } from 'vue-i18n';
+
+export default function (value, fractionSize = 2) {
+    if (value == null || value === '') return;
+
+    const { locale } = useI18n();
+
+    const options = {
+        style: 'percent',
+        minimumFractionDigits: fractionSize,
+        maximumFractionDigits: fractionSize
+    };
+
+    return new Intl.NumberFormat(locale, options)
+        .format(parseFloat(value));
+
+
+}
\ No newline at end of file
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index dd69cafe7..b7d89bb17 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -44,6 +44,7 @@ export default {
             customers: 'Customers',
             list: 'List',
             createCustomer: 'Create customer',
+            summary: 'Summary',
             basicData: 'Basic Data'
         },
         list: {
@@ -53,22 +54,75 @@ export default {
             moreOptions: 'More options'
         },
         card: {
+            customerList: 'Customer list',
             customerId: 'Claim ID',
             salesPerson: 'Sales person',
             credit: 'Credit',
             securedCredit: 'Secured credit',
             payMethod: 'Pay method',
-            debt: 'Debt'
+            debt: 'Debt',
+            isDisabled: 'Customer is disabled',
+            isFrozen: 'Customer is frozen',
+            hasDebt: 'Customer has debt',
+            notChecked: 'Customer not checked',
+            noWebAccess: 'Web access is disabled'
         },
         summary: {
+            basicData: 'Basic data',
+            fiscalAddress: 'Fiscal address',
+            fiscalData: 'Fiscal data',
+            billingData: 'Billing data',
+            consignee: 'Consignee',
+            businessData: 'Business data',
+            financialData: 'Financial data',
             customerId: 'Customer ID',
-            socialName: 'Social name',
+            name: 'Name',
             contact: 'Contact',
             phone: 'Phone',
             mobile: 'Mobile',
             email: 'Email',
             salesPerson: 'Sales person',
             contactChannel: 'Contact channel',
+            socialName: 'Social name',
+            fiscalId: 'Fiscal ID',
+            postcode: 'Postcode',
+            province: 'Province',
+            country: 'Country',
+            street: 'Address',
+            isEqualizated: 'Is equalizated',
+            isActive: 'Is active',
+            invoiceByAddress: 'Invoice by address',
+            verifiedData: 'Verified data',
+            hasToInvoice: 'Has to invoice',
+            notifyByEmail: 'Notify by email',
+            vies: 'VIES',
+            payMethod: 'Pay method',
+            bankAccount: 'Bank account',
+            dueDay: 'Due day',
+            hasLcr: 'Has LCR',
+            hasCoreVnl: 'Has core VNL',
+            hasB2BVnl: 'Has B2B VNL',
+            addressName: 'Address name',
+            addressCity: 'City',
+            addressStreet: 'Street',
+            username: 'Username',
+            webAccess: 'Web access',
+            totalGreuge: 'Total greuge',
+            mana: 'Mana',
+            priceIncreasingRate: 'Price increasing rate',
+            averageInvoiced: 'Average invoiced',
+            claimRate: 'Claming rate',
+            risk: 'Risk',
+            riskInfo: 'Invoices minus payments plus orders not yet invoiced',
+            credit: 'Credit',
+            creditInfo: `Company's maximum risk`,
+            securedCredit: 'Secured credit',
+            securedCreditInfo: `Solunion's maximum risk`,
+            balance: 'Balance',
+            balanceInfo: 'Invoices minus payments',
+            balanceDue: 'Balance due',
+            balanceDueInfo: 'Deviated invoices minus payments',
+            recoverySince: 'Recovery since',
         },
         basicData: {
             socialName: 'Fiscal name',
@@ -87,6 +141,24 @@ export default {
             list: 'List',
             createTicket: 'Create ticket',
             basicData: 'Basic Data'
+        },
+        list: {
+            nickname: 'Nickname',
+            state: 'State',
+            shipped: 'Shipped',
+            landed: 'Landed',
+            salesPerson: 'Sales person',
+            total: 'Total'
+        },
+        card: {
+            ticketId: 'Ticket ID',
+            state: 'State',
+            customerId: 'Customer ID',
+            salesPerson: 'Sales person',
+            agency: 'Agency',
+            shipped: 'Shipped',
+            warehouse: 'Warehouse',
+            customerCard: 'Customer card'
         }
     },
     claim: {
@@ -146,6 +218,11 @@ export default {
             noData: 'No data to display',
             openCard: 'View card',
             openSummary: 'Open summary'
+        },
+        card: {
+            mainList: 'Main list',
+            summary: 'Summary',
+            moreOptions: 'More options',
         }
     },
 };
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index ec4420ba4..7fdf40a4d 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -44,6 +44,7 @@ export default {
             customers: 'Clientes',
             list: 'Listado',
             createCustomer: 'Crear cliente',
+            summary: 'Resumen',
             basicData: 'Datos básicos'
         },
         list: {
@@ -54,8 +55,73 @@ export default {
         },
         card: {
             customerId: 'ID cliente',
+            salesPerson: 'Comercial',
             credit: 'Crédito',
-            securedCredit: 'Crédito asegurado'
+            securedCredit: 'Crédito asegurado',
+            payMethod: 'Método de pago',
+            debt: 'Riesgo',
+            isDisabled: 'El cliente está desactivado',
+            isFrozen: 'El cliente está congelado',
+            hasDebt: 'El cliente tiene riesgo',
+            notChecked: 'El cliente no está comprobado',
+            noWebAccess: 'El acceso web está desactivado'
+        },
+        summary: {
+            basicData: 'Datos básicos',
+            fiscalAddress: 'Dirección fiscal',
+            fiscalData: 'Datos fiscales',
+            billingData: 'Datos de facturación',
+            consignee: 'Consignatario',
+            businessData: 'Datos comerciales',
+            financialData: 'Datos financieros',
+            customerId: 'ID cliente',
+            name: 'Nombre',
+            contact: 'Contacto',
+            phone: 'Teléfono',
+            mobile: 'Móvil',
+            email: 'Email',
+            salesPerson: 'Comercial',
+            contactChannel: 'Canal de contacto',
+            socialName: 'Razón social',
+            fiscalId: 'NIF/CIF',
+            postcode: 'Código postal',
+            province: 'Provincia',
+            country: 'País',
+            street: 'Calle',
+            isEqualizated: 'Equalizado',
+            isActive: 'Activo',
+            invoiceByAddress: 'Facturar por consignatario',
+            verifiedData: 'Datos verificados',
+            hasToInvoice: 'Facturar',
+            notifyByEmail: 'Notificar por email',
+            vies: 'VIES',
+            payMethod: 'Método de pago',
+            bankAccount: 'Cuenta bancaria',
+            dueDay: 'Día de pago',
+            hasLcr: 'Recibido LCR',
+            hasCoreVnl: 'Recibido core VNL',
+            hasB2BVnl: 'Recibido B2B VNL',
+            addressName: 'Nombre de la dirección',
+            addressCity: 'Ciudad',
+            addressStreet: 'Calle',
+            username: 'Usuario',
+            webAccess: 'Acceso web',
+            totalGreuge: 'Greuge total',
+            mana: 'Maná',
+            priceIncreasingRate: 'Ratio de incremento de precio',
+            averageInvoiced: 'Facturación media',
+            claimRate: 'Ratio de reclamaciones',
+            risk: 'Riesgo',
+            riskInfo: 'Facturas menos recibos mas pedidos sin facturar',
+            credit: 'Crédito',
+            creditInfo: `Riesgo máximo asumido por la empresa`,
+            securedCredit: 'Crédito asegurado',
+            securedCreditInfo: `Riesgo máximo asumido por Solunion`,
+            balance: 'Balance',
+            balanceInfo: 'Facturas menos recibos',
+            balanceDue: 'Saldo vencido',
+            balanceDueInfo: 'Facturas fuera de plazo menos recibos',
+            recoverySince: 'Recobro desde',
         },
         basicData: {
             socialName: 'Nombre fiscal',
@@ -74,6 +140,24 @@ export default {
             list: 'Listado',
             createTicket: 'Crear ticket',
             basicData: 'Datos básicos'
+        },
+        list: {
+            nickname: 'Alias',
+            state: 'Estado',
+            shipped: 'Enviado',
+            landed: 'Entregado',
+            salesPerson: 'Comercial',
+            total: 'Total'
+        },
+        card: {
+            ticketId: 'ID ticket',
+            state: 'Estado',
+            customerId: 'ID cliente',
+            salesPerson: 'Comercial',
+            agency: 'Agencia',
+            shipped: 'Enviado',
+            warehouse: 'Almacén',
+            customerCard: 'Ficha del cliente'
         }
     },
     claim: {
@@ -133,6 +217,11 @@ export default {
             noData: 'Sin datos que mostrar',
             openCard: 'Ver ficha',
             openSummary: 'Abrir detalles'
+        },
+        card: {
+            mainList: 'Listado principal',
+            summary: 'Resumen',
+            moreOptions: 'Más opciones',
         }
     },
 };
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 2bec36bf0..2a023cb0d 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -50,29 +50,32 @@ function stateColor(code) {
             <div class="header bg-primary q-pa-sm">
                 <router-link :to="{ path: '/claim/list' }">
                     <q-btn round flat dense size="md" icon="view_list" color="white">
-                        <q-tooltip>Claim list</q-tooltip>
+                        <q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
                     </q-btn>
                 </router-link>
                 <router-link :to="{ name: 'ClaimSummary', params: { id: route.params.id } }">
                     <q-btn round flat dense size="md" icon="launch" color="white">
-                        <q-tooltip>Claim summary</q-tooltip>
+                        <q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
                     </q-btn>
                 </router-link>
 
                 <q-btn round flat dense size="md" icon="more_vert" color="white">
-                    <q-tooltip>More options</q-tooltip>
-                    <q-menu>
+                    <q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
+                    <!-- <q-menu>
                         <q-list>
                             <q-item clickable v-ripple>Option 1</q-item>
                             <q-item clickable v-ripple>Option 2</q-item>
                         </q-list>
-                    </q-menu>
+                    </q-menu> -->
                 </q-btn>
             </div>
 
             <div v-if="claim.client" class="q-py-sm">
-                <h5>{{ claim.client.name }}</h5>
                 <q-list>
+                    <q-item-label header class="ellipsis text-h5" :lines="1">
+                        {{ claim.client.name }}
+                        <q-tooltip>{{ claim.client.name }}</q-tooltip>
+                    </q-item-label>
                     <q-item>
                         <q-item-section>
                             <q-item-label caption>{{ t('claim.card.claimId') }}</q-item-label>
@@ -158,6 +161,12 @@ function stateColor(code) {
     </q-page-container>
 </template>
 
+<style lang="scss">
+.q-scrollarea__content {
+    max-width: 100%;
+}
+</style>
+
 <style lang="scss" scoped>
 .descriptor {
     h5 {
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 509478d32..f3c57f0e1 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { toDate } from 'src/filters';
+import SkeletonSummary from 'src/components/SkeletonSummary';
 
 onMounted(() => fetch());
 
@@ -91,59 +92,62 @@ function stateColor(code) {
 <template>
     <q-page class="q-pa-md">
         <div class="summary container">
-            <q-card v-if="claim">
-                <div class="header bg-primary q-pa-sm q-mb-md">{{ claim.id }} - {{ claim.client.name }}</div>
-                <q-list>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.summary.created') }}</q-item-label>
-                            <q-item-label>{{ toDate(claim.created) }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.summary.state') }}</q-item-label>
-                            <q-item-label>
-                                <q-chip :color="stateColor(claim.claimState.code)" dense>
-                                    {{ claim.claimState.description }}
-                                </q-chip>
-                            </q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.summary.assignedTo') }}</q-item-label>
-                            <q-item-label>{{ claim.worker.user.nickname }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.summary.attendedBy') }}</q-item-label>
-                            <q-item-label>{{ claim.client.salesPersonUser.name }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-                <q-card-section class="q-pa-md">
-                    <h6>{{ t('claim.summary.details.title') }}</h6>
-                    <q-table :columns="detailsColumns" :rows="salesClaimed" flat></q-table>
-                </q-card-section>
-                <q-card-section class="q-pa-md">
-                    <h6>Action</h6>
-                    <q-separator />
-                    <div id="slider-container">
-                        <q-slider
-                            v-model="claim.responsibility"
-                            label
-                            :label-value="'Responsibility'"
-                            label-always
-                            color="primary"
-                            markers
-                            :marker-labels="[
-                                { value: 1, label: 'Company' },
-                                { value: 5, label: 'Person' },
-                            ]"
-                            :min="1"
-                            :max="5"
-                            readonly
-                        />
-                    </div>
-                </q-card-section>
+            <q-card>
+                <skeleton-summary v-if="!claim" />
+                <template v-if="claim">
+                    <div class="header bg-primary q-pa-sm q-mb-md">{{ claim.id }} - {{ claim.client.name }}</div>
+                    <q-list>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.summary.created') }}</q-item-label>
+                                <q-item-label>{{ toDate(claim.created) }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.summary.state') }}</q-item-label>
+                                <q-item-label>
+                                    <q-chip :color="stateColor(claim.claimState.code)" dense>
+                                        {{ claim.claimState.description }}
+                                    </q-chip>
+                                </q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.summary.assignedTo') }}</q-item-label>
+                                <q-item-label>{{ claim.worker.user.nickname }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.summary.attendedBy') }}</q-item-label>
+                                <q-item-label>{{ claim.client.salesPersonUser.name }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+                    <q-card-section class="q-pa-md">
+                        <h6>{{ t('claim.summary.details.title') }}</h6>
+                        <q-table :columns="detailsColumns" :rows="salesClaimed" flat></q-table>
+                    </q-card-section>
+                    <q-card-section class="q-pa-md">
+                        <h6>Action</h6>
+                        <q-separator />
+                        <div id="slider-container">
+                            <q-slider
+                                v-model="claim.responsibility"
+                                label
+                                :label-value="'Responsibility'"
+                                label-always
+                                color="primary"
+                                markers
+                                :marker-labels="[
+                                    { value: 1, label: 'Company' },
+                                    { value: 5, label: 'Person' },
+                                ]"
+                                :min="1"
+                                :max="5"
+                                readonly
+                            />
+                        </div>
+                    </q-card-section>
+                </template>
             </q-card>
         </div>
     </q-page>
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 6b8cb75b8..d2352e174 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -71,9 +71,9 @@ function showPreview(id) {
                         <q-item-section>
                             <q-item-label caption>{{ t('claim.list.state') }}</q-item-label>
                             <q-item-label>
-                                <q-chip :color="stateColor(row.claimState.code)" dense>{{
-                                    row.claimState.description
-                                }}</q-chip>
+                                <q-chip :color="stateColor(row.claimState.code)" dense>
+                                    {{ row.claimState.description }}
+                                </q-chip>
                             </q-item-label>
                         </q-item-section>
                     </q-item>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 7a7195bad..5e37aefe2 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -31,29 +31,32 @@ async function fetch() {
             <div class="header bg-primary q-pa-sm">
                 <router-link :to="{ path: '/customer/list' }">
                     <q-btn round flat dense size="md" icon="view_list" color="white">
-                        <q-tooltip>Customer list</q-tooltip>
+                        <q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
                     </q-btn>
                 </router-link>
                 <router-link :to="{ name: 'CustomerSummary', params: { id: route.params.id } }">
                     <q-btn round flat dense size="md" icon="launch" color="white">
-                        <q-tooltip>Customer preview</q-tooltip>
+                        <q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
                     </q-btn>
                 </router-link>
 
                 <q-btn round flat dense size="md" icon="more_vert" color="white">
-                    <q-tooltip>More options</q-tooltip>
-                    <q-menu>
+                    <q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
+                    <!-- <q-menu>
                         <q-list>
                             <q-item clickable v-ripple>Option 1</q-item>
                             <q-item clickable v-ripple>Option 2</q-item>
                         </q-list>
-                    </q-menu>
+                    </q-menu> -->
                 </q-btn>
             </div>
 
             <div v-if="customer" class="q-py-sm">
-                <h5>{{ customer.name }}</h5>
                 <q-list>
+                    <q-item-label header class="ellipsis text-h5" :lines="1">
+                        {{ customer.name }}
+                        <q-tooltip>{{ customer.name }}</q-tooltip>
+                    </q-item-label>
                     <q-item>
                         <q-item-section>
                             <q-item-label caption>{{ t('customer.card.customerId') }}</q-item-label>
@@ -87,22 +90,22 @@ async function fetch() {
                 </q-list>
                 <q-card-actions class="q-gutter-md">
                     <q-icon v-if="customer.isActive == false" name="vn:disabled" size="xs" color="primary">
-                        <q-tooltip>Customer is disabled</q-tooltip>
+                        <q-tooltip>{{ t('customer.card.isDisabled') }}</q-tooltip>
                     </q-icon>
                     <q-icon v-if="customer.isFreezed == true" name="vn:frozen" size="xs" color="primary">
-                        <q-tooltip>Customer is frozen</q-tooltip>
+                        <q-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
                     </q-icon>
                     <q-icon v-if="customer.debt > customer.credit" name="vn:risk" size="xs" color="primary">
-                        <q-tooltip>Customer has debt</q-tooltip>
+                        <q-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
                     </q-icon>
                     <q-icon v-if="customer.isTaxDataChecked == false" name="vn:no036" size="xs" color="primary">
-                        <q-tooltip>Customer not checked</q-tooltip>
+                        <q-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
                     </q-icon>
                     <q-icon v-if="customer.account.active == false" name="vn:noweb" size="xs" color="primary">
-                        <q-tooltip>Web access is disabled</q-tooltip>
+                        <q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
                     </q-icon>
                 </q-card-actions>
-                <q-card-actions>
+                <!-- <q-card-actions>
                     <q-btn size="md" icon="vn:ticket" color="primary">
                         <q-tooltip>Ticket list</q-tooltip>
                     </q-btn>
@@ -122,7 +125,7 @@ async function fetch() {
                     <q-btn size="md" icon="expand_more" color="primary">
                         <q-tooltip>More options</q-tooltip>
                     </q-btn>
-                </q-card-actions>
+                </q-card-actions> -->
             </div>
             <!-- Skeleton -->
             <div id="descriptor-skeleton" v-if="!customer">
@@ -149,7 +152,7 @@ async function fetch() {
                     <q-item-section avatar>
                         <q-icon name="vn:settings" />
                     </q-item-section>
-                    <q-item-section>{{ t('claim.pageTitles.basicData') }}</q-item-section>
+                    <q-item-section>{{ t('customer.pageTitles.basicData') }}</q-item-section>
                 </q-item>
                 <!-- <q-item clickable v-ripple>
                     <q-item-section avatar>
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index bb0a7b8b0..486e84f96 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -3,7 +3,8 @@ import { onMounted, defineProps, ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
-// import { toDate } from 'src/filters';
+import { toCurrency, toPercentage, toDate } from 'src/filters';
+import SkeletonSummary from 'src/components/SkeletonSummary';
 
 onMounted(() => fetch());
 
@@ -26,18 +27,59 @@ function fetch() {
         customer.value = data;
     });
 }
+
+const balanceDue = computed(() => {
+    const [defaulter] = customer.value.defaulters;
+
+    return defaulter.amount;
+});
+
+const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
+
+const claimRate = computed(() => {
+    const data = customer.value;
+
+    return data.claimsRatio.claimingRate * 100;
+});
+
+const priceIncreasingRate = computed(() => {
+    const data = customer.value;
+
+    return data.claimsRatio.priceIncreasing / 100;
+});
+
+const debtWarning = computed(() => {
+    const data = customer.value;
+
+    return data.debt.debt > data.credit ? 'negative' : '';
+});
+
+const creditWarning = computed(() => {
+    const data = customer.value;
+    const tooMuchInsurance = data.credit > data.creditInsurance;
+    const noCreditInsurance = data.credit && data.creditInsurance == null;
+
+    return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
+});
 </script>
 
 <template>
     <q-page class="q-pa-md">
         <div class="summary container">
-            <q-card v-if="customer">
-                <div class="header bg-primary q-pa-sm q-mb-md">{{ customer.id }} - {{ customer.name }}</div>
-                <div class="row q-pa-md q-col-gutter-md q-mb-md">
-                    <div class="col">
-                        <div class="text-h6 text-grey">Basic data</div>
-                        <q-scroll-area class="fit descriptor">
+            <q-card>
+                <skeleton-summary v-if="!customer" />
+                <template v-if="customer">
+                    <div class="header bg-primary q-pa-sm q-mb-md">{{ customer.id }} - {{ customer.name }}</div>
+                    <div class="row q-pa-md q-col-gutter-md q-mb-md">
+                        <div class="col">
                             <q-list>
+                                <q-item-label header class="text-h6">
+                                    {{ t('customer.summary.basicData') }}
+                                    <router-link :to="{ name: 'CustomerBasicData' }">
+                                        <q-icon name="open_in_new" />
+                                    </router-link>
+                                </q-item-label>
+
                                 <q-item>
                                     <q-item-section>
                                         <q-item-label caption>{{ t('customer.summary.customerId') }}</q-item-label>
@@ -46,8 +88,8 @@ function fetch() {
                                 </q-item>
                                 <q-item>
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('customer.summary.socialName') }}</q-item-label>
-                                        <q-item-label>{{ customer.socialName }}</q-item-label>
+                                        <q-item-label caption>{{ t('customer.summary.name') }}</q-item-label>
+                                        <q-item-label>{{ customer.name }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item>
@@ -56,6 +98,12 @@ function fetch() {
                                         <q-item-label>{{ customer.contact }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.salesPerson') }}</q-item-label>
+                                        <q-item-label>{{ customer.salesPersonUser.name }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
                                 <q-item>
                                     <q-item-section>
                                         <q-item-label caption>{{ t('customer.summary.phone') }}</q-item-label>
@@ -74,12 +122,6 @@ function fetch() {
                                         <q-item-label>{{ customer.email }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
-                                <q-item>
-                                    <q-item-section>
-                                        <q-item-label caption>{{ t('customer.summary.salesPerson') }}</q-item-label>
-                                        <q-item-label>{{ customer.salesPersonUser.name }}</q-item-label>
-                                    </q-item-section>
-                                </q-item>
                                 <q-item>
                                     <q-item-section>
                                         <q-item-label caption>{{ t('customer.summary.contactChannel') }}</q-item-label>
@@ -87,66 +129,308 @@ function fetch() {
                                     </q-item-section>
                                 </q-item>
                             </q-list>
-                        </q-scroll-area>
+                        </div>
+                        <div class="col">
+                            <q-list>
+                                <q-item-label header class="text-h6">
+                                    {{ t('customer.summary.fiscalAddress') }}
+                                </q-item-label>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.socialName') }}</q-item-label>
+                                        <q-item-label>{{ customer.socialName }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.fiscalId') }}</q-item-label>
+                                        <q-item-label>{{ customer.fi }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.postcode') }}</q-item-label>
+                                        <q-item-label>{{ customer.postcode }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.province') }}</q-item-label>
+                                        <q-item-label>{{ customer.province.name }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.country') }}</q-item-label>
+                                        <q-item-label>{{ customer.country.country }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.street') }}</q-item-label>
+                                        <q-item-label>{{ customer.street }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
+                        </div>
+                        <div class="col">
+                            <q-list>
+                                <q-item-label header class="text-h6">
+                                    {{ t('customer.summary.fiscalData') }}
+                                </q-item-label>
+                                <q-item dense>
+                                    <q-checkbox
+                                        v-model="customer.isEqualizated"
+                                        :label="t('customer.summary.isEqualizated')"
+                                        disable
+                                    />
+                                </q-item>
+                                <q-item dense>
+                                    <q-checkbox
+                                        v-model="customer.isActive"
+                                        :label="t('customer.summary.isActive')"
+                                        disable
+                                    />
+                                </q-item>
+                                <q-item dense>
+                                    <q-checkbox
+                                        v-model="customer.hasToInvoiceByAddress"
+                                        :label="t('customer.summary.invoiceByAddress')"
+                                        disable
+                                    />
+                                </q-item>
+                                <q-item dense>
+                                    <q-checkbox
+                                        v-model="customer.isTaxDataChecked"
+                                        :label="t('customer.summary.verifiedData')"
+                                        disable
+                                    />
+                                </q-item>
+                                <q-item dense>
+                                    <q-checkbox
+                                        v-model="customer.hasToInvoice"
+                                        :label="t('customer.summary.hasToInvoice')"
+                                        disable
+                                    />
+                                </q-item>
+                                <q-item dense>
+                                    <q-checkbox
+                                        v-model="customer.isToBeMailed"
+                                        :label="t('customer.summary.notifyByEmail')"
+                                        disable
+                                    />
+                                </q-item>
+                                <q-item dense>
+                                    <q-checkbox v-model="customer.isVies" :label="t('customer.summary.vies')" disable />
+                                </q-item>
+                            </q-list>
+                        </div>
+                        <div class="col">
+                            <q-list>
+                                <q-item-label header class="text-h6">
+                                    {{ t('customer.summary.billingData') }}
+                                </q-item-label>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.payMethod') }}</q-item-label>
+                                        <q-item-label>{{ customer.payMethod.name }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.bankAccount') }}</q-item-label>
+                                        <q-item-label>{{ customer.iban }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.dueDay') }}</q-item-label>
+                                        <q-item-label>{{ customer.dueDay }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item dense>
+                                    <q-checkbox
+                                        v-model="customer.hasLcr"
+                                        :label="t('customer.summary.hasLcr')"
+                                        disable
+                                    />
+                                </q-item>
+                                <q-item dense>
+                                    <q-checkbox
+                                        v-model="customer.hasCoreVnl"
+                                        :label="t('customer.summary.hasCoreVnl')"
+                                        disable
+                                    />
+                                </q-item>
+                                <q-item dense>
+                                    <q-checkbox
+                                        v-model="customer.hasSepaVnl"
+                                        :label="t('customer.summary.hasB2BVnl')"
+                                        disable
+                                    />
+                                </q-item>
+                            </q-list>
+                        </div>
+                        <div class="col">
+                            <q-list>
+                                <q-item-label header class="text-h6">
+                                    {{ t('customer.summary.consignee') }}
+                                </q-item-label>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.addressName') }}</q-item-label>
+                                        <q-item-label>{{ customer.defaultAddress.nickname }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.addressCity') }}</q-item-label>
+                                        <q-item-label>{{ customer.defaultAddress.city }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.addressStreet') }}</q-item-label>
+                                        <q-item-label>{{ customer.defaultAddress.street }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
+                        </div>
+                        <div class="col">
+                            <q-list>
+                                <q-item-label header class="text-h6">
+                                    {{ t('customer.summary.webAccess') }}
+                                </q-item-label>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.username') }}</q-item-label>
+                                        <q-item-label>{{ customer.account.name }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item dense>
+                                    <q-checkbox
+                                        v-model="customer.account.active"
+                                        :label="t('customer.summary.webAccess')"
+                                        disable
+                                    />
+                                </q-item>
+                            </q-list>
+                        </div>
+                        <div class="col">
+                            <q-list>
+                                <q-item-label header class="text-h6">
+                                    {{ t('customer.summary.businessData') }}
+                                </q-item-label>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.totalGreuge') }}</q-item-label>
+                                        <q-item-label>{{ toCurrency(customer.totalGreuge) }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item v-if="customer.mana">
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.mana') }}</q-item-label>
+                                        <q-item-label>{{ toCurrency(customer.mana.mana) }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{
+                                            t('customer.summary.priceIncreasingRate')
+                                        }}</q-item-label>
+                                        <q-item-label>{{ toPercentage(priceIncreasingRate) }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item v-if="customer.averageInvoiced">
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.averageInvoiced') }}</q-item-label>
+                                        <q-item-label>{{ toCurrency(customer.averageInvoiced.invoiced) }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.claimRate') }}</q-item-label>
+                                        <q-item-label>{{ toPercentage(claimRate) }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
+                        </div>
+                        <div class="col">
+                            <q-list>
+                                <q-item-label header class="text-h6">
+                                    {{ t('customer.summary.financialData') }}
+                                </q-item-label>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.risk') }}</q-item-label>
+                                        <q-item-label :class="debtWarning">
+                                            {{ toCurrency(customer.debt.debt) }}
+                                        </q-item-label>
+                                    </q-item-section>
+                                    <q-item-section side>
+                                        <q-icon name="vn:info">
+                                            <q-tooltip>{{ t('customer.summary.riskInfo') }}</q-tooltip>
+                                        </q-icon>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.credit') }}</q-item-label>
+                                        <q-item-label :class="creditWarning">
+                                            {{ toCurrency(customer.credit) }}
+                                        </q-item-label>
+                                    </q-item-section>
+                                    <q-item-section side>
+                                        <q-icon name="vn:info">
+                                            <q-tooltip>{{ t('customer.summary.creditInfo') }}</q-tooltip>
+                                        </q-icon>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.securedCredit') }}</q-item-label>
+                                        <q-item-label>{{ toCurrency(customer.creditInsurance) }}</q-item-label>
+                                    </q-item-section>
+                                    <q-item-section side>
+                                        <q-icon name="vn:info">
+                                            <q-tooltip>{{ t('customer.summary.securedCreditInfo') }}</q-tooltip>
+                                        </q-icon>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.balance') }}</q-item-label>
+                                        <q-item-label>{{ toCurrency(customer.sumRisk) || toCurrency(0) }}</q-item-label>
+                                    </q-item-section>
+                                    <q-item-section side>
+                                        <q-icon name="vn:info">
+                                            <q-tooltip>{{ t('customer.summary.balanceInfo') }}</q-tooltip>
+                                        </q-icon>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.balanceDue') }}</q-item-label>
+                                        <q-item-label :class="balanceDueWarning">
+                                            {{ toCurrency(balanceDue) }}
+                                        </q-item-label>
+                                    </q-item-section>
+                                    <q-item-section side>
+                                        <q-icon name="vn:info">
+                                            <q-tooltip>{{ t('customer.summary.balanceDueInfo') }}</q-tooltip>
+                                        </q-icon>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item v-if="customer.recovery">
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.recoverySince') }}</q-item-label>
+                                        <q-item-label>{{ toDate(customer.recovery.started) }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
+                        </div>
                     </div>
-                    <div class="col">
-                        <q-list>
-                            <q-item-label header>Fiscal address</q-item-label>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.customerId') }}</q-item-label>
-                                    <q-item-label>{{ customer.id }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.socialName') }}</q-item-label>
-                                    <q-item-label>{{ customer.socialName }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                        </q-list>
-                    </div>
-                    <div class="col">
-                        <q-list>
-                            <q-item-label header>Fiscal data</q-item-label>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.customerId') }}</q-item-label>
-                                    <q-item-label>{{ customer.id }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.socialName') }}</q-item-label>
-                                    <q-item-label>{{ customer.socialName }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                        </q-list>
-                    </div>
-                </div>
-                <div class="row q-pa-md q-col-gutter-md q-mb-md">
-                    <div class="col">
-                        <div class="text-h6 text-grey">Basic data</div>
-                        <q-list>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.customerId') }}</q-item-label>
-                                    <q-item-label>{{ customer.id }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.socialName') }}</q-item-label>
-                                    <q-item-label>{{ customer.socialName }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                        </q-list>
-                    </div>
-                </div>
-                <!-- <q-card-section class="q-pa-md">
-                    <h6>{{ t('claim.summary.details.title') }}</h6>
-                    <q-table :columns="detailsColumns" :rows="salesClaimed" flat></q-table>
-                </q-card-section> -->
+                </template>
             </q-card>
         </div>
     </q-page>
@@ -160,10 +444,32 @@ function fetch() {
 
 .q-card {
     width: 100%;
-    max-width: 950px;
+    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;
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 7ac41ebf4..16a145782 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -1,24 +1,185 @@
 <script setup>
-import { computed } from 'vue';
-import { useState } from 'src/composables/useState';
-import { useRouter } from 'vue-router';
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
 
+import { useState } from 'src/composables/useState';
+import { toDate } from 'src/filters';
+
+const route = useRoute();
 const state = useState();
-const router = useRouter();
-const entityId = computed(function () {
-    return router.currentRoute.value.params.id;
+const { t } = useI18n();
+
+onMounted(async () => {
+    await fetch();
 });
+
+const ticket = ref(null);
+
+async function fetch() {
+    const entityId = route.params.id;
+
+    const { data } = await axios.get(`Tickets/${entityId}/summary`);
+
+    if (data) ticket.value = data;
+}
+
+function stateColor(state) {
+    if (state.code === 'OK') return 'text-green';
+    if (state.code === 'FREE') return 'text-blue-3';
+    if (state.alertLevel === 1) return 'text-orange';
+    if (state.alertLevel === 0) return 'text-red';
+}
 </script>
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
-        <q-scroll-area class="fit text-grey-8">
-            <router-link :to="{ path: '/customer/list' }">
-                <q-icon name="arrow_back" size="md" color="primary" />
-            </router-link>
-            <div>Customer ID: {{ entityId }}</div>
+    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+        <q-scroll-area class="fit text-grey-8 descriptor">
+            <div class="header bg-primary q-pa-sm">
+                <router-link :to="{ path: '/ticket/list' }">
+                    <q-btn round flat dense size="md" icon="view_list" color="white">
+                        <q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
+                    </q-btn>
+                </router-link>
+                <router-link :to="{ name: 'TicketSummary', params: { id: route.params.id } }">
+                    <q-btn round flat dense size="md" icon="launch" color="white">
+                        <q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
+                    </q-btn>
+                </router-link>
+
+                <q-btn round flat dense size="md" icon="more_vert" color="white">
+                    <q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
+                    <!-- <q-menu>
+                        <q-list>
+                            <q-item clickable v-ripple>Option 1</q-item>
+                            <q-item clickable v-ripple>Option 2</q-item>
+                        </q-list>
+                    </q-menu> -->
+                </q-btn>
+            </div>
+
+            <div v-if="ticket" class="q-py-sm">
+                <q-list>
+                    <q-item-label header class="ellipsis text-h5" :lines="1">
+                        {{ ticket.nickname }}
+                        <q-tooltip>{{ ticket.nickname }}</q-tooltip>
+                    </q-item-label>
+                    <q-item>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('ticket.card.ticketId') }}</q-item-label>
+                            <q-item-label>#{{ ticket.id }}</q-item-label>
+                        </q-item-section>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('ticket.card.state') }}</q-item-label>
+                            <q-item-label :class="stateColor(ticket.ticketState.state)">
+                                {{ ticket.ticketState.state.name }}
+                            </q-item-label>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('ticket.card.customerId') }}</q-item-label>
+                            <q-item-label>{{ ticket.clientFk }}</q-item-label>
+                        </q-item-section>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('ticket.card.salesPerson') }}</q-item-label>
+                            <q-item-label>{{ ticket.client.salesPersonUser.name }}</q-item-label>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('ticket.card.agency') }}</q-item-label>
+                            <q-item-label>{{ ticket.agencyMode.name }}</q-item-label>
+                        </q-item-section>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('ticket.card.shipped') }}</q-item-label>
+                            <q-item-label>{{ toDate(ticket.shipped) }}</q-item-label>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('ticket.card.warehouse') }}</q-item-label>
+                            <q-item-label>{{ ticket.warehouse.name }}</q-item-label>
+                        </q-item-section>
+                    </q-item>
+                </q-list>
+                <!-- <q-card-actions class="q-gutter-md">
+                    <q-icon v-if="customer.isActive == false" name="vn:disabled" size="xs" color="primary">
+                        <q-tooltip>{{ t('customer.card.isDisabled') }}</q-tooltip>
+                    </q-icon>
+                    <q-icon v-if="customer.isFreezed == true" name="vn:frozen" size="xs" color="primary">
+                        <q-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
+                    </q-icon>
+                    <q-icon v-if="customer.debt > customer.credit" name="vn:risk" size="xs" color="primary">
+                        <q-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
+                    </q-icon>
+                    <q-icon v-if="customer.isTaxDataChecked == false" name="vn:no036" size="xs" color="primary">
+                        <q-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
+                    </q-icon>
+                    <q-icon v-if="customer.account.active == false" name="vn:noweb" size="xs" color="primary">
+                        <q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
+                    </q-icon>
+                </q-card-actions> -->
+                <q-card-actions>
+                    <q-btn size="md" icon="vn:client" color="primary">
+                        <q-tooltip>{{ t('ticket.card.customerCard') }}</q-tooltip>
+                    </q-btn>
+                </q-card-actions>
+            </div>
+            <!-- Skeleton -->
+            <div id="descriptor-skeleton" v-if="!ticket">
+                <div class="col q-pl-sm q-pa-sm">
+                    <q-skeleton type="text" square height="45px" />
+                    <q-skeleton type="text" square height="18px" />
+                    <q-skeleton type="text" square height="18px" />
+                    <q-skeleton type="text" square height="18px" />
+                </div>
+
+                <q-card-actions>
+                    <q-skeleton size="40px" />
+                    <q-skeleton size="40px" />
+                    <q-skeleton size="40px" />
+                    <q-skeleton size="40px" />
+                    <q-skeleton size="40px" />
+                </q-card-actions>
+            </div>
+
+            <q-separator />
+
+            <q-list>
+                <!-- <q-item :to="{ name: 'TicketBasicData' }" clickable v-ripple>
+                    <q-item-section avatar>
+                        <q-icon name="vn:settings" />
+                    </q-item-section>
+                    <q-item-section>{{ t('ticket.pageTitles.basicData') }}</q-item-section>
+                </q-item> -->
+            </q-list>
         </q-scroll-area>
     </q-drawer>
     <q-page-container>
         <router-view></router-view>
     </q-page-container>
 </template>
+
+<style lang="scss">
+.q-scrollarea__content {
+    max-width: 100%;
+}
+</style>
+
+<style lang="scss" scoped>
+.descriptor {
+    h5 {
+        margin: 0 15px;
+    }
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .q-card__actions {
+        justify-content: center;
+    }
+}
+</style>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index ebc291933..2683ed42a 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -1,110 +1,140 @@
 <script setup>
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-const router = useRouter();
+import SmartCard from 'src/components/SmartCard.vue';
+import { toDate, toCurrency } from 'src/filters/index';
+// import CustomerSummary from './Card/CustomerSummary.vue';
 
-const customers = [
-    {
-        id: 1101,
-        name: 'Bruce Wayne',
-        username: 'batman',
-        email: 'batman@gotham',
-        phone: '555-555-5555',
-        expanded: ref(false),
-    },
-    {
-        id: 1102,
-        name: 'James Gordon',
-        username: 'jamesgordon',
-        email: 'jamesgordon@gotham',
-        phone: '555-555-1111',
-        expanded: ref(false),
-    },
-];
+const router = useRouter();
+const { t } = useI18n();
+
+const filter = {
+    include: [
+        {
+            relation: 'client',
+            scope: {
+                include: {
+                    relation: 'salesPersonUser',
+                    scope: {
+                        fields: ['name'],
+                    },
+                },
+            },
+        },
+        {
+            relation: 'ticketState',
+            scope: {
+                fields: ['stateFk', 'code', 'alertLevel'],
+                include: {
+                    relation: 'state',
+                    scope: {
+                        fields: ['name'],
+                    },
+                },
+            },
+        },
+    ],
+};
+
+function stateColor(state) {
+    if (state.code === 'OK') return 'green';
+    if (state.code === 'FREE') return 'blue-3';
+    if (state.alertLevel === 1) return 'orange';
+    if (state.alertLevel === 0) return 'red';
+}
 
 function navigate(id) {
-    router.push({ path: `/customer/${id}` });
+    router.push({ path: `/ticket/${id}` });
+}
+
+const preview = ref({
+    shown: false,
+});
+
+function showPreview(id) {
+    preview.value.shown = true;
+    preview.value.data = {
+        customerId: id,
+    };
 }
 </script>
 
 <template>
     <q-page class="q-pa-md">
-        <div class="column items-center q-gutter-y-md">
-            <q-card v-for="customer in customers" :key="customer.id" class="card">
-                <!-- v-ripple :to="{ path: '/dashboard' }" -->
-                <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
-                    <q-item-section class="q-pa-md">
-                        <div class="text-h6">{{ customer.name }}</div>
-                        <q-item-label caption>@{{ customer.username }}</q-item-label>
-                        <div class="q-mt-md">
-                            <q-list>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>Email</q-item-label>
-                                        <q-item-label>{{ customer.email }}</q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>Phone</q-item-label>
-                                        <q-item-label>{{ customer.phone }}</q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                            </q-list>
-                        </div>
-                    </q-item-section>
-                    <q-btn color="grey-7" round flat icon="more_vert">
-                        <q-menu cover auto-close>
-                            <q-list>
-                                <q-item clickable>
-                                    <q-item-section>Action 1</q-item-section>
-                                </q-item>
-                                <q-item clickable>
-                                    <q-item-section>Action 2</q-item-section>
-                                </q-item>
-                            </q-list>
-                        </q-menu>
-                    </q-btn>
-                    <q-separator vertical />
-                    <q-card-actions vertical class="justify-between">
-                        <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(customer.id)" />
-                        <q-btn flat round color="accent" icon="preview" />
-                        <q-btn flat round color="accent" icon="vn:ticket" />
-                        <q-card-actions>
-                            <q-btn
-                                color="grey"
-                                round
-                                flat
-                                dense
-                                :icon="customer.expanded.value ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
-                                @click="customer.expanded.value = !customer.expanded.value"
-                            />
-                        </q-card-actions>
-                    </q-card-actions>
-                </q-item>
-                <q-slide-transition>
-                    <div v-show="customer.expanded.value">
-                        <q-separator />
-                        <q-card-section class="text-subitle2">
-                            <q-list>
-                                <q-item clickable>
-                                    <q-item-section>
-                                        <q-item-label>Address</q-item-label>
-                                        <q-item-label caption>Avenue 11</q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                            </q-list>
-                        </q-card-section>
-                    </div>
-                </q-slide-transition>
-            </q-card>
-        </div>
-    </q-page>
-</template>
+        <smart-card url="/Tickets" :filter="filter" sort-by="id DESC" @on-navigate="navigate" auto-load>
+            <template #labels="{ row }">
+                <q-list>
+                    <q-item class="q-pa-none">
+                        <q-item-section>
+                            <q-item-label caption>{{ t('ticket.list.nickname') }}</q-item-label>
+                            <q-item-label>{{ row.nickname }}</q-item-label>
+                        </q-item-section>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('ticket.list.state') }}</q-item-label>
+                            <q-item-label>
+                                <q-chip :color="stateColor(row.ticketState)" dense>
+                                    {{ row.ticketState.state.name }}
+                                </q-chip>
+                            </q-item-label>
+                        </q-item-section>
+                    </q-item>
+                    <q-item class="q-pa-none">
+                        <q-item-section>
+                            <q-item-label caption>{{ t('ticket.list.shipped') }}</q-item-label>
+                            <q-item-label>{{ toDate(row.shipped) }}</q-item-label>
+                        </q-item-section>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('ticket.list.landed') }}</q-item-label>
+                            <q-item-label>{{ toDate(row.landed) }}</q-item-label>
+                        </q-item-section>
+                    </q-item>
+                    <q-item class="q-pa-none">
+                        <q-item-section v-if="row.client.salesPersonUser">
+                            <q-item-label caption>{{ t('ticket.list.salesPerson') }}</q-item-label>
+                            <q-item-label>{{ row.client.salesPersonUser.name }}</q-item-label>
+                        </q-item-section>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('ticket.list.total') }}</q-item-label>
+                            <q-item-label>{{ toCurrency(row.totalWithVat) }}</q-item-label>
+                        </q-item-section>
+                    </q-item>
+                </q-list>
+            </template>
+            <template #actions="{ row }">
+                <q-btn color="grey-7" round flat icon="more_vert">
+                    <q-tooltip>{{ t('customer.list.moreOptions') }}</q-tooltip>
+                    <q-menu cover auto-close>
+                        <q-list>
+                            <q-item clickable>
+                                <q-item-section avatar>
+                                    <q-icon name="add" />
+                                </q-item-section>
+                                <q-item-section>Add a note</q-item-section>
+                            </q-item>
+                            <q-item clickable>
+                                <q-item-section avatar>
+                                    <q-icon name="history" />
+                                </q-item-section>
+                                <q-item-section>Display customer history</q-item-section>
+                            </q-item>
+                        </q-list>
+                    </q-menu>
+                </q-btn>
 
-<style lang="scss" scoped>
-.card {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
+                <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
+                    <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
+                </q-btn>
+                <q-btn flat round color="grey-7" icon="preview" @click="showPreview(row.id)">
+                    <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
+                </q-btn>
+                <q-btn flat round color="grey-7" icon="vn:ticket">
+                    <q-tooltip>{{ t('customer.list.customerOrders') }}</q-tooltip>
+                </q-btn>
+            </template>
+        </smart-card>
+    </q-page>
+    <!-- <q-dialog v-model="preview.shown">
+        <customer-summary :customer-id="preview.data.customerId" />
+    </q-dialog> -->
+</template>
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index e224ff824..a95c9c455 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -4,7 +4,6 @@ export default {
     name: 'Ticket',
     path: '/ticket',
     meta: {
-        roles: ['developer'],
         title: 'tickets',
         icon: 'vn:ticket'
     },
@@ -43,8 +42,16 @@ export default {
             name: 'TicketCard',
             path: ':id',
             component: () => import('src/pages/Ticket/Card/TicketCard.vue'),
-            redirect: { name: 'TicketBasicData' },
+            redirect: { name: 'TicketSummary' },
             children: [
+                {
+                    name: 'TicketSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary'
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketSummary.vue'),
+                },
                 {
                     name: 'TicketBasicData',
                     path: 'basic-data',