merge with dev and resolve conflicts

CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2352.01] - 2023-12-28
+
+### Added
+- (carros) => Se añade contador de carros. #6545
+- (Reclamaciones) => Se añade la sección para hacer acciones sobre una reclamación. #5654
+### Changed
+### Fixed
+- (Reclamaciones) => Se corrige el color de la barra según el tema y el evento de actualziar cantidades #6334
+
+
 ## [2253.01] - 2023-01-05
 
 ### Added

cypress.config.js

@@ -8,7 +8,7 @@ module.exports = defineConfig({
         supportFile: 'test/cypress/support/index.js',
         videosFolder: 'test/cypress/videos',
         video: false,
-        specPattern: 'test/cypress/integration/*.spec.js',
+        specPattern: 'test/cypress/integration/**/*.spec.js',
         experimentalRunAllSpecs: true,
         component: {
             componentFolder: 'src',

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "salix-front",
-    "version": "23.48.01",
+    "version": "23.52.01",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "salix-front",
-            "version": "23.48.01",
+            "version": "23.52.01",
             "dependencies": {
                 "@quasar/cli": "^2.3.0",
                 "@quasar/extras": "^1.16.4",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "23.48.01",
+    "version": "23.52.01",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",
@@ -9,7 +9,7 @@
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test:e2e": "cypress open",
-        "test:e2e:ci": "cd ../salix && gulp docker && cd ../salix-front && cypress run --browser chromium",
+        "test:e2e:ci": "cd ../salix && gulp docker && cd ../salix-front && cypress run",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
         "test:unit": "vitest",
         "test:unit:ci": "vitest run"

quasar.config.js

@@ -29,7 +29,7 @@ module.exports = configure(function (/* ctx */) {
         // app boot file (/src/boot)
         // --> boot files are part of "main.js"
         // https://v2.quasar.dev/quasar-cli/boot-files
-        boot: ['i18n', 'axios', 'vnDate'],
+        boot: ['i18n', 'axios', 'vnDate', 'validations'],
 
         // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
         css: ['app.scss'],
@@ -66,7 +66,9 @@ module.exports = configure(function (/* ctx */) {
             // publicPath: '/',
             // analyze: true,
             // env: {},
-            // rawDefine: {}
+            rawDefine: {
+                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+            },
             // ignorePublicFolder: true,
             // minify: false,
             // polyfillModulePreload: true,
@@ -89,11 +91,12 @@ module.exports = configure(function (/* ctx */) {
 
             vitePlugins: [
                 [
-                    VueI18nPlugin,
+                    VueI18nPlugin({
+                        runtimeOnly: false
+                    }),
                     {
                         // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
                         // compositionOnly: false,
-
                         // you need to set i18n resource including paths !
                         include: path.resolve(__dirname, './src/i18n/**'),
                     },

src/boot/validations.js

@@ -0,0 +1,6 @@
+import { boot } from 'quasar/wrappers';
+import { useValidationsStore } from 'src/stores/useValidationsStore';
+
+export default boot(async ({ store }) => {
+    await useValidationsStore(store).fetchModels();
+});

src/components/CrudModel.vue

@@ -136,6 +136,10 @@ async function saveChanges(data) {
     hasChanges.value = false;
     isLoading.value = false;
     emit('saveChanges', data);
+    quasar.notify({
+        type: 'positive',
+        message: t('globals.dataSaved'),
+    });
 }
 
 async function insert() {

src/components/FormModel.vue

@@ -84,7 +84,7 @@ onUnmounted(() => {
 const isLoading = ref(false);
 // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
 const hasChanges = ref(!$props.observeFormChanges);
-const originalData = ref();
+const originalData = ref({...$props.formInitialData});
 const formData = computed(() => state.get($props.model));
 const formUrl = computed(() => $props.url);
 
@@ -141,7 +141,9 @@ function reset() {
     originalData.value = JSON.parse(JSON.stringify(originalData.value));
 
     emit('onFetch', state.get($props.model));
-    hasChanges.value = false;
+    if ($props.observeFormChanges) {
+        hasChanges.value = false;
+    }
 }
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -166,7 +168,7 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <QBanner v-if="hasChanges" class="text-white bg-warning">
+    <QBanner v-if="$props.observeFormChanges && hasChanges" class="text-white bg-warning">
         <QIcon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>
     </QBanner>

src/components/common/SendEmailDialog.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { ref } from 'vue';
-import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useDialogPluginComponent } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
 
 const props = defineProps({
     data: {
@@ -24,12 +26,13 @@ const address = ref(props.data.address);
 const isLoading = ref(false);
 
 async function confirm() {
-    const response = { address };
-
+    const response = { address: address.value };
     if (props.promise) {
         isLoading.value = true;
+        const { address: _address, ...restData } = props.data;
+
         try {
-            Object.assign(response, props.data);
+            Object.assign(response, restData);
             await props.promise(response);
         } finally {
             isLoading.value = false;
@@ -51,7 +54,7 @@ async function confirm() {
                 {{ t('The notification will be sent to the following address') }}
             </QCardSection>
             <QCardSection class="q-pt-none">
-                <QInput dense v-model="address" rounded outlined autofocus />
+                <VnInput v-model="address" is-outlined autofocus />
             </QCardSection>
             <QCardActions align="right">
                 <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />

src/components/common/VnAccountNumber.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { QInput } from 'quasar';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: '',
+    },
+});
+
+const emit = defineEmits(['update:modelValue', 'accountShortToStandard']);
+
+let internalValue = ref(props.modelValue);
+
+watch(
+    () => props.modelValue,
+    (newVal) => {
+        internalValue.value = newVal;
+    }
+);
+
+watch(
+    () => internalValue.value,
+    (newVal) => {
+        emit('update:modelValue', newVal);
+        accountShortToStandard();
+    }
+);
+
+function accountShortToStandard() {
+    internalValue.value = internalValue.value.replace(
+        '.',
+        '0'.repeat(11 - internalValue.value.length)
+    );
+}
+</script>
+
+<template>
+    <q-input v-model="internalValue" />
+</template>

src/components/common/VnInput.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed } from 'vue';
+
+const emit = defineEmits(['update:modelValue', 'update:options']);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number],
+        default: null,
+    },
+    isOutlined: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+const styleAttrs = computed(() => {
+    return $props.isOutlined
+        ? {
+              dense: true,
+              outlined: true,
+              rounded: true,
+          }
+        : {};
+});
+</script>
+
+<template>
+    <QInput
+        ref="vnInputRef"
+        v-model="value"
+        v-bind="{ ...$attrs, ...styleAttrs }"
+        type="text"
+    >
+        <template v-if="$slots.prepend" #prepend>
+            <slot name="prepend" />
+        </template>
+        <template v-if="$slots.append" #append>
+            <slot name="append" />
+        </template>
+    </QInput>
+</template>

src/components/common/VnInputDate.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { toDate } from 'src/filters';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: null,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    },
+    isOutlined: {
+        type: Boolean,
+        default: false,
+    },
+});
+const emit = defineEmits(['update:modelValue']);
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value ? new Date(value).toISOString() : null);
+    },
+});
+
+const isPopupOpen = ref(false);
+
+const onDateUpdate = (date) => {
+    value.value = date;
+    isPopupOpen.value = false;
+};
+
+const padDate = (value) => value.toString().padStart(2, '0');
+const formatDate = (dateString) => {
+    const date = new Date(dateString || '');
+    return `${date.getFullYear()}/${padDate(date.getMonth() + 1)}/${padDate(
+        date.getDate()
+    )}`;
+};
+
+const styleAttrs = computed(() => {
+    return props.isOutlined
+        ? {
+              dense: true,
+              outlined: true,
+              rounded: true,
+          }
+        : {};
+});
+</script>
+
+<template>
+    <QInput
+        class="vn-input-date"
+        rounded
+        readonly
+        :model-value="toDate(value)"
+        v-bind="{ ...$attrs, ...styleAttrs }"
+    >
+        <template #append>
+            <QIcon name="event" class="cursor-pointer">
+                <QPopupProxy
+                    v-model="isPopupOpen"
+                    cover
+                    transition-show="scale"
+                    transition-hide="scale"
+                    :no-parent-event="props.readonly"
+                >
+                    <QDate
+                        :model-value="formatDate(value)"
+                        @update:model-value="onDateUpdate"
+                    />
+                </QPopupProxy>
+            </QIcon>
+        </template>
+    </QInput>
+</template>
+
+<style lang="scss">
+.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
+    border-bottom-style: solid;
+}
+
+.vn-input-date.q-field--outlined.q-field--readonly .q-field__control:before {
+    border-style: solid;
+}
+</style>

src/components/common/VnJsonValue.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { watch } from 'vue';
+import { toDateString } from 'src/filters';
+
+const props = defineProps({
+    value: { type: [String, Number, Boolean, Object], default: undefined },
+});
+
+const maxStrLen = 512;
+let t = '';
+let cssClass = '';
+let type;
+const updateValue = () => {
+    type = typeof props.value;
+
+    if (props.value == null) {
+        t = '∅';
+        cssClass = 'json-null';
+    } else {
+        cssClass = `json-${type}`;
+        switch (type) {
+            case 'number':
+                if (Number.isInteger(props.value)) {
+                    t = props.value.toString();
+                } else {
+                    t = (
+                        Math.round((props.value + Number.EPSILON) * 1000) / 1000
+                    ).toString();
+                }
+                break;
+            case 'boolean':
+                t = props.value ? '✓' : '✗';
+                cssClass = `json-${props.value ? 'true' : 'false'}`;
+                break;
+            case 'string':
+                t =
+                    props.value.length <= maxStrLen
+                        ? props.value
+                        : props.value.substring(0, maxStrLen) + '...';
+                break;
+            case 'object':
+                if (props.value instanceof Date) {
+                    t = toDateString(props.value);
+                } else {
+                    t = props.value.toString();
+                }
+                break;
+            default:
+                t = props.value.toString();
+        }
+    }
+};
+
+watch(() => props.value, updateValue);
+
+updateValue();
+</script>
+
+<template>
+    <span
+        :title="type === 'string' && props.value.length > maxStrLen ? props.value : ''"
+        :class="{ [cssClass]: t !== '' }"
+    >
+        {{ t }}
+    </span>
+</template>
+
+<style scoped>
+.json-string {
+    color: #d172cc;
+}
+.json-object {
+    color: #d1a572;
+}
+.json-number {
+    color: #85d0ff;
+}
+.json-true {
+    color: #7dc489;
+}
+.json-false {
+    color: #c74949;
+}
+.json-null {
+    color: #cd7c7c;
+    font-style: italic;
+}
+</style>

src/components/common/VnSelectFilter.vue

@@ -15,6 +15,10 @@ const $props = defineProps({
         type: String,
         default: '',
     },
+    filterOptions: {
+        type: Array,
+        default: () => [],
+    },
     isClearable: {
         type: Boolean,
         default: true,
@@ -32,18 +36,22 @@ function setOptions(data) {
 setOptions(options.value);
 
 const filter = (val, options) => {
-    const search = val.toLowerCase();
+    const search = val.toString().toLowerCase();
 
-    if (val === '') return options;
+    if (!search) return options;
 
     return options.filter((row) => {
+        if ($props.filterOptions.length) {
+            return $props.filterOptions.some((prop) => {
+                const propValue = String(row[prop]).toLowerCase();
+                return propValue.includes(search);
+            });
+        }
+
         const id = row.id;
-        const name = row[$props.optionLabel].toLowerCase();
+        const optionLabel = String(row[$props.optionLabel]).toLowerCase();
 
-        const idMatches = id == search;
-        const nameMatches = name.indexOf(search) > -1;
-
-        return idMatches || nameMatches;
+        return id == search || optionLabel.includes(search);
     });
 };
 
@@ -85,6 +93,7 @@ const value = computed({
         map-options
         use-input
         @filter="filterHandler"
+        hide-selected
         fill-input
         ref="vnSelectRef"
     >
@@ -97,7 +106,7 @@ const value = computed({
             />
         </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
-            <slot :name="slotName" v-bind="slotData" :key="slotName" />
+            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
         </template>
     </QSelect>
 </template>

src/components/common/VnSmsDialog.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useDialogPluginComponent } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { dialogRef, onDialogOK } = useDialogPluginComponent();
 const { t, availableLocales } = useI18n();
@@ -117,24 +119,10 @@ async function send() {
                 />
             </QCardSection>
             <QCardSection class="q-pb-xs">
-                <QInput
-                    :label="t('Phone')"
-                    v-model="phone"
-                    rounded
-                    outlined
-                    autofocus
-                    dense
-                />
+                <VnInput :label="t('Phone')" v-model="phone" is-outlined />
             </QCardSection>
             <QCardSection class="q-pb-xs">
-                <QInput
-                    :label="t('Subject')"
-                    v-model="subject"
-                    rounded
-                    outlined
-                    autofocus
-                    dense
-                />
+                <VnInput v-model="subject" :label="t('Subject')" is-outlined />
             </QCardSection>
             <QCardSection class="q-mb-md" q-input>
                 <QInput

src/components/ui/CardDescriptor.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { onMounted, useSlots, ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
 
@@ -29,12 +31,19 @@ const $props = defineProps({
         type: String,
         default: '',
     },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
-
+const quasar = useQuasar();
 const slots = useSlots();
 const { t } = useI18n();
-const entity = ref(null);
+const entity = computed(() => useArrayData($props.dataKey).store.data);
 
+defineExpose({
+    getData,
+});
 onMounted(async () => {
     await getData();
     watch(
@@ -58,28 +67,36 @@ async function getData() {
     emit('onFetch', data);
 }
 const emit = defineEmits(['onFetch']);
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: $props.summary,
+        componentProps: {
+            id,
+        },
+    });
+}
 </script>
 
 <template>
     <div class="descriptor">
         <template v-if="entity">
-            <div class="header bg-primary q-pa-sm">
-                <RouterLink :to="{ name: `${module}List` }">
-                    <QBtn
-                        class="link"
-                        color="white"
-                        dense
-                        flat
-                        icon="view_list"
-                        round
-                        size="md"
-                    >
-                        <QTooltip>
-                            {{ t('components.cardDescriptor.mainList') }}
-                        </QTooltip>
-                    </QBtn>
-                </RouterLink>
-
+            <div class="header bg-primary q-pa-sm justify-between">
+                <QBtn
+                    @click.stop="viewSummary(entity.id)"
+                    round
+                    flat
+                    dense
+                    size="md"
+                    icon="preview"
+                    color="white"
+                    class="link"
+                    v-if="summary"
+                >
+                    <QTooltip>
+                        {{ t('components.smartCard.openSummary') }}
+                    </QTooltip>
+                </QBtn>
                 <RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
                     <QBtn
                         class="link"
@@ -95,7 +112,6 @@ const emit = defineEmits(['onFetch']);
                         </QTooltip>
                     </QBtn>
                 </RouterLink>
-
                 <QBtn
                     color="white"
                     dense
@@ -218,8 +234,6 @@ const emit = defineEmits(['onFetch']);
     width: 256px;
     .header {
         display: flex;
-        justify-content: space-between;
-        align-items: stretch;
     }
     .icons {
         margin: 0 10px;

src/components/ui/CardList.vue

@@ -1,25 +1,20 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const $props = defineProps({
-    addElement: { type: Function, required: false },
     element: { type: Object, default: null },
     id: { type: Number, default: null },
     isSelected: { type: Boolean, default: false },
     title: { type: String, default: null },
     showCheckbox: { type: Boolean, default: false },
 });
-const checkSelect = ref(false);
 
-watch(
-    () => $props.isSelected,
-    (value, prevValue) => {
-        checkSelect.value = value;
-    }
-);
+const emit = defineEmits(['toggleCardCheck']);
 
-const selectedItem = (item) => {
-    $props.addElement(item);
+const toggleCardCheck = (item) => {
+    emit('toggleCardCheck', item);
 };
 </script>
 
@@ -32,14 +27,14 @@ const selectedItem = (item) => {
                         <div class="title text-primary text-weight-bold text-h5">
                             {{ $props.title }}
                         </div>
-                        <QChip outline color="grey" size="sm">
-                            ID: {{ $props.id }}
+                        <QChip class="q-chip-color" outline size="sm">
+                            {{ t('ID') }}: {{ $props.id }}
                         </QChip>
                     </div>
                     <QCheckbox
                         v-if="showCheckbox"
-                        v-model="checkSelect"
-                        @click="selectedItem($props.element)"
+                        :model-value="isSelected"
+                        @click="toggleCardCheck($props.element)"
                     />
                 </div>
             </slot>
@@ -61,6 +56,10 @@ const selectedItem = (item) => {
     margin-right: 25px;
 }
 
+.q-chip-color {
+    color: var(--vn-label);
+}
+
 .card-list-body {
     display: flex;
     justify-content: space-between;
@@ -120,3 +119,8 @@ const selectedItem = (item) => {
     width: 75%;
 }
 </style>
+
+<i18n>
+    es:
+        ID: ID
+</i18n>

src/components/ui/CardSummary.vue

@@ -83,12 +83,14 @@ watch(props, async () => {
     .summaryBody {
         display: flex;
         flex-direction: row;
+        flex-wrap: wrap;
         justify-content: space-evenly;
         gap: 15px;
         padding: 15px;
         background-color: var(--vn-gray);
 
         > .q-card.vn-one {
+            width: 350px;
             flex: 1;
         }
         > .q-card.vn-two {
@@ -125,7 +127,6 @@ watch(props, async () => {
                     width: max-content;
                     overflow: hidden;
                     white-space: nowrap;
-                    text-overflow: ellipsis;
                 }
             }
             .header {

src/components/ui/VnLinkPhone.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+const props = defineProps({
+    phoneNumber: { type: [String, Number], default: null },
+});
+const { t } = useI18n();
+</script>
+<template>
+    <QBtn
+        v-if="props.phoneNumber"
+        flat
+        round
+        icon="phone"
+        size="sm"
+        color="primary"
+        padding="none"
+        :href="`sip:${props.phoneNumber}`"
+        :title="t('globals.microsip')"
+        @click.stop
+    />
+</template>
+<style scoped></style>

src/components/ui/VnLv.vue

@@ -4,9 +4,10 @@ import { dashIfEmpty } from 'src/filters';
 
 const $props = defineProps({
     label: { type: String, default: null },
-    value: { type: [Number, String, Boolean], default: null },
-    titleLabel: { type: String, default: null },
-    titleValue: { type: [Number, String, Boolean], default: null },
+    value: {
+        type: [String, Boolean],
+        default: null,
+    },
     info: { type: String, default: null },
     dash: { type: Boolean, default: true },
 });
@@ -16,7 +17,7 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
     <div class="vn-label-value">
         <div v-if="$props.label || $slots.label" class="label">
             <slot name="label">
-                <span :title="$props.titleLabel ?? $props.label">{{ $props.label }}</span>
+                <span>{{ $props.label }}</span>
             </slot>
         </div>
         <div class="value">

src/components/ui/VnSearchbar.vue

@@ -1,8 +1,12 @@
 <script setup>
 import { onMounted, ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import { useArrayData } from 'composables/useArrayData';
 import { useQuasar } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useArrayData } from 'composables/useArrayData';
+
 const quasar = useQuasar();
 
 const props = defineProps({
@@ -76,9 +80,9 @@ async function search() {
     const module = route.matched[1];
     if (rows.length === 1) {
         const [firstRow] = rows;
-        await router.push({ path: `/${module.name}/${firstRow.id}` });
+        await router.push({ path: `${module.path}/${firstRow.id}` });
     } else if (route.matched.length > 3) {
-        await router.push({ path: `/${module.name}` });
+        await router.push({ path: `/${module.path}` });
         arrayData.updateStateParams();
     }
 }
@@ -86,7 +90,7 @@ async function search() {
 
 <template>
     <QForm @submit="search">
-        <QInput
+        <VnInput
             id="searchbar"
             v-model="searchText"
             :placeholder="props.label"
@@ -113,7 +117,7 @@ async function search() {
                     <QTooltip>{{ props.info }}</QTooltip>
                 </QIcon>
             </template>
-        </QInput>
+        </VnInput>
     </QForm>
 </template>
 

src/composables/downloadFile.js

@@ -0,0 +1,11 @@
+import { useSession } from 'src/composables/useSession';
+import { getUrl } from './getUrl';
+
+const session = useSession();
+const token = session.getToken();
+
+export async function downloadFile(dmsId) {
+    let appUrl = await getUrl('', 'lilium');
+    appUrl = appUrl.replace('/#/', '');
+    window.open(`${appUrl}/api/dms/${dmsId}/downloadFile?access_token=${token}`);
+}

src/composables/getUrl.js

@@ -1,11 +1,10 @@
 import axios from 'axios';
 
-export async function getUrl(route, appName = 'salix') {
-    const filter = {
-        where: { and: [{ appName: appName }, { environment: process.env.NODE_ENV }] },
-    };
+export async function getUrl(route, app = 'salix') {
+    let url;
 
-    const { data } = await axios.get('Urls/findOne', { params: { filter } });
-    const url = data.url;
-    return route ? url + route : url;
+    await axios.get('Urls/getUrl', { params: { app } }).then((res) => {
+        url = res.data + route;
+    });
+    return url;
 }

src/composables/useColor.js

@@ -0,0 +1,35 @@
+export function djb2a(string) {
+    let hash = 5381;
+    for (let i = 0; i < string.length; i++)
+        hash = ((hash << 5) + hash) ^ string.charCodeAt(i);
+    return hash >>> 0;
+}
+
+export function useColor(value) {
+    return '#' + colors[djb2a(value || '') % colors.length];
+}
+
+const colors = [
+    'b5b941', // Yellow
+    'ae9681', // Peach
+    'd78767', // Salmon
+    'cc7000', // Orange bright
+    'e2553d', // Coral
+    '8B0000', // Red dark
+    'de4362', // Red crimson
+    'FF1493', // Ping intense
+    'be39a2', // Pink light
+    'b754cf', // Purple middle
+    'a87ba8', // Pink
+    '8a69cd', // Blue lavender
+    'ab20ab', // Purple dark
+    '00b5b8', // Turquoise
+    '1fa8a1', // Green ocean
+    '5681cf', // Blue steel
+    '3399fe', // Blue sky
+    '6d9c3e', // Green chartreuse
+    '51bb51', // Green lime
+    '518b8b', // Gray board
+    '7e7e7e', // Gray
+    '5d5d5d', // Gray dark
+];

src/composables/useValidator.js

@@ -1,19 +1,12 @@
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import axios from 'axios';
 import validator from 'validator';
-
-const models = ref(null);
+import { useValidationsStore } from 'src/stores/useValidationsStore';
 
 export function useValidator() {
-    if (!models.value) fetch();
-
-    function fetch() {
-        axios.get('Schemas/ModelInfo').then((response) => (models.value = response.data));
-    }
+    const models = useValidationsStore().validations;
 
     function validate(propertyRule) {
-        const modelInfo = models.value;
+        const modelInfo = models;
         if (!modelInfo || !propertyRule) return;
 
         const rule = propertyRule.split('.');
@@ -75,5 +68,6 @@ export function useValidator() {
 
     return {
         validate,
+        models,
     };
 }

src/css/app.scss

@@ -33,6 +33,7 @@ body.body--light {
     --vn-gray: #f5f5f5;
     --vn-label: #5f5f5f;
     --vn-dark: white;
+    --vn-light-gray: #e7e3e3;
 }
 
 body.body--dark {
@@ -40,6 +41,7 @@ body.body--dark {
     --vn-gray: #313131;
     --vn-label: #a8a8a8;
     --vn-dark: #292929;
+    --vn-light-gray: #424242;
 }
 
 .bg-vn-dark {

src/filters/index.js

@@ -2,6 +2,7 @@ import toLowerCase from './toLowerCase';
 import toDate from './toDate';
 import toDateString from './toDateString';
 import toDateHour from './toDateHour';
+import toRelativeDate from './toRelativeDate';
 import toCurrency from './toCurrency';
 import toPercentage from './toPercentage';
 import toLowerCamel from './toLowerCamel';
@@ -13,6 +14,7 @@ export {
     toDate,
     toDateString,
     toDateHour,
+    toRelativeDate,
     toCurrency,
     toPercentage,
     dashIfEmpty,

src/filters/toRelativeDate.js

@@ -0,0 +1,32 @@
+import { useI18n } from 'vue-i18n';
+
+export default function formatDate(dateVal) {
+    const { t } = useI18n();
+    const today = new Date();
+    if (dateVal == null) return '';
+
+    const date = new Date(dateVal);
+    const dateZeroTime = new Date(dateVal);
+    dateZeroTime.setHours(0, 0, 0, 0);
+    const diff = Math.trunc(
+        (today.getTime() - dateZeroTime.getTime()) / (1000 * 3600 * 24)
+    );
+    let format;
+    if (diff === 0) format = t('globals.today');
+    else if (diff === 1) format = t('globals.yesterday');
+    else if (diff > 1 && diff < 7) {
+        const options = { weekday: 'short' };
+        format = date.toLocaleDateString(t('globals.dateFormat'), options);
+    } else if (today.getFullYear() === date.getFullYear()) {
+        const options = { day: 'numeric', month: 'short' };
+        format = date.toLocaleDateString(t('globals.dateFormat'), options);
+    } else {
+        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
+        format = date.toLocaleDateString(t('globals.dateFormat'), options);
+    }
+
+    // Formatear la hora en HH:mm
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    return `${format} ${hours}:${minutes}`;
+}

src/i18n/en/index.js

@@ -5,6 +5,9 @@ export default {
             en: 'English',
         },
         language: 'Language',
+        entity: 'Entity',
+        user: 'User',
+        details: 'Details',
         collapseMenu: 'Collapse left menu',
         backToDashboard: 'Return to dashboard',
         notifications: 'Notifications',
@@ -13,8 +16,11 @@ export default {
         pinnedModules: 'Pinned modules',
         darkMode: 'Dark mode',
         logOut: 'Log out',
+        date: 'Date',
         dataSaved: 'Data saved',
         dataDeleted: 'Data deleted',
+        search: 'Search',
+        changes: 'Changes',
         dataCreated: 'Data created',
         add: 'Add',
         create: 'Create',
@@ -37,6 +43,10 @@ export default {
         summary: {
             basicData: 'Basic data',
         },
+        today: 'Today',
+        yesterday: 'Yesterday',
+        dateFormat: 'en-GB',
+        microsip: 'Open in MicroSIP',
         noSelectedRows: `You don't have any line selected`,
         downloadCSVSuccess: 'CSV downloaded successfully',
         // labels compartidos entre vistas
@@ -362,7 +372,7 @@ export default {
     },
     invoiceOut: {
         pageTitles: {
-            invoiceOuts: 'Invoices Out',
+            invoiceOuts: 'Invoice out',
             list: 'List',
             negativeBases: 'Negative Bases',
             globalInvoicing: 'Global invoicing',
@@ -421,6 +431,10 @@ export default {
                 addressId: 'Address id',
                 streetAddress: 'Street',
             },
+            statusCard: {
+                percentageText: '{getPercentage}% {getAddressNumber} of {getNAddresses}',
+                pdfsNumberText: '{nPdfs} of {totalPdfs} PDFs',
+            },
         },
         negativeBases: {
             from: 'From',
@@ -453,6 +467,7 @@ export default {
         list: {
             parking: 'Parking',
             priority: 'Priority',
+            newShelving: 'New Shelving',
         },
         summary: {
             code: 'Code',
@@ -468,6 +483,71 @@ export default {
             recyclable: 'Recyclable',
         },
     },
+    invoiceIn: {
+        pageTitles: {
+            invoiceIns: 'Invoices In',
+            list: 'List',
+            createInvoiceIn: 'Create invoice in',
+            summary: 'Summary',
+            basicData: 'Basic data',
+            vat: 'VAT',
+            dueDay: 'Due day',
+            intrastat: 'Intrastat',
+            log: 'Logs',
+        },
+        list: {
+            ref: 'Reference',
+            supplier: 'Supplier',
+            supplierRef: 'Supplier ref.',
+            serialNumber: 'Serial number',
+            serial: 'Serial',
+            file: 'File',
+            issued: 'Issued',
+            isBooked: 'Is booked',
+            awb: 'AWB',
+            amount: 'Amount',
+        },
+        card: {
+            issued: 'Issued',
+            amount: 'Amount',
+            client: 'Client',
+            company: 'Company',
+            customerCard: 'Customer card',
+            ticketList: 'Ticket List',
+            vat: 'Vat',
+            dueDay: 'Due day',
+            intrastat: 'Intrastat',
+        },
+        summary: {
+            supplier: 'Supplier',
+            supplierRef: 'Supplier ref.',
+            currency: 'Currency',
+            docNumber: 'Doc number',
+            issued: 'Expedition date',
+            operated: 'Operation date',
+            bookEntried: 'Entry date',
+            bookedDate: 'Booked date',
+            sage: 'Sage withholding',
+            vat: 'Undeductible VAT',
+            company: 'Company',
+            booked: 'Booked',
+            expense: 'Expense',
+            taxableBase: 'Taxable base',
+            rate: 'Rate',
+            sageVat: 'Sage vat',
+            sageTransaction: 'Sage transaction',
+            dueDay: 'Date',
+            bank: 'Bank',
+            amount: 'Amount',
+            foreignValue: 'Foreign value',
+            dueTotal: 'Due day',
+            noMatch: 'Do not match',
+            code: 'Code',
+            net: 'Net',
+            stems: 'Stems',
+            country: 'Country',
+        },
+    },
     worker: {
         pageTitles: {
             workers: 'Workers',
@@ -526,6 +606,7 @@ export default {
             typesList: 'Types List',
             typeCreate: 'Create type',
             typeEdit: 'Edit type',
+            wagonCounter: 'Trolley counter',
         },
         type: {
             name: 'Name',
@@ -664,6 +745,7 @@ export default {
             logOut: 'Log Out',
         },
         smartCard: {
+            downloadFile: 'Download file',
             clone: 'Clone',
             openCard: 'View',
             openSummary: 'Summary',

src/i18n/es/index.js

@@ -5,6 +5,9 @@ export default {
             en: 'Inglés',
         },
         language: 'Idioma',
+        entity: 'Entidad',
+        user: 'Usuario',
+        details: 'Detalles',
         collapseMenu: 'Contraer menú lateral',
         backToDashboard: 'Volver al tablón',
         notifications: 'Notificaciones',
@@ -13,8 +16,11 @@ export default {
         pinnedModules: 'Módulos fijados',
         darkMode: 'Modo oscuro',
         logOut: 'Cerrar sesión',
+        date: 'Fecha',
         dataSaved: 'Datos guardados',
         dataDeleted: 'Datos eliminados',
+        search: 'Buscar',
+        changes: 'Cambios',
         dataCreated: 'Datos creados',
         add: 'Añadir',
         create: 'Crear',
@@ -37,9 +43,13 @@ export default {
         summary: {
             basicData: 'Datos básicos',
         },
+        today: 'Hoy',
+        yesterday: 'Ayer',
+        dateFormat: 'es-ES',
         noSelectedRows: `No tienes ninguna línea seleccionada`,
-        downloadCSVSuccess: 'Descarga de CSV exitosa',
+        microsip: 'Abrir en MicroSIP',
         // labels compartidos entre vistas
+        downloadCSVSuccess: 'Descarga de CSV exitosa',
         reference: 'Referencia',
         agency: 'Agencia',
         wareHouseOut: 'Alm. salida',
@@ -423,6 +433,10 @@ export default {
                 addressId: 'Id dirección',
                 streetAddress: 'Dirección fiscal',
             },
+            statusCard: {
+                percentageText: '{getPercentage}% {getAddressNumber} de {getNAddresses}',
+                pdfsNumberText: '{nPdfs} de {totalPdfs} PDFs',
+            },
         },
         negativeBases: {
             from: 'Desde',
@@ -455,6 +469,7 @@ export default {
         list: {
             parking: 'Parking',
             priority: 'Prioridad',
+            newShelving: 'Nuevo Carro',
         },
         summary: {
             code: 'Código',
@@ -470,6 +485,69 @@ export default {
             recyclable: 'Reciclable',
         },
     },
+    invoiceIn: {
+        pageTitles: {
+            invoiceIns: 'Fact. recibidas',
+            list: 'Listado',
+            createInvoiceIn: 'Crear fact. recibida',
+            summary: 'Resumen',
+            basicData: 'Datos básicos',
+            vat: 'IVA',
+            dueDay: 'Vencimiento',
+            intrastat: 'Intrastat',
+            log: 'Registros de auditoría',
+        },
+        list: {
+            ref: 'Referencia',
+            supplier: 'Proveedor',
+            supplierRef: 'Ref. proveedor',
+            serialNumber: 'Num. serie',
+            shortIssued: 'F. emisión',
+            serial: 'Serie',
+            file: 'Fichero',
+            issued: 'Fecha emisión',
+            isBooked: 'Conciliada',
+            awb: 'AWB',
+            amount: 'Importe',
+        },
+        card: {
+            issued: 'Fecha emisión',
+            amount: 'Importe',
+            client: 'Cliente',
+            company: 'Empresa',
+            customerCard: 'Ficha del cliente',
+            ticketList: 'Listado de tickets',
+            vat: 'Iva',
+            dueDay: 'Fecha de vencimiento',
+        },
+        summary: {
+            supplier: 'Proveedor',
+            supplierRef: 'Ref. proveedor',
+            currency: 'Divisa',
+            docNumber: 'Número documento',
+            issued: 'Fecha de expedición',
+            operated: 'Fecha operación',
+            bookEntried: 'Fecha asiento',
+            bookedDate: 'Fecha contable',
+            sage: 'Retención sage',
+            vat: 'Iva no deducible',
+            company: 'Empresa',
+            booked: 'Contabilizada',
+            expense: 'Gasto',
+            taxableBase: 'Base imp.',
+            rate: 'Tasa',
+            sageTransaction: 'Sage transación',
+            dueDay: 'Fecha',
+            bank: 'Caja',
+            amount: 'Importe',
+            foreignValue: 'Divisa',
+            dueTotal: 'Vencimiento',
+            code: 'Código',
+            net: 'Neto',
+            stems: 'Tallos',
+            country: 'País',
+        },
+    },
     worker: {
         pageTitles: {
             workers: 'Trabajadores',
@@ -528,6 +606,7 @@ export default {
             typesList: 'Listado tipos',
             typeCreate: 'Crear tipo',
             typeEdit: 'Editar tipo',
+            wagonCounter: 'Contador de carros',
         },
         type: {
             name: 'Nombre',
@@ -604,7 +683,7 @@ export default {
             notes: 'Notas',
             verified: 'Verificado',
             isActive: 'Está activo',
-            billingData: 'Billing data',
+            billingData: 'Forma de pago',
             payMethod: 'Método de pago',
             payDeadline: 'Plazo de pago',
             payDay: 'Día de pago',
@@ -666,6 +745,7 @@ export default {
             logOut: 'Cerrar sesión',
         },
         smartCard: {
+            downloadFile: 'Descargar archivo',
             clone: 'Clonar',
             openCard: 'Ficha',
             openSummary: 'Detalles',

src/pages/Claim/Card/ClaimBasicData.vue

@@ -3,10 +3,13 @@ import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import { useSession } from 'src/composables/useSession';
 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 { useSession } from 'src/composables/useSession';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -101,40 +104,17 @@ const statesFilter = {
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.client.name"
                         :label="t('claim.basicData.customer')"
                         disable
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInputDate
                         v-model="data.created"
-                        mask="####-##-##"
-                        fill-mask="_"
-                        autofocus
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="data.created" mask="YYYY-MM-DD">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
+                        :label="t('claim.basicData.created')"
+                    />
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
@@ -190,7 +170,7 @@ const statesFilter = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.rma"
                         :label="t('claim.basicData.returnOfMaterial')"
                         :rules="validate('claim.rma')"

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -7,6 +7,7 @@ import { useState } from 'src/composables/useState';
 
 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
@@ -119,7 +120,7 @@ const setData = (entity) => {
                 <template #value>
                     <span class="link">
                         {{ entity.worker.user.name }}
-                        <WorkerDescriptorProxy :id="entity.worker.userFk" />
+                        <WorkerDescriptorProxy :id="entity.worker.user.id" />
                     </span>
                 </template>
             </VnLv>

src/pages/Claim/Card/ClaimDescriptorMenu.vue

@@ -37,7 +37,7 @@ function confirmPickupOrder() {
             data: {
                 address: customer.email,
             },
-            send: sendPickupOrder,
+            promise: sendPickupOrder,
         },
     });
 }

src/pages/Claim/Card/ClaimLines.vue

@@ -46,7 +46,7 @@ async function onFetchClaim(data) {
 const amount = ref(0);
 const amountClaimed = ref(0);
 async function onFetch(rows) {
-    if (!rows || rows.length) return;
+    if (!rows || !rows.length) return;
     amount.value = rows.reduce(
         (acumulator, { sale }) => acumulator + sale.price * sale.quantity,
         0
@@ -155,7 +155,7 @@ function showImportDialog() {
 </script>
 <template>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-        <QToolbar class="bg-dark text-white">
+        <QToolbar>
             <div class="row q-gutter-md">
                 <div>
                     {{ t('Amount') }}

src/pages/Claim/Card/ClaimPhoto.vue

@@ -26,6 +26,7 @@ const client = ref({});
 const inputFile = ref();
 const files = ref({});
 
+const spinnerRef = ref();
 const claimDmsRef = ref();
 const dmsType = ref({});
 const config = ref({});
@@ -118,11 +119,11 @@ async function create() {
             clientId: client.value.id,
         }).toUpperCase(),
     };
-
+    spinnerRef.value.show();
     await axios.post(query, formData, {
         params: dms,
     });
-
+    spinnerRef.value.hide();
     quasar.notify({
         message: t('globals.dataSaved'),
         type: 'positive',
@@ -234,7 +235,9 @@ function onDrag() {
             </div>
         </div>
     </div>
-
+    <QDialog ref="spinnerRef">
+        <QSpinner color="primary" size="xl" />
+    </QDialog>
     <QPageSticky position="bottom-right" :offset="[25, 25]">
         <label for="fileInput">
             <QBtn fab @click="inputFile.nativeEl.click()" icon="add" color="primary">

src/pages/Claim/ClaimFilter.vue

@@ -1,9 +1,12 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -33,30 +36,31 @@ const states = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
-                <QItem>
+            <QList dense class="list">
+                <QItem class="q-my-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Customer ID')"
                             v-model="params.clientFk"
                             lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                                <QIcon name="badge" size="xs"></QIcon> </template
+                        ></VnInput>
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Client Name')"
                             v-model="params.clientName"
                             lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -71,11 +75,15 @@ const states = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -90,11 +98,15 @@ const states = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -109,11 +121,15 @@ const states = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-md">
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!states">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -127,6 +143,10 @@ const states = ref();
                             option-label="description"
                             emit-value
                             map-options
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                         />
                     </QItemSection>
                 </QItem>
@@ -150,33 +170,11 @@ const states = ref();
                     </QItem> -->
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInputDate
                                 v-model="params.created"
                                 :label="t('Created')"
-                                autofocus
-                                readonly
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.created">
-                                                <div class="row items-center justify-end">
-                                                    <QBtn
-                                                        v-close-popup
-                                                        label="Close"
-                                                        color="primary"
-                                                        flat
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                                is-outlined
+                            />
                         </QItemSection>
                     </QItem>
                 </QExpansionItem>
@@ -185,6 +183,15 @@ const states = ref();
     </VnFilterPanel>
 </template>
 
+<style scoped>
+.list {
+    width: 256px;
+}
+.list * {
+    max-width: 100%;
+}
+</style>
+
 <i18n>
 en:
     params:

src/pages/Claim/ClaimList.vue

@@ -5,12 +5,13 @@ import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
-import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import ClaimFilter from './ClaimFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
+import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -37,6 +38,15 @@ function viewSummary(id) {
         },
     });
 }
+
+function viewDescriptor(id) {
+    quasar.dialog({
+        component: CustomerDescriptorProxy,
+        componentProps: {
+            id,
+        },
+    });
+}
 </script>
 
 <template>
@@ -86,14 +96,22 @@ function viewSummary(id) {
                         v-for="row of rows"
                     >
                         <template #list-items>
-                            <VnLv
-                                :label="t('claim.list.customer')"
-                                :value="row.clientName"
-                            />
-                            <VnLv
-                                :label="t('claim.list.assignedTo')"
-                                :value="row.workerName"
-                            />
+                            <VnLv :label="t('claim.list.customer')" @click.stop>
+                                <template #value>
+                                    <span class="link">
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('claim.list.assignedTo')" @click.stop>
+                                <template #value>
+                                    <span class="link">
+                                        {{ row.workerName }}
+                                        <WorkerDescriptorProxy :id="row.workerFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
                             <VnLv
                                 :label="t('claim.list.created')"
                                 :value="toDate(row.created)"
@@ -110,13 +128,13 @@ function viewSummary(id) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
                                 :label="t('components.smartCard.viewDescription')"
                                 @click.stop
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                                 style="margin-top: 15px"
                             >

src/pages/Claim/ClaimRmaList.vue

@@ -2,10 +2,13 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import axios from 'axios';
+
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import { useArrayData } from 'src/composables/useArrayData';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+import axios from 'axios';
 
 const quasar = useQuasar();
 const { t } = useI18n();
@@ -65,7 +68,7 @@ async function remove({ id }) {
         <QPageSticky expand position="top" :offset="[16, 16]">
             <QCard class="card q-pa-md">
                 <QForm @submit="submit">
-                    <QInput
+                    <VnInput
                         ref="input"
                         v-model="newRma.code"
                         :label="t('claim.rmaList.code')"

src/pages/Customer/Card/CustomerBasicData.vue

@@ -7,6 +7,7 @@ import { useSession } from 'src/composables/useSession';
 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';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -64,7 +65,7 @@ const filterOptions = {
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.socialName"
                         :label="t('customer.basicData.socialName')"
                         :rules="validate('client.socialName')"
@@ -87,7 +88,7 @@ const filterOptions = {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.contact"
                         :label="t('customer.basicData.contact')"
                         :rules="validate('client.contact')"
@@ -95,7 +96,7 @@ const filterOptions = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.email"
                         type="email"
                         :label="t('customer.basicData.email')"
@@ -106,7 +107,7 @@ const filterOptions = {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.phone"
                         :label="t('customer.basicData.phone')"
                         :rules="validate('client.phone')"
@@ -114,7 +115,7 @@ const filterOptions = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.mobile"
                         :label="t('customer.basicData.mobile')"
                         :rules="validate('client.mobile')"

src/pages/Customer/Card/CustomerDescriptor.vue

@@ -14,6 +14,10 @@ const $props = defineProps({
         required: false,
         default: null,
     },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
 
 const route = useRoute();
@@ -34,6 +38,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
         :title="data.title"
         :subtitle="data.subtitle"
         @on-fetch="setData"
+        :summary="$props.summary"
         data-key="customerData"
     >
         <template #body="{ entity }">

src/pages/Customer/Card/CustomerDescriptorProxy.vue

@@ -1,5 +1,6 @@
 <script setup>
 import CustomerDescriptor from './CustomerDescriptor.vue';
+import CustomerSummaryDialog from './CustomerSummaryDialog.vue';
 
 const $props = defineProps({
     id: {
@@ -8,8 +9,13 @@ const $props = defineProps({
     },
 });
 </script>
+
 <template>
     <QPopupProxy>
-        <CustomerDescriptor v-if="$props.id" :id="$props.id" />
+        <CustomerDescriptor
+            v-if="$props.id"
+            :id="$props.id"
+            :summary="CustomerSummaryDialog"
+        />
     </QPopupProxy>
 </template>

src/pages/Customer/Card/CustomerSummary.vue

@@ -6,6 +6,7 @@ import { toCurrency, toPercentage, toDate } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
 import { getUrl } from 'src/composables/getUrl';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -68,8 +69,18 @@ const creditWarning = computed(() => {
                 <VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
                 <VnLv :label="t('customer.summary.name')" :value="entity.name" />
                 <VnLv :label="t('customer.summary.contact')" :value="entity.contact" />
-                <VnLv :label="t('customer.summary.phone')" :value="entity.phone" />
-                <VnLv :label="t('customer.summary.mobile')" :value="entity.mobile" />
+                <VnLv :value="entity.phone">
+                    <template #label>
+                        {{ t('customer.summary.phone') }}
+                        <VnLinkPhone :phone-number="entity.phone" />
+                    </template>
+                </VnLv>
+                <VnLv :value="entity.mobile">
+                    <template #label>
+                        {{ t('customer.summary.mobile') }}
+                        <VnLinkPhone :phone-number="entity.mobile" />
+                    </template>
+                </VnLv>
                 <VnLv :label="t('customer.summary.email')" :value="entity.email" />
                 <VnLv
                     :label="t('customer.summary.salesPerson')"

src/pages/Customer/CustomerFilter.vue

@@ -1,9 +1,11 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -35,31 +37,31 @@ const zones = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
-                <QItem>
+            <QList dense class="list">
+                <QItem class="q-my-sm">
                     <QItemSection>
-                        <QInput :label="t('FI')" v-model="params.fi" lazy-rules>
+                        <VnInput :label="t('FI')" v-model="params.fi" is-outlined>
                             <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
+                                <QIcon name="badge" size="xs" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput :label="t('Name')" v-model="params.name" lazy-rules />
+                        <VnInput :label="t('Name')" v-model="params.name" is-outlined />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Social Name')"
                             v-model="params.socialName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -74,11 +76,15 @@ const zones = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!provinces">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -92,33 +98,45 @@ const zones = ref();
                             option-label="name"
                             emit-value
                             map-options
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-md">
                     <QItemSection>
-                        <QInput :label="t('City')" v-model="params.city" lazy-rules />
+                        <VnInput :label="t('City')" v-model="params.city" is-outlined />
                     </QItemSection>
                 </QItem>
                 <QSeparator />
                 <QExpansionItem :label="t('More options')" expand-separator>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('Phone')" v-model="params.phone" lazy-rules>
+                            <VnInput
+                                :label="t('Phone')"
+                                v-model="params.phone"
+                                is-outlined
+                            >
                                 <template #prepend>
-                                    <QIcon name="phone" size="sm"></QIcon>
+                                    <QIcon name="phone" size="xs" />
                                 </template>
-                            </QInput>
+                            </VnInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('Email')" v-model="params.email" lazy-rules>
+                            <VnInput
+                                :label="t('Email')"
+                                v-model="params.email"
+                                is-outlined
+                            >
                                 <template #prepend>
-                                    <QIcon name="email" size="sm"></QIcon>
+                                    <QIcon name="email" size="sm" />
                                 </template>
-                            </QInput>
+                            </VnInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
@@ -135,15 +153,19 @@ const zones = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                hide-selected
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInput
                                 :label="t('Postcode')"
                                 v-model="params.postcode"
-                                lazy-rules
+                                is-outlined
                             />
                         </QItemSection>
                     </QItem>
@@ -153,6 +175,15 @@ const zones = ref();
     </VnFilterPanel>
 </template>
 
+<style scoped>
+.list {
+    width: 256px;
+}
+.list * {
+    max-width: 100%;
+}
+</style>
+
 <i18n>
 en:
     params:

src/pages/Customer/CustomerList.vue

@@ -9,6 +9,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import CustomerFilter from './CustomerFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -72,18 +73,23 @@ function viewSummary(id) {
                         v-for="row of rows"
                         :key="row.id"
                         :title="row.name"
+                        :id="row.id"
                         @click="navigate(row.id)"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv :label="t('customer.list.email')" :value="row.email" />
-                            <VnLv :label="t('customer.list.phone')" :value="row.phone" />
+                            <VnLv :value="row.phone">
+                                <template #label>
+                                    {{ t('customer.list.phone') }}
+                                    <VnLinkPhone :phone-number="row.phone" />
+                                </template>
+                            </VnLv>
                         </template>
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn

src/pages/Customer/CustomerPaymentsFilter.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
+
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -24,39 +27,39 @@ function isValidNumber(value) {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Order ID')"
                             v-model="params.orderFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
-                                <QIcon name="vn:basket" size="sm"></QIcon>
+                                <QIcon name="vn:basket" size="xs" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Customer ID')"
                             v-model="params.clientFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
-                                <QIcon name="vn:client" size="sm"></QIcon>
+                                <QIcon name="vn:client" size="xs" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Amount')"
                             v-model="params.amount"
-                            lazy-rules
+                            is-outlined
                             @update:model-value="
                                 (value) => {
                                     if (value.includes(','))
@@ -67,87 +70,25 @@ function isValidNumber(value) {
                                 (val) =>
                                     isValidNumber(val) || !val || 'Please type a number',
                             ]"
+                            lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="euro" size="sm" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
+
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInputDate
                             v-model="params.from"
                             :label="t('From')"
-                            mask="date"
-                            placeholder="yyyy/mm/dd"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.from" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                            is-outlined
+                        />
                     </QItemSection>
                     <QItemSection>
-                        <QInput
-                            v-model="params.to"
-                            :label="t('To')"
-                            mask="date"
-                            placeholder="yyyy/mm/dd"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.to" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
                     </QItemSection>
                 </QItem>
             </QList>

src/pages/InvoiceIn/Card/InvoiceInBasicData.vue

@@ -0,0 +1,710 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import { useArrayData } from 'src/composables/useArrayData';
+
+import { downloadFile } from 'src/composables/downloadFile';
+import FetchData from 'src/components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import axios from 'axios';
+
+const quasar = useQuasar();
+const route = useRoute();
+const { t } = useI18n();
+
+const dms = ref({});
+const editDownloadDisabled = ref(false);
+const arrayData = useArrayData('InvoiceIn');
+const invoiceIn = computed(() => arrayData.store.data);
+const userConfig = ref(null);
+
+const suppliers = ref([]);
+const suppliersRef = ref();
+const currencies = ref([]);
+const currenciesRef = ref();
+const companies = ref([]);
+const companiesRef = ref();
+const dmsTypes = ref([]);
+const dmsTypesRef = ref();
+const warehouses = ref([]);
+const warehousesRef = ref();
+const allowTypesRef = ref();
+const allowedContentTypes = ref([]);
+const inputFileRef = ref();
+const editDmsRef = ref();
+const createDmsRef = ref();
+
+const requiredFieldRule = (val) => val || t('Required field');
+const dateMask = '####-##-##';
+const fillMask = '_';
+
+async function checkFileExists(dmsId) {
+    if (!dmsId) return;
+    try {
+        await axios.get(`Dms/${dmsId}`, { fields: ['id'] });
+        editDownloadDisabled.value = false;
+    } catch (e) {
+        editDownloadDisabled.value = true;
+    }
+}
+
+async function setEditDms(dmsId) {
+    const { data } = await axios.get(`Dms/${dmsId}`);
+    dms.value = {
+        warehouseId: data.warehouseFk,
+        companyId: data.companyFk,
+        dmsTypeId: data.dmsTypeFk,
+        ...data,
+    };
+
+    if (!allowedContentTypes.value.length) await allowTypesRef.value.fetch();
+
+    editDmsRef.value.show();
+}
+
+async function setCreateDms() {
+    const { data } = await axios.get('DmsTypes/findOne', {
+        where: { code: 'invoiceIn' },
+    });
+    dms.value = {
+        reference: invoiceIn.value.supplierRef,
+        warehouseId: userConfig.value.warehouseFk,
+        companyId: userConfig.value.companyFk,
+        dmsTypeId: data.id,
+        description: invoiceIn.value.supplier.name,
+        hasFile: true,
+        hasFileAttached: true,
+        files: null,
+    };
+
+    createDmsRef.value.show();
+}
+
+async function upsert() {
+    try {
+        const isEdit = !!dms.value.id;
+        const errors = {
+            companyId: `The company can't be empty`,
+            warehouseId: `The warehouse can't be empty`,
+            dmsTypeId: `The DMS Type can't be empty`,
+            description: `The description can't be empty`,
+        };
+
+        Object.keys(errors).forEach((key) => {
+            if (!dms.value[key]) throw Error(t(errors[key]));
+        });
+
+        if (!isEdit && !dms.value.files) throw Error(t(`The files can't be empty`));
+
+        const formData = new FormData();
+
+        if (dms.value.files) {
+            for (let i = 0; i < dms.value.files.length; i++)
+                formData.append(dms.value.files[i].name, dms.value.files[i]);
+            dms.value.hasFileAttached = true;
+        }
+        const url = isEdit ? `dms/${dms.value.id}/updateFile` : 'Dms/uploadFile';
+        const { data } = await axios.post(url, formData, {
+            params: dms.value,
+        });
+
+        if (data.length) invoiceIn.value.dmsFk = data[0].id;
+
+        if (!isEdit) {
+            createDmsRef.value.hide();
+        } else {
+            editDmsRef.value.hide();
+        }
+
+        quasar.notify({
+            message: t('globals.dataSaved'),
+            type: 'positive',
+        });
+    } catch (error) {
+        quasar.notify({
+            message: t(`${error.message}`),
+            type: 'negative',
+        });
+    }
+}
+</script>
+<template>
+    <FetchData
+        ref="suppliersRef"
+        url="Suppliers"
+        :filter="{ fields: ['id', 'nickname'] }"
+        limit="30"
+        @on-fetch="(data) => (suppliers = data)"
+    />
+    <FetchData
+        ref="currenciesRef"
+        url="Currencies"
+        :filter="{ fields: ['id', 'code'] }"
+        order="code"
+        @on-fetch="(data) => (currencies = data)"
+    />
+    <FetchData
+        ref="companiesRef"
+        url="Companies"
+        :filter="{ fields: ['id', 'code'] }"
+        order="code"
+        @on-fetch="(data) => (companies = data)"
+    />
+    <FetchData
+        ref="dmsTypesRef"
+        url="DmsTypes"
+        :filter="{ fields: ['id', 'name'] }"
+        order="name"
+        @on-fetch="(data) => (dmsTypes = data)"
+    />
+    <FetchData
+        ref="warehousesRef"
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'] }"
+        order="name"
+        @on-fetch="(data) => (warehouses = data)"
+    />
+    <FetchData
+        ref="allowTypesRef"
+        url="DmsContainers/allowedContentTypes"
+        @on-fetch="(data) => (allowedContentTypes = data)"
+    />
+    <FetchData
+        url="UserConfigs/getUserConfig"
+        @on-fetch="(data) => (userConfig = data)"
+        auto-load
+    />
+    <FormModel v-if="invoiceIn" :url="`InvoiceIns/${route.params.id}`" model="invoiceIn">
+        <template #form="{ data }">
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        v-if="suppliersRef"
+                        :label="t('supplierFk')"
+                        v-model="data.supplierFk"
+                        :options="suppliers"
+                        option-value="id"
+                        option-label="nickname"
+                        :input-debounce="100"
+                        @input-value="suppliersRef.fetch()"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{
+                                        `${scope.opt.id} - ${scope.opt.nickname}`
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <QInput
+                        clearable
+                        clear-icon="close"
+                        :label="t('Supplier ref')"
+                        v-model="data.supplierRef"
+                    />
+                </div>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('Expedition date')"
+                        v-model="data.issued"
+                        :mask="dateMask"
+                    >
+                        <template #append>
+                            <QIcon
+                                name="event"
+                                class="cursor-pointer"
+                                :fill-mask="fillMask"
+                            >
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="data.issued">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </div>
+                <div class="col">
+                    <QInput
+                        :label="t('Operation date')"
+                        v-model="data.operated"
+                        :mask="dateMask"
+                        :fill-mask="fillMask"
+                        autofocus
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="data.operated" :mask="dateMask">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </div>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('Undeductible VAT')"
+                        v-model="data.deductibleExpenseFk"
+                        clearable
+                        clear-icon="close"
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        :label="t('Document')"
+                        v-model="data.dmsFk"
+                        clearable
+                        clear-icon="close"
+                        @update:model-value="checkFileExists(data.dmsFk)"
+                    >
+                        <template #prepend>
+                            <QBtn
+                                v-if="data.dmsFk"
+                                :class="{
+                                    'no-pointer-events': editDownloadDisabled,
+                                }"
+                                :disable="editDownloadDisabled"
+                                icon="cloud_download"
+                                :title="t('Download file')"
+                                padding="xs"
+                                round
+                                @click="downloadFile(data.dmsFk)"
+                            />
+                        </template>
+                        <template #append>
+                            <QBtn
+                                :class="{
+                                    'no-pointer-events': editDownloadDisabled,
+                                }"
+                                :disable="editDownloadDisabled"
+                                v-if="data.dmsFk"
+                                icon="edit"
+                                round
+                                padding="xs"
+                                @click="setEditDms(data.dmsFk)"
+                            >
+                                <QTooltip>{{ t('Edit document') }}</QTooltip>
+                            </QBtn>
+                            <QBtn
+                                v-else
+                                icon="add_circle"
+                                round
+                                padding="xs"
+                                @click="setCreateDms()"
+                            >
+                                <QTooltip>{{ t('Create document') }}</QTooltip>
+                            </QBtn>
+                        </template>
+                    </QInput>
+                </div>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('Entry date')"
+                        v-model="data.bookEntried"
+                        clearable
+                        clear-icon="close"
+                        :mask="dateMask"
+                        :fill-mask="fillMask"
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="data.bookEntried" :mask="dateMask">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </div>
+                <div class="col">
+                    <QInput
+                        :label="t('Accounted date')"
+                        v-model="data.booked"
+                        clearable
+                        clear-icon="close"
+                        :mask="dateMask"
+                        :fill-mask="fillMask"
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="data.booked" :mask="maskDate">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </div>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        v-if="currenciesRef"
+                        :label="t('Currency')"
+                        v-model="data.currencyFk"
+                        :options="currencies"
+                        option-value="id"
+                        option-label="code"
+                        @input-value="currenciesRef.fetch()"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        v-if="companiesRef"
+                        :label="t('Company')"
+                        v-model="data.companyFk"
+                        :options="companies"
+                        option-value="id"
+                        option-label="code"
+                        @input-value="companiesRef.fetch()"
+                    />
+                </div>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        :label="t('invoiceIn.summary.booked')"
+                        v-model="data.isBooked"
+                    />
+                </div>
+                <div class="col"></div>
+            </div>
+        </template>
+    </FormModel>
+    <QDialog ref="editDmsRef">
+        <QCard>
+            <QCardSection class="q-pb-none">
+                <QItem class="q-px-none">
+                    <span class="text-primary text-h6 full-width">
+                        <QIcon name="edit" class="q-mr-xs" />
+                        {{ t('Edit document') }}
+                    </span>
+                    <QBtn icon="close" flat round dense v-close-popup />
+                </QItem>
+            </QCardSection>
+            <QCardSection class="q-py-none">
+                <QItem>
+                    <QInput
+                        class="full-width q-pa-xs"
+                        :label="t('Reference')"
+                        v-model="dms.reference"
+                        clearable
+                        clear-icon="close"
+                    />
+                    <VnSelectFilter
+                        class="full-width q-pa-xs"
+                        :label="`${t('Company')}*`"
+                        v-model="dms.companyId"
+                        :options="companies"
+                        option-value="id"
+                        option-label="code"
+                        @input-value="companiesRef.fetch()"
+                        :rules="[requiredFieldRule]"
+                    />
+                </QItem>
+                <QItem>
+                    <VnSelectFilter
+                        class="full-width q-pa-xs"
+                        :label="`${t('Warehouse')}*`"
+                        v-model="dms.warehouseId"
+                        :options="warehouses"
+                        option-value="id"
+                        option-label="name"
+                        @input-value="warehousesRef.fetch()"
+                        :rules="[requiredFieldRule]"
+                    />
+                    <VnSelectFilter
+                        class="full-width q-pa-xs"
+                        :label="`${t('Type')}*`"
+                        v-model="dms.dmsTypeId"
+                        :options="dmsTypes"
+                        option-value="id"
+                        option-label="name"
+                        @input-value="dmsTypesRef.fetch()"
+                        :rules="[requiredFieldRule]"
+                    />
+                </QItem>
+                <QItem>
+                    <QInput
+                        class="full-width q-pa-xs"
+                        type="textarea"
+                        size="lg"
+                        autogrow
+                        :label="`${t('Description')}*`"
+                        v-model="dms.description"
+                        clearable
+                        clear-icon="close"
+                        :rules="[(val) => val.length || t('Required field')]"
+                    />
+                </QItem>
+                <QItem>
+                    <QFile
+                        ref="inputFileRef"
+                        class="full-width q-pa-xs"
+                        :label="t('File')"
+                        v-model="dms.files"
+                        multiple
+                        :accept="allowedContentTypes.join(',')"
+                        clearable
+                        clear-icon="close"
+                    >
+                        <template #append>
+                            <QBtn
+                                icon="attach_file_add"
+                                flat
+                                round
+                                padding="xs"
+                                @click="inputFileRef.pickFiles()"
+                            >
+                                <QTooltip>
+                                    {{ t('Select a file') }}
+                                </QTooltip>
+                            </QBtn>
+                            <QBtn icon="info" flat round padding="xs">
+                                <QTooltip max-width="30rem">
+                                    {{
+                                        `${t(
+                                            'Allowed content types'
+                                        )}: ${allowedContentTypes.join(', ')}`
+                                    }}
+                                </QTooltip>
+                            </QBtn>
+                        </template>
+                    </QFile>
+                </QItem>
+                <QItem>
+                    <QCheckbox
+                        :label="t('Generate identifier for original file')"
+                        v-model="dms.hasFile"
+                    />
+                </QItem>
+            </QCardSection>
+            <QCardActions class="justify-end">
+                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
+                <QBtn :label="t('globals.save')" color="primary" @click="upsert" />
+            </QCardActions>
+        </QCard>
+    </QDialog>
+    <QDialog ref="createDmsRef">
+        <QCard>
+            <QCardSection class="q-pb-none">
+                <QItem>
+                    <span class="text-primary text-h6 full-width">
+                        <QIcon name="edit" class="q-mr-xs" />
+                        {{ t('Create document') }}
+                    </span>
+                    <QBtn icon="close" flat round dense v-close-popup align="right" />
+                </QItem>
+            </QCardSection>
+            <QCardSection class="q-pb-none">
+                <QItem>
+                    <QInput
+                        class="full-width q-pa-xs"
+                        :label="t('Reference')"
+                        v-model="dms.reference"
+                    />
+                    <VnSelectFilter
+                        class="full-width q-pa-xs"
+                        :label="`${t('Company')}*`"
+                        v-model="dms.companyId"
+                        :options="companies"
+                        option-value="id"
+                        option-label="code"
+                        @input-value="companiesRef.fetch()"
+                        :rules="[requiredFieldRule]"
+                    />
+                </QItem>
+                <QItem>
+                    <VnSelectFilter
+                        class="full-width q-pa-xs"
+                        :label="`${t('Warehouse')}*`"
+                        v-model="dms.warehouseId"
+                        :options="warehouses"
+                        option-value="id"
+                        option-label="name"
+                        @input-value="warehousesRef.fetch()"
+                        :rules="[requiredFieldRule]"
+                    />
+                    <VnSelectFilter
+                        class="full-width q-pa-xs"
+                        :label="`${t('Type')}*`"
+                        v-model="dms.dmsTypeId"
+                        :options="dmsTypes"
+                        option-value="id"
+                        option-label="name"
+                        @input-value="dmsTypesRef.fetch()"
+                        :rules="[requiredFieldRule]"
+                    />
+                </QItem>
+                <QItem>
+                    <QInput
+                        class="full-width q-pa-xs"
+                        type="textarea"
+                        size="lg"
+                        autogrow
+                        :label="`${t('Description')}*`"
+                        v-model="dms.description"
+                        clearable
+                        clear-icon="close"
+                        :rules="[(val) => val.length || t('Required field')]"
+                    />
+                </QItem>
+                <QItem>
+                    <QFile
+                        ref="inputFileRef"
+                        class="full-width q-pa-xs"
+                        :label="t('File')"
+                        v-model="dms.files"
+                        multiple
+                        :accept="allowedContentTypes.join(',')"
+                        clearable
+                        clear-icon="close"
+                    >
+                        <template #append>
+                            <QBtn
+                                icon="attach_file_add"
+                                flat
+                                round
+                                padding="xs"
+                                @click="inputFileRef.pickFiles()"
+                            >
+                                <QTooltip>
+                                    {{ t('Select a file') }}
+                                </QTooltip>
+                            </QBtn>
+                            <QBtn icon="info" flat round padding="xs">
+                                <QTooltip max-width="30rem">
+                                    {{
+                                        `${t(
+                                            'Allowed content types'
+                                        )}: ${allowedContentTypes.join(', ')}`
+                                    }}
+                                </QTooltip>
+                            </QBtn>
+                        </template>
+                    </QFile>
+                </QItem>
+                <QItem>
+                    <QCheckbox
+                        :label="t('Generate identifier for original file')"
+                        v-model="dms.hasFile"
+                    />
+                </QItem>
+            </QCardSection>
+            <QCardActions align="right">
+                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
+                <QBtn :label="t('globals.save')" color="primary" @click="upsert" />
+            </QCardActions>
+        </QCard>
+    </QDialog>
+</template>
+<style lang="scss" scoped>
+@media (max-width: $breakpoint-xs) {
+    .column {
+        .row:not(:last-child) {
+            flex-direction: column;
+        }
+    }
+    .q-dialog {
+        .q-card {
+            &__section:not(:first-child) {
+                .q-item {
+                    flex-direction: column;
+                }
+            }
+        }
+    }
+}
+</style>
+<i18n>
+    en:
+        supplierFk: Supplier
+    es:
+        supplierFk: Proveedor
+        Supplier ref: Ref. proveedor
+        Expedition date: Fecha expedición
+        Operation date: Fecha operación
+        Undeductible VAT: Iva no deducible
+        Document: Documento
+        Download file: Descargar archivo
+        Entry date: Fecha asiento
+        Accounted date: Fecha contable
+        Currency: Moneda
+        Company: Empresa
+        Edit document: Editar documento
+        Reference: Referencia
+        Type: Tipo
+        Description: Descripción
+        Generate identifier for original file: Generar identificador para archivo original
+        Required field: Campo obligatorio
+        File: Fichero
+        Create document: Crear documento
+        Select a file: Seleccione un fichero
+        Allowed content types: Tipos de archivo permitidos
+        The company can't be empty: La empresa no puede estar vacía
+        The warehouse can't be empty: El almacén no puede estar vacío
+        The DMS Type can't be empty: El dms no puede estar vacío
+        The description can't be empty: La descripción no puede estar vacía
+        The files can't be empty: Los archivos no pueden estar vacíos
+</i18n>

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
+import LeftMenu from 'components/LeftMenu.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+import { onMounted, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+const stateStore = useStateStore();
+const { t } = useI18n();
+const route = useRoute();
+
+const filter = {
+    include: [
+        {
+            relation: 'supplier',
+            scope: {
+                include: {
+                    relation: 'contacts',
+                    scope: {
+                        where: {
+                            email: { neq: null },
+                        },
+                    },
+                },
+            },
+        },
+        {
+            relation: 'invoiceInDueDay',
+        },
+        {
+            relation: 'company',
+        },
+        {
+            relation: 'currency',
+        },
+    ],
+};
+const arrayData = useArrayData('InvoiceIn', {
+    url: `InvoiceIns/${route.params.id}`,
+    filter,
+});
+
+onMounted(async () => {
+    await arrayData.fetch({ append: false });
+    watch(
+        () => route.params.id,
+        async (newId, oldId) => {
+            if (newId) {
+                arrayData.store.url = `InvoiceIns/${newId}`;
+                await arrayData.fetch({ append: false });
+            }
+        }
+    );
+});
+</script>
+<template>
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+        <VnSearchbar
+            data-key="InvoiceInList"
+            url="InvoiceIns/filter"
+            :label="t('Search invoice')"
+            :info="t('You can search by invoice reference')"
+        />
+    </Teleport>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <InvoiceInDescriptor />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <QToolbar class="bg-vn-dark justify-end">
+                <div id="st-data"></div>
+                <QSpace />
+                <div id="st-actions"></div>
+            </QToolbar>
+            <div class="q-pa-md"><RouterView></RouterView></div>
+        </QPage>
+    </QPageContainer>
+</template>
+
+<i18n>
+    es:
+        Search invoice: Buscar factura emitida
+        You can search by invoice reference: Puedes buscar por referencia de la factura
+    </i18n>

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -0,0 +1,327 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import axios from 'axios';
+import { toCurrency, toDate } from 'src/filters';
+import { useRole } from 'src/composables/useRole';
+import useCardDescription from 'src/composables/useCardDescription';
+import { downloadFile } from 'src/composables/downloadFile';
+import { useArrayData } from 'src/composables/useArrayData';
+import { usePrintService } from 'composables/usePrintService';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import FetchData from 'src/components/FetchData.vue';
+import SendEmailDialog from 'components/common/SendEmailDialog.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const router = useRouter();
+const quasar = useQuasar();
+const { hasAny } = useRole();
+const { t } = useI18n();
+const { openReport, sendEmail } = usePrintService();
+const arrayData = useArrayData('InvoiceIn');
+
+const invoiceIn = computed(() => arrayData.store.data);
+const cardDescriptorRef = ref();
+const entityId = computed(() => $props.id || route.params.id);
+const totalAmount = ref();
+const currentAction = ref();
+const config = ref();
+
+const actions = {
+    book: {
+        title: 'Are you sure you want to book this invoice?',
+        cb: checkToBook,
+        action: toBook,
+    },
+    delete: {
+        title: 'Are you sure you want to delete this invoice?',
+        action: deleteInvoice,
+    },
+    clone: {
+        title: 'Are you sure you want to clone this invoice?',
+        action: cloneInvoice,
+    },
+    showPdf: {
+        cb: showPdfInvoice,
+    },
+    sendPdf: {
+        cb: sendPdfInvoiceConfirmation,
+    },
+};
+const filter = {
+    include: [
+        {
+            relation: 'supplier',
+            scope: {
+                include: {
+                    relation: 'contacts',
+                    scope: {
+                        where: {
+                            email: { neq: null },
+                        },
+                    },
+                },
+            },
+        },
+        {
+            relation: 'invoiceInDueDay',
+        },
+        {
+            relation: 'company',
+        },
+        {
+            relation: 'currency',
+        },
+    ],
+};
+
+const data = ref(useCardDescription());
+
+async function setData(entity) {
+    data.value = useCardDescription(entity.supplierRef, entity.id);
+    const { totalDueDay } = await getTotals();
+    totalAmount.value = totalDueDay;
+}
+
+async function getTotals() {
+    const { data } = await axios.get(`InvoiceIns/${entityId.value}/getTotals`);
+    return data;
+}
+
+function openDialog() {
+    quasar.dialog({
+        component: VnConfirm,
+        componentProps: {
+            title: currentAction.value.title,
+            promise: currentAction.value.action,
+        },
+    });
+}
+
+async function checkToBook() {
+    let directBooking = true;
+
+    const totals = await getTotals();
+    const taxableBaseNotEqualDueDay = totals.totalDueDay != totals.totalTaxableBase;
+    const vatNotEqualDueDay = totals.totalDueDay != totals.totalVat;
+
+    if (taxableBaseNotEqualDueDay && vatNotEqualDueDay) directBooking = false;
+
+    const { data: dueDaysCount } = await axios.get('InvoiceInDueDays/count', {
+        where: {
+            invoiceInFk: entityId.value,
+            dueDated: { gte: Date.vnNew() },
+        },
+    });
+
+    if (dueDaysCount) directBooking = false;
+
+    if (!directBooking) openDialog();
+    else toBook();
+}
+
+async function toBook() {
+    await axios.post(`InvoiceIns/${entityId.value}/toBook`);
+
+    // Pendiente de sincronizar todo con arrayData
+    quasar.notify({
+        type: 'positive',
+        message: t('globals.dataSaved'),
+    });
+
+    await cardDescriptorRef.value.getData();
+    setTimeout(() => location.reload(), 500);
+}
+
+async function deleteInvoice() {
+    await axios.delete(`InvoiceIns/${entityId.value}`);
+    quasar.notify({
+        type: 'positive',
+        message: t('Invoice deleted'),
+    });
+    router.push({ path: '/invoice-in' });
+}
+
+async function cloneInvoice() {
+    const { data } = await axios.post(`InvoiceIns/${entityId.value}/clone`);
+    quasar.notify({
+        type: 'positive',
+        message: t('Invoice cloned'),
+    });
+    router.push({ path: `/invoice-in/${data.id}/summary` });
+}
+
+const isAdministrative = () => hasAny(['administrative']);
+
+const isAgricultural = () =>
+    invoiceIn.value.supplier.sageWithholdingFk == config.value[0].sageWithholdingFk;
+
+function showPdfInvoice() {
+    if (isAgricultural()) openReport(`InvoiceIns/${entityId.value}/invoice-in-pdf`);
+}
+
+function sendPdfInvoiceConfirmation() {
+    quasar.dialog({
+        component: SendEmailDialog,
+        componentProps: {
+            data: {
+                address: invoiceIn.value.supplier.contacts[0].email,
+            },
+            promise: sendPdfInvoice,
+        },
+    });
+}
+
+function sendPdfInvoice({ address }) {
+    if (!address)
+        quasar.notify({
+            type: 'negative',
+            message: t(`The email can't be empty`),
+        });
+    else
+        return sendEmail(`InvoiceIns/${entityId.value}/invoice-in-email`, {
+            recipientId: invoiceIn.value.supplier.id,
+            recipient: address,
+        });
+}
+
+function triggerMenu(type) {
+    currentAction.value = actions[type];
+    if (currentAction.value.cb) currentAction.value.cb();
+    else openDialog(type);
+}
+</script>
+
+<template>
+    <FetchData
+        url="InvoiceInConfigs"
+        :where="{ fields: ['sageWithholdingFk'] }"
+        auto-load
+        @on-fetch="(data) => (config = data)"
+    />
+    <!--Refactor para añadir en el arrayData-->
+    <CardDescriptor
+        ref="cardDescriptorRef"
+        module="InvoiceIn"
+        :url="`InvoiceIns/${entityId}`"
+        :filter="filter"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        @on-fetch="setData"
+        data-key="invoiceInData"
+    >
+        <template #menu="{ entity }">
+            <QItem
+                v-if="!entity.isBooked && isAdministrative()"
+                v-ripple
+                clickable
+                @click="triggerMenu('book')"
+            >
+                <QItemSection>{{ t('To book') }}</QItemSection>
+            </QItem>
+            <QItem
+                v-if="isAdministrative()"
+                v-ripple
+                clickable
+                @click="triggerMenu('delete')"
+            >
+                <QItemSection>{{ t('Delete invoice') }}</QItemSection>
+            </QItem>
+            <QItem
+                v-if="isAdministrative()"
+                v-ripple
+                clickable
+                @click="triggerMenu('clone')"
+            >
+                <QItemSection>{{ t('Clone invoice') }}</QItemSection>
+            </QItem>
+            <QItem
+                v-if="isAgricultural()"
+                v-ripple
+                clickable
+                @click="triggerMenu('showPdf')"
+            >
+                <QItemSection>{{ t('Show agricultural receipt as PDF') }}</QItemSection>
+            </QItem>
+            <QItem
+                v-if="isAgricultural()"
+                v-ripple
+                clickable
+                @click="triggerMenu('sendPdf')"
+            >
+                <QItemSection
+                    >{{ t('Send agricultural receipt as PDF') }}...</QItemSection
+                >
+            </QItem>
+            <QItem
+                v-if="entity.dmsFk"
+                v-ripple
+                clickable
+                @click="downloadFile(entity.dmsFk)"
+            >
+                <QItemSection>{{ t('components.smartCard.downloadFile') }}</QItemSection>
+            </QItem>
+        </template>
+        <template #body="{ entity }">
+            <VnLv :label="t('invoiceIn.card.issued')" :value="toDate(entity.issued)" />
+            <VnLv :label="t('invoiceIn.summary.booked')" :value="toDate(entity.booked)" />
+            <VnLv :label="t('invoiceIn.card.amount')" :value="toCurrency(totalAmount)" />
+            <VnLv
+                :label="t('invoiceIn.summary.supplier')"
+                :value="entity.supplier?.nickname"
+            />
+        </template>
+        <template #actions="{ entity }">
+            <QCardActions>
+                <!--Sección proveedores no disponible-->
+                <!--Sección entradas no disponible-->
+                <QBtn
+                    size="md"
+                    icon="vn:ticket"
+                    color="primary"
+                    :to="{
+                        name: 'InvoiceInList',
+                        query: {
+                            params: JSON.stringify({ supplierFk: entity.supplierFk }),
+                        },
+                    }"
+                >
+                    <QTooltip>{{ t('invoiceOut.card.ticketList') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
+    </CardDescriptor>
+</template>
+<style lang="scss" scoped>
+.q-dialog {
+    .q-card {
+        width: 35em;
+    }
+}
+</style>
+<i18n>
+es:
+    To book: Contabilizar
+    Are you sure you want to book this invoice?: Estas seguro de querer asentar esta factura?
+    Delete invoice: Eliminar factura
+    Are you sure you want to delete this invoice?:  Estas seguro de querer eliminar esta factura?
+    Invoice deleted: Factura eliminada
+    Clone invoice: Clonar factura
+    Invoice cloned: Factura clonada
+    Show agricultural receipt as PDF: Ver recibo agrícola como PDF
+    Send agricultural receipt as PDF: Enviar recibo agrícola como PDF
+    Are you sure you want to send it?: Estás seguro que quieres enviarlo?
+    Send PDF invoice: Enviar factura a PDF
+</i18n>

src/pages/InvoiceIn/Card/InvoiceInDueDay.vue

@@ -0,0 +1,294 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { toDate } from 'src/filters';
+import { useArrayData } from 'src/composables/useArrayData';
+import CrudModel from 'src/components/CrudModel.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+const arrayData = useArrayData('InvoiceIn');
+const invoiceIn = computed(() => arrayData.store.data);
+
+const rowsSelected = ref([]);
+const banks = ref([]);
+const invoiceInFormRef = ref();
+const invoiceId = route.params.id;
+
+const placeholder = 'yyyy/mm/dd';
+
+const filter = {
+    where: {
+        invoiceInFk: invoiceId,
+    },
+};
+
+const columns = computed(() => [
+    {
+        name: 'duedate',
+        label: t('Date'),
+        field: (row) => toDate(row.dueDated),
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'bank',
+        label: t('Bank'),
+        field: (row) => row.bankFk,
+        options: banks.value,
+        model: 'bankFk',
+        optionValue: 'id',
+        optionLabel: 'bank',
+        sortable: true,
+        tabIndex: 2,
+        align: 'left',
+    },
+    {
+        name: 'amount',
+        label: t('Amount'),
+        field: (row) => row.amount,
+        sortable: true,
+        tabIndex: 3,
+        align: 'left',
+    },
+    {
+        name: 'foreignvalue',
+        label: t('Foreign value'),
+        field: (row) => row.foreignValue,
+        sortable: true,
+        tabIndex: 4,
+        align: 'left',
+    },
+]);
+
+const isNotEuro = (code) => code != 'EUR';
+
+async function insert() {
+    await axios.post('/InvoiceInDueDays/new ', { id: +invoiceId });
+    await invoiceInFormRef.value.reload();
+}
+</script>
+<template>
+    <FetchData url="Banks" auto-load limit="30" @on-fetch="(data) => (banks = data)" />
+    <CrudModel
+        v-if="invoiceIn"
+        ref="invoiceInFormRef"
+        data-key="InvoiceInDueDays"
+        url="InvoiceInDueDays"
+        :filter="filter"
+        auto-load
+        :data-required="{ invoiceInFk: invoiceId }"
+        v-model:selected="rowsSelected"
+        @on-fetch="(data) => (areRows = !!data.length)"
+    >
+        <template #body="{ rows }">
+            <QTable
+                v-model:selected="rowsSelected"
+                selection="multiple"
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                hide-pagination
+                :grid="$q.screen.lt.sm"
+            >
+                <template #body-cell-duedate="{ row }">
+                    <QTd>
+                        <QInput
+                            v-model="row.dueDated"
+                            mask="date"
+                            :placeholder="placeholder"
+                            clearable
+                            clear-icon="close"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="row.dueDated" landscape>
+                                            <div
+                                                class="row items-center justify-end q-gutter-sm"
+                                            >
+                                                <QBtn
+                                                    :label="t('globals.cancel')"
+                                                    color="primary"
+                                                    flat
+                                                    v-close-popup
+                                                />
+                                                <QBtn
+                                                    :label="t('globals.confirm')"
+                                                    color="primary"
+                                                    flat
+                                                    v-close-popup
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </QTd>
+                </template>
+                <template #body-cell-bank="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{
+                                            `${scope.opt.id}: ${scope.opt.bank}`
+                                        }}</QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </QTd>
+                </template>
+                <template #body-cell-amount="{ row }">
+                    <QTd>
+                        <QInput v-model="row.amount" clearable clear-icon="close" />
+                    </QTd>
+                </template>
+                <template #body-cell-foreignvalue="{ row }">
+                    <QTd>
+                        <QInput
+                            :class="{
+                                'no-pointer-events': !isNotEuro(invoiceIn.currency.code),
+                            }"
+                            :disable="!isNotEuro(invoiceIn.currency.code)"
+                            v-model="row.foreignValue"
+                            clearable
+                            clear-icon="close"
+                        />
+                    </QTd>
+                </template>
+                <template #item="props">
+                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                        <QCard>
+                            <QCardSection>
+                                <QCheckbox v-model="props.selected" dense />
+                            </QCardSection>
+                            <QSeparator />
+                            <QList>
+                                <QItem>
+                                    <QInput
+                                        class="full-width"
+                                        :label="t('Date')"
+                                        v-model="props.row.dueDated"
+                                        mask="date"
+                                        :placeholder="placeholder"
+                                        clearable
+                                        clear-icon="close"
+                                    >
+                                        <template #append>
+                                            <QIcon name="event" class="cursor-pointer">
+                                                <QPopupProxy
+                                                    cover
+                                                    transition-show="scale"
+                                                    transition-hide="scale"
+                                                >
+                                                    <QDate
+                                                        v-model="props.row.dueDated"
+                                                        landscape
+                                                    >
+                                                        <div
+                                                            class="row items-center justify-end q-gutter-sm"
+                                                        >
+                                                            <QBtn
+                                                                :label="
+                                                                    t('globals.cancel')
+                                                                "
+                                                                color="primary"
+                                                                flat
+                                                                v-close-popup
+                                                            />
+                                                            <QBtn
+                                                                :label="
+                                                                    t('globals.confirm')
+                                                                "
+                                                                color="primary"
+                                                                flat
+                                                                v-close-popup
+                                                            />
+                                                        </div>
+                                                    </QDate>
+                                                </QPopupProxy>
+                                            </QIcon>
+                                        </template>
+                                    </QInput>
+                                </QItem>
+                                <QItem>
+                                    <VnSelectFilter
+                                        :label="t('Bank')"
+                                        class="full-width"
+                                        v-model="props.row['bankFk']"
+                                        :options="banks"
+                                        option-value="id"
+                                        option-label="bank"
+                                    >
+                                        <template #option="scope">
+                                            <QItem v-bind="scope.itemProps">
+                                                <QItemSection>
+                                                    <QItemLabel>{{
+                                                        `${scope.opt.id}: ${scope.opt.bank}`
+                                                    }}</QItemLabel>
+                                                </QItemSection>
+                                            </QItem>
+                                        </template>
+                                    </VnSelectFilter>
+                                </QItem>
+                                <QItem>
+                                    <QInput
+                                        :label="t('Amount')"
+                                        class="full-width"
+                                        v-model="props.row.amount"
+                                        clearable
+                                        clear-icon="close"
+                                    />
+                                </QItem>
+                                <QItem>
+                                    <QInput
+                                        :label="t('Foreign value')"
+                                        class="full-width"
+                                        :class="{
+                                            'no-pointer-events': !isNotEuro(
+                                                invoiceIn.currency.code
+                                            ),
+                                        }"
+                                        :disable="!isNotEuro(invoiceIn.currency.code)"
+                                        v-model="props.row.foreignValue"
+                                        clearable
+                                        clear-icon="close"
+                                    />
+                                </QItem>
+                            </QList>
+                        </QCard>
+                    </div>
+                </template>
+            </QTable>
+        </template>
+    </CrudModel>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn color="primary" icon="add" size="lg" round @click="insert" />
+    </QPageSticky>
+</template>
+<style lang="scss" scoped></style>
+<i18n>
+    es:
+        Date: Fecha
+        Bank: Caja
+        Amount: Importe
+        Foreign value: Divisa
+</i18n>

src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue

@@ -0,0 +1,280 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toCurrency } from 'src/filters';
+import CrudModel from 'src/components/CrudModel.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const invoceInIntrastat = ref([]);
+const amountTotal = computed(() => getTotal('amount'));
+const netTotal = computed(() => getTotal('net'));
+const stemsTotal = computed(() => getTotal('stems'));
+const rowsSelected = ref([]);
+const countries = ref([]);
+const intrastats = ref([]);
+const invoiceInFormRef = ref();
+
+const filter = {
+    where: {
+        invoiceInFk: route.params.id,
+    },
+};
+
+const columns = computed(() => [
+    {
+        name: 'code',
+        label: t('Code'),
+        field: (row) => row.intrastatFk,
+        options: intrastats.value,
+        model: 'intrastatFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'amount',
+        label: t('amount'),
+        field: (row) => row.amount,
+        sortable: true,
+        tabIndex: 2,
+        align: 'left',
+    },
+    {
+        name: 'net',
+        label: t('net'),
+        field: (row) => row.net,
+        sortable: true,
+        tabIndex: 3,
+        align: 'left',
+    },
+    {
+        name: 'stems',
+        label: t('stems'),
+        field: (row) => row.stems,
+        sortable: true,
+        tabIndex: 4,
+        align: 'left',
+    },
+    {
+        name: 'country',
+        label: t('country'),
+        field: (row) => row.countryFk,
+        options: countries.value,
+        model: 'countryFk',
+        optionValue: 'id',
+        optionLabel: 'code',
+        sortable: true,
+        tabIndex: 5,
+        align: 'left',
+    },
+]);
+
+function getTotal(type) {
+    if (!invoceInIntrastat.value.length) return 0.0;
+    return invoceInIntrastat.value.reduce(
+        (total, intrastat) => total + intrastat[type],
+        0.0
+    );
+}
+</script>
+<template>
+    <FetchData
+        url="Countries"
+        auto-load
+        @on-fetch="(data) => (countries = data)"
+        sort-by="country"
+    />
+    <FetchData
+        url="Intrastats"
+        sort-by="id"
+        auto-load
+        @on-fetch="(data) => (intrastats = data)"
+    />
+    <div class="invoiceIn-intrastat">
+        <QCard v-if="invoceInIntrastat.length" class="full-width q-mb-md q-pa-sm">
+            <QItem class="justify-end">
+                <div>
+                    <QItemLabel>
+                        <VnLv
+                            :label="t('Total amount')"
+                            :value="toCurrency(amountTotal)"
+                        />
+                    </QItemLabel>
+                    <QItemLabel>
+                        <VnLv :label="t('Total net')" :value="netTotal" />
+                    </QItemLabel>
+                    <QItemLabel>
+                        <VnLv :label="t('Total stems')" :value="stemsTotal" />
+                    </QItemLabel>
+                </div>
+            </QItem>
+        </QCard>
+        <CrudModel
+            ref="invoiceInFormRef"
+            data-key="InvoiceInIntrastats"
+            url="InvoiceInIntrastats"
+            auto-load
+            :data-required="{ invoiceInFk: route.params.id }"
+            :filter="filter"
+            v-model:selected="rowsSelected"
+            @on-fetch="(data) => (invoceInIntrastat = data)"
+        >
+            <template #body="{ rows }">
+                <QTable
+                    v-model:selected="rowsSelected"
+                    selection="multiple"
+                    :columns="columns"
+                    :rows="rows"
+                    row-key="$index"
+                    hide-pagination
+                    :grid="$q.screen.lt.sm"
+                >
+                    <template #body-cell="{ row, col }">
+                        <QTd>
+                            <QInput
+                                v-model="row[col.name]"
+                                clearable
+                                clear-icon="close"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-code="{ row, col }">
+                        <QTd>
+                            <VnSelectFilter
+                                v-model="row[col.model]"
+                                :options="col.options"
+                                option-value="id"
+                                option-label="description"
+                                :filter-options="['id', 'description']"
+                            >
+                                <template #option="scope">
+                                    <QItem v-bind="scope.itemProps">
+                                        {{ `${scope.opt.id}: ${scope.opt.description}` }}
+                                    </QItem>
+                                </template>
+                            </VnSelectFilter>
+                        </QTd>
+                    </template>
+                    <template #body-cell-country="{ row, col }">
+                        <QTd>
+                            <VnSelectFilter
+                                v-model="row[col.model]"
+                                :options="col.options"
+                                option-value="id"
+                                option-label="code"
+                            />
+                        </QTd>
+                    </template>
+                    <template #item="props">
+                        <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                            <QCard>
+                                <QCardSection>
+                                    <QCheckbox v-model="props.selected" dense />
+                                </QCardSection>
+                                <QSeparator />
+                                <QList>
+                                    <QItem>
+                                        <VnSelectFilter
+                                            :label="t('code')"
+                                            class="full-width"
+                                            v-model="props.row['intrastatFk']"
+                                            :options="intrastats"
+                                            option-value="id"
+                                            option-label="description"
+                                            :filter-options="['id', 'description']"
+                                        >
+                                            <template #option="scope">
+                                                <QItem v-bind="scope.itemProps">
+                                                    {{
+                                                        `${scope.opt.id}: ${scope.opt.description}`
+                                                    }}
+                                                </QItem>
+                                            </template>
+                                        </VnSelectFilter>
+                                    </QItem>
+                                    <QItem
+                                        v-for="(value, index) of [
+                                            'amount',
+                                            'net',
+                                            'stems',
+                                        ]"
+                                        :key="index"
+                                    >
+                                        <QInput
+                                            :label="t(value)"
+                                            class="full-width"
+                                            v-model="props.row[value]"
+                                            clearable
+                                            clear-icon="close"
+                                        />
+                                    </QItem>
+                                    <QItem>
+                                        <VnSelectFilter
+                                            :label="t('country')"
+                                            class="full-width"
+                                            v-model="props.row['countryFk']"
+                                            :options="countries"
+                                            option-value="id"
+                                            option-label="code"
+                                        />
+                                    </QItem>
+                                </QList>
+                            </QCard>
+                        </div>
+                    </template>
+                </QTable>
+            </template>
+        </CrudModel>
+    </div>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn
+            color="primary"
+            icon="add"
+            size="lg"
+            round
+            @click="invoiceInFormRef.insert()"
+        />
+    </QPageSticky>
+</template>
+<style lang="scss">
+.invoiceIn-intrastat {
+    > .q-card {
+        .vn-label-value {
+            display: flex;
+            gap: 1em;
+
+            .label {
+                flex: 1;
+            }
+            .value {
+                flex: 0.5;
+            }
+        }
+    }
+}
+</style>
+<style lang="scss" scoped></style>
+<i18n>
+    en:
+        amount: Amount
+        net: Net
+        stems: Stems
+        country: Country
+    es:
+        Code: Código
+        amount: Cantidad
+        net: Neto
+        stems: Tallos
+        country: País
+        Total amount: Total importe
+        Total net: Total neto
+        Total stems: Total tallos
+</i18n>

src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -0,0 +1,428 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toCurrency, toDate } from 'src/filters';
+import { getUrl } from 'src/composables/getUrl';
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+
+onMounted(async () => {
+    salixUrl.value = await getUrl('');
+    invoiceInUrl.value = salixUrl.value + `invoiceIn/${entityId.value}/`;
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+
+const salixUrl = ref();
+const invoiceInUrl = ref();
+const amountsNotMatch = ref(null);
+const intrastatTotals = ref({});
+
+const vatColumns = ref([
+    {
+        name: 'expense',
+        label: 'invoiceIn.summary.expense',
+        field: (row) => row.expenseFk,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'landed',
+        label: 'invoiceIn.summary.taxableBase',
+        field: (row) => row.taxableBase,
+        format: (value) => toCurrency(value),
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'vat',
+        label: 'invoiceIn.summary.sageVat',
+        field: (row) => row.taxTypeSage?.vat,
+        format: (value) => value,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'transaction',
+        label: 'invoiceIn.summary.sageTransaction',
+        field: (row) => row.transactionTypeSage?.transaction,
+        format: (value) => value,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'rate',
+        label: 'invoiceIn.summary.rate',
+        field: (row) => taxRate(row.taxableBase, row.taxTypeSage?.rate),
+        format: (value) => toCurrency(value),
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'currency',
+        label: 'invoiceIn.summary.currency',
+        field: (row) => row.foreignValue,
+        format: (value) => value,
+        sortable: true,
+        align: 'left',
+    },
+]);
+
+const dueDayColumns = ref([
+    {
+        name: 'date',
+        label: 'invoiceIn.summary.dueDay',
+        field: (row) => toDate(row.dueDated),
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'bank',
+        label: 'invoiceIn.summary.bank',
+        field: (row) => row.bank.bank,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'amount',
+        label: 'invoiceIn.summary.amount',
+        field: (row) => row.amount,
+        format: (value) => toCurrency(value),
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'landed',
+        label: 'invoiceIn.summary.foreignValue',
+        field: (row) => row.foreignValue,
+        format: (value) => value,
+        sortable: true,
+        align: 'left',
+    },
+]);
+
+const intrastatColumns = ref([
+    {
+        name: 'code',
+        label: 'invoiceIn.summary.code',
+        field: (row) => {
+            return `${row.intrastat.id}: ${row.intrastat?.description}`;
+        },
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'amount',
+        label: 'invoiceIn.summary.amount',
+        field: (row) => toCurrency(row.amount),
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'net',
+        label: 'invoiceIn.summary.net',
+        field: (row) => row.net,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'stems',
+        label: 'invoiceIn.summary.stems',
+        field: (row) => row.stems,
+        format: (value) => value,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'landed',
+        label: 'invoiceIn.summary.country',
+        field: (row) => row.country?.code,
+        format: (value) => value,
+        sortable: true,
+        align: 'left',
+    },
+]);
+
+function getAmountNotMatch(totals) {
+    return (
+        totals.totalDueDay != totals.totalTaxableBase &&
+        totals.totalDueDay != totals.totalVat
+    );
+}
+
+function getIntrastatTotals(intrastat) {
+    const totals = {
+        amount: intrastat.reduce((acc, cur) => acc + cur.amount, 0),
+        net: intrastat.reduce((acc, cur) => acc + cur.net, 0),
+        stems: intrastat.reduce((acc, cur) => acc + cur.stems, 0),
+    };
+
+    return totals;
+}
+
+function getTaxTotal(tax) {
+    return tax.reduce(
+        (acc, cur) => acc + taxRate(cur.taxableBase, cur.taxTypeSage?.rate),
+        0
+    );
+}
+
+function setData(entity) {
+    if (!entity) return false;
+
+    amountsNotMatch.value = getAmountNotMatch(entity.totals);
+
+    if (entity.invoiceInIntrastat.length)
+        intrastatTotals.value = { ...getIntrastatTotals(entity.invoiceInIntrastat) };
+}
+
+function taxRate(taxableBase = 0, rate = 0) {
+    return (rate / 100) * taxableBase;
+}
+
+function getLink(param) {
+    return `#/invoice-in/${entityId.value}/${param}`;
+}
+</script>
+
+<template>
+    <CardSummary
+        ref="summary"
+        :url="`InvoiceIns/${entityId}/summary`"
+        @on-fetch="(data) => setData(data)"
+    >
+        <template #header="{ entity: invoiceIn }">
+            <div>{{ invoiceIn.id }} - {{ invoiceIn.supplier.name }}</div>
+        </template>
+        <template #body="{ entity: invoiceIn }">
+            <!--Basic Data-->
+            <QCard class="vn-one">
+                <QCardSection class="q-pa-none">
+                    <a class="header" :href="getLink('basic-data')">
+                        {{ t('invoiceIn.pageTitles.basicData') }}
+                        <QIcon name="open_in_new" color="primary" />
+                    </a>
+                </QCardSection>
+                <VnLv
+                    :label="t('invoiceIn.summary.supplier')"
+                    :value="invoiceIn.supplier.name"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.supplierRef')"
+                    :value="invoiceIn.supplierRef"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.currency')"
+                    :value="invoiceIn.currency.code"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.docNumber')"
+                    :value="`${invoiceIn.serial}/${invoiceIn.serialNumber}`"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <QCardSection class="q-pa-none">
+                    <a class="header" :href="getLink('basic-data')">
+                        {{ t('invoiceIn.pageTitles.basicData') }}
+                        <QIcon name="open_in_new" color="primary" />
+                    </a>
+                </QCardSection>
+                <VnLv
+                    :ellipsis-value="false"
+                    :label="t('invoiceIn.summary.issued')"
+                    :value="toDate(invoiceIn.issued)"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.operated')"
+                    :value="toDate(invoiceIn.operated)"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.bookEntried')"
+                    :value="toDate(invoiceIn.bookEntried)"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.bookedDate')"
+                    :value="toDate(invoiceIn.booked)"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <QCardSection class="q-pa-none">
+                    <a class="header" :href="getLink('basic-data')">
+                        {{ t('invoiceIn.pageTitles.basicData') }}
+                        <QIcon name="open_in_new" color="primary" />
+                    </a>
+                </QCardSection>
+                <VnLv
+                    :label="t('invoiceIn.summary.sage')"
+                    :value="invoiceIn.sageWithholding.withholding"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.vat')"
+                    :value="invoiceIn.expenseDeductible?.name"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.company')"
+                    :value="invoiceIn.company.code"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.booked')"
+                    :value="invoiceIn.isBooked"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <QCardSection class="q-pa-none">
+                    <a class="header" :href="getLink('basic-data')">
+                        {{ t('invoiceIn.pageTitles.basicData') }}
+                        <QIcon name="open_in_new" color="primary" />
+                    </a>
+                </QCardSection>
+                <QCardSection class="q-pa-none">
+                    <div class="bordered q-px-sm q-mx-auto">
+                        <VnLv
+                            :label="t('invoiceIn.summary.taxableBase')"
+                            :value="toCurrency(invoiceIn.totals.totalTaxableBase)"
+                        />
+                        <VnLv
+                            label="Total"
+                            :value="toCurrency(invoiceIn.totals.totalVat)"
+                        />
+                        <VnLv :label="t('invoiceIn.summary.dueTotal')">
+                            <template #value>
+                                <QChip
+                                    dense
+                                    class="q-pa-xs"
+                                    :color="amountsNotMatch ? 'negative' : 'transparent'"
+                                    :title="
+                                        amountsNotMatch
+                                            ? t('invoiceIn.summary.noMatch')
+                                            : t('invoiceIn.summary.dueTotal')
+                                    "
+                                >
+                                    {{ toCurrency(invoiceIn.totals.totalDueDay) }}
+                                </QChip>
+                            </template>
+                        </VnLv>
+                    </div>
+                </QCardSection>
+            </QCard>
+            <!--Vat-->
+            <QCard v-if="invoiceIn.invoiceInTax.length">
+                <a class="header" :href="getLink('vat')">
+                    {{ t('invoiceIn.card.vat') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <QTable
+                    :columns="vatColumns"
+                    :rows="invoiceIn.invoiceInTax"
+                    flat
+                    hide-pagination
+                >
+                    <template #header="props">
+                        <QTr :props="props" class="bg">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                    <template #bottom-row>
+                        <QTr class="bg">
+                            <QTd></QTd>
+                            <QTd>{{ toCurrency(invoiceIn.totals.totalTaxableBase) }}</QTd>
+                            <QTd></QTd>
+                            <QTd></QTd>
+                            <QTd>{{
+                                toCurrency(getTaxTotal(invoiceIn.invoiceInTax))
+                            }}</QTd>
+                            <QTd></QTd>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+            <!--Due Day-->
+            <QCard v-if="invoiceIn.invoiceInDueDay.length">
+                <a class="header" :href="getLink('due-day')">
+                    {{ t('invoiceIn.card.dueDay') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <QTable
+                    class="full-width"
+                    :columns="dueDayColumns"
+                    :rows="invoiceIn.invoiceInDueDay"
+                    flat
+                    hide-pagination
+                >
+                    <template #header="props">
+                        <QTr :props="props" class="bg">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                    <template #bottom-row>
+                        <QTr class="bg">
+                            <QTd></QTd>
+                            <QTd></QTd>
+                            <QTd>{{ toCurrency(invoiceIn.totals.totalDueDay) }}</QTd>
+                            <QTd></QTd>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+            <!--Intrastat-->
+            <QCard v-if="invoiceIn.invoiceInIntrastat.length">
+                <a class="header" :href="getUrl('intrastat')">
+                    {{ t('invoiceIn.card.intrastat') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <QTable
+                    :columns="intrastatColumns"
+                    :rows="invoiceIn.invoiceInIntrastat"
+                    flat
+                    hide-pagination
+                >
+                    <template #header="props">
+                        <QTr :props="props" class="bg">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                    <template #bottom-row>
+                        <QTr class="bg">
+                            <QTd></QTd>
+                            <QTd>{{ toCurrency(intrastatTotals.amount) }}</QTd>
+                            <QTd>{{ intrastatTotals.net }}</QTd>
+                            <QTd>{{ intrastatTotals.stems }}</QTd>
+                            <QTd></QTd>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+        </template>
+    </CardSummary>
+</template>
+<style lang="scss" scoped>
+.bg {
+    background-color: var(--vn-light-gray);
+}
+.bordered {
+    border: 1px solid var(--vn-text);
+    max-width: 18em;
+}
+</style>
+<i18n>
+    es:
+        Search invoice: Buscar factura emitida
+        You can search by invoice reference: Puedes buscar por referencia de la factura
+</i18n>

src/pages/InvoiceIn/Card/InvoiceInSummaryDialog.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import InvoiceInSummary from './InvoiceInSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <InvoiceInSummary v-if="$props.id" :id="$props.id" />
+    </QDialog>
+</template>
+
+<style lang="scss">
+.q-dialog .summary .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>

src/pages/InvoiceIn/Card/InvoiceInVat.vue

@@ -0,0 +1,500 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import axios from 'axios';
+import { useArrayData } from 'src/composables/useArrayData';
+import { toCurrency } from 'src/filters';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import CrudModel from 'src/components/CrudModel.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+const quasar = useQuasar();
+
+const arrayData = useArrayData('InvoiceIn');
+const invoiceIn = computed(() => arrayData.store.data);
+
+const expenses = ref([]);
+const sageTaxTypes = ref([]);
+const sageTransactionTypes = ref([]);
+const rowsSelected = ref([]);
+const newExpense = ref({
+    code: undefined,
+    isWithheld: false,
+    description: undefined,
+});
+
+const invoiceInFormRef = ref();
+const expensesRef = ref();
+const newExpenseRef = ref();
+
+const columns = computed(() => [
+    {
+        name: 'expense',
+        label: t('Expense'),
+        field: (row) => row.expenseFk,
+        options: expenses.value,
+        model: 'expenseFk',
+        optionValue: 'id',
+        optionLabel: 'id',
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'taxablebase',
+        label: t('Taxable base'),
+        field: (row) => toCurrency(row.taxableBase),
+        model: 'taxableBase',
+        sortable: true,
+        tabIndex: 2,
+        align: 'left',
+    },
+    {
+        name: 'sageiva',
+        label: t('Sage iva'),
+        field: (row) => row.taxTypeSageFk,
+        options: sageTaxTypes.value,
+        model: 'taxTypeSageFk',
+        optionValue: 'id',
+        optionLabel: 'vat',
+        sortable: true,
+        tabindex: 3,
+        align: 'left',
+    },
+    {
+        name: 'sagetransaction',
+        label: t('Sage transaction'),
+        field: (row) => row.transactionTypeSageFk,
+        options: sageTransactionTypes.value,
+        model: 'transactionTypeSageFk',
+        optionValue: 'id',
+        optionLabel: 'transaction',
+        sortable: true,
+        tabIndex: 4,
+        align: 'left',
+    },
+    {
+        name: 'rate',
+        label: t('Rate'),
+        sortable: true,
+        tabIndex: 5,
+        field: (row) => toCurrency(taxRate(row, row.taxTypeSageFk)),
+        align: 'left',
+    },
+    {
+        name: 'foreignvalue',
+        label: t('Foreign value'),
+        sortable: true,
+        tabIndex: 6,
+        field: (row) => row.foreignValue,
+        align: 'left',
+    },
+]);
+
+const filter = {
+    fields: [
+        'id',
+        'invoiceInFk',
+        'taxableBase',
+        'expenseFk',
+        'foreignValue',
+        'taxTypeSageFk',
+        'transactionTypeSageFk',
+    ],
+    where: {
+        invoiceInFk: route.params.id,
+    },
+};
+
+const isNotEuro = (code) => code != 'EUR';
+
+function taxRate(invoiceInTax) {
+    const sageTaxTypeId = invoiceInTax.taxTypeSageFk;
+    const taxRateSelection = sageTaxTypes.value.find(
+        (transaction) => transaction.id == sageTaxTypeId
+    );
+    const taxTypeSage = taxRateSelection?.rate ?? 0;
+    const taxableBase = invoiceInTax?.taxableBase ?? 0;
+
+    return (taxTypeSage / 100) * taxableBase;
+}
+
+async function addExpense() {
+    try {
+        if (!newExpense.value.code) throw new Error(t(`The code can't be empty`));
+        if (isNaN(newExpense.value.code))
+            throw new Error(t(`The code have to be a number`));
+        if (!newExpense.value.description)
+            throw new Error(t(`The description can't be empty`));
+
+        const data = [
+            {
+                id: newExpense.value.code,
+                isWithheld: newExpense.value.isWithheld,
+                name: newExpense.value.description,
+            },
+        ];
+
+        await axios.post(`Expenses`, data);
+        await expensesRef.value.fetch();
+        quasar.notify({
+            type: 'positive',
+            message: t('globals.dataSaved'),
+        });
+        newExpenseRef.value.hide();
+    } catch (error) {
+        quasar.notify({
+            type: 'negative',
+            message: t(`${error.message}`),
+        });
+    }
+}
+</script>
+<template>
+    <FetchData
+        ref="expensesRef"
+        url="Expenses"
+        auto-load
+        @on-fetch="(data) => (expenses = data)"
+    />
+    <FetchData url="SageTaxTypes" auto-load @on-fetch="(data) => (sageTaxTypes = data)" />
+    <FetchData
+        url="sageTransactionTypes"
+        auto-load
+        @on-fetch="(data) => (sageTransactionTypes = data)"
+    />
+    <CrudModel
+        ref="invoiceInFormRef"
+        v-if="invoiceIn"
+        data-key="InvoiceInTaxes"
+        url="InvoiceInTaxes"
+        :filter="filter"
+        :data-required="{ invoiceInFk: route.params.id }"
+        auto-load
+        v-model:selected="rowsSelected"
+    >
+        <template #body="{ rows }">
+            <QTable
+                v-model:selected="rowsSelected"
+                selection="multiple"
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                hide-pagination
+                :grid="$q.screen.lt.sm"
+                :pagination="{ rowsPerPage: 0 }"
+            >
+                <template #body-cell-expense="{ row, col }">
+                    <QTd auto-width>
+                        <VnSelectFilter
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :filter-options="['id', 'name']"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    {{ `${scope.opt.id}: ${scope.opt.name}` }}
+                                </QItem>
+                            </template>
+                            <template #append>
+                                <QIcon
+                                    name="close"
+                                    @click.stop="value = null"
+                                    class="cursor-pointer"
+                                />
+                                <QBtn
+                                    padding="xs"
+                                    round
+                                    flat
+                                    icon="add_circle"
+                                    @click.stop="newExpenseRef.show()"
+                                >
+                                    <QTooltip>
+                                        {{ t('Create expense') }}
+                                    </QTooltip>
+                                </QBtn>
+                            </template>
+                        </VnSelectFilter>
+                    </QTd>
+                </template>
+                <template #body-cell-taxablebase="{ row }">
+                    <QTd>
+                        <QInput
+                            :class="{
+                                'no-pointer-events': isNotEuro(invoiceIn.currency.code),
+                            }"
+                            :disable="isNotEuro(invoiceIn.currency.code)"
+                            label=""
+                            clear-icon="close"
+                            v-model="row.taxableBase"
+                            clearable
+                        >
+                            <template #prepend>
+                                <QIcon name="euro" size="xs" flat />
+                            </template>
+                        </QInput>
+                    </QTd>
+                </template>
+                <template #body-cell-sageiva="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :filter-options="['id', 'vat']"
+                            :autofocus="col.tabIndex == 1"
+                            input-debounce="0"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt.vat }}</QItemLabel>
+                                        <QItemLabel>
+                                            {{ `#${scope.opt.id}` }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </QTd>
+                </template>
+                <template #body-cell-sagetransaction="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :filter-options="['id', 'transaction']"
+                            :autofocus="col.tabIndex == 1"
+                            input-debounce="0"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{
+                                            scope.opt.transaction
+                                        }}</QItemLabel>
+                                        <QItemLabel>
+                                            {{ `#${scope.opt.id}` }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </QTd>
+                </template>
+                <template #body-cell-foreignvalue="{ row }">
+                    <QTd>
+                        <QInput
+                            :class="{
+                                'no-pointer-events': !isNotEuro(invoiceIn.currency.code),
+                            }"
+                            :disable="!isNotEuro(invoiceIn.currency.code)"
+                            v-model="row.foreignValue"
+                        />
+                    </QTd>
+                </template>
+                <template #item="props">
+                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                        <QCard bordered flat class="q-my-xs">
+                            <QCardSection>
+                                <QCheckbox v-model="props.selected" dense />
+                            </QCardSection>
+                            <QSeparator />
+                            <QList>
+                                <QItem>
+                                    <VnSelectFilter
+                                        :label="t('Expense')"
+                                        class="full-width"
+                                        v-model="props.row['expenseFk']"
+                                        :options="expenses"
+                                        option-value="id"
+                                        option-label="name"
+                                        :filter-options="['id', 'name']"
+                                    >
+                                        <template #option="scope">
+                                            <QItem v-bind="scope.itemProps">
+                                                {{ `${scope.opt.id}: ${scope.opt.name}` }}
+                                            </QItem>
+                                        </template>
+                                    </VnSelectFilter>
+                                </QItem>
+                                <QItem>
+                                    <QInput
+                                        :label="t('Taxable base')"
+                                        :class="{
+                                            'no-pointer-events': isNotEuro(
+                                                invoiceIn.currency.code
+                                            ),
+                                        }"
+                                        class="full-width"
+                                        :disable="isNotEuro(invoiceIn.currency.code)"
+                                        clear-icon="close"
+                                        v-model="props.row.taxableBase"
+                                        clearable
+                                    >
+                                        <template #append>
+                                            <QIcon name="euro" size="xs" flat />
+                                        </template>
+                                    </QInput>
+                                </QItem>
+                                <QItem>
+                                    <VnSelectFilter
+                                        :label="t('Sage iva')"
+                                        class="full-width"
+                                        v-model="props.row['taxTypeSageFk']"
+                                        :options="sageTaxTypes"
+                                        option-value="id"
+                                        option-label="vat"
+                                        :filter-options="['id', 'vat']"
+                                    >
+                                        <template #option="scope">
+                                            <QItem v-bind="scope.itemProps">
+                                                <QItemSection>
+                                                    <QItemLabel>{{
+                                                        scope.opt.vat
+                                                    }}</QItemLabel>
+                                                    <QItemLabel>
+                                                        {{ `#${scope.opt.id}` }}
+                                                    </QItemLabel>
+                                                </QItemSection>
+                                            </QItem>
+                                        </template>
+                                    </VnSelectFilter>
+                                </QItem>
+                                <QItem>
+                                    <VnSelectFilter
+                                        class="full-width"
+                                        v-model="props.row['transactionTypeSageFk']"
+                                        :options="sageTransactionTypes"
+                                        option-value="id"
+                                        option-label="transaction"
+                                        :filter-options="['id', 'transaction']"
+                                    >
+                                        <template #option="scope">
+                                            <QItem v-bind="scope.itemProps">
+                                                <QItemSection>
+                                                    <QItemLabel>{{
+                                                        scope.opt.transaction
+                                                    }}</QItemLabel>
+                                                    <QItemLabel>
+                                                        {{ `#${scope.opt.id}` }}
+                                                    </QItemLabel>
+                                                </QItemSection>
+                                            </QItem>
+                                        </template>
+                                    </VnSelectFilter>
+                                </QItem>
+                                <QItem>
+                                    {{ toCurrency(taxRate(props.row)) }}
+                                </QItem>
+                                <QItem>
+                                    <QInput
+                                        :label="t('Foreign value')"
+                                        class="full-width"
+                                        :class="{
+                                            'no-pointer-events': !isNotEuro(
+                                                invoiceIn.currency.code
+                                            ),
+                                        }"
+                                        :disable="!isNotEuro(invoiceIn.currency.code)"
+                                        v-model="props.row.foreignValue"
+                                    />
+                                </QItem>
+                            </QList>
+                        </QCard>
+                    </div>
+                </template>
+            </QTable>
+        </template>
+    </CrudModel>
+    <QDialog ref="newExpenseRef">
+        <QCard>
+            <QCardSection class="q-pb-none">
+                <QItem class="q-pa-none">
+                    <span class="text-primary text-h6 full-width">
+                        <QIcon name="edit" class="q-mr-xs" />
+                        {{ t('New expense') }}
+                    </span>
+                    <QBtn icon="close" flat round dense v-close-popup />
+                </QItem>
+            </QCardSection>
+            <QCardSection class="q-pt-none">
+                <QItem>
+                    <QInput :label="`${t('Code')}*`" v-model="newExpense.code" />
+                    <QCheckbox
+                        dense
+                        size="sm"
+                        :label="`${t('It\'s a withholding')}`"
+                        v-model="newExpense.isWithheld"
+                    />
+                </QItem>
+                <QItem>
+                    <QInput
+                        :label="`${t('Descripction')}*`"
+                        v-model="newExpense.description"
+                    />
+                </QItem>
+            </QCardSection>
+            <QCardActions class="justify-end">
+                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
+                <QBtn :label="t('globals.save')" color="primary" @click="addExpense" />
+            </QCardActions>
+        </QCard>
+    </QDialog>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn
+            color="primary"
+            icon="add"
+            size="lg"
+            round
+            @click="invoiceInFormRef.insert()"
+        />
+    </QPageSticky>
+</template>
+<style lang="scss" scoped>
+@media (max-width: $breakpoint-xs) {
+    .q-dialog {
+        .q-card {
+            &__section:not(:first-child) {
+                .q-item {
+                    flex-direction: column;
+
+                    .q-checkbox {
+                        margin-top: 2rem;
+                    }
+                }
+            }
+        }
+    }
+}
+.q-item {
+    min-height: 0;
+}
+</style>
+<i18n>
+es:
+    Expense: Gasto
+    Create expense: Crear gasto
+    Add tax: Crear gasto
+    Taxable base: Base imp.
+    Sage tax: Sage iva
+    Sage transaction: Sage transacción
+    Rate: Tasa
+    Foreign value: Divisa
+    New expense: Nuevo gasto
+    Code: Código
+    It's a withholding: Es una retención
+    Descripction: Descripción
+    The code can't be empty: El código no puede estar vacío
+    The description can't be empty: La descripción no puede estar vacía
+    The code have to be a number: El código debe ser un número.
+</i18n>

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -0,0 +1,258 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+const suppliers = ref([]);
+const suppliersRef = ref();
+</script>
+
+<template>
+    <FetchData
+        ref="suppliersRef"
+        url="Suppliers"
+        :filter="{ fields: ['id', 'nickname'] }"
+        order="nickname"
+        limit="30"
+        @on-fetch="(data) => (suppliers = data)"
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QList dense class="list q-gutter-y-sm q-mt-sm">
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            :label="t('Id or Supplier')"
+                            v-model="params.search"
+                            is-outlined
+                        >
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </VnInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            :label="t('params.supplierRef')"
+                            v-model="params.supplierRef"
+                            is-outlined
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="vn:client" size="sm"></QIcon>
+                            </template>
+                        </VnInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.supplierFk')"
+                            v-model="params.supplierFk"
+                            :options="suppliers"
+                            option-value="id"
+                            option-label="nickname"
+                            @input-value="suppliersRef.fetch()"
+                            dense
+                            outlined
+                            rounded
+                        >
+                        </VnSelectFilter>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            :label="t('params.fi')"
+                            v-model="params.fi"
+                            is-outlined
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </VnInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            :label="t('params.serialNumber')"
+                            v-model="params.serialNumber"
+                            is-outlined
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </VnInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            :label="t('params.serial')"
+                            v-model="params.serial"
+                            is-outlined
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </VnInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            :label="t('Amount')"
+                            v-model="params.amount"
+                            is-outlined
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="euro" size="sm"></QIcon>
+                            </template>
+                        </VnInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-md">
+                    <QItemSection>
+                        <QCheckbox
+                            :label="t('params.isBooked')"
+                            v-model="params.isBooked"
+                            @update:model-value="searchFn()"
+                            toggle-indeterminate
+                        />
+                    </QItemSection>
+                </QItem>
+                <QExpansionItem :label="t('More options')" expand-separator>
+                    <QItem>
+                        <QItemSection>
+                            <VnInput
+                                :label="t('params.awb')"
+                                v-model="params.awbCode"
+                                is-outlined
+                                lazy-rules
+                            >
+                                <template #prepend>
+                                    <QIcon name="badge" size="sm"></QIcon>
+                                </template>
+                            </VnInput>
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection>
+                            <VnInput
+                                :label="t('params.account')"
+                                v-model="params.account"
+                                is-outlined
+                                lazy-rules
+                            >
+                                <template #prepend>
+                                    <QIcon name="person" size="sm" />
+                                </template>
+                            </VnInput>
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection>
+                            <VnInputDate
+                                :label="t('From')"
+                                v-model="params.from"
+                                is-outlined
+                            />
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection>
+                            <VnInputDate
+                                :label="t('To')"
+                                v-model="params.to"
+                                is-outlined
+                            />
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection>
+                            <VnInputDate
+                                :label="t('Issued')"
+                                v-model="params.issued"
+                                is-outlined
+                            />
+                        </QItemSection>
+                    </QItem>
+                </QExpansionItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style scoped>
+.list {
+    width: 256px;
+}
+.list * {
+    max-width: 100%;
+}
+</style>
+
+<i18n>
+en:
+    params:
+        search: ID
+        supplierRef: Supplier ref.
+        supplierFk: Supplier
+        fi: Supplier fiscal id
+        clientFk: Customer
+        amount: Amount
+        created: Created
+        awb: AWB
+        dued: Dued
+        serialNumber: Serial Number
+        serial: Serial
+        account: Account
+        isBooked: is booked
+es:
+    params:
+        search: Contiene
+        supplierRef: Ref. proveedor
+        supplierFk: Proveedor
+        clientFk: Cliente
+        fi: CIF proveedor
+        serialNumber: Num. serie
+        serial: Serie
+        awb: AWB
+        amount: Importe
+        issued: Emitida
+        isBooked: Conciliada
+        account: Cuenta
+        created: Creada
+        dued: Vencida
+    From: Desde
+    To: Hasta
+    Amount: Importe
+    Issued: Fecha factura
+    Id or supplier: Id o proveedor
+    More options: Más opciones
+</i18n>

src/pages/InvoiceIn/InvoiceInList.vue

@@ -0,0 +1,179 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+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 InvoiceInSummaryDialog from './Card/InvoiceInSummaryDialog.vue';
+import { getUrl } from 'src/composables/getUrl';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const quasar = useQuasar();
+let url = ref();
+const { t } = useI18n();
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    url.value = await getUrl('');
+});
+onUnmounted(() => (stateStore.rightDrawer = false));
+
+function navigate(id) {
+    router.push({ path: `/invoice-in/${id}` });
+}
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: InvoiceInSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="InvoiceInList"
+                :label="t('Search invoice')"
+                :info="t('You can search by invoice reference')"
+            />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <InvoiceInFilter data-key="InvoiceInList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <VnPaginate
+                data-key="InvoiceInList"
+                url="InvoiceIns/filter"
+                order="issued DESC, id DESC"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="row.supplierRef"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv label="ID" :value="row.id" />
+                            <VnLv
+                                :label="t('invoiceIn.list.supplierRef')"
+                                :value="row.supplierRef"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.list.supplier')"
+                                :value="row.supplierName"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.list.serialNumber')"
+                                :value="row.serialNumber"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.list.serial')"
+                                :value="row.serial"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.list.issued')"
+                                :value="toDate(row.issued)"
+                            />
+                            <VnLv :label="t('invoiceIn.list.awb')" :value="row.awbCode" />
+                            <VnLv
+                                :label="t('invoiceIn.list.amount')"
+                                :value="toCurrency(row.amount)"
+                            />
+                            <VnLv :label="t('invoiceIn.list.isBooked')">
+                                <template #value>
+                                    <QCheckbox
+                                        class="no-pointer-events"
+                                        v-model="row.isBooked"
+                                        size="xs"
+                                        :true-value="1"
+                                        :false-value="0"
+                                    />
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                flat
+                                icon="arrow_circle_right"
+                                @click.stop="navigate(row.id)"
+                            >
+                                <QTooltip>
+                                    {{ t('components.smartCard.openCard') }}
+                                </QTooltip>
+                            </QBtn>
+                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
+                                <QTooltip>
+                                    {{ t('components.smartCard.openSummary') }}
+                                </QTooltip>
+                            </QBtn>
+                            <QBtn
+                                flat
+                                icon="cloud_download"
+                                @click.stop="downloadFile(row.dmsFk)"
+                            >
+                                <QTooltip>
+                                    {{ t('components.smartCard.downloadFile') }}
+                                </QTooltip>
+                            </QBtn>
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn
+            color="primary"
+            icon="add"
+            size="lg"
+            round
+            :href="`${url}invoice-in/create`"
+        />
+    </QPageSticky>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
+
+<i18n>
+es:
+    Search invoice: Buscar factura emitida
+    You can search by invoice reference: Puedes buscar por referencia de la factura
+</i18n>

src/pages/InvoiceIn/InvoiceInMain.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>

src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue

@@ -1,23 +1,40 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
 <template>
     <QItem v-ripple clickable>
-        <QItemSection>Transferir factura a ...</QItemSection>
+        <QItemSection>{{ t('Transfer invoice to') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>Ver factura ...</QItemSection>
+        <QItemSection>{{ t('See invoice') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>Enviar factura ...</QItemSection>
+        <QItemSection>{{ t('Send invoice') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>Eliminar factura</QItemSection>
+        <QItemSection>{{ t('Delete invoice') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>Asentar factura</QItemSection>
+        <QItemSection>{{ t('Post invoice') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>Regenerar PDF factura</QItemSection>
+        <QItemSection>{{ t('Regenerate invoice PDF') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>Abono ...</QItemSection>
+        <QItemSection>{{ t('Pass') }}</QItemSection>
     </QItem>
 </template>
+
+<i18n>
+es:
+    Transfer invoice to: Transferir factura a
+    See invoice: Ver factura
+    Send invoice: Enviar factura
+    Delete invoice: Eliminar factura
+    Post invoice: Asentar factura
+    Regenerate invoice PDF: Regenerar PDF factura
+    Pass: Abono
+</i18n>

src/pages/InvoiceOut/InvoiceOutFilter.vue

@@ -1,8 +1,11 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -38,47 +41,31 @@ function setWorkers(data) {
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Customer ID')"
-                            class="q-mt-sm"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
                             v-model="params.clientFk"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('FI')"
-                            class="q-mt-sm"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
-                            v-model="params.fi"
-                        />
+                        <VnInput v-model="params.fi" :label="t('FI')" is-outlined />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Amount')"
-                            class="q-mt-sm"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
                             v-model="params.amount"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mt-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             :label="t('Min')"
@@ -102,7 +89,7 @@ function setWorkers(data) {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-md">
+                <QItem>
                     <QItemSection>
                         <QCheckbox
                             :label="t('Has PDF')"
@@ -116,128 +103,29 @@ function setWorkers(data) {
                 <QExpansionItem :label="t('More options')" expand-separator>
                     <QItem>
                         <QItemSection>
-                            <QInput
-                                :label="t('Issued')"
-                                dense
-                                mask="date"
-                                outlined
-                                rounded
+                            <VnInputDate
                                 v-model="params.issued"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-hide="scale"
-                                            transition-show="scale"
-                                        >
-                                            <QDate v-model="params.issued" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        @click="save"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                                :label="t('Issued')"
+                                is-outlined
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
-                                :label="t('Created')"
-                                dense
-                                mask="date"
-                                outlined
-                                rounded
+                            <VnInputDate
                                 v-model="params.created"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-hide="scale"
-                                            transition-show="scale"
-                                        >
-                                            <QDate v-model="params.created" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        @click="save"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                                :label="t('Created')"
+                                is-outlined
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
-                                :label="t('Dued')"
-                                dense
-                                mask="date"
-                                outlined
-                                rounded
+                            <VnInputDate
                                 v-model="params.dued"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-hide="scale"
-                                            transition-show="scale"
-                                        >
-                                            <QDate v-model="params.dued" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        @click="save"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                                :label="t('Dued')"
+                                is-outlined
+                            />
                         </QItemSection>
                     </QItem>
                 </QExpansionItem>

src/pages/InvoiceOut/InvoiceOutGlobal.vue

@@ -105,11 +105,20 @@ onUnmounted(() => {
     <QPage class="column items-center q-pa-md">
         <QCard v-if="status" class="card">
             <QCardSection class="card-section">
-                <span class="status-text">{{ t(`status.${status}`) }}</span>
+                <span class="text">{{ t(`status.${status}`) }}</span>
                 <span class="text">{{
-                    `${getPercentage}% (${getAddressNumber} ${t('of')} ${getNAddresses})`
+                    t('invoiceOut.globalInvoices.statusCard.percentageText', {
+                        getPercentage: getPercentage,
+                        getAddressNumber: getAddressNumber,
+                        getNAddresses: getNAddresses,
+                    })
+                }}</span>
+                <span class="text">{{
+                    t('invoiceOut.globalInvoices.statusCard.pdfsNumberText', {
+                        nPdfs: nPdfs,
+                        totalPdfs: totalPdfs,
+                    })
                 }}</span>
-                <span class="text">{{ `${nPdfs} ${t('of')} ${totalPdfs} PDFs` }}</span>
             </QCardSection>
         </QCard>
 
@@ -149,7 +158,7 @@ onUnmounted(() => {
     display: flex;
     justify-content: center;
     width: 100%;
-    background-color: #292929;
+    background-color: var(--vn-dark);
     padding: 16px;
 
     .card-section {
@@ -158,14 +167,9 @@ onUnmounted(() => {
         padding: 0px;
     }
 
-    .status-text {
-        font-size: 14px;
-        color: white;
-    }
-
     .text {
         font-size: 14px;
-        color: #aaaaaa;
+        color: var(--vn-text);
     }
 }
 
@@ -176,24 +180,19 @@ onUnmounted(() => {
 </style>
 
 <i18n>
-   {
-        "en": {
-            "status": {
-                "packageInvoicing": "Build packaging tickets",
-                "invoicing": "Invoicing client",
-                "stopping": "Stopping process",
-                "done": "Ended process"
-            },
-            "of": "of"
-        },
-        "es": {
-            "status":{
-                "packageInvoicing": "Generación de tickets de empaque",
-                "invoicing": "Facturando a cliente",
-                "stopping": "Deteniendo proceso",
-                "done": "Proceso detenido",
-            },
-            "of": "de"
-        }
-    }
+en:
+    status:
+        packageInvoicing: Build packaging tickets
+        invoicing: Invoicing client
+        stopping: Stopping process
+        done: Ended process
+    of: of
+
+es:
+    status:
+        packageInvoicing: Generación de tickets de empaque
+        invoicing: Facturando a cliente
+        stopping: Deteniendo proceso
+        done: Proceso detenido
+    of: de
 </i18n>

src/pages/InvoiceOut/InvoiceOutGlobalForm.vue

@@ -1,11 +1,13 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { storeToRefs } from 'pinia';
-import { toDate } from 'src/filters';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
 import FetchData from 'components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 
 const { t } = useI18n();
 const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
@@ -84,7 +86,7 @@ onMounted(async () => {
         class="form-container q-pa-md"
         style="max-width: 256px"
     >
-        <div class="column q-gutter-y-md">
+        <div class="column q-gutter-y-sm">
             <QRadio
                 v-model="clientsToInvoice"
                 dense
@@ -98,6 +100,7 @@ onMounted(async () => {
                 val="one"
                 :label="t('oneClient')"
                 :dark="true"
+                class="q-mb-sm"
             />
             <VnSelectFilter
                 v-if="clientsToInvoice === 'one'"
@@ -111,64 +114,16 @@ onMounted(async () => {
                 outlined
                 rounded
             />
-            <QInput
-                dense
-                outlined
-                rounded
-                placeholder="dd-mm-aaa"
+            <VnInputDate
+                v-model="formData.invoiceDate"
                 :label="t('invoiceDate')"
-                :model-value="toDate(formData.invoiceDate)"
-            >
-                <template #append>
-                    <QIcon name="event" class="cursor-pointer">
-                        <QPopupProxy
-                            cover
-                            transition-show="scale"
-                            transition-hide="scale"
-                        >
-                            <QDate v-model="formData.invoiceDate">
-                                <div class="row items-center justify-end">
-                                    <QBtn
-                                        v-close-popup
-                                        label="Close"
-                                        color="primary"
-                                        flat
-                                    />
-                                </div>
-                            </QDate>
-                        </QPopupProxy>
-                    </QIcon>
-                </template>
-            </QInput>
-            <QInput
-                dense
-                outlined
-                rounded
-                placeholder="dd-mm-aaa"
+                is-outlined
+            />
+            <VnInputDate
+                v-model="formData.maxShipped"
                 :label="t('maxShipped')"
-                :model-value="toDate(formData.maxShipped)"
-            >
-                <template #append>
-                    <QIcon name="event" class="cursor-pointer">
-                        <QPopupProxy
-                            cover
-                            transition-show="scale"
-                            transition-hide="scale"
-                        >
-                            <QDate v-model="formData.maxShipped">
-                                <div class="row items-center justify-end">
-                                    <QBtn
-                                        v-close-popup
-                                        label="Close"
-                                        color="primary"
-                                        flat
-                                    />
-                                </div>
-                            </QDate>
-                        </QPopupProxy>
-                    </QIcon>
-                </template>
-            </QInput>
+                is-outlined
+            />
             <VnSelectFilter
                 :label="t('company')"
                 v-model="formData.companyFk"
@@ -223,28 +178,25 @@ onMounted(async () => {
 </style>
 
 <i18n>
-    {
-        "en": {
-            "invoiceDate": "Invoice date",
-            "maxShipped": "Max date",
-            "allClients": "All clients",
-            "oneClient": "One client",
-            "company": "Company",
-            "printer": "Printer",
-            "invoiceOut": "Invoice out",
-            "client": "Client",
-            "stop": "Stop"
-        },
-        "es": {
-            "invoiceDate": "Fecha de factura",
-            "maxShipped": "Fecha límite",
-            "allClients": "Todos los clientes",
-            "oneClient": "Un solo cliente",
-            "company": "Empresa",
-            "printer": "Impresora",
-            "invoiceOut": "Facturar",
-            "client": "Cliente",
-            "stop": "Parar"
-        }
-    }
+en:
+    invoiceDate: Invoice date
+    maxShipped: Max date
+    allClients: All clients
+    oneClient: One client
+    company: Company
+    printer: Printer
+    invoiceOut: Invoice out
+    client: Client
+    stop: Stop
+
+es:
+    invoiceDate: Fecha de factura
+    maxShipped: Fecha límite
+    allClients: Todos los clientes
+    oneClient: Un solo cliente
+    company: Empresa
+    printer: Impresora
+    invoiceOut: Facturar
+    client: Cliente
+    stop: Parar
 </i18n>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -13,11 +13,9 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 
 const { t } = useI18n();
-const arrayElements = ref([]);
-const manageCheckboxes = ref(false);
+const selectedCards = ref(new Map());
 const quasar = useQuasar();
 const router = useRouter();
-const showSelect = ref(false);
 const stateStore = useStateStore();
 
 onMounted(() => (stateStore.rightDrawer = true));
@@ -36,42 +34,40 @@ function viewSummary(id) {
     });
 }
 
-const setShowSelect = () => {
-    showSelect.value = !showSelect.value;
+const toggleIndividualCard = (cardData) => {
+    if (selectedCards.value.has(cardData.id)) {
+        selectedCards.value.delete(cardData.id);
+        return;
+    }
+    selectedCards.value.set(cardData.id, cardData);
 };
 
-const setManageCheckboxes = (downloadType) => {
-    console.log(downloadType);
-};
+const toggleAllCards = (cardsData) => {
+    const allSelected = selectedCards.value.size === cardsData.length;
 
-const addElement = (element) => {
-    showSelect.value = false;
-    manageCheckboxes.value = false;
-    if (arrayElements.value.length >= 0) {
-        const index = arrayElements.value.findIndex((item) => item.id === element.id);
-        if (index >= 0) {
-            arrayElements.value.splice(index, 1);
-        } else {
-            arrayElements.value.push(element);
-        }
+    if (!allSelected) {
+        // Si no todas las tarjetas están seleccionadas, selecciónalas todas
+        cardsData.forEach((data) => {
+            if (!selectedCards.value.has(data.id)) {
+                selectedCards.value.set(data.id, data);
+            }
+        });
+    } else {
+        // Si todas las tarjetas están seleccionadas, deselecciónalas todas
+        selectedCards.value.clear();
     }
 };
 
-watch(manageCheckboxes, (current, prev) => {
-    if (!current) {
-        arrayElements.value = [];
-    }
-});
-
-const downloadCsv = (rows) => {
-    const data = arrayElements.value.length ? arrayElements.value : rows;
+const downloadCsv = () => {
+    if (selectedCards.value.size === 0) return;
+    const selectedCardsArray = Array.from(selectedCards.value.values());
     let file;
-    for (var i = 0; i < data.length; i++) {
-        if (i == 0) file += Object.keys(data[i]).join(';') + '\n';
+    for (var i = 0; i < selectedCardsArray.length; i++) {
+        if (i == 0) file += Object.keys(selectedCardsArray[i]).join(';') + '\n';
         file +=
-            Object.keys(data[i])
+            Object.keys(selectedCardsArray[i])
                 .map(function (key) {
-                    return data[i][key];
+                    return selectedCardsArray[i][key];
                 })
                 .join(';') + '\n';
     }
@@ -79,7 +75,6 @@ const downloadCsv = (rows) => {
         encoding: 'windows-1252',
         mimeType: 'text/csv;charset=windows-1252;',
     });
-
     if (status === true) {
         quasar.notify({
             message: t('fileAllowed'),
@@ -137,21 +132,20 @@ const downloadCsv = (rows) => {
                 <QToolbar class="bg-vn-dark justify-end">
                     <div id="st-actions">
                         <QBtn
-                            @click="downloadCsv(rows)"
+                            @click="downloadCsv()"
                             class="q-mr-xl"
                             color="primary"
-                            :disable="!manageCheckboxes && arrayElements.length < 1"
+                            :disable="selectedCards.size === 0"
                             :label="t('globals.download')"
-                            v-if="!showSelect"
                         />
-                        <QBtnDropdown
+                        <!-- <QBtnDropdown
                             class="q-mr-xl"
                             color="primary"
                             :disable="!manageCheckboxes && arrayElements.length < 1"
                             :label="t('globals.download')"
                             v-else
                         >
-                            <Qlist>
+                            <QList>
                                 <QItem clickable v-close-popup @click="downloadCsv(rows)">
                                     <QItemSection>
                                         <QItemLabel>
@@ -175,14 +169,13 @@ const downloadCsv = (rows) => {
                                         </QItemLabel>
                                     </QItemSection>
                                 </QItem>
-                            </Qlist>
-                        </QBtnDropdown>
-
+                            </QList>
+                        </QBtnDropdown> -->
                         <QCheckbox
                             left-label
                             :label="t('globals.markAll')"
-                            v-model="manageCheckboxes"
-                            @click="setShowSelect"
+                            @click="toggleAllCards(rows)"
+                            :model-value="selectedCards.size === rows.length"
                             class="q-mr-md"
                         />
                     </div>
@@ -190,14 +183,14 @@ const downloadCsv = (rows) => {
                 <div class="flex flex-center q-pa-md">
                     <div class="card-list">
                         <CardList
-                            :add-element="addElement"
                             :element="row"
                             :id="row.id"
-                            :is-selected="manageCheckboxes"
                             :show-checkbox="true"
+                            :is-selected="selectedCards.has(row.id)"
                             :key="row.id"
                             :title="row.ref"
                             @click="navigate(row.id)"
+                            @toggle-card-check="toggleIndividualCard(row)"
                             v-for="row of rows"
                         >
                             <template #list-items>
@@ -233,7 +226,7 @@ const downloadCsv = (rows) => {
                                 <QBtn
                                     :label="t('components.smartCard.openCard')"
                                     @click.stop="navigate(row.id)"
-                                    color="white"
+                                    class="bg-vn-dark"
                                     outline
                                     type="reset"
                                 />

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -1,13 +1,16 @@
 <script setup>
 import { onMounted, ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { QCheckbox, QBtn } from 'quasar';
+
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
 import invoiceOutService from 'src/services/invoiceOut.service';
 import { toCurrency } from 'src/filters';
-import { QCheckbox, QBtn } from 'quasar';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
-import { toDate } from 'src/filters';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
 
@@ -15,8 +18,8 @@ const rows = ref([]);
 const { t } = useI18n();
 
 const dateRange = reactive({
-    from: Date.vnFirstDayOfMonth(),
-    to: Date.vnLastDayOfMonth(),
+    from: Date.vnFirstDayOfMonth().toISOString(),
+    to: Date.vnLastDayOfMonth().toISOString(),
 });
 
 const selectedCustomerId = ref(0);
@@ -174,7 +177,7 @@ const columns = ref([
 ]);
 
 const downloadCSV = async () => {
-    invoiceOutGlobalStore.getNegativeBasesCsv(dateRange.from, dateRange.to);
+    await invoiceOutGlobalStore.getNegativeBasesCsv(dateRange.from, dateRange.to);
 };
 
 const search = async () => {
@@ -186,20 +189,26 @@ const search = async () => {
             });
         }
     });
+    const searchFilter = {
+        limit: 20,
+    };
+
+    if (and.length) {
+        searchFilter.where = {
+            and,
+        };
+    }
 
     const params = {
         ...dateRange,
-        filter: {
-            limit: 20,
-            where: { and },
-        },
+        filter: JSON.stringify(searchFilter),
     };
     rows.value = await invoiceOutService.getNegativeBases(params);
 };
 
 const refresh = () => {
-    dateRange.from = Date.vnFirstDayOfMonth();
-    dateRange.to = Date.vnLastDayOfMonth();
+    dateRange.from = Date.vnFirstDayOfMonth().toISOString();
+    dateRange.to = Date.vnLastDayOfMonth().toISOString();
     filter.value = {
         company: null,
         country: null,
@@ -241,68 +250,20 @@ onMounted(async () => {
         >
             <template #top-left>
                 <div class="row justify-start items-end">
-                    <QInput
-                        dense
-                        lazy-rules
-                        outlined
-                        rounded
-                        placeholder="dd-mm-aaa"
+                    <VnInputDate
+                        v-model="dateRange.from"
                         :label="t('invoiceOut.negativeBases.from')"
-                        class="q-mr-md q"
-                        :model-value="toDate(dateRange.from)"
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="dateRange.from">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
-                    <QInput
-                        dense
+                        class="q-mr-md"
                         lazy-rules
-                        outlined
-                        rounded
-                        placeholder="dd-mm-aaa"
+                        is-outlined
+                    />
+                    <VnInputDate
+                        v-model="dateRange.to"
                         :label="t('invoiceOut.negativeBases.to')"
-                        class="q-mr-md q"
-                        :model-value="toDate(dateRange.to)"
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="dateRange.to">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
+                        class="q-mr-md"
+                        lazy-rules
+                        is-outlined
+                    />
                     <QBtn
                         color="primary"
                         icon-right="archive"
@@ -331,19 +292,17 @@ onMounted(async () => {
                     <QTh v-for="col in props.cols" :key="col.name" :props="props">
                         <div class="column justify-start items-start full-height">
                             {{ t(`invoiceOut.negativeBases.${col.label}`) }}
-                            <QInput
+                            <VnInput
                                 :class="{
                                     invisible:
                                         col.field === 'isActive' ||
                                         col.field === 'hasToInvoice' ||
                                         col.field === 'isTaxDataChecked',
                                 }"
-                                dense
-                                outlined
-                                rounded
                                 v-model="filter[col.field]"
                                 type="text"
                                 @keyup.enter="search()"
+                                is-outlined
                             />
                         </div>
                     </QTh>
@@ -363,8 +322,8 @@ onMounted(async () => {
                                 props.col.name !== 'hasToInvoice' &&
                                 props.col.name !== 'verifiedData'
                             "
-                            >{{ props.value }}</template
-                        >
+                            >{{ props.value }}
+                        </template>
                         <CustomerDescriptorProxy
                             v-if="props.col.name === 'clientId'"
                             :id="selectedCustomerId"

src/pages/Login/LoginMain.vue

@@ -3,12 +3,13 @@ import { ref } from 'vue';
 import { Notify, useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import axios from 'axios';
 
 import { useSession } from 'src/composables/useSession';
 import { useLogin } from 'src/composables/useLogin';
 
 import VnLogo from 'components/ui/VnLogo.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import axios from 'axios';
 
 const quasar = useQuasar();
 const session = useSession();
@@ -68,13 +69,14 @@ async function onSubmit() {
 <template>
     <QForm @submit="onSubmit" class="q-gutter-y-md q-pa-lg formCard">
         <VnLogo alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
-        <QInput
+
+        <VnInput
             v-model="username"
             :label="t('login.username')"
             lazy-rules
             :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
         />
-        <QInput
+        <VnInput
             type="password"
             v-model="password"
             :label="t('login.password')"

src/pages/Login/TwoFactor.vue

@@ -53,7 +53,7 @@ async function onSubmit() {
             <QIcon name="phonelink_lock" size="xl" color="primary" />
             <h5 class="text-center q-my-md">{{ t('twoFactor.insert') }}</h5>
         </div>
-        <QInput
+        <VnInput
             v-model="code"
             :hint="t('twoFactor.explanation')"
             mask="# # # # # #"
@@ -64,7 +64,7 @@ async function onSubmit() {
             <template #prepend>
                 <QIcon name="lock" />
             </template>
-        </QInput>
+        </VnInput>
         <div class="q-mt-xl">
             <QBtn
                 :label="t('twoFactor.validate')"

src/pages/Route/Cmr/CmrFilter.vue

@@ -1,8 +1,11 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -25,18 +28,18 @@ const countries = ref();
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.cmrFk')"
                             v-model="params.cmrFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="article" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -50,48 +53,48 @@ const countries = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.ticketFk')"
                             v-model="params.ticketFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="vn:ticket" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.routeFk')"
                             v-model="params.routeFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="vn:delivery" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.clientFk')"
                             v-model="params.clientFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="vn:client" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection v-if="!countries">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
-                    <QItemSection v-if="countries">
+                    <QItemSection v-if="countries" class="q-mb-sm">
                         <QSelect
                             :label="t('route.cmr.list.country')"
                             v-model="params.country"
@@ -102,6 +105,9 @@ const countries = ref();
                             transition-hide="jump-up"
                             emit-value
                             map-options
+                            dense
+                            outlined
+                            rounded
                         >
                             <template #prepend>
                                 <QIcon name="flag" size="sm"></QIcon>
@@ -111,35 +117,11 @@ const countries = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('route.cmr.list.shipped')"
+                        <VnInputDate
                             v-model="params.shipped"
-                            mask="date"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="rotate"
-                                        transition-hide="rotate"
-                                    >
-                                        <QDate v-model="params.shipped" minimal>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.close')"
-                                                    color="primary"
-                                                    flat
-                                                    @click="save"
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                            :label="t('route.cmr.list.shipped')"
+                            is-outlined
+                        />
                     </QItemSection>
                 </QItem>
             </QList>

src/pages/Shelving/Card/ShelvingCard.vue

@@ -15,14 +15,7 @@ const stateStore = useStateStore();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
-            <div class="q-pa-md">
-                <RouterView></RouterView>
-            </div>
+            <RouterView></RouterView>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Shelving/Card/ShelvingFilter.vue

@@ -50,12 +50,15 @@ function setParkings(data) {
         </template>
         <template #body="{ params }">
             <QList dense>
-                <QItem>
+                <QItem class="q-my-sm">
                     <QItemSection v-if="!parkings">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
                     <QItemSection v-if="parkings">
                         <QSelect
+                            dense
+                            outlined
+                            rounded
                             :label="t('params.parkingFk')"
                             v-model="params.parkingFk"
                             :options="parkings"
@@ -68,12 +71,15 @@ function setParkings(data) {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
                     <QItemSection v-if="workers">
                         <QSelect
+                            dense
+                            outlined
+                            rounded
                             :label="t('params.userFk')"
                             v-model="params.userFk"
                             :options="workers"

src/pages/Shelving/Card/ShelvingForm.vue

@@ -1,30 +1,24 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
-import { computed, ref } from 'vue';
-
-const props = defineProps({
-    data: {
-        type: Object,
-        default: () => ({}),
-    },
-    filter: {
-        type: Function,
-        default: () => {},
-    },
-    validate: {
-        type: Function,
-        default: () => {},
-    },
-});
-
-const data = computed(() => props.data);
+import FormModel from 'components/FormModel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
+const route = useRoute();
+const shelvingId = route.params?.id || null;
+const isNew = Boolean(!shelvingId);
+const defaultInitialData = {
+    parkingFk: null,
+    priority: 0,
+    code: null,
+    isRecyclable: false,
+};
 
 const parkingFilter = { fields: ['id', 'code'] };
-
 const parkingList = ref([]);
 const parkingListCopy = ref([]);
 
@@ -47,54 +41,87 @@ const parkingSelectFilter = {
         );
     },
 };
+
+const shelvingFilter = {
+    include: [
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: { fields: ['nickname'] },
+                },
+            },
+        },
+        { relation: 'parking' },
+    ],
+};
 </script>
 <template>
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
     <FetchData
         url="Parkings"
         :filter="parkingFilter"
         @on-fetch="setParkingList"
         auto-load
     />
-    <VnRow class="row q-gutter-md q-mb-md">
-        <div class="col">
-            <QInput
-                v-model="data.code"
-                :label="t('shelving.basicData.code')"
-                :rules="props.validate('Shelving.code')"
-            />
-        </div>
-        <div class="col">
-            <QSelect
-                v-model="data.parkingFk"
-                :options="parkingList"
-                option-value="id"
-                option-label="code"
-                emit-value
-                :label="t('shelving.basicData.parking')"
-                map-options
-                use-input
-                @filter="
-                    (value, update) => props.filter(value, update, parkingSelectFilter)
-                "
-                :rules="props.validate('Shelving.parkingFk')"
-                :input-debounce="0"
-            />
-        </div>
-    </VnRow>
-    <VnRow class="row q-gutter-md q-mb-md">
-        <div class="col">
-            <QInput
-                v-model="data.priority"
-                :label="t('shelving.basicData.priority')"
-                :rules="props.validate('Shelving.priority')"
-            />
-        </div>
-        <div class="col">
-            <QCheckbox
-                v-model="data.isRecyclable"
-                :label="t('shelving.basicData.recyclable')"
-                :rules="props.validate('Shelving.isRecyclable')"
-            />
-        </div>
-    </VnRow>
+    <FormModel
+        :url="isNew ? null : `Shelvings/${shelvingId}`"
+        :url-create="isNew ? 'Shelvings' : null"
+        :observe-form-changes="!isNew"
+        :filter="shelvingFilter"
+        model="shelving"
+        :auto-load="!isNew"
+        :form-initial-data="defaultInitialData"
+    >
+        <template #form="{ data, validate, filter }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.code"
+                        :label="t('shelving.basicData.code')"
+                        :rules="validate('Shelving.code')"
+                    />
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.parkingFk"
+                        :options="parkingList"
+                        option-value="id"
+                        option-label="code"
+                        emit-value
+                        :label="t('shelving.basicData.parking')"
+                        map-options
+                        use-input
+                        @filter="
+                            (value, update) => filter(value, update, parkingSelectFilter)
+                        "
+                        :rules="validate('Shelving.parkingFk')"
+                        :input-debounce="0"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.priority"
+                        :label="t('shelving.basicData.priority')"
+                        :rules="validate('Shelving.priority')"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isRecyclable"
+                        :label="t('shelving.basicData.recyclable')"
+                        :rules="validate('Shelving.isRecyclable')"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
 </template>

src/pages/Shelving/Card/ShelvingLog.vue

@@ -1,53 +1,6 @@
 <script setup>
 import VnLog from 'src/components/common/VnLog.vue';
-import { useRoute } from 'vue-router';
-
-const route = useRoute();
-
-const getChanges = (oldInstance, newInstance) => {
-    const changes = [];
-    Object.entries(newInstance).forEach(([key, newValue]) => {
-        const oldValue = oldInstance?.[key];
-        if (oldValue !== newValue) {
-            changes.push({
-                property: key,
-                before: oldValue,
-                after: newValue,
-            });
-        }
-    });
-    return changes;
-};
-
-const shelvingMapper = (shelving) => ({
-    ...shelving,
-    action: shelving.action,
-    created: shelving.creationDate,
-    model: shelving.changedModel,
-    userFk: shelving.userFk,
-    userName: shelving.user?.name,
-    changes: getChanges(shelving.oldInstance, shelving.newInstance),
-});
-
-const shelvingFilter = {
-    include: [
-        {
-            relation: 'user',
-            scope: {
-                fields: ['nickname', 'name'],
-            },
-        },
-    ],
-    where: {
-        originFk: route.params.id,
-    },
-};
 </script>
 <template>
-    <VnLog
-        model="Shelving"
-        url="/ShelvingLogs"
-        :mapper="shelvingMapper"
-        :filter="shelvingFilter"
-    ></VnLog>
+    <VnLog model="Shelving" url="/ShelvingLogs"></VnLog>
 </template>

src/pages/Shelving/Card/ShelvingSummary.vue

@@ -1,11 +1,11 @@
 <script setup>
-import {computed, onMounted, onUnmounted} from 'vue';
-import {useRoute, useRouter} from 'vue-router';
+import { computed, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
-import { useStateStore } from 'stores/useStateStore';
 
 const $props = defineProps({
     id: {
@@ -17,10 +17,16 @@ const route = useRoute();
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
-onMounted(() => (stateStore.rightDrawer = false));
-onUnmounted(() => (stateStore.rightDrawer = false));
 
 const entityId = computed(() => $props.id || route.params.id);
+const isDialog = Boolean($props.id);
+const hideRightDrawer = () => {
+    if (!isDialog) {
+        stateStore.rightDrawer = false;
+    }
+}
+onMounted(hideRightDrawer);
+onUnmounted(hideRightDrawer);
 const filter = {
     include: [
         {
@@ -39,50 +45,61 @@ const filter = {
 </script>
 
 <template>
-  <template v-if="stateStore.isHeaderMounted()">
-    <Teleport to="#actions-append">
-      <div class="row q-gutter-x-sm">
-        <QBtn
-            flat
-            @click="stateStore.toggleRightDrawer()"
-            round
-            dense
-            icon="menu"
-        >
-          <QTooltip bottom anchor="bottom right">
-            {{ t('globals.collapseMenu') }}
-          </QTooltip>
-        </QBtn>
-      </div>
-    </Teleport>
-  </template>
-    <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
-        <template #header="{ entity }">
-            <div>{{ entity.code }}</div>
-        </template>
-        <template #body="{ entity }">
-            <QCard class="vn-one">
-                <div class="header">
-                    {{ t('shelving.pageTitles.basicData') }}
-                </div>
-                <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
-                <VnLv
-                    :label="t('shelving.summary.parking')"
-                    :value="entity.parking?.code"
-                />
-                <VnLv :label="t('shelving.summary.priority')" :value="entity.priority" />
-                <VnLv
-                    :label="t('shelving.summary.worker')"
-                    :value="entity.worker?.user?.nickname"
-                />
-                <VnLv
-                    :label="t('shelving.summary.recyclable')"
-                    :value="entity.isRecyclable"
-                />
-            </QCard>
-        </template>
-    </CardSummary>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <template v-if="!isDialog && stateStore.isHeaderMounted()">
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <div class="q-pa-md">
+        <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
+            <template #header="{ entity }">
+                <div>{{ entity.code }}</div>
+            </template>
+            <template #body="{ entity }">
+                <QCard class="vn-one">
+                    <div class="header">
+                        {{ t('shelving.pageTitles.basicData') }}
+                    </div>
+                    <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
+                    <VnLv
+                        :label="t('shelving.summary.parking')"
+                        :value="entity.parking?.code"
+                    />
+                    <VnLv
+                        :label="t('shelving.summary.priority')"
+                        :value="entity.priority"
+                    />
+                    <VnLv
+                        :label="t('shelving.summary.worker')"
+                        :value="entity.worker?.user?.nickname"
+                    />
+                    <VnLv
+                        :label="t('shelving.summary.recyclable')"
+                        :value="entity.isRecyclable"
+                    />
+                </QCard>
+            </template>
+        </CardSummary>
+    </div>
+    <QDrawer
+        v-if="!isDialog"
+        v-model="stateStore.rightDrawer"
+        side="right"
+        :width="256"
+        show-if-above
+    >
         <QScrollArea class="fit text-grey-8">
             <ShelvingFilter
                 data-key="ShelvingList"

src/pages/Shelving/ShelvingBasicData.vue

@@ -1,38 +0,0 @@
-<script setup>
-import { useRoute } from 'vue-router';
-import FormModel from 'components/FormModel.vue';
-import ShelvingForm from "pages/Shelving/Card/ShelvingForm.vue";
-
-const route = useRoute();
-
-const shelvingId = route.params?.id || null;
-
-const shelvingFilter = {
-    include: [
-        {
-            relation: 'worker',
-            scope: {
-                fields: ['id'],
-                include: {
-                    relation: 'user',
-                    scope: { fields: ['nickname'] },
-                },
-            },
-        },
-        { relation: 'parking' },
-    ],
-};
-</script>
-<template>
-    <FormModel
-        :url="`Shelvings/${shelvingId}`"
-        :url-update="`Shelvings/${shelvingId}`"
-        :filter="shelvingFilter"
-        model="shelving"
-        auto-load
-    >
-        <template #form="{ data, validate, filter }">
-            <ShelvingForm :data="data" :validate="validate" :filter="filter" />
-        </template>
-    </FormModel>
-</template>

src/pages/Shelving/ShelvingCreate.vue

@@ -1,69 +0,0 @@
-<script setup>
-import ShelvingForm from 'pages/Shelving/Card/ShelvingForm.vue';
-import { useI18n } from 'vue-i18n';
-import { useValidator } from 'composables/useValidator';
-import { ref } from 'vue';
-import axios from 'axios';
-import {useRouter} from "vue-router";
-
-const { t } = useI18n();
-const { validate } = useValidator();
-
-const isLoading = ref(false);
-const formData = ref({});
-const router = useRouter();
-
-async function save() {
-    isLoading.value = true;
-    try {
-        await axios.patch('Shelvings', formData.value);
-    } catch (e) { /* empty */ }
-    isLoading.value = false;
-}
-
-function filter(value, update, filterOptions) {
-    update(
-        () => {
-            const { options, filterFn } = filterOptions;
-
-            options.value = filterFn(options, value);
-        },
-        (ref) => {
-            ref.setOptionIndex(-1);
-            ref.moveOptionSelection(1, true);
-        }
-    );
-}
-</script>
-<template>
-    <div class="column items-center">
-        <QForm v-if="formData" @submit.prevent class="q-pa-md" id="formModel">
-            <QCard>
-                <ShelvingForm :data="formData" :validate="validate" :filter="filter" />
-            </QCard>
-            <QBtn
-                :label="t('globals.create')"
-                type="submit"
-                color="primary"
-                class="q-mt-md"
-                @click="save()"
-            />
-            <QBtn :label="t('globals.cancel')" class="q-mt-md q-ml-md" flat @click.stop="router.push({ name: 'ShelvingList' })" />
-        </QForm>
-    </div>
-    <QInnerLoading
-        :showing="isLoading"
-        :label="t('globals.pleaseWait')"
-        color="primary"
-    />
-</template>
-<style lang="scss" scoped>
-#formModel {
-    max-width: 800px;
-    width: 100%;
-}
-
-.q-card {
-    padding: 32px;
-}
-</style>

src/pages/Shelving/ShelvingList.vue

@@ -36,14 +36,14 @@ function viewSummary(id) {
 }
 
 function exprBuilder(param, value) {
-  switch (param) {
-    case 'search':
-      return {code: {like: `%${value}%`}};
-    case 'parkingFk':
-    case 'userFk':
-    case 'isRecyclable':
-      return {[param]: value};
-  }
+    switch (param) {
+        case 'search':
+            return { code: { like: `%${value}%` } };
+        case 'parkingFk':
+        case 'userFk':
+        case 'isRecyclable':
+            return { [param]: value };
+    }
 }
 </script>
 
@@ -105,7 +105,7 @@ function exprBuilder(param, value) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
@@ -123,7 +123,7 @@ function exprBuilder(param, value) {
             <RouterLink :to="{ name: 'ShelvingCreate' }">
                 <QBtn fab icon="add" color="primary" />
                 <QTooltip>
-                    {{ t('supplier.list.newSupplier') }}
+                    {{ t('shelving.list.newShelving') }}
                 </QTooltip>
             </RouterLink>
         </QPageSticky>

src/pages/Supplier/Card/SupplierCard.vue

@@ -61,6 +61,3 @@ const { t } = useI18n();
     }
 }
 </style>
-
-<i18n>
-</i18n>

src/pages/Supplier/Card/SupplierSummary.vue

@@ -86,7 +86,7 @@ const isAdministrative = computed(() => {
                     </template>
                 </VnLv>
 
-                <VnLv :label="t('verified')" class="q-mb-xs">
+                <VnLv :label="t('supplier.summary.verified')" class="q-mb-xs">
                     <template #value>
                         <QCheckbox
                             v-model="supplier.isSerious"
@@ -96,7 +96,7 @@ const isAdministrative = computed(() => {
                         />
                     </template>
                 </VnLv>
-                <VnLv :label="t('isActive')" class="q-mb-xs">
+                <VnLv :label="t('supplier.summary.isActive')" class="q-mb-xs">
                     <template #value>
                         <QCheckbox
                             v-model="supplier.isActive"

src/pages/Supplier/SupplierCreate.vue

@@ -1,11 +1,12 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import { reactive } from 'vue';
-import { useStateStore } from 'stores/useStateStore';
+import { useI18n } from 'vue-i18n';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 
+import { useStateStore } from 'stores/useStateStore';
+
 const { t } = useI18n();
 const stateStore = useStateStore();
 
@@ -39,7 +40,7 @@ const newSupplierForm = reactive({
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput
+                        <VnInput
                             v-model="data.name"
                             :label="t('supplier.create.supplierName')"
                         />
@@ -55,11 +56,7 @@ const newSupplierForm = reactive({
     display: flex;
     justify-content: center;
     width: 100%;
-    background-color: #292929;
+    background-color: var(--vn-dark);
     padding: 40px;
 }
 </style>
-
-<i18n>
-
-</i18n>

src/pages/Supplier/SupplierList.vue

@@ -103,12 +103,9 @@ const viewSummary = (id) => {
 </style>
 
 <i18n>
-    {
-        "en": {
-            Search suppliers: Search suppliers
-        },
-        "es": {
-            Search suppliers: Buscar proveedores
-        }
-    }
+en:
+    Search suppliers: Search suppliers
+
+es:
+    Search suppliers: Buscar proveedores
 </i18n>

src/pages/Ticket/Card/TicketSummary.vue

@@ -10,6 +10,7 @@ import FetchedTags from 'components/ui/FetchedTags.vue';
 import InvoiceOutDescriptorProxy from 'pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import { getUrl } from 'src/composables/getUrl';
 
 onUpdated(() => summaryRef.value.fetch());
@@ -172,7 +173,7 @@ async function changeState(value) {
                     :label="t('ticket.summary.agency')"
                     :value="ticket.agencyMode.name"
                 />
-                <VnLv :label="t('ticket.summary.zone')" :value="ticket.zone.name" />
+                <VnLv :label="t('ticket.summary.zone')" :value="ticket?.zone?.name" />
                 <VnLv
                     :label="t('ticket.summary.warehouse')"
                     :value="ticket.warehouse?.name"
@@ -180,7 +181,7 @@ async function changeState(value) {
                 <VnLv :label="t('ticket.summary.route')" :value="ticket.routeFk" />
                 <VnLv :label="t('ticket.summary.invoice')">
                     <template #value>
-                        <span class="link">
+                        <span :class="{ link: ticket.refFk }">
                             {{ dashIfEmpty(ticket.refFk) }}
                             <InvoiceOutDescriptorProxy
                                 :id="ticket.id"
@@ -207,23 +208,31 @@ async function changeState(value) {
                     :label="t('ticket.summary.landed')"
                     :value="toDate(ticket.landed)"
                 />
-                <VnLv :label="t('globals.packages')" :value="ticket.packages" />
-                <VnLv
-                    :label="t('ticket.summary.consigneePhone')"
-                    :value="ticket.address.phone"
-                />
-                <VnLv
-                    :label="t('ticket.summary.consigneeMobile')"
-                    :value="ticket.address.mobile"
-                />
-                <VnLv
-                    :label="t('ticket.summary.clientPhone')"
-                    :value="ticket.client.phone"
-                />
-                <VnLv
-                    :label="t('ticket.summary.clientMobile')"
-                    :value="ticket.client.mobile"
-                />
+                <VnLv :label="t('global.packages')" :value="ticket.packages" />
+                <VnLv :value="ticket.address.phone">
+                    <template #label>
+                        {{ t('ticket.summary.consigneePhone') }}
+                        <VnLinkPhone :phone-number="ticket.address.phone" />
+                    </template>
+                </VnLv>
+                <VnLv :value="ticket.address.mobile">
+                    <template #label>
+                        {{ t('ticket.summary.consigneeMobile') }}
+                        <VnLinkPhone :phone-number="ticket.address.mobile" />
+                    </template>
+                </VnLv>
+                <VnLv :value="ticket.client.phone">
+                    <template #label>
+                        {{ t('ticket.summary.clientPhone') }}
+                        <VnLinkPhone :phone-number="ticket.client.phone" />
+                    </template>
+                </VnLv>
+                <VnLv :value="ticket.client.mobile">
+                    <template #label>
+                        {{ t('ticket.summary.clientMobile') }}
+                        <VnLinkPhone :phone-number="ticket.client.mobile" />
+                    </template>
+                </VnLv>
                 <VnLv
                     :label="t('ticket.summary.consignee')"
                     :value="formattedAddress()"

src/pages/Ticket/TicketFilter.vue

@@ -1,9 +1,13 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
 import toDateString from 'filters/toDateString';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -52,88 +56,33 @@ const warehouses = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             v-model="params.clientFk"
                             :label="t('Customer ID')"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             v-model="params.orderFk"
                             :label="t('Order ID')"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput v-model="params.from" :label="t('From')" mask="date">
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.from" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        <VnInputDate
+                            v-model="params.from"
+                            :label="t('From')"
+                            is-outlined
+                        />
                     </QItemSection>
                     <QItemSection>
-                        <QInput v-model="params.to" :label="t('To')" mask="date">
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.to" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    @click="save"
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -150,6 +99,9 @@ const warehouses = ref();
                             emit-value
                             map-options
                             use-input
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
@@ -168,15 +120,18 @@ const warehouses = ref();
                             option-label="name"
                             emit-value
                             map-options
+                            dense
+                            outlined
+                            rounded
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             v-model="params.refFk"
                             :label="t('Invoice Ref.')"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
@@ -242,6 +197,9 @@ const warehouses = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>
@@ -259,6 +217,9 @@ const warehouses = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>
@@ -276,6 +237,9 @@ const warehouses = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>
@@ -290,7 +254,7 @@ en:
     params:
         search: Contains
         clientFk: Customer
-        orderFK: Order
+        orderFk: Order
         from: From
         to: To
         salesPersonFk: Salesperson
@@ -307,7 +271,7 @@ es:
     params:
         search: Contiene
         clientFk: Cliente
-        orderFK: Pedido
+        orderFk: Pedido
         from: Desde
         to: Hasta
         salesPersonFk: Comercial

src/pages/Ticket/TicketList.vue

@@ -87,6 +87,7 @@ function viewSummary(id) {
                         v-for="row of rows"
                         :key="row.id"
                         :id="row.id"
+                        :title="`${row.nickname} (${row.id})`"
                         @click="navigate(row.id)"
                     >
                         <template #list-items>

src/pages/Travel/Card/TravelCard.vue

@@ -1,21 +1,9 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="SuppliersList"
-                :limit="20"
-                :label="t('Search suppliers')"
-            />
-        </Teleport>
-    </template>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit">
             <!-- Aca iría left menu y descriptor -->
@@ -61,6 +49,3 @@ const { t } = useI18n();
     }
 }
 </style>
-
-<i18n>
-</i18n>

src/pages/Travel/Card/TravelSummary.vue

@@ -9,6 +9,7 @@ import { toDate } from 'src/filters';
 import travelService from 'src/services/travel.service';
 import { QCheckbox, QIcon } from 'quasar';
 import { toCurrency } from 'filters/index';
+import VnRow from 'components/ui/VnRow.vue';
 
 onUpdated(() => summaryRef.value.fetch());
 
@@ -95,7 +96,7 @@ const tableColumnComponents = {
     },
     observation: {
         component: (props) => (props.value ? QIcon : null),
-        props: () => ({ name: 'insert_drive_file', color: 'orange', size: '25px' }),
+        props: () => ({ name: 'insert_drive_file', color: 'primary', size: '25px' }),
     },
 };
 
@@ -207,43 +208,73 @@ const openEntryDescriptor = () => {};
         </template>
 
         <template #body>
-            <QCard class="vn-one">
-                <VnLv :label="t('globals.shipped')" :value="toDate(travel.shipped)" />
-                <VnLv :label="t('globals.landed')" :value="toDate(travel.landed)" />
-                <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
-                <VnLv
-                    :label="t('globals.wareHouseOut')"
-                    :value="travel.warehouseOut?.name"
-                />
-                <VnLv
-                    :label="t('globals.wareHouseIn')"
-                    :value="travel.warehouseIn?.name"
-                />
-                <VnLv :label="t('globals.reference')" :value="travel.ref" />
-
-                <VnLv label="m³" :value="travel.m3" />
-                <VnLv :label="t('globals.totalEntries')" :value="travel.m3" />
-
-                <VnLv :label="t('travel.summary.delivered')" class="q-mb-xs">
-                    <template #value>
-                        <QCheckbox
-                            v-model="travel.isDelivered"
-                            disable
-                            dense
-                            class="full-width q-my-xs"
+            <QCard class="vn-one row justify-around" style="min-width: 100%">
+                <VnRow>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.shipped')"
+                            :value="toDate(travel.shipped)"
                         />
-                    </template>
-                </VnLv>
-                <VnLv :label="t('travel.summary.received')" class="q-mb-xs">
-                    <template #value>
-                        <QCheckbox
-                            v-model="travel.isReceived"
-                            disable
-                            dense
-                            class="full-width q-mb-xs"
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.wareHouseOut')"
+                            :value="travel.warehouseOut?.name"
                         />
-                    </template>
-                </VnLv>
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('travel.summary.delivered')" class="q-mb-xs">
+                            <template #value>
+                                <QCheckbox
+                                    v-model="travel.isDelivered"
+                                    disable
+                                    dense
+                                    class="full-width q-my-xs"
+                                />
+                            </template>
+                        </VnLv>
+                    </div>
+                </VnRow>
+                <VnRow>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.landed')"
+                            :value="toDate(travel.landed)"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.wareHouseIn')"
+                            :value="travel.warehouseIn?.name"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('travel.summary.received')" class="q-mb-xs">
+                            <template #value>
+                                <QCheckbox
+                                    v-model="travel.isReceived"
+                                    disable
+                                    dense
+                                    class="full-width q-mb-xs"
+                                />
+                            </template>
+                        </VnLv>
+                    </div>
+                </VnRow>
+                <VnRow>
+                    <div class="col">
+                        <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('globals.reference')" :value="travel.ref" />
+                    </div>
+                    <div class="col">
+                        <VnLv label="m³" :value="travel.m3" />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('globals.totalEntries')" :value="travel.m3" />
+                    </div>
+                </VnRow>
             </QCard>
             <QCard class="vn-two" v-if="entriesTableRows.length > 0">
                 <a class="header" :href="travelUrl + 'entry'">

src/pages/Travel/ExtraCommunity.vue

@@ -1,17 +1,23 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
-import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
-import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
 import { QBtn, QField, QPopupEdit } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
+import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import ExtraCommunityFilter from './ExtraCommunityFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
 import { useStateStore } from 'stores/useStateStore';
 import { toCurrency } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
 import { toDate } from 'src/filters';
 import { usePrintService } from 'composables/usePrintService';
 import travelService from 'src/services/travel.service';
-import ExtraCommunityFilter from './ExtraCommunityFilter.vue';
 
+const router = useRouter();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { openReport } = usePrintService();
@@ -222,6 +228,16 @@ const saveFieldValue = async (val, field, index) => {
     await travelService.updateTravel(id, params);
 };
 
+const navigateToTravelId = (id) => {
+    router.push({ path: `/travel/${id}` });
+};
+
+const stopEventPropagation = (event, col) => {
+    if (!['ref', 'id', 'supplier'].includes(col.name)) return;
+    event.preventDefault();
+    event.stopPropagation();
+};
+
 onMounted(async () => {
     stateStore.rightDrawer = true;
 
@@ -235,6 +251,15 @@ onMounted(async () => {
 </script>
 
 <template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="ExtraCommunity"
+                :limit="20"
+                :label="t('searchExtraCommunity')"
+            />
+        </Teleport>
+    </template>
     <QToolbar class="bg-vn-dark justify-end">
         <div id="st-data"></div>
         <QSpace />
@@ -257,8 +282,17 @@ onMounted(async () => {
             class="full-width q-mt-md"
         >
             <template #body="props">
-                <QTr :props="props" class="bg-black">
-                    <QTd v-for="col in props.cols" :key="col.name" :props="props">
+                <QTr
+                    :props="props"
+                    @click="navigateToTravelId(props.row.id)"
+                    class="cursor-pointer"
+                >
+                    <QTd
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        @click="stopEventPropagation($event, col)"
+                    >
                         <component
                             :is="tableColumnComponents[col.name].component"
                             class="col-content"
@@ -281,7 +315,7 @@ onMounted(async () => {
                                     label-set="Save"
                                     label-cancel="Close"
                                 >
-                                    <QInput
+                                    <VnInput
                                         v-model="rows[props.pageIndex][col.field]"
                                         dense
                                         autofocus
@@ -312,7 +346,12 @@ onMounted(async () => {
                         </component>
                     </QTd>
                 </QTr>
-                <QTr v-for="entry in props.row.entries" :key="entry.id" :props="props">
+                <QTr
+                    v-for="entry in props.row.entries"
+                    :key="entry.id"
+                    :props="props"
+                    class="secondary-row"
+                >
                     <QTd
                         ><QBtn flat color="blue" class="col-content">{{ entry.id }}</QBtn>
                         <!-- Cuando se cree el modulo relacionado a entries, crear su descriptor y colocarlo acá -->
@@ -346,9 +385,9 @@ onMounted(async () => {
                     <QTd></QTd>
                     <QTd></QTd>
                     <QTd></QTd>
+                    <QTd></QTd>
                 </QTr>
             </template>
-            <pre>{{ arrayData }}</pre>
         </QTable>
     </QPage>
 </template>
@@ -358,6 +397,10 @@ onMounted(async () => {
     border-radius: 4px;
     padding: 6px 6px 6px 6px;
 }
+
+.secondary-row {
+    background-color: var(--vn-gray);
+}
 </style>
 
 <i18n>

src/pages/Travel/ExtraCommunityFilter.vue

@@ -1,10 +1,12 @@
 <script setup>
 import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import FetchData from 'components/FetchData.vue';
-import { toDate } from 'src/filters';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -70,24 +72,22 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense style="max-width: 256px" class="list">
-                <QItem class="q-my-sm">
+            <QList dense class="list q-gutter-y-sm q-mt-sm">
+                <QItem>
                     <QItemSection>
-                        <QInput label="id" dense outlined rounded v-model="params.id" />
+                        <VnInput label="id" v-model="params.id" is-outlined />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-my-sm">
+                <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('params.ref')"
-                            dense
-                            outlined
-                            rounded
+                        <VnInput
+                            :label="t('params.reference')"
                             v-model="params.reference"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             v-model="params.totalEntries"
@@ -118,7 +118,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.agencyModeFk')"
@@ -133,73 +133,25 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
-                        <QInput
-                            dense
-                            outlined
-                            rounded
-                            placeholder="dd-mm-aaa"
+                        <VnInputDate
+                            v-model="params.shippedFrom"
                             :label="t('params.shippedFrom')"
-                            :model-value="toDate(params.shippedFrom)"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.shippedFrom">
-                                            <div class="row items-center justify-end">
-                                                <QBtn
-                                                    v-close-popup
-                                                    label="Close"
-                                                    color="primary"
-                                                    flat
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                            is-outlined
+                        />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
-                        <QInput
-                            dense
-                            outlined
-                            rounded
-                            placeholder="dd-mm-aaa"
-                            :model-value="toDate(params.landedTo)"
+                        <VnInputDate
+                            v-model="params.landedTo"
                             :label="t('params.landedTo')"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.landedTo">
-                                            <div class="row items-center justify-end">
-                                                <QBtn
-                                                    v-close-popup
-                                                    label="Close"
-                                                    color="primary"
-                                                    flat
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                            is-outlined
+                        />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseOutFk')"
@@ -214,7 +166,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseInFk')"
@@ -229,7 +181,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('supplier.pageTitles.supplier')"
@@ -244,7 +196,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.continent')"
@@ -265,6 +217,9 @@ const decrement = (paramsObj, key) => {
 </template>
 
 <style scoped>
+.list {
+    width: 256px;
+}
 .list * {
     max-width: 100%;
 }
@@ -272,6 +227,7 @@ const decrement = (paramsObj, key) => {
 .input-number >>> input[type='number'] {
     -moz-appearance: textfield;
 }
+
 .input-number >>> input::-webkit-outer-spin-button,
 .input-number >>> input::-webkit-inner-spin-button {
     appearance: none;
@@ -283,7 +239,8 @@ const decrement = (paramsObj, key) => {
 <i18n>
 en:
     params:
-        ref: Reference
+        id: Id
+        reference: Reference
         totalEntries: Total entries
         agencyModeFk: Agency
         warehouseInFk: Warehouse In
@@ -294,7 +251,8 @@ en:
         continent: Continent out
 es:
     params:
-        ref: Referencia
+        id: Id
+        reference: Referencia
         totalEntries: Ent. totales
         agencyModeFk: Agencia
         warehouseInFk: Alm. entrada

src/pages/Travel/TravelCreate.vue

@@ -1,14 +1,15 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { reactive, ref } from 'vue';
-import FetchData from 'components/FetchData.vue';
+import { reactive, ref, onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import { toDate } from 'src/filters';
+import VnInput from 'src/components/common/VnInput.vue';
 
-import { onBeforeMount } from 'vue';
+import { toDate } from 'src/filters';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -70,7 +71,7 @@ const onFetchWarehouses = (warehouses) => {
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput v-model="data.ref" :label="t('globals.reference')" />
+                        <VnInput v-model="data.ref" :label="t('globals.reference')" />
                     </div>
                     <div class="col">
                         <VnSelectFilter
@@ -88,7 +89,7 @@ const onFetchWarehouses = (warehouses) => {
                         <QInput
                             rounded
                             placeholder="dd-mm-aaa"
-                            :label="t('globals.landed')"
+                            :label="t('globals.shipped')"
                             :model-value="toDate(data.shipped)"
                         >
                             <template #append>
@@ -102,7 +103,7 @@ const onFetchWarehouses = (warehouses) => {
                                             <div class="row items-center justify-end">
                                                 <QBtn
                                                     v-close-popup
-                                                    label="Close"
+                                                    :label="t('globals.close')"
                                                     color="primary"
                                                     flat
                                                 />
@@ -131,7 +132,7 @@ const onFetchWarehouses = (warehouses) => {
                                             <div class="row items-center justify-end">
                                                 <QBtn
                                                     v-close-popup
-                                                    label="Close"
+                                                    :label="t('globals.close')"
                                                     color="primary"
                                                     flat
                                                 />
@@ -177,7 +178,3 @@ const onFetchWarehouses = (warehouses) => {
     grid-gap: 20px;
 }
 </style>
-
-<i18n>
-
-</i18n>

src/pages/Travel/TravelFilter.vue

@@ -1,9 +1,12 @@
 <script setup>
 import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
+
 import { toDate } from 'src/filters';
 
 const { t } = useI18n();
@@ -64,19 +67,17 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense style="max-width: 256px" class="list">
-                <QItem class="q-my-sm">
+            <QList dense class="list q-gutter-y-sm q-mt-sm">
+                <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('params.search')"
-                            dense
-                            outlined
-                            rounded
+                        <VnInput
                             v-model="params.search"
+                            :label="t('params.search')"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.agencyModeFk')"
@@ -91,7 +92,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseOutFk')"
@@ -106,7 +107,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseInFk')"
@@ -121,7 +122,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             v-model="params.scopeDays"
@@ -151,7 +152,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             dense
@@ -172,7 +173,7 @@ const decrement = (paramsObj, key) => {
                                             <div class="row items-center justify-end">
                                                 <QBtn
                                                     v-close-popup
-                                                    label="Close"
+                                                    :label="t('globals.close')"
                                                     color="primary"
                                                     flat
                                                 />
@@ -184,7 +185,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             dense
@@ -205,7 +206,7 @@ const decrement = (paramsObj, key) => {
                                             <div class="row items-center justify-end">
                                                 <QBtn
                                                     v-close-popup
-                                                    label="Close"
+                                                    :label="t('globals.close')"
                                                     color="primary"
                                                     flat
                                                 />
@@ -217,7 +218,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.continent')"
@@ -232,7 +233,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             v-model="params.totalEntries"
@@ -269,6 +270,9 @@ const decrement = (paramsObj, key) => {
 </template>
 
 <style scoped>
+.list {
+    width: 256px;
+}
 .list * {
     max-width: 100%;
 }

src/pages/Travel/TravelList.vue

@@ -1,16 +1,17 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import { onMounted } from 'vue';
-import { toDate } from 'src/filters/index';
-
+import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import TravelSummaryDialog from './Card/TravelSummaryDialog.vue';
-import { useQuasar } from 'quasar';
+
 import { useStateStore } from 'stores/useStateStore';
 import TravelFilter from './TravelFilter.vue';
+import { toDate } from 'src/filters/index';
 
 const router = useRouter();
 const quasar = useQuasar();
@@ -97,13 +98,13 @@ onMounted(async () => {
                             <QBtn
                                 :label="t('components.smartCard.clone')"
                                 @click.stop="cloneTravel(row)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
                                 :label="t('addEntry')"
                                 @click.stop="viewSummary(row.id)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                                 style="margin-top: 15px"
                             />

src/pages/Wagon/Type/WagonTypeCreate.vue

@@ -1,9 +1,12 @@
 <script setup>
-import axios from 'axios';
-import { useQuasar } from 'quasar';
 import { computed, ref, onMounted, onUpdated } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
 
 onMounted(() => fetch());
 onUpdated(() => fetch());
@@ -241,7 +244,7 @@ function exceedMaxHeight(pos) {
     <QPage class="q-pa-sm q-mx-xl">
         <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
             <QCard class="q-pa-md">
-                <QInput
+                <VnInput
                     filled
                     v-model="name"
                     :label="t('wagon.type.name')"

src/pages/Wagon/Type/WagonTypeList.vue

@@ -57,14 +57,11 @@ async function remove(row) {
                         :id="row.id"
                         @click="navigate(row.id)"
                     >
-                        <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
-                        </template>
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn

src/pages/Wagon/WagonCounter.vue

@@ -0,0 +1,154 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useSession } from 'src/composables/useSession';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+
+const quasar = useQuasar();
+const { t } = useI18n();
+const session = useSession();
+const token = session.getToken();
+
+const counters = ref({
+    alquilerBandeja: { count: 0, id: 96001, title: 'CC Bandeja', isTray: true },
+    bandejaRota: { count: 0, id: 88381, title: 'CC Bandeja Rota', isTray: true },
+    carryOficial: { count: 0, id: 96000, title: 'CC Carry OFICIAL TAG5' },
+    candadoRojo: { count: 0, id: 96002, title: 'CC Carry NO OFICIAL' },
+    sacadores: { count: 0, id: 142260, title: 'CC Sacadores' },
+    sinChapa: { count: 0, id: 2214, title: 'DC Carry Sin Placa CC' },
+    carroRoto: { count: 0, id: 142251, title: 'Carro Roto' },
+});
+
+const actions = {
+    add: (counter) => counter + 1,
+    subtract: (counter) => (counter ? counter - 1 : 0),
+    flush: () => 0,
+    addSpecific: (counter, amount) => counter + amount,
+};
+
+onMounted(() => {
+    const types = Object.keys(counters.value);
+    for (let type of types) {
+        const counter = localStorage.getItem(type);
+        counters.value[type].count = counter ? parseInt(counter) : 0;
+    }
+});
+
+function getUrl(id) {
+    return `/api/Images/catalog/200x200/${id}/download?access_token=${token}`;
+}
+
+async function handleEvent(type, action, amount) {
+    const counter = counters.value[type].count;
+    let isOk = true;
+
+    if (action == 'flush') isOk = await confirm();
+
+    if (isOk) {
+        counters.value[type].count = actions[action](counter, amount);
+        localStorage.setItem(type, counters.value[type].count);
+    }
+}
+
+function confirm() {
+    return new Promise((resolve) => {
+        quasar
+            .dialog({
+                component: VnConfirm,
+                componentProps: {
+                    title: t('Are you sure?'),
+                    message: t('The counter will be reset to zero'),
+                },
+            })
+            .onOk(() => resolve(true))
+            .onCancel(() => resolve(false));
+    });
+}
+</script>
+<template>
+    <QList class="row q-mx-auto q-mt-xl">
+        <QItem v-for="(props, name) in counters" :key="name" class="col-6">
+            <QItemSection>
+                <QImg
+                    :src="getUrl(props.id)"
+                    width="130px"
+                    @click="handleEvent(name, 'add')"
+                />
+                <p class="title">{{ props.title }}</p>
+            </QItemSection>
+            <QItemSection class="q-ma-none">
+                <QItemLabel class="text-h4">
+                    {{ props.count }}
+                </QItemLabel>
+                <QItemLabel>
+                    <QBtn
+                        class="text-center q-mr-xs"
+                        color="warning"
+                        dense
+                        size="sm"
+                        v-if="props.isTray"
+                        @click="handleEvent(name, 'addSpecific', 30)"
+                    >
+                        {{ t('Add 30') }}
+                    </QBtn>
+                    <QBtn
+                        class="text-center q-mr-xs"
+                        color="warning"
+                        dense
+                        size="sm"
+                        v-else
+                        @click="handleEvent(name, 'addSpecific', 10)"
+                    >
+                        {{ t('Add 10') }}
+                    </QBtn>
+                </QItemLabel>
+                <QItemLabel>
+                    <QBtn
+                        class="text-center q-mr-xs"
+                        color="warning"
+                        dense
+                        size="sm"
+                        @click="handleEvent(name, 'subtract')"
+                    >
+                        {{ t('Subtract 1') }}
+                    </QBtn>
+                    <QBtn
+                        class="text-center q-ml-xs"
+                        color="red"
+                        dense
+                        size="sm"
+                        @click="handleEvent(name, 'flush')"
+                    >
+                        {{ t('Flush') }}
+                    </QBtn>
+                </QItemLabel>
+            </QItemSection>
+            <QSeparator class="q-mt-sm q-mx-none" color="primary" />
+        </QItem>
+    </QList>
+</template>
+<style lang="scss" scoped>
+.q-list {
+    max-width: 50em;
+}
+@media (max-width: $breakpoint-sm) {
+    .q-item {
+        display: flex;
+        flex-direction: column;
+    }
+    .title {
+        min-height: 3em;
+    }
+}
+</style>
+<i18n>
+es:
+    Subtract 1: Quitar 1
+    Add 30: Añadir 30
+    Add 10: Añadir 10
+    Flush: Vaciar
+    Are you sure?: ¿Estás seguro?
+    It will set to 0: Se pondrá a 0
+    The counter will be reset to zero: Se pondrá el contador a cero
+</i18n>

src/pages/Wagon/WagonCreate.vue

@@ -1,9 +1,12 @@
 <script setup>
-import axios from 'axios';
-import { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
 import { computed, onMounted, onUpdated, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
 import { useRoute, useRouter } from 'vue-router';
+import axios from 'axios';
 
 onMounted(() => fetch());
 onUpdated(() => fetch());
@@ -100,7 +103,7 @@ function filterType(val, update) {
                         />
                     </div>
                     <div class="col">
-                        <QInput
+                        <VnInput
                             filled
                             v-model="wagon.plate"
                             :label="t('wagon.create.plate')"

src/pages/Wagon/WagonList.vue

@@ -65,7 +65,6 @@ async function remove(row) {
                         @click="navigate(row.id)"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv
                                 :label="t('wagon.list.plate')"
                                 :title-label="t('wagon.list.plate')"
@@ -81,7 +80,7 @@ async function remove(row) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -5,13 +5,19 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import useCardDescription from 'src/composables/useCardDescription';
+
 const $props = defineProps({
     id: {
         type: Number,
         required: false,
         default: null,
     },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
 
 const route = useRoute();
@@ -51,7 +57,7 @@ const sip = computed(() => worker.value?.sip && worker.value.sip.extension);
 
 function getWorkerAvatar() {
     const token = getToken();
-    return `/api/Images/user/160x160/${route.params.id}/download?access_token=${token}`;
+    return `/api/Images/user/160x160/${entityId.value}/download?access_token=${token}`;
 }
 const data = ref(useCardDescription());
 const setData = (entity) => {
@@ -67,6 +73,7 @@ const setData = (entity) => {
         :filter="filter"
         :title="data.title"
         :subtitle="data.subtitle"
+        :summary="$props.summary"
         @on-fetch="
             (data) => {
                 worker = data;
@@ -99,8 +106,18 @@ const setData = (entity) => {
                 :label="t('worker.list.department')"
                 :value="entity.department ? entity.department.department.name : null"
             />
-            <VnLv :label="t('worker.card.phone')" :value="entity.phone" />
-            <VnLv :label="t('worker.summary.sipExtension')" :value="sip" />
+            <VnLv :value="entity.phone">
+                <template #label>
+                    {{ t('worker.card.phone') }}
+                    <VnLinkPhone :phone-number="entity.phone" />
+                </template>
+            </VnLv>
+            <VnLv :value="sip">
+                <template #label>
+                    {{ t('worker.summary.sipExtension') }}
+                    <VnLinkPhone v-if="sip" :phone-number="sip" />
+                </template>
+            </VnLv>
         </template>
     </CardDescriptor>
 </template>

src/pages/Worker/Card/WorkerDescriptorProxy.vue

@@ -1,5 +1,6 @@
 <script setup>
 import WorkerDescriptor from './WorkerDescriptor.vue';
+import WorkerSummaryDialog from './WorkerSummaryDialog.vue';
 
 const $props = defineProps({
     id: {
@@ -11,6 +12,10 @@ const $props = defineProps({
 
 <template>
     <QPopupProxy>
-        <WorkerDescriptor v-if="$props.id" :id="$props.id" />
+        <WorkerDescriptor
+            v-if="$props.id"
+            :id="$props.id"
+            :summary="WorkerSummaryDialog"
+        />
     </QPopupProxy>
 </template>

src/pages/Worker/Card/WorkerSummary.vue

@@ -7,6 +7,7 @@ import { getUrl } from 'src/composables/getUrl';
 import VnLv from 'src/components/ui/VnLv.vue';
 import WorkerDescriptorProxy from './WorkerDescriptorProxy.vue';
 import { dashIfEmpty } from 'src/filters';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -91,15 +92,24 @@ const filter = {
                         </span>
                     </template>
                 </VnLv>
-                <VnLv
-                    :label="t('worker.summary.phoneExtension')"
-                    :value="worker.mobileExtension"
-                />
-                <VnLv :label="t('worker.summary.entPhone')" :value="worker.phone" />
-                <VnLv
-                    :label="t('worker.summary.personalPhone')"
-                    :value="worker.client.phone"
-                />
+                <VnLv :value="worker.mobileExtension">
+                    <template #label>
+                        {{ t('worker.summary.phoneExtension') }}
+                        <VnLinkPhone :phone-number="worker.mobileExtension" />
+                    </template>
+                </VnLv>
+                <VnLv :value="worker.phone">
+                    <template #label>
+                        {{ t('worker.summary.entPhone') }}
+                        <VnLinkPhone :phone-number="worker.phone" />
+                    </template>
+                </VnLv>
+                <VnLv :value="worker.client.phone">
+                    <template #label>
+                        {{ t('worker.summary.personalPhone') }}
+                        <VnLinkPhone :phone-number="worker.client.phone" />
+                    </template>
+                </VnLv>
                 <VnLv :label="t('worker.summary.locker')" :value="worker.locker" />
             </QCard>
             <QCard class="vn-one">
@@ -109,10 +119,12 @@ const filter = {
                 <VnLv :label="t('worker.summary.userId')" :value="worker.user.id" />
                 <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
                 <VnLv :label="t('worker.summary.role')" :value="worker.user.role.name" />
-                <VnLv
-                    :label="t('worker.summary.sipExtension')"
-                    :value="worker?.sip?.extension"
-                />
+                <VnLv :value="worker?.sip?.extension">
+                    <template #label>
+                        {{ t('worker.summary.sipExtension') }}
+                        <VnLinkPhone :phone-number="worker?.sip?.extension" />
+                    </template>
+                </VnLv>
             </QCard>
         </template>
     </CardSummary>

src/pages/Worker/WorkerFilter.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -25,40 +27,39 @@ const departments = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('FI')" v-model="params.fi" lazy-rules>
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                        <VnInput :label="t('FI')" v-model="params.fi" is-outlined
+                            ><template #prepend>
+                                <QIcon name="badge" size="xs"></QIcon> </template
+                        ></VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('First Name')"
                             v-model="params.firstName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Last Name')"
                             v-model="params.lastName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('User Name')"
                             v-model="params.userName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
@@ -77,16 +78,19 @@ const departments = ref();
                             emit-value
                             map-options
                             use-input
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-md">
+                <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Extension')"
                             v-model="params.extension"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
@@ -104,6 +108,7 @@ en:
         lastName: Last name
         userName: User
         extension: Extension
+        departmentFk: Department
 es:
     params:
         search: Contiene
@@ -112,6 +117,7 @@ es:
         lastName: Apellidos
         userName: Usuario
         extension: Extensión
+        departmentFk: Departamento
     FI: NIF
     First Name: Nombre
     Last Name: Apellidos

src/pages/Worker/WorkerList.vue

@@ -71,11 +71,11 @@ function viewSummary(id) {
                     <CardList
                         v-for="row of rows"
                         :key="row.id"
-                        @click="navigate(row.id)"
+                        :id="row.id"
                         :title="row.nickname"
+                        @click="navigate(row.id)"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv :label="t('worker.list.name')" :value="row.userName" />
                             <VnLv :label="t('worker.list.email')" :value="row.email" />
                             <VnLv
@@ -87,7 +87,7 @@ function viewSummary(id) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn

src/router/modules/index.js

@@ -2,6 +2,7 @@ import Customer from './customer';
 import Ticket from './ticket';
 import Claim from './claim';
 import InvoiceOut from './invoiceOut';
+import invoiceIn from './invoiceIn';
 import Worker from './worker';
 import Shelving from './shelving';
 import Wagon from './wagon';
@@ -20,4 +21,5 @@ export default [
     Route,
     Supplier,
     Travel,
+    invoiceIn,
 ];

src/router/modules/invoiceIn.js

@@ -0,0 +1,98 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/invoice-in',
+    name: 'InvoiceIn',
+    meta: {
+        title: 'invoiceIns',
+        icon: 'vn:invoice-in',
+    },
+    component: RouterView,
+    redirect: { name: 'InvoiceInMain' },
+    menus: {
+        main: ['InvoiceInList'],
+        card: [
+            'InvoiceInBasicData',
+            'InvoiceInVat',
+            'InvoiceInDueDay',
+            'InvoiceInIntrastat',
+        ],
+    },
+    children: [
+        {
+            path: '',
+            name: 'InvoiceInMain',
+            component: () => import('src/pages/InvoiceIn/InvoiceInMain.vue'),
+            redirect: { name: 'InvoiceInList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'InvoiceInList',
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/InvoiceIn/InvoiceInList.vue'),
+                },
+            ],
+        },
+        {
+            name: 'InvoiceInCard',
+            path: ':id',
+            component: () => import('src/pages/InvoiceIn/Card/InvoiceInCard.vue'),
+            redirect: { name: 'InvoiceInSummary' },
+            children: [
+                {
+                    name: 'InvoiceInSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'view_list',
+                    },
+                    component: () =>
+                        import('src/pages/InvoiceIn/Card/InvoiceInSummary.vue'),
+                },
+                {
+                    name: 'InvoiceInBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                        roles: ['salesPerson'],
+                    },
+                    component: () =>
+                        import('src/pages/InvoiceIn/Card/InvoiceInBasicData.vue'),
+                },
+                {
+                    name: 'InvoiceInVat',
+                    path: 'vat',
+                    meta: {
+                        title: 'vat',
+                        icon: 'vn:tax',
+                    },
+                    component: () => import('src/pages/InvoiceIn/Card/InvoiceInVat.vue'),
+                },
+                {
+                    name: 'InvoiceInDueDay',
+                    path: 'due-day',
+                    meta: {
+                        title: 'dueDay',
+                        icon: 'vn:calendar',
+                    },
+                    component: () =>
+                        import('src/pages/InvoiceIn/Card/InvoiceInDueDay.vue'),
+                },
+                {
+                    name: 'InvoiceInIntrastat',
+                    path: 'intrastat',
+                    meta: {
+                        title: 'intrastat',
+                        icon: 'vn:lines',
+                    },
+                    component: () =>
+                        import('src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue'),
+                },
+            ],
+        },
+    ],
+};