From 026c632a4cf78db451dc5ccbeaf95215e4e091eb Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 26 Jul 2024 09:47:28 +0200
Subject: [PATCH] feat(customer): improve basicData to balance

---
 src/components/VnTable/VnColumn.vue           |  20 +-
 src/components/VnTable/VnFilter.vue           |   4 +-
 src/components/VnTable/VnTable.vue            |  53 +-
 src/components/common/VnComponent.vue         |   6 +-
 src/components/common/VnInputNumber.vue       |   8 +
 src/components/common/VnSelect.vue            |  14 +-
 src/components/ui/VnNotes.vue                 |   4 +-
 src/components/ui/VnPaginate.vue              |   4 +-
 src/components/ui/VnUserLink.vue              |   1 -
 src/pages/Customer/Card/CustomerBalance.vue   | 536 +++++++++---------
 src/pages/Customer/Card/CustomerBasicData.vue |  69 +--
 src/pages/Customer/Card/CustomerCredits.vue   |  62 +-
 .../Customer/Card/CustomerFiscalData.vue      |   8 +-
 src/pages/Customer/Card/CustomerGreuges.vue   | 192 +++----
 src/pages/Customer/Card/CustomerNotes.vue     |  78 +--
 src/pages/Customer/CustomerList.vue           |   4 +-
 .../components/CustomerCreditCreate.vue       |  67 ---
 .../components/CustomerGreugeCreate.vue       |  97 ----
 .../components/CustomerNewPayment.vue         |  47 +-
 .../components/CustomerNoteCreate.vue         |  57 --
 src/pages/Entry/EntryLatestBuys.vue           |   4 +-
 src/pages/Entry/EntryList.vue                 |   3 +-
 src/pages/Order/OrderLines.vue                |   4 +-
 src/pages/Ticket/TicketWeekly.vue             |   4 +-
 src/router/modules/customer.js                |  95 +---
 25 files changed, 527 insertions(+), 914 deletions(-)
 create mode 100644 src/components/common/VnInputNumber.vue
 delete mode 100644 src/pages/Customer/components/CustomerCreditCreate.vue
 delete mode 100644 src/pages/Customer/components/CustomerGreugeCreate.vue
 delete mode 100644 src/pages/Customer/components/CustomerNoteCreate.vue

diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index 9f6c6d53d..b2d36ebe0 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -7,9 +7,11 @@ import { dashIfEmpty } from 'src/filters';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnSelectCache from 'components/common/VnSelectCache.vue';
 import VnInput from 'components/common/VnInput.vue';
+import VnInputNumber from 'components/common/VnInputNumber.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
 import VnComponent from 'components/common/VnComponent.vue';
+import VnUserLink from 'components/ui/VnUserLink.vue';
 
 const model = defineModel(undefined, { required: true });
 const $props = defineProps({
@@ -66,7 +68,7 @@ const defaultComponents = {
         },
     },
     number: {
-        component: markRaw(VnInput),
+        component: markRaw(VnInputNumber),
         attrs: {
             disable: !$props.isEditable,
             class: 'fit',
@@ -98,14 +100,14 @@ const defaultComponents = {
     },
     checkbox: {
         component: markRaw(QCheckbox),
-        attrs: (prop) => {
+        attrs: ({ model }) => {
             const defaultAttrs = {
                 disable: !$props.isEditable,
-                'model-value': Boolean(prop),
+                'model-value': Boolean(model),
                 class: 'no-padding fit',
             };
 
-            if (typeof prop == 'number') {
+            if (typeof model == 'number') {
                 defaultAttrs['true-value'] = 1;
                 defaultAttrs['false-value'] = 0;
             }
@@ -126,6 +128,9 @@ const defaultComponents = {
     icon: {
         component: markRaw(QIcon),
     },
+    userLink: {
+        component: markRaw(VnUserLink),
+    },
 };
 
 const value = computed(() => {
@@ -152,6 +157,7 @@ const col = computed(() => {
         newColumn.component = 'checkbox';
     if ($props.default && !newColumn.component) newColumn.component = $props.default;
 
+    if ($props.componentProp == 'columnCreate') console.log('newColumn: ', newColumn);
     return newColumn;
 });
 
@@ -163,14 +169,14 @@ const components = computed(() => $props.components ?? defaultComponents);
             v-if="col.before"
             :prop="col.before"
             :components="components"
-            :value="model"
+            :value="{ row, model }"
             v-model="model"
         />
         <VnComponent
             v-if="col.component"
             :prop="col"
             :components="components"
-            :value="model"
+            :value="{ row, model }"
             v-model="model"
         />
         <span :title="value" v-else>{{ value }}</span>
@@ -178,7 +184,7 @@ const components = computed(() => $props.components ?? defaultComponents);
             v-if="col.after"
             :prop="col.after"
             :components="components"
-            :value="model"
+            :value="{ row, model }"
             v-model="model"
         />
     </div>
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index e1faec0a0..82bcb42a6 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -10,6 +10,8 @@ import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
 import VnTableColumn from 'components/VnTable/VnColumn.vue';
 
+defineExpose({ addFilter });
+
 const $props = defineProps({
     column: {
         type: Object,
@@ -32,7 +34,7 @@ const model = defineModel(undefined, { required: true });
 const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
 const columnFilter = computed(() => $props.column?.columnFilter);
 
-const updateEvent = { 'update:modelValue': addFilter };
+const updateEvent = { 'update:modelValue': addFilter, remove: () => addFilter(null) };
 const enterEvent = {
     'keyup.enter': () => addFilter(model.value),
     remove: () => addFilter(null),
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 15cf39bd6..fa87bf662 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -311,11 +311,6 @@ defineExpose({
                         :params="params"
                         :columns="splittedColumns.columns"
                     />
-                    <slot
-                        name="moreFilterPanel"
-                        :params="params"
-                        :columns="splittedColumns.columns"
-                    />
                 </template>
             </VnFilterPanel>
         </QScrollArea>
@@ -326,6 +321,7 @@ defineExpose({
             v-bind="$attrs"
             :limit="20"
             ref="CrudModelRef"
+            @on-fetch="(...args) => emit('onFetch', ...args)"
             :search-url="searchUrl"
             :disable-infinite-scroll="isTableMode"
             @save-changes="reload"
@@ -363,7 +359,7 @@ defineExpose({
                     <template #top-left v-if="!$props.withoutHeader">
                         <slot name="top-left"></slot>
                     </template>
-                    <template #top-right>
+                    <template #top-right v-if="!$props.withoutHeader">
                         <VnVisibleColumn
                             v-if="isTableMode"
                             v-model="splittedColumns.columns"
@@ -391,7 +387,7 @@ defineExpose({
                             <div
                                 class="column self-start q-ml-xs ellipsis"
                                 :class="`text-${col?.align ?? 'left'}`"
-                                style="height: 75px"
+                                :style="$props.columnSearch ? 'height: 75px' : ''"
                             >
                                 <div
                                     class="row items-center no-wrap"
@@ -432,7 +428,7 @@ defineExpose({
                             </VnTableChip>
                         </QTd>
                     </template>
-                    <template #body-cell="{ col, row }">
+                    <template #body-cell="{ col, row, rowIndex }">
                         <!-- Columns -->
                         <QTd
                             auto-width
@@ -445,7 +441,12 @@ defineExpose({
                                     rowCtrlClickFunction($event, row)
                             "
                         >
-                            <slot :name="`column-${col.name}`" :col="col" :row="row">
+                            <slot
+                                :name="`column-${col.name}`"
+                                :col="col"
+                                :row="row"
+                                :row-index="rowIndex"
+                            >
                                 <VnTableColumn
                                     :column="col"
                                     :row="row"
@@ -465,7 +466,6 @@ defineExpose({
                         >
                             <QBtn
                                 v-for="(btn, index) of col.actions"
-                                v-show="btn.show ? btn.show(row) : true"
                                 :key="index"
                                 :title="btn.title"
                                 :icon="btn.icon"
@@ -476,6 +476,11 @@ defineExpose({
                                         ? 'text-primary-light'
                                         : 'color-vn-text '
                                 "
+                                :style="`visibility: ${
+                                    (btn.show && btn.show(row)) ?? true
+                                        ? 'visible'
+                                        : 'hidden'
+                                }`"
                                 @click="btn.action(row)"
                             />
                         </QTd>
@@ -533,7 +538,9 @@ defineExpose({
                                         :class="$props.cardClass"
                                     >
                                         <div
-                                            v-for="col of splittedColumns.cardVisible"
+                                            v-for="(
+                                                col, index
+                                            ) of splittedColumns.cardVisible"
                                             :key="col.name"
                                             class="fields"
                                         >
@@ -554,6 +561,7 @@ defineExpose({
                                                             :name="`column-${col.name}`"
                                                             :col="col"
                                                             :row="row"
+                                                            :row-index="index"
                                                         >
                                                             <VnTableColumn
                                                                 :column="col"
@@ -613,16 +621,23 @@ defineExpose({
         >
             <template #form-inputs="{ data }">
                 <div class="grid-create">
-                    <VnTableColumn
+                    <slot
                         v-for="column of splittedColumns.create"
                         :key="column.name"
-                        :column="column"
-                        :row="{}"
-                        default="input"
-                        v-model="data[column.name]"
-                        :show-label="true"
-                        component-prop="columnCreate"
-                    />
+                        :name="`column-create-${column.name}`"
+                        :data="data"
+                        :column-name="column.name"
+                        :label="column.label"
+                    >
+                        <VnTableColumn
+                            :column="column"
+                            :row="{}"
+                            default="input"
+                            v-model="data[column.name]"
+                            :show-label="true"
+                            component-prop="columnCreate"
+                        />
+                    </slot>
                     <slot name="more-create-dialog" :data="data" />
                 </div>
             </template>
diff --git a/src/components/common/VnComponent.vue b/src/components/common/VnComponent.vue
index f512b846a..3ec3cc860 100644
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@@ -30,12 +30,12 @@ function mix(toComponent) {
     mixed = {
         component: customComponent?.component ?? component,
         attrs: {
-            ...toValueAttrs(attrs),
             ...toValueAttrs(customComponent?.attrs),
-            ...toComponent,
             ...toValueAttrs(customComponent?.forceAttrs),
+            ...toComponent,
+            ...toValueAttrs(attrs),
         },
-        event: event ?? customComponent?.event,
+        event: { ...customComponent?.event, ...event },
     };
     return mixed;
 }
diff --git a/src/components/common/VnInputNumber.vue b/src/components/common/VnInputNumber.vue
new file mode 100644
index 000000000..ef4bb7512
--- /dev/null
+++ b/src/components/common/VnInputNumber.vue
@@ -0,0 +1,8 @@
+<script setup>
+import VnInput from 'src/components/common/VnInput.vue';
+const model = defineModel({ type: [Number, String] });
+</script>
+
+<template>
+    <VnInput v-bind="$attrs" v-model.number="model" type="number" />
+</template>
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index fdc1e9f9e..95849c4dc 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -2,7 +2,7 @@
 import { ref, toRefs, computed, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'src/components/FetchData.vue';
-const emit = defineEmits(['update:modelValue', 'update:options']);
+const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
 
 const $props = defineProps({
     modelValue: {
@@ -159,7 +159,10 @@ async function filterHandler(val, update) {
     let newOptions;
 
     if (!$props.defaultFilter) return update();
-    if ($props.url) {
+    if (
+        $props.url &&
+        ($props.limit || (!$props.limit && Object.keys(myOptions.value).length === 0))
+    ) {
         newOptions = await fetchFilter(val);
     } else newOptions = filter(val, myOptionsOriginal.value);
     update(
@@ -208,7 +211,12 @@ async function filterHandler(val, update) {
             <QIcon
                 v-show="value"
                 name="close"
-                @click.stop="value = null"
+                @click.stop="
+                    () => {
+                        value = null;
+                        emit('remove');
+                    }
+                "
                 class="cursor-pointer"
                 size="xs"
             />
diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index f4cdde310..c38f07612 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -28,8 +28,8 @@ function handleKeyUp(event) {
 }
 async function insert() {
     const body = $props.body;
-    Object.assign(body, { text: newNote.value });
-    await axios.post($props.url, body);
+    const newBody = { ...body, ...{ text: newNote.value } };
+    await axios.post($props.url, newBody);
     await vnPaginateRef.value.fetch();
     newNote.value = '';
 }
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index fd903e759..c27111df4 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -115,8 +115,8 @@ watch(
 );
 
 watch(
-    () => props.url,
-    (url) => fetch({ url })
+    () => [props.url, props.filter],
+    ([url, filter]) => fetch({ url, filter })
 );
 
 const addFilter = async (filter, params) => {
diff --git a/src/components/ui/VnUserLink.vue b/src/components/ui/VnUserLink.vue
index 33836550a..b04ea7476 100644
--- a/src/components/ui/VnUserLink.vue
+++ b/src/components/ui/VnUserLink.vue
@@ -18,4 +18,3 @@ const { t } = useI18n();
     </slot>
     <WorkerDescriptorProxy v-if="$props.workerId" :id="$props.workerId" />
 </template>
-<style scoped></style>
diff --git a/src/pages/Customer/Card/CustomerBalance.vue b/src/pages/Customer/Card/CustomerBalance.vue
index 02f230c03..411c44ad3 100644
--- a/src/pages/Customer/Card/CustomerBalance.vue
+++ b/src/pages/Customer/Card/CustomerBalance.vue
@@ -1,120 +1,191 @@
 <script setup>
-import { computed, onBeforeMount, ref, watch } from 'vue';
+import { computed, onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-
+import { useRole } from 'src/composables/useRole';
 import axios from 'axios';
-import { QCheckbox, QBtn, useQuasar } from 'quasar';
+import { useQuasar } from 'quasar';
 
 import { toCurrency, toDate, toDateHourMin } from 'src/filters';
-import { useState } from 'src/composables/useState';
+import { useState } from 'composables/useState';
 import { useStateStore } from 'stores/useStateStore';
-import { useValidator } from 'src/composables/useValidator';
-import { usePrintService } from 'src/composables/usePrintService';
-import { useSession } from 'src/composables/useSession';
+import { usePrintService } from 'composables/usePrintService';
+import { useSession } from 'composables/useSession';
+import { useVnConfirm } from 'composables/useVnConfirm';
 
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import FetchData from 'components/FetchData.vue';
-import VnInput from 'src/components/common/VnInput.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
+import VnInput from 'components/common/VnInput.vue';
+import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
+import VnFilter from 'components/VnTable/VnFilter.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+
 import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
-const session = useSession();
-
-const tokenMultimedia = session.getTokenMultimedia();
 
+const { openConfirmationModal } = useVnConfirm();
 const { sendEmail } = usePrintService();
 const { t } = useI18n();
-const { validate } = useValidator();
+const { hasAny } = useRole();
+
+const session = useSession();
+const tokenMultimedia = session.getTokenMultimedia();
 const quasar = useQuasar();
 const route = useRoute();
 const state = useState();
 const stateStore = useStateStore();
 const user = state.getUser();
 
-const clientRisks = ref(null);
-const clientRisksRef = ref(null);
-const companiesOptions = ref([]);
-const companyId = ref(null);
-const receiptsRef = ref(null);
-const receiptsData = ref([]);
+const clientRisk = ref([]);
+const tableRef = ref();
+const companyId = ref();
+const companyLastId = ref(user.value.companyFk);
+const balances = ref([]);
+const vnFilterRef = ref({});
+const filter = computed(() => {
+    return {
+        clientId: route.params.id,
+        companyId: companyId.value ?? user.value.companyFk,
+    };
+});
 
-const filterCompanies = { order: ['code'] };
-const userParams = {
-    clientId: route.params.id,
-    companyId: user.value.companyFk,
+const companyFilterColumn = {
+    align: 'left',
+    name: 'companyId',
+    label: t('Company'),
+    component: 'select',
+    attrs: {
+        url: 'Companies',
+        optionLabel: 'code',
+        sortBy: 'code',
+        limit: 0,
+    },
+    columnFilter: {
+        event: {
+            remove: () => (companyId.value = null),
+            'update:modelValue': (newCompanyFk) => {
+                if (!newCompanyFk) return;
+                vnFilterRef.value.addFilter(newCompanyFk);
+                companyLastId.value = newCompanyFk;
+            },
+            blur: () =>
+                !companyId.value &&
+                (companyId.value = companyLastId.value ?? user.value.companyFk),
+        },
+    },
+    visible: false,
+    create: true,
 };
-const filter = {
-    include: { relation: 'company', scope: { fields: ['code'] } },
-    where: { clientFk: route.params.id, companyFk: user.value.companyFk },
+const referenceColumn = {
+    align: 'left',
+    name: 'description',
+    label: t('Reference'),
+};
+const onlyCreate = {
+    visible: false,
+    columnFilter: false,
+    create: true,
 };
 
 const columns = computed(() => [
     {
         align: 'left',
-        field: 'payed',
-        format: (value) => toDate(value),
+        name: 'payed',
         label: t('Date'),
-        name: 'date',
+        format: ({ payed }) => toDate(payed),
+        cardVisible: true,
+        create: true,
+        columnCreate: {
+            component: 'date',
+        },
     },
     {
         align: 'left',
-        field: 'created',
-        format: (value) => toDateHourMin(value),
+        name: 'created',
         label: t('Creation date'),
-        name: 'creationDate',
+        format: ({ created }) => toDateHourMin(created),
+        cardVisible: true,
     },
     {
         align: 'left',
-        field: 'userName',
+        name: 'workerFk',
         label: t('Employee'),
-        name: 'employee',
+        columnField: {
+            component: 'userLink',
+            attrs: ({ row }) => {
+                return {
+                    workerId: row.workerFk,
+                    name: row.userName,
+                };
+            },
+        },
+        cardVisible: true,
     },
+    { ...referenceColumn, isTitle: true, class: 'extend' },
+    companyFilterColumn,
     {
-        align: 'left',
-        field: 'description',
-        label: t('Reference'),
-        name: 'reference',
-    },
-    {
-        align: 'left',
-        field: 'bankFk',
+        align: 'right',
+        name: 'bankFk',
         label: t('Bank'),
-        name: 'bank',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'right',
+        name: 'amountPaid',
+        label: t('Amount'),
+        component: 'number',
+        ...onlyCreate,
     },
     {
         align: 'right',
-        field: 'debit',
-        format: (value) => value && toCurrency(value),
-        label: t('Debit'),
         name: 'debit',
+        label: t('Debit'),
+        format: ({ debit }) => debit && toCurrency(debit),
+        isId: true,
     },
     {
         align: 'right',
-        field: 'credit',
-        format: (value) => value && toCurrency(value),
+        name: 'credit',
         label: t('Havings'),
-        name: 'havings',
+        format: ({ credit }) => credit && toCurrency(credit),
+        cardVisible: true,
     },
     {
         align: 'right',
-        field: 'balance',
-        format: (value) => value && toCurrency(value),
-        label: t('Balance'),
         name: 'balance',
+        label: t('Balance'),
+        format: ({ balance }) => toCurrency(balance),
+        cardVisible: true,
     },
     {
         align: 'left',
-        field: 'isConciliate',
+        name: 'isConciliate',
         label: t('Conciliated'),
-        name: 'conciliated',
+        cardVisible: true,
     },
+    { ...referenceColumn, ...onlyCreate },
     {
         align: 'left',
-        field: 'totalWithVat',
-        label: '',
-        name: 'actions',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('globals.downloadPdf'),
+                icon: 'cloud_download',
+                show: (row) => row.isInvoice,
+                action: (row) => showBalancePdf(row),
+            },
+            {
+                title: t('Send compensation'),
+                icon: 'outgoing_mail',
+                show: (row) => !!row.isCompensation,
+                action: ({ id }) =>
+                    openConfirmationModal(
+                        t('Send compensation'),
+                        t('Do you want to report compensation to the client by mail?'),
+                        () => sendEmail(`Receipts/${id}/balance-compensation-email`)
+                    ),
+            },
+        ],
     },
 ]);
 
@@ -123,254 +194,154 @@ onBeforeMount(() => {
     companyId.value = user.value.companyFk;
 });
 
-watch(
-    () => route.params.id,
-    (newValue) => {
-        if (!newValue) return;
-        userParams.clientId = newValue;
-        filter.where.clientFk = newValue;
-        getData();
+async function getClientRisk(reload = false) {
+    if (reload || !clientRisk.value?.length) {
+        const { data } = await axios.get(`clientRisks`, {
+            params: {
+                filter: JSON.stringify({
+                    include: { relation: 'company', scope: { fields: ['code'] } },
+                    where: { clientFk: route.params.id, companyFk: user.value.companyFk },
+                }),
+            },
+        });
+        clientRisk.value = data;
     }
-);
+    return clientRisk.value;
+}
 
-const getData = () => {
-    receiptsRef.value?.fetch();
-    clientRisksRef.value?.fetch();
-};
-
-const getCurrentBalance = () => {
-    const currentBalance = clientRisks.value.find((balance) => {
+async function getCurrentBalance() {
+    const currentBalance = (await getClientRisk()).find((balance) => {
         return balance.companyFk === companyId.value;
     });
     return currentBalance && currentBalance.amount;
-};
+}
 
-const onFetch = (balances) => {
-    balances.forEach((balance, index) => {
+async function onFetch(data) {
+    balances.value = [];
+    for (const [index, balance] of data.entries()) {
         if (index === 0) {
-            balance.balance = getCurrentBalance();
-        } else {
-            let previousBalance = balances[index - 1];
-            balance.balance =
-                previousBalance.balance -
-                (previousBalance.debit - previousBalance.credit);
+            balance.balance = await getCurrentBalance();
+            continue;
         }
-    });
-
-    receiptsData.value = balances;
-};
+        const previousBalance = data[index - 1];
+        balance.balance =
+            previousBalance?.balance - (previousBalance?.debit - previousBalance?.credit);
+    }
+    balances.value = data;
+}
 
+// BORRAR COMPONENTE Y HACER CON VNTABLE
 const showNewPaymentDialog = () => {
     quasar.dialog({
         component: CustomerNewPayment,
         componentProps: {
             companyId: companyId.value,
-            totalCredit: clientRisks.value[0]?.amount,
-            promise: getData,
+            totalCredit: clientRisk.value[0]?.amount,
+            promise: getClientRisk(true),
         },
     });
 };
 
-const updateCompanyId = (id) => {
-    if (id) {
-        companyId.value = id;
-        userParams.companyId = id;
-        filter.where.companyFk = id;
-    }
-    getData();
-};
-
-const saveFieldValue = async (row) => {
-    try {
-        const payload = { description: row.description };
-        await axios.patch(`Receipts/${row.id}`, payload);
-    } catch (err) {
-        return err;
-    }
-};
-
-const sendEmailAction = () => {
-    sendEmail(`Suppliers/${route.params.id}/campaign-metrics-email`);
-};
-
-const showBalancePdf = (balance) => {
-    const url = `api/InvoiceOuts/${balance.id}/download?access_token=${tokenMultimedia}`;
+const showBalancePdf = ({ id }) => {
+    const url = `api/InvoiceOuts/${id}/download?access_token=${tokenMultimedia}`;
     window.open(url, '_blank');
 };
 </script>
 
 <template>
-    <FetchData
-        :filter="filter"
-        @on-fetch="(data) => (clientRisks = data)"
-        auto-load
-        ref="clientRisksRef"
-        url="ClientRisks"
-    />
-    <FetchData
-        :filter="filterCompanies"
-        @on-fetch="(data) => (companiesOptions = data)"
-        auto-load
-        url="Companies"
-    />
-
-    <VnPaginate
-        auto-load
+    <VnSubToolbar class="q-mb-md">
+        <template #st-data>
+            <div class="column justify-center q-px-md q-py-sm">
+                <span class="text-bold">{{ t('Total by company') }}</span>
+                <div class="row justify-center" v-if="clientRisk?.length">
+                    {{ clientRisk[0].company.code }}:
+                    {{ toCurrency(clientRisk[0].amount) }}
+                </div>
+            </div>
+        </template>
+        <template #st-actions>
+            <div>
+                <VnFilter
+                    ref="vnFilterRef"
+                    v-model="companyId"
+                    data-key="CustomerBalance"
+                    :column="companyFilterColumn"
+                    search-url="balance"
+                />
+            </div>
+        </template>
+    </VnSubToolbar>
+    <VnTable
+        ref="tableRef"
         data-key="CustomerBalance"
         url="Receipts/filter"
-        :user-params="userParams"
-        ref="receiptsRef"
+        search-url="balance"
+        :user-params="filter"
+        :columns="columns"
+        :right-search="false"
+        :is-editable="false"
+        :column-search="false"
         @on-fetch="onFetch"
+        :create="{
+            urlCreate: `Clients/${route.params.id}/createReceipt`,
+            mapper: (data) => {
+                data.companyFk = data.companyId;
+                delete data.companyId;
+                return data;
+            },
+            title: t('New payment'),
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: { companyId },
+        }"
+        auto-load
     >
-        <template #body="{ rows }">
-            <QTable
-                :columns="columns"
-                :no-data-label="t('globals.noResults')"
-                :rows-per-page-options="[0]"
-                :rows="rows"
-                class="full-width q-mt-md"
-                row-key="id"
-            >
-                <template #body-cell-employee="{ row }">
-                    <QTd auto-width @click.stop>
-                        <QBtn color="blue" flat no-caps>{{ row.userName }}</QBtn>
-                        <WorkerDescriptorProxy :id="row.workerFk" />
-                    </QTd>
-                </template>
-
-                <template #body-cell-reference="{ row }">
-                    <QTd auto-width @click.stop v-if="row.isInvoice">
-                        <QBtn color="blue" dense flat>
-                            {{ t('bill', { ref: row.description }) }}
-                        </QBtn>
-                        <InvoiceOutDescriptorProxy :id="row.id" />
-                    </QTd>
-                    <QTd v-else>
-                        <VnInput
-                            @keyup.enter="saveFieldValue(row)"
-                            autofocus
-                            clearable
-                            dense
-                            v-model="row.description"
-                        />
-                    </QTd>
-                </template>
-
-                <template #body-cell-conciliated="{ row }">
-                    <QTd align="center">
-                        <QCheckbox :model-value="row.isConciliate === 1" disable />
-                    </QTd>
-                </template>
-
-                <template #body-cell-actions="{ row }">
-                    <QTd align="center">
-                        <QIcon
-                            @click.stop="showDialog = true"
-                            class="q-ml-md fill-icon"
-                            color="primary"
-                            name="outgoing_mail"
-                            size="sm"
-                            v-if="row.isCompensation"
-                        >
-                            <QTooltip>
-                                {{ t('Send compensation') }}
-                            </QTooltip>
-                        </QIcon>
-                        <QIcon
-                            @click="showBalancePdf(row)"
-                            class="q-ml-md fill-icon"
-                            color="primary"
-                            name="cloud_download"
-                            size="sm"
-                            v-if="row.hasPdf"
-                        >
-                            <QTooltip>
-                                {{ t('globals.downloadPdf') }}
-                            </QTooltip>
-                        </QIcon>
-
-                        <QDialog v-model="showDialog">
-                            <QCard class="q-pa-sm">
-                                <QCardSection>
-                                    <span
-                                        ref="closeButton"
-                                        class="flex justify-end color-vn-label"
-                                        v-close-popup
-                                    >
-                                        <QIcon name="close" size="sm" />
-                                    </span>
-                                    <div class="text-h6">
-                                        {{ t('Send compensation') }}
-                                    </div>
-                                </QCardSection>
-                                <QCardSection>
-                                    <div>
-                                        {{
-                                            t(
-                                                'Do you want to report compensation to the client by mail?'
-                                            )
-                                        }}
-                                    </div>
-                                </QCardSection>
-                                <QCardActions class="flex justify-end q-mb-sm">
-                                    <QBtn
-                                        :label="t('globals.cancel')"
-                                        color="primary"
-                                        flat
-                                        v-close-popup
-                                    />
-                                    <QBtn
-                                        :label="t('globals.save')"
-                                        @click="sendEmailAction"
-                                        class="q-ml-sm"
-                                        color="primary"
-                                    />
-                                </QCardActions>
-                            </QCard>
-                        </QDialog>
-                    </QTd>
-                </template>
-            </QTable>
+        <template #column-balance="{ rowIndex }">
+            {{ toCurrency(balances[rowIndex]?.balance) }}
         </template>
-    </VnPaginate>
-
-    <QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
-        <div class="q-mt-xl q-px-md">
+        <template #column-description="{ row }">
+            <div class="link" v-if="row.isInvoice">
+                {{ row.description }}
+                <InvoiceOutDescriptorProxy :id="row.description" />
+            </div>
+            <span v-else class="q-pa-xs dotted rounded-borders" :title="row.description">
+                {{ row.description }}
+            </span>
+            <QPopupEdit
+                v-model="row.description"
+                v-slot="scope"
+                @save="
+                    (value) =>
+                        value != row.description &&
+                        axios.patch(`Receipts/${row.id}`, { description: value })
+                "
+            >
+                <VnInput
+                    v-model="scope.value"
+                    :disable="!hasAny(['administrative'])"
+                    @keypress.enter="scope.set"
+                    autofocus
+                />
+            </QPopupEdit>
+        </template>
+        <template #column-create-bankFk="{ data, columnName, label }">
             <VnSelect
-                :label="t('Company')"
-                :options="companiesOptions"
-                @update:model-value="updateCompanyId($event)"
-                hide-selected
-                option-label="code"
-                option-value="id"
-                v-model="companyId"
-                :rules="validate('entry.companyFk')"
-            />
-        </div>
-
-        <QCard class="q-ma-md q-pa-md q-mt-lg" v-if="receiptsData?.length">
-            <QCardSection>
-                <div class="flex justify-center text-subtitle1 text-bold">
-                    {{ t('Total by company') }}
-                </div>
-                <div class="flex justify-center">
-                    <div class="q-mr-sm" v-if="clientRisks?.length">
-                        {{ clientRisks[0].company.code }}:
-                    </div>
-                    <div v-if="clientRisks?.length">
-                        {{ toCurrency(clientRisks[0].amount) }}
-                    </div>
-                </div>
-            </QCardSection>
-        </QCard>
-    </QDrawer>
-
-    <QPageSticky :offset="[18, 18]">
-        <QBtn @click.stop="showNewPaymentDialog()" color="primary" fab icon="add" />
-        <QTooltip>
-            {{ t('New payment') }}
-        </QTooltip>
-    </QPageSticky>
+                url="Accountings"
+                :label="label"
+                :limit="0"
+                option-label="bank"
+                sort-by="id"
+                v-model="data[columnName]"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemLabel>
+                            #{{ scope.opt?.id }}: {{ scope.opt?.bank }}
+                        </QItemLabel>
+                    </QItem>
+                </template>
+            </VnSelect>
+        </template>
+    </VnTable>
 </template>
 
 <i18n>
@@ -393,3 +364,12 @@ es:
     Send compensation: Enviar compensación
     Do you want to report compensation to the client by mail?: ¿Desea informar de la compensación al cliente por correo?
 </i18n>
+
+<style lang="scss" scoped>
+.dotted {
+    border: 1px dotted var(--vn-header-color);
+}
+.dotted:hover {
+    border: 1px dotted $primary;
+}
+</style>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 6f37544e8..5e96fa89e 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -8,65 +8,27 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const route = useRoute();
 const { t } = useI18n();
 
-const workers = ref([]);
-const workersCopy = ref([]);
 const businessTypes = ref([]);
 const contactChannels = ref([]);
-
-function setWorkers(data) {
-    workers.value = data;
-    workersCopy.value = data;
-}
-
-const filterOptions = {
-    options: workers,
-    filterFn: (options, value) => {
-        const search = value.toLowerCase();
-
-        if (value === '') return workersCopy.value;
-
-        return options.value.filter((row) => {
-            const id = row.id;
-            const name = row.name.toLowerCase();
-
-            const idMatches = id === search;
-            const nameMatches = name.indexOf(search) > -1;
-
-            return idMatches || nameMatches;
-        });
-    },
-};
 </script>
 <template>
-    <fetch-data
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
-        auto-load
-    />
-    <fetch-data
+    <FetchData
         url="ContactChannels"
         @on-fetch="(data) => (contactChannels = data)"
         auto-load
     />
-    <fetch-data
+    <FetchData
         url="BusinessTypes"
         @on-fetch="(data) => (businessTypes = data)"
         auto-load
     />
-    <fetch-data
-        :filter="filter"
-        @on-fetch="(data) => (clients = data)"
-        auto-load
-        url="Clients"
-    />
-
     <FormModel :url="`Clients/${route.params.id}`" auto-load model="customer">
-        <template #form="{ data, validate, filter }">
+        <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <VnInput
                     :label="t('globals.name')"
@@ -75,7 +37,6 @@ const filterOptions = {
                     clearable
                     v-model="data.name"
                 />
-
                 <QSelect
                     :input-debounce="0"
                     :label="t('customer.basicData.businessType')"
@@ -126,30 +87,26 @@ const filterOptions = {
                 />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <QSelect
-                    :input-debounce="0"
-                    :label="t('customer.basicData.salesPerson')"
-                    :options="workers"
-                    :rules="validate('client.salesPersonFk')"
-                    @filter="(value, update) => filter(value, update, filterOptions)"
-                    emit-value
-                    map-options
-                    option-label="name"
-                    option-value="id"
-                    use-input
+                <VnSelect
+                    url="Workers/activeWithInheritedRole"
+                    :filter="{ where: { role: 'salesPerson' } }"
+                    option-filter="firstName"
                     v-model="data.salesPersonFk"
+                    :label="t('customer.basicData.salesPerson')"
+                    :rules="validate('client.salesPersonFk')"
+                    :use-like="false"
                 >
                     <template #prepend>
                         <QAvatar color="orange">
                             <VnImg
                                 v-if="data.salesPersonFk"
-                                :id="user.id"
+                                :id="data.salesPersonFk"
                                 collection="user"
                                 spinner-color="white"
                             />
                         </QAvatar>
                     </template>
-                </QSelect>
+                </VnSelect>
                 <QSelect
                     v-model="data.contactChannelFk"
                     :options="contactChannels"
diff --git a/src/pages/Customer/Card/CustomerCredits.vue b/src/pages/Customer/Card/CustomerCredits.vue
index b93e1f340..377d95412 100644
--- a/src/pages/Customer/Card/CustomerCredits.vue
+++ b/src/pages/Customer/Card/CustomerCredits.vue
@@ -1,8 +1,7 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { QBtn } from 'quasar';
 import { toCurrency, toDateHourMin } from 'src/filters';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
@@ -10,21 +9,23 @@ import VnUserLink from 'src/components/ui/VnUserLink.vue';
 const { t } = useI18n();
 const route = useRoute();
 
-const filter = {
-    include: [
-        {
-            relation: 'worker',
-            scope: {
-                fields: ['id'],
-                include: { relation: 'user', scope: { fields: ['name'] } },
+const filter = computed(() => {
+    return {
+        include: [
+            {
+                relation: 'worker',
+                scope: {
+                    fields: ['id'],
+                    include: { relation: 'user', scope: { fields: ['name'] } },
+                },
             },
-        },
-    ],
-    where: { clientFk: +route.params.id },
-    order: ['created DESC'],
-    limit: 20,
-};
+        ],
+        where: { clientFk: +route.params.id },
+    };
+});
 
+const tableRef = ref();
+const tableData = ref([]);
 const columns = computed(() => [
     {
         align: 'left',
@@ -43,39 +44,44 @@ const columns = computed(() => [
         name: 'amount',
         format: ({ amount }) => toCurrency(amount),
     },
+    {
+        label: t('Credit'),
+        name: 'credit',
+        create: true,
+        visible: false,
+        attrs: {
+            autofocus: true,
+        },
+    },
 ]);
 </script>
 <template>
-    <!-- Column titles are missing -->
     <VnTable
         ref="tableRef"
         data-key="ClientCredit"
         url="ClientCredits"
+        search-url="credits"
         :filter="filter"
+        :order="['created DESC']"
         :columns="columns"
-        default-mode="table"
         auto-load
         :right-search="false"
         :is-editable="false"
         :use-model="true"
         :column-search="false"
         :disable-option="{ card: true }"
+        @on-fetch="(data) => (tableData = data)"
+        :create="{
+            urlUpdate: `Clients/${route.params.id}`,
+            title: t('New credit'),
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: { credit: tableData.at(0)?.amount },
+        }"
     >
         <template #column-employee="{ row }">
             <VnUserLink :name="row?.worker?.user?.name" :worker-id="row.worker?.id" />
         </template>
     </VnTable>
-    <QPageSticky :offset="[18, 18]">
-        <QBtn
-            @click.stop="$router.push({ name: 'CustomerCreditCreate' })"
-            color="primary"
-            fab
-            icon="add"
-        />
-        <QTooltip>
-            {{ t('New credit') }}
-        </QTooltip>
-    </QPageSticky>
 </template>
 <i18n>
 es:
diff --git a/src/pages/Customer/Card/CustomerFiscalData.vue b/src/pages/Customer/Card/CustomerFiscalData.vue
index a7cdfafc5..c3f08ae5a 100644
--- a/src/pages/Customer/Card/CustomerFiscalData.vue
+++ b/src/pages/Customer/Card/CustomerFiscalData.vue
@@ -89,24 +89,18 @@ function handleLocation(data, location) {
                         </QItem>
                     </template>
                 </VnSelect>
-            </VnRow>
-
-            <VnRow class="row q-gutter-md q-mb-md">
                 <VnLocation
                     :rules="validate('Worker.postcode')"
                     :roles-allowed-to-create="['deliveryAssistant']"
                     :options="postcodesOptions"
                     v-model="data.postcode"
                     @update:model-value="(location) => handleLocation(data, location)"
-                >
-                </VnLocation>
+                />
             </VnRow>
-
             <VnRow>
                 <QCheckbox :label="t('Active')" v-model="data.isActive" />
                 <QCheckbox :label="t('Frozen')" v-model="data.isFreezed" />
             </VnRow>
-
             <VnRow>
                 <QCheckbox :label="t('Has to invoice')" v-model="data.hasToInvoice" />
                 <div>
diff --git a/src/pages/Customer/Card/CustomerGreuges.vue b/src/pages/Customer/Card/CustomerGreuges.vue
index 8cca2ef23..12173727f 100644
--- a/src/pages/Customer/Card/CustomerGreuges.vue
+++ b/src/pages/Customer/Card/CustomerGreuges.vue
@@ -2,101 +2,86 @@
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { QBtn } from 'quasar';
-import { useStateStore } from 'src/stores/useStateStore';
 import { toCurrency } from 'src/filters';
 import { toDateTimeFormat } from 'src/filters/date';
-import FetchData from 'components/FetchData.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
 
 const { t } = useI18n();
 const route = useRoute();
-const stateStore = computed(() => useStateStore());
 const rows = ref([]);
 const totalAmount = ref();
-
-const filter = {
-    include: [
-        {
-            relation: 'greugeType',
-            scope: {
-                fields: ['id', 'name'],
+const tableRef = ref();
+const filter = computed(() => {
+    return {
+        include: [
+            {
+                relation: 'greugeType',
+                scope: {
+                    fields: ['id', 'name'],
+                },
             },
-        },
-        {
-            relation: 'user',
-            scope: {
-                fields: ['id', 'name'],
+            {
+                relation: 'user',
+                scope: {
+                    fields: ['id', 'name'],
+                },
             },
+        ],
+        where: {
+            clientFk: route.params.id,
         },
-    ],
-    order: 'shipped DESC, amount',
-    where: {
-        clientFk: `${route.params.id}`,
-    },
-    limit: 20,
-};
-
-const tableColumnComponents = {
-    date: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    createdBy: {
-        component: QBtn,
-        props: () => ({ flat: true, color: 'blue', noCaps: true }),
-        event: () => {},
-    },
-    comment: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    type: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    amount: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-};
+    };
+});
 
 const columns = computed(() => [
     {
         align: 'left',
-        field: 'shipped',
         label: t('Date'),
-        name: 'date',
-        format: (value) => toDateTimeFormat(value),
+        name: 'shipped',
+        format: ({ shipped }) => toDateTimeFormat(shipped),
+        create: true,
+        columnCreate: {
+            component: 'date',
+            autofocus: true,
+        },
     },
     {
         align: 'left',
-        field: (value) => value?.user?.name,
+        name: 'userFk',
         label: t('Created by'),
-        name: 'createdBy',
+        component: 'userLink',
+        attrs: ({ row }) => {
+            return {
+                defaultName: true,
+                workerId: row.user?.id,
+                name: row.user?.name,
+            };
+        },
     },
     {
         align: 'left',
-        field: 'description',
+        name: 'description',
         label: t('Comment'),
-        name: 'comment',
+        create: true,
     },
     {
         align: 'left',
-        field: (value) => value?.greugeType?.name,
+        name: 'greugeTypeFk',
+        format: ({ greugeType }) => greugeType?.name,
         label: t('Type'),
-        name: 'type',
+        create: true,
+        columnCreate: {
+            component: 'select',
+            url: 'greugeTypes',
+            limit: 0,
+        },
     },
     {
         align: 'left',
-        field: 'amount',
-        label: t('Amount'),
         name: 'amount',
-        format: (value) => toCurrency(value),
+        label: t('Amount'),
+        format: ({ amount }) => toCurrency(amount),
+        create: true,
     },
 ]);
 
@@ -107,60 +92,33 @@ const setRows = (data) => {
 </script>
 
 <template>
-    <FetchData :filter="filter" @on-fetch="setRows" auto-load url="greuges" />
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="300" show-if-above>
-        <QCard class="full-width q-pa-sm">
-            <h6 class="flex justify-end q-my-lg q-pr-lg" v-if="totalAmount !== undefined">
-                <span class="color-vn-label q-mr-md">{{ t('Total') }}:</span>
-                {{ toCurrency(totalAmount) }}
-            </h6>
-            <QSkeleton v-else type="QInput" square />
-        </QCard>
-    </QDrawer>
-    <div class="full-width flex justify-center">
-        <QPage class="card-width q-pa-lg">
-            <QCard class="q-pa-sm q-mt-md">
-                <QTable
-                    :columns="columns"
-                    :no-data-label="t('globals.noResults')"
-                    :pagination="{ rowsPerPage: 12 }"
-                    :rows="rows"
-                    class="full-width q-mt-md"
-                    row-key="id"
-                >
-                    <template #body-cell="props">
-                        <QTd :props="props">
-                            <QTr :props="props" class="cursor-pointer">
-                                <component
-                                    :is="tableColumnComponents[props.col.name].component"
-                                    class="col-content"
-                                    v-bind="
-                                        tableColumnComponents[props.col.name].props(props)
-                                    "
-                                    @click="
-                                        tableColumnComponents[props.col.name].event(props)
-                                    "
-                                >
-                                    {{ props.value }}
-                                    <WorkerDescriptorProxy
-                                        :id="props.row.userFk"
-                                        v-if="props.col.name === 'createdBy'"
-                                    />
-                                </component>
-                            </QTr>
-                        </QTd>
-                    </template>
-                </QTable>
+    <VnTable
+        ref="tableRef"
+        data-key="Greuges"
+        url="Greuges"
+        search-url="greuges"
+        :filter="filter"
+        :order="['shipped DESC', 'amount']"
+        :columns="columns"
+        :right-search="false"
+        :is-editable="false"
+        :use-model="true"
+        :column-search="false"
+        @on-fetch="(data) => setRows(data)"
+        :create="{
+            urlCreate: `Greuges`,
+            title: t('New credit'),
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: { shipped: new Date(), clientFk: route.params.id },
+        }"
+        auto-load
+    >
+        <template #top-left>
+            <QCard class="q-px-md q-py-sm">
+                {{ t('Total') }}: {{ toCurrency(totalAmount) }}
             </QCard>
-        </QPage>
-    </div>
-
-    <QPageSticky :offset="[18, 18]">
-        <QBtn color="primary" fab icon="add" :to="{ name: 'CustomerGreugeCreate' }" />
-        <QTooltip>
-            {{ t('New greuge') }}
-        </QTooltip>
-    </QPageSticky>
+        </template>
+    </VnTable>
 </template>
 
 <style lang="scss">
diff --git a/src/pages/Customer/Card/CustomerNotes.vue b/src/pages/Customer/Card/CustomerNotes.vue
index 419da4b42..f7462d67a 100644
--- a/src/pages/Customer/Card/CustomerNotes.vue
+++ b/src/pages/Customer/Card/CustomerNotes.vue
@@ -1,14 +1,8 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
+import VnNotes from 'src/components/ui/VnNotes.vue';
 
-import { toDateTimeFormat } from 'src/filters/date';
-
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-
-const { t } = useI18n();
 const route = useRoute();
-const router = useRouter();
 
 const noteFilter = {
     order: 'created DESC',
@@ -16,68 +10,14 @@ const noteFilter = {
         clientFk: `${route.params.id}`,
     },
 };
-
-const toCustomerNoteCreate = () => {
-    router.push({ name: 'CustomerNoteCreate' });
-};
 </script>
 
 <template>
-    <div class="full-width flex justify-center">
-        <QCard class="card-width q-pa-lg">
-            <VnPaginate
-                data-key="CustomerNotes"
-                url="clientObservations"
-                auto-load
-                :filter="noteFilter"
-            >
-                <template #body="{ rows }">
-                    <div v-if="rows.length">
-                        <QCard
-                            v-for="(item, index) in rows"
-                            :key="index"
-                            class="q-pa-md q-rounded custom-border"
-                            :class="{ 'q-mb-md': index < rows.length - 1 }"
-                        >
-                            <div class="flex justify-between">
-                                <p class="color-vn-label">
-                                    {{ item.worker.user.nickname }}
-                                </p>
-                                <p class="color-vn-label">
-                                    {{ toDateTimeFormat(item?.created) }}
-                                </p>
-                            </div>
-                            <h6 class="q-mt-xs q-mb-none">{{ item.text }}</h6>
-                        </QCard>
-                    </div>
-
-                    <div v-else>
-                        <h5 class="flex justify-center color-vn-label">
-                            {{ t('globals.noResults') }}
-                        </h5>
-                    </div>
-                </template>
-            </VnPaginate>
-        </QCard>
-    </div>
-
-    <QPageSticky :offset="[18, 18]">
-        <QBtn @click.stop="toCustomerNoteCreate()" color="primary" fab icon="add" />
-        <QTooltip>
-            {{ t('New note') }}
-        </QTooltip>
-    </QPageSticky>
+    <VnNotes
+        url="clientObservations"
+        :add-note="true"
+        :filter="noteFilter"
+        :body="{ clientFk: route.params.id }"
+        style="overflow-y: auto"
+    />
 </template>
-
-<style lang="scss">
-.custom-border {
-    border: 2px solid var(--vn-accent-color);
-    border-radius: 10px;
-    padding: 10px;
-}
-</style>
-
-<i18n>
-es:
-    New note: Nueva nota
-</i18n>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index a82f1fc0e..3a5d18fd9 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -106,9 +106,9 @@ const columns = computed(() => [
             component: null,
             after: {
                 component: markRaw(VnLinkPhone),
-                attrs: (prop) => {
+                attrs: ({ model }) => {
                     return {
-                        'phone-number': prop,
+                        'phone-number': model,
                     };
                 },
             },
diff --git a/src/pages/Customer/components/CustomerCreditCreate.vue b/src/pages/Customer/components/CustomerCreditCreate.vue
deleted file mode 100644
index 729deb258..000000000
--- a/src/pages/Customer/components/CustomerCreditCreate.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-
-import FetchData from 'components/FetchData.vue';
-import FormModel from 'components/FormModel.vue';
-
-const { t } = useI18n();
-const route = useRoute();
-const router = useRouter();
-
-const initialData = ref({});
-
-const setClient = (data) => {
-    initialData.value.credit = data.credit;
-};
-
-const toCustomerCredits = () => {
-    router.push({
-        name: 'CustomerCredits',
-        params: {
-            id: route.params.id,
-        },
-    });
-};
-</script>
-
-<template>
-    <FetchData
-        :filter="filter"
-        @on-fetch="setClient"
-        auto-load
-        :url="`Clients/${route.params.id}/getCard`"
-    />
-
-    <FormModel
-        :form-initial-data="initialData"
-        :observe-form-changes="false"
-        :url-update="`/Clients/${route.params.id}`"
-        @on-data-saved="toCustomerCredits()"
-    >
-        <template #moreActions>
-            <QBtn
-                :label="t('globals.cancel')"
-                @click="toCustomerCredits"
-                color="primary"
-                flat
-                icon="close"
-            />
-        </template>
-
-        <template #form="{ data }">
-            <QInput
-                :label="t('Credit')"
-                clearable
-                type="number"
-                v-model.number="data.credit"
-            />
-        </template>
-    </FormModel>
-</template>
-
-<i18n>
-es:
-    Credit: Crédito
-</i18n>
diff --git a/src/pages/Customer/components/CustomerGreugeCreate.vue b/src/pages/Customer/components/CustomerGreugeCreate.vue
deleted file mode 100644
index fc315d808..000000000
--- a/src/pages/Customer/components/CustomerGreugeCreate.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup>
-import { onMounted, reactive, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-
-import FetchData from 'components/FetchData.vue';
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-
-const { t } = useI18n();
-const route = useRoute();
-const router = useRouter();
-
-const initialData = reactive({
-    shipped: '2001-01-01T11:00:00.000Z',
-});
-
-const greugeTypes = ref([]);
-
-onMounted(() => {
-    initialData.clientFk = `${route.params.id}`;
-});
-
-const toCustomerGreuges = () => {
-    router.push({
-        name: 'CustomerGreuges',
-        params: {
-            id: route.params.id,
-        },
-    });
-};
-</script>
-
-<template>
-    <fetch-data @on-fetch="(data) => (greugeTypes = data)" auto-load url="greugeTypes" />
-
-    <FormModel
-        :form-initial-data="initialData"
-        :observe-form-changes="false"
-        @on-data-saved="toCustomerGreuges()"
-        model="client"
-        url-create="Greuges"
-    >
-        <template #moreActions>
-            <QBtn
-                :label="t('globals.cancel')"
-                @click="toCustomerGreuges"
-                color="primary"
-                flat
-                icon="close"
-            />
-        </template>
-
-        <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
-                <VnInput
-                    :label="t('Amount')"
-                    clearable
-                    type="number"
-                    v-model="data.amount"
-                />
-                <VnInputDate :label="t('Date')" v-model="data.shipped" />
-            </VnRow>
-
-            <VnRow class="row q-gutter-md q-mb-md">
-                <VnInput :label="t('Comment')" clearable v-model="data.description" />
-                <VnSelect
-                    :label="t('Type')"
-                    :options="greugeTypes"
-                    hide-selected
-                    option-label="name"
-                    option-value="id"
-                    v-model="data.greugeTypeFk"
-                />
-            </VnRow>
-        </template>
-    </FormModel>
-</template>
-
-<style lang="scss" scoped>
-.add-icon {
-    cursor: pointer;
-    background-color: $primary;
-    border-radius: 50px;
-}
-</style>
-
-<i18n>
-es:
-    Amount: Importe
-    Date: Fecha
-    Comment: Comentario
-    Type: Tipo
-</i18n>
diff --git a/src/pages/Customer/components/CustomerNewPayment.vue b/src/pages/Customer/components/CustomerNewPayment.vue
index 9acb6af3a..2c2686f5e 100644
--- a/src/pages/Customer/components/CustomerNewPayment.vue
+++ b/src/pages/Customer/components/CustomerNewPayment.vue
@@ -11,12 +11,10 @@ import VnRow from 'components/ui/VnRow.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import { useState } from 'src/composables/useState';
+
 const { t } = useI18n();
 const route = useRoute();
 const { dialogRef } = useDialogPluginComponent();
-const state = useState();
-const user = state.getUser();
 
 const $props = defineProps({
     companyId: {
@@ -40,7 +38,7 @@ const bankOptions = ref([]);
 const clientFindOne = ref([]);
 const deliveredAmount = ref(null);
 const amountToReturn = ref(null);
-const viewRecipt = ref(true);
+const viewReceipt = ref();
 const sendEmail = ref(false);
 const isLoading = ref(false);
 
@@ -57,24 +55,46 @@ const filterClientFindOne = {
         id: route.params.id,
     },
 };
+
 const initialData = reactive({
     amountPaid: $props.totalCredit,
     clientFk: route.params.id,
     companyFk: $props.companyId,
     email: clientFindOne.value.email,
-    bankFk: user.value.localBankFk,
 });
 
 onBeforeMount(() => {
     urlCreate.value = `Clients/${route.params.id}/createReceipt`;
 });
 
-const setPaymentType = (id) => {
-    initialData.payed = '2001-01-01T11:00:00.000Z';
-    if (id === 1) initialData.description = 'Credit card';
-    if (id === 2) initialData.description = 'Cash';
-    if (id === 3 || id === 3117) initialData.description = '';
-    if (id === 4) initialData.description = 'Transfer';
+const setPaymentType = (value) => {
+    // if (id === 1) initialData.description = 'Credit card';
+    // if (id === 2) initialData.description = 'Cash';
+    // if (id === 3 || id === 3117) initialData.description = '';
+    // if (id === 4) initialData.description = 'Transfer';
+    // const CASH_CODE = 2;
+    // // const CASH_CODE = 2
+    // if (!value) return;
+    // const accountingType = CASH_CODE;
+    // initialData.description = '';
+    // viewReceipt.value = value == CASH_CODE;
+    // if (accountingType.code == 'compensation') this.receipt.description = '';
+    // else {
+    //     if (
+    //         accountingType.receiptDescription != null &&
+    //         accountingType.receiptDescription != ''
+    //     )
+    //         this.receipt.description.push(accountingType.receiptDescription);
+    //     if (this.originalDescription)
+    //         this.receipt.description.push(this.originalDescription);
+    //     this.receipt.description = this.receipt.description.join(', ');
+    // }
+    // this.maxAmount = accountingType && accountingType.maxAmount;
+    // this.receipt.payed = Date.vnNew();
+    // if (accountingType.daysInFuture)
+    //     this.receipt.payed.setDate(
+    //         this.receipt.payed.getDate() + accountingType.daysInFuture
+    //     );
 };
 
 const calculateFromAmount = (event) => {
@@ -207,7 +227,6 @@ const onDataSaved = async () => {
 
                 <div class="q-mt-lg" v-if="data.bankFk === 2">
                     <div class="text-h6">{{ t('Cash') }}</div>
-
                     <VnRow class="row q-gutter-md q-mb-md">
                         <VnInput
                             :label="t('Delivered amount')"
@@ -224,13 +243,11 @@ const onDataSaved = async () => {
                             v-model="amountToReturn"
                         />
                     </VnRow>
-
                     <VnRow class="row q-gutter-md q-mb-md">
-                        <QCheckbox v-model="viewRecipt" />
+                        <QCheckbox v-model="viewReceipt" />
                         <QCheckbox v-model="sendEmail" />
                     </VnRow>
                 </div>
-
                 <div class="q-mt-lg row justify-end">
                     <QBtn
                         :disabled="isLoading"
diff --git a/src/pages/Customer/components/CustomerNoteCreate.vue b/src/pages/Customer/components/CustomerNoteCreate.vue
deleted file mode 100644
index ef9982195..000000000
--- a/src/pages/Customer/components/CustomerNoteCreate.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup>
-import { onMounted, reactive } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
-
-const { t } = useI18n();
-const route = useRoute();
-const router = useRouter();
-
-const initialData = reactive({});
-
-onMounted(() => {
-    initialData.clientFk = `${route.params.id}`;
-});
-
-const toCustomerNotes = () => {
-    router.push({
-        name: 'CustomerNotes',
-        params: {
-            id: route.params.id,
-        },
-    });
-};
-</script>
-
-<template>
-    <FormModel
-        :form-initial-data="initialData"
-        :observe-form-changes="false"
-        @on-data-saved="toCustomerNotes()"
-        url-create="ClientObservations"
-    >
-        <template #moreActions>
-            <QBtn
-                :label="t('globals.cancel')"
-                @click="toCustomerNotes"
-                color="primary"
-                flat
-                icon="close"
-            />
-        </template>
-
-        <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
-                <QInput :label="t('Note')" type="textarea" v-model="data.text" />
-            </VnRow>
-        </template>
-    </FormModel>
-</template>
-
-<i18n>
-es:
-    Note: Nota
-</i18n>
diff --git a/src/pages/Entry/EntryLatestBuys.vue b/src/pages/Entry/EntryLatestBuys.vue
index b8e250a57..7c4354b65 100644
--- a/src/pages/Entry/EntryLatestBuys.vue
+++ b/src/pages/Entry/EntryLatestBuys.vue
@@ -18,9 +18,9 @@ const columns = [
         name: 'itemFk',
         columnField: {
             component: VnImg,
-            attrs: (id) => {
+            attrs: ({ row }) => {
                 return {
-                    id,
+                    id: row.id,
                     size: '50x50',
                     width: '50px',
                 };
diff --git a/src/pages/Entry/EntryList.vue b/src/pages/Entry/EntryList.vue
index 4272ce10e..bd5ace677 100644
--- a/src/pages/Entry/EntryList.vue
+++ b/src/pages/Entry/EntryList.vue
@@ -192,7 +192,7 @@ onMounted(async () => {
         :filter="entryFilter"
         :create="{
             urlCreate: 'Entries',
-            title: 'Create entry',
+            title: t('Create entry'),
             onDataSaved: ({ id }) => tableRef.redirect(id),
             formInitialData: {},
         }"
@@ -210,4 +210,5 @@ es:
     Virtual entry: Es una redada
     Search entries: Buscar entradas
     You can search by entry reference: Puedes buscar por referencia de la entrada
+    Create entry: Crear entrada
 </i18n>
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index f361d9898..9814eaf34 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -70,9 +70,9 @@ const columns = computed(() => [
         name: 'image',
         columnField: {
             component: VnImg,
-            attrs: (id) => {
+            attrs: ({ row }) => {
                 return {
-                    id,
+                    id: row.id,
                     width: '50px',
                 };
             },
diff --git a/src/pages/Ticket/TicketWeekly.vue b/src/pages/Ticket/TicketWeekly.vue
index 61532ee51..d68d18c24 100644
--- a/src/pages/Ticket/TicketWeekly.vue
+++ b/src/pages/Ticket/TicketWeekly.vue
@@ -221,9 +221,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 :find="['agencyModeFk', 'agencyModeName']"
                 v-model="row.agencyModeFk"
                 @update:model-value="onUpdate(row.ticketFk, 'agencyModeFk', $event)"
-            >
-                {{ console.log('row: ', row) }}
-            </VnSelectCache>
+            />
         </template>
         <template #column-clientFk="{ row }">
             <span class="link" @click.stop>
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index d9d047433..6d697967b 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -187,87 +187,32 @@ export default {
                 },
                 {
                     path: 'notes',
-                    name: 'CustomerNotesCard',
-                    redirect: { name: 'CustomerNotes' },
-                    children: [
-                        {
-                            path: '',
-                            name: 'CustomerNotes',
-                            meta: {
-                                title: 'notes',
-                                icon: 'vn:notes',
-                            },
-                            component: () =>
-                                import('src/pages/Customer/Card/CustomerNotes.vue'),
-                        },
-                        {
-                            path: 'create',
-                            name: 'CustomerNoteCreate',
-                            meta: {
-                                title: 'note-create',
-                            },
-                            component: () =>
-                                import(
-                                    'src/pages/Customer/components/CustomerNoteCreate.vue'
-                                ),
-                        },
-                    ],
+                    name: 'CustomerNotes',
+                    meta: {
+                        title: 'notes',
+                        icon: 'vn:notes',
+                    },
+                    component: () => import('src/pages/Customer/Card/CustomerNotes.vue'),
                 },
                 {
                     path: 'credits',
-                    name: 'CreditsCard',
-                    redirect: { name: 'CustomerCredits' },
-                    children: [
-                        {
-                            path: '',
-                            name: 'CustomerCredits',
-                            meta: {
-                                title: 'credits',
-                                icon: 'vn:credit',
-                            },
-                            component: () =>
-                                import('src/pages/Customer/Card/CustomerCredits.vue'),
-                        },
-                        {
-                            path: 'create',
-                            name: 'CustomerCreditCreate',
-                            meta: {
-                                title: 'credit-create',
-                            },
-                            component: () =>
-                                import(
-                                    'src/pages/Customer/components/CustomerCreditCreate.vue'
-                                ),
-                        },
-                    ],
+                    name: 'CustomerCredits',
+                    meta: {
+                        title: 'credits',
+                        icon: 'vn:credit',
+                    },
+                    component: () =>
+                        import('src/pages/Customer/Card/CustomerCredits.vue'),
                 },
                 {
                     path: 'greuges',
-                    name: 'GreugesCard',
-                    redirect: { name: 'CustomerGreuges' },
-                    children: [
-                        {
-                            path: '',
-                            name: 'CustomerGreuges',
-                            meta: {
-                                title: 'greuges',
-                                icon: 'vn:greuge',
-                            },
-                            component: () =>
-                                import('src/pages/Customer/Card/CustomerGreuges.vue'),
-                        },
-                        {
-                            path: 'create',
-                            name: 'CustomerGreugeCreate',
-                            meta: {
-                                title: 'greuge-create',
-                            },
-                            component: () =>
-                                import(
-                                    'src/pages/Customer/components/CustomerGreugeCreate.vue'
-                                ),
-                        },
-                    ],
+                    name: 'CustomerGreuges',
+                    meta: {
+                        title: 'greuges',
+                        icon: 'vn:greuge',
+                    },
+                    component: () =>
+                        import('src/pages/Customer/Card/CustomerGreuges.vue'),
                 },
                 {
                     path: 'balance',