Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 7355-accountMigration

package.json

@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "24.32.0",
+    "version": "24.34.0",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",

src/boot/qformMixin.js

@@ -1,28 +1,11 @@
 import { getCurrentInstance } from 'vue';
 
-const filterAvailableInput = (element) => {
-    return element.classList.contains('q-field__native') && !element.disabled;
-};
-const filterAvailableText = (element) => {
-    return (
-        element.__vueParentComponent.type.name === 'QInput' &&
-        element.__vueParentComponent?.attrs?.class !== 'vn-input-date'
-    );
-};
-
 export default {
     mounted: function () {
         const vm = getCurrentInstance();
         if (vm.type.name === 'QForm') {
             if (!['searchbarForm', 'filterPanelForm'].includes(this.$el?.id)) {
-                // AUTOFOCUS
-                const elementsArray = Array.from(this.$el.elements);
-                const availableInputs = elementsArray.filter(filterAvailableInput);
-                const firstInputElement = availableInputs.find(filterAvailableText);
-
-                if (firstInputElement) {
-                    firstInputElement.focus();
-                }
+                // TODO: AUTOFOCUS IS NOT FOCUSING
                 const that = this;
                 this.$el.addEventListener('keyup', function (evt) {
                     if (evt.key === 'Enter') {

src/components/CreateBankEntityForm.vue

@@ -52,7 +52,7 @@ onMounted(async () => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('name')"
                     v-model="data.name"
@@ -67,7 +67,7 @@ onMounted(async () => {
                     :rules="validate('bankEntity.bic')"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnSelect
                         :label="t('country')"

src/components/CreateManualInvoiceForm.vue

@@ -59,7 +59,7 @@ const onDataSaved = async (formData, requestResponse) => {
                 <QIcon name="warning" class="fill-icon q-mr-sm" size="md" />
                 {{ t('Invoicing in progress...') }}
             </span>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Ticket')"
                     :options="ticketsOptions"
@@ -99,7 +99,7 @@ const onDataSaved = async (formData, requestResponse) => {
                 />
                 <VnInputDate :label="t('Max date')" v-model="data.maxShipped" />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Serial')"
                     :options="invoiceOutSerialsOptions"
@@ -117,7 +117,7 @@ const onDataSaved = async (formData, requestResponse) => {
                     v-model="data.taxArea"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Reference')"
                     type="textarea"

src/components/CreateNewCityForm.vue

@@ -39,7 +39,7 @@ const onDataSaved = (dataSaved) => {
         @on-data-saved="onDataSaved($event)"
     >
         <template #form-inputs="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Name')"
                     v-model="data.name"

src/components/CreateNewPostcodeForm.vue

@@ -91,7 +91,7 @@ const onProvinceCreated = async ({ name }, formData) => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Postcode')"
                     v-model="data.code"

src/components/CreateNewProvinceForm.vue

@@ -39,7 +39,7 @@ const onDataSaved = (dataSaved) => {
         @on-data-saved="onDataSaved($event)"
     >
         <template #form-inputs="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Name')"
                     v-model="data.name"

src/components/CreateThermographForm.vue

@@ -53,7 +53,7 @@ const onDataSaved = (dataSaved) => {
         @on-data-saved="onDataSaved($event)"
     >
         <template #form-inputs="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Identifier')"
                     v-model="data.thermographId"

src/components/CrudModel.vue

@@ -1,7 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { computed, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useValidator } from 'src/composables/useValidator';
@@ -97,6 +97,19 @@ defineExpose({
     vnPaginateRef,
 });
 
+onBeforeRouteLeave((to, from, next) => {
+    if (hasChanges.value)
+        quasar.dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('globals.unsavedPopup.title'),
+                message: t('globals.unsavedPopup.subtitle'),
+                promise: () => next(),
+            },
+        });
+    else next();
+});
+
 async function fetch(data) {
     resetData(data);
     emit('onFetch', data);

src/components/EditPictureForm.vue

@@ -245,14 +245,14 @@ const makeRequest = async () => {
                 </div>
 
                 <div class="column">
-                    <VnRow class="row q-gutter-md q-mb-md">
+                    <VnRow>
                         <QOptionGroup
                             :options="uploadMethodsOptions"
                             type="radio"
                             v-model="uploadMethodSelected"
                         />
                     </VnRow>
-                    <VnRow class="row q-gutter-md q-mb-md">
+                    <VnRow>
                         <QFile
                             v-if="uploadMethodSelected === 'computer'"
                             ref="inputFileRef"
@@ -287,7 +287,7 @@ const makeRequest = async () => {
                             placeholder="https://"
                         />
                     </VnRow>
-                    <VnRow class="row q-gutter-md q-mb-md">
+                    <VnRow>
                         <VnSelect
                             :label="t('Orientation')"
                             :options="viewportTypes"

src/components/EditTableCellValueForm.vue

@@ -82,7 +82,7 @@ const closeForm = () => {
             <span class="title">{{ t('Edit') }}</span>
             <span class="countLines">{{ ` ${rows.length} ` }}</span>
             <span class="title">{{ t('buy(s)') }}</span>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Field to edit')"
                     :options="fieldsOptions"

src/components/FilterItemForm.vue

@@ -151,7 +151,7 @@ const selectItem = ({ id }) => {
                 <QIcon name="close" size="sm" />
             </span>
             <h1 class="title">{{ t('Filter item') }}</h1>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput :label="t('entry.buys.name')" v-model="itemFilterParams.name" />
                 <VnInput :label="t('entry.buys.size')" v-model="itemFilterParams.size" />
                 <VnSelect

src/components/FilterTravelForm.vue

@@ -144,7 +144,7 @@ const selectTravel = ({ id }) => {
                 <QIcon name="close" size="sm" />
             </span>
             <h1 class="title">{{ t('Filter travels') }}</h1>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('entry.basicData.agency')"
                     :options="agenciesOptions"

src/components/RegularizeStockForm.vue

@@ -15,7 +15,7 @@ const props = defineProps({
         default: null,
     },
     warehouseFk: {
-        type: Boolean,
+        type: Number,
         default: null,
     },
 });
@@ -23,7 +23,7 @@ const props = defineProps({
 const { t } = useI18n();
 
 const regularizeFormData = reactive({
-    itemFk: props.itemFk,
+    itemFk: Number(props.itemFk),
     warehouseFk: props.warehouseFk,
     quantity: null,
 });
@@ -49,18 +49,19 @@ const onDataSaved = (data) => {
         @on-data-saved="onDataSaved($event)"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QInput
                     :label="t('Type the visible quantity')"
                     v-model.number="data.quantity"
+                    type="number"
                     autofocus
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnSelect
                         :label="t('Warehouse')"
-                        v-model="data.warehouseFk"
+                        v-model.number="data.warehouseFk"
                         :options="warehousesOptions"
                         option-value="id"
                         option-label="name"

src/components/TransferInvoiceForm.vue

@@ -118,13 +118,13 @@ const makeInvoice = async () => {
     />
     <QDialog ref="dialogRef">
         <FormPopup
-        @on-submit="makeInvoice()"
-        :title="t('Transfer invoice')"
-        :custom-submit-button-label="t('Transfer client')"
-        :default-cancel-button="false"
+            @on-submit="makeInvoice()"
+            :title="t('Transfer invoice')"
+            :custom-submit-button-label="t('Transfer client')"
+            :default-cancel-button="false"
         >
-        <template #form-inputs>
-                <VnRow class="row q-gutter-md q-mb-md">
+            <template #form-inputs>
+                <VnRow>
                     <VnSelect
                         :label="t('Client')"
                         :options="clientsOptions"
@@ -160,7 +160,7 @@ const makeInvoice = async () => {
                         :required="true"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('Class')"
                         :options="siiTypeInvoiceOutsOptions"
@@ -191,9 +191,12 @@ const makeInvoice = async () => {
                         :required="true"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div>
-                        <QCheckbox :label="t('Bill destination client')" v-model="checked" />
+                        <QCheckbox
+                            :label="t('Bill destination client')"
+                            v-model="checked"
+                        />
                         <QIcon name="info" class="cursor-info q-ml-sm" size="sm">
                             <QTooltip>{{ t('transferInvoiceInfo') }}</QTooltip>
                         </QIcon>

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(() => {
@@ -163,14 +168,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 +183,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>

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),
@@ -45,7 +47,7 @@ const defaultAttrs = {
 };
 
 const forceAttrs = {
-    label: $props.showTitle ? '' : $props.column.label,
+    label: $props.showTitle ? '' : columnFilter.value?.label ?? $props.column.label,
 };
 
 const selectComponent = {

src/components/VnTable/VnTable.vue

@@ -313,11 +313,6 @@ defineExpose({
                         :params="params"
                         :columns="splittedColumns.columns"
                     />
-                    <slot
-                        name="moreFilterPanel"
-                        :params="params"
-                        :columns="splittedColumns.columns"
-                    />
                 </template>
             </VnFilterPanel>
         </QScrollArea>
@@ -328,6 +323,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"
@@ -365,7 +361,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"
@@ -393,7 +389,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"
@@ -434,7 +430,7 @@ defineExpose({
                             </VnTableChip>
                         </QTd>
                     </template>
-                    <template #body-cell="{ col, row }">
+                    <template #body-cell="{ col, row, rowIndex }">
                         <!-- Columns -->
                         <QTd
                             auto-width
@@ -447,7 +443,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"
@@ -467,7 +468,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"
@@ -478,6 +478,11 @@ defineExpose({
                                         ? 'text-primary-light'
                                         : 'color-vn-text '
                                 "
+                                :style="`visibility: ${
+                                    (btn.show && btn.show(row)) ?? true
+                                        ? 'visible'
+                                        : 'hidden'
+                                }`"
                                 @click="btn.action(row)"
                             />
                         </QTd>
@@ -535,7 +540,9 @@ defineExpose({
                                         :class="$props.cardClass"
                                     >
                                         <div
-                                            v-for="col of splittedColumns.cardVisible"
+                                            v-for="(
+                                                col, index
+                                            ) of splittedColumns.cardVisible"
                                             :key="col.name"
                                             class="fields"
                                         >
@@ -556,6 +563,7 @@ defineExpose({
                                                             :name="`column-${col.name}`"
                                                             :col="col"
                                                             :row="row"
+                                                            :row-index="index"
                                                         >
                                                             <VnTableColumn
                                                                 :column="col"
@@ -615,16 +623,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>

src/components/VnTable/VnVisibleColumn.vue

@@ -81,7 +81,7 @@ async function fetchViewConfigData() {
             return;
         }
     } catch (err) {
-        console.err('Error fetching config view data', err);
+        console.error('Error fetching config view data', err);
     }
 }
 

src/components/common/TableVisibleColumns.vue

@@ -84,7 +84,7 @@ const fetchViewConfigData = async () => {
             setUserConfigViewData(defaultColumns);
         }
     } catch (err) {
-        console.err('Error fetching config view data', err);
+        console.error('Error fetching config view data', err);
     }
 };
 

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;
 }

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>

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(
@@ -196,8 +199,8 @@ async function filterHandler(val, update) {
         map-options
         use-input
         @filter="filterHandler"
-        hide-selected
-        fill-input
+        :hide-selected="$attrs['hide-selected'] ?? true"
+        :fill-input="$attrs['fill-input'] ?? true"
         ref="vnSelectRef"
         lazy-rules
         :class="{ required: $attrs.required }"
@@ -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"
             />

src/components/common/VnTitle.vue

@@ -7,7 +7,7 @@ defineProps({
 </script>
 <template>
     <div :class="$q.screen.gt.md ? 'q-pb-lg' : 'q-pb-md'">
-        <div class="header-link">
+        <div class="header-link" :style="{ cursor: url ? 'pointer' : 'default' }">
             <a :href="url" :class="url ? 'link' : 'color-vn-text'">
                 {{ text }}
                 <QIcon v-if="url" :name="icon" />

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 = '';
 }

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) => {

src/components/ui/VnRow.vue

@@ -3,26 +3,19 @@ defineProps({ wrap: { type: Boolean, default: false } });
 </script>
 <template>
     <div class="vn-row q-gutter-md q-mb-md" :class="{ wrap }">
-        <slot />
+        <slot></slot>
     </div>
 </template>
-<style lang="scss" scoped>
+<style lang="scss" scopped>
 .vn-row {
     display: flex;
-    &.wrap {
-        flex-wrap: wrap;
-    }
-    &:not(.wrap) {
-        > :slotted(*) {
-            flex: 1;
-        }
+    > * {
+        flex: 1;
     }
 }
 @media screen and (max-width: 800px) {
     .vn-row {
-        &:not(.wrap) {
-            flex-direction: column;
-        }
+        flex-direction: column;
     }
 }
 </style>

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>

src/css/app.scss

@@ -153,6 +153,12 @@ select:-webkit-autofill {
     background-color: var(--vn-section-color);
 }
 
+.q-table td[shrink] {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 80px;
+}
+
 .tr-header {
     color: var(--vn-label-color);
 }
@@ -209,27 +215,29 @@ input::-webkit-inner-spin-button {
     max-width: 100%;
 }
 
-/* ===== Scrollbar CSS ===== /
-/ Firefox */
+.q-table__container {
+    /* ===== Scrollbar CSS ===== /
+    / Firefox */
 
-* {
-    scrollbar-width: auto;
-    scrollbar-color: var(--vn-label-color) transparent;
-}
+    * {
+        scrollbar-width: auto;
+        scrollbar-color: var(--vn-label-color) transparent;
+    }
 
-/* Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
+    /* Chrome, Edge, and Safari */
+    *::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+    }
 
-*::-webkit-scrollbar-thumb {
-    background-color: var(--vn-label-color);
-    border-radius: 10px;
-}
+    *::-webkit-scrollbar-thumb {
+        background-color: var(--vn-label-color);
+        border-radius: 10px;
+    }
 
-*::-webkit-scrollbar-track {
-    background: transparent;
+    *::-webkit-scrollbar-track {
+        background: transparent;
+    }
 }
 
 .q-table {

src/i18n/locale/en.yml

@@ -254,6 +254,9 @@ globals:
     comment: Comment
     observations: Observations
     goToModuleIndex: Go to module index
+    unsavedPopup:
+        title: Unsaved changes will be lost
+        subtitle: Are you sure exit without saving?
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred
@@ -386,8 +389,8 @@ customer:
     extendedList:
         tableVisibleColumns:
             id: Identifier
-            name: Comercial name
-            socialName: Business name
+            name: Name
+            socialName: Social name
             fi: Tax number
             salesPersonFk: Salesperson
             credit: Credit
@@ -997,18 +1000,6 @@ route:
             shipped: Preparation date
             viewCmr: View CMR
             downloadCmrs: Download CMRs
-    columnLabels:
-        Id: Id
-        vehicle: Vehicle
-        description: Description
-        isServed: Served
-        worker: Worker
-        date: Date
-        started: Started
-        actions: Actions
-        agency: Agency
-        volume: Volume
-        finished: Finished
 supplier:
     list:
         payMethod: Pay method

src/i18n/locale/es.yml

@@ -256,6 +256,9 @@ globals:
     comment: Comentario
     observations: Observaciones
     goToModuleIndex: Ir al índice del módulo
+    unsavedPopup:
+        title: Los cambios que no haya guardado se perderán
+        subtitle: ¿Seguro que quiere salir sin guardar?
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor
@@ -385,7 +388,7 @@ customer:
     extendedList:
         tableVisibleColumns:
             id: Identificador
-            name: Nombre Comercial
+            name: Nombre
             socialName: Razón social
             fi: NIF / CIF
             salesPersonFk: Comercial
@@ -978,18 +981,6 @@ route:
             shipped: Fecha preparación
             viewCmr: Ver CMR
             downloadCmrs: Descargar CMRs
-    columnLabels:
-        Id: Id
-        vehicle: Vehículo
-        description: Descripción
-        isServed: Servida
-        worker: Trabajador
-        date: Fecha
-        started: Iniciada
-        actions: Acciones
-        agency: Agencia
-        volume: Volumen
-        finished: Finalizada
 supplier:
     list:
         payMethod: Método de pago

src/pages/Account/Alias/AliasCreateForm.vue

@@ -34,12 +34,12 @@ const onDataSaved = ({ id }) => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput v-model="data.alias" :label="t('mailAlias.name')" />
                 </div>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput
                         v-model="data.description"

src/pages/Account/Card/AccountMailAliasCreateForm.vue

@@ -33,7 +33,7 @@ const aliasOptions = ref([]);
         @on-submit="emit('onSubmitCreateAlias', aliasFormData)"
     >
         <template #form-inputs>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnSelect
                         :label="t('account.card.alias')"

src/pages/Account/Role/Card/RoleBasicData.vue

@@ -10,12 +10,12 @@ const { t } = useI18n();
 <template>
     <FormModel :url="`VnRoles/${route.params.id}`" model="VnRole" auto-load>
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput v-model="data.name" :label="t('role.card.name')" />
                 </div>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput
                         v-model="data.description"
@@ -23,7 +23,7 @@ const { t } = useI18n();
                     />
                 </div>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <QCheckbox :label="t('mailAlias.isPublic')" v-model="data.isPublic" />
                 </div>

src/pages/Account/Role/Card/RoleForm.vue

@@ -20,12 +20,12 @@ const { t } = useI18n();
         "
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput v-model="data.name" :label="t('role.card.name')" />
                 </div>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput
                         v-model="data.description"

src/pages/Account/Role/Card/SubRoleCreateForm.vue

@@ -30,7 +30,7 @@ const rolesOptions = ref([]);
         @on-submit="emit('onSubmitCreateSubrole', subRoleFormData)"
     >
         <template #form-inputs>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnSelect
                         :label="t('account.card.role')"

src/pages/Claim/Card/ClaimBasicData.vue

@@ -74,7 +74,7 @@ const statesFilter = {
         :reload="true"
     >
         <template #form="{ data, validate, filter }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.client.name"
                     :label="t('claim.customer')"
@@ -82,7 +82,7 @@ const statesFilter = {
                 />
                 <VnInputDate v-model="data.created" :label="t('claim.created')" />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('claim.assignedTo')"
                     v-model="data.workerFk"
@@ -120,7 +120,7 @@ const statesFilter = {
                 >
                 </QSelect>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QInput
                     v-model.number="data.packages"
                     :label="t('globals.packages')"

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>

src/pages/Customer/Card/CustomerBasicData.vue

@@ -8,66 +8,28 @@ 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 }">
-            <VnRow class="row q-gutter-md q-mb-md">
+        <template #form="{ data, validate }">
+            <VnRow>
                 <VnInput
                     :label="t('globals.name')"
                     :rules="validate('client.socialName')"
@@ -75,7 +37,6 @@ const filterOptions = {
                     clearable
                     v-model="data.name"
                 />
-
                 <QSelect
                     :input-debounce="0"
                     :label="t('customer.basicData.businessType')"
@@ -88,7 +49,7 @@ const filterOptions = {
                     v-model="data.businessTypeFk"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('customer.basicData.contact')"
                     :rules="validate('client.contact')"
@@ -111,7 +72,7 @@ const filterOptions = {
                     </template>
                 </VnInput>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('customer.basicData.phone')"
                     :rules="validate('client.phone')"
@@ -125,31 +86,27 @@ const filterOptions = {
                     v-model="data.mobile"
                 />
             </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
+            <VnRow>
+                <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"
@@ -162,7 +119,7 @@ const filterOptions = {
                     :input-debounce="0"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QSelect
                     :input-debounce="0"
                     :label="t('customer.basicData.previousClient')"

src/pages/Customer/Card/CustomerBillingData.vue

@@ -47,7 +47,7 @@ const getBankEntities = (data, formData) => {
         model="customer"
     >
         <template #form="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Billing data')"
                     :options="payMethods"
@@ -59,7 +59,7 @@ const getBankEntities = (data, formData) => {
                 <VnInput :label="t('Due day')" clearable v-model="data.dueDay" />
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput :label="t('IBAN')" clearable v-model="data.iban">
                     <template #append>
                         <QIcon name="info" class="cursor-info">
@@ -94,7 +94,7 @@ const getBankEntities = (data, formData) => {
                 </VnSelectDialog>
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QCheckbox :label="t('Received LCR')" v-model="data.hasLcr" />
                 <QCheckbox :label="t('VNL core received')" v-model="data.hasCoreVnl" />
                 <QCheckbox :label="t('VNL B2B received')" v-model="data.hasSepaVnl" />

src/pages/Customer/Card/CustomerCreditOpinion.vue

@@ -88,7 +88,7 @@ watch(
         :url-create="`Clients/${route.params.id}/setRating`"
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput
                         :label="t('Rating')"

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:

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -40,7 +40,7 @@ function handleLocation(data, location) {
         model="customer"
     >
         <template #form="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Social name')"
                     :required="true"
@@ -57,11 +57,11 @@ function handleLocation(data, location) {
                 <VnInput :label="t('Tax number')" clearable v-model="data.fi" />
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput :label="t('Street')" clearable v-model="data.street" />
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Sage tax type')"
                     :options="typesTaxes"
@@ -91,22 +91,19 @@ function handleLocation(data, location) {
                 </VnSelect>
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <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>

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">

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>

src/pages/Customer/Card/CustomerUnpaid.vue

@@ -134,7 +134,7 @@ watch(
     <div class="full-width flex justify-center">
         <QCard class="card-width q-pa-lg">
             <QForm>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <QCheckbox :label="t('Unpaid client')" v-model="unpaidClient" />
                     </div>

src/pages/Customer/CustomerCreate.vue

@@ -48,7 +48,7 @@ function handleLocation(data, location) {
             url-create="Clients/createWithUser"
         >
             <template #form="{ data, validate }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <QInput :label="t('Comercial name')" v-model="data.name" />
                     <VnSelect
                         :label="t('Salesperson')"
@@ -59,7 +59,7 @@ function handleLocation(data, location) {
                         v-model="data.salesPersonFk"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('Business type')"
                         :options="businessTypesOptions"
@@ -70,21 +70,21 @@ function handleLocation(data, location) {
                     />
                     <QInput v-model="data.fi" :label="t('Tax number')" />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <QInput
                         :label="t('Business name')"
                         :rules="validate('client.socialName')"
                         v-model="data.socialName"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <QInput
                         :label="t('Street')"
                         :rules="validate('client.street')"
                         v-model="data.street"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
@@ -95,7 +95,7 @@ function handleLocation(data, location) {
                     </VnLocation>
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <QInput v-model="data.userName" :label="t('Web user')" />
                     <QInput
                         :label="t('Email')"

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,
                     };
                 },
             },

src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue

@@ -60,7 +60,7 @@ const onSubmit = async () => {
                             })
                         }}
                     </div>
-                    <VnRow class="row q-gutter-md q-mb-md">
+                    <VnRow>
                         <QInput
                             :label="t('Message')"
                             type="textarea"

src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue

@@ -99,7 +99,7 @@ onMounted(async () => {
         <QPopupProxy ref="popupProxyRef">
             <QCard class="column q-pa-md">
                 <span class="text-body1 q-mb-sm">{{ t('Campaign consumption') }}</span>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :options="moreFields"
                         option-value="code"
@@ -109,7 +109,7 @@ onMounted(async () => {
                         @update:model-value="campaignChange"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInputDate v-model="campaignParams.from" :label="t('From')" />
                     <VnInputDate v-model="campaignParams.to" :label="t('To')" />
                 </VnRow>

src/pages/Customer/components/CustomerAddressCreate.vue

@@ -85,7 +85,7 @@ function handleLocation(data, location) {
         <template #form="{ data, validate }">
             <QCheckbox :label="t('Default')" v-model="data.isDefaultAddress" />
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput :label="t('Consignee')" clearable v-model="data.nickname" />
 
                 <VnInput :label="t('Street address')" clearable v-model="data.street" />
@@ -119,7 +119,7 @@ function handleLocation(data, location) {
                 />
             </div>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Incoterms')"
                     :options="incoterms"

src/pages/Customer/components/CustomerAddressEdit.vue

@@ -146,7 +146,7 @@ function handleLocation(data, location) {
         </template>
 
         <template #form="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <QCheckbox :label="t('Enabled')" v-model="data.isActive" />
                 </div>
@@ -164,7 +164,7 @@ function handleLocation(data, location) {
                 </div>
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput :label="t('Consignee')" clearable v-model="data.nickname" />
                 </div>
@@ -173,7 +173,7 @@ function handleLocation(data, location) {
                 </div>
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnLocation
                         :rules="validate('Worker.postcode')"
@@ -185,7 +185,7 @@ function handleLocation(data, location) {
                 </div>
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnSelect
                         :label="t('Agency')"
@@ -204,7 +204,7 @@ function handleLocation(data, location) {
                     <VnInput :label="t('Mobile')" clearable v-model="data.mobile" />
                 </div>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnSelect
                         :label="t('Incoterms')"

src/pages/Customer/components/CustomerCreditContractsCreate.vue

@@ -39,7 +39,7 @@ const toCustomerCreditContracts = () => {
         </template>
 
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput
                         :label="t('Credit')"

src/pages/Customer/components/CustomerCreditCreate.vue

@@ -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>

src/pages/Customer/components/CustomerFileManagementCreate.vue

@@ -143,7 +143,7 @@ const toCustomerFileManagement = () => {
     <QCard class="q-pa-lg">
         <QCardSection>
             <QForm>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnInput
                             :label="t('Reference')"
@@ -163,7 +163,7 @@ const toCustomerFileManagement = () => {
                     </div>
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnSelect
                             :label="t('Warehouse')"
@@ -184,7 +184,7 @@ const toCustomerFileManagement = () => {
                     </div>
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnInput
                             :label="t('Description')"
@@ -196,7 +196,7 @@ const toCustomerFileManagement = () => {
                     </div>
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <QFile
                             ref="inputFileRef"

src/pages/Customer/components/CustomerFileManagementEdit.vue

@@ -119,7 +119,7 @@ const toCustomerFileManagement = () => {
     <QCard class="q-pa-lg">
         <QCardSection>
             <QForm>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnInput
                             :label="t('Reference')"
@@ -139,7 +139,7 @@ const toCustomerFileManagement = () => {
                     </div>
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnSelect
                             :label="t('Warehouse')"
@@ -160,7 +160,7 @@ const toCustomerFileManagement = () => {
                     </div>
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnInput
                             :label="t('Description')"
@@ -172,7 +172,7 @@ const toCustomerFileManagement = () => {
                     </div>
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <QFile
                             ref="inputFileRef"

src/pages/Customer/components/CustomerGreugeCreate.vue

@@ -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>

src/pages/Customer/components/CustomerNewCustomsAgent.vue

@@ -22,7 +22,7 @@ const onDataSaved = (dataSaved) => {
         url-create="CustomsAgents"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('NIF')"
                     :required="true"
@@ -36,7 +36,7 @@ const onDataSaved = (dataSaved) => {
                     v-model="data.fiscalName"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput :label="t('Street')" clearable v-model="data.street" />
                 <VnInput :label="t('Phone')" clearable v-model="data.phone" />
             </VnRow>

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) => {
@@ -136,7 +156,7 @@ const onDataSaved = async () => {
 
                 <h5 class="q-mt-none">{{ t('New payment') }}</h5>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInputDate
                         :label="t('Date')"
                         :required="true"
@@ -154,7 +174,7 @@ const onDataSaved = async () => {
                     />
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('Bank')"
                         :options="bankOptions"
@@ -189,7 +209,7 @@ const onDataSaved = async () => {
                     {{ t('Compensation') }}
                 </div>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col" v-if="data.bankFk === 3 || data.bankFk === 3117">
                         <VnInput
                             :label="t('Compensation account')"
@@ -207,8 +227,7 @@ 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">
+                    <VnRow>
                         <VnInput
                             :label="t('Delivered amount')"
                             @update:model-value="calculateFromDeliveredAmount($event)"
@@ -224,13 +243,11 @@ const onDataSaved = async () => {
                             v-model="amountToReturn"
                         />
                     </VnRow>
-
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <QCheckbox v-model="viewRecipt" />
+                    <VnRow>
+                        <QCheckbox v-model="viewReceipt" />
                         <QCheckbox v-model="sendEmail" />
                     </VnRow>
                 </div>
-
                 <div class="q-mt-lg row justify-end">
                     <QBtn
                         :disabled="isLoading"

src/pages/Customer/components/CustomerNoteCreate.vue

@@ -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>

src/pages/Customer/components/CustomerRecoverieCreate.vue

@@ -49,12 +49,12 @@ const toCustomerRecoveries = () => {
         </template>
 
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInputDate :label="t('Since')" v-model="data.started" />
                 <VnInputDate :label="t('To')" v-model="data.finished" />
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Amount')"
                     clearable

src/pages/Customer/components/CustomerSamplesCreate.vue

@@ -264,7 +264,7 @@ const toCustomerSamples = () => {
                     />
                 </div>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnInput
                             :label="t('Recipient')"

src/pages/Department/Card/DepartmentBasicData.vue

@@ -29,7 +29,7 @@ const clientsOptions = ref([]);
         class="full-width"
     >
         <template #form="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('department.name')"
                     v-model="data.name"
@@ -44,7 +44,7 @@ const clientsOptions = ref([]);
                     clearable
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('department.chat')"
                     v-model="data.chatName"
@@ -58,7 +58,7 @@ const clientsOptions = ref([]);
                     clearable
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('department.bossDepartment')"
                     v-model="data.workerFk"
@@ -80,7 +80,7 @@ const clientsOptions = ref([]);
                     :rules="validate('department.clientFk')"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QCheckbox
                     :label="t('department.telework')"
                     v-model="data.isTeleworking"
@@ -92,7 +92,7 @@ const clientsOptions = ref([]);
                     :true-value="1"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QCheckbox
                     :label="t('department.worksInProduction')"
                     v-model="data.isProduction"
@@ -102,7 +102,7 @@ const clientsOptions = ref([]);
                     v-model="data.hasToRefill"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QCheckbox
                     :label="t('department.hasToSendMail')"
                     v-model="data.hasToSendMail"

src/pages/Entry/Card/EntryBasicData.vue

@@ -67,7 +67,7 @@ const onFilterTravelSelected = (formData, id) => {
         :clear-store-on-unmount="false"
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('entry.basicData.supplier')"
                     v-model="data.supplierFk"
@@ -121,13 +121,13 @@ const onFilterTravelSelected = (formData, id) => {
                     </template>
                 </VnSelectDialog>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.reference"
                     :label="t('entry.basicData.reference')"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.invoiceNumber"
                     :label="t('entry.basicData.invoiceNumber')"
@@ -143,7 +143,7 @@ const onFilterTravelSelected = (formData, id) => {
                     :required="true"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('entry.basicData.currency')"
                     v-model="data.currencyFk"
@@ -159,7 +159,7 @@ const onFilterTravelSelected = (formData, id) => {
                     min="0"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QInput
                     :label="t('entry.basicData.observation')"
                     type="textarea"
@@ -169,7 +169,7 @@ const onFilterTravelSelected = (formData, id) => {
                     fill-input
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QCheckbox
                     v-model="data.isOrdered"
                     :label="t('entry.basicData.ordered')"

src/pages/Entry/Card/EntryBuysImport.vue

@@ -197,7 +197,7 @@ const redirectToBuysView = () => {
             </div>
         </Teleport>
         <QCard class="q-pa-lg">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QFile
                     ref="inputFileRef"
                     :label="t('entry.buys.file')"
@@ -219,13 +219,13 @@ const redirectToBuysView = () => {
                 </QFile>
             </VnRow>
             <div v-if="importData.file">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput
                         :label="t('entry.buys.reference')"
                         v-model="importData.ref"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput
                         :label="t('entry.buys.observations')"
                         v-model="importData.observation"

src/pages/Entry/EntryCreate.vue

@@ -78,7 +78,7 @@ const redirectToEntryBasicData = (_, { id }) => {
             @on-data-saved="redirectToEntryBasicData"
         >
             <template #form="{ data, validate }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('Supplier')"
                         class="full-width"
@@ -102,7 +102,7 @@ const redirectToEntryBasicData = (_, { id }) => {
                         </template>
                     </VnSelect>
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('Travel')"
                         class="full-width"
@@ -131,7 +131,7 @@ const redirectToEntryBasicData = (_, { id }) => {
                         </template>
                     </VnSelect>
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('Company')"
                         class="full-width"

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',
                 };

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>

src/pages/Entry/MyEntries.vue

@@ -1,71 +1,89 @@
 <script setup>
-import { computed, onMounted } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
 import { useQuasar } from 'quasar';
 import EntryBuysTableDialog from './EntryBuysTableDialog.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
-import VnInput from 'src/components/common/VnInput.vue';
 
-const stateStore = useStateStore();
 const { t } = useI18n();
 const quasar = useQuasar();
-
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-});
-
 const columns = computed(() => [
     {
         align: 'left',
         name: 'id',
         label: t('customer.extendedList.tableVisibleColumns.id'),
-        chip: {
-            condition: () => true,
-        },
-        isId: true,
-        isTitle: false,
+        columnFilter: false,
+        isTitle: true,
     },
     {
-        align: 'left',
+        visible: false,
+        align: 'right',
         label: t('shipped'),
         name: 'shipped',
-        isTitle: false,
-        create: true,
-        cardVisible: true,
-        component: 'date',
-        columnField: {
-            component: null,
+        columnFilter: {
+            name: 'fromShipped',
+            label: t('fromShipped'),
+            component: 'date',
         },
         format: ({ shipped }) => toDate(shipped),
     },
     {
+        visible: false,
         align: 'left',
+        label: t('shipped'),
+        name: 'shipped',
+        columnFilter: {
+            name: 'toShipped',
+            label: t('toShipped'),
+            component: 'date',
+        },
+        format: ({ shipped }) => toDate(shipped),
+        cardVisible: true,
+    },
+    {
+        align: 'right',
+        label: t('shipped'),
+        name: 'shipped',
+        columnFilter: false,
+        format: ({ shipped }) => toDate(shipped),
+    },
+    {
+        align: 'right',
         label: t('landed'),
         name: 'landed',
-        isTitle: false,
-        create: true,
-        cardVisible: false,
-        component: 'date',
-        columnField: {
-            component: null,
-        },
+        columnFilter: false,
         format: ({ landed }) => toDate(landed),
     },
+
+    {
+        align: 'right',
+        label: t('globals.wareHouseIn'),
+        name: 'warehouseInFk',
+        format: (row) => row.warehouseInName,
+        cardVisible: true,
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'warehouses',
+                fields: ['id', 'name'],
+                optionLabel: 'name',
+                optionValue: 'id',
+            },
+            alias: 't',
+            inWhere: true,
+        },
+    },
     {
         align: 'left',
-        label: t('globals.wareHouseIn'),
-        name: 'warehouseInName',
-        isTitle: false,
-        cardVisible: true,
-        create: false,
+        label: t('globals.daysOnward'),
+        name: 'days',
+        visible: false,
     },
     {
         align: 'right',
         name: 'tableActions',
-        computed,
         actions: [
             {
                 title: t('printBuys'),
@@ -87,35 +105,19 @@ const printBuys = (rowId) => {
 </script>
 <template>
     <VnSearchbar
-        data-key="EntryList"
+        data-key="myEntriesList"
         url="Entries/filter"
         :label="t('Search entries')"
         :info="t('You can search by entry reference')"
     />
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnTable
-                ref="myEntriesRef"
-                data-key="myEntriesList"
-                url="Entries/filter"
-                :columns="columns"
-                default-mode="card"
-                auto-load
-                :right-search="true"
-            >
-                <template #moreFilterPanel="{ params }">
-                    <VnInput
-                        :label="t('globals.daysOnward')"
-                        v-model="params.days"
-                        class="q-px-xs row"
-                        dense
-                        filled
-                        outlined
-                    ></VnInput>
-                </template>
-            </VnTable>
-        </div>
-    </QPage>
+    <VnTable
+        data-key="myEntriesList"
+        url="Entries/filter"
+        :columns="columns"
+        default-mode="card"
+        order="shipped DESC"
+        auto-load
+    />
 </template>
 
 <i18n>

src/pages/Entry/locale/en.yml

@@ -8,4 +8,6 @@ entryFilter:
         reference: Reference
 landed: Landed
 shipped: Shipped
+fromShipped: Shipped(from)
+toShipped: Shipped(to)
 printBuys: Print buys

src/pages/Entry/locale/es.yml

@@ -12,4 +12,6 @@ entryFilter:
 
 landed: F. llegada
 shipped: F. salida
+fromShipped: F. salida(desde)
+toShipped: F. salida(hasta)
 Print buys: Imprimir etiquetas

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -2,6 +2,7 @@
 import VnCard from 'components/common/VnCard.vue';
 import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
 import InvoiceInFilter from '../InvoiceInFilter.vue';
+import InvoiceInSearchbar from '../InvoiceInSearchbar.vue';
 
 const filter = {
     include: [
@@ -28,8 +29,9 @@ const filter = {
         :descriptor="InvoiceInDescriptor"
         :filter-panel="InvoiceInFilter"
         search-data-key="InvoiceInList"
-        search-url="InvoiceIns/filter"
-        searchbar-label="Search invoice"
-        searchbar-info="You can search by invoice reference"
-    />
+    >
+        <template #searchbar>
+            <InvoiceInSearchbar />
+        </template>
+    </VnCard>
 </template>

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, reactive, computed, onBeforeMount } from 'vue';
-import { useRouter, onBeforeRouteLeave } from 'vue-router';
+import { useRouter, onBeforeRouteUpdate } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import axios from 'axios';
@@ -129,33 +129,23 @@ onBeforeMount(async () => {
     totalAmount.value = data.totalDueDay;
 });
 
-onBeforeRouteLeave(async (to, from) => {
+onBeforeRouteUpdate(async (to, from) => {
     invoiceInCorrection.correcting.length = 0;
     invoiceInCorrection.corrected = null;
-    if (to.params.id !== from.params.id) await setInvoiceCorrection(entityId.value);
+    if (to.params.id !== from.params.id) {
+        await setInvoiceCorrection(to.params.id);
+        const { data } = await axios.get(`InvoiceIns/${to.params.id}/getTotals`);
+        totalAmount.value = data.totalDueDay;
+    }
 });
 
 async function setInvoiceCorrection(id) {
-    const [{ data: correctingData }, { data: correctedData }] = await Promise.all([
-        axios.get('InvoiceInCorrections', {
-            params: {
-                filter: {
-                    where: {
-                        correctingFk: id,
-                    },
-                },
-            },
-        }),
-        axios.get('InvoiceInCorrections', {
-            params: {
-                filter: {
-                    where: {
-                        correctedFk: id,
-                    },
-                },
-            },
-        }),
-    ]);
+    const { data: correctingData } = await axios.get('InvoiceInCorrections', {
+        params: { filter: { where: { correctingFk: id } } },
+    });
+    const { data: correctedData } = await axios.get('InvoiceInCorrections', {
+        params: { filter: { where: { correctedFk: id } } },
+    });
 
     if (correctingData[0]) invoiceInCorrection.corrected = correctingData[0].correctedFk;
 
@@ -207,8 +197,14 @@ async function cloneInvoice() {
 
 const isAdministrative = () => hasAny(['administrative']);
 
-const isAgricultural = () =>
-    invoiceIn.value?.supplier?.sageWithholdingFk === config.value[0]?.sageWithholdingFk;
+const isAgricultural = () => {
+    console.error(config);
+    if (!config.value) return false;
+    return (
+        invoiceIn.value?.supplier?.sageFarmerWithholdingFk ===
+        config?.value[0]?.sageWithholdingFk
+    );
+};
 
 function showPdfInvoice() {
     if (isAgricultural()) openReport(`InvoiceIns/${entityId.value}/invoice-in-pdf`);
@@ -374,7 +370,7 @@ const createInvoiceInCorrection = async () => {
                 </template>
             </VnLv>
         </template>
-        <template #action="{ entity }">
+        <template #actions="{ entity }">
             <QCardActions>
                 <QBtn
                     size="md"
@@ -442,7 +438,7 @@ const createInvoiceInCorrection = async () => {
                             readonly
                         />
                         <VnSelect
-                            :label="`${useCapitalize(t('globals.class'))}*`"
+                            :label="`${useCapitalize(t('globals.class'))}`"
                             v-model="correctionFormData.invoiceClass"
                             :options="siiTypeInvoiceOuts"
                             option-value="id"
@@ -452,7 +448,7 @@ const createInvoiceInCorrection = async () => {
                     </QItemSection>
                     <QItemSection>
                         <VnSelect
-                            :label="`${useCapitalize(t('globals.type'))}*`"
+                            :label="`${useCapitalize(t('globals.type'))}`"
                             v-model="correctionFormData.invoiceType"
                             :options="cplusRectificationTypes"
                             option-value="id"
@@ -460,7 +456,7 @@ const createInvoiceInCorrection = async () => {
                             :required="true"
                         />
                         <VnSelect
-                            :label="`${useCapitalize(t('globals.reason'))}*`"
+                            :label="`${useCapitalize(t('globals.reason'))}`"
                             v-model="correctionFormData.invoiceReason"
                             :options="invoiceCorrectionTypes"
                             option-value="id"
@@ -488,6 +484,9 @@ const createInvoiceInCorrection = async () => {
     .q-card {
         max-width: 45em;
     }
+    .q-field:nth-child(1) {
+        padding-bottom: 20px;
+    }
 }
 
 @media (max-width: $breakpoint-xs) {

src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue

@@ -72,7 +72,13 @@ const columns = computed(() => [
 ]);
 
 const getTotal = (data, key) =>
-    data.reduce((acc, cur) => acc + +String(cur[key]).replace(',', '.'), 0);
+    data.reduce((acc, cur) => acc + +String(cur[key] || 0).replace(',', '.'), 0);
+
+const formatOpt = (row, { model, options }, prop) => {
+    const obj = row[model];
+    const option = options.find(({ id }) => id == obj);
+    return option ? `${obj}:${option[prop]}` : '';
+};
 </script>
 <template>
     <FetchData
@@ -92,7 +98,7 @@ const getTotal = (data, key) =>
             ref="invoiceInFormRef"
             data-key="InvoiceInIntrastats"
             url="InvoiceInIntrastats"
-            :auto-load="!currency"
+            auto-load
             :data-required="{ invoiceInFk: invoiceInId }"
             :filter="filter"
             v-model:selected="rowsSelected"
@@ -124,6 +130,9 @@ const getTotal = (data, key) =>
                                 option-value="id"
                                 option-label="description"
                                 :filter-options="['id', 'description']"
+                                :hide-selected="false"
+                                :fill-input="false"
+                                :display-value="formatOpt(row, col, 'description')"
                             >
                                 <template #option="scope">
                                     <QItem v-bind="scope.itemProps">
@@ -247,7 +256,11 @@ const getTotal = (data, key) =>
     }
 }
 </style>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.q-table tr .q-td:nth-child(2) input) {
+    display: none;
+}
+</style>
 <i18n>
     en:
         amount: Amount

src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -66,7 +66,7 @@ const vatColumns = ref([
         field: (row) => taxRate(row.taxableBase, row.taxTypeSage?.rate),
         format: (value) => toCurrency(value, currency.value),
         sortable: true,
-        align: 'center',
+        align: 'left',
     },
     {
         name: 'currency',
@@ -339,6 +339,16 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                             </QTh>
                         </QTr>
                     </template>
+                    <template #body-cell-vat="{ value: vatCell }">
+                        <QTd :title="vatCell" shrink>
+                            {{ vatCell }}
+                        </QTd>
+                    </template>
+                    <template #body-cell-transaction="{ value: transactionCell }">
+                        <QTd :title="transactionCell" shrink>
+                            {{ transactionCell }}
+                        </QTd>
+                    </template>
                     <template #bottom-row>
                         <QTr class="bg">
                             <QTd></QTd>
@@ -347,7 +357,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                             }}</QTd>
                             <QTd></QTd>
                             <QTd></QTd>
-                            <QTd class="text-center">{{
+                            <QTd>{{
                                 toCurrency(getTotalTax(entity.invoiceInTax, currency))
                             }}</QTd>
                             <QTd></QTd>
@@ -423,6 +433,10 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
 .bg {
     background-color: var(--vn-accent-color);
 }
+.q-chip {
+    color: var(--vn-text-color);
+}
+
 @media (min-width: $breakpoint-md) {
     .summaryBody {
         .vat {

src/pages/InvoiceIn/Card/InvoiceInVat.vue

@@ -162,8 +162,14 @@ async function addExpense() {
     }
 }
 const getTotalTaxableBase = (rows) =>
-    rows.reduce((acc, { taxableBase }) => acc + +taxableBase, 0);
+    rows.reduce((acc, { taxableBase }) => acc + +(taxableBase || 0), 0);
 const getTotalRate = (rows) => rows.reduce((acc, cur) => acc + +taxRate(cur), 0);
+
+const formatOpt = (row, { model, options }, prop) => {
+    const obj = row[model];
+    const option = options.find(({ id }) => id == obj);
+    return option ? `${obj}:${option[prop]}` : '';
+};
 </script>
 <template>
     <FetchData
@@ -254,8 +260,9 @@ const getTotalRate = (rows) => rows.reduce((acc, cur) => acc + +taxRate(cur), 0)
                             :option-value="col.optionValue"
                             :option-label="col.optionLabel"
                             :filter-options="['id', 'vat']"
-                            :autofocus="col.tabIndex == 1"
-                            input-debounce="0"
+                            :hide-selected="false"
+                            :fill-input="false"
+                            :display-value="formatOpt(row, col, 'vat')"
                         >
                             <template #option="scope">
                                 <QItem v-bind="scope.itemProps">
@@ -280,6 +287,9 @@ const getTotalRate = (rows) => rows.reduce((acc, cur) => acc + +taxRate(cur), 0)
                             :filter-options="['id', 'transaction']"
                             :autofocus="col.tabIndex == 1"
                             input-debounce="0"
+                            :hide-selected="false"
+                            :fill-input="false"
+                            :display-value="formatOpt(row, col, 'transaction')"
                         >
                             <template #option="scope">
                                 <QItem v-bind="scope.itemProps">
@@ -474,11 +484,16 @@ const getTotalRate = (rows) => rows.reduce((acc, cur) => acc + +taxRate(cur), 0)
         />
     </QPageSticky>
 </template>
+
 <style lang="scss" scoped>
 .bg {
     background-color: var(--vn-light-gray);
 }
 
+:deep(.q-table tr td:nth-child(n + 4):nth-child(-n + 5) input) {
+    display: none;
+}
+
 @media (max-width: $breakpoint-xs) {
     .q-dialog {
         .q-card {

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -7,13 +7,19 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
+import FetchData from 'components/FetchData.vue';
 
 const { t } = useI18n();
 defineProps({ dataKey: { type: String, required: true } });
-const suppliers = ref([]);
+const activities = ref([]);
 </script>
 
 <template>
+    <FetchData
+        url="SupplierActivities"
+        auto-load
+        @on-fetch="(data) => (activities = data)"
+    />
     <VnFilterPanel :data-key="dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
@@ -29,11 +35,7 @@ const suppliers = ref([]);
                         v-model="params.supplierRef"
                         is-outlined
                         lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="vn:client" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
@@ -43,11 +45,7 @@ const suppliers = ref([]);
                         v-model="params.fi"
                         is-outlined
                         lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
@@ -59,12 +57,11 @@ const suppliers = ref([]);
                         :label="t('params.supplierFk')"
                         option-value="id"
                         option-label="nickname"
-                        :options="suppliers"
                         dense
                         outlined
                         rounded
-                    >
-                    </VnSelect>
+                        :filter-options="['id', 'name']"
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
@@ -74,11 +71,7 @@ const suppliers = ref([]);
                         v-model="params.account"
                         is-outlined
                         lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="person" size="sm" />
-                        </template>
-                    </VnInput>
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
@@ -105,7 +98,21 @@ const suppliers = ref([]);
                     />
                 </QItemSection>
             </QItem>
-            <QItem class="q-mb-md">
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.supplierActivityFk')"
+                        v-model="params.supplierActivityFk"
+                        dense
+                        outlined
+                        rounded
+                        option-value="code"
+                        option-label="name"
+                        :options="activities"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
                 <QItemSection>
                     <QCheckbox
                         :label="t('params.isBooked')"
@@ -114,6 +121,14 @@ const suppliers = ref([]);
                         toggle-indeterminate
                     />
                 </QItemSection>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.correctingFk')"
+                        v-model="params.correctingFk"
+                        @update:model-value="searchFn()"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
             </QItem>
             <QExpansionItem :label="t('More options')" expand-separator>
                 <QItem>
@@ -123,11 +138,7 @@ const suppliers = ref([]);
                             v-model="params.serialNumber"
                             is-outlined
                             lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -137,11 +148,7 @@ const suppliers = ref([]);
                             v-model="params.serial"
                             is-outlined
                             lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -151,11 +158,7 @@ const suppliers = ref([]);
                             v-model="params.awbCode"
                             is-outlined
                             lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
+                        />
                     </QItemSection>
                 </QItem>
             </QExpansionItem>
@@ -166,7 +169,7 @@ const suppliers = ref([]);
 <i18n>
 en:
     params:
-        search: ID
+        search: Id or supplier name
         supplierRef: Supplier ref.
         supplierFk: Supplier
         fi: Supplier fiscal id
@@ -177,12 +180,17 @@ en:
         dued: Dued
         serialNumber: Serial Number
         serial: Serial
-        account: Account
+        account: Ledger account
         isBooked: is booked
-        correctedFk: Rectificatives
+        correctedFk: Rectified
+        issued: Issued
+        to: To
+        awbCode: AWB
+        correctingFk: Rectificative
+        supplierActivityFk: Supplier activity
 es:
     params:
-        search: Contiene
+        search: Id o nombre proveedor
         supplierRef: Ref. proveedor
         supplierFk: Proveedor
         clientFk: Cliente
@@ -193,10 +201,12 @@ es:
         amount: Importe
         issued: Emitida
         isBooked: Conciliada
-        account: Cuenta
+        account: Cuenta contable
         created: Creada
         dued: Vencida
-        correctedFk: Rectificativas
+        correctedFk: Rectificada
+        correctingFk: Rectificativa
+        supplierActivityFk: Actividad proveedor
     From: Desde
     To: Hasta
     Amount: Importe

src/pages/InvoiceIn/InvoiceInList.vue

@@ -1,44 +1,29 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { downloadFile } from 'src/composables/downloadFile';
 import { toDate, toCurrency } from 'src/filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import InvoiceInFilter from './InvoiceInFilter.vue';
-import { getUrl } from 'src/composables/getUrl';
 import InvoiceInSummary from './Card/InvoiceInSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import InvoiceInSearchbar from 'src/pages/InvoiceIn/InvoiceInSearchbar.vue';
 
 const stateStore = useStateStore();
-const router = useRouter();
 const { viewSummary } = useSummaryDialog();
-let url = ref();
 const { t } = useI18n();
 
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-    url.value = await getUrl('');
-});
+onMounted(async () => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
-
-function navigate(id) {
-    router.push({ path: `/invoice-in/${id}` });
-}
 </script>
 
 <template>
-    <VnSearchbar
-        data-key="InvoiceInList"
-        :label="t('Search invoice')"
-        :info="t('You can search by invoice reference')"
-    />
+    <InvoiceInSearchbar />
     <RightMenu>
         <template #right-panel>
             <InvoiceInFilter data-key="InvoiceInList" />
@@ -54,10 +39,10 @@ function navigate(id) {
             >
                 <template #body="{ rows }">
                     <CardList
-                        v-for="row of rows"
-                        :key="row.id"
+                        v-for="(row, index) of rows"
+                        :key="index"
                         :title="row.supplierRef"
-                        @click="navigate(row.id)"
+                        @click="$router.push({ path: `/invoice-in/${row.id}` })"
                         :id="row.id"
                     >
                         <template #list-items>
@@ -102,7 +87,9 @@ function navigate(id) {
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id)"
+                                @click.stop="
+                                    $router.push({ path: `/invoice-in/${row.id}` })
+                                "
                                 outline
                                 type="reset"
                             />
@@ -115,7 +102,7 @@ function navigate(id) {
                                 class="q-mt-sm"
                             />
                             <QBtn
-                                :label="t('Download')"
+                                :label="t('globals.download')"
                                 class="q-mt-sm"
                                 @click.stop="downloadFile(row.dmsFk)"
                                 type="submit"
@@ -131,10 +118,3 @@ function navigate(id) {
         <QBtn color="primary" icon="add" size="lg" round :href="`/#/invoice-in/create`" />
     </QPageSticky>
 </template>
-
-<i18n>
-es:
-    Search invoice: Buscar factura recibida
-    You can search by invoice reference: Puedes buscar por referencia de la factura
-    Download: Descargar
-</i18n>

src/pages/InvoiceIn/InvoiceInSearchbar.vue

@@ -0,0 +1,18 @@
+<script setup>
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+</script>
+<template>
+    <VnSearchbar
+        data-key="InvoiceInList"
+        :label="t('Search invoice')"
+        :info="t('Search invoices in by id or supplier fiscal name')"
+        url="InvoiceIns/filter"
+    />
+</template>
+<i18n>
+es:
+    Search invoice: Buscar factura recibida
+    Search invoices in by id or supplier fiscal name: Buscar facturas recibidas por id o por nombre fiscal del proveedor
+</i18n>

src/pages/InvoiceIn/locale/es.yml

@@ -1,2 +0,0 @@
-Search invoice: Buscar factura recibida
-You can search by invoice reference: Puedes buscar por referencia de la factura

src/pages/Item/Card/CreateGenusForm.vue

@@ -31,7 +31,7 @@ onMounted(async () => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     ref="genusInputRef"
                     :label="t('Latin genus name')"

src/pages/Item/Card/CreateIntrastatForm.vue

@@ -33,7 +33,7 @@ onMounted(async () => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     ref="identifierInputRef"
                     :label="t('createIntrastatForm.identifier')"

src/pages/Item/Card/CreateSpecieForm.vue

@@ -31,7 +31,7 @@ onMounted(async () => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     ref="specieInputRef"
                     :label="t('Latin species name')"

src/pages/Item/Card/ItemBasicData.vue

@@ -71,7 +71,7 @@ const onIntrastatCreated = (response, formData) => {
         :clear-store-on-unmount="false"
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('basicData.type')"
                     v-model="data.typeFk"
@@ -95,7 +95,7 @@ const onIntrastatCreated = (response, formData) => {
                 <VnInput :label="t('basicData.reference')" v-model="data.comment" />
                 <VnInput :label="t('basicData.relevancy')" v-model="data.relevancy" />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput :label="t('basicData.stems')" v-model="data.stems" />
                 <VnInput
                     :label="t('basicData.multiplier')"
@@ -127,7 +127,7 @@ const onIntrastatCreated = (response, formData) => {
                     </template>
                 </VnSelectDialog>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelectDialog
                     :label="t('basicData.intrastat')"
                     v-model="data.intrastatFk"
@@ -166,7 +166,7 @@ const onIntrastatCreated = (response, formData) => {
                     />
                 </div>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('basicData.weightByPiece')"
                     v-model.number="data.weightByPiece"
@@ -192,7 +192,7 @@ const onIntrastatCreated = (response, formData) => {
                     type="number"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QCheckbox v-model="data.isActive" :label="t('basicData.isActive')" />
                 <QCheckbox v-model="data.hasKgPrice" :label="t('basicData.hasKgPrice')" />
                 <div>

src/pages/Item/Card/ItemBotanical.vue

@@ -67,7 +67,7 @@ onMounted(async () => {
         :clear-store-on-unmount="false"
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelectDialog
                     :label="t('Genus')"
                     v-model="data.genusFk"

src/pages/Item/Card/ItemDiary.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed, onUnmounted, reactive, ref } from 'vue';
+import { onMounted, computed, onUnmounted, reactive, ref, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -17,6 +17,7 @@ import { toDateFormat } from 'src/filters/date.js';
 import { dashIfEmpty } from 'src/filters';
 import { date } from 'quasar';
 import { useState } from 'src/composables/useState';
+import axios from 'axios';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -33,6 +34,7 @@ const itemsBalanceFilter = reactive({
 const itemBalances = ref([]);
 const warehouseFk = ref(null);
 const _showWhatsBeforeInventory = ref(false);
+const inventoriedDate = ref(null);
 
 const columns = computed(() => [
     {
@@ -98,7 +100,7 @@ const showWhatsBeforeInventory = computed({
     set: (val) => {
         _showWhatsBeforeInventory.value = val;
         if (!val) itemsBalanceFilter.where.date = null;
-        else itemsBalanceFilter.where.date = new Date();
+        else itemsBalanceFilter.where.date = inventoriedDate.value ?? new Date();
     },
 });
 
@@ -113,18 +115,36 @@ const getBadgeAttrs = (_date) => {
     return attrs;
 };
 
+const scrollToToday = async () => {
+    await nextTick();
+    const today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+    const todayCell = document.querySelector(`td[data-date="${today.toISOString()}"]`);
+    if (todayCell) {
+        todayCell.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+};
+
+const formatDateForAttribute = (dateValue) => {
+    if (dateValue instanceof Date) return date.formatDate(dateValue, 'YYYY-MM-DD');
+    return dateValue;
+};
+
 const originTypeMap = {
     entry: {
         descriptor: EntryDescriptorProxy,
         icon: 'vn:entry',
+        color: 'green',
     },
     ticket: {
         descriptor: TicketDescriptorProxy,
         icon: 'vn:ticket',
+        color: 'red',
     },
     order: {
         descriptor: OrderDescriptorProxy,
         icon: 'vn:basket',
+        color: 'yellow',
     },
 };
 
@@ -142,7 +162,10 @@ onMounted(async () => {
     if (route.query.warehouseFk) warehouseFk.value = route.query.warehouseFk;
     else if (user.value) warehouseFk.value = user.value.warehouseFk;
     itemsBalanceFilter.where.warehouseFk = warehouseFk.value;
+    const { data } = await axios.get('Configs/findOne');
+    inventoriedDate.value = data.inventoried;
     await fetchItemBalances();
+    await scrollToToday();
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -215,7 +238,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QTd>
             </template>
             <template #body-cell-date="{ row }">
-                <QTd @click.stop>
+                <QTd @click.stop :data-date="formatDateForAttribute(row.shipped)">
                     <QBadge
                         v-bind="getBadgeAttrs(row.shipped)"
                         class="q-ma-none"
@@ -237,12 +260,13 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     >
                         {{ row.originId }}
                     </component>
+                    <QIcon
+                        :name="originTypeMap[row.originType]?.icon"
+                        class="fill-icon q-mr-sm"
+                        size="sm"
+                        :color="originTypeMap[row.originType]?.color"
+                    />
                     <span class="link">
-                        <QIcon
-                            :name="originTypeMap[row.originType]?.icon"
-                            class="fill-icon q-mr-sm"
-                            size="xs"
-                        />
                         {{ row.originId }}
                     </span>
                 </QTd>
@@ -264,7 +288,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         >
                             {{ row.entityId }}
                         </component>
-                        <span class="link">
+                        <span :class="{ link: row.entityId }">
                             {{ dashIfEmpty(row.entityName) }}
                         </span>
                     </QBadge>

src/pages/Item/ItemCreate.vue

@@ -85,7 +85,7 @@ onBeforeMount(async () => {
             @on-data-saved="redirectToItemBasicData"
         >
             <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput
                         v-model="data.provisionalName"
                         :label="t('item.create.name')"
@@ -107,7 +107,7 @@ onBeforeMount(async () => {
                         hide-selected
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('item.create.type')"
                         v-model="data.typeFk"
@@ -154,7 +154,7 @@ onBeforeMount(async () => {
                         </template>
                     </VnSelect>
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('item.create.origin')"
                         v-model="data.originFk"

src/pages/Item/ItemRequestDenyForm.vue

@@ -36,7 +36,7 @@ onMounted(async () => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput
                         ref="textAreaRef"

src/pages/Item/ItemTypeCreate.vue

@@ -53,11 +53,11 @@ const redirectToItemTypeBasicData = (_, { id }) => {
             @on-data-saved="redirectToItemTypeBasicData"
         >
             <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput v-model="data.code" :label="t('itemType.shared.code')" />
                     <VnInput v-model="data.name" :label="t('itemType.shared.name')" />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         v-model="data.workerFk"
                         :label="t('itemType.shared.worker')"
@@ -75,7 +75,7 @@ const redirectToItemTypeBasicData = (_, { id }) => {
                         hide-selected
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         v-model="data.temperatureFk"
                         :label="t('itemType.shared.temperature')"

src/pages/ItemType/Card/ItemTypeBasicData.vue

@@ -42,11 +42,11 @@ const temperaturesOptions = ref([]);
         auto-load
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput v-model="data.code" :label="t('shared.code')" />
                 <VnInput v-model="data.name" :label="t('shared.name')" />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     v-model="data.workerFk"
                     :label="t('shared.worker')"
@@ -64,7 +64,7 @@ const temperaturesOptions = ref([]);
                     hide-selected
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     v-model="data.temperatureFk"
                     :label="t('shared.temperature')"

src/pages/Login/TwoFactor.vue

@@ -7,6 +7,7 @@ import axios from 'axios';
 
 import { useSession } from 'src/composables/useSession';
 import { useLogin } from 'src/composables/useLogin';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const quasar = useQuasar();
 const session = useSession();

src/pages/Order/Card/OrderForm.vue

@@ -125,7 +125,7 @@ async function onDataSaved({ id }) {
             auto-load
         >
             <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         url="Clients"
                         :label="t('order.form.clientFk')"
@@ -171,7 +171,7 @@ async function onDataSaved({ id }) {
                         </template>
                     </VnSelect>
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInputDate
                         placeholder="dd-mm-aaa"
                         :label="t('order.form.landed')"
@@ -181,7 +181,7 @@ async function onDataSaved({ id }) {
                         "
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('order.form.agencyModeFk')"
                         v-model="data.agencyModeFk"

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',
                 };
             },

src/pages/Route/Agency/Card/AgencyWorkcenter.vue

@@ -98,7 +98,7 @@ async function deleteWorCenter(id) {
                     @on-data-saved="paginate.fetch()"
                 >
                     <template #form-inputs="{ data }">
-                        <VnRow class="row q-gutter-md q-mb-md">
+                        <VnRow>
                             <VnSelect
                                 v-model="data.workCenterFk"
                                 option-value="id"

src/pages/Route/Card/RouteDescriptorMenu.vue

@@ -3,6 +3,7 @@ import axios from 'axios';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { useSession } from 'src/composables/useSession';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 
 const props = defineProps({
@@ -11,10 +12,20 @@ const props = defineProps({
         required: true,
     },
 });
-
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
+const routeId = props.route.id;
+
+async function openRouteReport() {
+    const url = new URL(window.location).origin;
+    const { getTokenMultimedia } = useSession();
+    const token = getTokenMultimedia();
+    window.open(
+        `${url}/api/Routes/${routeId}/driver-route-pdf?access_token=${token}`,
+        '_blank'
+    );
+}
 
 function confirmRemove() {
     quasar
@@ -29,20 +40,50 @@ function confirmRemove() {
         .onOk(async () => await router.push({ name: 'RouteList' }));
 }
 
+async function sendMail() {
+    const params = {
+        id: routeId,
+        recipient: props?.route?.worker?.user?.emailUser?.email,
+    };
+    await axios.post(`Routes/${routeId}/driver-route-email`, params);
+}
+
+async function actualizeVolume() {
+    const params = { isOk: true };
+    await axios.post(`Routes/${routeId}/updateVolume`, params);
+    quasar.notify({
+        message: t('globals.dataUpdated'),
+        type: 'positive',
+    });
+}
+
 async function remove() {
-    if (!props.route.id) {
-        return;
-    }
-    await axios.delete(`Routes/${props.route.id}`);
+    await axios.delete(`Routes/${routeId}`);
     quasar.notify({
         message: t('globals.dataDeleted'),
         type: 'positive',
     });
 }
-
-//  TODO: Add reports
 </script>
 <template>
+    <QItem @click="openRouteReport" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="description" />
+        </QItemSection>
+        <QItemSection>{{ t('seeReport') }}</QItemSection>
+    </QItem>
+    <QItem @click="sendMail" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="outgoing_mail" />
+        </QItemSection>
+        <QItemSection>{{ t('sendMail') }}</QItemSection>
+    </QItem>
+    <QItem @click="actualizeVolume" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="package_2" />
+        </QItemSection>
+        <QItemSection>{{ t('actualizeVolume') }}</QItemSection>
+    </QItem>
     <QItem @click="confirmRemove" v-ripple clickable>
         <QItemSection avatar>
             <QIcon name="delete" />
@@ -56,8 +97,14 @@ en:
     confirmDeletion: Confirm deletion
     confirmDeletionMessage: Are you sure you want to delete this route?
     deleteRoute: Delete route
+    seeReport: See route report
+    sendMail: Send route report
+    actualizeVolume: Actualize volume
 es:
     confirmDeletion: Confirmar eliminación,
     confirmDeletionMessage: Seguro que quieres eliminar esta ruta?
     deleteRoute: Eliminar ruta
+    seeReport: Ver informe de ruta
+    sendMail: Enviar informe de ruta
+    actualizeVolume: Actualizar volumen
 </i18n>

src/pages/Route/Card/RouteForm.vue

@@ -120,7 +120,7 @@ const onSave = (data, response) => {
         @on-data-saved="onSave"
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Worker')"
                     v-model="data.workerFk"
@@ -155,7 +155,7 @@ const onSave = (data, response) => {
                     :input-debounce="0"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Agency')"
                     v-model="data.agencyModeFk"
@@ -170,7 +170,7 @@ const onSave = (data, response) => {
                 <VnInputDate v-model="data.created" :label="t('Created')" />
             </VnRow>
             <template v-if="!isNew">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput v-model="data.kmStart" :label="t('Km Start')" clearable />
                     <QInput
                         v-model.number="data.kmEnd"
@@ -184,7 +184,7 @@ const onSave = (data, response) => {
                         type="number"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInputTime
                         v-model="data.started"
                         :label="t('Hour started')"
@@ -205,15 +205,13 @@ const onSave = (data, response) => {
                     </div>
                 </VnRow>
             </template>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <VnInput
-                    v-model="data.description"
-                    :label="t('Description')"
-                    type="textarea"
-                    :rows="3"
-                    clearable
-                />
-            </VnRow>
+            <VnInput
+                v-model="data.description"
+                :label="t('Description')"
+                type="textarea"
+                :rows="3"
+                clearable
+            />
         </template>
     </FormModel>
 </template>

src/pages/Route/Cmr/CmrList.vue

@@ -3,7 +3,7 @@ import { onBeforeMount, onMounted, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Notify } from 'quasar';
 import { useSession } from 'src/composables/useSession';
-import { toDate, toDateHourMin } from 'filters/index';
+import { toDateHourMin } from 'filters/index';
 import { useStateStore } from 'src/stores/useStateStore';
 
 import axios from 'axios';

src/pages/Route/Roadmap/RoadmapBasicData.vue

@@ -38,12 +38,12 @@ const onSave = (data, response) => {
         @on-data-saved="onSave"
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput v-model="data.name" :label="t('Roadmap')" clearable />
                 <VnInputDate v-model="data.etd" :label="t('ETD date')" />
                 <VnInputTime v-model="data.etd" :label="t('ETD hour')" />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.tractorPlate"
                     :label="t('Tractor plate')"
@@ -55,7 +55,7 @@ const onSave = (data, response) => {
                     clearable
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Carrier')"
                     v-model="data.supplierFk"
@@ -84,11 +84,11 @@ const onSave = (data, response) => {
                     clearable
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput v-model="data.driverName" :label="t('Driver name')" clearable />
                 <VnInput v-model="data.phone" :label="t('Phone')" clearable />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.observations"
                     :label="t('Observations')"

src/pages/Shelving/Card/ShelvingForm.vue

@@ -85,7 +85,7 @@ const onSave = (shelving, newShelving) => {
         @on-data-saved="onSave"
     >
         <template #form="{ data, validate, filter }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.code"
                     :label="t('shelving.basicData.code')"
@@ -107,7 +107,7 @@ const onSave = (shelving, newShelving) => {
                     :input-debounce="0"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.priority"
                     type="number"

src/pages/Supplier/Card/SupplierAddressesCreate.vue

@@ -71,7 +71,7 @@ function handleLocation(data, location) {
             @on-data-saved="onDataSaved()"
         >
             <template #form="{ data, validate }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput
                         v-model="data.nickname"
                         :label="t('supplier.addresses.name')"
@@ -81,7 +81,7 @@ function handleLocation(data, location) {
                         :label="t('supplier.addresses.street')"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
@@ -91,7 +91,7 @@ function handleLocation(data, location) {
                     >
                     </VnLocation>
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput
                         v-model="data.phone"
                         :label="t('supplier.addresses.phone')"