Merge branch 'dev' into feature/worker-log

2024-03-25 12:00:06 +00:00 · 2024-03-25 12:00:06 +00:00 · 5e089e616e
parent f6e3b3607a c335accffb
commit 5e089e616e
82 changed files with 568 additions and 371 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### Added

+-   (Tickets) => Se añade la opción de clonar ticket. #6951
+
 ### Changed

 ### Fixed
--- a/quasar.config.js
+++ b/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'],

        // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
        css: ['app.scss'],
--- a/src/boot/qformMixin.js
+++ b/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();
+                }
+            }
+    },
+};
--- a/src/boot/quasar.js
+++ b/src/boot/quasar.js
@ -0,0 +1,6 @@
+import { boot } from 'quasar/wrappers';
+import qFormMixin from './qformMixin';
+
+export default boot(({ app }) => {
+    app.mixin(qFormMixin);
+});
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@ -60,3 +60,6 @@ async function fetch(fetchFilter = {}) {
    }
 }
 </script>
+<template>
+    <template></template>
+</template>
--- a/src/components/LeftMenu.vue
+++ b/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>
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@ -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>
--- a/src/components/UserPanel.vue
+++ b/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() {
@ -45,6 +49,9 @@ const darkMode = computed({

 const user = state.getUser();
 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;
--- a/src/components/common/VnBreadcrumbs.vue
+++ b/src/components/common/VnBreadcrumbs.vue
@ -71,7 +71,7 @@ function getBreadcrumb(param) {
    }
    &--last,
    &__separator {
-        color: var(--vn-label);
+        color: var(--vn-label-color);
    }
 }
@media (max-width: $breakpoint-md) {
--- a/src/components/common/VnDmsList.vue
+++ b/src/components/common/VnDmsList.vue
@ -304,7 +304,7 @@ function parseDms(data) {
    row-gap: 20px;
 }
 .labelColor {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
 }
 </style>
 <i18n>
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@ -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 {
--- a/src/components/common/VnSelectDialog.vue
+++ b/src/components/common/VnSelectDialog.vue
@ -82,7 +82,7 @@ const toggleForm = () => {
    border-radius: 50px;

    &.--add-icon {
-        color: var(--vn-text);
+        color: var(--vn-text-color);
        background-color: $primary;
    }
 }
--- a/src/components/common/VnSelectFilter.vue
+++ b/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
--- a/src/components/common/VnTitle.vue
+++ b/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>
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@ -175,7 +175,7 @@ const emit = defineEmits(['onFetch']);

 <style lang="scss">
 .body {
-    background-color: var(--vn-gray);
+    background-color: var(--vn-section-color);
    .text-h5 {
        padding-top: 5px;
        padding-bottom: 5px;
@ -191,7 +191,7 @@ const emit = defineEmits(['onFetch']);
        display: flex;
        padding: 2px 16px;
        .label {
-            color: var(--vn-label);
+            color: var(--vn-label-color);
            font-size: 12px;

            &:not(:has(a))::after {
@ -199,7 +199,7 @@ const emit = defineEmits(['onFetch']);
            }
        }
        .value {
-            color: var(--vn-text);
+            color: var(--vn-text-color);
            font-size: 14px;
            margin-left: 12px;
            overflow: hidden;
@ -224,13 +224,13 @@ const emit = defineEmits(['onFetch']);
    }
 }
 .subtitle {
-    color: var(--vn-text);
+    color: var(--vn-text-color);
    font-size: 16px;
    margin-bottom: 15px;
 }
 .list-box {
    .q-item__label {
-        color: var(--vn-label);
+        color: var(--vn-label-color);
    }
 }
 .descriptor {
--- a/src/components/ui/CardList.vue
+++ b/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%;
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@ -107,7 +107,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;
@ -124,7 +124,7 @@ 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;
@ -134,7 +134,7 @@ watch(props, async () => {
                flex-direction: row;
                margin-top: 2px;
                .label {
-                    color: var(--vn-label);
+                    color: var(--vn-label-color);
                    width: 8em;
                    overflow: hidden;
                    white-space: nowrap;
@ -144,7 +144,7 @@ watch(props, async () => {
                    flex-shrink: 0;
                }
                .value {
-                    color: var(--vn-text);
+                    color: var(--vn-text-color);
                    overflow: hidden;
                }
            }
@ -163,12 +163,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);
                }
            }
        }
--- a/src/components/ui/VnFilterPanel.vue
+++ b/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>
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@ -108,7 +108,7 @@ async function search() {
 </script>

 <template>
-    <QForm @submit="search">
+    <QForm @submit="search" id="searchbarForm">
        <VnInput
            id="searchbar"
            v-model="searchText"
@ -163,7 +163,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>
--- a/src/components/ui/VnSubToolbar.vue
+++ b/src/components/ui/VnSubToolbar.vue
@ -14,7 +14,7 @@ onUnmounted(() => {
 </script>

 <template>
-    <QToolbar class="bg-vn-dark justify-end sticky">
+    <QToolbar class="justify-end sticky">
        <slot name="st-data">
            <div id="st-data"></div>
        </slot>
--- a/src/css/app.scss
+++ b/src/css/app.scss
@ -2,29 +2,33 @@
@import './icons.scss';

 body.body--light {
-    --fount-color: black;
-    --vn-sectionColor: #ffffff;
-    --vn-pageColor: #e0e0e0;
-    background-color: var(--vn-pageColor);
+    --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(--fount-color);
+        color: var(--font-color);
+    }
+    .q-card,
+    .q-table,
+    .q-table__bottom,
+    .q-drawer {
+        background-color: var(--vn-section-color);
    }
-    --vn-text: var(--fount-color);
-    --vn-gray: var(--vn-sectionColor);
-    --vn-label: #5f5f5f;
-    --vn-dark: var(--vn-sectionColor);
-    --vn-light-gray: #e7e3e3;
 }

 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-section-color: #403c3c;
+    --vn-text-color: white;
+    --vn-label-color: #a8a8a8;
+    --vn-accent-color: #424242;
+
+    background-color: #222;
 }

 a {
@ -39,6 +43,9 @@ a {
 .tx-color-link {
    color: $color-link !important;
 }
+.tx-color-font {
+    color: $color-link !important;
+}

 .header-link {
    color: $color-link !important;
@ -59,19 +66,19 @@ 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);
 }

 .color-vn-text {
-    color: var(--vn-text);
+    color: var(--vn-text-color);
 }

 .color-vn-white {
@ -79,8 +86,8 @@ select:-webkit-autofill {
 }

 .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 +97,11 @@ 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 {
@ -103,7 +110,7 @@ select:-webkit-autofill {

 .vn-table-separation-row {
    height: 16px !important;
-    background-color: var(--vn-gray) !important;
+    background-color: var(--vn-section-color) !important;
 }

 /* Estilo para el asterisco en campos requeridos */
@ -111,6 +118,10 @@ select:-webkit-autofill {
    content: ' *';
 }

+.q-chip {
+    color: black;
+}
+
 input[type='number'] {
    -moz-appearance: textfield;
 }
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@ -14,10 +14,10 @@
 // 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;
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@ -956,7 +956,7 @@ export default {
            roadmap: 'Roadmap',
            summary: 'Summary',
            basicData: 'Basic Data',
-            stops: 'Stops'
+            stops: 'Stops',
        },
    },
    roadmap: {
@ -964,7 +964,7 @@ export default {
            roadmap: 'Roadmap',
            summary: 'Summary',
            basicData: 'Basic Data',
-            stops: 'Stops'
+            stops: 'Stops',
        },
    },
    route: {
@ -1204,6 +1204,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',
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@ -956,7 +956,7 @@ export default {
            roadmap: 'Troncales',
            summary: 'Resumen',
            basicData: 'Datos básicos',
-            stops: 'Paradas'
+            stops: 'Paradas',
        },
    },
    roadmap: {
@ -964,7 +964,7 @@ export default {
            roadmap: 'Troncales',
            summary: 'Resumen',
            basicData: 'Datos básicos',
-            stops: 'Paradas'
+            stops: 'Paradas',
        },
    },
    route: {
@ -1204,6 +1204,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',
--- a/src/layouts/MainLayout.vue
+++ b/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>
--- a/src/layouts/OutLayout.vue
+++ b/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"
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/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>
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/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>
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@ -11,6 +11,7 @@ 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();
@ -180,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)"
@ -226,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"
@ -238,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"
@ -280,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"
@ -303,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"
@ -346,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"
--- a/src/pages/Claim/ClaimList.vue
+++ b/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"
                            >
--- a/src/pages/Customer/Card/CustomerConsignees.vue
+++ b/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>
--- a/src/pages/Customer/Card/CustomerGreuges.vue
+++ b/src/pages/Customer/Card/CustomerGreuges.vue
@ -180,13 +180,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>

--- a/src/pages/Customer/Card/CustomerNotes.vue
+++ b/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>
--- a/src/pages/Customer/Card/CustomerRecoveries.vue
+++ b/src/pages/Customer/Card/CustomerRecoveries.vue
@ -137,13 +137,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>

--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/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)"
--- a/src/pages/Customer/CustomerList.vue
+++ b/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
--- a/src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue
+++ b/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>
--- a/src/pages/Customer/Defaulter/CustomerDefaulter.vue
+++ b/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">
--- a/src/pages/Customer/Payments/CustomerPayments.vue
+++ b/src/pages/Customer/Payments/CustomerPayments.vue
@ -196,7 +196,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 +227,7 @@ function stateColor(row) {
                                                                v-if="col.name == 'state'"
                                                            >
                                                                <QBadge
+                                                                    text-color="black"
                                                                    :color="
                                                                        stateColor(row)
                                                                    "
--- a/src/pages/Dashboard/DashboardMain.vue
+++ b/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;
--- a/src/pages/Department/Card/DepartmentSummary.vue
+++ b/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
--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@ -471,6 +471,9 @@ const lockIconType = (groupingMode, mode) => {
 </template>

 <style lang="scss" scoped>
+.separation-row {
+    background-color: var(--vn-section-color) !important;
+}
 .grid-style-transition {
    transition: transform 0.28s, background-color 0.28s;
 }
--- a/src/pages/Entry/Card/EntrySummary.vue
+++ b/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';
@ -354,6 +353,12 @@ const fetchEntryBuys = async () => {
    </CardSummary>
 </template>

+<style lang="scss" scoped>
+.separation-row {
+    background-color: var(--vn-section-color) !important;
+}
+</style>
+
 <i18n>
 es:
    Travel data: Datos envío
--- a/src/pages/Entry/EntryLatestBuys.vue
+++ b/src/pages/Entry/EntryLatestBuys.vue
@ -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"
--- a/src/pages/Entry/EntryLatestBuysFilter.vue
+++ b/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;
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/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('');
@ -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,10 +350,7 @@ 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"
@ -382,10 +377,10 @@ 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"
@ -415,10 +410,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>
--- a/src/pages/InvoiceIn/InvoiceInList.vue
+++ b/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"
                            />
--- a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
@ -9,6 +9,7 @@ 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();
@ -111,10 +112,7 @@ const ticketsColumns = ref([
        </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)"
@ -137,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">
@ -152,10 +147,7 @@ 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 #body-cell-item="{ value }">
                        <QTd>
--- a/src/pages/InvoiceOut/InvoiceOutGlobal.vue
+++ b/src/pages/InvoiceOut/InvoiceOutGlobal.vue
@ -165,7 +165,7 @@ onUnmounted(() => {
    display: flex;
    justify-content: center;
    width: 100%;
-    background-color: var(--vn-dark);
+    background-color: var(--vn-section-color);
    padding: 16px;

    .card-section {
@ -176,7 +176,7 @@ onUnmounted(() => {

    .text {
        font-size: 14px;
-        color: var(--vn-text);
+        color: var(--vn-text-color);
    }
 }

--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@ -130,7 +130,7 @@ const openCreateInvoiceModal = () => {
            url="InvoiceOuts/filter"
        >
            <template #body="{ rows }">
-                <VnSubToolbar class="bg-vn-dark justify-end">
+                <VnSubToolbar class="justify-end">
                    <template #st-actions>
                        <QBtn
                            @click="openPdf()"
--- a/src/pages/Login/VerifyEmail.vue
+++ b/src/pages/Login/VerifyEmail.vue
@ -57,10 +57,13 @@ onMounted(async () => {
                :href="button.url"
            >
                <div class="row items-center no-wrap q-gutter-md">
-                    <div class="circle q-pa-sm" style="background-color: var(--vn-gray)">
+                    <div
+                        class="circle q-pa-sm"
+                        style="background-color: var(--vn-section-color)"
+                    >
                        <QImg :src="button.icon" class="q-pa-md" />
                    </div>
-                    <div class="text-h5" style="color: var(--vn-gray)">
+                    <div class="text-h5" style="color: var(--vn-section-color)">
                        {{ t(button.text) }}
                    </div>
                </div>
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@ -420,7 +420,7 @@ const getCategoryClass = (category, params) => {

    .category-icon {
        border-radius: 50%;
-        background-color: var(--vn-light-gray);
+        background-color: var(--vn-accent-color);
        font-size: 2.6rem;
        padding: 8px;
        cursor: pointer;
--- a/src/pages/Order/Card/OrderCatalogItem.vue
+++ b/src/pages/Order/Card/OrderCatalogItem.vue
@ -88,11 +88,11 @@ const dialog = ref(null);
        font-size: 11px;

        .label {
-            color: var(--vn-label);
+            color: var(--vn-label-color);
        }

        .value {
-            color: var(--vn-text);
+            color: var(--vn-text-color);
        }
    }
 }
@ -125,7 +125,7 @@ const dialog = ref(null);
    gap: 4px;

    .subName {
-        color: var(--vn-label);
+        color: var(--vn-label-color);
        text-transform: uppercase;
    }

@ -163,7 +163,7 @@ const dialog = ref(null);
    position: absolute;
    bottom: 12px;
    right: 12px;
-    background: linear-gradient($dark, $primary);
+    background: linear-gradient(var(--vn-section-color), $primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
--- a/src/pages/Order/Card/OrderSummary.vue
+++ b/src/pages/Order/Card/OrderSummary.vue
@ -248,7 +248,7 @@ const detailsColumns = ref([

        .subName {
            text-transform: uppercase;
-            color: var(--vn-label);
+            color: var(--vn-label-color);
        }
    }
 }
--- a/src/pages/Order/OrderCatalog.vue
+++ b/src/pages/Order/OrderCatalog.vue
@ -104,7 +104,7 @@ function extractTags(items) {
 .no-result {
    font-size: 24px;
    font-weight: bold;
-    color: var(--vn-label);
+    color: var(--vn-label-color);
    text-align: center;
 }
 </style>
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@ -213,7 +213,7 @@ async function confirmOrder() {
        gap: 2%;

        .label {
-            color: var(--vn-label);
+            color: var(--vn-label-color);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
@ -246,13 +246,13 @@ async function confirmOrder() {
 }

 .subname {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
 }

 .no-result {
    font-size: 24px;
    font-weight: bold;
-    color: var(--vn-label);
+    color: var(--vn-label-color);
    text-align: center;
 }
 </style>
--- a/src/pages/Order/OrderList.vue
+++ b/src/pages/Order/OrderList.vue
@ -104,7 +104,7 @@ function navigate(id) {
                            />
                            <VnLv :label="t('order.field.landed')">
                                <template #value>
-                                    <QBadge color="positive" dense>
+                                    <QBadge text-color="black" color="positive" dense>
                                        {{ toDate(row?.landed) }}
                                    </QBadge>
                                </template>
--- a/src/pages/Order/OrderVolume.vue
+++ b/src/pages/Order/OrderVolume.vue
@ -106,7 +106,7 @@ const loadVolumes = async (rows) => {
        gap: 2%;

        .label {
-            color: var(--vn-label);
+            color: var(--vn-label-color);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
@ -132,7 +132,7 @@ const loadVolumes = async (rows) => {
 .no-result {
    font-size: 24px;
    font-weight: bold;
-    color: var(--vn-label);
+    color: var(--vn-label-color);
    text-align: center;
 }
 </style>
--- a/src/pages/Route/Cmr/CmrList.vue
+++ b/src/pages/Route/Cmr/CmrList.vue
@ -141,6 +141,7 @@ function downloadPdfs() {
                        <template #body-cell-hasCmrDms="{ value }">
                            <QTd align="center">
                                <QBadge
+                                    text-color="black"
                                    :id="value ? 'true' : 'false'"
                                    :label="
                                        value
--- a/src/pages/Route/RouteAutonomous.vue
+++ b/src/pages/Route/RouteAutonomous.vue
@ -204,7 +204,7 @@ function navigateToRouteSummary(event, row) {
    <QPage class="column items-center">
        <div class="route-list">
            <div class="q-pa-md">
-                <QCard class="vn-one q-py-sm q-px-lg">
+                <QCard class="vn-one q-py-sm q-px-lg flex justify-between">
                    <VnLv class="flex">
                        <template #label>
                            <span class="text-h6">{{ t('Total') }}</span>
@ -213,6 +213,16 @@ function navigateToRouteSummary(event, row) {
                            <span class="text-h6 q-ml-md">{{ toCurrency(total) }}</span>
                        </template>
                    </VnLv>
+                    <QBtn
+                        icon="vn:invoice-in-create"
+                        color="primary"
+                        :disable="!selectedRows?.length"
+                        @click="openDmsUploadDialog"
+                    >
+                        <QTooltip>
+                            {{ t('Create invoiceIn') }}
+                        </QTooltip>
+                    </QBtn>
                </QCard>
            </div>
            <VnPaginate
@ -289,18 +299,6 @@ function navigateToRouteSummary(event, row) {
                </template>
            </VnPaginate>
        </div>
-        <QPageSticky :offset="[20, 20]" v-if="selectedRows?.length">
-            <QBtn
-                fab
-                icon="vn:invoice-in-create"
-                color="primary"
-                @click="openDmsUploadDialog"
-            >
-                <QTooltip>
-                    {{ t('Create invoiceIn') }}
-                </QTooltip>
-            </QBtn>
-        </QPageSticky>
    </QPage>
    <QDialog v-model="dmsDialog.show">
        <VnDms
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@ -224,7 +224,7 @@ const openTicketsDialog = (id) => {
    <FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
    <FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
    <QPage class="column items-center">
-        <VnSubToolbar class="bg-vn-dark justify-end">
+        <VnSubToolbar class="justify-end">
            <template #st-actions>
                <QBtn
                    icon="vn:clone"
--- a/src/pages/Route/RouteRoadmap.vue
+++ b/src/pages/Route/RouteRoadmap.vue
@ -13,9 +13,9 @@ import RoadmapFilter from 'pages/Route/Roadmap/RoadmapFilter.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import axios from 'axios';
 import VnInputDate from 'components/common/VnInputDate.vue';
-import {useSummaryDialog} from "composables/useSummaryDialog";
-import RoadmapSummary from "pages/Route/Roadmap/RoadmapSummary.vue";
-import {useRouter} from "vue-router";
+import { useSummaryDialog } from 'composables/useSummaryDialog';
+import RoadmapSummary from 'pages/Route/Roadmap/RoadmapSummary.vue';
+import { useRouter } from 'vue-router';

 const stateStore = useStateStore();
 const { t } = useI18n();
@ -128,7 +128,7 @@ function confirmRemove() {
 }

 function navigateToRoadmapSummary(event, row) {
-    router.push({ name: 'RoadmapSummary', params: { id: row.id } })
+    router.push({ name: 'RoadmapSummary', params: { id: row.id } });
 }
 </script>

@ -182,7 +182,7 @@ function navigateToRoadmapSummary(event, row) {
        </QCard>
    </QDialog>
    <QPage class="column items-center">
-        <VnSubToolbar class="bg-vn-dark justify-end">
+        <VnSubToolbar class="justify-end">
            <template #st-actions>
                <QBtn
                    icon="vn:clone"
@ -244,7 +244,12 @@ function navigateToRoadmapSummary(event, row) {
                                            name="preview"
                                            size="xs"
                                            color="primary"
-                                            @click.stop="viewSummary(props?.row?.id, RoadmapSummary)"
+                                            @click.stop="
+                                                viewSummary(
+                                                    props?.row?.id,
+                                                    RoadmapSummary
+                                                )
+                                            "
                                            class="cursor-pointer"
                                        >
                                            <QTooltip>{{ t('Preview') }}</QTooltip>
--- a/src/pages/Route/RouteTickets.vue
+++ b/src/pages/Route/RouteTickets.vue
@ -15,8 +15,8 @@ import VnConfirm from 'components/ui/VnConfirm.vue';
 import FetchData from 'components/FetchData.vue';
 import { openBuscaman } from 'src/utils/buscaman';
 import SendSmsDialog from 'components/common/SendSmsDialog.vue';
-import RouteSearchbar from "pages/Route/Card/RouteSearchbar.vue";
-import {useStateStore} from "stores/useStateStore";
+import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
+import { useStateStore } from 'stores/useStateStore';

 const { t } = useI18n();
 const quasar = useQuasar();
@ -257,7 +257,7 @@ const openSmsDialog = async () => {
        </QCard>
    </QDialog>
    <QPage class="column items-center">
-        <QToolbar class="bg-vn-dark justify-end">
+        <QToolbar class="justify-end">
            <div id="st-actions" class="q-pa-sm">
                <QBtn icon="vn:wand" color="primary" class="q-mr-sm" @click="sortRoutes">
                    <QTooltip>{{ t('Sort routes') }}</QTooltip>
--- a/src/pages/Shelving/Card/ShelvingDescriptorMenu.vue
+++ b/src/pages/Shelving/Card/ShelvingDescriptorMenu.vue
@ -17,15 +17,14 @@ const quasar = useQuasar();
 const { t } = useI18n();

 function confirmRemove() {
-    quasar
-        .dialog({
-            component: VnConfirm,
-            componentProps: {
-                title: t('Confirm deletion'),
-                message: t('Are you sure you want to delete this shelving?'),
-                promise: remove
-            },
-        })
+    quasar.dialog({
+        component: VnConfirm,
+        componentProps: {
+            title: t('Confirm deletion'),
+            message: t('Are you sure you want to delete this shelving?'),
+            promise: remove,
+        },
+    });
 }

 async function remove() {
--- a/src/pages/Supplier/Card/SupplierConsumption.vue
+++ b/src/pages/Supplier/Card/SupplierConsumption.vue
@ -195,7 +195,7 @@ onMounted(async () => {

 <style scoped lang="scss">
 .label {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
 }
 </style>

--- a/src/pages/Supplier/Card/SupplierContacts.vue
+++ b/src/pages/Supplier/Card/SupplierContacts.vue
@ -117,7 +117,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .border {
    border-radius: 0px !important;
-    border: 1px solid var(--vn-text) !important;
+    border: 1px solid var(--vn-text-color) !important;
 }
 </style>

--- a/src/pages/Supplier/Card/SupplierSummary.vue
+++ b/src/pages/Supplier/Card/SupplierSummary.vue
@ -8,6 +8,7 @@ import { getUrl } from 'src/composables/getUrl';
 import { useRole } from 'src/composables/useRole';
 import { dashIfEmpty } from 'src/filters';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';

 onUpdated(() => summaryRef.value.fetch());

--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@ -98,7 +98,10 @@ const setData = (entity) =>
            </VnLv>
            <VnLv v-if="entity.ticketState" :label="t('ticket.card.state')">
                <template #value>
-                    <QBadge :color="entity.ticketState.state.classColor">
+                    <QBadge
+                        text-color="black"
+                        :color="entity.ticketState.state.classColor"
+                    >
                        {{ entity.ticketState.state.name }}
                    </QBadge>
                </template>
--- a/src/pages/Ticket/Card/TicketDescriptorMenu.vue
+++ b/src/pages/Ticket/Card/TicketDescriptorMenu.vue
@ -3,7 +3,7 @@ import axios from 'axios';
 import { ref } from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { useRouter, useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { usePrintService } from 'composables/usePrintService';
 import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
@ -17,13 +17,49 @@ const props = defineProps({
    },
 });

-const router = useRouter();
-const route = useRoute();
-const quasar = useQuasar();
+const { push, currentRoute } = useRouter();
+const { dialog, notify } = useQuasar();
 const { t } = useI18n();
 const { openReport, sendEmail } = usePrintService();

 const ticket = ref(props.ticket);
+const ticketId = currentRoute.value.params.id;
+const actions = {
+    clone: async () => {
+        const opts = { message: t('Ticket cloned'), type: 'positive' };
+        let clonedTicketId;
+
+        try {
+            const { data } = await axios.post(`Tickets/${ticketId}/clone`, {
+                shipped: ticket.value.shipped,
+            });
+            clonedTicketId = data;
+        } catch (e) {
+            opts.message = t('It was not able to clone the ticket');
+            opts.type = 'negative';
+        } finally {
+            notify(opts);
+
+            if (clonedTicketId)
+                push({ name: 'TicketSummary', params: { id: clonedTicketId } });
+        }
+    },
+    remove: async () => {
+        try {
+            await axios.post(`Tickets/${ticketId}/setDeleted`);
+
+            notify({ message: t('Ticket deleted'), type: 'positive' });
+            notify({
+                message: t('You can undo this action within the first hour'),
+                icon: 'info',
+            });
+
+            push({ name: 'TicketList' });
+        } catch (e) {
+            notify({ message: e.message, type: 'negative' });
+        }
+    },
+};

 function openDeliveryNote(type = 'deliveryNote', documentType = 'pdf') {
    const path = `Tickets/${ticket.value.id}/delivery-note-${documentType}`;
@ -35,7 +71,7 @@ function openDeliveryNote(type = 'deliveryNote', documentType = 'pdf') {

 function sendDeliveryNoteConfirmation(type = 'deliveryNote', documentType = 'pdf') {
    const customer = ticket.value.client;
-    quasar.dialog({
+    dialog({
        component: SendEmailDialog,
        componentProps: {
            data: {
@ -67,7 +103,7 @@ function showSmsDialog(template, customData) {
    const address = ticket.value.address;
    const client = ticket.value.client;
    const phone =
-        route.params.phone ||
+        currentRoute.value.params.phone ||
        address.mobile ||
        address.phone ||
        client.mobile ||
@ -82,7 +118,7 @@ function showSmsDialog(template, customData) {
        Object.assign(data, customData);
    }

-    quasar.dialog({
+    dialog({
        component: VnSmsDialog,
        componentProps: {
            phone: phone,
@ -95,42 +131,26 @@ function showSmsDialog(template, customData) {
 }

 async function showSmsDialogWithChanges() {
-    const query = `TicketLogs/${route.params.id}/getChanges`;
+    const query = `TicketLogs/${ticketId}/getChanges`;
    const response = await axios.get(query);

    showSmsDialog('orderChanges', { changes: response.data });
 }

 async function sendSms(body) {
-    await axios.post(`Tickets/${route.params.id}/sendSms`, body);
-    quasar.notify({
+    await axios.post(`Tickets/${ticketId}/sendSms`, body);
+    notify({
        message: 'Notification sent',
        type: 'positive',
    });
 }

-function confirmDelete() {
-    quasar
-        .dialog({
-            component: VnConfirm,
-            componentProps: {
-                promise: remove,
-            },
-        })
-        .onOk(async () => await router.push({ name: 'TicketList' }));
-}
-
-async function remove() {
-    const id = route.params.id;
-    await axios.post(`Tickets/${id}/setDeleted`);
-
-    quasar.notify({
-        message: t('Ticket deleted'),
-        type: 'positive',
-    });
-    quasar.notify({
-        message: t('You can undo this action within the first hour'),
-        icon: 'info',
+function openConfirmDialog(callback) {
+    dialog({
+        component: VnConfirm,
+        componentProps: {
+            promise: actions[callback],
+        },
    });
 }
 </script>
@ -227,9 +247,15 @@ async function remove() {
            </QList>
        </QMenu>
    </QItem>
+    <QItem @click="openConfirmDialog('clone')" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="content_copy" />
+        </QItemSection>
+        <QItemSection>{{ t('To clone ticket') }}</QItemSection>
+    </QItem>
    <template v-if="!ticket.isDeleted">
        <QSeparator />
-        <QItem @click="confirmDelete()" v-ripple clickable>
+        <QItem @click="openConfirmDialog('remove')" v-ripple clickable>
            <QItemSection avatar>
                <QIcon name="delete" />
            </QItemSection>
@ -253,4 +279,7 @@ es:
    Order changes: Cambios del pedido
    Ticket deleted: Ticket eliminado
    You can undo this action within the first hour: Puedes deshacer esta acción dentro de la primera hora
+    To clone ticket: Clonar ticket
+    Ticket cloned: Ticked clonado
+    It was not able to clone the ticket: No se pudo clonar el ticket
 </i18n>
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@ -12,6 +12,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import { getUrl } from 'src/composables/getUrl';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';

 onUpdated(() => summaryRef.value.fetch());

@ -74,7 +75,7 @@ async function changeState(value) {
        code: value,
    };

-    await axios.post(`TicketTrackings/changeState`, formData);
+    await axios.post(`Tickets/state`, formData);
    router.go(route.fullPath);
 }
 </script>
@ -102,8 +103,8 @@ async function changeState(value) {
            <QBtnDropdown
                side
                top
-                color="orange-11"
-                text-color="black"
+                color="black"
+                text-color="white"
                :label="t('ticket.summary.changeState')"
                :disable="!isEditable()"
            >
@ -147,10 +148,10 @@ async function changeState(value) {
                </div>
            </QCard>
            <QCard class="vn-one">
-                <a class="header header-link" :href="ticketUrl + 'basic-data/step-one'">
-                    {{ t('globals.summary.basicData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="ticketUrl + 'basic-data/step-one'"
+                    :text="t('globals.summary.basicData')"
+                />
                <VnLv :label="t('ticket.summary.state')">
                    <template #value>
                        <QChip :color="ticket.ticketState?.state?.classColor ?? 'dark'">
@ -193,10 +194,10 @@ async function changeState(value) {
                />
            </QCard>
            <QCard class="vn-one">
-                <a class="header header-link" :href="ticketUrl + 'basic-data/step-one'">
-                    {{ t('globals.summary.basicData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="ticketUrl + 'basic-data/step-one'"
+                    :text="t('globals.summary.basicData')"
+                />
                <VnLv
                    :label="t('ticket.summary.shipped')"
                    :value="toDate(ticket.shipped)"
@ -236,10 +237,10 @@ async function changeState(value) {
                />
            </QCard>
            <QCard class="vn-one">
-                <a class="header header-link" :href="ticketUrl + 'observation'">
-                    {{ t('ticket.pageTitles.notes') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="ticketUrl + 'observation'"
+                    :text="t('ticket.pageTitles.notes')"
+                />
                <VnLv
                    v-for="note in ticket.notes"
                    :key="note.id"
@ -258,10 +259,10 @@ async function changeState(value) {
                </VnLv>
            </QCard>
            <QCard class="vn-max">
-                <a class="header header-link" :href="ticketUrl + 'sale'">
-                    {{ t('ticket.summary.saleLines') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="ticketUrl + 'sale'"
+                    :text="t('ticket.summary.saleLines')"
+                />
                <QTable :rows="ticket.sales">
                    <template #header="props">
                        <QTr :props="props">
@ -396,10 +397,7 @@ async function changeState(value) {
                class="vn-max"
                v-if="ticket.packagings.length > 0 || ticket.services.length > 0"
            >
-                <a class="header header-link" :href="ticketUrl + 'package'">
-                    {{ t('globals.packages') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle :url="ticketUrl + 'package'" :text="t('globals.packages')" />
                <QTable :rows="ticket.packagings" flat>
                    <template #header="props">
                        <QTr :props="props">
@ -416,11 +414,10 @@ async function changeState(value) {
                        </QTr>
                    </template>
                </QTable>
-
-                <a class="header header-link q-mt-xl" :href="ticketUrl + 'service'">
-                    {{ t('ticket.summary.service') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="ticketUrl + 'service'"
+                    :text="t('ticket.summary.service')"
+                />
                <QTable :rows="ticket.services" flat>
                    <template #header="props">
                        <QTr :props="props">
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@ -89,6 +89,7 @@ function navigate(id) {
                            <VnLv :label="t('ticket.list.state')">
                                <template #value>
                                    <QBadge
+                                        text-color="black"
                                        :color="row.classColor ?? 'orange'"
                                        class="q-ma-none"
                                        dense
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';

 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
 import FetchData from 'src/components/FetchData.vue';
 import TravelDescriptorMenuItems from './TravelDescriptorMenuItems.vue';
@ -284,9 +285,7 @@ async function setTravelData(travelData) {
                <VnLv :label="t('globals.totalEntries')" :value="travel.totalEntries" />
            </QCard>
            <QCard class="full-width" v-if="entriesTableRows.length > 0">
-                <span class="header header-link">
-                    {{ t('travel.summary.entries') }}
-                </span>
+                <VnTitle :text="t('travel.summary.entries')" />
                <QTable
                    :rows="entriesTableRows"
                    :columns="entriesTableColumns"
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@ -430,7 +430,7 @@ const handleDragScroll = (event) => {
            />
        </Teleport>
    </template>
-    <VnSubToolbar class="bg-vn-dark justify-end">
+    <VnSubToolbar class="justify-end">
        <template #st-actions>
            <QBtn
                color="primary"
--- a/src/pages/Travel/TravelFilter.vue
+++ b/src/pages/Travel/TravelFilter.vue
@ -60,15 +60,6 @@ const decrement = (paramsObj, key) => {
            </div>
        </template>
        <template #body="{ params, searchFn }">
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        v-model="params.search"
-                        :label="t('params.search')"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
            <QItem>
                <QItemSection>
                    <VnSelectFilter
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@ -8,6 +8,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import TravelSummary from './Card/TravelSummary.vue';
 import TravelFilter from './TravelFilter.vue';
 import FetchData from 'components/FetchData.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';

 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
@ -59,6 +60,15 @@ onMounted(async () => {
 </script>

 <template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="TravelList"
+                :limit="20"
+                :label="t('searchByIdOrReference')"
+            />
+        </Teleport>
+    </template>
    <FetchData
        url="Warehouses"
        :filter="{ fields: ['id', 'name'] }"
@ -100,6 +110,7 @@ onMounted(async () => {
                            <VnLv :label="t('globals.shipped')">
                                <template #value>
                                    <QBadge
+                                        text-color="black"
                                        v-if="getDateQBadgeColor(row.shipped)"
                                        :color="getDateQBadgeColor(row.shipped)"
                                        class="q-ma-none"
@ -114,6 +125,7 @@ onMounted(async () => {
                            <VnLv :label="t('globals.landed')">
                                <template #value>
                                    <QBadge
+                                        text-color="black"
                                        v-if="getDateQBadgeColor(row.landed)"
                                        :color="getDateQBadgeColor(row.landed)"
                                        class="q-ma-none"
@ -139,13 +151,11 @@ onMounted(async () => {
                            <QBtn
                                :label="t('components.smartCard.clone')"
                                @click.stop="cloneTravel(row)"
-                                class="bg-vn-dark"
                                outline
                            />
                            <QBtn
                                :label="t('addEntry')"
                                @click.stop="redirectCreateEntryView(row)"
-                                class="bg-vn-dark"
                                outline
                                style="margin-top: 15px"
                            />
@ -172,7 +182,9 @@ onMounted(async () => {
 <i18n>
 en:
    addEntry: Add entry
+    searchByIdOrReference: Search by ID or reference

 es:
    addEntry: Añadir entrada
+    searchByIdOrReference: Buscar por ID o por referencia
 </i18n>
--- a/src/pages/Wagon/Type/WagonTypeList.vue
+++ b/src/pages/Wagon/Type/WagonTypeList.vue
@ -61,7 +61,6 @@ async function remove(row) {
                            <QBtn
                                :label="t('components.smartCard.openCard')"
                                @click.stop="navigate(row.id)"
-                                class="bg-vn-dark"
                                outline
                            />
                            <QBtn
--- a/src/pages/Wagon/WagonList.vue
+++ b/src/pages/Wagon/WagonList.vue
@ -80,7 +80,6 @@ async function remove(row) {
                            <QBtn
                                :label="t('components.smartCard.openCard')"
                                @click.stop="navigate(row.id)"
-                                class="bg-vn-dark"
                                outline
                            />
                            <QBtn
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@ -8,6 +8,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';

 const route = useRoute();
 const { t } = useI18n();
@ -71,10 +72,10 @@ const filter = {
        </template>
        <template #body="{ entity: worker }">
            <QCard class="vn-one">
-                <a class="header header-link" :href="workerUrl + `basic-data`">
-                    {{ t('worker.summary.basicData') }}
-                    <QIcon name="open_in_new" />
-                </a>
+                <VnTitle
+                    :url="workerUrl + `basic-data`"
+                    :text="t('worker.summary.basicData')"
+                />
                <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
                <VnLv
                    :label="t('worker.list.department')"
@ -111,9 +112,7 @@ const filter = {
                <VnLv :label="t('worker.summary.locker')" :value="worker.locker" />
            </QCard>
            <QCard class="vn-one">
-                <div class="header header-link">
-                    {{ t('worker.summary.userData') }}
-                </div>
+                <VnTitle :text="t('worker.summary.userData')" />
                <VnLv :label="t('worker.summary.userId')" :value="worker.user.id" />
                <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
                <VnLv :label="t('worker.summary.role')" :value="worker.user.role.name" />
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@ -82,7 +82,6 @@ const redirectToCreateView = () => {
                            <QBtn
                                :label="t('components.smartCard.openCard')"
                                @click.stop="navigate(row.id)"
-                                class="bg-vn-dark"
                                outline
                            />
                            <QBtn
--- a/test/cypress/integration/invoiceIn/invoiceInList.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInList.spec.js
@ -4,7 +4,7 @@ describe('InvoiceInList', () => {
    const firstChipId =
        ':nth-child(1) > :nth-child(1) > .justify-between > .flex > .q-chip > .q-chip__content';
    const firstDetailBtn = '.q-card:nth-child(1) .q-btn:nth-child(2)';
-    const summaryHeaders = '.summaryBody .header';
+    const summaryHeaders = '.summaryBody .header-link';
    const screen = '.q-page-container > .q-drawer-container > .fullscreen';

    beforeEach(() => {
@ -17,7 +17,7 @@ describe('InvoiceInList', () => {
        cy.get(firstChipId)
            .invoke('text')
            .then((content) => {
-                const id = content.substring(4);
+                const id = content.replace(/\D/g, '');
                cy.get(firstCard).click();
                cy.url().should('include', `/invoice-in/${id}/summary`);
            });
--- a/test/cypress/integration/ticket/ticketDescriptor.spec.js
+++ b/test/cypress/integration/ticket/ticketDescriptor.spec.js
@ -0,0 +1,27 @@
+/// <reference types="cypress" />
+describe('Ticket descriptor', () => {
+    const toCloneOpt = '.q-list > :nth-child(5)';
+    const warehouseValue = '.summaryBody > :nth-child(2) > :nth-child(6) > .value > span';
+    const summaryHeader = '.summaryHeader > div';
+
+    beforeEach(() => {
+        const ticketId = 1;
+
+        cy.login('developer');
+        cy.visit(`/#/ticket/${ticketId}/summary`);
+    });
+
+    it('should clone the ticket without warehouse', () => {
+        cy.openLeftMenu();
+        cy.openActionsDescriptor();
+        cy.get(toCloneOpt).click();
+        cy.clickConfirm();
+        cy.get(warehouseValue).contains('-');
+        cy.get(summaryHeader)
+            .invoke('text')
+            .then((text) => {
+                const [, owner] = text.split('-');
+                cy.wrap(owner.trim()).should('eq', 'Bruce Wayne (1101)');
+            });
+    });
+});
--- a/test/cypress/integration/worker/workerList.spec.js
+++ b/test/cypress/integration/worker/workerList.spec.js
@ -16,7 +16,10 @@ describe('WorkerList', () => {
    it('should open the worker summary', () => {
        cy.openListSummary(0);
        cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones');
-        cy.get('.summary .header-link').eq(0).invoke('text').should('include', 'Basic data');
-        cy.get('.summary .header-link').eq(1).should('have.text', 'User data');
+        cy.get('.summary .header-link')
+            .eq(0)
+            .invoke('text')
+            .should('include', 'Basic data');
+        cy.get('.summary .header-link').eq(1).should('have.text', 'User data ');
    });
 });