From 5e867a368ebf0b97d5430b3d9d0c778dc97c11f2 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 27 Oct 2022 14:59:19 +0200
Subject: [PATCH 1/7] Changes

---
 src/components/FetchData.vue                  |  46 +++
 src/components/FormModel.vue                  |  97 +++++
 src/components/SkeletonForm.vue               |  48 +--
 src/composables/useState.js                   |  18 +
 src/composables/useValidator.js               |   4 -
 src/i18n/en/index.js                          |   3 +-
 src/i18n/es/index.js                          |   3 +-
 src/pages/Customer/Card/CustomerBasicData.vue | 354 ++++++++----------
 8 files changed, 343 insertions(+), 230 deletions(-)
 create mode 100644 src/components/FetchData.vue
 create mode 100644 src/components/FormModel.vue

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
new file mode 100644
index 000000000..3da3a8e5f
--- /dev/null
+++ b/src/components/FetchData.vue
@@ -0,0 +1,46 @@
+<script setup>
+import { h, onMounted } from 'vue';
+import axios from 'axios';
+
+const $props = defineProps({
+    autoLoad: {
+        type: Boolean,
+        default: false,
+    },
+    url: {
+        type: String,
+        default: '',
+    },
+    filter: {
+        type: Object,
+        default: null,
+    },
+    limit: {
+        type: String,
+        default: '20',
+    },
+});
+
+const emit = defineEmits(['fetch-data']);
+
+onMounted(async () => {
+    if ($props.autoLoad) {
+        await fetch();
+    }
+});
+
+async function fetch() {
+    const { data } = await axios.get($props.url, {
+        params: { filter: $props.filter },
+    });
+
+    return emit('fetch-data', data);
+}
+
+const render = () => {
+    return h('div', []);
+};
+</script>
+<template>
+    <render />
+</template>
diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
new file mode 100644
index 000000000..ebb8f57cf
--- /dev/null
+++ b/src/components/FormModel.vue
@@ -0,0 +1,97 @@
+<script setup>
+import { onMounted, onUnmounted, computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import axios from 'axios';
+
+import { useState } from 'src/composables/useState';
+import SkeletonForm from 'src/components/SkeletonForm.vue';
+
+const quasar = useQuasar();
+const { t } = useI18n();
+const state = useState();
+
+const $props = defineProps({
+    url: {
+        type: String,
+        default: '',
+    },
+    model: {
+        type: String,
+        default: '',
+    },
+    filter: {
+        type: Object,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['fetch-data']);
+
+defineExpose({
+    save,
+});
+
+onMounted(async () => await fetch());
+
+onUnmounted(() => {
+    state.unset($props.model);
+});
+
+const isLoading = ref(false);
+const hasChanges = ref(false);
+const formData = computed(() => state.get($props.model));
+const originalData = ref();
+
+async function fetch() {
+    const { data } = await axios.get($props.url, {
+        params: { filter: $props.filter },
+    });
+
+    state.set($props.model, data);
+    originalData.value = Object.assign({}, data);
+
+    watch(formData.value, () => (hasChanges.value = true));
+
+    return emit('fetch-data', state.get($props.model));
+}
+
+async function save() {
+    if (!hasChanges.value) {
+        return quasar.notify({
+            type: 'negative',
+            message: t('globals.noChanges'),
+        });
+    }
+    isLoading.value = true;
+    await new Promise((resolve) => {
+        setTimeout(resolve, 5000);
+    });
+    await axios.patch($props.url, formData.value);
+    isLoading.value = false;
+}
+
+function reset() {
+    state.set($props.model, originalData.value);
+    hasChanges.value = false;
+}
+</script>
+<template>
+    <q-banner v-if="hasChanges" inline-actions class="text-white bg-red"> You have changes pending to save </q-banner>
+    <q-form v-if="formData" @submit="save" @reset="reset" class="q-pa-md">
+        <slot name="form" :data="formData"></slot>
+        <slot name="actions">
+            <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
+                :disable="!hasChanges"
+            />
+        </slot>
+    </q-form>
+    <skeleton-form v-if="!formData" />
+    <q-inner-loading :showing="isLoading" :label="t('globals.pleaseWait')" color="primary" />
+</template>
diff --git a/src/components/SkeletonForm.vue b/src/components/SkeletonForm.vue
index 179744c26..f7c54ef77 100644
--- a/src/components/SkeletonForm.vue
+++ b/src/components/SkeletonForm.vue
@@ -1,30 +1,32 @@
 <template>
-    <div class="row q-gutter-md q-mb-md">
-        <div class="col">
-            <q-skeleton type="QInput" square />
+    <div class="q-pa-md">
+        <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="col">
-            <q-skeleton type="QInput" square />
+        <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>
-    <div class="row q-gutter-md q-mb-md">
-        <div class="col">
-            <q-skeleton type="QInput" square />
+        <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="col">
-            <q-skeleton type="QInput" square />
+        <div class="row q-gutter-md">
+            <q-skeleton type="QBtn" />
+            <q-skeleton type="QBtn" />
         </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>
diff --git a/src/composables/useState.js b/src/composables/useState.js
index e41e69e91..c17b8af5b 100644
--- a/src/composables/useState.js
+++ b/src/composables/useState.js
@@ -1,5 +1,7 @@
 import { ref, computed } from 'vue';
 
+const state = ref({});
+
 const user = ref({
     id: 0,
     name: '',
@@ -44,11 +46,27 @@ export function useState() {
         roles.value = data;
     }
 
+    function set(name, data) {
+        state.value[name] = ref(data);
+    }
+
+    function get(name) {
+        return state.value[name];
+    }
+
+    function unset(name) {
+        delete state.value[name];
+    }
+
+
     return {
         getUser,
         setUser,
         getRoles,
         setRoles,
+        set,
+        get,
+        unset,
         drawer
     };
 }
diff --git a/src/composables/useValidator.js b/src/composables/useValidator.js
index 16f6239f9..ef2dcbd90 100644
--- a/src/composables/useValidator.js
+++ b/src/composables/useValidator.js
@@ -33,10 +33,6 @@ export function useValidator() {
             return validations(validation)[validation.validation];
         });
 
-        if (property === 'socialName') {
-            console.log(modelValidations[property])
-        }
-
         return rules;
     }
 
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index aedd17e88..edb257336 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -23,7 +23,8 @@ export default {
         noChanges: 'No changes to save',
         confirmRemove: 'You are about to delete this row. Are you sure?',
         rowAdded: 'Row added',
-        rowRemoved: 'Row removed'
+        rowRemoved: 'Row removed',
+        pleaseWait: 'Please wait...'
     },
     moduleIndex: {
         allModules: 'All modules'
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index c478e5b23..999af76af 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -23,7 +23,8 @@ export default {
         noChanges: 'Sin cambios que guardar',
         confirmRemove: 'Vas a eliminar este registro. ¿Continuar?',
         rowAdded: 'Fila añadida',
-        rowRemoved: 'Fila eliminada'
+        rowRemoved: 'Fila eliminada',
+        pleaseWait: 'Por favor, espera...'
     },
     moduleIndex: {
         allModules: 'Todos los módulos'
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 68d185272..d47d8f08e 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -1,236 +1,188 @@
 <script setup>
-import { ref, onMounted, watch } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
-import axios from 'axios';
+// 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';
+import { useState } from 'src/composables/useState';
+import FetchData from 'src/components/FetchData.vue';
+import FormModel from 'src/components/FormModel.vue';
 
 onMounted(() => {
-    fetch();
-    fetchWorkers();
-    fetchBusinessTypes();
-    fetchContactChannels();
+    // fetch();
+    // fetchWorkers();
+    // fetchBusinessTypes();
+    // fetchContactChannels();
 });
 
 const route = useRoute();
-const quasar = useQuasar();
+// const quasar = useQuasar();
 const { t } = useI18n();
 const { validate } = useValidator();
+const state = useState();
 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 data2 = state.get('customer');
+console.log(data2);
 
 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;
-    });
-}
+const contactChannels = ref([]);
+const businessTypes = ref([]);
 
-function filter(value, update, options, originalOptions, filter) {
-    update(
-        () => {
-            if (value === '') {
-                options.value = originalOptions.value;
+// const customer = ref(null);
+// const customerCopy = ref(null);
+// const hasChanges = ref(false);
 
-                return;
-            }
+// function filter(value, update, options, originalOptions, filter) {
+//     update(
+//         () => {
+//             if (value === '') {
+//                 options.value = originalOptions.value;
 
-            options.value = options.value.filter(filter);
-        },
-        (ref) => {
-            ref.setOptionIndex(-1);
-            ref.moveOptionSelection(1, true);
-        }
-    );
-}
+//                 return;
+//             }
 
-function filterWorkers(value, update) {
-    const search = value.toLowerCase();
+//             options.value = options.value.filter(filter);
+//         },
+//         (ref) => {
+//             ref.setOptionIndex(-1);
+//             ref.moveOptionSelection(1, true);
+//         }
+//     );
+// }
 
-    filter(value, update, workers, workersCopy, (row) => {
-        const id = row.id;
-        const name = row.name.toLowerCase();
+// function filterWorkers(value, update) {
+//     const search = value.toLowerCase();
 
-        const idMatch = id == search;
-        const nameMatch = name.indexOf(search) > -1;
+//     filter(value, update, workers, workersCopy, (row) => {
+//         const id = row.id;
+//         const name = row.name.toLowerCase();
 
-        return idMatch || nameMatch;
-    });
-}
+//         const idMatch = id == search;
+//         const nameMatch = name.indexOf(search) > -1;
 
-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;
-}
+//         return idMatch || nameMatch;
+//     });
+// }
 </script>
 <template>
+    <fetch-data
+        url="Workers/activeWithRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @fetch-data="($data) => (workers = $data)"
+        auto-load
+    />
+    <fetch-data url="ContactChannels" @fetch-data="($data) => (contactChannels = $data)" auto-load />
+    <fetch-data url="BusinessTypes" @fetch-data="($data) => (businessTypes = $data)" auto-load />
     <q-page class="q-pa-md">
         <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
-                            />
+            <q-card>
+                <form-model :url="`Clients/${route.params.id}`" model="customer">
+                    <template #form="{ data }">
+                        <div class="row q-gutter-md q-mb-md">
+                            <div class="col">
+                                <q-input
+                                    v-model="data.socialName"
+                                    :label="t('customer.basicData.socialName')"
+                                    :rules="validate('client.socialName')"
+                                    autofocus
+                                />
+                            </div>
+                            <div class="col">
+                                <q-select
+                                    v-model="data.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="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 class="row q-gutter-md q-mb-md">
+                            <div class="col">
+                                <q-input
+                                    v-model="data.contact"
+                                    :label="t('customer.basicData.contact')"
+                                    :rules="validate('client.contact')"
+                                    clearable
+                                />
+                            </div>
+                            <div class="col">
+                                <q-input
+                                    v-model="data.email"
+                                    type="email"
+                                    :label="t('customer.basicData.email')"
+                                    :rules="validate('client.email')"
+                                    clearable
+                                />
+                            </div>
                         </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 class="row q-gutter-md q-mb-md">
+                            <div class="col">
+                                <q-input
+                                    v-model="data.phone"
+                                    :label="t('customer.basicData.phone')"
+                                    :rules="validate('client.phone')"
+                                    clearable
+                                />
+                            </div>
+                            <div class="col">
+                                <q-input
+                                    v-model="data.mobile"
+                                    :label="t('customer.basicData.mobile')"
+                                    :rules="validate('client.mobile')"
+                                    clearable
+                                />
+                            </div>
                         </div>
-                        <div class="col">
-                            <q-input
-                                v-model="customer.email"
-                                type="email"
-                                :label="t('customer.basicData.email')"
-                                :rules="validate('client.email')"
-                                clearable
-                            />
+                        <div class="row q-gutter-md q-mb-md">
+                            <div class="col">
+                                <q-select
+                                    v-model="data.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="data.salesPersonFk"
+                                                :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
+                                                spinner-color="white"
+                                            />
+                                        </q-avatar>
+                                    </template>
+                                </q-select>
+                            </div>
+                            <div class="col">
+                                <q-select
+                                    v-model="data.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>
-                    <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>
+                    </template>
+                </form-model>
             </q-card>
         </div>
     </q-page>

From bd908e5e93be8feb9285a96d21a251a528f9a4a9 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Mon, 31 Oct 2022 09:34:01 +0100
Subject: [PATCH 2/7] RMA refactor

---
 src/App.vue                                   |   2 +-
 src/components/FetchData.vue                  |   9 +-
 src/components/FormModel.vue                  |  57 ++-
 src/components/SmartCard.vue                  |  27 +-
 src/i18n/en/index.js                          |   1 +
 src/i18n/es/index.js                          |   1 +
 src/pages/Claim/Card/ClaimBasicData.vue       | 395 +++++++++---------
 src/pages/Claim/Card/ClaimCard.vue            |   2 +-
 src/pages/Claim/Card/ClaimRma.vue             |  79 ++--
 src/pages/Claim/ClaimCreate.vue               |  52 ---
 src/pages/Customer/Card/CustomerBasicData.vue |  82 ++--
 src/router/modules/claim.js                   |  12 +-
 12 files changed, 340 insertions(+), 379 deletions(-)
 delete mode 100644 src/pages/Claim/ClaimCreate.vue

diff --git a/src/App.vue b/src/App.vue
index 8eae0d1a6..f381d2576 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -61,7 +61,7 @@ function responseError(error) {
         router.push({ path: '/login' });
     }
 
-    return Promise.resolve(error);
+    return Promise.reject(error);
 }
 
 axios.interceptors.response.use((response) => {
diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index 3da3a8e5f..0eee59f90 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -15,13 +15,10 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
-    limit: {
-        type: String,
-        default: '20',
-    },
 });
 
-const emit = defineEmits(['fetch-data']);
+defineExpose({ fetch });
+const emit = defineEmits(['onFetch']);
 
 onMounted(async () => {
     if ($props.autoLoad) {
@@ -34,7 +31,7 @@ async function fetch() {
         params: { filter: $props.filter },
     });
 
-    return emit('fetch-data', data);
+    emit('onFetch', data);
 }
 
 const render = () => {
diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index ebb8f57cf..d36f8c4ea 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -5,11 +5,13 @@ import { useQuasar } from 'quasar';
 import axios from 'axios';
 
 import { useState } from 'src/composables/useState';
+import { useValidator } from 'src/composables/useValidator';
 import SkeletonForm from 'src/components/SkeletonForm.vue';
 
 const quasar = useQuasar();
 const { t } = useI18n();
 const state = useState();
+const { validate } = useValidator();
 
 const $props = defineProps({
     url: {
@@ -26,7 +28,7 @@ const $props = defineProps({
     },
 });
 
-const emit = defineEmits(['fetch-data']);
+const emit = defineEmits(['onFetch']);
 
 defineExpose({
     save,
@@ -53,7 +55,7 @@ async function fetch() {
 
     watch(formData.value, () => (hasChanges.value = true));
 
-    return emit('fetch-data', state.get($props.model));
+    emit('onFetch', state.get($props.model));
 }
 
 async function save() {
@@ -64,10 +66,10 @@ async function save() {
         });
     }
     isLoading.value = true;
-    await new Promise((resolve) => {
-        setTimeout(resolve, 5000);
-    });
     await axios.patch($props.url, formData.value);
+
+    originalData.value = formData.value;
+    hasChanges.value = false;
     isLoading.value = false;
 }
 
@@ -75,22 +77,41 @@ function reset() {
     state.set($props.model, originalData.value);
     hasChanges.value = false;
 }
+
+function filter(value, update, filterOptions) {
+    update(
+        () => {
+            const { options, filterFn } = filterOptions;
+
+            options.value = filterFn(options, value);
+        },
+        (ref) => {
+            ref.setOptionIndex(-1);
+            ref.moveOptionSelection(1, true);
+        }
+    );
+}
 </script>
 <template>
-    <q-banner v-if="hasChanges" inline-actions class="text-white bg-red"> You have changes pending to save </q-banner>
+    <q-banner v-if="hasChanges" class="text-white bg-warning">
+        <q-icon name="warning" size="md" class="q-mr-md" />
+        <span>{{ t('globals.changesToSave') }}</span>
+    </q-banner>
     <q-form v-if="formData" @submit="save" @reset="reset" class="q-pa-md">
-        <slot name="form" :data="formData"></slot>
-        <slot name="actions">
-            <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
-                :disable="!hasChanges"
-            />
-        </slot>
+        <slot name="form" :data="formData" :validate="validate" :filter="filter"></slot>
+        <div class="q-mt-lg">
+            <slot name="actions">
+                <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
+                    :disable="!hasChanges"
+                />
+            </slot>
+        </div>
     </q-form>
     <skeleton-form v-if="!formData" />
     <q-inner-loading :showing="isLoading" :label="t('globals.pleaseWait')" color="primary" />
diff --git a/src/components/SmartCard.vue b/src/components/SmartCard.vue
index b43c920ad..1e6038450 100644
--- a/src/components/SmartCard.vue
+++ b/src/components/SmartCard.vue
@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -10,6 +10,10 @@ const $props = defineProps({
         type: String,
         default: '',
     },
+    data: {
+        type: Array,
+        default: null,
+    },
     filter: {
         type: Object,
         default: null,
@@ -35,6 +39,17 @@ const $props = defineProps({
 defineEmits(['onNavigate']);
 defineExpose({ fetch });
 
+onMounted(() => {
+    if ($props.autoLoad) fetch();
+});
+
+watch(
+    () => $props.data,
+    () => {
+        rows.value = $props.data;
+    }
+);
+
 const isLoading = ref(false);
 const hasMoreData = ref(false);
 const pagination = ref({
@@ -42,17 +57,13 @@ const pagination = ref({
     rowsPerPage: $props.rowsPerPage,
     page: 1,
 });
-
 const rows = ref(null);
 
-onMounted(() => {
-    if ($props.autoLoad) fetch();
-    else rows.value = [];
-});
-
 async function fetch() {
     const { page, rowsPerPage, sortBy, descending } = pagination.value;
 
+    if (!$props.url) return;
+
     isLoading.value = true;
 
     const filter = {
@@ -89,7 +100,7 @@ async function fetch() {
 
 async function onLoad(...params) {
     const done = params[1];
-    if (!rows.value || rows.value.length === 0) return done(false);
+    if (!rows.value || rows.value.length === 0 || !$props.url) return done(false);
 
     pagination.value.page = pagination.value.page + 1;
 
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index edb257336..33f25135e 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -21,6 +21,7 @@ export default {
         yes: 'Yes',
         no: 'No',
         noChanges: 'No changes to save',
+        changesToSave: 'You have changes pending to save',
         confirmRemove: 'You are about to delete this row. Are you sure?',
         rowAdded: 'Row added',
         rowRemoved: 'Row removed',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 999af76af..0b606115e 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -21,6 +21,7 @@ export default {
         yes: 'Si',
         no: 'No',
         noChanges: 'Sin cambios que guardar',
+        changesToSave: 'Tienes cambios pendientes de guardar',
         confirmRemove: 'Vas a eliminar este registro. ¿Continuar?',
         rowAdded: 'Fila añadida',
         rowRemoved: 'Fila eliminada',
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index a8eaa9203..eb0ea9236 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -1,231 +1,242 @@
 <script setup>
-import { ref, onMounted, watch } from 'vue';
+import { ref } 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();
-    fetchClaimStates();
-});
+import { useSession } from 'src/composables/useSession';
+import FetchData from 'src/components/FetchData.vue';
+import FormModel from 'src/components/FormModel.vue';
 
 const route = useRoute();
-const quasar = useQuasar();
 const { t } = useI18n();
-const { validate } = useValidator();
 const session = useSession();
 const token = session.getToken();
 
-const claim = ref(null);
-const claimCopy = ref(null);
-const hasChanges = ref(false);
+// const claim = ref(null);
+// const claimCopy = ref(null);
+// const hasChanges = ref(false);
 
-function fetch() {
-    const id = route.params.id;
-    const filter = {
-        include: [
-            {
-                relation: 'client',
-                scope: {
-                    fields: ['name'],
-                },
+// function fetch() {
+//     const id = route.params.id;
+//     const filter = {
+//         include: [
+//             {
+//                 relation: 'client',
+//                 scope: {
+//                     fields: ['name'],
+//                 },
+//             },
+//         ],
+//     };
+//     const options = { params: { filter } };
+//     axios.get(`Claims/${id}`, options).then(({ data }) => {
+//         claim.value = data;
+//         claimCopy.value = Object.assign({}, data);
+
+//         watch(claim.value, () => (hasChanges.value = true));
+//     });
+// }
+
+const claimFilter = {
+    include: [
+        {
+            relation: 'client',
+            scope: {
+                fields: ['name'],
             },
-        ],
-    };
-    const options = { params: { filter } };
-    axios.get(`Claims/${id}`, options).then(({ data }) => {
-        claim.value = data;
-        claimCopy.value = Object.assign({}, data);
-
-        watch(claim.value, () => (hasChanges.value = true));
-    });
-}
+        },
+    ],
+};
 
 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;
-    });
-}
-
 const claimStates = ref([]);
 const claimStatesCopy = ref([]);
-function fetchClaimStates() {
-    axios.get(`ClaimStates`).then(({ data }) => {
-        claimStates.value = data;
-        claimStatesCopy.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 filterStates(value, update) {
+//     const search = value.toLowerCase();
+
+//     filter(value, update, claimStates, claimStatesCopy, (row) => {
+//         const description = row.description.toLowerCase();
+
+//         return description.indexOf(search) > -1;
+//     });
+// }
+function setWorkers(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 setClaimStates(data) {
+    claimStates.value = data;
+    claimStatesCopy.value = data;
 }
 
-function filterWorkers(value, update) {
-    const search = value.toLowerCase();
+const workerFilter = {
+    options: workers,
+    filterFn: (options, value) => {
+        const search = value.toLowerCase();
 
-    filter(value, update, workers, workersCopy, (row) => {
-        const id = row.id;
-        const name = row.name.toLowerCase();
+        if (value === '') return workersCopy.value;
 
-        const idMatch = id == search;
-        const nameMatch = name.indexOf(search) > -1;
+        return options.value.filter((row) => {
+            const id = row.id;
+            const name = row.name.toLowerCase();
 
-        return idMatch || nameMatch;
-    });
-}
+            const idMatches = id == search;
+            const nameMatches = name.indexOf(search) > -1;
 
-function filterStates(value, update) {
-    const search = value.toLowerCase();
-
-    filter(value, update, claimStates, claimStatesCopy, (row) => {
-        const description = row.description.toLowerCase();
-
-        return description.indexOf(search) > -1;
-    });
-}
-
-function save() {
-    const id = route.params.id;
-    const formData = claim.value;
-
-    if (!hasChanges.value) {
-        return quasar.notify({
-            type: 'negative',
-            message: t('globals.noChanges'),
+            return idMatches || nameMatches;
         });
-    }
+    },
+};
 
-    axios.patch(`Claims/${id}`, formData).then((hasChanges.value = false));
-}
+const statesFilter = {
+    options: claimStates,
+    filterFn: (options, value) => {
+        const search = value.toLowerCase();
 
-function onReset() {
-    claim.value = claimCopy.value;
-    hasChanges.value = false;
-}
+        if (value === '') return claimStatesCopy.value;
+
+        return options.value.filter((row) => {
+            const description = row.description.toLowerCase();
+
+            return description.indexOf(search) > -1;
+        });
+    },
+};
 </script>
 <template>
+    <fetch-data
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="setWorkers"
+        auto-load
+    />
+    <fetch-data url="ClaimStates" @on-fetch="setClaimStates" auto-load />
     <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 />
+            <q-card>
+                <form-model :url="`Claims/${route.params.id}`" :filter="claimFilter" model="claim">
+                    <template #form="{ data, validate, filter }">
+                        <div class="row q-gutter-md q-mb-md">
+                            <div class="col">
+                                <q-input v-model="data.client.name" :label="t('claim.basicData.customer')" disable />
+                            </div>
+                            <div class="col">
+                                <q-input v-model="data.created" mask="####-##-##" fill-mask="_" autofocus>
+                                    <template #append>
+                                        <q-icon name="event" class="cursor-pointer">
+                                            <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                                                <q-date v-model="data.created" mask="YYYY-MM-DD">
+                                                    <div class="row items-center justify-end">
+                                                        <q-btn v-close-popup label="Close" color="primary" flat />
+                                                    </div>
+                                                </q-date>
+                                            </q-popup-proxy>
+                                        </q-icon>
+                                    </template>
+                                </q-input>
+                            </div>
                         </div>
-                        <div class="col">
-                            <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">
-                                            <q-date v-model="claim.created" mask="YYYY-MM-DD">
-                                                <div class="row items-center justify-end">
-                                                    <q-btn v-close-popup label="Close" color="primary" flat />
-                                                </div>
-                                            </q-date>
-                                        </q-popup-proxy>
-                                    </q-icon>
-                                </template>
-                            </q-input>
+                        <div class="row q-gutter-md q-mb-md">
+                            <div class="col">
+                                <q-select
+                                    v-model="data.workerFk"
+                                    :options="workers"
+                                    option-value="id"
+                                    option-label="name"
+                                    emit-value
+                                    :label="t('claim.basicData.assignedTo')"
+                                    map-options
+                                    use-input
+                                    @filter="(value, update) => filter(value, update, workerFilter)"
+                                    :rules="validate('claim.claimStateFk')"
+                                    :input-debounce="0"
+                                >
+                                    <template #before>
+                                        <q-avatar color="orange">
+                                            <q-img
+                                                v-if="data.workerFk"
+                                                :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
+                                                spinner-color="white"
+                                            />
+                                        </q-avatar>
+                                    </template>
+                                </q-select>
+                            </div>
+                            <div class="col">
+                                <q-select
+                                    v-model="data.claimStateFk"
+                                    :options="claimStates"
+                                    option-value="id"
+                                    option-label="description"
+                                    emit-value
+                                    :label="t('claim.basicData.state')"
+                                    map-options
+                                    use-input
+                                    @filter="(value, update) => filter(value, update, statesFilter)"
+                                    :rules="validate('claim.claimStateFk')"
+                                    :input-debounce="0"
+                                >
+                                </q-select>
+                            </div>
                         </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <q-select
-                                v-model="claim.workerFk"
-                                :options="workers"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                :label="t('claim.basicData.assignedTo')"
-                                map-options
-                                use-input
-                                @filter="filterWorkers"
-                                :rules="validate('claim.claimStateFk')"
-                                :input-debounce="0"
-                            >
-                                <template #before>
-                                    <q-avatar color="orange">
-                                        <q-img
-                                            v-if="claim.workerFk"
-                                            :src="`/api/Images/user/160x160/${claim.workerFk}/download?access_token=${token}`"
-                                            spinner-color="white"
-                                        />
-                                    </q-avatar>
-                                </template>
-                            </q-select>
+                        <div class="row q-gutter-md q-mb-md">
+                            <div class="col">
+                                <q-input
+                                    v-model="data.packages"
+                                    :label="t('claim.basicData.packages')"
+                                    :rules="validate('claim.packages')"
+                                />
+                            </div>
+                            <div class="col">
+                                <q-input
+                                    v-model="data.rma"
+                                    :label="t('claim.basicData.returnOfMaterial')"
+                                    :rules="validate('claim.rma')"
+                                />
+                            </div>
                         </div>
-                        <div class="col">
-                            <q-select
-                                v-model="claim.claimStateFk"
-                                :options="claimStates"
-                                option-value="id"
-                                option-label="description"
-                                emit-value
-                                :label="t('claim.basicData.state')"
-                                map-options
-                                use-input
-                                @filter="filterStates"
-                                :rules="validate('claim.claimStateFk')"
-                                :input-debounce="0"
-                            >
-                            </q-select>
+                        <div class="row q-gutter-md q-mb-md">
+                            <div class="col">
+                                <q-checkbox v-model="data.hasToPickUp" :label="t('claim.basicData.picked')" />
+                            </div>
                         </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <q-input
-                                v-model="claim.packages"
-                                :label="t('claim.basicData.packages')"
-                                :rules="validate('claim.packages')"
-                            />
-                        </div>
-                        <div class="col">
-                            <q-input
-                                v-model="claim.rma"
-                                :label="t('claim.basicData.returnOfMaterial')"
-                                :rules="validate('claim.rma')"
-                            />
-                        </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <q-checkbox v-model="claim.hasToPickUp" :label="t('claim.basicData.picked')" />
-                        </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>
+                    </template>
+                </form-model>
             </q-card>
         </div>
     </q-page>
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 2607fcd08..1ed3c6c8e 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -163,7 +163,7 @@ function stateColor(code) {
         </q-scroll-area>
     </q-drawer>
     <q-page-container>
-        <router-view v-if="claim.id" :claim="claim"></router-view>
+        <router-view></router-view>
     </q-page-container>
 </template>
 
diff --git a/src/pages/Claim/Card/ClaimRma.vue b/src/pages/Claim/Card/ClaimRma.vue
index 8ec51acf7..d38b688df 100644
--- a/src/pages/Claim/Card/ClaimRma.vue
+++ b/src/pages/Claim/Card/ClaimRma.vue
@@ -1,52 +1,51 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
+import { useRoute } from 'vue-router';
 import axios from 'axios';
 import SmartCard from 'src/components/SmartCard.vue';
+import FetchData from 'src/components/FetchData.vue';
 import { toDate } from 'src/filters';
 
-onMounted(() => fetch());
-
-const $props = defineProps({
-    claim: {
-        type: Object,
-        required: true,
-    },
-});
-
 const quasar = useQuasar();
+const route = useRoute();
 const { t } = useI18n();
 
+// const card = ref();
+const claim = ref([]);
+const fetcher = ref();
+
+// const rma = computed(() => claim.value.rma);
+
 const filter = {
     include: {
-        relation: 'worker',
+        relation: 'rmas',
         scope: {
             include: {
-                relation: 'user',
+                relation: 'worker',
+                scope: {
+                    include: {
+                        relation: 'user',
+                    },
+                },
             },
         },
     },
-    where: {
-        code: $props.claim.rma,
-    },
 };
 
-function fetch() {
-    //console.log($props.claim);
-}
-
-function addRow() {
+async function addRow() {
     const formData = {
-        code: $props.claim.rma,
+        code: claim.value.rma,
     };
 
-    axios.post(`ClaimRmas`, formData).then(() => {
-        quasar.notify({
-            type: 'positive',
-            message: t('globals.rowAdded'),
-            icon: 'check',
-        });
+    await axios.post(`ClaimRmas`, formData);
+    await fetcher.value.fetch();
+
+    quasar.notify({
+        type: 'positive',
+        message: t('globals.rowAdded'),
+        icon: 'check',
     });
 }
 
@@ -57,16 +56,17 @@ function confirmRemove(id) {
     rmaId.value = id;
 }
 
-function remove() {
+async function remove() {
     const id = rmaId.value;
-    axios.delete(`ClaimRmas/${id}`).then(() => {
-        confirmShown.value = false;
 
-        quasar.notify({
-            type: 'positive',
-            message: t('globals.rowRemoved'),
-            icon: 'check',
-        });
+    await axios.delete(`ClaimRmas/${id}`);
+    await fetcher.value.fetch();
+    confirmShown.value = false;
+
+    quasar.notify({
+        type: 'positive',
+        message: t('globals.rowRemoved'),
+        icon: 'check',
     });
 }
 
@@ -75,6 +75,13 @@ function hide() {
 }
 </script>
 <template>
+    <fetch-data
+        ref="fetcher"
+        :url="`Claims/${route.params.id}`"
+        :filter="filter"
+        @on-fetch="($data) => (claim = $data)"
+        auto-load
+    />
     <q-page class="q-pa-md sticky">
         <q-page-sticky expand position="top">
             <q-toolbar class="bg-grey-9">
@@ -85,7 +92,7 @@ function hide() {
             </q-toolbar>
         </q-page-sticky>
 
-        <smart-card ref="card" url="/ClaimRmas" :filter="filter" sort-by="id DESC" auto-load>
+        <smart-card :data="claim.rmas">
             <template #header="{ row }">
                 <q-item-label caption>{{ t('claim.rma.user') }}</q-item-label>
                 <q-item-label>{{ row.worker.user.name }}</q-item-label>
diff --git a/src/pages/Claim/ClaimCreate.vue b/src/pages/Claim/ClaimCreate.vue
deleted file mode 100644
index 52a9ccbc5..000000000
--- a/src/pages/Claim/ClaimCreate.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup>
-import { reactive, watch } from 'vue'
-
-const customer = reactive({
-    name: '',
-});
-
-watch(() => customer.name, () => {
-    console.log('customer.name changed');
-});
-</script>
-
-<template>
-    <q-page class="q-pa-md">
-        <q-card class="q-pa-md">
-            <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
-                <q-input
-                    filled
-                    v-model="customer.name"
-                    label="Your name *"
-                    hint="Name and surname"
-                    lazy-rules
-                    :rules="[val => val && val.length > 0 || 'Please type something']"
-                />
-
-                <q-input
-                    filled
-                    type="number"
-                    v-model="age"
-                    label="Your age *"
-                    lazy-rules
-                    :rules="[
-                        val => val !== null && val !== '' || 'Please type your age',
-                        val => val > 0 && val < 100 || 'Please type a real age'
-                    ]"
-                />
-
-                <div>
-                    <q-btn label="Submit" type="submit" color="primary" />
-                    <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
-                </div>
-            </q-form>
-        </q-card>
-    </q-page>
-</template>
-
-<style lang="scss" scoped>
-.card {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index d47d8f08e..65c4fb2ad 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -1,86 +1,60 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { ref } 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 { useState } from 'src/composables/useState';
 import FetchData from 'src/components/FetchData.vue';
 import FormModel from 'src/components/FormModel.vue';
 
-onMounted(() => {
-    // fetch();
-    // fetchWorkers();
-    // fetchBusinessTypes();
-    // fetchContactChannels();
-});
-
 const route = useRoute();
-// const quasar = useQuasar();
 const { t } = useI18n();
-const { validate } = useValidator();
-const state = useState();
 const session = useSession();
 const token = session.getToken();
-const data2 = state.get('customer');
-console.log(data2);
 
 const workers = ref([]);
-const contactChannels = ref([]);
+const workersCopy = ref([]);
 const businessTypes = ref([]);
+const contactChannels = ref([]);
 
-// const customer = ref(null);
-// const customerCopy = ref(null);
-// const hasChanges = ref(false);
+function setWorkers(data) {
+    workers.value = data;
+    workersCopy.value = data;
+}
 
-// function filter(value, update, options, originalOptions, filter) {
-//     update(
-//         () => {
-//             if (value === '') {
-//                 options.value = originalOptions.value;
+const filterOptions = {
+    options: workers,
+    filterFn: (options, value) => {
+        const search = value.toLowerCase();
 
-//                 return;
-//             }
+        if (value === '') return workersCopy.value;
 
-//             options.value = options.value.filter(filter);
-//         },
-//         (ref) => {
-//             ref.setOptionIndex(-1);
-//             ref.moveOptionSelection(1, true);
-//         }
-//     );
-// }
+        return options.value.filter((row) => {
+            const id = row.id;
+            const name = row.name.toLowerCase();
 
-// function filterWorkers(value, update) {
-//     const search = value.toLowerCase();
+            const idMatches = id == search;
+            const nameMatches = name.indexOf(search) > -1;
 
-//     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;
-//     });
-// }
+            return idMatches || nameMatches;
+        });
+    },
+};
 </script>
 <template>
     <fetch-data
-        url="Workers/activeWithRole"
+        url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
-        @fetch-data="($data) => (workers = $data)"
+        @on-fetch="setWorkers"
         auto-load
     />
-    <fetch-data url="ContactChannels" @fetch-data="($data) => (contactChannels = $data)" auto-load />
-    <fetch-data url="BusinessTypes" @fetch-data="($data) => (businessTypes = $data)" auto-load />
+    <fetch-data url="ContactChannels" @on-fetch="($data) => (contactChannels = $data)" auto-load />
+    <fetch-data url="BusinessTypes" @on-fetch="($data) => (businessTypes = $data)" auto-load />
     <q-page class="q-pa-md">
         <div class="container">
             <q-card>
                 <form-model :url="`Clients/${route.params.id}`" model="customer">
-                    <template #form="{ data }">
+                    <template #form="{ data, validate, filter }">
                         <div class="row q-gutter-md q-mb-md">
                             <div class="col">
                                 <q-input
@@ -152,7 +126,7 @@ const businessTypes = ref([]);
                                     :label="t('customer.basicData.salesPerson')"
                                     map-options
                                     use-input
-                                    @filter="filterWorkers"
+                                    @filter="(value, update) => filter(value, update, filterOptions)"
                                     :rules="validate('client.salesPersonFk')"
                                     :input-debounce="0"
                                 >
diff --git a/src/router/modules/claim.js b/src/router/modules/claim.js
index dcdc9efd9..641629c9c 100644
--- a/src/router/modules/claim.js
+++ b/src/router/modules/claim.js
@@ -34,15 +34,6 @@ export default {
                         roles: ['claimManager']
                     },
                     component: () => import('src/pages/Claim/ClaimRmaList.vue'),
-                },
-                {
-                    name: 'ClaimCreate',
-                    path: 'create',
-                    meta: {
-                        title: 'createClaim',
-                        icon: 'vn:addperson',
-                    },
-                    component: () => import('src/pages/Claim/ClaimCreate.vue'),
                 }
             ]
         },
@@ -76,8 +67,7 @@ export default {
                         title: 'rma',
                         roles: ['claimManager']
                     },
-                    component: () => import('src/pages/Claim/Card/ClaimRma.vue'),
-                    props: { claim: true }
+                    component: () => import('src/pages/Claim/Card/ClaimRma.vue')
                 }
             ]
         },

From a1fc7c6803b99eeb5dc0f80dc1b621a1ab8f1513 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Wed, 2 Nov 2022 11:24:21 +0100
Subject: [PATCH 3/7] Forms refactor

---
 src/__tests__/App.spec.js                     |   6 +-
 src/components/FetchData.vue                  |  19 ++-
 .../{SmartCard.vue => Paginate.vue}           |  85 +++++-----
 .../{SmartCard.spec.js => Paginate.spec.js}   |  18 +--
 src/i18n/en/index.js                          |   3 +-
 src/i18n/es/index.js                          |   3 +-
 src/pages/Claim/Card/ClaimBasicData.vue       |  66 --------
 src/pages/Claim/Card/ClaimRma.vue             |  59 ++++---
 src/pages/Claim/ClaimList.vue                 | 121 +++++++-------
 src/pages/Claim/ClaimRmaList.vue              |  68 ++++----
 src/pages/Customer/CustomerList.vue           | 103 ++++++------
 src/pages/Ticket/TicketList.vue               | 149 ++++++++++--------
 12 files changed, 354 insertions(+), 346 deletions(-)
 rename src/components/{SmartCard.vue => Paginate.vue} (70%)
 rename src/components/__tests__/{SmartCard.spec.js => Paginate.spec.js} (89%)

diff --git a/src/__tests__/App.spec.js b/src/__tests__/App.spec.js
index c5be66823..8f87dbfb6 100644
--- a/src/__tests__/App.spec.js
+++ b/src/__tests__/App.spec.js
@@ -52,8 +52,7 @@ describe('App', () => {
             }
         };
 
-        await vm.responseError(response);
-
+        expect(vm.responseError(response)).rejects.toEqual(expect.objectContaining(response));
         expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
             {
                 type: 'negative',
@@ -73,8 +72,7 @@ describe('App', () => {
             }
         };
 
-        await vm.responseError(response);
-
+        expect(vm.responseError(response)).rejects.toEqual(expect.objectContaining(response));
         expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
             {
                 type: 'negative',
diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index 0eee59f90..0110e5576 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -15,6 +15,18 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
+    where: {
+        type: Object,
+        default: null,
+    },
+    sortBy: {
+        type: String,
+        default: '',
+    },
+    limit: {
+        type: String,
+        default: '',
+    },
 });
 
 defineExpose({ fetch });
@@ -27,8 +39,13 @@ onMounted(async () => {
 });
 
 async function fetch() {
+    const filter = Object.assign({}, $props.filter);
+    if ($props.where) filter.where = $props.where;
+    if ($props.sortBy) filter.order = $props.sortBy;
+    if ($props.limit) filter.limit = $props.limit;
+
     const { data } = await axios.get($props.url, {
-        params: { filter: $props.filter },
+        params: { filter },
     });
 
     emit('onFetch', data);
diff --git a/src/components/SmartCard.vue b/src/components/Paginate.vue
similarity index 70%
rename from src/components/SmartCard.vue
rename to src/components/Paginate.vue
index 1e6038450..cd47ed331 100644
--- a/src/components/SmartCard.vue
+++ b/src/components/Paginate.vue
@@ -6,6 +6,10 @@ import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
 
 const $props = defineProps({
+    autoLoad: {
+        type: Boolean,
+        default: false,
+    },
     url: {
         type: String,
         default: '',
@@ -18,14 +22,18 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
-    autoLoad: {
-        type: Boolean,
-        default: false,
+    where: {
+        type: Object,
+        default: null,
     },
     sortBy: {
         type: String,
         default: '',
     },
+    limit: {
+        type: String,
+        default: '',
+    },
     rowsPerPage: {
         type: Number,
         default: 10,
@@ -37,10 +45,10 @@ const $props = defineProps({
 });
 
 defineEmits(['onNavigate']);
-defineExpose({ fetch });
+defineExpose({ refresh });
 
 onMounted(() => {
-    if ($props.autoLoad) fetch();
+    if ($props.autoLoad) paginate();
 });
 
 watch(
@@ -60,12 +68,10 @@ const pagination = ref({
 const rows = ref(null);
 
 async function fetch() {
-    const { page, rowsPerPage, sortBy, descending } = pagination.value;
+    const { page, rowsPerPage, sortBy } = pagination.value;
 
     if (!$props.url) return;
 
-    isLoading.value = true;
-
     const filter = {
         limit: rowsPerPage,
         skip: rowsPerPage * (page - 1),
@@ -73,12 +79,26 @@ async function fetch() {
 
     Object.assign(filter, $props.filter);
 
+    if ($props.where) filter.where = $props.where;
+    if ($props.sortBy) filter.order = $props.sortBy;
+    if ($props.limit) filter.limit = $props.limit;
+
     if (sortBy) filter.order = sortBy;
 
     const { data } = await axios.get($props.url, {
         params: { filter },
     });
 
+    isLoading.value = false;
+
+    return data;
+}
+
+async function paginate() {
+    const { page, rowsPerPage, sortBy, descending } = pagination.value;
+
+    const data = await fetch();
+
     if (!data) {
         isLoading.value = false;
         return;
@@ -98,13 +118,31 @@ async function fetch() {
     isLoading.value = false;
 }
 
+async function refresh() {
+    const { rowsPerPage } = pagination.value;
+
+    const data = await fetch();
+
+    if (!data) {
+        isLoading.value = false;
+        return;
+    }
+
+    hasMoreData.value = data.length === rowsPerPage;
+
+    if (!rows.value) rows.value = [];
+    rows.value = data;
+
+    isLoading.value = false;
+}
+
 async function onLoad(...params) {
     const done = params[1];
     if (!rows.value || rows.value.length === 0 || !$props.url) return done(false);
 
     pagination.value.page = pagination.value.page + 1;
 
-    await fetch();
+    await paginate();
 
     const endOfPages = !hasMoreData.value;
     done(endOfPages);
@@ -114,34 +152,7 @@ async function onLoad(...params) {
 <template>
     <q-infinite-scroll @load="onLoad" :offset="offset" class="column items-center">
         <div v-if="rows" class="card-list q-gutter-y-md">
-            <q-card class="card" v-for="row of rows" :key="row.id">
-                <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
-                    <q-item-section class="q-pa-md" @click="$emit('onNavigate', row.id)">
-                        <slot name="header" :row="row">
-                            <div class="text-h6">{{ row.name }}</div>
-                            <q-item-label caption>#{{ row.id }}</q-item-label>
-                        </slot>
-                        <slot name="labels" :row="row"></slot>
-                    </q-item-section>
-                    <q-separator vertical />
-                    <q-card-actions vertical class="justify-between">
-                        <slot name="actions" :row="row">
-                            <q-btn
-                                flat
-                                round
-                                color="orange"
-                                icon="arrow_circle_right"
-                                @click="$emit('onNavigate', row.id)"
-                            >
-                                <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
-                            </q-btn>
-                            <q-btn flat round color="grey-7" icon="preview">
-                                <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
-                            </q-btn>
-                        </slot>
-                    </q-card-actions>
-                </q-item>
-            </q-card>
+            <slot name="body" :rows="rows"></slot>
             <div v-if="!rows.length && !isLoading" class="info-row q-pa-md text-center">
                 <h5>
                     {{ t('components.smartCard.noData') }}
diff --git a/src/components/__tests__/SmartCard.spec.js b/src/components/__tests__/Paginate.spec.js
similarity index 89%
rename from src/components/__tests__/SmartCard.spec.js
rename to src/components/__tests__/Paginate.spec.js
index 7456513dd..729e3041d 100644
--- a/src/components/__tests__/SmartCard.spec.js
+++ b/src/components/__tests__/Paginate.spec.js
@@ -1,6 +1,6 @@
 import { jest, describe, expect, it, beforeAll } from '@jest/globals';
 import { createWrapper, axios } from 'app/tests/jest/jestHelpers';
-import SmartCard from '../SmartCard.vue';
+import Paginate from '../Paginate.vue';
 
 const mockPush = jest.fn();
 
@@ -11,7 +11,7 @@ jest.mock('vue-router', () => ({
     }),
 }));
 
-describe('SmartCard', () => {
+describe('Paginate', () => {
     const expectedUrl = '/api/customers';
     let vm;
     beforeAll(() => {
@@ -22,7 +22,7 @@ describe('SmartCard', () => {
                 rowsPerPage: 3
             }
         };
-        vm = createWrapper(SmartCard, options).vm;
+        vm = createWrapper(Paginate, options).vm;
 
         jest.spyOn(axios, 'get').mockResolvedValue({
             data: [
@@ -39,8 +39,8 @@ describe('SmartCard', () => {
         vm.hasMoreData = true;
     })
 
-    describe('fetch()', () => {
-        it('should call to the fetch() method and set the data on the rows property', async () => {
+    describe('paginate()', () => {
+        it('should call to the paginate() method and set the data on the rows property', async () => {
             const expectedOptions = {
                 params: {
                     filter: {
@@ -51,13 +51,13 @@ describe('SmartCard', () => {
                 }
             };
 
-            await vm.fetch();
+            await vm.paginate();
 
             expect(axios.get).toHaveBeenCalledWith(expectedUrl, expectedOptions);
             expect(vm.rows.length).toEqual(3);
         });
 
-        it('should call to the fetch() method and then call it again to paginate', async () => {
+        it('should call to the paginate() method and then call it again to paginate', async () => {
             const expectedOptions = {
                 params: {
                     filter: {
@@ -68,7 +68,7 @@ describe('SmartCard', () => {
                 }
             };
 
-            await vm.fetch();
+            await vm.paginate();
 
             expect(axios.get).toHaveBeenCalledWith(expectedUrl, expectedOptions);
             expect(vm.rows.length).toEqual(3);
@@ -85,7 +85,7 @@ describe('SmartCard', () => {
 
             vm.pagination.page = 2;
 
-            await vm.fetch();
+            await vm.paginate();
 
             expect(axios.get).toHaveBeenCalledWith(expectedUrl, expectedOptionsPaginated);
             expect(vm.rows.length).toEqual(6);
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 33f25135e..80e8f159f 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -199,8 +199,7 @@ export default {
             state: 'State'
         },
         rmaList: {
-            code: 'Code',
-            newRma: 'New RMA...'
+            code: 'Code'
         },
         rma: {
             user: 'User',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 0b606115e..5021d1098 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -198,8 +198,7 @@ export default {
             state: 'Estado'
         },
         rmaList: {
-            code: 'Código',
-            newRma: 'Nuevo RMA...'
+            code: 'Código'
         },
         rma: {
             user: 'Usuario',
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index eb0ea9236..28b78abbc 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -12,31 +12,6 @@ const { t } = useI18n();
 const session = useSession();
 const token = session.getToken();
 
-// const claim = ref(null);
-// const claimCopy = ref(null);
-// const hasChanges = ref(false);
-
-// function fetch() {
-//     const id = route.params.id;
-//     const filter = {
-//         include: [
-//             {
-//                 relation: 'client',
-//                 scope: {
-//                     fields: ['name'],
-//                 },
-//             },
-//         ],
-//     };
-//     const options = { params: { filter } };
-//     axios.get(`Claims/${id}`, options).then(({ data }) => {
-//         claim.value = data;
-//         claimCopy.value = Object.assign({}, data);
-
-//         watch(claim.value, () => (hasChanges.value = true));
-//     });
-// }
-
 const claimFilter = {
     include: [
         {
@@ -53,47 +28,6 @@ const workersCopy = ref([]);
 const claimStates = ref([]);
 const claimStatesCopy = ref([]);
 
-// 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 filterStates(value, update) {
-//     const search = value.toLowerCase();
-
-//     filter(value, update, claimStates, claimStatesCopy, (row) => {
-//         const description = row.description.toLowerCase();
-
-//         return description.indexOf(search) > -1;
-//     });
-// }
 function setWorkers(data) {
     workers.value = data;
     workersCopy.value = data;
diff --git a/src/pages/Claim/Card/ClaimRma.vue b/src/pages/Claim/Card/ClaimRma.vue
index d38b688df..8fea99121 100644
--- a/src/pages/Claim/Card/ClaimRma.vue
+++ b/src/pages/Claim/Card/ClaimRma.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
-import SmartCard from 'src/components/SmartCard.vue';
+import Paginate from 'src/components/Paginate.vue';
 import FetchData from 'src/components/FetchData.vue';
 import { toDate } from 'src/filters';
 
@@ -12,12 +12,9 @@ const quasar = useQuasar();
 const route = useRoute();
 const { t } = useI18n();
 
-// const card = ref();
 const claim = ref([]);
 const fetcher = ref();
 
-// const rma = computed(() => claim.value.rma);
-
 const filter = {
     include: {
         relation: 'rmas',
@@ -30,6 +27,7 @@ const filter = {
                     },
                 },
             },
+            order: 'created DESC',
         },
     },
 };
@@ -92,27 +90,40 @@ function hide() {
             </q-toolbar>
         </q-page-sticky>
 
-        <smart-card :data="claim.rmas">
-            <template #header="{ row }">
-                <q-item-label caption>{{ t('claim.rma.user') }}</q-item-label>
-                <q-item-label>{{ row.worker.user.name }}</q-item-label>
+        <paginate :data="claim.rmas">
+            <template #body="{ rows }">
+                <q-card class="card">
+                    <template v-for="row of rows" :key="row.id">
+                        <q-item class="q-pa-none items-start">
+                            <q-item-section class="q-pa-md">
+                                <q-list>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>{{ t('claim.rma.user') }}</q-item-label>
+                                            <q-item-label>{{ row.worker.user.name }}</q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>{{ t('claim.rma.created') }}</q-item-label>
+                                            <q-item-label>
+                                                {{ toDate(row.created, { timeStyle: 'medium' }) }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                </q-list>
+                            </q-item-section>
+                            <q-card-actions vertical class="justify-between">
+                                <q-btn flat round color="orange" icon="vn:bin" @click="confirmRemove(row.id)">
+                                    <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
+                                </q-btn>
+                            </q-card-actions>
+                        </q-item>
+                        <q-separator />
+                    </template>
+                </q-card>
             </template>
-            <template #labels="{ row }">
-                <q-list>
-                    <q-item class="q-pa-none">
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.rma.created') }}</q-item-label>
-                            <q-item-label>{{ toDate(row.created, { timeStyle: 'medium' }) }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-            </template>
-            <template #actions="{ row }">
-                <q-btn flat round color="orange" icon="vn:bin" @click="confirmRemove(row.id)">
-                    <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
-                </q-btn>
-            </template>
-        </smart-card>
+        </paginate>
     </q-page>
     <q-dialog v-model="confirmShown" persistent @hide="hide">
         <q-card>
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index d2352e174..c2a3a0cf1 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import SmartCard from 'src/components/SmartCard.vue';
+import Paginate from 'src/components/Paginate.vue';
 import { toDate } from 'src/filters/index';
 import ClaimSummary from './Card/ClaimSummary.vue';
 
@@ -50,64 +50,73 @@ function showPreview(id) {
 
 <template>
     <q-page class="q-pa-md">
-        <smart-card url="/Claims" :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('claim.list.customer') }}</q-item-label>
-                            <q-item-label>{{ row.client.name }}</q-item-label>
+        <paginate url="/Claims" :filter="filter" sort-by="id DESC" auto-load>
+            <template #body="{ rows }">
+                <q-card class="card" v-for="row of rows" :key="row.id">
+                    <q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>
+                        <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                            <div class="text-h6">{{ row.name }}</div>
+                            <q-item-label caption>#{{ row.id }}</q-item-label>
+                            <q-list>
+                                <q-item class="q-pa-none">
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('claim.list.customer') }}</q-item-label>
+                                        <q-item-label>{{ row.client.name }}</q-item-label>
+                                    </q-item-section>
+                                    <q-item-section>
+                                        <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>
+                                <q-item class="q-pa-none">
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('claim.list.created') }}</q-item-label>
+                                        <q-item-label>{{ toDate(row.created) }}</q-item-label>
+                                    </q-item-section>
+                                    <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-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
                         </q-item-section>
-                        <q-item-section>
-                            <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>
-                    <q-item class="q-pa-none">
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.list.created') }}</q-item-label>
-                            <q-item-label>{{ toDate(row.created) }}</q-item-label>
-                        </q-item-section>
-                        <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-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="logs" />
-                                </q-item-section>
-                                <q-item-section>Display claim logs</q-item-section>
-                            </q-item>
-                        </q-list>
-                    </q-menu>
-                </q-btn>
+                        <q-separator vertical />
+                        <q-card-actions vertical class="justify-between">
+                            <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="logs" />
+                                            </q-item-section>
+                                            <q-item-section>Display claim logs</q-item-section>
+                                        </q-item>
+                                    </q-list>
+                                </q-menu>
+                            </q-btn>
 
-                <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="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-card-actions>
+                    </q-item>
+                </q-card>
             </template>
-        </smart-card>
+        </paginate>
     </q-page>
     <q-dialog v-model="preview.shown">
         <claim-summary :claim-id="preview.data.claimId" />
diff --git a/src/pages/Claim/ClaimRmaList.vue b/src/pages/Claim/ClaimRmaList.vue
index 3d1ff4ef4..1e3b139bc 100644
--- a/src/pages/Claim/ClaimRmaList.vue
+++ b/src/pages/Claim/ClaimRmaList.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import axios from 'axios';
-import SmartCard from 'src/components/SmartCard.vue';
+import Paginate from 'src/components/Paginate.vue';
 
 const quasar = useQuasar();
 const { t } = useI18n();
@@ -26,7 +26,7 @@ function submit() {
                 crated: new Date(),
             };
         })
-        .then(() => card.value.fetch());
+        .then(() => card.value.refresh());
 }
 
 const confirmShown = ref(false);
@@ -38,15 +38,18 @@ function confirm(id) {
 
 function remove() {
     const id = rmaId.value;
-    axios.delete(`ClaimRmas/${id}`).then(() => {
-        confirmShown.value = false;
+    axios
+        .delete(`ClaimRmas/${id}`)
+        .then(() => {
+            confirmShown.value = false;
 
-        quasar.notify({
-            type: 'positive',
-            message: 'Entry deleted',
-            icon: 'check',
-        });
-    });
+            quasar.notify({
+                type: 'positive',
+                message: 'Entry deleted',
+                icon: 'check',
+            });
+        })
+        .then(() => card.value.refresh());
 }
 
 function hide() {
@@ -59,29 +62,38 @@ function hide() {
         <q-page-sticky expand position="top" :offset="[16, 16]">
             <q-card class="card q-pa-md">
                 <q-form @submit="submit">
-                    <q-input v-model="newRma.code" :label="t('claim.rmaList.newRma')" class="q-mb-md" />
-                    <div class="text-caption">$(0) entries</div>
+                    <q-input v-model="newRma.code" :label="t('claim.rmaList.code')" class="q-mb-md" />
+                    <!-- <div class="text-caption">$(0) entries</div> -->
                 </q-form>
             </q-card>
         </q-page-sticky>
 
-        <smart-card ref="card" url="/ClaimRmas" sort-by="id DESC" auto-load>
-            <template #labels="{ row }">
-                <q-list>
-                    <q-item class="q-pa-none">
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.rmaList.code') }}</q-item-label>
-                            <q-item-label>{{ row.code }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
+        <paginate ref="card" url="/ClaimRmas" sort-by="id DESC" auto-load>
+            <template #body="{ rows }">
+                <q-card class="card">
+                    <template v-for="row of rows" :key="row.id">
+                        <q-item class="q-pa-none items-start">
+                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                                <q-list>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>{{ t('claim.rmaList.code') }}</q-item-label>
+                                            <q-item-label>{{ row.code }}</q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                </q-list>
+                            </q-item-section>
+                            <q-card-actions vertical class="justify-between">
+                                <q-btn flat round color="primary" icon="vn:bin" @click="confirm(row.id)">
+                                    <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
+                                </q-btn>
+                            </q-card-actions>
+                        </q-item>
+                        <q-separator />
+                    </template>
+                </q-card>
             </template>
-            <template #actions="{ row }">
-                <q-btn flat round color="primary" icon="vn:bin" @click="confirm(row.id)">
-                    <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
-                </q-btn>
-            </template>
-        </smart-card>
+        </paginate>
     </q-page>
 
     <q-dialog v-model="confirmShown" persistent @hide="hide">
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 9020df84e..46997ba65 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import SmartCard from 'src/components/SmartCard.vue';
+import Paginate from 'src/components/Paginate.vue';
 import CustomerSummary from './Card/CustomerSummary.vue';
 
 const router = useRouter();
@@ -26,55 +26,64 @@ function showPreview(id) {
 
 <template>
     <q-page class="q-pa-md">
-        <smart-card url="/Clients" 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('customer.list.email') }}</q-item-label>
-                            <q-item-label>{{ row.email }}</q-item-label>
+        <paginate url="/Clients" sort-by="id DESC" auto-load>
+            <template #body="{ rows }">
+                <q-card class="card" v-for="row of rows" :key="row.id">
+                    <q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>
+                        <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                            <div class="text-h6">{{ row.name }}</div>
+                            <q-item-label caption>#{{ row.id }}</q-item-label>
+                            <q-list>
+                                <q-item class="q-pa-none">
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.list.email') }}</q-item-label>
+                                        <q-item-label>{{ row.email }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item class="q-pa-none">
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('customer.list.phone') }}</q-item-label>
+                                        <q-item-label>{{ row.phone }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
                         </q-item-section>
-                    </q-item>
-                    <q-item class="q-pa-none">
-                        <q-item-section>
-                            <q-item-label caption>{{ t('customer.list.phone') }}</q-item-label>
-                            <q-item-label>{{ row.phone }}</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>
+                        <q-separator vertical />
+                        <q-card-actions vertical class="justify-between">
+                            <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>
 
-                <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>
+                            <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>
+                        </q-card-actions>
+                    </q-item>
+                </q-card>
             </template>
-        </smart-card>
+        </paginate>
     </q-page>
     <q-dialog v-model="preview.shown">
         <customer-summary :customer-id="preview.data.customerId" />
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 2683ed42a..e5792e911 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -2,9 +2,9 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import SmartCard from 'src/components/SmartCard.vue';
+import Paginate from 'src/components/Paginate.vue';
 import { toDate, toCurrency } from 'src/filters/index';
-// import CustomerSummary from './Card/CustomerSummary.vue';
+// import TicketSummary from './Card/TicketSummary.vue';
 
 const router = useRouter();
 const { t } = useI18n();
@@ -62,77 +62,86 @@ function showPreview(id) {
 
 <template>
     <q-page class="q-pa-md">
-        <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>
+        <paginate url="/Tickets" :filter="filter" sort-by="id DESC" auto-load>
+            <template #body="{ rows }">
+                <q-card class="card" v-for="row of rows" :key="row.id">
+                    <q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>
+                        <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                            <div class="text-h6">{{ row.name }}</div>
+                            <q-item-label caption>#{{ row.id }}</q-item-label>
+                            <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>
                         </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>
+                        <q-separator vertical />
+                        <q-card-actions vertical class="justify-between">
+                            <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>
 
-                <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>
+                            <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>
+                        </q-card-actions>
+                    </q-item>
+                </q-card>
             </template>
-        </smart-card>
+        </paginate>
     </q-page>
     <!-- <q-dialog v-model="preview.shown">
         <customer-summary :customer-id="preview.data.customerId" />

From 5720dbd0f0297f423f3617b9fe1218940010aac3 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Wed, 2 Nov 2022 12:27:25 +0100
Subject: [PATCH 4/7] Summary fixes

---
 src/i18n/en/index.js                          |   3 +-
 src/i18n/es/index.js                          |   3 +-
 src/pages/Claim/Card/ClaimBasicData.vue       | 179 +++--
 src/pages/Claim/Card/ClaimCard.vue            |   4 +-
 src/pages/Claim/Card/ClaimRma.vue             |   6 +-
 src/pages/Claim/Card/ClaimSummary.vue         | 140 ++--
 src/pages/Customer/Card/CustomerBasicData.vue | 211 +++--
 src/pages/Customer/Card/CustomerCard.vue      |   4 +-
 src/pages/Customer/Card/CustomerSummary.vue   | 742 +++++++++---------
 src/pages/Ticket/Card/TicketBoxing.vue        | 146 ++--
 src/pages/Ticket/Card/TicketCard.vue          |  16 +-
 11 files changed, 727 insertions(+), 727 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 80e8f159f..e46f7ce55 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -152,7 +152,8 @@ export default {
             list: 'List',
             createTicket: 'Create ticket',
             summary: 'Summary',
-            basicData: 'Basic Data'
+            basicData: 'Basic Data',
+            boxing: 'Boxing'
         },
         list: {
             nickname: 'Nickname',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 5021d1098..5ebdb9853 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -151,7 +151,8 @@ export default {
             list: 'Listado',
             createTicket: 'Crear ticket',
             summary: 'Resumen',
-            basicData: 'Datos básicos'
+            basicData: 'Datos básicos',
+            boxing: 'Encajado'
         },
         list: {
             nickname: 'Alias',
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index 28b78abbc..cffaa79f7 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -80,100 +80,99 @@ const statesFilter = {
         auto-load
     />
     <fetch-data url="ClaimStates" @on-fetch="setClaimStates" auto-load />
-    <q-page class="q-pa-md">
-        <div class="container">
-            <q-card>
-                <form-model :url="`Claims/${route.params.id}`" :filter="claimFilter" model="claim">
-                    <template #form="{ data, validate, filter }">
-                        <div class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-input v-model="data.client.name" :label="t('claim.basicData.customer')" disable />
-                            </div>
-                            <div class="col">
-                                <q-input v-model="data.created" mask="####-##-##" fill-mask="_" autofocus>
-                                    <template #append>
-                                        <q-icon name="event" class="cursor-pointer">
-                                            <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-                                                <q-date v-model="data.created" mask="YYYY-MM-DD">
-                                                    <div class="row items-center justify-end">
-                                                        <q-btn v-close-popup label="Close" color="primary" flat />
-                                                    </div>
-                                                </q-date>
-                                            </q-popup-proxy>
-                                        </q-icon>
-                                    </template>
-                                </q-input>
-                            </div>
+
+    <div class="container">
+        <q-card>
+            <form-model :url="`Claims/${route.params.id}`" :filter="claimFilter" model="claim">
+                <template #form="{ data, validate, filter }">
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-input v-model="data.client.name" :label="t('claim.basicData.customer')" disable />
                         </div>
-                        <div class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-select
-                                    v-model="data.workerFk"
-                                    :options="workers"
-                                    option-value="id"
-                                    option-label="name"
-                                    emit-value
-                                    :label="t('claim.basicData.assignedTo')"
-                                    map-options
-                                    use-input
-                                    @filter="(value, update) => filter(value, update, workerFilter)"
-                                    :rules="validate('claim.claimStateFk')"
-                                    :input-debounce="0"
-                                >
-                                    <template #before>
-                                        <q-avatar color="orange">
-                                            <q-img
-                                                v-if="data.workerFk"
-                                                :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
-                                                spinner-color="white"
-                                            />
-                                        </q-avatar>
-                                    </template>
-                                </q-select>
-                            </div>
-                            <div class="col">
-                                <q-select
-                                    v-model="data.claimStateFk"
-                                    :options="claimStates"
-                                    option-value="id"
-                                    option-label="description"
-                                    emit-value
-                                    :label="t('claim.basicData.state')"
-                                    map-options
-                                    use-input
-                                    @filter="(value, update) => filter(value, update, statesFilter)"
-                                    :rules="validate('claim.claimStateFk')"
-                                    :input-debounce="0"
-                                >
-                                </q-select>
-                            </div>
+                        <div class="col">
+                            <q-input v-model="data.created" mask="####-##-##" fill-mask="_" autofocus>
+                                <template #append>
+                                    <q-icon name="event" class="cursor-pointer">
+                                        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                                            <q-date v-model="data.created" mask="YYYY-MM-DD">
+                                                <div class="row items-center justify-end">
+                                                    <q-btn v-close-popup label="Close" color="primary" flat />
+                                                </div>
+                                            </q-date>
+                                        </q-popup-proxy>
+                                    </q-icon>
+                                </template>
+                            </q-input>
                         </div>
-                        <div class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-input
-                                    v-model="data.packages"
-                                    :label="t('claim.basicData.packages')"
-                                    :rules="validate('claim.packages')"
-                                />
-                            </div>
-                            <div class="col">
-                                <q-input
-                                    v-model="data.rma"
-                                    :label="t('claim.basicData.returnOfMaterial')"
-                                    :rules="validate('claim.rma')"
-                                />
-                            </div>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-select
+                                v-model="data.workerFk"
+                                :options="workers"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                :label="t('claim.basicData.assignedTo')"
+                                map-options
+                                use-input
+                                @filter="(value, update) => filter(value, update, workerFilter)"
+                                :rules="validate('claim.claimStateFk')"
+                                :input-debounce="0"
+                            >
+                                <template #before>
+                                    <q-avatar color="orange">
+                                        <q-img
+                                            v-if="data.workerFk"
+                                            :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
+                                            spinner-color="white"
+                                        />
+                                    </q-avatar>
+                                </template>
+                            </q-select>
                         </div>
-                        <div class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-checkbox v-model="data.hasToPickUp" :label="t('claim.basicData.picked')" />
-                            </div>
+                        <div class="col">
+                            <q-select
+                                v-model="data.claimStateFk"
+                                :options="claimStates"
+                                option-value="id"
+                                option-label="description"
+                                emit-value
+                                :label="t('claim.basicData.state')"
+                                map-options
+                                use-input
+                                @filter="(value, update) => filter(value, update, statesFilter)"
+                                :rules="validate('claim.claimStateFk')"
+                                :input-debounce="0"
+                            >
+                            </q-select>
                         </div>
-                    </template>
-                </form-model>
-            </q-card>
-        </div>
-    </q-page>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-input
+                                v-model="data.packages"
+                                :label="t('claim.basicData.packages')"
+                                :rules="validate('claim.packages')"
+                            />
+                        </div>
+                        <div class="col">
+                            <q-input
+                                v-model="data.rma"
+                                :label="t('claim.basicData.returnOfMaterial')"
+                                :rules="validate('claim.rma')"
+                            />
+                        </div>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-checkbox v-model="data.hasToPickUp" :label="t('claim.basicData.picked')" />
+                        </div>
+                    </div>
+                </template>
+            </form-model>
+        </q-card>
+    </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 1ed3c6c8e..ad8fa5f7a 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -163,7 +163,9 @@ function stateColor(code) {
         </q-scroll-area>
     </q-drawer>
     <q-page-container>
-        <router-view></router-view>
+        <q-page class="q-pa-md">
+            <router-view></router-view>
+        </q-page>
     </q-page-container>
 </template>
 
diff --git a/src/pages/Claim/Card/ClaimRma.vue b/src/pages/Claim/Card/ClaimRma.vue
index 8fea99121..4162d5acf 100644
--- a/src/pages/Claim/Card/ClaimRma.vue
+++ b/src/pages/Claim/Card/ClaimRma.vue
@@ -80,7 +80,7 @@ function hide() {
         @on-fetch="($data) => (claim = $data)"
         auto-load
     />
-    <q-page class="q-pa-md sticky">
+    <div class="sticky-page">
         <q-page-sticky expand position="top">
             <q-toolbar class="bg-grey-9">
                 <q-space />
@@ -124,7 +124,7 @@ function hide() {
                 </q-card>
             </template>
         </paginate>
-    </q-page>
+    </div>
     <q-dialog v-model="confirmShown" persistent @hide="hide">
         <q-card>
             <q-card-section class="row items-center">
@@ -144,7 +144,7 @@ function hide() {
 .q-toolbar {
     background-color: $grey-9;
 }
-.sticky {
+.sticky-page {
     padding-top: 66px;
 }
 
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 25ebe662e..2f9f28e49 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -90,75 +90,73 @@ function stateColor(code) {
 </script>
 
 <template>
-    <q-page class="q-pa-md">
-        <div class="summary container">
-            <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') }}</h6>
-                        <q-table :columns="detailsColumns" :rows="salesClaimed" flat>
-                            <template #header="props">
-                                <q-tr :props="props">
-                                    <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                                        {{ t(col.label) }}
-                                    </q-th>
-                                </q-tr>
-                            </template>
-                        </q-table>
-                    </q-card-section>
-                    <q-card-section class="q-pa-md">
-                        <h6>{{ t('claim.summary.actions') }}</h6>
-                        <q-separator />
-                        <div id="slider-container">
-                            <q-slider
-                                v-model="claim.responsibility"
-                                label
-                                :label-value="t('claim.summary.responsibility')"
-                                label-always
-                                color="primary"
-                                markers
-                                :marker-labels="[
-                                    { value: 1, label: t('claim.summary.company') },
-                                    { value: 5, label: t('claim.summary.person') },
-                                ]"
-                                :min="1"
-                                :max="5"
-                                readonly
-                            />
-                        </div>
-                    </q-card-section>
-                </template>
-            </q-card>
-        </div>
-    </q-page>
+    <div class="summary container">
+        <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') }}</h6>
+                    <q-table :columns="detailsColumns" :rows="salesClaimed" flat>
+                        <template #header="props">
+                            <q-tr :props="props">
+                                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                                    {{ t(col.label) }}
+                                </q-th>
+                            </q-tr>
+                        </template>
+                    </q-table>
+                </q-card-section>
+                <q-card-section class="q-pa-md">
+                    <h6>{{ t('claim.summary.actions') }}</h6>
+                    <q-separator />
+                    <div id="slider-container">
+                        <q-slider
+                            v-model="claim.responsibility"
+                            label
+                            :label-value="t('claim.summary.responsibility')"
+                            label-always
+                            color="primary"
+                            markers
+                            :marker-labels="[
+                                { value: 1, label: t('claim.summary.company') },
+                                { value: 5, label: t('claim.summary.person') },
+                            ]"
+                            :min="1"
+                            :max="5"
+                            readonly
+                        />
+                    </div>
+                </q-card-section>
+            </template>
+        </q-card>
+    </div>
 </template>
 
 <style lang="scss" scoped>
@@ -194,4 +192,8 @@ function stateColor(code) {
         }
     }
 }
+
+.q-dialog .summary {
+    max-width: 1200px;
+}
 </style>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 65c4fb2ad..3df10a095 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -50,116 +50,115 @@ const filterOptions = {
     />
     <fetch-data url="ContactChannels" @on-fetch="($data) => (contactChannels = $data)" auto-load />
     <fetch-data url="BusinessTypes" @on-fetch="($data) => (businessTypes = $data)" auto-load />
-    <q-page class="q-pa-md">
-        <div class="container">
-            <q-card>
-                <form-model :url="`Clients/${route.params.id}`" model="customer">
-                    <template #form="{ data, validate, filter }">
-                        <div class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-input
-                                    v-model="data.socialName"
-                                    :label="t('customer.basicData.socialName')"
-                                    :rules="validate('client.socialName')"
-                                    autofocus
-                                />
-                            </div>
-                            <div class="col">
-                                <q-select
-                                    v-model="data.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 class="container">
+        <q-card>
+            <form-model :url="`Clients/${route.params.id}`" model="customer">
+                <template #form="{ data, validate, filter }">
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-input
+                                v-model="data.socialName"
+                                :label="t('customer.basicData.socialName')"
+                                :rules="validate('client.socialName')"
+                                autofocus
+                            />
                         </div>
-                        <div class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-input
-                                    v-model="data.contact"
-                                    :label="t('customer.basicData.contact')"
-                                    :rules="validate('client.contact')"
-                                    clearable
-                                />
-                            </div>
-                            <div class="col">
-                                <q-input
-                                    v-model="data.email"
-                                    type="email"
-                                    :label="t('customer.basicData.email')"
-                                    :rules="validate('client.email')"
-                                    clearable
-                                />
-                            </div>
+                        <div class="col">
+                            <q-select
+                                v-model="data.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 class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-input
-                                    v-model="data.phone"
-                                    :label="t('customer.basicData.phone')"
-                                    :rules="validate('client.phone')"
-                                    clearable
-                                />
-                            </div>
-                            <div class="col">
-                                <q-input
-                                    v-model="data.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-input
+                                v-model="data.contact"
+                                :label="t('customer.basicData.contact')"
+                                :rules="validate('client.contact')"
+                                clearable
+                            />
                         </div>
-                        <div class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-select
-                                    v-model="data.salesPersonFk"
-                                    :options="workers"
-                                    option-value="id"
-                                    option-label="name"
-                                    emit-value
-                                    :label="t('customer.basicData.salesPerson')"
-                                    map-options
-                                    use-input
-                                    @filter="(value, update) => filter(value, update, filterOptions)"
-                                    :rules="validate('client.salesPersonFk')"
-                                    :input-debounce="0"
-                                >
-                                    <template #before>
-                                        <q-avatar color="orange">
-                                            <q-img
-                                                v-if="data.salesPersonFk"
-                                                :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
-                                                spinner-color="white"
-                                            />
-                                        </q-avatar>
-                                    </template>
-                                </q-select>
-                            </div>
-                            <div class="col">
-                                <q-select
-                                    v-model="data.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 class="col">
+                            <q-input
+                                v-model="data.email"
+                                type="email"
+                                :label="t('customer.basicData.email')"
+                                :rules="validate('client.email')"
+                                clearable
+                            />
                         </div>
-                    </template>
-                </form-model>
-            </q-card>
-        </div>
-    </q-page>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-input
+                                v-model="data.phone"
+                                :label="t('customer.basicData.phone')"
+                                :rules="validate('client.phone')"
+                                clearable
+                            />
+                        </div>
+                        <div class="col">
+                            <q-input
+                                v-model="data.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="data.salesPersonFk"
+                                :options="workers"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                :label="t('customer.basicData.salesPerson')"
+                                map-options
+                                use-input
+                                @filter="(value, update) => filter(value, update, filterOptions)"
+                                :rules="validate('client.salesPersonFk')"
+                                :input-debounce="0"
+                            >
+                                <template #before>
+                                    <q-avatar color="orange">
+                                        <q-img
+                                            v-if="data.salesPersonFk"
+                                            :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
+                                            spinner-color="white"
+                                        />
+                                    </q-avatar>
+                                </template>
+                            </q-select>
+                        </div>
+                        <div class="col">
+                            <q-select
+                                v-model="data.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>
+                </template>
+            </form-model>
+        </q-card>
+    </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 5e37aefe2..29642f02f 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -174,7 +174,9 @@ async function fetch() {
         </q-scroll-area>
     </q-drawer>
     <q-page-container>
-        <router-view></router-view>
+        <q-page class="q-pa-md">
+            <router-view></router-view>
+        </q-page>
     </q-page-container>
 </template>
 
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 4d55bd048..dd06bd52d 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -29,9 +29,7 @@ function fetch() {
 }
 
 const balanceDue = computed(() => {
-    const [defaulter] = customer.value.defaulters;
-
-    return defaulter.amount;
+    return customer.value.defaulters.length && customer.value.defaulters[0].amount;
 });
 
 const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
@@ -64,378 +62,374 @@ const creditWarning = computed(() => {
 </script>
 
 <template>
-    <q-page class="q-pa-md">
-        <div class="summary container">
-            <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>
+    <div class="summary container">
+        <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', params: { id: entityId } }"
+                                    target="_blank"
+                                >
+                                    <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>
-                                        <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.name') }}</q-item-label>
-                                        <q-item-label>{{ customer.name }}</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.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>
-                                        <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.contactChannel') }}</q-item-label>
-                                        <q-item-label>{{ customer.contactChannel.name }}</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.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>
+                            <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.name') }}</q-item-label>
+                                    <q-item-label>{{ customer.name }}</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 v-if="customer.salesPersonUser">
+                                <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>
+                                    <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 v-if="customer.contactChannel">
+                                <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>
                     </div>
-                </template>
-            </q-card>
-        </div>
-    </q-page>
+                    <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 v-if="customer.province">
+                                <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 v-if="customer.country">
+                                <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" v-if="customer.defaultAddress">
+                        <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" v-if="customer.account">
+                        <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 v-if="customer.claimsRatio">
+                                <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 v-if="customer.claimsRatio">
+                                <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 v-if="customer.debt">
+                                <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 v-if="customer.creditInsurance">
+                                <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 v-if="customer.defaulters">
+                                <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>
+            </template>
+        </q-card>
+    </div>
 </template>
-
 <style lang="scss" scoped>
 .container {
     display: flex;
@@ -491,4 +485,8 @@ const creditWarning = computed(() => {
         }
     }
 }
+
+.q-dialog .summary {
+    max-width: 1200px;
+}
 </style>
diff --git a/src/pages/Ticket/Card/TicketBoxing.vue b/src/pages/Ticket/Card/TicketBoxing.vue
index 81d6fa77b..e777a20ba 100644
--- a/src/pages/Ticket/Card/TicketBoxing.vue
+++ b/src/pages/Ticket/Card/TicketBoxing.vue
@@ -79,81 +79,75 @@ async function getVideoList(expeditionId, timed) {
 </script>
 
 <template>
-    <q-layout view="hhh lpr ffr" class="fit">
-        <q-drawer show-if-above side="right" bordered>
-            <q-scroll-area class="fit">
-                <q-list bordered separator style="max-width: 318px">
-                    <q-item v-if="lastExpedition && videoList.length">
-                        <q-item-section>
-                            <q-item-label class="text-h6">
-                                {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{ time.max }})
-                            </q-item-label>
-                            <q-range
-                                v-model="time"
-                                @change="getVideoList(lastExpedition, time)"
-                                :min="0"
-                                :max="24"
-                                :step="1"
-                                :left-label-value="time.min + ':00'"
-                                :right-label-value="time.max + ':00'"
-                                label
-                                markers
-                                snap
-                                color="orange"
-                            />
-                        </q-item-section>
-                    </q-item>
-                    <q-item v-if="lastExpedition && videoList.length">
-                        <q-item-section>
-                            <q-select
-                                color="orange"
-                                v-model="slide"
-                                :options="videoList"
-                                :label="t('ticket.boxing.selectVideo')"
-                                emit-value
-                                map-options
-                            >
-                                <template #prepend>
-                                    <q-icon name="schedule" />
-                                </template>
-                            </q-select>
-                        </q-item-section>
-                    </q-item>
-                    <q-item
-                        v-for="expedition in expeditions"
-                        :key="expedition.id"
-                        @click="getVideoList(expedition.id)"
-                        clickable
-                        v-ripple
-                    >
-                        <q-item-section>
-                            <q-item-label class="text-h6">#{{ expedition.id }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.boxing.created') }}</q-item-label>
-                            <q-item-label>
-                                {{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}
-                            </q-item-label>
-                            <q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label>
-                            <q-item-label>{{ expedition.packagingItemFk }}</q-item-label>
-                            <q-item-label caption>{{ t('ticket.boxing.worker') }}</q-item-label>
-                            <q-item-label>{{ expedition.userName }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-            </q-scroll-area>
-        </q-drawer>
+    <q-drawer show-if-above side="right">
+        <q-scroll-area class="fit">
+            <q-list bordered separator style="max-width: 318px">
+                <q-item v-if="lastExpedition && videoList.length">
+                    <q-item-section>
+                        <q-item-label class="text-h6">
+                            {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{ time.max }})
+                        </q-item-label>
+                        <q-range
+                            v-model="time"
+                            @change="getVideoList(lastExpedition, time)"
+                            :min="0"
+                            :max="24"
+                            :step="1"
+                            :left-label-value="time.min + ':00'"
+                            :right-label-value="time.max + ':00'"
+                            label
+                            markers
+                            snap
+                            color="orange"
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item v-if="lastExpedition && videoList.length">
+                    <q-item-section>
+                        <q-select
+                            color="orange"
+                            v-model="slide"
+                            :options="videoList"
+                            :label="t('ticket.boxing.selectVideo')"
+                            emit-value
+                            map-options
+                        >
+                            <template #prepend>
+                                <q-icon name="schedule" />
+                            </template>
+                        </q-select>
+                    </q-item-section>
+                </q-item>
+                <q-item
+                    v-for="expedition in expeditions"
+                    :key="expedition.id"
+                    @click="getVideoList(expedition.id)"
+                    clickable
+                    v-ripple
+                >
+                    <q-item-section>
+                        <q-item-label class="text-h6">#{{ expedition.id }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.boxing.created') }}</q-item-label>
+                        <q-item-label>
+                            {{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}
+                        </q-item-label>
+                        <q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label>
+                        <q-item-label>{{ expedition.packagingItemFk }}</q-item-label>
+                        <q-item-label caption>{{ t('ticket.boxing.worker') }}</q-item-label>
+                        <q-item-label>{{ expedition.userName }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+            </q-list>
+        </q-scroll-area>
+    </q-drawer>
 
-        <q-page-container>
-            <q-page>
-                <q-card>
-                    <q-carousel animated v-model="slide" height="max-content">
-                        <q-carousel-slide v-for="video in videoList" :key="video.value" :name="video.value">
-                            <q-video :src="video.url" :ratio="16 / 9" />
-                        </q-carousel-slide>
-                    </q-carousel>
-                </q-card>
-            </q-page>
-        </q-page-container>
-    </q-layout>
+    <q-card>
+        <q-carousel animated v-model="slide" height="max-content">
+            <q-carousel-slide v-for="video in videoList" :key="video.value" :name="video.value">
+                <q-video :src="video.url" :ratio="16 / 9" />
+            </q-carousel-slide>
+        </q-carousel>
+    </q-card>
 </template>
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 625cf9689..edfe47fce 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -147,17 +147,19 @@ function stateColor(state) {
             <q-separator />
 
             <q-list>
-                <!-- <q-item :to="{ name: 'TicketBasicData' }" clickable v-ripple>
+                <q-item :to="{ name: 'TicketBoxing' }" clickable v-ripple>
                     <q-item-section avatar>
-                        <q-icon name="vn:settings" />
+                        <q-icon name="vn:package" />
                     </q-item-section>
-                    <q-item-section>{{ t('ticket.pageTitles.basicData') }}</q-item-section>
-                </q-item> -->
+                    <q-item-section>{{ t('ticket.pageTitles.boxing') }}</q-item-section>
+                </q-item>
             </q-list>
-        </q-scroll-area> </q-drawer
-    >-->
+        </q-scroll-area>
+    </q-drawer>
     <q-page-container>
-        <router-view></router-view>
+        <q-page class="q-pa-md">
+            <router-view></router-view>
+        </q-page>
     </q-page-container>
 </template>
 

From 828c5bbb53f84d3f9c84a6f6fbeca39d803951d9 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Wed, 2 Nov 2022 12:29:23 +0100
Subject: [PATCH 5/7] Autofocus

---
 src/pages/Claim/ClaimRmaList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Claim/ClaimRmaList.vue b/src/pages/Claim/ClaimRmaList.vue
index 1e3b139bc..1528d0f1b 100644
--- a/src/pages/Claim/ClaimRmaList.vue
+++ b/src/pages/Claim/ClaimRmaList.vue
@@ -62,7 +62,7 @@ function hide() {
         <q-page-sticky expand position="top" :offset="[16, 16]">
             <q-card class="card q-pa-md">
                 <q-form @submit="submit">
-                    <q-input v-model="newRma.code" :label="t('claim.rmaList.code')" class="q-mb-md" />
+                    <q-input v-model="newRma.code" :label="t('claim.rmaList.code')" class="q-mb-md" autofocus />
                     <!-- <div class="text-caption">$(0) entries</div> -->
                 </q-form>
             </q-card>

From dd9fd6c166df0b54ce5b6ffcffddf3bc3e252697 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 3 Nov 2022 08:23:16 +0100
Subject: [PATCH 6/7] Card skeleton position fixed

---
 src/pages/Customer/Card/CustomerCard.vue | 6 +++---
 src/pages/Ticket/Card/TicketCard.vue     | 4 ++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 29642f02f..83586ca66 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -20,7 +20,7 @@ const customer = ref(null);
 async function fetch() {
     const entityId = route.params.id;
 
-    const { data } = await axios.get(`Clients/${entityId}/getCard`);
+    const { data } = await axios.get(`Clients/${entityId}/getCard2`);
 
     if (data) customer.value = data;
 }
@@ -191,8 +191,8 @@ async function fetch() {
         justify-content: space-between;
     }
 
-    .q-card__actions {
-        justify-content: center;
+    #descriptor-skeleton .q-card__actions {
+        justify-content: space-around;
     }
 }
 </style>
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index edfe47fce..159ab879e 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -183,5 +183,9 @@ function stateColor(state) {
     .q-card__actions {
         justify-content: center;
     }
+
+    #descriptor-skeleton .q-card__actions {
+        justify-content: space-around;
+    }
 }
 </style>

From 508467bc6cd344b85753d7b659ea99067ab26c33 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 3 Nov 2022 08:53:53 +0100
Subject: [PATCH 7/7] Fixed card actions position

---
 src/pages/Claim/Card/ClaimCard.vue       | 2 +-
 src/pages/Customer/Card/CustomerCard.vue | 8 ++++++--
 src/pages/Ticket/Card/TicketCard.vue     | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index ad8fa5f7a..ec9497818 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -191,7 +191,7 @@ function stateColor(code) {
     }
 
     #descriptor-skeleton .q-card__actions {
-        justify-content: space-around;
+        justify-content: space-between;
     }
 }
 </style>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 83586ca66..d8cd2e1be 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -20,7 +20,7 @@ const customer = ref(null);
 async function fetch() {
     const entityId = route.params.id;
 
-    const { data } = await axios.get(`Clients/${entityId}/getCard2`);
+    const { data } = await axios.get(`Clients/${entityId}/getCard`);
 
     if (data) customer.value = data;
 }
@@ -191,8 +191,12 @@ async function fetch() {
         justify-content: space-between;
     }
 
+    .q-card__actions {
+        justify-content: center;
+    }
+
     #descriptor-skeleton .q-card__actions {
-        justify-content: space-around;
+        justify-content: space-between;
     }
 }
 </style>
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 159ab879e..d339aab42 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -185,7 +185,7 @@ function stateColor(state) {
     }
 
     #descriptor-skeleton .q-card__actions {
-        justify-content: space-around;
+        justify-content: space-between;
     }
 }
 </style>