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

CHANGELOG.md

@@ -5,6 +5,23 @@ 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).
 
+## [2416.01] - 2024-04-18
+
+### Added
+
+## [2414.01] - 2024-04-04
+
+### Added
+
+-   (Tickets) => Se añade la opción de clonar ticket. #6951
+-   (Parking) => Se añade la sección Parking. #5186
+
+### Changed
+
+### Fixed
+
+-   (General) => Se corrige la redirección cuando hay 1 solo registro y cuando se aplica un filtro diferente al id al hacer una búsqueda general. #6893
+
 ## [2400.01] - 2024-01-04
 
 ### Added

README.md

@@ -5,13 +5,13 @@ Lilium frontend
 ## Install the dependencies
 
 ```bash
-bun install
+pnpm install
 ```
 
 ### Install quasar cli
 
 ```bash
-sudo bun install -g @quasar/cli
+sudo npm install -g @quasar/cli
 ```
 
 ### Start the app in development mode (hot-code reloading, error reporting, etc.)
@@ -23,13 +23,13 @@ quasar dev
 ### Run unit tests
 
 ```bash
-bun run test:unit
+pnpm run test:unit
 ```
 
 ### Run e2e tests
 
 ```bash
-npm run test:e2e
+pnpm run test:e2e
 ```
 
 ### Build the app for production

package.json

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

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', 'validations'],
+        boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar.defaults'],
 
         // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
         css: ['app.scss'],
@@ -117,6 +117,7 @@ module.exports = configure(function (/* ctx */) {
                     secure: false,
                 },
             },
+            open: false,
         },
 
         // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework

src/App.vue

@@ -16,7 +16,7 @@ onMounted(() => {
     if (availableLocales.includes(userLang)) {
         locale.value = userLang;
     } else {
-        locale.value = fallbackLocale;
+        locale.value = fallbackLocale.value;
     }
 });
 

src/boot/axios.js

@@ -11,7 +11,7 @@ axios.defaults.baseURL = '/api/';
 
 const onRequest = (config) => {
     const token = session.getToken();
-    if (token.length && config.headers) {
+    if (token.length && !config.headers.Authorization) {
         config.headers.Authorization = token;
     }
 

src/boot/defaults/qTable.js

@@ -0,0 +1,5 @@
+import { QTable } from 'quasar';
+import setDefault from './setDefault';
+
+setDefault(QTable, 'pagination', { rowsPerPage: 0 });
+setDefault(QTable, 'hidePagination', true);

src/boot/defaults/setDefault.js

@@ -0,0 +1,18 @@
+export default function (component, key, value) {
+    const prop = component.props[key];
+    switch (typeof prop) {
+        case 'object':
+            prop.default = value;
+            break;
+        case 'function':
+            component.props[key] = {
+                type: prop,
+                default: value,
+            };
+            break;
+        case 'undefined':
+            throw new Error('unknown prop: ' + key);
+        default:
+            throw new Error('unhandled type: ' + typeof prop);
+    }
+}

src/boot/qformMixin.js

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

src/boot/quasar.defaults.js

@@ -0,0 +1 @@
+export * from './defaults/qTable';

src/boot/quasar.js

@@ -0,0 +1,6 @@
+import { boot } from 'quasar/wrappers';
+import qFormMixin from './qformMixin';
+
+export default boot(({ app }) => {
+    app.mixin(qFormMixin);
+});

src/components/CreateBankEntityForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, onMounted, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnInput from 'src/components/common/VnInput.vue';
 
@@ -16,9 +16,8 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['onDataSaved']);
-
 const { t } = useI18n();
-
+const bicInputRef = ref(null);
 const bankEntityFormData = reactive({
     name: null,
     bic: null,
@@ -32,9 +31,14 @@ const countriesFilter = {
 
 const countriesOptions = ref([]);
 
-const onDataSaved = (data) => {
-    emit('onDataSaved', data);
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
 };
+
+onMounted(async () => {
+    await nextTick();
+    bicInputRef.value.focus();
+});
 </script>
 
 <template>
@@ -50,7 +54,7 @@ const onDataSaved = (data) => {
         :title="t('title')"
         :subtitle="t('subtitle')"
         :form-initial-data="bankEntityFormData"
-        @on-data-saved="onDataSaved($event)"
+        @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
@@ -64,6 +68,7 @@ const onDataSaved = (data) => {
                 </div>
                 <div class="col">
                     <VnInput
+                        ref="bicInputRef"
                         :label="t('swift')"
                         v-model="data.bic"
                         :required="true"

src/components/CreateManualInvoiceForm.vue

@@ -0,0 +1,174 @@
+<script setup>
+import { reactive, ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FormModelPopup from './FormModelPopup.vue';
+import VnInputDate from './common/VnInputDate.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const { t } = useI18n();
+const router = useRouter();
+
+const manualInvoiceFormData = reactive({
+    maxShipped: Date.vnNew(),
+});
+
+const formModelPopupRef = ref();
+const invoiceOutSerialsOptions = ref([]);
+const taxAreasOptions = ref([]);
+const ticketsOptions = ref([]);
+const clientsOptions = ref([]);
+const isLoading = computed(() => formModelPopupRef.value?.isLoading);
+
+const onDataSaved = async (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
+    if (requestResponse && requestResponse.id)
+        router.push({ name: 'InvoiceOutSummary', params: { id: requestResponse.id } });
+};
+</script>
+
+<template>
+    <FetchData
+        url="InvoiceOutSerials"
+        :filter="{ where: { code: { neq: 'R' } }, order: ['code'] }"
+        @on-fetch="(data) => (invoiceOutSerialsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="TaxAreas"
+        :filter="{ order: ['code'] }"
+        @on-fetch="(data) => (taxAreasOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Tickets"
+        :filter="{ fields: ['id', 'nickname'], order: 'shipped DESC', limit: 30 }"
+        @on-fetch="(data) => (ticketsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Clients"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+        @on-fetch="(data) => (clientsOptions = data)"
+        auto-load
+    />
+    <FormModelPopup
+        ref="formModelPopupRef"
+        :title="t('Create manual invoice')"
+        url-create="InvoiceOuts/createManualInvoice"
+        model="invoiceOut"
+        :form-initial-data="manualInvoiceFormData"
+        @on-data-saved="onDataSaved"
+    >
+        <template #form-inputs="{ data }">
+            <span v-if="isLoading" class="text-primary invoicing-text">
+                <QIcon name="warning" class="fill-icon q-mr-sm" size="md" />
+                {{ t('Invoicing in progress...') }}
+            </span>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Ticket')"
+                        :options="ticketsOptions"
+                        hide-selected
+                        option-label="id"
+                        option-value="id"
+                        v-model="data.ticketFk"
+                        @update:model-value="data.clientFk = null"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
+                                    <QItemLabel caption>{{
+                                        scope.opt?.nickname
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <span class="row items-center" style="max-width: max-content">{{
+                    t('Or')
+                }}</span>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Client')"
+                        :options="clientsOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.clientFk"
+                        @update:model-value="data.ticketFk = null"
+                    />
+                </div>
+                <div class="col">
+                    <VnInputDate :label="t('Max date')" v-model="data.maxShipped" />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Serial')"
+                        :options="invoiceOutSerialsOptions"
+                        hide-selected
+                        option-label="description"
+                        option-value="code"
+                        v-model="data.serial"
+                        :required="true"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Area')"
+                        :options="taxAreasOptions"
+                        hide-selected
+                        option-label="code"
+                        option-value="code"
+                        v-model="data.taxArea"
+                        :required="true"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    :label="t('Reference')"
+                    type="textarea"
+                    v-model="data.reference"
+                    fill-input
+                    autogrow
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<style lang="scss" scoped>
+.invoicing-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: $primary;
+    font-size: 24px;
+    margin-bottom: 8px;
+}
+</style>
+
+<i18n>
+es:
+    Create manual invoice: Crear factura manual
+    Ticket: Ticket
+    Client: Cliente
+    Max date: Fecha límite
+    Serial: Serie
+    Area: Area
+    Reference: Referencia
+    Or: O
+    Invoicing in progress...: Facturación en progreso...
+</i18n>

src/components/FetchData.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { h, onMounted } from 'vue';
+import { onMounted } from 'vue';
 import axios from 'axios';
 
 const $props = defineProps({
@@ -60,3 +60,6 @@ async function fetch(fetchFilter = {}) {
     }
 }
 </script>
+<template>
+    <template></template>
+</template>

src/components/FilterItemForm.vue

@@ -202,7 +202,6 @@ const selectItem = ({ id }) => {
             <QTable
                 :columns="tableColumns"
                 :rows="tableRows"
-                :pagination="{ rowsPerPage: 0 }"
                 :loading="loading"
                 :hide-header="!tableRows || !tableRows.length > 0"
                 :no-data-label="t('Enter a new search')"

src/components/FilterTravelForm.vue

@@ -200,7 +200,6 @@ const selectTravel = ({ id }) => {
             <QTable
                 :columns="tableColumns"
                 :rows="tableRows"
-                :pagination="{ rowsPerPage: 0 }"
                 :loading="loading"
                 :hide-header="!tableRows || !tableRows.length > 0"
                 :no-data-label="t('Enter a new search')"

src/components/FormModel.vue

@@ -10,6 +10,7 @@ import { useValidator } from 'src/composables/useValidator';
 import useNotify from 'src/composables/useNotify.js';
 import SkeletonForm from 'components/ui/SkeletonForm.vue';
 import VnConfirm from './ui/VnConfirm.vue';
+import { tMobile } from 'src/composables/tMobile';
 
 const quasar = useQuasar();
 const state = useState();
@@ -43,6 +44,10 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
+    defaultButtons: {
+        type: Object,
+        default: () => {},
+    },
     autoLoad: {
         type: Boolean,
         default: false,
@@ -61,6 +66,10 @@ const $props = defineProps({
         type: Function,
         default: null,
     },
+    clearStoreOnUnmount: {
+        type: Boolean,
+        default: true,
+    },
     saveFn: {
         type: Function,
         default: null,
@@ -69,10 +78,6 @@ const $props = defineProps({
 
 const emit = defineEmits(['onFetch', 'onDataSaved']);
 
-defineExpose({
-    save,
-});
-
 const componentIsRendered = ref(false);
 
 onMounted(async () => {
@@ -109,7 +114,12 @@ onBeforeRouteLeave((to, from, next) => {
 });
 
 onUnmounted(() => {
-    state.unset($props.model);
+    // Restauramos los datos originales en el store si se realizaron cambios en el formulario pero no se guardaron, evitando modificaciones erróneas.
+    if (hasChanges.value) {
+        state.set($props.model, originalData.value);
+        return;
+    }
+    if ($props.clearStoreOnUnmount) state.unset($props.model);
 });
 
 const isLoading = ref(false);
@@ -119,7 +129,19 @@ const hasChanges = ref(!$props.observeFormChanges);
 const originalData = ref({ ...$props.formInitialData });
 const formData = computed(() => state.get($props.model));
 const formUrl = computed(() => $props.url);
-
+const defaultButtons = computed(() => ({
+    save: {
+        color: 'primary',
+        icon: 'restart_alt',
+        label: 'globals.save',
+    },
+    reset: {
+        color: 'primary',
+        icon: 'save',
+        label: 'globals.reset',
+    },
+    ...$props.defaultButtons,
+}));
 const startFormWatcher = () => {
     watch(
         () => formData.value,
@@ -131,10 +153,6 @@ const startFormWatcher = () => {
     );
 };
 
-function tMobile(...args) {
-    if (!quasar.platform.is.mobile) return t(...args);
-}
-
 async function fetch() {
     const { data } = await axios.get($props.url, {
         params: { filter: JSON.stringify($props.filter) },
@@ -205,6 +223,12 @@ watch(formUrl, async () => {
     reset();
     fetch();
 });
+
+defineExpose({
+    save,
+    isLoading,
+    hasChanges,
+});
 </script>
 <template>
     <div class="column items-center full-width">
@@ -233,21 +257,21 @@ watch(formUrl, async () => {
             <QBtnGroup push class="q-gutter-x-sm">
                 <slot name="moreActions" />
                 <QBtn
-                    :label="tMobile('globals.reset')"
-                    color="primary"
-                    icon="restart_alt"
+                    :label="tMobile(defaultButtons.reset.label)"
+                    :color="defaultButtons.reset.color"
+                    :icon="defaultButtons.reset.icon"
                     flat
                     @click="reset"
                     :disable="!hasChanges"
-                    :title="t('globals.reset')"
+                    :title="t(defaultButtons.reset.label)"
                 />
                 <QBtn
-                    :label="tMobile('globals.save')"
-                    color="primary"
-                    icon="save"
+                    :label="tMobile(defaultButtons.save.label)"
+                    :color="defaultButtons.save.color"
+                    :icon="defaultButtons.save.icon"
                     @click="save"
                     :disable="!hasChanges"
-                    :title="t('globals.save')"
+                    :title="t(defaultButtons.save.label)"
                 />
             </QBtnGroup>
         </div>
@@ -261,6 +285,9 @@ watch(formUrl, async () => {
     />
 </template>
 <style lang="scss" scoped>
+.q-notifications {
+    color: black;
+}
 #formModel {
     max-width: 800px;
     width: 100%;

src/components/FormModelPopup.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FormModel from 'components/FormModel.vue';
@@ -39,27 +39,34 @@ const $props = defineProps({
 
 const { t } = useI18n();
 
+const formModelRef = ref(null);
 const closeButton = ref(null);
-const isLoading = ref(false);
 
-const onDataSaved = (dataSaved) => {
-    emit('onDataSaved', dataSaved);
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
     closeForm();
 };
 
-const closeForm = () => {
+const isLoading = computed(() => formModelRef.value?.isLoading);
+
+const closeForm = async () => {
     if (closeButton.value) closeButton.value.click();
 };
+
+defineExpose({
+    isLoading,
+});
 </script>
 
 <template>
     <FormModel
+        ref="formModelRef"
         :form-initial-data="formInitialData"
         :observe-form-changes="false"
         :default-actions="false"
         :url-create="urlCreate"
         :model="model"
-        @on-data-saved="onDataSaved($event)"
+        @on-data-saved="onDataSaved"
     >
         <template #form="{ data, validate }">
             <span ref="closeButton" class="close-icon" v-close-popup>

src/components/FormPopup.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const emit = defineEmits(['onSubmit']);
+
+const $props = defineProps({
+    title: {
+        type: String,
+        default: '',
+    },
+    subtitle: {
+        type: String,
+        default: '',
+    },
+    defaultSubmitButton: {
+        type: Boolean,
+        default: true,
+    },
+    defaultCancelButton: {
+        type: Boolean,
+        default: true,
+    },
+    customSubmitButtonLabel: {
+        type: String,
+        default: '',
+    },
+});
+
+const { t } = useI18n();
+
+const closeButton = ref(null);
+const isLoading = ref(false);
+
+const onSubmit = () => {
+    emit('onSubmit');
+    closeForm();
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+</script>
+
+<template>
+    <QForm
+        @submit="onSubmit($event)"
+        class="all-pointer-events full-width"
+        style="max-width: 800px"
+    >
+        <QCard class="q-pa-lg">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="sm" />
+            </span>
+            <h1 class="title">{{ title }}</h1>
+            <p>{{ subtitle }}</p>
+            <slot name="form-inputs" />
+            <div class="q-mt-lg row justify-end">
+                <QBtn
+                    v-if="defaultSubmitButton"
+                    :label="customSubmitButtonLabel || t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
+                <QBtn
+                    v-if="defaultCancelButton"
+                    :label="t('globals.cancel')"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    v-close-popup
+                />
+                <slot name="customButtons" />
+            </div>
+        </QCard>
+    </QForm>
+</template>
+
+<style lang="scss" scoped>
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+</style>

src/components/LeftMenu.vue

@@ -234,6 +234,6 @@ async function togglePinned(item, event) {
     max-width: 256px;
 }
 .header {
-    color: #999999;
+    color: var(--vn-label-color);
 }
 </style>

src/components/LeftMenuItem.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+const { t, te } = useI18n();
 
 const props = defineProps({
     item: {
@@ -11,19 +11,25 @@ const props = defineProps({
     },
 });
 
-const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys
+const itemComputed = computed(() => {
+    const item = JSON.parse(JSON.stringify(props.item));
+    const [, , section] = item.title.split('.');
+
+    if (!te(item.title)) item.title = t(`globals.pageTitles.${section}`);
+    return item;
+});
 </script>
 <template>
-    <QItem active-class="text-primary" :to="{ name: item.name }" clickable v-ripple>
-        <QItemSection avatar v-if="item.icon">
-            <QIcon :name="item.icon" />
+    <QItem active-class="bg-hover" :to="{ name: itemComputed.name }" clickable v-ripple>
+        <QItemSection avatar v-if="itemComputed.icon">
+            <QIcon :name="itemComputed.icon" />
         </QItemSection>
-        <QItemSection avatar v-if="!item.icon">
+        <QItemSection avatar v-if="!itemComputed.icon">
             <QIcon name="disabled_by_default" />
         </QItemSection>
-        <QItemSection>{{ t(item.title) }}</QItemSection>
+        <QItemSection>{{ t(itemComputed.title) }}</QItemSection>
         <QItemSection side>
-            <slot name="side" :item="item" />
+            <slot name="side" :item="itemComputed" />
         </QItemSection>
     </QItem>
 </template>

src/components/NavBar.vue

@@ -10,12 +10,12 @@ import UserPanel from 'components/UserPanel.vue';
 import VnBreadcrumbs from './common/VnBreadcrumbs.vue';
 
 const { t } = useI18n();
-const session = useSession();
 const stateStore = useStateStore();
 const quasar = useQuasar();
 const state = useState();
 const user = state.getUser();
-const token = session.getToken();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
 const appName = 'Lilium';
 
 onMounted(() => stateStore.setMounted());
@@ -106,7 +106,7 @@ const pinnedModulesRef = ref();
     width: max-content;
 }
 .q-header {
-    background-color: var(--vn-dark);
+    background-color: var(--vn-section-color);
 }
 </style>
 <i18n>

src/components/TransferInvoiceForm.vue

@@ -0,0 +1,168 @@
+<script setup>
+import { ref, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'components/FetchData.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import FormPopup from './FormPopup.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const $props = defineProps({
+    invoiceOutData: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const { t } = useI18n();
+const router = useRouter();
+const { notify } = useNotify();
+
+const transferInvoiceParams = reactive({
+    id: $props.invoiceOutData?.id,
+    refFk: $props.invoiceOutData?.ref,
+});
+const closeButton = ref(null);
+const clientsOptions = ref([]);
+const rectificativeTypeOptions = ref([]);
+const siiTypeInvoiceOutsOptions = ref([]);
+const invoiceCorrectionTypesOptions = ref([]);
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+
+const transferInvoice = async () => {
+    try {
+        const { data } = await axios.post(
+            'InvoiceOuts/transferInvoice',
+            transferInvoiceParams
+        );
+        notify(t('Transferred invoice'), 'positive');
+        closeForm();
+        router.push('InvoiceOutSummary', { id: data.id });
+    } catch (err) {
+        console.error('Error transfering invoice', err);
+    }
+};
+</script>
+
+<template>
+    <FetchData
+        url="Clients"
+        @on-fetch="(data) => (clientsOptions = data)"
+        :filter="{ fields: ['id', 'name'], order: 'id', limit: 30 }"
+        auto-load
+    />
+    <FetchData
+        url="CplusRectificationTypes"
+        :filter="{ order: 'description' }"
+        @on-fetch="(data) => (rectificativeTypeOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="SiiTypeInvoiceOuts"
+        :filter="{ where: { code: { like: 'R%' } } }"
+        @on-fetch="(data) => (siiTypeInvoiceOutsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="InvoiceCorrectionTypes"
+        @on-fetch="(data) => (invoiceCorrectionTypesOptions = data)"
+        auto-load
+    />
+    <FormPopup
+        @on-submit="transferInvoice()"
+        :title="t('Transfer invoice')"
+        :custom-submit-button-label="t('Transfer client')"
+        :default-cancel-button="false"
+    >
+        <template #form-inputs>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Client')"
+                        :options="clientsOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="transferInvoiceParams.newClientFk"
+                        :required="true"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        #{{ scope.opt?.id }} -
+                                        {{ scope.opt?.name }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Rectificative type')"
+                        :options="rectificativeTypeOptions"
+                        hide-selected
+                        option-label="description"
+                        option-value="id"
+                        v-model="transferInvoiceParams.cplusRectificationTypeFk"
+                        :required="true"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Class')"
+                        :options="siiTypeInvoiceOutsOptions"
+                        hide-selected
+                        option-label="description"
+                        option-value="id"
+                        v-model="transferInvoiceParams.siiTypeInvoiceOutFk"
+                        :required="true"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ scope.opt?.code }} -
+                                        {{ scope.opt?.description }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Type')"
+                        :options="invoiceCorrectionTypesOptions"
+                        hide-selected
+                        option-label="description"
+                        option-value="id"
+                        v-model="transferInvoiceParams.invoiceCorrectionTypeFk"
+                        :required="true"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormPopup>
+</template>
+
+<i18n>
+es:
+    Transfer invoice: Transferir factura
+    Transfer client: Transferir cliente
+    Client: Cliente
+    Rectificative type: Tipo rectificativa
+    Class: Clase
+    Type: Tipo
+    Transferred invoice: Factura transferida
+</i18n>

src/components/UserPanel.vue

@@ -7,12 +7,16 @@ import axios from 'axios';
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import { localeEquivalence } from 'src/i18n/index';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'components/FetchData.vue';
 
 const state = useState();
 const session = useSession();
 const router = useRouter();
 const { t, locale } = useI18n();
 import { useClipboard } from 'src/composables/useClipboard';
+import { ref } from 'vue';
 const { copyText } = useClipboard();
 const userLocale = computed({
     get() {
@@ -44,7 +48,10 @@ const darkMode = computed({
 });
 
 const user = state.getUser();
-const token = session.getToken();
+const token = session.getTokenMultimedia();
+const warehousesData = ref();
+const companiesData = ref();
+const accountBankData = ref();
 
 onMounted(async () => {
     updatePreferences();
@@ -87,10 +94,28 @@ function copyUserToken() {
 </script>
 
 <template>
-    <QMenu anchor="bottom left">
+    <FetchData
+        url="Warehouses"
+        order="name"
+        @on-fetch="(data) => (warehousesData = data)"
+        auto-load
+    />
+    <FetchData
+        url="Companies"
+        order="name"
+        @on-fetch="(data) => (companiesData = data)"
+        auto-load
+    />
+    <FetchData
+        url="Accountings"
+        order="name"
+        @on-fetch="(data) => (accountBankData = data)"
+        auto-load
+    />
+    <QMenu anchor="bottom left" class="bg-vn-section-color">
         <div class="row no-wrap q-pa-md">
-            <div class="column panel">
-                <div class="text-h6 q-mb-md">
+            <div class="col column">
+                <div class="text-h6 q-ma-sm q-mb-none">
                     {{ t('components.userPanel.settings') }}
                 </div>
                 <QToggle
@@ -114,7 +139,7 @@ function copyUserToken() {
 
             <QSeparator vertical inset class="q-mx-lg" />
 
-            <div class="column items-center panel">
+            <div class="col column items-center q-mb-sm">
                 <QAvatar size="80px">
                     <QImg
                         :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
@@ -131,7 +156,6 @@ function copyUserToken() {
                 >
                     @{{ user.name }}
                 </div>
-
                 <QBtn
                     id="logout"
                     color="orange"
@@ -141,17 +165,63 @@ function copyUserToken() {
                     icon="logout"
                     @click="logout()"
                     v-close-popup
+                    dense
                 />
             </div>
         </div>
+        <QSeparator inset class="q-mx-lg" />
+        <div class="col q-gutter-xs q-pa-md">
+            <VnRow>
+                <VnSelectFilter
+                    :label="t('components.userPanel.localWarehouse')"
+                    v-model="user.localWarehouseFk"
+                    :options="warehousesData"
+                    option-label="name"
+                    option-value="id"
+                />
+                <VnSelectFilter
+                    :label="t('components.userPanel.localBank')"
+                    hide-selected
+                    v-model="user.localBankFk"
+                    :options="accountBankData"
+                    option-label="bank"
+                    option-value="id"
+                ></VnSelectFilter>
+            </VnRow>
+            <VnRow>
+                <VnSelectFilter
+                    :label="t('components.userPanel.localCompany')"
+                    hide-selected
+                    v-model="user.companyFk"
+                    :options="companiesData"
+                    option-label="code"
+                    option-value="id"
+                />
+                <VnSelectFilter
+                    :label="t('components.userPanel.userWarehouse')"
+                    hide-selected
+                    v-model="user.warehouseFk"
+                    :options="warehousesData"
+                    option-label="name"
+                    option-value="id"
+                />
+            </VnRow>
+            <VnRow>
+                <VnSelectFilter
+                    :label="t('components.userPanel.userCompany')"
+                    hide-selected
+                    v-model="user.companyFk"
+                    :options="companiesData"
+                    option-label="code"
+                    option-value="id"
+                    style="flex: 0"
+                />
+            </VnRow>
+        </div>
     </QMenu>
 </template>
 
 <style lang="scss" scoped>
-.panel {
-    width: 150px;
-}
-
 .copyText {
     &:hover {
         cursor: alias;

src/components/common/SendSmsDialog.vue

@@ -0,0 +1,156 @@
+<script setup>
+import {useDialogPluginComponent} from 'quasar';
+import {useI18n} from 'vue-i18n';
+import {computed, ref} from 'vue';
+import VnInput from 'components/common/VnInput.vue';
+import axios from 'axios';
+import useNotify from "composables/useNotify";
+
+const MESSAGE_MAX_LENGTH = 160;
+
+const {t} = useI18n();
+const {notify} = useNotify();
+const props = defineProps({
+    title: {
+        type: String,
+        required: true,
+    },
+    url: {
+        type: String,
+        required: true,
+    },
+    destination: {
+        type: String,
+        required: true,
+    },
+    destinationFk: {
+        type: String,
+        required: true,
+    },
+    data: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+
+const emit = defineEmits([...useDialogPluginComponent.emits, 'sent']);
+const {dialogRef, onDialogHide} = useDialogPluginComponent();
+
+const smsRules = [
+    (val) => (val && val.length > 0) || t("The message can't be empty"),
+    (val) =>
+        (val && new Blob([val]).size <= MESSAGE_MAX_LENGTH) ||
+        t("The message it's too long"),
+];
+
+const message = ref('');
+
+const charactersRemaining = computed(
+    () => MESSAGE_MAX_LENGTH - new Blob([message.value]).size
+);
+
+const charactersChipColor = computed(() => {
+    if (charactersRemaining.value < 0) {
+        return 'negative';
+    }
+    if (charactersRemaining.value <= 25) {
+        return 'warning';
+    }
+    return 'primary';
+});
+
+const onSubmit = async () => {
+    if (!props.destination) {
+        throw new Error(`The destination can't be empty`);
+    }
+
+    if (!message.value) {
+        throw new Error(`The message can't be empty`);
+    }
+
+    if (charactersRemaining.value < 0) {
+        throw new Error(`The message it's too long`);
+    }
+
+    const response = await axios.post(props.url, {
+        destination: props.destination,
+        destinationFk: props.destinationFk,
+        message: message.value,
+        ...props.data,
+    });
+
+    if (response.data) {
+        emit('sent', response.data);
+        notify('globals.smsSent', 'positive');
+    }
+    emit('ok', response.data);
+    emit('hide', response.data);
+};
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <QCard class="full-width dialog">
+            <QCardSection class="row">
+                <span v-if="title" class="text-h6">{{ title }}</span>
+                <QSpace />
+                <QBtn icon="close" flat round dense v-close-popup />
+            </QCardSection>
+            <QForm @submit="onSubmit">
+                <QCardSection>
+                    <VnInput
+                        v-model="message"
+                        type="textarea"
+                        :rules="smsRules"
+                        :label="t('Message')"
+                        :placeholder="t('Message')"
+                        :rows="5"
+                        required
+                        clearable
+                        no-error-icon
+                    >
+                        <template #append>
+                            <QIcon name="info">
+                                <QTooltip>
+                                    {{
+                                        t(
+                                            'Special characters like accents counts as a multiple'
+                                        )
+                                    }}
+                                </QTooltip>
+                            </QIcon>
+                        </template>
+                    </VnInput>
+                    <p class="q-mb-none q-mt-md">
+                        {{ t('Characters remaining') }}:
+                        <QChip :color="charactersChipColor">
+                            {{ charactersRemaining }}
+                        </QChip>
+                    </p>
+                </QCardSection>
+                <QCardActions align="right">
+                    <QBtn type="button" flat v-close-popup class="text-primary">
+                        {{ t('globals.cancel') }}
+                    </QBtn>
+                    <QBtn type="submit" color="primary">{{ t('Send') }}</QBtn>
+                </QCardActions>
+            </QForm>
+        </QCard>
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.dialog {
+    max-width: 450px;
+}
+</style>
+<i18n>
+es:
+    Message: Mensaje
+    Send: Enviar
+    Characters remaining: Carácteres restantes
+    Special characters like accents counts as a multiple: Carácteres especiales como los acentos cuentan como varios
+    The destination can't be empty: El destinatario no puede estar vacio
+    The message can't be empty: El mensaje no puede estar vacio
+    The message it's too long: El mensaje es demasiado largo
+</i18n>

src/components/common/VnBreadcrumbs.vue

@@ -5,16 +5,16 @@ import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useCamelCase } from 'src/composables/useCamelCase';
 
-const router = useRouter();
-const quasar = useQuasar();
-const { t } = useI18n();
+const { currentRoute } = useRouter();
+const { screen } = useQuasar();
+const { t, te } = useI18n();
 
 let matched = ref([]);
 let breadcrumbs = ref([]);
 let root = ref(null);
 
 watchEffect(() => {
-    matched.value = router.currentRoute.value.matched.filter(
+    matched.value = currentRoute.value.matched.filter(
         (matched) => Object.keys(matched.meta).length
     );
     breadcrumbs.value.length = 0;
@@ -34,13 +34,17 @@ function getBreadcrumb(param) {
         icon: param.meta.icon,
         path: param.path,
         root: root.value,
+        locale: t(`globals.pageTitles.${param.meta.title}`),
     };
 
-    if (quasar.screen.gt.sm) {
+    if (screen.gt.sm) {
         breadcrumb.name = param.name;
         breadcrumb.title = useCamelCase(param.meta.title);
     }
 
+    const moduleLocale = `${breadcrumb.root}.pageTitles.${breadcrumb.title}`;
+    if (te(moduleLocale)) breadcrumb.locale = t(moduleLocale);
+
     return breadcrumb;
 }
 </script>
@@ -50,7 +54,7 @@ function getBreadcrumb(param) {
             v-for="(breadcrumb, index) of breadcrumbs"
             :key="index"
             :icon="breadcrumb.icon"
-            :label="t(`${breadcrumb.root}.pageTitles.${breadcrumb.title}`)"
+            :label="breadcrumb.locale"
             :to="breadcrumb.path"
         />
     </QBreadcrumbs>
@@ -71,7 +75,7 @@ function getBreadcrumb(param) {
     }
     &--last,
     &__separator {
-        color: var(--vn-label);
+        color: var(--vn-label-color);
     }
 }
 @media (max-width: $breakpoint-md) {

src/components/common/VnDms.vue

@@ -27,6 +27,10 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
+    url: {
+        type: String,
+        default: null,
+    },
 });
 
 const warehouses = ref();
@@ -65,14 +69,15 @@ function mapperDms(data) {
 }
 
 function getUrl() {
+    if ($props.url) return $props.url;
     if ($props.formInitialData) return 'dms/' + $props.formInitialData.id + '/updateFile';
     return `${$props.model}/${route.params.id}/uploadFile`;
 }
 
 async function save() {
     const body = mapperDms(dms.value);
-    await axios.post(getUrl(), body[0], body[1]);
-    emit('onDataSaved', body[1].params);
+    const response = await axios.post(getUrl(), body[0], body[1]);
+    emit('onDataSaved', body[1].params, response);
 }
 
 function defaultData() {
@@ -193,9 +198,11 @@ function addDefaultData(data) {
 en:
     contentTypesInfo: Allowed file types {allowedContentTypes}
     EntryDmsDescription: Reference {reference}
+    SupplierDmsDescription: Reference {reference}
 es:
     Generate identifier for original file: Generar identificador para archivo original
     contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes}
     EntryDmsDescription: Referencia {reference}
+    SupplierDmsDescription: Referencia {reference}
 
 </i18n>

src/components/common/VnDmsList.vue

@@ -218,7 +218,6 @@ function parseDms(data) {
     />
     <QTable
         :columns="columns"
-        :pagination="{ rowsPerPage: 0 }"
         :rows="rows"
         class="full-width q-mt-md"
         hide-bottom
@@ -304,7 +303,7 @@ function parseDms(data) {
     row-gap: 20px;
 }
 .labelColor {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
 }
 </style>
 <i18n>

src/components/common/VnInput.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
@@ -17,7 +17,7 @@ const $props = defineProps({
 
 const { t } = useI18n();
 const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
-
+const vnInputRef = ref(null);
 const value = computed({
     get() {
         return $props.modelValue;
@@ -40,6 +40,14 @@ const styleAttrs = computed(() => {
 const onEnterPress = () => {
     emit('keyup.enter');
 };
+
+const focus = () => {
+    vnInputRef.value.focus();
+};
+
+defineExpose({
+    focus,
+});
 </script>
 
 <template>

src/components/common/VnLog.vue

@@ -403,7 +403,7 @@ setLogTree();
         auto-load
     />
     <div
-        class="column items-center logs origin-log"
+        class="column items-center logs origin-log q-mt-md"
         v-for="(originLog, originLogIndex) in logTree"
         :key="originLogIndex"
     >
@@ -819,7 +819,7 @@ setLogTree();
 </template>
 <style lang="scss" scoped>
 .q-card {
-    background-color: var(--vn-gray);
+    background-color: var(--vn-section-color);
 }
 .q-item {
     min-height: 0px;
@@ -836,7 +836,7 @@ setLogTree();
         max-width: 400px;
 
         & > .header {
-            color: $dark;
+            color: var(--vn-section-color);
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
@@ -916,7 +916,7 @@ setLogTree();
             font-style: italic;
         }
         .model-id {
-            color: var(--vn-label);
+            color: var(--vn-label-color);
             font-size: 0.9rem;
         }
         .q-btn {
@@ -942,7 +942,7 @@ setLogTree();
     }
     .change-info {
         overflow: hidden;
-        background-color: var(--vn-dark);
+        background-color: var(--vn-section-color);
         & > .date {
             overflow: hidden;
             white-space: nowrap;
@@ -981,7 +981,7 @@ setLogTree();
         position: relative;
         overflow: hidden;
         text-overflow: ellipsis;
-        background-color: var(--vn-gray);
+        background-color: var(--vn-section-color);
         white-space: nowrap;
         box-sizing: border-box;
         & > .q-icon {

src/components/common/VnSelectDialog.vue

@@ -59,6 +59,9 @@ const toggleForm = () => {
                 :name="actionIcon"
                 :size="actionIcon === 'add' ? 'xs' : 'sm'"
                 :class="['default-icon', { '--add-icon': actionIcon === 'add' }]"
+                :style="{
+                    'font-variation-settings': `'FILL' ${1}`,
+                }"
             >
                 <QTooltip v-if="tooltip">{{ tooltip }}</QTooltip>
             </QIcon>
@@ -79,7 +82,7 @@ const toggleForm = () => {
     border-radius: 50px;
 
     &.--add-icon {
-        color: var(--vn-text);
+        color: var(--vn-text-color);
         background-color: $primary;
     }
 }

src/components/common/VnSelectFilter.vue

@@ -51,8 +51,8 @@ const $props = defineProps({
         default: null,
     },
     limit: {
-        type: Number,
-        default: 30,
+        type: [Number, String],
+        default: '30',
     },
 });
 
@@ -151,7 +151,7 @@ watch(modelValue, (newValue) => {
         @on-fetch="(data) => setOptions(data)"
         :where="where || { [optionValue]: value }"
         :limit="limit"
-        :order-by="orderBy"
+        :sort-by="sortBy"
         :fields="fields"
     />
     <QSelect

src/components/common/VnTitle.vue

@@ -0,0 +1,25 @@
+<script setup>
+const $props = defineProps({
+    url: { type: String, default: null },
+    text: { type: String, default: null },
+    icon: { type: String, default: 'open_in_new' },
+});
+</script>
+<template>
+    <div class="titleBox">
+        <div class="header-link">
+            <a :href="$props.url" :class="$props.url ? 'link' : 'color-vn-text'">
+                {{ $props.text }}
+                <QIcon v-if="url" :name="$props.icon" />
+            </a>
+        </div>
+    </div>
+</template>
+<style scoped lang="scss">
+a {
+    font-size: large;
+}
+.titleBox {
+    padding-bottom: 2%;
+}
+</style>

src/components/ui/CardDescriptor.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { onMounted, useSlots, watch, computed, ref } from 'vue';
+import { onBeforeMount, useSlots, watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { useState } from 'src/composables/useState';
 
 const $props = defineProps({
     url: {
@@ -35,35 +36,37 @@ const $props = defineProps({
         default: null,
     },
 });
+
+const state = useState();
 const slots = useSlots();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
-const entity = computed(() => useArrayData($props.dataKey).store.data);
+const arrayData = useArrayData($props.dataKey || $props.module, {
+    url: $props.url,
+    filter: $props.filter,
+    skip: 0,
+});
+const { store } = arrayData;
+const entity = computed(() => store.data);
 const isLoading = ref(false);
 
 defineExpose({
     getData,
 });
-onMounted(async () => {
+onBeforeMount(async () => {
     await getData();
     watch(
         () => $props.url,
-        async (newUrl, lastUrl) => {
-            if (newUrl == lastUrl) return;
-            await getData();
-        }
+        async () => await getData()
     );
 });
 
 async function getData() {
-    const arrayData = useArrayData($props.dataKey, {
-        url: $props.url,
-        filter: $props.filter,
-        skip: 0,
-    });
+    store.url = $props.url;
     isLoading.value = true;
     try {
         const { data } = await arrayData.fetch({ append: false, updateRouter: false });
+        state.set($props.dataKey, data);
         emit('onFetch', data);
     } finally {
         isLoading.value = false;
@@ -154,7 +157,7 @@ const emit = defineEmits(['onFetch']);
             <div class="icons">
                 <slot name="icons" :entity="entity" />
             </div>
-            <div class="actions">
+            <div class="actions justify-center">
                 <slot name="actions" :entity="entity" />
             </div>
             <slot name="after" />
@@ -171,33 +174,34 @@ const emit = defineEmits(['onFetch']);
 
 <style lang="scss">
 .body {
-    background-color: var(--vn-gray);
+    background-color: var(--vn-section-color);
     .text-h5 {
+        font-size: 20px;
         padding-top: 5px;
-        padding-bottom: 5px;
+        padding-bottom: 0px;
     }
     .q-item {
         min-height: 20px;
 
         .link {
-            margin-left: 5px;
+            margin-left: 10px;
         }
     }
     .vn-label-value {
         display: flex;
-        padding: 2px 16px;
+        padding: 0px 16px;
         .label {
-            color: var(--vn-label);
-            font-size: 12px;
+            color: var(--vn-label-color);
+            font-size: 14px;
 
             &:not(:has(a))::after {
                 content: ':';
             }
         }
         .value {
-            color: var(--vn-text);
+            color: var(--vn-text-color);
             font-size: 14px;
-            margin-left: 12px;
+            margin-left: 4px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -215,18 +219,19 @@ const emit = defineEmits(['onFetch']);
     overflow: hidden;
     text-overflow: ellipsis;
     span {
-        color: $primary;
+        color: var(--vn-text-color);
         font-weight: bold;
     }
 }
 .subtitle {
-    color: var(--vn-text);
+    color: var(--vn-text-color);
     font-size: 16px;
-    margin-bottom: 15px;
+    margin-bottom: 2px;
 }
 .list-box {
     .q-item__label {
-        color: var(--vn-label);
+        color: var(--vn-label-color);
+        padding-bottom: 0%;
     }
 }
 .descriptor {
@@ -244,6 +249,7 @@ const emit = defineEmits(['onFetch']);
     }
     .actions {
         margin: 0 5px;
+        justify-content: center !important;
     }
 }
 </style>

src/components/ui/CardList.vue

@@ -61,7 +61,7 @@ const toggleCardCheck = (item) => {
 }
 
 .q-chip-color {
-    color: var(--vn-label);
+    color: var(--vn-label-color) !important;
 }
 
 .card-list-body {
@@ -75,7 +75,7 @@ const toggleCardCheck = (item) => {
         width: 50%;
         .label {
             width: 35%;
-            color: var(--vn-label);
+            color: var(--vn-label-color);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -117,7 +117,7 @@ const toggleCardCheck = (item) => {
     transition: background-color 0.2s;
 }
 .card:hover {
-    background-color: var(--vn-gray);
+    background-color: var(--vn-section-color);
 }
 .list-items {
     width: 75%;

src/components/ui/CardSummary.vue

@@ -1,12 +1,10 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue';
-import axios from 'axios';
+import { ref, computed, watch, onBeforeMount } from 'vue';
+import { useRoute } from 'vue-router';
 import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import { useArrayData } from 'src/composables/useArrayData';
 
-onMounted(() => fetch());
-
-const entity = ref();
 const props = defineProps({
     url: {
         type: String,
@@ -16,41 +14,67 @@ const props = defineProps({
         type: Object,
         default: null,
     },
+    entityId: {
+        type: Number,
+        default: null,
+    },
+    dataKey: {
+        type: String,
+        default: '',
+    },
 });
 const emit = defineEmits(['onFetch']);
+const route = useRoute();
+const isSummary = ref();
+const arrayData = useArrayData(props.dataKey || route.meta.moduleName, {
+    url: props.url,
+    filter: props.filter,
+    skip: 0,
+});
+const { store } = arrayData;
+const entity = computed(() => store.data);
+const isLoading = ref(false);
 
 defineExpose({
     entity,
     fetch,
 });
 
-async function fetch() {
-    const params = {};
-
-    if (props.filter) params.filter = JSON.stringify(props.filter);
-
-    const { data } = await axios.get(props.url, { params });
-    entity.value = data;
-
-    emit('onFetch', data);
-}
-
-watch(props, async () => {
-    entity.value = null;
-    fetch();
+onBeforeMount(async () => {
+    isSummary.value = String(route.path).endsWith('/summary');
+    await fetch();
+    watch(props, async () => await fetch());
 });
+
+async function fetch() {
+    store.url = props.url;
+    isLoading.value = true;
+    const { data } = await arrayData.fetch({ append: false, updateRouter: false });
+    emit('onFetch', data);
+    isLoading.value = false;
+}
 </script>
 
 <template>
     <div class="summary container">
         <QCard class="cardSummary">
-            <SkeletonSummary v-if="!entity" />
-            <template v-if="entity">
+            <SkeletonSummary v-if="!entity || isLoading" />
+            <template v-if="entity && !isLoading">
                 <div class="summaryHeader bg-primary q-pa-sm text-weight-bolder">
                     <slot name="header-left">
-                        <span></span>
+                        <router-link
+                            v-if="!isSummary && route.meta.moduleName"
+                            class="header link"
+                            :to="{
+                                name: `${route.meta.moduleName}Summary`,
+                                params: { id: entityId || entity.id },
+                            }"
+                        >
+                            <QIcon name="open_in_new" color="white" size="sm" />
+                        </router-link>
+                        <span v-else></span>
                     </slot>
-                    <slot name="header" :entity="entity">
+                    <slot name="header" :entity="entity" dense>
                         <VnLv :label="`${entity.id} -`" :value="entity.name" />
                     </slot>
                     <slot name="header-right">
@@ -73,7 +97,6 @@ watch(props, async () => {
 
 .cardSummary {
     width: 100%;
-
     .summaryHeader {
         text-align: center;
         font-size: 20px;
@@ -87,7 +110,7 @@ watch(props, async () => {
         justify-content: space-evenly;
         gap: 10px;
         padding: 10px;
-        background-color: var(--vn-gray);
+        background-color: var(--vn-section-color);
 
         > .q-card.vn-one {
             flex: 1;
@@ -104,17 +127,18 @@ watch(props, async () => {
 
         > .q-card {
             width: 100%;
-            background-color: var(--vn-gray);
+            background-color: var(--vn-section-color);
             padding: 7px;
             font-size: 16px;
             min-width: 275px;
+            box-shadow: none;
 
             .vn-label-value {
                 display: flex;
                 flex-direction: row;
                 margin-top: 2px;
                 .label {
-                    color: var(--vn-label);
+                    color: var(--vn-label-color);
                     width: 8em;
                     overflow: hidden;
                     white-space: nowrap;
@@ -124,7 +148,7 @@ watch(props, async () => {
                     flex-shrink: 0;
                 }
                 .value {
-                    color: var(--vn-text);
+                    color: var(--vn-text-color);
                     overflow: hidden;
                 }
             }
@@ -143,12 +167,12 @@ watch(props, async () => {
                 margin-bottom: 9px;
                 & .q-checkbox__label {
                     margin-left: 31px;
-                    color: var(--vn-text);
+                    color: var(--vn-text-color);
                 }
                 & .q-checkbox__inner {
                     position: absolute;
                     left: 0;
-                    color: var(--vn-label);
+                    color: var(--vn-label-color);
                 }
             }
         }

src/components/ui/VnAvatar.vue

@@ -10,8 +10,8 @@ const $props = defineProps({
     size: { type: String, default: null },
     title: { type: String, default: null },
 });
-const session = useSession();
-const token = session.getToken();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
 const { t } = useI18n();
 
 const title = computed(() => $props.title ?? t('globals.system'));

src/components/ui/VnFilterPanel.vue

@@ -164,7 +164,7 @@ function formatValue(value) {
 </script>
 
 <template>
-    <QForm @submit="search">
+    <QForm @submit="search" id="filterPanelForm">
         <QList dense>
             <QItem class="q-mt-xs">
                 <QItemSection top>

src/components/ui/VnLinkPhone.vue

@@ -15,7 +15,6 @@ const { t } = useI18n();
         color="primary"
         padding="none"
         :href="`sip:${props.phoneNumber}`"
-        :title="t('globals.microsip')"
         @click.stop
     />
 </template>

src/components/ui/VnPaginate.vue

@@ -44,7 +44,7 @@ const props = defineProps({
     },
     offset: {
         type: Number,
-        default: 500,
+        default: 0,
     },
     skeleton: {
         type: Boolean,
@@ -54,6 +54,10 @@ const props = defineProps({
         type: Function,
         default: null,
     },
+    disableInfiniteScroll: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const emit = defineEmits(['onFetch', 'onPaginate']);
@@ -122,10 +126,11 @@ async function paginate() {
     emit('onPaginate');
 }
 
-async function onLoad(...params) {
-    if (!store.data) return;
+async function onLoad(index, done) {
+    if (!store.data) {
+        return done();
+    }
 
-    const done = params[1];
     if (store.data.length === 0 || !props.url) return done(false);
 
     pagination.value.page = pagination.value.page + 1;
@@ -174,7 +179,8 @@ async function onLoad(...params) {
         v-if="store.data"
         @load="onLoad"
         :offset="offset"
-        class="full-width full-height"
+        :disable="disableInfiniteScroll || !arrayData.hasMoreData.value"
+        class="full-width"
         v-bind="$attrs"
     >
         <slot name="body" :rows="store.data"></slot>

src/components/ui/VnSearchbar.vue

@@ -1,11 +1,9 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
-
-import VnInput from 'src/components/common/VnInput.vue';
-
 import { useArrayData } from 'composables/useArrayData';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const quasar = useQuasar();
 
@@ -68,9 +66,8 @@ const props = defineProps({
 });
 
 const router = useRouter();
-const route = useRoute();
 const arrayData = useArrayData(props.dataKey, { ...props });
-const store = arrayData.store;
+const { store } = arrayData;
 const searchText = ref('');
 
 onMounted(() => {
@@ -92,23 +89,31 @@ async function search() {
     });
     if (!props.redirect) return;
 
-    if (props.customRouteRedirectName) {
-        router.push({
+    if (props.customRouteRedirectName)
+        return router.push({
             name: props.customRouteRedirectName,
             params: { id: searchText.value },
         });
-        return;
-    }
 
-    const { matched: matches } = route;
-    const { path } = matches[matches.length - 1];
-    const newRoute = path.replace(':id', searchText.value);
-    await router.push(newRoute);
+    const { matched: matches } = router.currentRoute.value;
+    const { path } = matches.at(-1);
+    const [, moduleName] = path.split('/');
+
+    if (!store.data.length || store.data.length > 1)
+        return router.push({ path: `/${moduleName}/list` });
+
+    const targetId = store.data[0].id;
+    let targetUrl;
+
+    if (path.endsWith('/list')) targetUrl = path.replace('/list', `/${targetId}/summary`);
+    else if (path.includes(':id')) targetUrl = path.replace(':id', targetId);
+
+    await router.push({ path: targetUrl });
 }
 </script>
 
 <template>
-    <QForm @submit="search">
+    <QForm @submit="search" id="searchbarForm">
         <VnInput
             id="searchbar"
             v-model="searchText"
@@ -118,7 +123,12 @@ async function search() {
             autofocus
         >
             <template #prepend>
-                <QIcon name="search" v-if="!quasar.platform.is.mobile" />
+                <QIcon
+                    v-if="!quasar.platform.is.mobile"
+                    class="cursor-pointer"
+                    name="search"
+                    @click="search"
+                />
             </template>
             <template #append>
                 <QIcon
@@ -158,7 +168,12 @@ async function search() {
 }
 #searchbar {
     .q-field--standout.q-field--highlighted .q-field__control {
-        background-color: var(--vn-text);
+        background-color: white;
+        color: black;
+        .q-field__native,
+        .q-icon {
+            color: black !important;
+        }
     }
 }
 </style>

src/components/ui/VnSubToolbar.vue

@@ -14,7 +14,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QToolbar class="bg-vn-dark justify-end sticky">
+    <QToolbar class="bg-vn-section-color justify-end sticky">
         <slot name="st-data">
             <div id="st-data"></div>
         </slot>
@@ -24,6 +24,11 @@ onUnmounted(() => {
         </slot>
     </QToolbar>
 </template>
+<style lang="scss">
+.q-toolbar {
+    background: var(--vn-section-color);
+}
+</style>
 <style lang="scss" scoped>
 .sticky {
     position: sticky;

src/composables/downloadFile.js

@@ -1,8 +1,8 @@
 import { useSession } from 'src/composables/useSession';
 import { getUrl } from './getUrl';
 
-const session = useSession();
-const token = session.getToken();
+const {getTokenMultimedia} = useSession();
+const token =  getTokenMultimedia();
 
 export async function downloadFile(dmsId) {
     let appUrl = await getUrl('', 'lilium');

src/composables/usePrintService.js

@@ -4,7 +4,7 @@ import { useQuasar } from 'quasar';
 
 export function usePrintService() {
     const quasar = useQuasar();
-    const { getToken } = useSession();
+    const { getTokenMultimedia } = useSession();
 
     function sendEmail(path, params) {
         return axios.post(path, params).then(() =>
@@ -19,7 +19,7 @@ export function usePrintService() {
     function openReport(path, params) {
         params = Object.assign(
             {
-                access_token: getToken(),
+                access_token: getTokenMultimedia(),
             },
             params
         );

src/composables/useSession.js

@@ -1,30 +1,56 @@
 import { useState } from './useState';
 import { useRole } from './useRole';
 import { useUserConfig } from './useUserConfig';
-
+import axios from 'axios';
+import useNotify from './useNotify';
 
 export function useSession() {
+    const { notify } = useNotify();
+
     function getToken() {
         const localToken = localStorage.getItem('token');
         const sessionToken = sessionStorage.getItem('token');
 
         return localToken || sessionToken || '';
     }
+    function getTokenMultimedia() {
+        const localTokenMultimedia = localStorage.getItem('token'); // Temporal
+        const sessionTokenMultimedia = sessionStorage.getItem('token'); // Temporal
+
+        return localTokenMultimedia || sessionTokenMultimedia || '';
+    }
 
     function setToken(data) {
         if (data.keepLogin) {
             localStorage.setItem('token', data.token);
+            localStorage.setItem('tokenMultimedia', data.tokenMultimedia);
         } else {
             sessionStorage.setItem('token', data.token);
+            sessionStorage.setItem('tokenMultimedia', data.tokenMultimedia);
         }
     }
-
-    function destroy() {
-        if (localStorage.getItem('token'))
-            localStorage.removeItem('token')
-
-        if (sessionStorage.getItem('token'))
-            sessionStorage.removeItem('token');
+    async function destroyToken(url, storage, key) {
+        if (storage.getItem(key)) {
+            try {
+                await axios.post(url, null, {
+                    headers: { Authorization: storage.getItem(key) },
+                });
+            } catch (error) {
+                notify('errors.statusUnauthorized', 'negative');
+            } finally {
+                storage.removeItem(key);
+            }
+        }
+    }
+    async function destroy() {
+        const tokens = {
+            tokenMultimedia: 'Accounts/logout',
+            token: 'VnUsers/logout',
+        };
+        for (const [key, url] of Object.entries(tokens)) {
+            await destroyToken(url, localStorage, key);
+            await destroyToken(url, sessionStorage, key);
+        }
 
         const { setUser } = useState();
 
@@ -37,8 +63,8 @@ export function useSession() {
         });
     }
 
-    async function login(token, keepLogin) {
-        setToken({ token, keepLogin });
+    async function login(token, tokenMultimedia, keepLogin) {
+        setToken({ token, tokenMultimedia, keepLogin });
 
         await useRole().fetch();
         await useUserConfig().fetch();
@@ -53,6 +79,7 @@ export function useSession() {
 
     return {
         getToken,
+        getTokenMultimedia,
         setToken,
         destroy,
         login,

src/composables/useVnConfirm.js

@@ -0,0 +1,23 @@
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import { useQuasar } from 'quasar';
+
+export function useVnConfirm() {
+    const quasar = useQuasar();
+
+    const openConfirmationModal = (title, message, promise, successFn) => {
+        quasar
+            .dialog({
+                component: VnConfirm,
+                componentProps: {
+                    title: title,
+                    message: message,
+                    promise: promise,
+                },
+            })
+            .onOk(async () => {
+                if (successFn) successFn();
+            });
+    };
+
+    return { openConfirmationModal };
+}

src/css/app.scss

@@ -2,29 +2,27 @@
 @import './icons.scss';
 
 body.body--light {
-    --fount-color: black;
-    --vn-sectionColor: #ffffff;
-    --vn-pageColor: #e0e0e0;
-    background-color: var(--vn-pageColor);
-    .q-header .q-toolbar {
-        color: var(--fount-color);
-    }
-    --vn-text: var(--fount-color);
-    --vn-gray: var(--vn-sectionColor);
-    --vn-label: #5f5f5f;
-    --vn-dark: var(--vn-sectionColor);
-    --vn-light-gray: #e7e3e3;
-}
+    --font-color: black;
+    --vn-section-color: #e0e0e0;
+    --vn-page-color: #ffffff;
+    --vn-text-color: var(--font-color);
+    --vn-label-color: #5f5f5f;
+    --vn-accent-color: #e7e3e3;
 
+    background-color: var(--vn-page-color);
+
+    .q-header .q-toolbar {
+        color: var(--font-color);
+    }
+}
 body.body--dark {
-    --vn-pageColor: #222;
-    --vn-SectionColor: #3c3b3b;
-    background-color: var(--vn-pageColor);
-    --vn-text: white;
-    --vn-gray: var(--vn-SectionColor);
-    --vn-label: #a8a8a8;
-    --vn-dark: var(--vn-SectionColor);
-    --vn-light-gray: #424242;
+    --vn-page-color: #222;
+    --vn-section-color: #3d3d3d;
+    --vn-text-color: white;
+    --vn-label-color: #a8a8a8;
+    --vn-accent-color: #424242;
+
+    background-color: var(--vn-page-color);
 }
 
 a {
@@ -39,6 +37,9 @@ a {
 .tx-color-link {
     color: $color-link !important;
 }
+.tx-color-font {
+    color: $color-link !important;
+}
 
 .header-link {
     color: $color-link !important;
@@ -59,28 +60,36 @@ a {
 // Removes chrome autofill background
 input:-webkit-autofill,
 select:-webkit-autofill {
-    color: var(--vn-text);
+    color: var(--vn-text-color);
     font-family: $typography-font-family;
-    -webkit-text-fill-color: var(--vn-text);
+    -webkit-text-fill-color: var(--vn-text-color);
     -webkit-background-clip: text !important;
     background-clip: text !important;
 }
 
-.bg-vn-dark {
-    background-color: var(--vn-dark);
+.bg-vn-section-color {
+    background-color: var(--vn-section-color);
+}
+.bg-hover {
+    background-color: #666666;
 }
 
 .color-vn-text {
-    color: var(--vn-text);
+    color: var(--vn-text-color);
 }
 
 .color-vn-white {
     color: $white;
 }
 
+.card-width {
+    max-width: 800px;
+    width: 100%;
+}
+
 .vn-card {
-    background-color: var(--vn-gray);
-    color: var(--vn-text);
+    background-color: var(--vn-section-color);
+    color: var(--vn-text-color);
     border-radius: 8px;
 }
 
@@ -90,11 +99,20 @@ select:-webkit-autofill {
 }
 
 .bg-vn-primary-row {
-    background-color: var(--vn-dark);
+    background-color: var(--vn-section-color);
 }
 
 .bg-vn-secondary-row {
-    background-color: var(--vn-light-gray);
+    background-color: var(--vn-accent-color);
+}
+
+.fill-icon {
+    font-variation-settings: 'FILL' 1;
+}
+
+.vn-table-separation-row {
+    height: 16px !important;
+    background-color: var(--vn-section-color) !important;
 }
 
 /* Estilo para el asterisco en campos requeridos */
@@ -102,6 +120,37 @@ select:-webkit-autofill {
     content: ' *';
 }
 
+.q-card,
+.q-table,
+.q-table__bottom,
+.q-drawer {
+    background-color: var(--vn-section-color);
+}
+
+.q-chip,
+.q-notification__message,
+.q-notification__icon {
+    color: black;
+}
+.q-notification--standard.bg-negative {
+    background-color: #fa3939 !important;
+}
+.q-notification--standard.bg-positive {
+    background-color: #a3d131 !important;
+}
+
+.q-tooltip {
+    background-color: var(--vn-page-color);
+    color: var(--font-color);
+    font-size: medium;
+}
+
+.q-card__actions {
+    justify-content: center;
+}
+
+/* q-notification row items-stretch q-notification--standard bg-negative text-white */
+
 input[type='number'] {
     -moz-appearance: textfield;
 }
@@ -110,4 +159,4 @@ input::-webkit-inner-spin-button {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-}
+}

src/css/quasar.variables.scss

@@ -14,15 +14,15 @@
 // Tip: to add new colors https://quasar.dev/style/color-palette/#adding-your-own-colors
 $primary: #ec8916;
 $secondary: $primary;
-$positive: #21ba45;
-$negative: #c10015;
-$info: #31ccec;
-$warning: #f2c037;
+$positive: #c8e484;
+$negative: #fb5252;
+$info: #84d0e2;
+$warning: #f4b974;
 // Pendiente de cuadrar con la base de datos
 $success: $positive;
 $alert: $negative;
 $white: #fff;
-$dark: #3c3b3b;
+$dark: #3d3d3d;
 // custom
 $color-link: #66bfff;
 $color-spacer-light: #a3a3a31f;

src/i18n/en/index.js

@@ -31,6 +31,7 @@ export default {
         close: 'Close',
         cancel: 'Cancel',
         confirm: 'Confirm',
+        assign: 'Assign',
         back: 'Back',
         yes: 'Yes',
         no: 'No',
@@ -47,7 +48,6 @@ export default {
         today: 'Today',
         yesterday: 'Yesterday',
         dateFormat: 'en-GB',
-        microsip: 'Open in MicroSIP',
         noSelectedRows: `You don't have any line selected`,
         downloadCSVSuccess: 'CSV downloaded successfully',
         reference: 'Reference',
@@ -73,6 +73,7 @@ export default {
         company: 'Company',
         fieldRequired: 'Field required',
         allowedFilesText: 'Allowed file types: { allowedContentTypes }',
+        smsSent: 'SMS sent',
         confirmDeletion: 'Confirm deletion',
         confirmDeletionMessage: 'Are you sure you want to delete this?',
         description: 'Description',
@@ -83,6 +84,13 @@ export default {
         selectFile: 'Select a file',
         copyClipboard: 'Copy on clipboard',
         salesPerson: 'SalesPerson',
+        code: 'Code',
+        pageTitles: {
+            summary: 'Summary',
+            basicData: 'Basic data',
+            log: 'Logs',
+            parkingList: 'Parkings list',
+        },
     },
     errors: {
         statusUnauthorized: 'Access denied',
@@ -490,6 +498,7 @@ export default {
             request: 'Request',
             weight: 'Weight',
             goTo: 'Go to',
+            summaryAmount: 'Summary',
         },
     },
     claim: {
@@ -590,6 +599,7 @@ export default {
             company: 'Company',
             dued: 'Due date',
             shortDued: 'Due date',
+            amount: 'Amount',
         },
         card: {
             issued: 'Issued',
@@ -623,7 +633,7 @@ export default {
                 fillDates: 'Invoice date and the max date should be filled',
                 invoiceDateLessThanMaxDate: 'Invoice date can not be less than max date',
                 invoiceWithFutureDate: 'Exists an invoice with a future date',
-                noTicketsToInvoice: 'There are not clients to invoice',
+                noTicketsToInvoice: 'There are not tickets to invoice',
                 criticalInvoiceError: 'Critical invoicing error, process stopped',
             },
             table: {
@@ -683,6 +693,19 @@ export default {
             recyclable: 'Recyclable',
         },
     },
+    parking: {
+        pickingOrder: 'Picking order',
+        sector: 'Sector',
+        row: 'Row',
+        column: 'Column',
+        pageTitles: {
+            parking: 'Parking',
+        },
+        searchBar: {
+            info: 'You can search by parking code',
+            label: 'Search parking...',
+        },
+    },
     invoiceIn: {
         pageTitles: {
             invoiceIns: 'Invoices In',
@@ -828,11 +851,15 @@ export default {
         pageTitles: {
             workers: 'Workers',
             list: 'List',
-            basicData: 'Basic data',
             summary: 'Summary',
-            notifications: 'Notifications',
             workerCreate: 'New worker',
             department: 'Department',
+            basicData: 'Basic data',
+            notes: 'Notes',
+            pda: 'PDA',
+            notifications: 'Notifications',
+            pbx: 'Private Branch Exchange',
+            log: 'Log',
         },
         list: {
             name: 'Name',
@@ -874,6 +901,13 @@ export default {
             subscribed: 'Subscribed to the notification',
             unsubscribed: 'Unsubscribed from the notification',
         },
+        pda: {
+            newPDA: 'New PDA',
+            currentPDA: 'Current PDA',
+            model: 'Model',
+            serialNumber: 'Serial number',
+            removePDA: 'Deallocate PDA',
+        },
         create: {
             name: 'Name',
             lastName: 'Last name',
@@ -939,6 +973,22 @@ export default {
             uncompleteTrays: 'There are incomplete trays',
         },
     },
+    'route/roadmap': {
+        pageTitles: {
+            roadmap: 'Roadmap',
+            summary: 'Summary',
+            basicData: 'Basic Data',
+            stops: 'Stops',
+        },
+    },
+    roadmap: {
+        pageTitles: {
+            roadmap: 'Roadmap',
+            summary: 'Summary',
+            basicData: 'Basic Data',
+            stops: 'Stops',
+        },
+    },
     route: {
         pageTitles: {
             routes: 'Routes',
@@ -947,6 +997,11 @@ export default {
             create: 'Create',
             basicData: 'Basic Data',
             summary: 'Summary',
+            RouteRoadmap: 'Roadmaps',
+            RouteRoadmapCreate: 'Create roadmap',
+            tickets: 'Tickets',
+            log: 'Log',
+            autonomous: 'Autonomous',
         },
         cmr: {
             list: {
@@ -981,6 +1036,7 @@ export default {
             addresses: 'Addresses',
             consumption: 'Consumption',
             agencyTerm: 'Agency agreement',
+            dms: 'File management',
         },
         list: {
             payMethod: 'Pay method',
@@ -1188,6 +1244,11 @@ export default {
             copyToken: 'Token copied to clipboard',
             settings: 'Settings',
             logOut: 'Log Out',
+            localWarehouse: 'Local warehouse',
+            localBank: 'Local bank',
+            localCompany: 'Local company',
+            userWarehouse: 'User warehouse',
+            userCompany: 'User company',
         },
         smartCard: {
             downloadFile: 'Download file',

src/i18n/es/index.js

@@ -31,6 +31,7 @@ export default {
         close: 'Cerrar',
         cancel: 'Cancelar',
         confirm: 'Confirmar',
+        assign: 'Asignar',
         back: 'Volver',
         yes: 'Si',
         no: 'No',
@@ -48,7 +49,6 @@ export default {
         yesterday: 'Ayer',
         dateFormat: 'es-ES',
         noSelectedRows: `No tienes ninguna línea seleccionada`,
-        microsip: 'Abrir en MicroSIP',
         downloadCSVSuccess: 'Descarga de CSV exitosa',
         reference: 'Referencia',
         agency: 'Agencia',
@@ -73,6 +73,7 @@ export default {
         company: 'Empresa',
         fieldRequired: 'Campo requerido',
         allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }',
+        smsSent: 'SMS enviado',
         confirmDeletion: 'Confirmar eliminación',
         confirmDeletionMessage: '¿Seguro que quieres eliminar?',
         description: 'Descripción',
@@ -83,6 +84,13 @@ export default {
         selectFile: 'Seleccione un fichero',
         copyClipboard: 'Copiar en portapapeles',
         salesPerson: 'Comercial',
+        code: 'Código',
+        pageTitles: {
+            summary: 'Resumen',
+            basicData: 'Datos básicos',
+            log: 'Historial',
+            parkingList: 'Listado de parkings',
+        },
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
@@ -309,8 +317,8 @@ export default {
             reference: 'Referencia',
             invoiceNumber: 'Núm. factura',
             ordered: 'Pedida',
-            confirmed: 'Confirmado',
-            booked: 'Asentado',
+            confirmed: 'Confirmada',
+            booked: 'Contabilizada',
             raid: 'Redada',
             excludedFromAvailable: 'Inventario',
             travelReference: 'Referencia',
@@ -489,6 +497,7 @@ export default {
             request: 'Petición de compra',
             weight: 'Peso',
             goTo: 'Ir a',
+            summaryAmount: 'Resumen',
         },
     },
     claim: {
@@ -590,6 +599,7 @@ export default {
             company: 'Empresa',
             dued: 'Fecha vencimineto',
             shortDued: 'F. vencimiento',
+            amount: 'Importe',
         },
         card: {
             issued: 'Fecha emisión',
@@ -625,7 +635,7 @@ export default {
                 invoiceDateLessThanMaxDate:
                     'La fecha de la factura no puede ser menor que la fecha máxima',
                 invoiceWithFutureDate: 'Existe una factura con una fecha futura',
-                noTicketsToInvoice: 'No hay clientes para facturar',
+                noTicketsToInvoice: 'No existen tickets para facturar',
                 criticalInvoiceError: 'Error crítico en la facturación, proceso detenido',
             },
             table: {
@@ -741,6 +751,18 @@ export default {
             recyclable: 'Reciclable',
         },
     },
+    parking: {
+        pickingOrder: 'Orden de recogida',
+        row: 'Fila',
+        column: 'Columna',
+        pageTitles: {
+            parking: 'Parking',
+        },
+        searchBar: {
+            info: 'Puedes buscar por código de parking',
+            label: 'Buscar parking...',
+        },
+    },
     invoiceIn: {
         pageTitles: {
             invoiceIns: 'Fact. recibidas',
@@ -828,11 +850,15 @@ export default {
         pageTitles: {
             workers: 'Trabajadores',
             list: 'Listado',
-            basicData: 'Datos básicos',
             summary: 'Resumen',
-            notifications: 'Notificaciones',
             workerCreate: 'Nuevo trabajador',
             department: 'Departamentos',
+            basicData: 'Datos básicos',
+            notes: 'Notas',
+            pda: 'PDA',
+            notifications: 'Notificaciones',
+            pbx: 'Centralita',
+            log: 'Historial',
         },
         list: {
             name: 'Nombre',
@@ -874,6 +900,13 @@ export default {
             subscribed: 'Se ha suscrito a la notificación',
             unsubscribed: 'Se ha dado de baja de la notificación',
         },
+        pda: {
+            newPDA: 'Nueva PDA',
+            currentPDA: 'PDA Actual',
+            model: 'Modelo',
+            serialNumber: 'Número de serie',
+            removePDA: 'Desasignar PDA',
+        },
         create: {
             name: 'Nombre',
             lastName: 'Apellido',
@@ -939,6 +972,22 @@ export default {
             uncompleteTrays: 'Hay bandejas sin completar',
         },
     },
+    'route/roadmap': {
+        pageTitles: {
+            roadmap: 'Troncales',
+            summary: 'Resumen',
+            basicData: 'Datos básicos',
+            stops: 'Paradas',
+        },
+    },
+    roadmap: {
+        pageTitles: {
+            roadmap: 'Troncales',
+            summary: 'Resumen',
+            basicData: 'Datos básicos',
+            stops: 'Paradas',
+        },
+    },
     route: {
         pageTitles: {
             routes: 'Rutas',
@@ -946,7 +995,12 @@ export default {
             RouteList: 'Listado',
             create: 'Crear',
             basicData: 'Datos básicos',
-            summary: 'Summary',
+            summary: 'Resumen',
+            RouteRoadmap: 'Troncales',
+            RouteRoadmapCreate: 'Crear troncal',
+            tickets: 'Tickets',
+            log: 'Historial',
+            autonomous: 'Autónomos',
         },
         cmr: {
             list: {
@@ -981,6 +1035,7 @@ export default {
             addresses: 'Direcciones',
             consumption: 'Consumo',
             agencyTerm: 'Acuerdo agencia',
+            dms: 'Gestión documental',
         },
         list: {
             payMethod: 'Método de pago',
@@ -1188,6 +1243,11 @@ export default {
             copyToken: 'Token copiado al portapapeles',
             settings: 'Configuración',
             logOut: 'Cerrar sesión',
+            localWarehouse: 'Almacén local',
+            localBank: 'Banco local',
+            localCompany: 'Empresa local',
+            userWarehouse: 'Almacén del usuario',
+            userCompany: 'Empresa del usuario',
         },
         smartCard: {
             downloadFile: 'Descargar archivo',

src/layouts/MainLayout.vue

@@ -11,5 +11,3 @@ const quasar = useQuasar();
         <QFooter v-if="quasar.platform.is.mobile"></QFooter>
     </QLayout>
 </template>
-
-<style lang="scss" scoped></style>

src/layouts/OutLayout.vue

@@ -40,7 +40,7 @@ const langs = ['en', 'es'];
 
 <template>
     <QLayout view="hHh LpR fFf">
-        <QHeader reveal class="bg-vn-dark">
+        <QHeader reveal class="bg-vn-section-color">
             <QToolbar class="justify-end">
                 <QBtn
                     id="switchLanguage"

src/pages/Claim/Card/ClaimAction.vue

@@ -291,8 +291,6 @@ async function importToNewRefundTicket() {
                 selection="multiple"
                 v-model:selected="selectedRows"
                 :grid="$q.screen.lt.md"
-                :pagination="{ rowsPerPage: 0 }"
-                :hide-bottom="true"
             >
                 <template #body-cell-ticket="{ value }">
                     <QTd align="center">

src/pages/Claim/Card/ClaimBasicData.vue

@@ -13,8 +13,8 @@ import { useSession } from 'src/composables/useSession';
 
 const route = useRoute();
 const { t } = useI18n();
-const session = useSession();
-const token = session.getToken();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
 
 const claimFilter = {
     fields: [

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -107,7 +107,11 @@ onMounted(async () => {
         <template #body="{ entity }">
             <VnLv v-if="entity.claimState" :label="t('claim.card.state')">
                 <template #value>
-                    <QBadge :color="stateColor(entity.claimState.code)" dense>
+                    <QBadge
+                        :color="stateColor(entity.claimState.code)"
+                        text-color="black"
+                        dense
+                    >
                         {{ entity.claimState.description }}
                     </QBadge>
                 </template>

src/pages/Claim/Card/ClaimDevelopment.vue

@@ -150,10 +150,8 @@ const columns = computed(() => [
             <QTable
                 :columns="columns"
                 :rows="rows"
-                :pagination="{ rowsPerPage: 0 }"
                 row-key="$index"
                 selection="multiple"
-                hide-pagination
                 v-model:selected="selected"
                 :grid="$q.screen.lt.md"
                 table-header-class="text-left"

src/pages/Claim/Card/ClaimLines.vue

@@ -161,7 +161,7 @@ function showImportDialog() {
         <div class="row q-gutter-md">
             <div>
                 {{ t('Amount') }}
-                <QChip :dense="$q.screen.lt.sm">
+                <QChip :dense="$q.screen.lt.sm" text-color="white">
                     {{ toCurrency(amount) }}
                 </QChip>
             </div>
@@ -201,11 +201,9 @@ function showImportDialog() {
                         :columns="columns"
                         :rows="rows"
                         :dense="$q.screen.lt.md"
-                        :pagination="{ rowsPerPage: 0 }"
                         row-key="id"
                         selection="multiple"
                         v-model:selected="selected"
-                        hide-pagination
                         :grid="$q.screen.lt.md"
                     >
                         <template #body-cell-claimed="{ row, value }">

src/pages/Claim/Card/ClaimLinesImport.vue

@@ -121,7 +121,6 @@ function cancel() {
                 class="my-sticky-header-table"
                 :columns="columns"
                 :rows="claimableSales"
-                :pagination="{ rowsPerPage: 10 }"
                 row-key="saleFk"
                 selection="multiple"
                 v-model:selected="selected"

src/pages/Claim/Card/ClaimPhoto.vue

@@ -11,8 +11,8 @@ import FetchData from 'components/FetchData.vue';
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
-const session = useSession();
-const token = session.getToken();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
 
 const claimId = computed(() => router.currentRoute.value.params.id);
 

src/pages/Claim/Card/ClaimSummary.vue

@@ -11,11 +11,12 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 const route = useRoute();
 const { t } = useI18n();
-const session = useSession();
-const token = session.getToken();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
 
 const $props = defineProps({
     id: {
@@ -172,6 +173,7 @@ function openDialog(dmsId) {
     <CardSummary
         ref="summary"
         :url="`Claims/${entityId}/getSummary`"
+        :entity-id="entityId"
         @on-fetch="getClaimDms"
     >
         <template #header="{ entity: { claim } }">
@@ -179,10 +181,10 @@ function openDialog(dmsId) {
         </template>
         <template #body="{ entity: { claim, salesClaimed, developments } }">
             <QCard class="vn-one">
-                <a class="header header-link" :href="`#/claim/${entityId}/basic-data`">
-                    {{ t('claim.pageTitles.basicData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/claim/${entityId}/basic-data`"
+                    :text="t('claim.pageTitles.basicData')"
+                />
                 <VnLv
                     :label="t('claim.summary.created')"
                     :value="toDate(claim.created)"
@@ -225,10 +227,10 @@ function openDialog(dmsId) {
                 />
             </QCard>
             <QCard class="vn-three">
-                <a class="header header-link" :href="`#/claim/${entityId}/notes`">
-                    {{ t('claim.summary.notes') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/claim/${entityId}/notes`"
+                    :text="t('claim.summary.notes')"
+                />
                 <ClaimNotes
                     :id="entityId"
                     :add-note="false"
@@ -237,10 +239,10 @@ function openDialog(dmsId) {
                 />
             </QCard>
             <QCard class="vn-two" v-if="salesClaimed.length > 0">
-                <a class="header header-link" :href="`#/claim/${entityId}/lines`">
-                    {{ t('claim.summary.details') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/claim/${entityId}/lines`"
+                    :text="t('claim.summary.details')"
+                />
                 <QTable
                     :columns="detailsColumns"
                     :rows="salesClaimed"
@@ -270,7 +272,7 @@ function openDialog(dmsId) {
                                 >
                                 <ItemDescriptorProxy
                                     v-if="col.name == 'description'"
-                                    :id="props.row.id"
+                                    :id="props.row.sale.itemFk"
                                     :sale-fk="props.row.saleFk"
                                 ></ItemDescriptorProxy>
                             </QTh>
@@ -279,11 +281,10 @@ function openDialog(dmsId) {
                 </QTable>
             </QCard>
             <QCard class="vn-two" v-if="developments.length > 0">
-                <a class="header header-link" :href="claimUrl + 'development'">
-                    {{ t('claim.summary.development') }}
-                    <QIcon name="open_in_new" />
-                </a>
-
+                <VnTitle
+                    :url="claimUrl + 'development'"
+                    :text="t('claim.summary.development')"
+                />
                 <QTable
                     :columns="developmentColumns"
                     :rows="developments"
@@ -302,10 +303,10 @@ function openDialog(dmsId) {
                 </QTable>
             </QCard>
             <QCard class="vn-max" v-if="claimDms.length > 0">
-                <a class="header header-link" :href="`#/claim/${entityId}/photos`">
-                    {{ t('claim.summary.photos') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/claim/${entityId}/photos`"
+                    :text="t('claim.summary.photos')"
+                />
                 <div class="container">
                     <div
                         class="multimedia-container"
@@ -345,10 +346,7 @@ function openDialog(dmsId) {
             </QCard>
 
             <QCard class="vn-max">
-                <a class="header header-link" :href="claimUrl + 'action'">
-                    {{ t('claim.summary.actions') }}
-                    <QIcon name="open_in_new" class="link" />
-                </a>
+                <VnTitle :url="claimUrl + 'action'" :text="t('claim.summary.actions')" />
                 <div id="slider-container" class="q-px-xl q-py-md">
                     <QSlider
                         v-model="claim.responsibility"

src/pages/Claim/ClaimList.vue

@@ -108,7 +108,11 @@ function navigate(event, id) {
                             />
                             <VnLv :label="t('claim.list.state')">
                                 <template #value>
-                                    <QBadge :color="stateColor(row.stateCode)" dense>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
                                         {{ row.stateDescription }}
                                     </QBadge>
                                 </template>
@@ -118,7 +122,6 @@ function navigate(event, id) {
                             <QBtn
                                 :label="t('globals.description')"
                                 @click.stop
-                                class="bg-vn-dark"
                                 outline
                                 style="margin-top: 15px"
                             >

src/pages/Customer/Card/CustomerBalance.vue

@@ -198,7 +198,6 @@ const updateCompanyId = (id) => {
 
     <QTable
         :columns="columns"
-        :pagination="{ rowsPerPage: 12 }"
         :rows="rows"
         class="full-width q-mt-md"
         row-key="id"

src/pages/Customer/Card/CustomerBasicData.vue

@@ -11,8 +11,8 @@ import VnInput from 'src/components/common/VnInput.vue';
 
 const route = useRoute();
 const { t } = useI18n();
-const session = useSession();
-const token = session.getToken();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
 
 const workers = ref([]);
 const workersCopy = ref([]);

src/pages/Customer/Card/CustomerConsignees.vue

@@ -150,14 +150,14 @@ const toCustomerConsigneeEdit = (consigneeId) => {
 
 <style lang="scss" scoped>
 .consignees-card {
-    border: 2px solid var(--vn-light-gray);
+    border: 2px solid var(--vn-accent-color);
     border-radius: 10px;
     padding: 10px;
     display: flex;
     cursor: pointer;
 
     &:hover {
-        background-color: var(--vn-light-gray);
+        background-color: var(--vn-accent-color);
     }
 }
 </style>

src/pages/Customer/Card/CustomerCredits.vue

@@ -97,13 +97,7 @@ const toCustomerCreditCreate = () => {
 
 <template>
     <QPage class="column items-center q-pa-md">
-        <QTable
-            :columns="columns"
-            :pagination="{ rowsPerPage: 12 }"
-            :rows="rows"
-            class="full-width q-mt-md"
-            row-key="id"
-        >
+        <QTable :columns="columns" :rows="rows" class="full-width q-mt-md" row-key="id">
             <template #body-cell="props">
                 <QTd :props="props">
                     <QTr :props="props" class="cursor-pointer">

src/pages/Customer/Card/CustomerGreuges.vue

@@ -140,7 +140,6 @@ const toCustomerGreugeCreate = () => {
 
         <QTable
             :columns="columns"
-            :pagination="{ rowsPerPage: 12 }"
             :rows="rows"
             class="full-width q-mt-md"
             row-key="id"
@@ -180,13 +179,13 @@ const toCustomerGreugeCreate = () => {
 
 <style lang="scss">
 .consignees-card {
-    border: 2px solid var(--vn-light-gray);
+    border: 2px solid var(--vn-accent-color);
     border-radius: 10px;
     padding: 10px;
 }
 
 .label-color {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
 }
 </style>
 

src/pages/Customer/Card/CustomerNotes.vue

@@ -85,12 +85,12 @@ const toCustomerNoteCreate = () => {
 
 <style lang="scss">
 .custom-border {
-    border: 2px solid var(--vn-light-gray);
+    border: 2px solid var(--vn-accent-color);
     border-radius: 10px;
     padding: 10px;
 }
 
 .label-color {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
 }
 </style>

src/pages/Customer/Card/CustomerRecoveries.vue

@@ -97,7 +97,6 @@ const toCustomerRecoverieCreate = () => {
     <QPage class="column items-center q-pa-md">
         <QTable
             :columns="columns"
-            :pagination="{ rowsPerPage: 12 }"
             :rows="rows"
             class="full-width q-mt-md"
             row-key="id"
@@ -137,13 +136,13 @@ const toCustomerRecoverieCreate = () => {
 
 <style lang="scss">
 .consignees-card {
-    border: 2px solid var(--vn-light-gray);
+    border: 2px solid var(--vn-accent-color);
     border-radius: 10px;
     padding: 10px;
 }
 
 .label-color {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
 }
 </style>
 

src/pages/Customer/Card/CustomerSummary.vue

@@ -7,6 +7,7 @@ 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';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -62,10 +63,10 @@ const creditWarning = computed(() => {
     <CardSummary ref="summary" :url="`Clients/${entityId}/summary`">
         <template #body="{ entity }">
             <QCard class="vn-one">
-                <a class="header header-link" :href="`#/customer/${entityId}/basic-data`">
-                    {{ t('customer.summary.basicData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/customer/${entityId}/basic-data`"
+                    :text="t('customer.summary.basicData')"
+                />
                 <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" />
@@ -96,13 +97,10 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a
-                    class="header header-link"
-                    :href="`#/customer/${entityId}/fiscal-data`"
-                >
-                    {{ t('customer.summary.fiscalAddress') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/customer/${entityId}/fiscal-data`"
+                    :text="t('customer.summary.fiscalAddress')"
+                />
                 <VnLv
                     :label="t('customer.summary.socialName')"
                     :value="entity.socialName"
@@ -124,14 +122,10 @@ const creditWarning = computed(() => {
                 <VnLv :label="t('customer.summary.street')" :value="entity.street" />
             </QCard>
             <QCard class="vn-one">
-                <a
-                    class="header header-link"
-                    :href="`#/customer/${entityId}/fiscal-data`"
-                    link
-                >
-                    {{ t('customer.summary.fiscalData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/customer/${entityId}/fiscal-data`"
+                    :text="t('customer.summary.fiscalData')"
+                />
                 <QCheckbox
                     :label="t('customer.summary.isEqualizated')"
                     v-model="entity.isEqualizated"
@@ -169,14 +163,10 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a
-                    class="header header-link"
-                    :href="`#/customer/${entityId}/billing-data`"
-                    link
-                >
-                    {{ t('customer.summary.billingData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/customer/${entityId}/billing-data`"
+                    :text="t('customer.summary.billingData')"
+                />
                 <VnLv
                     :label="t('customer.summary.payMethod')"
                     :value="entity.payMethod.name"
@@ -202,14 +192,10 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one" v-if="entity.defaultAddress">
-                <a
-                    class="header header-link"
-                    :href="`#/customer/${entityId}/consignees`"
-                    link
-                >
-                    {{ t('customer.summary.consignee') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/customer/${entityId}/consignees`"
+                    :text="t('customer.summary.consignee')"
+                />
                 <VnLv
                     :label="t('customer.summary.addressName')"
                     :value="entity.defaultAddress.nickname"
@@ -224,10 +210,10 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one" v-if="entity.account">
-                <a class="header header-link" :href="`#/customer/${entityId}/web-access`">
-                    {{ t('customer.summary.webAccess') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/customer/${entityId}/web-access`"
+                    :text="t('customer.summary.webAccess')"
+                />
                 <VnLv
                     :label="t('customer.summary.username')"
                     :value="entity.account.name"
@@ -239,9 +225,7 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one" v-if="entity.account">
-                <div class="header header-link">
-                    {{ t('customer.summary.businessData') }}
-                </div>
+                <VnTitle :text="t('customer.summary.businessData')" />
                 <VnLv
                     :label="t('customer.summary.totalGreuge')"
                     :value="toCurrency(entity.totalGreuge)"
@@ -266,14 +250,11 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one" v-if="entity.account">
-                <a
-                    class="header header-link"
-                    :href="`https://grafana.verdnatura.es/d/40buzE4Vk/comportamiento-pagos-clientes?orgId=1&var-clientFk=${entityId}`"
-                    link
-                >
-                    {{ t('customer.summary.financialData') }}
-                    <QIcon name="vn:grafana" />
-                </a>
+                <VnTitle
+                    :url="`https://grafana.verdnatura.es/d/40buzE4Vk/comportamiento-pagos-clientes?orgId=1&var-clientFk=${entityId}`"
+                    :text="t('customer.summary.financialData')"
+                    icon="vn:grafana"
+                />
                 <VnLv
                     :label="t('customer.summary.risk')"
                     :value="toCurrency(entity?.debt?.debt)"

src/pages/Customer/CustomerList.vue

@@ -84,7 +84,6 @@ const redirectToCreateView = () => {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn

src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue

@@ -30,16 +30,16 @@ const { t } = useI18n();
     border: 1px solid black;
 }
 .title_balance {
-    color: var(--vn-text);
+    color: var(--vn-text-color);
     margin-top: 0;
     margin-bottom: 0;
 }
 .key_balance {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
     margin-bottom: 0;
 }
 .value_balance {
-    color: var(--vn-text);
+    color: var(--vn-text-color);
     margin-bottom: 0;
 }
 </style>

src/pages/Customer/Defaulter/CustomerDefaulter.vue

@@ -207,7 +207,7 @@ const refreshData = () => {
         </QScrollArea>
     </QDrawer>
 
-    <VnSubToolbar class="bg-vn-dark">
+    <VnSubToolbar>
         <template #st-data>
             <CustomerBalanceDueTotal :amount="balanceDueTotal" />
             <div class="flex items-center q-ml-lg">
@@ -224,10 +224,8 @@ const refreshData = () => {
     <QPage class="column items-center q-pa-md">
         <QTable
             :columns="columns"
-            :pagination="{ rowsPerPage: 0 }"
             :rows="rows"
             class="full-width q-mt-md"
-            hide-bottom
             row-key="clientFk"
             selection="multiple"
             v-model:selected="selected"

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -510,7 +510,6 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
     <QPage class="column items-center q-pa-md">
         <QTable
             :columns="columns"
-            :pagination="{ rowsPerPage: 12 }"
             :rows="rows"
             class="full-width q-mt-md"
             row-key="id"

src/pages/Customer/Notifications/CustomerNotifications.vue

@@ -108,10 +108,8 @@ const selectCustomerId = (id) => {
     <QPage class="column items-center q-pa-md">
         <QTable
             :columns="columns"
-            :pagination="{ rowsPerPage: 0 }"
             :rows="rows"
             class="full-width q-mt-md"
-            hide-bottom
             row-key="id"
             selection="multiple"
             v-model:selected="selected"

src/pages/Customer/Payments/CustomerPayments.vue

@@ -151,10 +151,8 @@ function stateColor(row) {
                         :columns="columns"
                         :rows="rows"
                         row-key="id"
-                        :pagination="{ rowsPerPage: 0 }"
                         :grid="grid || $q.screen.lt.sm"
                         class="q-mt-xs custom-table"
-                        hide-pagination
                     >
                         <template #body-cell-actions="{ row }">
                             <QTd auto-width class="text-center">
@@ -196,7 +194,7 @@ function stateColor(row) {
                         </template>
                         <template #body-cell-state="{ row }">
                             <QTd auto-width class="text-center">
-                                <QBadge :color="stateColor(row)">
+                                <QBadge text-color="black" :color="stateColor(row)">
                                     {{
                                         row.isConfirmed
                                             ? t('Confirmed')
@@ -227,6 +225,7 @@ function stateColor(row) {
                                                                 v-if="col.name == 'state'"
                                                             >
                                                                 <QBadge
+                                                                    text-color="black"
                                                                     :color="
                                                                         stateColor(row)
                                                                     "

src/pages/Dashboard/DashboardMain.vue

@@ -21,7 +21,7 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
         :width="256"
         :breakpoint="1000"
     >
-        <QScrollArea class="fit text-grey-8">
+        <QScrollArea class="fit">
             <LeftMenu />
         </QScrollArea>
     </QDrawer>
@@ -67,6 +67,10 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
 </template>
 
 <style lang="scss" scoped>
+.left-menu {
+    color: var(--vn-font-color);
+}
+
 .flex-container {
     display: flex;
     flex-wrap: wrap;

src/pages/Department/Card/DepartmentSummary.vue

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
 import { getUrl } from 'src/composables/getUrl';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -36,13 +37,10 @@ onMounted(async () => {
         </template>
         <template #body="{ entity: department }">
             <QCard class="column">
-                <a
-                    class="header header-link"
-                    :href="`#/department/department/${entityId}/basic-data`"
-                >
-                    {{ t('Basic data') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="`#/department/department/${entityId}/basic-data`"
+                    :text="t('Basic data')"
+                />
                 <div class="full-width row wrap justify-between content-between">
                     <div class="column" style="min-width: 50%">
                         <VnLv

src/pages/Entry/Card/EntryBasicData.vue

@@ -61,6 +61,7 @@ const onFilterTravelSelected = (formData, id) => {
         :url-update="`Entries/${route.params.id}`"
         model="entry"
         auto-load
+        :clear-store-on-unmount="false"
     >
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">

src/pages/Entry/Card/EntryBuys.vue

@@ -43,7 +43,7 @@ const tableColumnComponents = computed(() => ({
     item: {
         component: QBtn,
         props: {
-            color: 'blue',
+            color: 'primary',
             flat: true,
         },
         event: () => ({}),
@@ -54,6 +54,7 @@ const tableColumnComponents = computed(() => ({
             type: 'number',
             min: 0,
             class: 'input-number',
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -67,6 +68,7 @@ const tableColumnComponents = computed(() => ({
             'use-input': true,
             'hide-selected': true,
             options: packagingsOptions.value,
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -76,6 +78,7 @@ const tableColumnComponents = computed(() => ({
             type: 'number',
             min: 0,
             class: 'input-number',
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -84,6 +87,7 @@ const tableColumnComponents = computed(() => ({
         props: {
             type: 'number',
             min: 0,
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -92,6 +96,7 @@ const tableColumnComponents = computed(() => ({
         props: {
             type: 'number',
             min: 0,
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -100,6 +105,7 @@ const tableColumnComponents = computed(() => ({
         props: {
             type: 'number',
             min: 0,
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -108,6 +114,7 @@ const tableColumnComponents = computed(() => ({
         props: {
             type: 'number',
             min: 0,
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -116,6 +123,7 @@ const tableColumnComponents = computed(() => ({
         props: {
             type: 'number',
             min: 0,
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -124,6 +132,7 @@ const tableColumnComponents = computed(() => ({
         props: {
             type: 'number',
             min: 0,
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -276,7 +285,7 @@ const toggleGroupingMode = async (buy, mode) => {
     }
 };
 
-const showLockIcon = (groupingMode, mode) => {
+const lockIconType = (groupingMode, mode) => {
     if (mode === 'packing') {
         return groupingMode === 2 ? 'lock' : 'lock_open';
     } else {
@@ -320,17 +329,21 @@ const showLockIcon = (groupingMode, mode) => {
                 :columns="entriesTableColumns"
                 selection="multiple"
                 row-key="id"
-                hide-bottom
                 class="full-width q-mt-md"
                 :grid="$q.screen.lt.md"
                 v-model:selected="rowsSelected"
+                :no-data-label="t('globals.noResults')"
             >
                 <template #body="props">
                     <QTr>
                         <QTd>
                             <QCheckbox v-model="props.selected" />
                         </QTd>
-                        <QTd v-for="col in props.cols" :key="col.name">
+                        <QTd
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            style="max-width: 100px"
+                        >
                             <component
                                 :is="tableColumnComponents[col.name].component"
                                 v-bind="tableColumnComponents[col.name].props"
@@ -350,7 +363,7 @@ const showLockIcon = (groupingMode, mode) => {
                                 >
                                     <QBtn
                                         :icon="
-                                            showLockIcon(props.row.groupingMode, col.name)
+                                            lockIconType(props.row.groupingMode, col.name)
                                         "
                                         @click="toggleGroupingMode(props.row, col.name)"
                                         class="cursor-pointer"
@@ -359,6 +372,16 @@ const showLockIcon = (groupingMode, mode) => {
                                         dense
                                         unelevated
                                         push
+                                        :style="{
+                                            'font-variation-settings': `'FILL' ${
+                                                lockIconType(
+                                                    props.row.groupingMode,
+                                                    col.name
+                                                ) === 'lock'
+                                                    ? 1
+                                                    : 0
+                                            }`,
+                                        }"
                                     />
                                 </template>
                                 <template
@@ -397,7 +420,7 @@ const showLockIcon = (groupingMode, mode) => {
                     </QTr>
                     <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
                     <QTr v-if="props.rowIndex !== rows.length - 1" class="separation-row">
-                        <QTd colspan="12" style="height: 24px" />
+                        <QTd colspan="12" class="vn-table-separation-row" />
                     </QTr>
                 </template>
                 <template #item="props">
@@ -449,7 +472,7 @@ const showLockIcon = (groupingMode, mode) => {
 
 <style lang="scss" scoped>
 .separation-row {
-    background-color: var(--vn-gray) !important;
+    background-color: var(--vn-section-color) !important;
 }
 .grid-style-transition {
     transition: transform 0.28s, background-color 0.28s;

src/pages/Entry/Card/EntryBuysImport.vue

@@ -238,12 +238,7 @@ const redirectToBuysView = () => {
                     </div>
                 </VnRow>
                 <VnRow>
-                    <QTable
-                        :columns="columns"
-                        :rows="importData.buys"
-                        :pagination="{ rowsPerPage: 0 }"
-                        hide-pagination
-                    >
+                    <QTable :columns="columns" :rows="importData.buys">
                         <template #body-cell-item="{ row, col }">
                             <QTd auto-width>
                                 <VnSelectDialog

src/pages/Entry/Card/EntryDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -7,6 +7,7 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 
+import { useState } from 'src/composables/useState';
 import { toDate } from 'src/filters';
 import { usePrintService } from 'composables/usePrintService';
 
@@ -25,6 +26,8 @@ const $props = defineProps({
 const route = useRoute();
 const { t } = useI18n();
 const { openReport } = usePrintService();
+const state = useState();
+const entryDescriptorRef = ref(null);
 
 const entryFilter = {
     include: [
@@ -71,6 +74,8 @@ const data = ref(useCardDescription());
 const setData = (entity) =>
     (data.value = useCardDescription(entity.supplier.nickname, entity.id));
 
+const currentEntry = computed(() => state.get('entry'));
+
 const getEntryRedirectionFilter = (entry) => {
     let entryTravel = entry && entry.travel;
 
@@ -95,17 +100,20 @@ const getEntryRedirectionFilter = (entry) => {
 const showEntryReport = () => {
     openReport(`Entries/${route.params.id}/entry-order-pdf`);
 };
+
+watch;
 </script>
 
 <template>
     <CardDescriptor
+        ref="entryDescriptorRef"
         module="Entry"
         :url="`Entries/${entityId}`"
         :filter="entryFilter"
         :title="data.title"
         :subtitle="data.subtitle"
         @on-fetch="setData"
-        data-key="entryData"
+        data-key="entry"
     >
         <template #menu="{ entity }">
             <QItem v-ripple clickable @click="showEntryReport(entity)">
@@ -126,17 +134,17 @@ const showEntryReport = () => {
                 :value="entity.travel?.warehouseOut?.name"
             />
         </template>
-        <template #icons="{ entity }">
+        <template #icons>
             <QCardActions class="q-gutter-x-md">
                 <QIcon
-                    v-if="entity.isExcludedFromAvailable"
+                    v-if="currentEntry.isExcludedFromAvailable"
                     name="vn:inventory"
                     color="primary"
                     size="xs"
                 >
                     <QTooltip>{{ t('Inventory entry') }}</QTooltip>
                 </QIcon>
-                <QIcon v-if="entity.isRaid" name="vn:web" color="primary" size="xs">
+                <QIcon v-if="currentEntry.isRaid" name="vn:net" color="primary" size="xs">
                     <QTooltip>{{ t('Virtual entry') }}</QTooltip>
                 </QIcon>
             </QCardActions>

src/pages/Entry/Card/EntrySummary.vue

@@ -5,9 +5,8 @@ import { useI18n } from 'vue-i18n';
 
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import VnRow from 'components/ui/VnRow.vue';
 import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
-import FetchedTags from 'components/ui/FetchedTags.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 import { toDate, toCurrency } from 'src/filters';
 import { getUrl } from 'src/composables/getUrl';
@@ -165,20 +164,27 @@ const fetchEntryBuys = async () => {
         @on-fetch="(data) => setEntryData(data)"
     >
         <template #header-left>
-            <a class="header-link" :href="entryUrl">
+            <router-link
+                v-if="route.name !== 'EntrySummary'"
+                :to="{ name: 'EntrySummary', params: { id: entityId } }"
+                class="header link"
+                :href="entryUrl"
+            >
                 <QIcon name="open_in_new" color="white" size="sm" />
-            </a>
+            </router-link>
         </template>
         <template #header>
             <span>{{ entry.id }} - {{ entry.supplier.nickname }}</span>
         </template>
-
         <template #body>
             <QCard class="vn-one">
-                <a class="header header-link" :href="`#/entry/${entityId}/basic-data`">
+                <router-link
+                    :to="{ name: 'EntryBasicData', params: { id: entityId } }"
+                    class="header header-link"
+                >
                     {{ t('globals.summary.basicData') }}
                     <QIcon name="open_in_new" />
-                </a>
+                </router-link>
 
                 <VnLv :label="t('entry.summary.commission')" :value="entry.commission" />
 
@@ -192,37 +198,15 @@ const fetchEntryBuys = async () => {
                     :label="t('entry.summary.invoiceNumber')"
                     :value="entry.invoiceNumber"
                 />
-                <QCheckbox
-                    :label="t('entry.summary.ordered')"
-                    v-model="entry.isOrdered"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('entry.summary.confirmed')"
-                    v-model="entry.isConfirmed"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('entry.summary.booked')"
-                    v-model="entry.isBooked"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('entry.summary.raid')"
-                    v-model="entry.isRaid"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('entry.summary.excludedFromAvailable')"
-                    v-model="entry.isExcludedFromAvailable"
-                    :disable="true"
-                />
             </QCard>
             <QCard class="vn-one">
-                <a class="header header-link" :href="entryUrl">
-                    {{ t('Travel data') }}
+                <router-link
+                    :to="{ name: 'EntryBasicData', params: { id: entityId } }"
+                    class="header header-link"
+                >
+                    {{ t('globals.summary.basicData') }}
                     <QIcon name="open_in_new" />
-                </a>
+                </router-link>
 
                 <VnLv :label="t('entry.summary.travelReference')">
                     <template #value>
@@ -250,7 +234,7 @@ const fetchEntryBuys = async () => {
 
                 <QCheckbox
                     :label="t('entry.summary.travelDelivered')"
-                    v-model="entry.isDelivered"
+                    v-model="entry.travel.isDelivered"
                     :disable="true"
                 />
                 <VnLv
@@ -265,7 +249,41 @@ const fetchEntryBuys = async () => {
 
                 <QCheckbox
                     :label="t('entry.summary.travelReceived')"
-                    v-model="entry.isReceived"
+                    v-model="entry.travel.isReceived"
+                    :disable="true"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <router-link
+                    :to="{ name: 'TravelSummary', params: { id: entry.travel.id } }"
+                    class="header header-link"
+                >
+                    {{ t('Travel data') }}
+                    <QIcon name="open_in_new" />
+                </router-link>
+                <QCheckbox
+                    :label="t('entry.summary.ordered')"
+                    v-model="entry.isOrdered"
+                    :disable="true"
+                />
+                <QCheckbox
+                    :label="t('entry.summary.confirmed')"
+                    v-model="entry.isConfirmed"
+                    :disable="true"
+                />
+                <QCheckbox
+                    :label="t('entry.summary.booked')"
+                    v-model="entry.isBooked"
+                    :disable="true"
+                />
+                <QCheckbox
+                    :label="t('entry.summary.raid')"
+                    v-model="entry.isRaid"
+                    :disable="true"
+                />
+                <QCheckbox
+                    :label="t('entry.summary.excludedFromAvailable')"
+                    v-model="entry.isExcludedFromAvailable"
                     :disable="true"
                 />
             </QCard>
@@ -277,9 +295,9 @@ const fetchEntryBuys = async () => {
                 <QTable
                     :rows="entryBuys"
                     :columns="entriesTableColumns"
-                    hide-bottom
                     row-key="index"
                     class="full-width q-mt-md"
+                    :no-data-label="t('globals.noResults')"
                 >
                     <template #body="{ cols, row, rowIndex }">
                         <QTr no-hover>
@@ -325,11 +343,8 @@ const fetchEntryBuys = async () => {
                             </QTd>
                         </QTr>
                         <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
-                        <QTr
-                            v-if="rowIndex !== entryBuys.length - 1"
-                            class="separation-row"
-                        >
-                            <QTd colspan="10" style="height: 24px" />
+                        <QTr v-if="rowIndex !== entryBuys.length - 1">
+                            <QTd colspan="10" class="vn-table-separation-row" />
                         </QTr>
                     </template>
                 </QTable>
@@ -340,11 +355,11 @@ const fetchEntryBuys = async () => {
 
 <style lang="scss" scoped>
 .separation-row {
-    background-color: var(--vn-gray) !important;
+    background-color: var(--vn-section-color) !important;
 }
 </style>
 
 <i18n>
 es:
-    Travel data: 'Datos envío'
+    Travel data: Datos envío
 </i18n>

src/pages/Entry/EntryLatestBuys.vue

@@ -20,8 +20,8 @@ import { dashIfEmpty } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
 
 const router = useRouter();
-const session = useSession();
-const token = session.getToken();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
 const stateStore = useStateStore();
 const { t } = useI18n();
 
@@ -636,7 +636,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         auto-load
         @on-fetch="(data) => (intrastatOptions = data)"
     />
-    <QToolbar class="bg-vn-dark justify-end">
+    <QToolbar class="justify-end">
         <div id="st-data">
             <TableVisibleColumns
                 :all-columns="allColumnNames"
@@ -659,7 +659,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             :columns="columns"
             selection="multiple"
             row-key="id"
-            :pagination="{ rowsPerPage: 0 }"
             class="full-width q-mt-md"
             :visible-columns="visibleColumns"
             v-model:selected="rowsSelected"

src/pages/Entry/EntryLatestBuysFilter.vue

@@ -412,7 +412,7 @@ const removeTag = (index, params, search) => {
         width: 60px;
         height: 60px;
         font-size: 1.4rem;
-        background-color: var(--vn-light-gray);
+        background-color: var(--vn-accent-color);
 
         &.active {
             background-color: $primary;

src/pages/Entry/EntryList.vue

@@ -74,7 +74,7 @@ onMounted(async () => {
                             </QIcon>
                             <QIcon
                                 v-if="row.isRaid"
-                                name="vn:web"
+                                name="vn:net"
                                 color="primary"
                                 size="xs"
                             >

src/pages/InvoiceIn/Card/InvoiceInCorrective.vue

@@ -111,7 +111,6 @@ const onSave = (data) => data.deletes && router.push(`/invoice-in/${invoiceId}/s
                 :rows="rows"
                 row-key="$index"
                 selection="single"
-                hide-pagination
                 :grid="$q.screen.lt.sm"
                 :pagination="{ rowsPerPage: 0 }"
             >

src/pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue

@@ -0,0 +1,15 @@
+<script setup>
+import InvoiceInDescriptor from "pages/InvoiceIn/Card/InvoiceInDescriptor.vue";
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+<template>
+    <QPopupProxy>
+        <InvoiceInDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>

src/pages/InvoiceIn/Card/InvoiceInDueDay.vue

@@ -99,7 +99,6 @@ async function insert() {
                 :columns="columns"
                 :rows="rows"
                 row-key="$index"
-                hide-pagination
                 :grid="$q.screen.lt.sm"
             >
                 <template #body-cell-duedate="{ row }">

src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue

@@ -134,7 +134,6 @@ function getTotal(type) {
                     :columns="columns"
                     :rows="rows"
                     row-key="$index"
-                    hide-pagination
                     :grid="$q.screen.lt.sm"
                 >
                     <template #body-cell="{ row, col }">

src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -6,6 +6,7 @@ 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';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 onMounted(async () => {
     salixUrl.value = await getUrl('');
@@ -198,7 +199,7 @@ function getLink(param) {
 
 <template>
     <CardSummary
-        ref="summary"
+        data-key="InvoiceInSummary"
         :url="`InvoiceIns/${entityId}/summary`"
         @on-fetch="(data) => setData(data)"
     >
@@ -209,10 +210,10 @@ function getLink(param) {
             <!--Basic Data-->
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header header-link" :href="getLink('basic-data')">
-                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" />
-                    </a>
+                    <VnTitle
+                        :url="getLink('basic-data')"
+                        :text="t('invoiceIn.pageTitles.basicData')"
+                    />
                 </QCardSection>
                 <VnLv
                     :label="t('invoiceIn.summary.supplier')"
@@ -233,10 +234,10 @@ function getLink(param) {
             </QCard>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header header-link" :href="getLink('basic-data')">
-                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" />
-                    </a>
+                    <VnTitle
+                        :url="getLink('basic-data')"
+                        :text="t('invoiceIn.pageTitles.basicData')"
+                    />
                 </QCardSection>
                 <VnLv
                     :ellipsis-value="false"
@@ -258,10 +259,10 @@ function getLink(param) {
             </QCard>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header header-link" :href="getLink('basic-data')">
-                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" />
-                    </a>
+                    <VnTitle
+                        :url="getLink('basic-data')"
+                        :text="t('invoiceIn.pageTitles.basicData')"
+                    />
                 </QCardSection>
                 <VnLv
                     :label="t('invoiceIn.summary.sage')"
@@ -283,10 +284,10 @@ function getLink(param) {
             </QCard>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header header-link" :href="getLink('basic-data')">
-                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" />
-                    </a>
+                    <VnTitle
+                        :url="getLink('basic-data')"
+                        :text="t('invoiceIn.pageTitles.basicData')"
+                    />
                 </QCardSection>
                 <QCardSection class="q-pa-none">
                     <div class="bordered q-px-sm q-mx-auto">
@@ -319,10 +320,7 @@ function getLink(param) {
             </QCard>
             <!--Vat-->
             <QCard v-if="invoiceIn.invoiceInTax.length">
-                <a class="header header-link" :href="getLink('vat')">
-                    {{ t('invoiceIn.card.vat') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle :url="getLink('vat')" :text="t('invoiceIn.card.vat')" />
                 <QTable
                     :columns="vatColumns"
                     :rows="invoiceIn.invoiceInTax"
@@ -352,16 +350,12 @@ function getLink(param) {
             </QCard>
             <!--Due Day-->
             <QCard v-if="invoiceIn.invoiceInDueDay.length">
-                <a class="header header-link" :href="getLink('due-day')">
-                    {{ t('invoiceIn.card.dueDay') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle :url="getLink('due-day')" :text="t('invoiceIn.card.dueDay')" />
                 <QTable
                     class="full-width"
                     :columns="dueDayColumns"
                     :rows="invoiceIn.invoiceInDueDay"
                     flat
-                    hide-pagination
                 >
                     <template #header="props">
                         <QTr :props="props" class="bg">
@@ -382,15 +376,14 @@ function getLink(param) {
             </QCard>
             <!--Intrastat-->
             <QCard v-if="invoiceIn.invoiceInIntrastat.length">
-                <a class="header header-link" :href="getLink('intrastat')">
-                    {{ t('invoiceIn.card.intrastat') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="getLink('intrastat')"
+                    :text="t('invoiceIn.card.intrastat')"
+                />
                 <QTable
                     :columns="intrastatColumns"
                     :rows="invoiceIn.invoiceInIntrastat"
                     flat
-                    hide-pagination
                 >
                     <template #header="props">
                         <QTr :props="props" class="bg">
@@ -415,10 +408,10 @@ function getLink(param) {
 </template>
 <style lang="scss" scoped>
 .bg {
-    background-color: var(--vn-light-gray);
+    background-color: var(--vn-accent-color);
 }
 .bordered {
-    border: 1px solid var(--vn-text);
+    border: 1px solid var(--vn-text-color);
     max-width: 18em;
 }
 </style>

src/pages/InvoiceIn/Card/InvoiceInVat.vue

@@ -184,10 +184,8 @@ async function addExpense() {
                 selection="multiple"
                 :columns="columns"
                 :rows="rows"
-                row-key="$index"
-                hide-pagination
+                row-key="$index"                
                 :grid="$q.screen.lt.sm"
-                :pagination="{ rowsPerPage: 0 }"
             >
                 <template #body-cell-expense="{ row, col }">
                     <QTd auto-width>

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -29,6 +29,7 @@ const suppliersRef = ref();
         order="nickname"
         limit="30"
         @on-fetch="(data) => (suppliers = data)"
+        auto-load
     />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
@@ -38,46 +39,6 @@ const suppliersRef = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <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="useCapitalize(t('params.correctedFk'))"
-                        v-model="params.correctedFk"
-                        is-outlined
-                    >
-                        <template #prepend>
-                            <QIcon name="attachment" size="sm" />
-                        </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
@@ -97,31 +58,31 @@ const suppliersRef = ref();
             <QItem>
                 <QItemSection>
                     <VnInput
-                        :label="t('params.fi')"
-                        v-model="params.fi"
+                        :label="t('params.supplierRef')"
+                        v-model="params.supplierRef"
                         is-outlined
                         lazy-rules
                     >
                         <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
+                            <QIcon name="vn:client" 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>
+                    <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>
                     <VnInput
@@ -152,6 +113,34 @@ const suppliersRef = ref();
                 </QItemSection>
             </QItem>
             <QExpansionItem :label="t('More options')" expand-separator>
+                <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
@@ -180,20 +169,6 @@ const suppliersRef = ref();
                         </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

src/pages/InvoiceIn/InvoiceInList.vue

@@ -112,7 +112,6 @@ function navigate(id) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                class="bg-vn-dark"
                                 outline
                                 type="reset"
                             />

src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue

@@ -2,13 +2,15 @@
 import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { toCurrency, toDate } from 'src/filters';
+
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import useCardDescription from 'src/composables/useCardDescription';
 import InvoiceOutDescriptorMenu from './InvoiceOutDescriptorMenu.vue';
 
+import useCardDescription from 'src/composables/useCardDescription';
+import { toCurrency, toDate } from 'src/filters';
+
 const $props = defineProps({
     id: {
         type: Number,
@@ -23,7 +25,6 @@ const { t } = useI18n();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-const descriptor = ref();
 
 const filter = {
     include: [
@@ -42,6 +43,8 @@ const filter = {
     ],
 };
 
+const descriptor = ref();
+
 function ticketFilter(invoice) {
     return JSON.stringify({ refFk: invoice.ref });
 }
@@ -61,7 +64,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
         data-key="invoiceOutData"
     >
         <template #menu="{ entity }">
-            <InvoiceOutDescriptorMenu :invoice-out="entity" />
+            <InvoiceOutDescriptorMenu :invoice-out-data="entity" />
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('invoiceOut.card.issued')" :value="toDate(entity.issued)" />

src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue

@@ -1,40 +1,260 @@
 <script setup>
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
 
+import TransferInvoiceForm from 'src/components/TransferInvoiceForm.vue';
+import SendEmailDialog from 'components/common/SendEmailDialog.vue';
+
+import useNotify from 'src/composables/useNotify';
+import { useSession } from 'src/composables/useSession';
+import { usePrintService } from 'composables/usePrintService';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import axios from 'axios';
+
+const $props = defineProps({
+    invoiceOutData: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const { notify } = useNotify();
+const router = useRouter();
+const session = useSession();
+const token = session.getToken();
 const { t } = useI18n();
+const { openReport, sendEmail } = usePrintService();
+const { openConfirmationModal } = useVnConfirm();
+const quasar = useQuasar();
+
+const transferInvoiceDialogRef = ref();
+const invoiceFormType = ref('pdf');
+const defaultEmailAddress = ref($props.invoiceOutData.client?.email);
+
+const showInvoicePdf = () => {
+    const url = `api/InvoiceOuts/${$props.invoiceOutData.id}/download?access_token=${token}`;
+    window.open(url, '_blank');
+};
+
+const showInvoiceCsv = () => {
+    openReport(`InvoiceOuts/${$props.invoiceOutData.ref}/invoice-csv`, {
+        recipientId: $props.invoiceOutData.client.id,
+    });
+};
+
+const showSendInvoiceDialog = (type) => {
+    invoiceFormType.value = type;
+    quasar.dialog({
+        component: SendEmailDialog,
+        componentProps: {
+            data: {
+                address: defaultEmailAddress.value,
+            },
+            promise: sendEmailInvoice,
+        },
+    });
+};
+
+const sendEmailInvoice = async ({ address }) => {
+    try {
+        if (!address) notify(`The email can't be empty`, 'negative');
+
+        if (invoiceFormType.value === 'pdf') {
+            return sendEmail(`InvoiceOuts/${$props.invoiceOutData.ref}/invoice-email`, {
+                recipientId: $props.invoiceOutData.client.id,
+                recipient: address,
+            });
+        } else {
+            return sendEmail(
+                `InvoiceOuts/${$props.invoiceOutData.ref}/invoice-csv-email`,
+                {
+                    recipientId: $props.invoiceOutData.client.id,
+                    recipient: address,
+                }
+            );
+        }
+    } catch (err) {
+        console.error('Error sending email', err);
+    }
+};
+
+const redirectToInvoiceOutList = () => {
+    router.push({ name: 'InvoiceOutList' });
+};
+
+const deleteInvoice = async () => {
+    try {
+        await axios.post(`InvoiceOuts/${$props.invoiceOutData.id}/delete`);
+        notify(t('InvoiceOut deleted'), 'positive');
+    } catch (err) {
+        console.error('Error deleting invoice out', err);
+    }
+};
+
+const bookInvoice = async () => {
+    try {
+        await axios.post(`InvoiceOuts/${$props.invoiceOutData.ref}/book`);
+        notify(t('InvoiceOut booked'), 'positive');
+    } catch (err) {
+        console.error('Error booking invoice out', err);
+    }
+};
+
+const generateInvoicePdf = async () => {
+    try {
+        await axios.post(`InvoiceOuts/${$props.invoiceOutData.id}/createPdf`);
+        notify(t('The invoice PDF document has been regenerated'), 'positive');
+    } catch (err) {
+        console.error('Error generating invoice out pdf', err);
+    }
+};
+
+const refundInvoice = async (withWarehouse) => {
+    try {
+        const params = { ref: $props.invoiceOutData.ref, withWarehouse: withWarehouse };
+        const { data } = await axios.post('InvoiceOuts/refund', params);
+        notify(
+            t('refundInvoiceSuccessMessage', {
+                refundTicket: data[0].id,
+            }),
+            'positive'
+        );
+    } catch (err) {
+        console.error('Error generating invoice out pdf', err);
+    }
+};
 </script>
 
 <template>
-    <QItem v-ripple clickable>
-        <QItemSection>{{ t('Transfer invoice to') }}</QItemSection>
+    <QItem v-ripple clickable @click="transferInvoiceDialogRef.show()">
+        <QItemSection>{{ t('Transfer invoice to...') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>{{ t('See invoice') }}</QItemSection>
+        <QItemSection>{{ t('Show invoice...') }}</QItemSection>
+        <QItemSection side>
+            <QIcon name="keyboard_arrow_right" />
+        </QItemSection>
+        <QMenu anchor="top end" self="top start">
+            <QList>
+                <QItem v-ripple clickable @click="showInvoicePdf()">
+                    <QItemSection>{{ t('As PDF') }}</QItemSection>
+                </QItem>
+                <QItem v-ripple clickable @click="showInvoiceCsv()">
+                    <QItemSection>{{ t('As CSV') }}</QItemSection>
+                </QItem>
+            </QList>
+        </QMenu>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>{{ t('Send invoice') }}</QItemSection>
+        <QItemSection>{{ t('Send invoice...') }}</QItemSection>
+        <QItemSection side>
+            <QIcon name="keyboard_arrow_right" />
+        </QItemSection>
+        <QMenu anchor="top end" self="top start">
+            <QList>
+                <QItem v-ripple clickable @click="showSendInvoiceDialog('pdf')">
+                    <QItemSection>{{ t('Send PDF') }}</QItemSection>
+                </QItem>
+                <QItem v-ripple clickable @click="showSendInvoiceDialog('csv')">
+                    <QItemSection>{{ t('Send CSV') }}</QItemSection>
+                </QItem>
+            </QList>
+        </QMenu>
     </QItem>
-    <QItem v-ripple clickable>
+    <QItem
+        v-ripple
+        clickable
+        @click="
+            openConfirmationModal(
+                t('Confirm deletion'),
+                t('Are you sure you want to delete this invoice?'),
+                deleteInvoice,
+                redirectToInvoiceOutList
+            )
+        "
+    >
         <QItemSection>{{ t('Delete invoice') }}</QItemSection>
     </QItem>
-    <QItem v-ripple clickable>
-        <QItemSection>{{ t('Post invoice') }}</QItemSection>
+    <QItem
+        v-ripple
+        clickable
+        @click="
+            openConfirmationModal(
+                '',
+                t('Are you sure you want to book this invoice?'),
+                bookInvoice
+            )
+        "
+    >
+        <QItemSection>{{ t('Book invoice') }}</QItemSection>
+    </QItem>
+    <QItem
+        v-ripple
+        clickable
+        @click="
+            openConfirmationModal(
+                t('Generate PDF invoice document'),
+                t('Are you sure you want to generate/regenerate the PDF invoice?'),
+                generateInvoicePdf
+            )
+        "
+    >
+        <QItemSection>{{ t('Generate PDF invoice') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>{{ t('Regenerate invoice PDF') }}</QItemSection>
-    </QItem>
-    <QItem v-ripple clickable>
-        <QItemSection>{{ t('Pass') }}</QItemSection>
+        <QItemSection>{{ t('Refund...') }}</QItemSection>
+        <QItemSection side>
+            <QIcon name="keyboard_arrow_right" />
+        </QItemSection>
+        <QMenu anchor="top end" self="top start">
+            <QList>
+                <QItem v-ripple clickable @click="refundInvoice(true)">
+                    <QItemSection>{{ t('With warehouse') }}</QItemSection>
+                </QItem>
+                <QItem v-ripple clickable @click="refundInvoice(false)">
+                    <QItemSection>{{ t('Without warehouse') }}</QItemSection>
+                </QItem>
+            </QList>
+        </QMenu>
+        <QTooltip>
+            {{ t('Create a single ticket with all the content of the current invoice') }}
+        </QTooltip>
     </QItem>
+
+    <QDialog ref="transferInvoiceDialogRef">
+        <TransferInvoiceForm :invoice-out-data="invoiceOutData" />
+    </QDialog>
 </template>
 
 <i18n>
 es:
-    Transfer invoice to: Transferir factura a
-    See invoice: Ver factura
-    Send invoice: Enviar factura
+    Transfer invoice to...: Transferir factura a...
+    Show invoice...: Ver factura...
+    Send invoice...: Enviar factura...
     Delete invoice: Eliminar factura
-    Post invoice: Asentar factura
-    Regenerate invoice PDF: Regenerar PDF factura
-    Pass: Abono
+    Book invoice: Asentar factura
+    Generate PDF invoice: Generar PDF factura
+    Refund...: Abono
+    As PDF: como PDF
+    As CSV: como CSV
+    Send PDF: Enviar PDF
+    Send CSV: Enviar CSV
+    With warehouse: Con almacén
+    Without warehouse: Sin almacén
+    InvoiceOut deleted: Factura eliminada
+    Confirm deletion: Confirmar eliminación
+    Are you sure you want to delete this invoice?: Estas seguro de eliminar esta factura?
+    Are you sure you want to book this invoice?: Estas seguro de querer asentar esta factura?
+    InvoiceOut booked: Factura asentada
+    Generate PDF invoice document: Generar PDF de la factura
+    Are you sure you want to generate/regenerate the PDF invoice?: ¿Seguro que quieres generar/regenerar el PDF de la factura?
+    The invoice PDF document has been regenerated: El documento PDF de la factura ha sido regenerado
+    Create a single ticket with all the content of the current invoice: Crear un ticket único con todo el contenido de la factura actual
+    refundInvoiceSuccessMessage: Se ha creado el siguiente ticket de abono {refundTicket}
+    The email can't be empty: El email no puede estar vacío
+
+en:
+    refundInvoiceSuccessMessage: The following refund ticket have been created {refundTicket}
 </i18n>

src/pages/InvoiceOut/Card/InvoiceOutSummary.vue

@@ -7,6 +7,9 @@ import { toCurrency, toDate } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { getUrl } from 'src/composables/getUrl';
+import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 onMounted(async () => {
     fetch();
@@ -67,44 +70,49 @@ const taxColumns = ref([
 const ticketsColumns = ref([
     {
         name: 'item',
-        label: 'invoiceOut.summary.ticketId',
+        label: t('invoiceOut.summary.ticketId'),
         field: (row) => row.id,
         sortable: true,
+        align: 'left',
     },
     {
         name: 'quantity',
-        label: 'invoiceOut.summary.nickname',
+        label: t('invoiceOut.summary.nickname'),
         field: (row) => row.nickname,
         sortable: true,
+        align: 'left',
     },
     {
         name: 'landed',
-        label: 'invoiceOut.summary.shipped',
+        label: t('invoiceOut.summary.shipped'),
         field: (row) => row.shipped,
         format: (value) => toDate(value),
         sortable: true,
+        align: 'left',
     },
     {
         name: 'landed',
-        label: 'invoiceOut.summary.totalWithVat',
+        label: t('invoiceOut.summary.totalWithVat'),
         field: (row) => row.totalWithVat,
         format: (value) => toCurrency(value),
         sortable: true,
+        align: 'left',
     },
 ]);
 </script>
 
 <template>
-    <CardSummary ref="summary" :url="`InvoiceOuts/${entityId}/summary`">
+    <CardSummary
+        ref="summary"
+        :url="`InvoiceOuts/${entityId}/summary`"
+        :entity-id="entityId"
+    >
         <template #header="{ entity: { invoiceOut } }">
             <div>{{ invoiceOut.ref }} - {{ invoiceOut.client?.socialName }}</div>
         </template>
         <template #body="{ entity: { invoiceOut } }">
             <QCard class="vn-one">
-                <a class="header header-link">
-                    {{ t('invoiceOut.pageTitles.basicData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle :text="t('invoiceOut.pageTitles.basicData')" />
                 <VnLv
                     :label="t('invoiceOut.summary.issued')"
                     :value="toDate(invoiceOut.issued)"
@@ -127,10 +135,7 @@ const ticketsColumns = ref([
                 />
             </QCard>
             <QCard class="vn-three">
-                <a class="header header-link">
-                    {{ t('invoiceOut.summary.taxBreakdown') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle :text="t('invoiceOut.summary.taxBreakdown')" />
                 <QTable :columns="taxColumns" :rows="invoiceOut.taxesBreakdown" flat>
                     <template #header="props">
                         <QTr :props="props">
@@ -142,17 +147,23 @@ const ticketsColumns = ref([
                 </QTable>
             </QCard>
             <QCard class="vn-three">
-                <a class="header header-link">
-                    {{ t('invoiceOut.summary.tickets') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle :text="t('invoiceOut.summary.tickets')" />
                 <QTable v-if="tickets" :columns="ticketsColumns" :rows="tickets" flat>
-                    <template #header="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                {{ t(col.label) }}
-                            </QTh>
-                        </QTr>
+                    <template #body-cell-item="{ value }">
+                        <QTd>
+                            <QBtn flat color="primary">
+                                {{ value }}
+                                <TicketDescriptorProxy :id="value" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-quantity="{ value, row }">
+                        <QTd>
+                            <QBtn flat color="primary" dense>
+                                {{ value }}
+                                <CustomerDescriptorProxy :id="row.id" />
+                            </QBtn>
+                        </QTd>
                     </template>
                 </QTable>
             </QCard>

src/pages/InvoiceOut/InvoiceOutGlobal.vue

@@ -21,6 +21,7 @@ const {
     nPdfs,
     totalPdfs,
     errors,
+    addresses,
 } = storeToRefs(invoiceOutGlobalStore);
 
 const selectedCustomerId = ref(null);
@@ -86,6 +87,14 @@ const selectCustomerId = (id) => {
     selectedCustomerId.value = id;
 };
 
+const statusText = computed(() => {
+    return status.value === 'invoicing'
+        ? `${t(`status.${status.value}`)} ${
+              addresses.value[getAddressNumber.value]?.clientId
+          }`
+        : t(`status.${status.value}`);
+});
+
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => {
     stateStore.rightDrawer = false;
@@ -103,7 +112,7 @@ onUnmounted(() => {
     <QPage class="column items-center q-pa-md">
         <QCard v-if="status" class="card">
             <QCardSection class="card-section">
-                <span class="text">{{ t(`status.${status}`) }}</span>
+                <span class="text">{{ statusText }}</span>
                 <span class="text">{{
                     t('invoiceOut.globalInvoices.statusCard.percentageText', {
                         getPercentage: getPercentage,
@@ -124,9 +133,7 @@ onUnmounted(() => {
             v-if="rows.length > 0"
             :rows="rows"
             :columns="columns"
-            hide-bottom
             row-key="id"
-            :pagination="{ rowsPerPage: 0 }"
             class="full-width q-mt-md"
         >
             <template #body-cell="props">
@@ -156,7 +163,7 @@ onUnmounted(() => {
     display: flex;
     justify-content: center;
     width: 100%;
-    background-color: var(--vn-dark);
+    background-color: var(--vn-section-color);
     padding: 16px;
 
     .card-section {
@@ -167,7 +174,7 @@ onUnmounted(() => {
 
     .text {
         font-size: 14px;
-        color: var(--vn-text);
+        color: var(--vn-text-color);
     }
 }
 

src/pages/InvoiceOut/InvoiceOutGlobalForm.vue

@@ -13,13 +13,8 @@ const { t } = useI18n();
 const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
 
 // invoiceOutGlobalStore state and getters
-const {
-    initialDataLoading,
-    formInitialData,
-
-    invoicing,
-    status,
-} = storeToRefs(invoiceOutGlobalStore);
+const { initialDataLoading, formInitialData, invoicing, status } =
+    storeToRefs(invoiceOutGlobalStore);
 
 // invoiceOutGlobalStore actions
 const { makeInvoice, setStatusValue } = invoiceOutGlobalStore;
@@ -32,13 +27,7 @@ const printersOptions = ref([]);
 
 const clientsOptions = ref([]);
 
-const formData = ref({
-    companyFk: null,
-    invoiceDate: null,
-    maxShipped: null,
-    clientId: null,
-    printer: null,
-});
+const formData = ref({});
 
 const optionsInitialData = computed(() => {
     return (

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -2,25 +2,32 @@
 import { onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { exportFile, useQuasar } from 'quasar';
-import { useStateStore } from 'stores/useStateStore';
+
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
-import { toDate, toCurrency } from 'src/filters/index';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import InvoiceOutFilter from './InvoiceOutFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
+import CreateManualInvoiceForm from 'src/components/CreateManualInvoiceForm.vue';
+
+import InvoiceOutFilter from './InvoiceOutFilter.vue';
+import { toDate, toCurrency } from 'src/filters/index';
+import { useStateStore } from 'stores/useStateStore';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { useSession } from 'src/composables/useSession';
 
 const { t } = useI18n();
-const selectedCards = ref(new Map());
-const quasar = useQuasar();
 const router = useRouter();
 const stateStore = useStateStore();
+const session = useSession();
+const tokenMultimedia = session.getTokenMultimedia();
 const { viewSummary } = useSummaryDialog();
 
+const manualInvoiceDialogRef = ref(null);
+const selectedCards = ref(new Map());
+
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
 
@@ -52,37 +59,37 @@ const toggleAllCards = (cardsData) => {
     }
 };
 
-const downloadCsv = () => {
-    if (selectedCards.value.size === 0) return;
-    const selectedCardsArray = Array.from(selectedCards.value.values());
-    let file;
-    for (var i = 0; i < selectedCardsArray.length; i++) {
-        if (i == 0) file += Object.keys(selectedCardsArray[i]).join(';') + '\n';
-        file +=
-            Object.keys(selectedCardsArray[i])
-                .map(function (key) {
-                    return selectedCardsArray[i][key];
-                })
-                .join(';') + '\n';
-    }
-    const status = exportFile('file.csv', file, {
-        encoding: 'windows-1252',
-        mimeType: 'text/csv;charset=windows-1252;',
-    });
-    if (status === true) {
-        quasar.notify({
-            message: t('fileAllowed'),
-            color: 'positive',
-            icon: 'check',
-        });
-    } else {
-        quasar.notify({
-            message: t('fileDenied'),
-            color: 'negative',
-            icon: 'warning',
-        });
+const openPdf = () => {
+    try {
+        if (selectedCards.value.size === 0) return;
+        const selectedCardsArray = Array.from(selectedCards.value.values());
+
+        if (selectedCards.value.size === 1) {
+            const [invoiceOut] = selectedCardsArray;
+            const url = `api/InvoiceOuts/${invoiceOut.id}/download?access_token=${tokenMultimedia}`;
+            window.open(url, '_blank');
+        } else {
+            const invoiceOutIdsArray = selectedCardsArray.map(
+                (invoiceOut) => invoiceOut.id
+            );
+            const invoiceOutIds = invoiceOutIdsArray.join(',');
+
+            const params = new URLSearchParams({
+                access_token: tokenMultimedia,
+                ids: invoiceOutIds,
+            });
+
+            const url = `api/InvoiceOuts/downloadZip?${params}`;
+            window.open(url, '_blank');
+        }
+    } catch (err) {
+        console.error('Error opening PDF');
     }
 };
+
+const openCreateInvoiceModal = () => {
+    manualInvoiceDialogRef.value.show();
+};
 </script>
 
 <template>
@@ -119,52 +126,21 @@ const downloadCsv = () => {
         <VnPaginate
             auto-load
             data-key="InvoiceOutList"
-            order="issued DESC, id DESC"
+            :order="['issued DESC', 'id DESC']"
             url="InvoiceOuts/filter"
         >
             <template #body="{ rows }">
-                <VnSubToolbar class="bg-vn-dark justify-end">
+                <VnSubToolbar class="justify-end">
                     <template #st-actions>
                         <QBtn
-                            @click="downloadCsv()"
-                            class="q-mr-xl"
+                            @click="openPdf()"
+                            class="q-mr-md"
                             color="primary"
+                            icon="cloud_download"
                             :disable="selectedCards.size === 0"
-                            :label="t('globals.download')"
-                        />
-                        <!-- <QBtnDropdown
-                            class="q-mr-xl"
-                            color="primary"
-                            :disable="!manageCheckboxes && arrayElements.length < 1"
-                            :label="t('globals.download')"
-                            v-else
                         >
-                            <QList>
-                                <QItem clickable v-close-popup @click="downloadCsv(rows)">
-                                    <QItemSection>
-                                        <QItemLabel>
-                                            {{
-                                                t('globals.allRows', {
-                                                    numberRows: rows.length,
-                                                })
-                                            }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-
-                                <QItem clickable v-close-popup @click="downloadCsv(rows)">
-                                    <QItemSection>
-                                        <QItemLabel>
-                                            {{
-                                                t('globals.selectRows', {
-                                                    numberRows: rows.length,
-                                                })
-                                            }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </QList>
-                        </QBtnDropdown> -->
+                            <QTooltip>{{ t('downloadPdf') }}</QTooltip>
+                        </QBtn>
                         <QCheckbox
                             left-label
                             :label="t('globals.markAll')"
@@ -189,18 +165,23 @@ const downloadCsv = () => {
                         >
                             <template #list-items>
                                 <VnLv
-                                    :label="t('invoiceOut.list.shortIssued')"
-                                    :title-label="t('invoiceOut.list.issued')"
+                                    :label="t('invoiceOut.list.issued')"
                                     :value="toDate(row.issued)"
                                 />
                                 <VnLv
                                     :label="t('invoiceOut.list.amount')"
                                     :value="toCurrency(row.amount)"
                                 />
-                                <VnLv
-                                    :label="t('invoiceOut.list.client')"
-                                    :value="row.clientSocialName"
-                                />
+                                <VnLv :label="t('invoiceOut.list.client')">
+                                    <template #value>
+                                        <span class="link" @click.stop>
+                                            {{ row?.clientSocialName }}
+                                            <CustomerDescriptorProxy
+                                                :id="row?.clientFk"
+                                            />
+                                        </span>
+                                    </template>
+                                </VnLv>
                                 <VnLv
                                     :label="t('invoiceOut.list.shortCreated')"
                                     :title-label="t('invoiceOut.list.created')"
@@ -217,13 +198,6 @@ const downloadCsv = () => {
                                 />
                             </template>
                             <template #actions>
-                                <QBtn
-                                    :label="t('components.smartCard.openCard')"
-                                    @click.stop="navigate(row.id)"
-                                    class="bg-vn-dark"
-                                    outline
-                                    type="reset"
-                                />
                                 <QBtn
                                     :label="t('components.smartCard.openSummary')"
                                     @click.stop="viewSummary(row.id, InvoiceOutSummary)"
@@ -237,6 +211,20 @@ const downloadCsv = () => {
                 </div>
             </template>
         </VnPaginate>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn fab icon="add" color="primary" @click="openCreateInvoiceModal()" />
+            <QTooltip>
+                {{ t('createInvoice') }}
+            </QTooltip>
+        </QPageSticky>
+
+        <QDialog
+            ref="manualInvoiceDialogRef"
+            transition-show="scale"
+            transition-hide="scale"
+        >
+            <CreateManualInvoiceForm />
+        </QDialog>
     </QPage>
 </template>
 
@@ -246,9 +234,13 @@ en:
     fileDenied: Browser denied file download...
     fileAllowed: Successful download of CSV file
     youCanSearchByInvoiceReference: You can search by invoice reference
+    downloadPdf: Download PDF
+    createInvoice: Make invoice
 es:
     searchInvoice: Buscar factura emitida
     fileDenied: El navegador denegó la descarga de archivos...
     fileAllowed: Descarga exitosa de archivo CSV
     youCanSearchByInvoiceReference: Puedes buscar por referencia de la factura
+    downloadPdf: Descargar PDF
+    createInvoice: Crear factura
 </i18n>

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -1,17 +1,17 @@
 <script setup>
-import { ref, computed, onBeforeMount } from 'vue';
+import { ref, computed, onBeforeMount, onMounted, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { QCheckbox, QBtn } from 'quasar';
 
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 
 import { toCurrency } from 'src/filters';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
 const stateStore = useStateStore();
@@ -45,78 +45,16 @@ onBeforeMount(async () => {
     stateStore.rightDrawer = true;
 });
 
+const componentIsRendered = ref(false);
+
+onMounted(() =>
+    nextTick(() => {
+        componentIsRendered.value = true;
+    })
+);
+
 const rows = computed(() => arrayData.value.store.data);
 
-const selectedCustomerId = ref(0);
-const selectedWorkerId = ref(0);
-
-const tableColumnComponents = {
-    company: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    country: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    clientId: {
-        component: QBtn,
-        props: () => ({ flat: true, color: 'blue' }),
-        event: (prop) => selectCustomerId(prop.value),
-    },
-    client: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    amount: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    base: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    ticketId: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    active: {
-        component: QCheckbox,
-        props: (prop) => ({
-            disable: true,
-            'model-value': Boolean(prop.value),
-        }),
-        event: () => {},
-    },
-    hasToInvoice: {
-        component: QCheckbox,
-        props: (prop) => ({
-            disable: true,
-            'model-value': Boolean(prop.value),
-        }),
-        event: () => {},
-    },
-    verifiedData: {
-        component: QCheckbox,
-        props: (prop) => ({
-            disable: true,
-            'model-value': Boolean(prop.value),
-        }),
-        event: () => {},
-    },
-    comercial: {
-        component: QBtn,
-        props: () => ({ flat: true, color: 'blue' }),
-        event: (prop) => selectWorkerId(prop.row.comercialId),
-    },
-};
-
 const columns = computed(() => [
     {
         label: t('invoiceOut.negativeBases.company'),
@@ -205,20 +143,17 @@ const downloadCSV = async () => {
         params
     );
 };
-
-const selectCustomerId = (id) => {
-    selectedCustomerId.value = id;
-};
-
-const selectWorkerId = (id) => {
-    selectedWorkerId.value = id;
-};
 </script>
 
 <template>
     <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-            <QBtn color="primary" icon-right="archive" no-caps @click="downloadCSV()" />
+        <Teleport
+            to="#st-actions"
+            v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
+        >
+            <QBtn color="primary" icon-right="download" no-caps @click="downloadCSV()">
+                <QTooltip>{{ t('Download as CSV') }}</QTooltip>
+            </QBtn>
         </Teleport>
     </template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
@@ -231,36 +166,40 @@ const selectWorkerId = (id) => {
         <QTable
             :columns="columns"
             :rows="rows"
-            hide-bottom
             row-key="clientId"
-            :pagination="{ rowsPerPage: 0 }"
             class="full-width q-mt-md"
         >
-            <template #body-cell="props">
-                <QTd :props="props">
-                    <component
-                        :is="tableColumnComponents[props.col.name].component"
-                        class="col-content"
-                        v-bind="tableColumnComponents[props.col.name].props(props)"
-                        @click="tableColumnComponents[props.col.name].event(props)"
-                    >
-                        <template
-                            v-if="
-                                props.col.name !== 'active' &&
-                                props.col.name !== 'hasToInvoice' &&
-                                props.col.name !== 'verifiedData'
-                            "
-                            >{{ props.value }}
-                        </template>
-                        <CustomerDescriptorProxy
-                            v-if="props.col.name === 'clientId'"
-                            :id="selectedCustomerId"
-                        />
-                        <VnUserLink
-                            v-if="props.col.name === 'comercial'"
-                            :worker-id="selectedWorkerId"
-                        />
-                    </component>
+            <template #body-cell-clientId="{ row }">
+                <QTd>
+                    <QBtn flat dense color="blue"> {{ row.clientId }}</QBtn>
+                    <CustomerDescriptorProxy :id="row.clientId" />
+                </QTd>
+            </template>
+            <template #body-cell-ticketId="{ row }">
+                <QTd>
+                    <QBtn flat dense color="blue"> {{ row.ticketFk }}</QBtn>
+                    <TicketDescriptorProxy :id="row.ticketFk" />
+                </QTd>
+            </template>
+            <template #body-cell-comercial="{ row }">
+                <QTd>
+                    <QBtn flat dense color="blue">{{ row.comercialName }}</QBtn>
+                    <WorkerDescriptorProxy :id="row.comercialId" />
+                </QTd>
+            </template>
+            <template #body-cell-active="{ row }">
+                <QTd>
+                    <QCheckbox :model-value="!!row.isActive" disable />
+                </QTd>
+            </template>
+            <template #body-cell-hasToInvoice="{ row }">
+                <QTd>
+                    <QCheckbox :model-value="!!row.hasToInvoice" disable />
+                </QTd>
+            </template>
+            <template #body-cell-verifiedData="{ row }">
+                <QTd>
+                    <QCheckbox :model-value="!!row.isTaxDataChecked" disable />
                 </QTd>
             </template>
         </QTable>
@@ -274,4 +213,7 @@ const selectWorkerId = (id) => {
 }
 </style>
 
-<i18n></i18n>
+<i18n>
+es:
+    Download as CSV: Descargar como CSV
+</i18n>