Customer basic data & skeleton

src/components/SkeletonForm.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="row q-gutter-md q-mb-md">
+        <div class="col">
+            <q-skeleton type="QInput" square />
+        </div>
+        <div class="col">
+            <q-skeleton type="QInput" square />
+        </div>
+    </div>
+    <div class="row q-gutter-md q-mb-md">
+        <div class="col">
+            <q-skeleton type="QInput" square />
+        </div>
+        <div class="col">
+            <q-skeleton type="QInput" square />
+        </div>
+    </div>
+    <div class="row q-gutter-md q-mb-md">
+        <div class="col">
+            <q-skeleton type="QInput" square />
+        </div>
+        <div class="col">
+            <q-skeleton type="QInput" square />
+        </div>
+    </div>
+    <div class="row q-gutter-md">
+        <q-skeleton type="QBtn" />
+        <q-skeleton type="QBtn" />
+    </div>
+</template>

src/composables/useValidator.js

@@ -33,13 +33,24 @@ export function useValidator() {
             return validations(validation)[validation.validation];
         });
 
+        if (property === 'socialName') {
+            console.log(modelValidations[property])
+        }
+
         return rules;
     }
 
     const { t } = useI18n();
     const validations = function (validation) {
+
         return {
-            presence: (value) => !validator.isEmpty(value ? String(value) : '') || t(validation.message),
+            presence: (value) => {
+                let message = `Value can't be empty`;
+                if (validation.message)
+                    message = t(validation.message) || validation.message
+
+                return !validator.isEmpty(value ? String(value) : '') || message
+            },
             length: (value) => {
                 const options = {
                     min: validation.min || validation.is,

src/filters/index.js

@@ -1,7 +1,9 @@
 import toLowerCase from './toLowerCase';
 import toDate from './toDate';
+import toCurrency from './toCurrency';
 
 export {
     toLowerCase,
-    toDate
+    toDate,
+    toCurrency,
 };

src/filters/toCurrency.js

@@ -0,0 +1,21 @@
+import { useI18n } from 'vue-i18n';
+
+export default function (value, symbol = 'EUR', fractionSize = 2) {
+    if (!value) return;
+
+    const { locale } = useI18n();
+
+    const options = {
+        style: 'currency',
+        currency: symbol,
+        minimumFractionDigits: fractionSize,
+        maximumFractionDigits: fractionSize
+    };
+
+    const lang = locale.value == 'es' ? 'de' : locale.value;
+
+    return new Intl.NumberFormat(lang, options)
+        .format(value);
+
+
+}

src/i18n/en/index.js

@@ -13,7 +13,8 @@ export default {
         logOut: 'Log out',
         dataSaved: 'Data saved',
         save: 'Save',
-        reset: 'Reset'
+        reset: 'Reset',
+        noChanges: 'No changes to save'
     },
     moduleIndex: {
         allModules: 'All modules'
@@ -50,6 +51,34 @@ export default {
             email: 'Email',
             customerOrders: 'Display customer orders',
             moreOptions: 'More options'
+        },
+        card: {
+            customerId: 'Claim ID',
+            salesPerson: 'Sales person',
+            credit: 'Credit',
+            securedCredit: 'Secured credit',
+            payMethod: 'Pay method',
+            debt: 'Debt'
+        },
+        summary: {
+            customerId: 'Customer ID',
+            socialName: 'Social name',
+            contact: 'Contact',
+            phone: 'Phone',
+            mobile: 'Mobile',
+            email: 'Email',
+            salesPerson: 'Sales person',
+            contactChannel: 'Contact channel',
+        },
+        basicData: {
+            socialName: 'Fiscal name',
+            businessType: 'Business type',
+            contact: 'Contact',
+            email: 'Email',
+            phone: 'Phone',
+            mobile: 'Mobile',
+            salesPerson: 'Sales person',
+            contactChannel: 'Contact channel'
         }
     },
     ticket: {
@@ -83,14 +112,6 @@ export default {
             customerSummary: 'Customer summary',
             claimedTicket: 'Claimed ticket'
         },
-        basicData: {
-            customer: 'Customer',
-            assignedTo: 'Assigned',
-            created: 'Created',
-            state: 'State',
-            packages: 'Packages',
-            picked: 'Picked',
-        },
         summary: {
             customer: 'Customer',
             assignedTo: 'Assigned',
@@ -105,7 +126,15 @@ export default {
                     quantity: 'Quantity'
                 }
             },
-        }
+        },
+        basicData: {
+            customer: 'Customer',
+            assignedTo: 'Assigned',
+            created: 'Created',
+            state: 'State',
+            packages: 'Packages',
+            picked: 'Picked',
+        },
     },
     components: {
         topbar: {},

src/i18n/es/index.js

@@ -51,6 +51,21 @@ export default {
             email: 'Email',
             customerOrders: 'Mostrar órdenes del cliente',
             moreOptions: 'Más opciones'
+        },
+        card: {
+            customerId: 'ID cliente',
+            credit: 'Crédito',
+            securedCredit: 'Crédito asegurado'
+        },
+        basicData: {
+            socialName: 'Nombre fiscal',
+            businessType: 'Tipo de negocio',
+            contact: 'Contacto',
+            email: 'Email',
+            phone: 'Teléfono',
+            mobile: 'Móvil',
+            salesPerson: 'Comercial',
+            contactChannel: 'Canal de contacto'
         }
     },
     ticket: {

src/pages/Claim/Card/ClaimBasicData.vue

@@ -6,6 +6,7 @@ import { useQuasar } from 'quasar';
 import axios from 'axios';
 import { useSession } from 'src/composables/useSession';
 import { useValidator } from 'src/composables/useValidator';
+import SkeletonForm from 'src/components/SkeletonForm.vue';
 
 onMounted(() => {
     fetch();
@@ -50,7 +51,7 @@ const workersCopy = ref([]);
 function fetchWorkers() {
     const filter = {
         where: {
-            role: 'employee',
+            role: 'salesPerson',
         },
     };
     const options = { params: { filter } };
@@ -134,13 +135,14 @@ function onReset() {
     <q-page class="q-pa-md">
         <div class="container">
             <q-card class="q-pa-md">
+                <skeleton-form v-if="!claim" />
                 <q-form v-if="claim" @submit="save" @reset="onReset" greedy>
                     <div class="row q-gutter-md q-mb-md">
                         <div class="col">
                             <q-input v-model="claim.client.name" :label="t('claim.basicData.customer')" disable />
                         </div>
                         <div class="col">
-                            <q-input v-model="claim.created" mask="####-##-##" fill-mask="_">
+                            <q-input v-model="claim.created" mask="####-##-##" fill-mask="_" autofocus>
                                 <template #append>
                                     <q-icon name="event" class="cursor-pointer">
                                         <q-popup-proxy cover transition-show="scale" transition-hide="scale">

src/pages/Claim/Card/ClaimCard.vue

@@ -4,7 +4,7 @@ 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/index';
+import { toDate } from 'src/filters';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -47,7 +47,7 @@ function stateColor(code) {
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit text-grey-8 descriptor">
-            <div class="header bg-orange q-pa-sm">
+            <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>
@@ -144,7 +144,7 @@ function stateColor(code) {
             <q-separator />
 
             <q-list>
-                <q-item :to="{ name: 'ClaimBasicData' }" clickable v-ripple active-class="text-orange">
+                <q-item :to="{ name: 'ClaimBasicData' }" clickable v-ripple>
                     <q-item-section avatar>
                         <q-icon name="vn:settings" />
                     </q-item-section>

src/pages/Claim/Card/ClaimSummary.vue

@@ -92,7 +92,7 @@ function stateColor(code) {
     <q-page class="q-pa-md">
         <div class="summary container">
             <q-card v-if="claim">
-                <div class="header bg-orange q-pa-sm q-mb-md">{{ claim.id }} - {{ claim.client.name }}</div>
+                <div class="header bg-primary q-pa-sm q-mb-md">{{ claim.id }} - {{ claim.client.name }}</div>
                 <q-list>
                     <q-item>
                         <q-item-section>

src/pages/Claim/ClaimList.vue

@@ -39,6 +39,7 @@ function navigate(id) {
 const preview = ref({
     shown: false,
 });
+
 function showPreview(id) {
     preview.value.shown = true;
     preview.value.data = {
@@ -58,7 +59,7 @@ function showPreview(id) {
                             <q-item-label>{{ row.client.name }}</q-item-label>
                         </q-item-section>
                         <q-item-section>
-                            <q-item-label caption>{{ t('claim.list.assigned') }}</q-item-label>
+                            <q-item-label caption>{{ t('claim.list.assignedTo') }}</q-item-label>
                             <q-item-label>{{ row.worker.user.name }}</q-item-label>
                         </q-item-section>
                     </q-item>

src/pages/Customer/Card/CustomerBasicData.vue

@@ -1,5 +1,248 @@
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import axios from 'axios';
+import { useSession } from 'src/composables/useSession';
+import { useValidator } from 'src/composables/useValidator';
+import SkeletonForm from 'src/components/SkeletonForm.vue';
+
+onMounted(() => {
+    fetch();
+    fetchWorkers();
+    fetchBusinessTypes();
+    fetchContactChannels();
+});
+
+const route = useRoute();
+const quasar = useQuasar();
+const { t } = useI18n();
+const { validate } = useValidator();
+const session = useSession();
+const token = session.getToken();
+
+const customer = ref(null);
+const customerCopy = ref(null);
+const hasChanges = ref(false);
+
+function fetch() {
+    const id = route.params.id;
+    const filter = {
+        include: [],
+    };
+    const options = { params: { filter } };
+    axios.get(`Clients/${id}`, options).then(({ data }) => {
+        customer.value = data;
+        customerCopy.value = Object.assign({}, data);
+
+        watch(customer.value, () => (hasChanges.value = true));
+    });
+}
+
+const businessTypes = ref([]);
+function fetchBusinessTypes() {
+    axios.get(`BusinessTypes`).then(({ data }) => {
+        businessTypes.value = data;
+    });
+}
+
+const contactChannels = ref([]);
+function fetchContactChannels() {
+    axios.get(`ContactChannels`).then(({ data }) => {
+        contactChannels.value = data;
+    });
+}
+
+const workers = ref([]);
+const workersCopy = ref([]);
+function fetchWorkers() {
+    const filter = {
+        where: {
+            role: 'salesPerson',
+        },
+    };
+    const options = { params: { filter } };
+    axios.get(`Workers/activeWithRole`, options).then(({ data }) => {
+        workers.value = data;
+        workersCopy.value = data;
+    });
+}
+
+function filter(value, update, options, originalOptions, filter) {
+    update(
+        () => {
+            if (value === '') {
+                options.value = originalOptions.value;
+
+                return;
+            }
+
+            options.value = options.value.filter(filter);
+        },
+        (ref) => {
+            ref.setOptionIndex(-1);
+            ref.moveOptionSelection(1, true);
+        }
+    );
+}
+
+function filterWorkers(value, update) {
+    const search = value.toLowerCase();
+
+    filter(value, update, workers, workersCopy, (row) => {
+        const id = row.id;
+        const name = row.name.toLowerCase();
+
+        const idMatch = id == search;
+        const nameMatch = name.indexOf(search) > -1;
+
+        return idMatch || nameMatch;
+    });
+}
+
+function save() {
+    const id = route.params.id;
+    const formData = customer.value;
+
+    if (!hasChanges.value) {
+        return quasar.notify({
+            type: 'negative',
+            message: t('globals.noChanges'),
+        });
+    }
+
+    axios.patch(`Clients/${id}`, formData).then((hasChanges.value = false));
+}
+
+function onReset() {
+    customer.value = customerCopy.value;
+    hasChanges.value = false;
+}
+</script>
 <template>
     <q-page class="q-pa-md">
-        <q-card class="q-pa-md">Basic Data</q-card>
+        <div class="container">
+            <q-card class="q-pa-md">
+                <skeleton-form v-if="!customer" />
+                <q-form v-if="customer" @submit="save" @reset="onReset" greedy>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-input
+                                v-model="customer.socialName"
+                                :label="t('customer.basicData.socialName')"
+                                :rules="validate('client.socialName')"
+                                autofocus
+                            />
+                        </div>
+                        <div class="col">
+                            <q-select
+                                v-model="customer.businessTypeFk"
+                                :options="businessTypes"
+                                option-value="code"
+                                option-label="description"
+                                emit-value
+                                :label="t('customer.basicData.businessType')"
+                                map-options
+                                :rules="validate('client.businessTypeFk')"
+                                :input-debounce="0"
+                            />
+                        </div>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-input
+                                v-model="customer.contact"
+                                :label="t('customer.basicData.contact')"
+                                :rules="validate('client.contact')"
+                                clearable
+                            />
+                        </div>
+                        <div class="col">
+                            <q-input
+                                v-model="customer.email"
+                                type="email"
+                                :label="t('customer.basicData.email')"
+                                :rules="validate('client.email')"
+                                clearable
+                            />
+                        </div>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-input
+                                v-model="customer.phone"
+                                :label="t('customer.basicData.phone')"
+                                :rules="validate('client.phone')"
+                                clearable
+                            />
+                        </div>
+                        <div class="col">
+                            <q-input
+                                v-model="customer.mobile"
+                                :label="t('customer.basicData.mobile')"
+                                :rules="validate('client.mobile')"
+                                clearable
+                            />
+                        </div>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-select
+                                v-model="customer.salesPersonFk"
+                                :options="workers"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                :label="t('customer.basicData.salesPerson')"
+                                map-options
+                                use-input
+                                @filter="filterWorkers"
+                                :rules="validate('client.salesPersonFk')"
+                                :input-debounce="0"
+                            >
+                                <template #before>
+                                    <q-avatar color="orange">
+                                        <q-img
+                                            v-if="customer.salesPersonFk"
+                                            :src="`/api/Images/user/160x160/${customer.salesPersonFk}/download?access_token=${token}`"
+                                            spinner-color="white"
+                                        />
+                                    </q-avatar>
+                                </template>
+                            </q-select>
+                        </div>
+                        <div class="col">
+                            <q-select
+                                v-model="customer.contactChannelFk"
+                                :options="contactChannels"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                :label="t('customer.basicData.contactChannel')"
+                                map-options
+                                :rules="validate('client.contactChannelFk')"
+                                :input-debounce="0"
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <q-btn :label="t('globals.save')" type="submit" color="primary" />
+                        <q-btn :label="t('globals.reset')" type="reset" class="q-ml-sm" color="primary" flat />
+                    </div>
+                </q-form>
+            </q-card>
+        </div>
     </q-page>
 </template>
+
+<style lang="scss" scoped>
+.container {
+    display: flex;
+    justify-content: center;
+}
+
+.q-card {
+    width: 800px;
+}
+</style>

src/pages/Customer/Card/CustomerCard.vue

@@ -1,23 +1,26 @@
 <script setup>
-import { computed, ref, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
-import { useState } from 'src/composables/useState';
+import { useRoute } from 'vue-router';
-import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 
+import { useState } from 'src/composables/useState';
+import { toCurrency } from 'src/filters';
+
+const route = useRoute();
 const state = useState();
-const router = useRouter();
+const { t } = useI18n();
 
 onMounted(async () => {
     await fetch();
 });
 
-const entityId = computed(function () {
+const customer = ref(null);
-    return router.currentRoute.value.params.id;
-});
-const customer = ref({});
 
 async function fetch() {
-    const { data } = await axios.get(`Clients/${entityId.value}`);
+    const entityId = route.params.id;
+
+    const { data } = await axios.get(`Clients/${entityId}/getCard`);
 
     if (data) customer.value = data;
 }
@@ -25,13 +28,13 @@ async function fetch() {
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit text-grey-8 descriptor">
-            <div class="header bg-orange q-pa-sm">
+            <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-btn>
                 </router-link>
-                <router-link :to="{ path: '/customer/list' }">
+                <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-btn>
@@ -48,55 +51,107 @@ async function fetch() {
                 </q-btn>
             </div>
 
+            <div v-if="customer" class="q-py-sm">
                 <h5>{{ customer.name }}</h5>
-
                 <q-list>
                     <q-item>
                         <q-item-section>
-                        <q-item-label caption>Customer ID</q-item-label>
+                            <q-item-label caption>{{ t('customer.card.customerId') }}</q-item-label>
                             <q-item-label>#{{ customer.id }}</q-item-label>
                         </q-item-section>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('customer.card.salesPerson') }}</q-item-label>
+                            <q-item-label>{{ customer.salesPersonUser.name }}</q-item-label>
+                        </q-item-section>
                     </q-item>
                     <q-item>
                         <q-item-section>
-                        <q-item-label caption>Email</q-item-label>
+                            <q-item-label caption>{{ t('customer.card.credit') }}</q-item-label>
-                        <q-item-label>{{ customer.email }}</q-item-label>
+                            <q-item-label>{{ toCurrency(customer.credit) }}</q-item-label>
+                        </q-item-section>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('customer.card.securedCredit') }}</q-item-label>
+                            <q-item-label>{{ toCurrency(customer.creditInsurance) }}</q-item-label>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('customer.card.payMethod') }}</q-item-label>
+                            <q-item-label>{{ customer.payMethod.name }}</q-item-label>
+                        </q-item-section>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('customer.card.debt') }}</q-item-label>
+                            <q-item-label>{{ toCurrency(customer.debt) }}</q-item-label>
                         </q-item-section>
                     </q-item>
                 </q-list>
-
+                <q-card-actions class="q-gutter-md">
+                    <q-icon v-if="customer.isActive == false" name="vn:disabled" size="xs" color="primary">
+                        <q-tooltip>Customer is disabled</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-icon>
+                    <q-icon v-if="customer.debt > customer.credit" name="vn:risk" size="xs" color="primary">
+                        <q-tooltip>Customer has debt</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-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-icon>
+                </q-card-actions>
                 <q-card-actions>
-                <q-btn size="md" icon="vn:ticket" color="orange">
+                    <q-btn size="md" icon="vn:ticket" color="primary">
                         <q-tooltip>Ticket list</q-tooltip>
                     </q-btn>
 
-                <q-btn size="md" icon="vn:invoice-out" color="orange">
+                    <q-btn size="md" icon="vn:invoice-out" color="primary">
                         <q-tooltip>Invoice Out list</q-tooltip>
                     </q-btn>
 
-                <q-btn size="md" icon="vn:basketadd" color="orange">
+                    <q-btn size="md" icon="vn:basketadd" color="primary">
                         <q-tooltip>Order list</q-tooltip>
                     </q-btn>
 
-                <q-btn size="md" icon="face" color="orange">
+                    <q-btn size="md" icon="face" color="primary">
                         <q-tooltip>View user</q-tooltip>
                     </q-btn>
 
-                <q-btn size="md" icon="expand_more" color="orange">
+                    <q-btn size="md" icon="expand_more" color="primary">
                         <q-tooltip>More options</q-tooltip>
                     </q-btn>
                 </q-card-actions>
+            </div>
+            <!-- Skeleton -->
+            <div id="descriptor-skeleton" v-if="!customer">
+                <div class="col q-pl-sm q-pa-sm">
+                    <q-skeleton type="text" square height="45px" />
+                    <q-skeleton type="text" square height="18px" />
+                    <q-skeleton type="text" square height="18px" />
+                    <q-skeleton type="text" square height="18px" />
+                </div>
+
+                <q-card-actions>
+                    <q-skeleton size="40px" />
+                    <q-skeleton size="40px" />
+                    <q-skeleton size="40px" />
+                    <q-skeleton size="40px" />
+                    <q-skeleton size="40px" />
+                </q-card-actions>
+            </div>
 
             <q-separator />
 
             <q-list>
-                <q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple active-class="text-orange">
+                <q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple>
                     <q-item-section avatar>
-                        <q-icon name="person" />
+                        <q-icon name="vn:settings" />
                     </q-item-section>
-                    <q-item-section>Basic data</q-item-section>
+                    <q-item-section>{{ t('claim.pageTitles.basicData') }}</q-item-section>
                 </q-item>
-                <q-item clickable v-ripple>
+                <!-- <q-item clickable v-ripple>
                     <q-item-section avatar>
                         <q-icon name="notes" />
                     </q-item-section>
@@ -111,7 +166,7 @@ async function fetch() {
                             <q-item-section>Option</q-item-section>
                         </q-item>
                     </q-list>
-                </q-expansion-item>
+                </q-expansion-item> -->
             </q-list>
         </q-scroll-area>
     </q-drawer>

src/pages/Customer/Card/CustomerSummary.vue

@@ -0,0 +1,188 @@
+<script setup>
+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';
+
+onMounted(() => fetch());
+
+const route = useRoute();
+const { t } = useI18n();
+
+const $props = defineProps({
+    customerId: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const entityId = computed(() => $props.customerId || route.params.id);
+
+const customer = ref(null);
+function fetch() {
+    const id = entityId.value;
+    axios.get(`Clients/${id}/summary`).then(({ data }) => {
+        customer.value = data;
+    });
+}
+</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-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-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.contact') }}</q-item-label>
+                                        <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.phone') }}</q-item-label>
+                                        <q-item-label>{{ customer.phone }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.mobile') }}</q-item-label>
+                                        <q-item-label>{{ customer.mobile }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.summary.email') }}</q-item-label>
+                                        <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>
+                                        <q-item-label>{{ customer.contactChannel.name }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
+                        </q-scroll-area>
+                    </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> -->
+            </q-card>
+        </div>
+    </q-page>
+</template>
+
+<style lang="scss" scoped>
+.container {
+    display: flex;
+    justify-content: center;
+}
+
+.q-card {
+    width: 100%;
+    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%;
+            }
+        }
+    }
+}
+</style>

src/pages/Customer/CustomerList.vue

@@ -1,7 +1,9 @@
 <script setup>
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import SmartCard from 'src/components/SmartCard.vue';
+import CustomerSummary from './Card/CustomerSummary.vue';
 
 const router = useRouter();
 const { t } = useI18n();
@@ -9,6 +11,17 @@ const { t } = useI18n();
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
+
+const preview = ref({
+    shown: false,
+});
+
+function showPreview(id) {
+    preview.value.shown = true;
+    preview.value.data = {
+        customerId: id,
+    };
+}
 </script>
 
 <template>
@@ -54,7 +67,7 @@ function navigate(id) {
                 <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
                     <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
                 </q-btn>
-                <q-btn flat round color="grey-7" icon="preview">
+                <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">
@@ -63,4 +76,7 @@ function navigate(id) {
             </template>
         </smart-card>
     </q-page>
+    <q-dialog v-model="preview.shown">
+        <customer-summary :customer-id="preview.data.customerId" />
+    </q-dialog>
 </template>

src/router/modules/customer.js

@@ -4,7 +4,6 @@ export default {
     path: '/customer',
     name: 'Customer',
     meta: {
-        roles: ['developer'],
         title: 'customers',
         icon: 'vn:client'
     },
@@ -41,8 +40,16 @@ export default {
             name: 'CustomerCard',
             path: ':id',
             component: () => import('src/pages/Customer/Card/CustomerCard.vue'),
-            redirect: { name: 'CustomerBasicData' },
+            redirect: { name: 'CustomerSummary' },
             children: [
+                {
+                    name: 'CustomerSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary'
+                    },
+                    component: () => import('src/pages/Customer/Card/CustomerSummary.vue'),
+                },
                 {
                     path: 'basic-data',
                     name: 'CustomerBasicData',