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

2024-07-03 07:12:07 +02:00 · 2024-07-03 07:12:07 +02:00 · e13f98dffb
parent 452d1000bc 0d4ba3bf27
commit e13f98dffb
61 changed files with 1515 additions and 606 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "salix-front",
-    "version": "24.28.1",
+    "version": "24.30.1",
    "description": "Salix frontend",
    "productName": "Salix",
    "author": "Verdnatura",
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@ -262,7 +262,7 @@ defineExpose({
 <template>
    <div class="column items-center full-width">
        <QForm
-            v-if="formData"
+            
            @submit="save"
            @reset="reset"
            class="q-pa-md"
@ -270,11 +270,13 @@ defineExpose({
        >
            <QCard>
                <slot
+                    v-if="formData"
                    name="form"
                    :data="formData"
                    :validate="validate"
                    :filter="filter"
                />
+                <SkeletonForm v-else/>
            </QCard>
        </QForm>
    </div>
@ -337,7 +339,7 @@ defineExpose({
            </QBtnGroup>
        </div>
    </Teleport>
-    <SkeletonForm v-if="!formData" />
+    
    <QInnerLoading
        :showing="isLoading"
        :label="t('globals.pleaseWait')"
--- a/src/components/TransferInvoiceForm.vue
+++ b/src/components/TransferInvoiceForm.vue
@ -70,14 +70,11 @@ const makeInvoice = async () => {
                    });
            });
            if (!response) {
-                console.log('entra cuando no checkbox');
                return;
            }
        }

-        console.log('params: ', params);
        const { data } = await axios.post('InvoiceOuts/transferInvoice', params);
-        console.log('data: ', data);
        notify(t('Transferred invoice'), 'positive');
        const id = data?.[0];
        if (id) router.push({ name: 'InvoiceOutSummary', params: { id } });
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@ -59,6 +59,10 @@ const $props = defineProps({
        type: Boolean,
        default: false,
    },
+    hasSubtoolbar: {
+        type: Boolean,
+        default: true,
+    },
 });
 const { t } = useI18n();
 const stateStore = useStateStore();
@ -175,11 +179,14 @@ function columnName(col) {
 }

 function getColAlign(col) {
-    return 'text-' + (col.align ?? 'left')
+    return 'text-' + (col.align ?? 'left');
 }
+
+const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
 defineExpose({
    reload,
    redirect: redirectFn,
+    selected,
 });
 </script>
 <template>
@ -225,11 +232,18 @@ defineExpose({
            :search-url="searchUrl"
            :disable-infinite-scroll="mode == TABLE_MODE"
            @save-changes="reload"
-            :has-subtoolbar="isEditable"
+            :has-subtoolbar="$attrs['hasSubtoolbar'] ?? isEditable"
        >
+            <template
+                v-for="(_, slotName) in $slots"
+                #[slotName]="slotData"
+                :key="slotName"
+            >
+                <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+            </template>
            <template #body="{ rows }">
                <QTable
-                    v-bind="$attrs['QTable']"
+                    v-bind="$attrs['q-table']"
                    class="vnTable"
                    :columns="splittedColumns.columns"
                    :rows="rows"
@ -246,6 +260,7 @@ defineExpose({
                            CrudModelRef.vnPaginateRef.paginate()
                    "
                    @row-click="(_, row) => rowClickFunction(row)"
+                    @update:selected="emit('update:selected', $event)"
                >
                    <template #top-left>
                        <slot name="top-left"></slot>
@ -310,13 +325,15 @@ defineExpose({
                            class="no-margin q-px-xs"
                            :class="getColAlign(col)"
                        >
-                            <VnTableColumn
-                                :column="col"
-                                :row="row"
-                                :is-editable="false"
-                                v-model="row[col.name]"
-                                component-prop="columnField"
-                            />
+                            <slot :name="`column-${col.name}`" :col="col" :row="row">
+                                <VnTableColumn
+                                    :column="col"
+                                    :row="row"
+                                    :is-editable="false"
+                                    v-model="row[col.name]"
+                                    component-prop="columnField"
+                                />
+                            </slot>
                        </QTd>
                    </template>
                    <template #body-cell-tableActions="{ col, row }">
@ -412,14 +429,20 @@ defineExpose({
                                                            stopEventPropagation($event)
                                                        "
                                                    >
-                                                        <VnTableColumn
-                                                            :column="col"
+                                                        <slot
+                                                            :name="`column-${col.name}`"
+                                                            :col="col"
                                                            :row="row"
-                                                            :is-editable="false"
-                                                            v-model="row[col.name]"
-                                                            component-prop="columnField"
-                                                            :show-label="true"
-                                                        />
+                                                        >
+                                                            <VnTableColumn
+                                                                :column="col"
+                                                                :row="row"
+                                                                :is-editable="false"
+                                                                v-model="row[col.name]"
+                                                                component-prop="columnField"
+                                                                :show-label="true"
+                                                            />
+                                                        </slot>
                                                    </span>
                                                </template>
                                            </VnLv>
@ -477,6 +500,7 @@ defineExpose({
                        default="input"
                        v-model="data[column.name]"
                        :show-label="true"
+                        component-prop="columnCreate"
                    />
                    <slot name="more-create-dialog" :data="data" />
                </div>
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@ -93,7 +93,12 @@ const inputRules = [
                    name="close"
                    size="xs"
                    v-if="hover && value && !$attrs.disabled && $props.clearable"
-                    @click="value = null"
+                    @click="
+                        () => {
+                            value = null;
+                            emit('remove');
+                        }
+                    "
                ></QIcon>
                <QIcon v-if="info" name="info">
                    <QTooltip max-width="350px">
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@ -61,6 +61,10 @@ const $props = defineProps({
        type: Boolean,
        default: false,
    },
+    useLike: {
+        type: Boolean,
+        default: true,
+    },
 });

 const { t } = useI18n();
@ -114,11 +118,14 @@ async function fetchFilter(val) {
    if (!$props.url || !dataRef.value) return;

    const { fields, sortBy, limit } = $props;
-    let key = optionLabel.value;
+    let key = optionFilter.value ?? optionLabel.value;

-    if (new RegExp(/\d/g).test(val)) key = optionFilter.value ?? optionValue.value;
+    if (new RegExp(/\d/g).test(val)) key = optionValue.value;

-    const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
+    const defaultWhere = $props.useLike
+        ? { [key]: { like: `%${val}%` } }
+        : { [key]: val };
+    const where = { ...defaultWhere, ...$props.where };
    const fetchOptions = { where, order: sortBy, limit };
    if (fields) fetchOptions.fields = fields;
    return dataRef.value.fetch(fetchOptions);
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@ -187,15 +187,10 @@ function existSummary(routes) {
                color: lighten($primary, 20%);
            }
            .q-checkbox {
-                display: flex;
-                margin-bottom: 9px;
                & .q-checkbox__label {
-                    margin-left: 31px;
                    color: var(--vn-text-color);
                }
                & .q-checkbox__inner {
-                    position: absolute;
-                    left: 0;
                    color: var(--vn-label-color);
                }
            }
--- a/src/components/ui/SkeletonForm.vue
+++ b/src/components/ui/SkeletonForm.vue
@ -1,20 +1,14 @@
 <template>
-    <div class="q-pa-md">
-        <div class="row q-gutter-md q-mb-md">
-            <QSkeleton type="QInput" square />
-            <QSkeleton type="QInput" square />
-        </div>
-        <div class="row q-gutter-md q-mb-md">
-            <QSkeleton type="QInput" square />
-            <QSkeleton type="QInput" square />
-        </div>
-        <div class="row q-gutter-md q-mb-md">
-            <QSkeleton type="QInput" square />
-            <QSkeleton type="QInput" square />
-        </div>
-        <div class="row q-gutter-md">
-            <QSkeleton type="QBtn" />
-            <QSkeleton type="QBtn" />
-        </div>
+    <div class="row q-gutter-md q-mb-md">
+        <QSkeleton type="QInput" class="col" square />
+        <QSkeleton type="QInput" class="col" square />       
    </div>
-</template>
+    <div class="row q-gutter-md q-mb-md">
+        <QSkeleton type="QInput" class="col" square />
+        <QSkeleton type="QInput" class="col" square />       
+    </div>
+    <div class="row q-gutter-md q-mb-md">
+        <QSkeleton type="QInput" class="col" square />
+        <QSkeleton type="QInput" class="col" square />       
+    </div>
+</template>
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@ -7,8 +7,11 @@ import toDate from 'filters/toDate';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';

 const { t } = useI18n();
-const params = defineModel({ default: {}, required: true, type: Object });
 const $props = defineProps({
+    modelValue: {
+        type: Object,
+        default: () => {},
+    },
    dataKey: {
        type: String,
        required: true,
@ -55,18 +58,26 @@ const $props = defineProps({
    },
 });

-const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
+const emit = defineEmits([
+    'update:modelValue',
+    'refresh',
+    'clear',
+    'search',
+    'init',
+    'remove',
+]);

 const arrayData = useArrayData($props.dataKey, {
    exprBuilder: $props.exprBuilder,
    searchUrl: $props.searchUrl,
-    navigate: {},
+    navigate: $props.redirect ? {} : null,
 });
 const route = useRoute();
 const store = arrayData.store;
-
+const userParams = ref({});
 onMounted(() => {
-    emit('init', { params: params.value });
+    userParams.value = $props.modelValue ?? {};
+    emit('init', { params: userParams.value });
 });

 function setUserParams(watchedParams) {
@ -75,7 +86,7 @@ function setUserParams(watchedParams) {
    if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
    watchedParams = { ...watchedParams, ...watchedParams.filter?.where };
    delete watchedParams.filter;
-    params.value = { ...params.value, ...watchedParams };
+    userParams.value = { ...userParams.value, ...watchedParams };
 }

 watch(
@ -88,18 +99,23 @@ watch(
    (val) => setUserParams(val)
 );

+watch(
+    () => $props.modelValue,
+    (val) => (userParams.value = val ?? {})
+);
+
 const isLoading = ref(false);
 async function search(evt) {
    if (evt && $props.disableSubmitEvent) return;

    store.filter.where = {};
    isLoading.value = true;
-    const filter = { ...params.value };
+    const filter = { ...userParams.value };
    store.userParamsChanged = true;
    store.filter.skip = 0;
    store.skip = 0;
-    const { params: newParams } = await arrayData.addFilter({ params: params.value });
-    params.value = newParams;
+    const { params: newParams } = await arrayData.addFilter({ params: userParams.value });
+    userParams.value = newParams;

    if (!$props.showAll && !Object.values(filter).length) store.data = [];

@ -109,7 +125,7 @@ async function search(evt) {

 async function reload() {
    isLoading.value = true;
-    const params = Object.values(params.value).filter((param) => param);
+    const params = Object.values(userParams.value).filter((param) => param);

    await arrayData.fetch({ append: false });
    if (!$props.showAll && !params.length) store.data = [];
@ -123,17 +139,17 @@ async function clearFilters() {
    store.filter.skip = 0;
    store.skip = 0;
    // Filtrar los params no removibles
-    const removableFilters = Object.keys(params.value).filter((param) =>
+    const removableFilters = Object.keys(userParams.value).filter((param) =>
        $props.unremovableParams.includes(param)
    );
    const newParams = {};
    // Conservar solo los params que no son removibles
    for (const key of removableFilters) {
-        newParams[key] = params.value[key];
+        newParams[key] = userParams.value[key];
    }
-    params.value = {};
-    params.value = { ...newParams }; // Actualizar los params con los removibles
-    await arrayData.applyFilter({ params: params.value });
+    userParams.value = {};
+    userParams.value = { ...newParams }; // Actualizar los params con los removibles
+    await arrayData.applyFilter({ params: userParams.value });

    if (!$props.showAll) {
        store.data = [];
@ -141,12 +157,13 @@ async function clearFilters() {

    isLoading.value = false;
    emit('clear');
+    emit('update:modelValue', userParams.value);
 }

 const tagsList = computed(() => {
    const tagList = [];
-    for (const key of Object.keys(params.value)) {
-        const value = params.value[key];
+    for (const key of Object.keys(userParams.value)) {
+        const value = userParams.value[key];
        if (value == null || ($props.hiddenTags || []).includes(key)) continue;
        tagList.push({ label: key, value });
    }
@ -161,9 +178,10 @@ const customTags = computed(() =>
 );

 async function remove(key) {
-    params.value[key] = undefined;
+    userParams.value[key] = undefined;
    search();
    emit('remove', key);
+    emit('update:modelValue', userParams.value);
 }

 function formatValue(value) {
@ -236,7 +254,7 @@ function formatValue(value) {
                    <slot
                        v-if="$slots.customTags"
                        name="customTags"
-                        :params="params"
+                        :params="userParams"
                        :tags="customTags"
                        :format-fn="formatValue"
                        :search-fn="search"
@ -246,7 +264,7 @@ function formatValue(value) {
            <QSeparator />
        </QList>
        <QList dense class="list q-gutter-y-sm q-mt-sm">
-            <slot name="body" :params="params" :search-fn="search"></slot>
+            <slot name="body" :params="userParams" :search-fn="search"></slot>
        </QList>
        <template v-if="$props.searchButton">
            <QItem>
--- a/src/components/ui/VnLv.vue
+++ b/src/components/ui/VnLv.vue
@ -2,6 +2,7 @@
 import { dashIfEmpty } from 'src/filters';
 import { useI18n } from 'vue-i18n';
 import { useClipboard } from 'src/composables/useClipboard';
+import { computed } from 'vue';

 const $props = defineProps({
    label: { type: String, default: null },
@ -24,52 +25,67 @@ function copyValueText() {
        },
    });
 }
+const val = computed(() => $props.value);
 </script>
-<style scoped>
-.label,
-.value {
-    white-space: pre-line;
-    word-wrap: break-word;
-}
-</style>
 <template>
    <div class="vn-label-value">
-        <div v-if="$props.label || $slots.label" class="label">
-            <slot name="label">
-                <span>{{ $props.label }}</span>
-            </slot>
-        </div>
-        <div class="value">
-            <slot name="value">
-                <span :title="$props.value">
-                    {{ $props.dash ? dashIfEmpty($props.value) : $props.value }}
-                </span>
-            </slot>
-        </div>
-        <div class="info" v-if="$props.info">
-            <QIcon name="info" class="cursor-pointer" size="xs" color="grey">
-                <QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]">
-                    {{ $props.info }}
-                </QTooltip>
-            </QIcon>
-        </div>
-        <div class="copy" v-if="$props.copy && $props.value" @click="copyValueText()">
-            <QIcon name="Content_Copy" color="primary">
-                <QTooltip>{{ t('globals.copyClipboard') }}</QTooltip>
-            </QIcon>
-        </div>
+        <QCheckbox
+            v-if="typeof value === 'boolean'"
+            v-model="val"
+            :label="label"
+            disable
+            dense
+        />
+        <template v-else>
+            <div v-if="label || $slots.label" class="label">
+                <slot name="label">
+                    <span>{{ label }}</span>
+                </slot>
+            </div>
+            <div class="value">
+                <slot name="value">
+                    <span :title="value">
+                        {{ dash ? dashIfEmpty(value) : value }}
+                    </span>
+                </slot>
+            </div>
+            <div class="info" v-if="info">
+                <QIcon name="info" class="cursor-pointer" size="xs" color="grey">
+                    <QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]">
+                        {{ info }}
+                    </QTooltip>
+                </QIcon>
+            </div>
+            <div class="copy" v-if="copy && value" @click="copyValueText()">
+                <QIcon name="Content_Copy" color="primary">
+                    <QTooltip>{{ t('globals.copyClipboard') }}</QTooltip>
+                </QIcon>
+            </div>
+        </template>
    </div>
 </template>
-
 <style lang="scss" scoped>
-.vn-label-value:hover .copy {
-    visibility: visible;
-    cursor: pointer;
+.vn-label-value {
+    &:hover .copy {
+        visibility: visible;
+        cursor: pointer;
+    }
+
+    .label,
+    .value {
+        white-space: pre-line;
+        word-wrap: break-word;
+    }
+    .copy {
+        visibility: hidden;
+    }
+
+    .info {
+        margin-left: 5px;
+    }
 }
-.copy {
-    visibility: hidden;
-}
-.info {
-    margin-left: 5px;
+
+:deep(.q-checkbox.disabled) {
+    opacity: 1 !important;
 }
 </style>
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@ -21,7 +21,7 @@ const currentUser = ref(state.getUser());
 const newNote = ref('');
 const vnPaginateRef = ref();
 function handleKeyUp(event) {
-      if (event.key === 'Enter') {
+    if (event.key === 'Enter') {
        event.preventDefault();
        if (!event.shiftKey) insert();
    }
@ -78,6 +78,7 @@ async function insert() {
        ref="vnPaginateRef"
        class="show"
        v-bind="$attrs"
+        search-url="notes"
    >
        <template #body="{ rows }">
            <TransitionGroup name="list" tag="div" class="column items-center full-width">
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@ -29,7 +29,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
            const filter = params?.filter;
            delete params.filter;
            store.userParams = { ...params, ...store.userParams };
-            store.userFilter = { ...JSON.parse(filter), ...store.userFilter };
+            store.userFilter = { ...JSON.parse(filter ?? '{}'), ...store.userFilter };
        }
    });

@ -73,7 +73,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
        const filter = {
            order: store.order,
            limit: store.limit,
-            skip: store.skip,
        };

        let exprFilter;
@ -88,7 +87,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
        }

        Object.assign(filter, store.userFilter, exprFilter);
-        Object.assign(store.filter, filter);
+        Object.assign(store.filter, { ...filter, skip: store.skip });
        const params = {
            filter: JSON.stringify(store.filter),
        };
--- a/src/css/app.scss
+++ b/src/css/app.scss
@ -152,6 +152,15 @@ select:-webkit-autofill {
    color: var(--vn-label-color);
 }

+.disabled {
+    & .q-checkbox__label {
+        color: var(--vn-text-color);
+    }
+    & .q-checkbox__inner {
+        color: var(--vn-label-color);
+    }
+}
+
 .q-chip,
 .q-notification__message,
 .q-notification__icon {
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@ -100,13 +100,142 @@ globals:
        modes: Modes
        zones: Zones
        zonesList: Zones
-        deliveryList: Delivery days
-        upcomingList: Upcoming deliveries
+        deliveryDays: Delivery days
+        upcomingDeliveries: Upcoming deliveries
        role: Role
        alias: Alias
        aliasUsers: Users
        subRoles: Subroles
        inheritedRoles: Inherited Roles
+        customers: Customers
+        list: List
+        webPayments: Web Payments
+        extendedList: Extended list
+        notifications: Notifications
+        defaulter: Defaulter
+        customerCreate: New customer
+        fiscalData: Fiscal data
+        billingData: Billing data
+        consignees: Consignees
+        notes: Notes
+        credits: Credits
+        greuges: Greuges
+        balance: Balance
+        recoveries: Recoveries
+        webAccess: Web access
+        sms: Sms
+        creditManagement: Credit management
+        creditContracts: Credit contracts
+        creditOpinion: Credit opinion
+        others: Others
+        samples: Samples
+        consumption: Consumption
+        mandates: Mandates
+        contacts: Contacts
+        webPayment: Web payment
+        fileManagement: File management
+        unpaid: Unpaid
+        entries: Entries
+        buys: Buys
+        dms: File management
+        entryCreate: New entry
+        latestBuys: Latest buys
+        tickets: Tickets
+        ticketCreate: New Tickets
+        boxing: Boxing
+        sale: Sale
+        claims: Claims
+        claimCreate: New claim
+        lines: Lines
+        photos: Photos
+        development: Development
+        action: Action
+        invoiceOuts: Invoice out
+        negativeBases: Negative Bases
+        globalInvoicing: Global invoicing
+        invoiceOutCreate: Create invoice out
+        shelving: Shelving
+        shelvingList: Shelving List
+        shelvingCreate: New shelving
+        invoiceIns: Invoices In
+        invoiceInCreate: Create invoice in
+        vat: VAT
+        dueDay: Due day
+        intrastat: Intrastat
+        corrective: Corrective
+        order: Orders
+        orderList: List
+        orderCreate: New order
+        catalog: Catalog
+        volume: Volume
+        workers: Workers
+        workerCreate: New worker
+        department: Department
+        pda: PDA
+        pbx: Private Branch Exchange
+        calendar: Calendar
+        timeControl: Time control
+        locker: Locker
+        wagons: Wagons
+        wagonsList: Wagons List
+        wagonCreate: Create wagon
+        wagonEdit: Edit wagon
+        typesList: Types List
+        typeCreate: Create type
+        typeEdit: Edit type
+        wagonCounter: Trolley counter
+        roadmap: Roadmap
+        stops: Stops
+        routes: Routes
+        cmrsList: CMRs list
+        RouteList: List
+        routeCreate: New route
+        RouteRoadmap: Roadmaps
+        RouteRoadmapCreate: Create roadmap
+        autonomous: Autonomous
+        suppliers: Suppliers
+        supplier: Supplier
+        supplierCreate: New supplier
+        accounts: Accounts
+        addresses: Addresses
+        agencyTerm: Agency agreement
+        travel: Travels
+        extraCommunity: Extra community
+        travelCreate: New travel
+        history: Log
+        thermographs: Thermograph
+        items: Items
+        diary: Diary
+        tags: Tags
+        create: Create
+        buyRequest: Buy requests
+        fixedPrice: Fixed prices
+        wasteBreakdown: Waste breakdown
+        itemCreate: New item
+        barcode: Barcodes
+        tax: Tax
+        botanical: Botanical
+        itemTypeCreate: New item type
+        family: Item Type
+        lastEntries: Last entries
+        itemType: Item type
+        monitors: Monitors
+        dashboard: Dashboard
+        users: Users
+        createTicket: Create ticket
+        ticketAdvance: Advance tickets
+        futureTickets: Future tickets
+        purchaseRequest: Purchase request
+        weeklyTickets: Weekly tickets
+        formation: Formation
+        locations: Locations
+        warehouses: Warehouses
+        roles: Roles
+        connections: Connections
+        acls: ACLs
+        mailForwarding: Mail forwarding
+        mailAlias: Mail alias
+        privileges: Privileges
    created: Created
    worker: Worker
    now: Now
@ -149,40 +278,8 @@ verifyEmail:
        verifyEmail: Email verification
 dashboard:
    pageTitles:
-        dashboard: Dashboard
+
 customer:
-    pageTitles:
-        customers: Customers
-        list: List
-        webPayments: Web Payments
-        extendedList: Extended list
-        notifications: Notifications
-        defaulter: Defaulter
-        customerCreate: New customer
-        summary: Summary
-        basicData: Basic data
-        fiscalData: Fiscal data
-        billingData: Billing data
-        consignees: Consignees
-        notes: Notes
-        credits: Credits
-        greuges: Greuges
-        balance: Balance
-        recoveries: Recoveries
-        webAccess: Web access
-        log: Log
-        sms: Sms
-        creditManagement: Credit management
-        creditContracts: Credit contracts
-        creditOpinion: Credit opinion
-        others: Others
-        samples: Samples
-        consumption: Consumption
-        mandates: Mandates
-        contacts: Contacts
-        webPayment: Web payment
-        fileManagement: File management
-        unpaid: Unpaid
    list:
        phone: Phone
        email: Email
@ -312,17 +409,6 @@ customer:
            hasCoreVnl: VNL core received
            hasSepaVnl: VNL B2B received
 entry:
-    pageTitles:
-        entries: Entries
-        list: List
-        summary: Summary
-        basicData: Basic data
-        buys: Buys
-        notes: Notes
-        dms: File management
-        log: Log
-        entryCreate: New entry
-        latestBuys: Latest buys
    list:
        newEntry: New entry
        landed: Landed
@ -445,10 +531,14 @@ ticket:
        sms: Sms
        notes: Notes
        sale: Sale
+        volume: Volume
+        observation: Notes
        ticketAdvance: Advance tickets
        futureTickets: Future tickets
        purchaseRequest: Purchase request
        weeklyTickets: Weekly tickets
+        services: Service
+        tracking: Tracking
    list:
        nickname: Nickname
        state: State
@ -523,18 +613,6 @@ ticket:
        warehouse: Warehouse
        agency: Agency
 claim:
-    pageTitles:
-        claims: Claims
-        list: List
-        claimCreate: New claim
-        summary: Summary
-        basicData: Basic Data
-        lines: Lines
-        photos: Photos
-        development: Development
-        log: Audit logs
-        notes: Notes
-        action: Action
    list:
        customer: Customer
        assignedTo: Assigned
@ -598,14 +676,6 @@ claim:
        noData: 'There are no images/videos, click here or drag and drop the file'
        dragDrop: Drag and drop it here
 invoiceOut:
-    pageTitles:
-        invoiceOuts: Invoice out
-        list: List
-        negativeBases: Negative Bases
-        globalInvoicing: Global invoicing
-        invoiceOutCreate: Create invoice out
-        summary: Summary
-        basicData: Basic Data
    list:
        ref: Reference
        issued: Issued
@ -673,13 +743,6 @@ invoiceOut:
        errors:
            downloadCsvFailed: CSV download failed
 shelving:
-    pageTitles:
-        shelving: Shelving
-        shelvingList: Shelving List
-        shelvingCreate: New shelving
-        summary: Summary
-        basicData: Basic Data
-        log: Logs
    list:
        parking: Parking
        priority: Priority
@ -706,17 +769,6 @@ parking:
        info: You can search by parking code
        label: Search parking...
 invoiceIn:
-    pageTitles:
-        invoiceIns: Invoices In
-        list: List
-        invoiceInCreate: Create invoice in
-        summary: Summary
-        basicData: Basic data
-        vat: VAT
-        dueDay: Due day
-        intrastat: Intrastat
-        corrective: Corrective
-        log: Logs
    list:
        ref: Reference
        supplier: Supplier
@ -767,15 +819,6 @@ invoiceIn:
        stems: Stems
        country: Country
 order:
-    pageTitles:
-        order: Orders
-        orderList: List
-        orderCreate: New order
-        summary: Summary
-        basicData: Basic Data
-        catalog: Catalog
-        volume: Volume
-        lines: Lines
    field:
        salesPersonFk: Sales Person
        clientFk: Client
@ -850,7 +893,7 @@ worker:
        calendar: Calendar
        timeControl: Time control
        locker: Locker
-        formation: Formation
+        balance: Balance
    list:
        name: Name
        email: Email
@ -931,16 +974,14 @@ worker:
            remark: Bonficado
            hasDiploma: Diploma
    imageNotFound: Image not found
+    balance:
+        tableVisibleColumns:
+            paymentDate: Date
+            incomeType: Type
+            debit: Debt
+            credit: Have
+            concept: Concept
 wagon:
-    pageTitles:
-        wagons: Wagons
-        wagonsList: Wagons List
-        wagonCreate: Create wagon
-        wagonEdit: Edit wagon
-        typesList: Types List
-        typeCreate: Create type
-        typeEdit: Edit type
-        wagonCounter: Trolley counter
    type:
        name: Name
        submit: Submit
@ -969,31 +1010,7 @@ wagon:
        minHeightBetweenTrays: 'The minimum height between trays is '
        maxWagonHeight: 'The maximum height of the wagon is '
        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
-        cmrsList: CMRs list
-        RouteList: List
-        routeCreate: New route
-        basicData: Basic Data
-        summary: Summary
-        RouteRoadmap: Roadmaps
-        RouteRoadmapCreate: Create roadmap
-        tickets: Tickets
-        log: Log
-        autonomous: Autonomous
    cmr:
        list:
            results: results
@ -1021,22 +1038,6 @@ route:
        volume: Volume
        finished: Finished
 supplier:
-    pageTitles:
-        suppliers: Suppliers
-        supplier: Supplier
-        list: List
-        supplierCreate: New supplier
-        summary: Summary
-        basicData: Basic data
-        fiscalData: Fiscal data
-        billingData: Billing data
-        log: Log
-        accounts: Accounts
-        contacts: Contacts
-        addresses: Addresses
-        consumption: Consumption
-        agencyTerm: Agency agreement
-        dms: File management
    list:
        payMethod: Pay method
        payDeadline: Pay deadline
@ -1128,15 +1129,6 @@ supplier:
        date: Date
        reference: Reference
 travel:
-    pageTitles:
-        travel: Travels
-        list: List
-        summary: Summary
-        extraCommunity: Extra community
-        travelCreate: New travel
-        basicData: Basic data
-        history: Log
-        thermographs: Thermograph
    summary:
        confirmed: Confirmed
        entryId: Entry Id
@ -1183,24 +1175,6 @@ travel:
        travelFileDescription: 'Travel id { travelId }'
        file: File
 item:
-    pageTitles:
-        items: Items
-        list: List
-        diary: Diary
-        tags: Tags
-        create: Create
-        buyRequest: Buy requests
-        fixedPrice: Fixed prices
-        wasteBreakdown: Waste breakdown
-        itemCreate: New item
-        barcode: Barcodes
-        tax: Tax
-        log: Log
-        botanical: Botanical
-        shelving: Shelving
-        itemTypeCreate: New item type
-        family: Item Type
-        lastEntries: Last entries
    descriptor:
        item: Item
        buyer: Buyer
@ -1286,22 +1260,6 @@ item:
        minSalesQuantity: 'Cantidad mínima de venta'
        genus: 'Genus'
        specie: 'Specie'
-item/itemType:
-    pageTitles:
-        itemType: Item type
-        basicData: Basic data
-        summary: Summary
-monitor:
-    pageTitles:
-        monitors: Monitors
-        list: List
-zone:
-    pageTitles:
-        zones: Zones
-        zonesList: Zones
-        deliveryList: Delivery days
-        upcomingList: Upcoming deliveries
-
 components:
    topbar: {}
    itemsFilterPanel:
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@ -100,14 +100,143 @@ globals:
        modes: Modos
        zones: Zonas
        zonesList: Zonas
-        deliveryList: Días de entrega
-        upcomingList: Próximos repartos
+        deliveryDays: Días de entrega
+        upcomingDeliveries: Próximos repartos
        role: Role
        alias: Alias
        aliasUsers: Usuarios
        subRoles: Subroles
        inheritedRoles: Roles heredados
+        customers: Clientes
+        customerCreate: Nuevo cliente
+        list: Listado
+        webPayments: Pagos Web
+        extendedList: Listado extendido
+        notifications: Notificaciones
+        defaulter: Morosos
+        createCustomer: Crear cliente
+        fiscalData: Datos fiscales
+        billingData: Forma de pago
+        consignees: Consignatarios
+        notes: Notas
+        credits: Créditos
+        greuges: Greuges
+        balance: Balance
+        recoveries: Recobros
+        webAccess: Acceso web
+        sms: Sms
+        creditManagement: Gestión de crédito
+        creditContracts: Contratos de crédito
+        creditOpinion: Opinión de crédito
+        others: Otros
+        samples: Plantillas
+        consumption: Consumo
+        mandates: Mandatos
+        contacts: Contactos
+        webPayment: Pago web
+        fileManagement: Gestión documental
+        unpaid: Impago
+        entries: Entradas
+        buys: Compras
+        dms: Gestión documental
+        entryCreate: Nueva entrada
+        latestBuys: Últimas compras
+        tickets: Tickets
+        ticketCreate: Nuevo ticket
+        boxing: Encajado
+        sale: Lineas del pedido
+        claims: Reclamaciones
+        claimCreate: Crear reclamación
+        lines: Líneas
+        development: Trazabilidad
+        photos: Fotos
+        action: Acción
+        invoiceOuts: Fact. emitidas
+        negativeBases: Bases Negativas
+        globalInvoicing: Facturación global
+        invoiceOutCreate: Crear fact. emitida
+        order: Cesta
+        orderList: Listado
+        orderCreate: Nueva orden
+        catalog: Catálogo
+        volume: Volumen
+        shelving: Carros
+        shelvingList: Listado de carros
+        shelvingCreate: Nuevo carro
+        invoiceIns: Fact. recibidas
+        invoiceInCreate: Crear fact. recibida
+        vat: IVA
+        dueDay: Vencimiento
+        intrastat: Intrastat
+        corrective: Rectificativa
        workers: Trabajadores
+        workerCreate: Nuevo trabajador
+        department: Departamentos
+        pda: PDA
+        pbx: Centralita
+        calendar: Calendario
+        timeControl: Control de horario
+        locker: Taquilla
+        wagons: Vagones
+        wagonsList: Listado vagones
+        wagonCreate: Crear tipo
+        wagonEdit: Editar tipo
+        typesList: Listado tipos
+        typeCreate: Crear tipo
+        typeEdit: Editar tipo
+        wagonCounter: Contador de carros
+        roadmap: Troncales
+        stops: Paradas
+        routes: Rutas
+        cmrsList: Listado de CMRs
+        RouteList: Listado
+        routeCreate: Nueva ruta
+        RouteRoadmap: Troncales
+        RouteRoadmapCreate: Crear troncal
+        autonomous: Autónomos
+        suppliers: Proveedores
+        supplier: Proveedor
+        supplierCreate: Nuevo proveedor
+        accounts: Cuentas
+        addresses: Direcciones
+        agencyTerm: Acuerdo agencia
+        travel: Envíos
+        create: Crear
+        extraCommunity: Extra comunitarios
+        travelCreate: Nuevo envío
+        history: Historial
+        thermographs: Termógrafos
+        items: Artículos
+        diary: Histórico
+        tags: Etiquetas
+        fixedPrice: Precios fijados
+        buyRequest: Peticiones de compra
+        wasteBreakdown: Deglose de mermas
+        itemCreate: Nuevo artículo
+        tax: 'IVA'
+        botanical: 'Botánico'
+        barcode: 'Código de barras'
+        itemTypeCreate: Nueva familia
+        family: Familia
+        lastEntries: Últimas entradas
+        itemType: Familia
+        monitors: Monitores
+        dashboard: Tablón
+        users: Usuarios
+        createTicket: Crear ticket
+        ticketAdvance: Adelantar tickets
+        futureTickets: Tickets a futuro
+        purchaseRequest: Petición de compra
+        weeklyTickets: Tickets programados
+        formation: Formación
+        locations: Ubicaciones
+        warehouses: Almacenes
+        roles: Roles
+        connections: Conexiones
+        acls: ACLs
+        mailForwarding: Reenvío de correo
+        mailAlias: Alias de correo
+        privileges: Privilegios
    created: Fecha creación
    worker: Trabajador
    now: Ahora
@ -148,41 +277,8 @@ verifyEmail:
        verifyEmail: Verificación de correo
 dashboard:
    pageTitles:
-        dashboard: Tablón
+
 customer:
-    pageTitles:
-        customers: Clientes
-        customerCreate: Nuevo cliente
-        list: Listado
-        webPayments: Pagos Web
-        extendedList: Listado extendido
-        notifications: Notificaciones
-        defaulter: Morosos
-        createCustomer: Crear cliente
-        summary: Resumen
-        basicData: Datos básicos
-        fiscalData: Datos fiscales
-        billingData: Forma de pago
-        consignees: Consignatarios
-        notes: Notas
-        credits: Créditos
-        greuges: Greuges
-        balance: Balance
-        recoveries: Recobros
-        webAccess: Acceso web
-        log: Historial
-        sms: Sms
-        creditManagement: Gestión de crédito
-        creditContracts: Contratos de crédito
-        creditOpinion: Opinión de crédito
-        others: Otros
-        samples: Plantillas
-        consumption: Consumo
-        mandates: Mandatos
-        contacts: Contactos
-        webPayment: Pago web
-        fileManagement: Gestión documental
-        unpaid: Impago
    list:
        phone: Teléfono
        email: Email
@ -311,17 +407,6 @@ customer:
            hasCoreVnl: Recibido core VNL
            hasSepaVnl: Recibido B2B VNL
 entry:
-    pageTitles:
-        entries: Entradas
-        list: Listado
-        summary: Resumen
-        basicData: Datos básicos
-        buys: Compras
-        notes: Notas
-        dms: Gestión documental
-        log: Historial
-        entryCreate: Nueva entrada
-        latestBuys: Últimas compras
    list:
        newEntry: Nueva entrada
        landed: F. entrega
@ -444,10 +529,14 @@ ticket:
        sms: Sms
        notes: Notas
        sale: Lineas del pedido
+        volume: Volumen
+        observation: Notas
        ticketAdvance: Adelantar tickets
        futureTickets: Tickets a futuro
        purchaseRequest: Petición de compra
        weeklyTickets: Tickets programados
+        services: Servicios
+        tracking: Estados
    list:
        nickname: Alias
        state: Estado
@ -522,18 +611,6 @@ ticket:
        warehouse: Almacén
        agency: Agencia
 claim:
-    pageTitles:
-        claims: Reclamaciones
-        list: Listado
-        claimCreate: Crear reclamación
-        summary: Resumen
-        basicData: Datos básicos
-        lines: Líneas
-        development: Trazabilidad
-        photos: Fotos
-        log: Historial
-        notes: Notas
-        action: Acción
    list:
        customer: Cliente
        assignedTo: Asignada a
@ -597,14 +674,6 @@ claim:
        noData: No hay imágenes/videos haz click aquí o arrastra y suelta el archivo
        dragDrop: Arrástralo y sueltalo aquí
 invoiceOut:
-    pageTitles:
-        invoiceOuts: Fact. emitidas
-        list: Listado
-        negativeBases: Bases Negativas
-        globalInvoicing: Facturación global
-        invoiceOutCreate: Crear fact. emitida
-        summary: Resumen
-        basicData: Datos básicos
    list:
        ref: Referencia
        issued: Fecha emisión
@ -672,15 +741,6 @@ invoiceOut:
        errors:
            downloadCsvFailed: Error al descargar CSV
 order:
-    pageTitles:
-        order: Cesta
-        orderList: Listado
-        orderCreate: Nueva orden
-        summary: Resumen
-        basicData: Datos básicos
-        catalog: Catálogo
-        volume: Volumen
-        lines: Líneas
    field:
        salesPersonFk: Comercial
        clientFk: Cliente
@ -722,13 +782,6 @@ order:
        price: Precio
        amount: Monto
 shelving:
-    pageTitles:
-        shelving: Carros
-        shelvingList: Listado de carros
-        shelvingCreate: Nuevo carro
-        summary: Resumen
-        basicData: Datos básicos
-        log: Historial
    list:
        parking: Parking
        priority: Prioridad
@ -754,17 +807,6 @@ parking:
        info: Puedes buscar por código de parking
        label: Buscar parking...
 invoiceIn:
-    pageTitles:
-        invoiceIns: Fact. recibidas
-        list: Listado
-        invoiceInCreate: Crear fact. recibida
-        summary: Resumen
-        basicData: Datos básicos
-        vat: IVA
-        dueDay: Vencimiento
-        intrastat: Intrastat
-        corrective: Rectificativa
-        log: Historial
    list:
        ref: Referencia
        supplier: Proveedor
@ -846,7 +888,7 @@ worker:
        calendar: Calendario
        timeControl: Control de horario
        locker: Taquilla
-        formation: Formación
+        balance: Balance
    list:
        name: Nombre
        email: Email
@ -918,16 +960,14 @@ worker:
            remark: Bonficado
            hasDiploma: Diploma
    imageNotFound: No se ha encontrado la imagen
+    balance:
+        tableVisibleColumns:
+            paymentDate: Fecha
+            incomeType: Tipo
+            debit: Debe
+            credit: Haber
+            concept: Concepto
 wagon:
-    pageTitles:
-        wagons: Vagones
-        wagonsList: Listado vagones
-        wagonCreate: Crear tipo
-        wagonEdit: Editar tipo
-        typesList: Listado tipos
-        typeCreate: Crear tipo
-        typeEdit: Editar tipo
-        wagonCounter: Contador de carros
    type:
        name: Nombre
        submit: Guardar
@ -956,31 +996,7 @@ wagon:
        minHeightBetweenTrays: 'La distancia mínima entre bandejas es '
        maxWagonHeight: 'La altura máxima del vagón es '
        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
-        cmrsList: Listado de CMRs
-        RouteList: Listado
-        routeCreate: Nueva ruta
-        basicData: Datos básicos
-        summary: Resumen
-        RouteRoadmap: Troncales
-        RouteRoadmapCreate: Crear troncal
-        tickets: Tickets
-        log: Historial
-        autonomous: Autónomos
    cmr:
        list:
            results: resultados
@ -1008,22 +1024,6 @@ route:
        volume: Volumen
        finished: Finalizada
 supplier:
-    pageTitles:
-        suppliers: Proveedores
-        supplier: Proveedor
-        list: Listado
-        supplierCreate: Nuevo proveedor
-        summary: Resumen
-        basicData: Datos básicos
-        fiscalData: Datos fiscales
-        billingData: Forma de pago
-        log: Historial
-        accounts: Cuentas
-        contacts: Contactos
-        addresses: Direcciones
-        consumption: Consumo
-        agencyTerm: Acuerdo agencia
-        dms: Gestión documental
    list:
        payMethod: Método de pago
        payDeadline: Plazo de pago
@ -1115,16 +1115,6 @@ supplier:
        date: Fecha
        reference: Referencia
 travel:
-    pageTitles:
-        travel: Envíos
-        list: Listado
-        create: Crear
-        summary: Resumen
-        extraCommunity: Extra comunitarios
-        travelCreate: Nuevo envío
-        basicData: Datos básicos
-        history: Historial
-        thermographs: Termógrafos
    summary:
        confirmed: Confirmado
        entryId: Id entrada
@ -1171,24 +1161,6 @@ travel:
        travelFileDescription: 'Id envío { travelId }'
        file: Fichero
 item:
-    pageTitles:
-        items: Artículos
-        list: Listado
-        diary: Histórico
-        tags: Etiquetas
-        fixedPrice: Precios fijados
-        buyRequest: Peticiones de compra
-        wasteBreakdown: Deglose de mermas
-        itemCreate: Nuevo artículo
-        basicData: 'Datos básicos'
-        tax: 'IVA'
-        botanical: 'Botánico'
-        barcode: 'Código de barras'
-        log: Historial
-        shelving: Carros
-        itemTypeCreate: Nueva familia
-        family: Familia
-        lastEntries: Últimas entradas
    descriptor:
        item: Artículo
        buyer: Comprador
@ -1274,27 +1246,6 @@ item:
        achieved: 'Conseguido'
        concept: 'Concepto'
        state: 'Estado'
-item/itemType:
-    pageTitles:
-        itemType: Familia
-        basicData: Datos básicos
-        summary: Resumen
-zone:
-    pageTitles:
-        zones: Zonas
-        list: Zonas
-        deliveryList: Días de entrega
-        upcomingList: Próximos repartos
-role:
-    pageTitles:
-        zones: Zonas
-        list: Zonas
-        deliveryList: Días de entrega
-        upcomingList: Próximos repartos
-monitor:
-    pageTitles:
-        monitors: Monitores
-        list: Listado
 components:
    topbar: {}
    itemsFilterPanel:
--- a/src/pages/Account/Role/Card/RoleDescriptor.vue
+++ b/src/pages/Account/Role/Card/RoleDescriptor.vue
@ -15,6 +15,10 @@ const $props = defineProps({
        required: false,
        default: null,
    },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });

 const route = useRoute();
@ -60,14 +64,14 @@ const removeRole = () => {

 <template>
    <CardDescriptor
-        ref="descriptor"
-        :url="`VnRoles`"
+        :url="`VnRoles/${entityId}`"
        :filter="filter"
        module="Role"
        @on-fetch="setData"
        data-key="accountData"
        :title="data.title"
        :subtitle="data.subtitle"
+        :summary="$props.summary"
    >
        <template #menu>
            <QItem v-ripple clickable @click="removeRole()">
--- a/src/pages/Account/Role/Card/RoleDescriptorProxy.vue
+++ b/src/pages/Account/Role/Card/RoleDescriptorProxy.vue
@ -0,0 +1,17 @@
+<script setup>
+import RoleDescriptor from './RoleDescriptor.vue';
+import RoleSummary from './RoleSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <RoleDescriptor v-if="$props.id" :id="$props.id" :summary="RoleSummary" />
+    </QPopupProxy>
+</template>
--- a/src/pages/Account/Role/Card/RoleSummary.vue
+++ b/src/pages/Account/Role/Card/RoleSummary.vue
@ -30,6 +30,7 @@ const filter = {
        :url="`VnRoles`"
        :filter="filter"
        @on-fetch="(data) => (role = data)"
+        data-key="RoleSummary"
    >
        <template #header> {{ role.id }} - {{ role.name }} </template>
        <template #body>
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@ -224,7 +224,7 @@ async function changeState(value) {
            <QCard class="vn-one">
                <VnTitle
                    :url="`#/claim/${entityId}/basic-data`"
-                    :text="t('claim.pageTitles.basicData')"
+                    :text="t('globals.pageTitles.basicData')"
                />
                <VnLv
                    :label="t('claim.summary.created')"
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@ -65,6 +65,8 @@ const columns = computed(() => [
            url: 'Workers/activeWithInheritedRole',
            fields: ['id', 'name'],
            where: { role: 'salesPerson' },
+            optionFilter: 'firstName',
+            useLike: false,
        },
        create: true,
        columnField: {
--- a/src/pages/Customer/Defaulter/CustomerDefaulter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
@ -91,7 +91,6 @@ const tableColumnComponents = {
        props: (prop) => ({
            disable: true,
            'model-value': prop.value,
-            class: 'disabled-checkbox',
        }),
        event: () => {},
    },
--- a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
@ -119,7 +119,7 @@ const departments = ref();
                        emit-value
                        hide-selected
                        map-options
-                        option-label="country"
+                        option-label="name"
                        option-value="id"
                        outlined
                        rounded
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@ -209,7 +209,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                <QCardSection class="q-pa-none">
                    <VnTitle
                        :url="getLink('basic-data')"
-                        :text="t('invoiceIn.pageTitles.basicData')"
+                        :text="t('globals.pageTitles.basicData')"
                    />
                </QCardSection>
                <VnLv
@ -240,7 +240,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                <QCardSection class="q-pa-none">
                    <VnTitle
                        :url="getLink('basic-data')"
-                        :text="t('invoiceIn.pageTitles.basicData')"
+                        :text="t('globals.pageTitles.basicData')"
                    />
                </QCardSection>
                <VnLv
@ -265,7 +265,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                <QCardSection class="q-pa-none">
                    <VnTitle
                        :url="getLink('basic-data')"
-                        :text="t('invoiceIn.pageTitles.basicData')"
+                        :text="t('globals.pageTitles.basicData')"
                    />
                </QCardSection>
                <VnLv
@ -289,7 +289,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                <QCardSection class="q-pa-none">
                    <VnTitle
                        :url="getLink('basic-data')"
-                        :text="t('invoiceIn.pageTitles.basicData')"
+                        :text="t('globals.pageTitles.basicData')"
                    />
                </QCardSection>
                <QCardSection class="q-pa-none">
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@ -150,21 +150,19 @@ const downloadCSV = async () => {
        >
            <template #body-cell-clientId="{ row }">
                <QTd>
-                    <QBtn flat dense color="blue"> {{ row.clientId }}</QBtn>
+                    <QBtn flat dense class="link"> {{ row.clientId }}</QBtn>
                    <CustomerDescriptorProxy :id="row.clientId" />
                </QTd>
            </template>
            <template #body-cell-ticketId="{ row }">
                <QTd>
-                    <QBtn flat dense color="blue"> {{ row.ticketFk }}</QBtn>
+                    <QBtn flat dense class="link"> {{ row.ticketFk }}</QBtn>
                    <TicketDescriptorProxy :id="row.ticketFk" />
                </QTd>
            </template>
            <template #body-cell-worker="{ row }">
                <QTd>
-                    <QBtn class="no-uppercase" flat dense color="blue">{{
-                        row.workerName
-                    }}</QBtn>
+                    <QBtn class="no-uppercase link" flat dense>{{ row.workerName }}</QBtn>
                    <WorkerDescriptorProxy :id="row.comercialId" />
                </QTd>
            </template>
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue
@ -20,6 +20,7 @@ const props = defineProps({
        :data-key="props.dataKey"
        :search-button="true"
        :unremovable-params="['from', 'to']"
+        :hidden-tags="['from', 'to']"
    >
        <template #tags="{ tag, formatFn }">
            <div class="q-gutter-x-xs">
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@ -156,22 +156,18 @@ const onOrderFieldChange = (value, params) => {
        case 'Relevancy':
            tagObj.field = value + ' DESC, name';
            params.orderBy = JSON.stringify(tagObj);
-            console.log('params: ', params);
            break;
        case 'ColorAndPrice':
            tagObj.field = 'showOrder, price';
            params.orderBy = JSON.stringify(tagObj);
-            console.log('params: ', params);
            break;
        case 'Name':
            tagObj.field = 'name';
            params.orderBy = JSON.stringify(tagObj);
-            console.log('params: ', params);
            break;
        case 'Price':
            tagObj.field = 'price';
            params.orderBy = JSON.stringify(tagObj);
-            console.log('params: ', params);
            break;
    }
 };
@ -219,6 +215,7 @@ const useLang = (values) => {
        :expr-builder="exprBuilder"
        :custom-tags="['tagGroups']"
        @remove="clearFilter"
+        :redirect="false"
    >
        <template #tags="{ tag, formatFn }">
            <strong v-if="tag.label === 'categoryFk'">
--- a/src/pages/Order/Card/OrderForm.vue
+++ b/src/pages/Order/Card/OrderForm.vue
@ -122,8 +122,6 @@ const orderFilter = {
 const onClientChange = async (clientId) => {
    try {
        const { data } = await axios.get(`Clients/${clientId}`);
-        console.log('info cliente: ', data);
-
        await fetchAddressList(data.defaultAddressFk);
    } catch (error) {
        console.error('Error al cambiar el cliente:', error);
--- a/src/pages/Shelving/Card/ShelvingSummary.vue
+++ b/src/pages/Shelving/Card/ShelvingSummary.vue
@ -51,7 +51,7 @@ const filter = {
                        class="header header-link"
                        :to="{ name: 'ShelvingBasicData', params: { id: entityId } }"
                    >
-                        {{ t('shelving.pageTitles.basicData') }}
+                        {{ t('globals.pageTitles.basicData') }}
                        <QIcon name="open_in_new" />
                    </RouterLink>
                    <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
--- a/src/pages/Supplier/Card/SupplierConsumption.vue
+++ b/src/pages/Supplier/Card/SupplierConsumption.vue
@ -104,10 +104,14 @@ const totalEntryPrice = (rows) => {
    for (const row of rows) {
        let total = 0;
        let quantity = 0;
-        for (const buy of row.buys) {
-            total = total + buy.total;
-            quantity = quantity + buy.quantity;
+
+        if (row.buys) {
+            for (const buy of row.buys) {
+                total = total + buy.total;
+                quantity = quantity + buy.quantity;
+            }
        }
+
        row.total = total;
        row.quantity = quantity;
        totalPrice = totalPrice + total;
--- a/src/pages/Supplier/Card/SupplierConsumptionFilter.vue
+++ b/src/pages/Supplier/Card/SupplierConsumptionFilter.vue
@ -50,7 +50,7 @@ const itemCategoriesOptions = ref([]);
        @on-fetch="(data) => (itemCategoriesOptions = data)"
        auto-load
    />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true" :redirect="false">
        <template #tags="{ tag, formatFn }">
            <div class="q-gutter-x-xs">
                <strong>{{ t(`params.${tag.label}`) }}: </strong>
--- a/src/pages/Ticket/Card/TicketCreateServiceType.vue
+++ b/src/pages/Ticket/Card/TicketCreateServiceType.vue
@ -0,0 +1,49 @@
+<script setup>
+import { reactive, ref, onMounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
+
+const { t } = useI18n();
+const emit = defineEmits(['onDataSaved']);
+
+const nameInputRef = ref(null);
+const serviceFormData = reactive({});
+
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
+};
+
+onMounted(async () => {
+    await nextTick();
+    nameInputRef.value.focus();
+});
+</script>
+
+<template>
+    <FormModelPopup
+        url-create="TicketServiceTypes"
+        model="TicketServiceType"
+        :title="t('New service type')"
+        :form-initial-data="serviceFormData"
+        @on-data-saved="onDataSaved"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    ref="nameInputRef"
+                    :label="t('service.description')"
+                    v-model="data.name"
+                    :required="true"
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    New service type: Nuevo tipo de servicio
+</i18n>
--- a/src/pages/Ticket/Card/TicketCreateTracking.vue
+++ b/src/pages/Ticket/Card/TicketCreateTracking.vue
@ -0,0 +1,86 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FormModelPopup from 'components/FormModelPopup.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { useState } from 'src/composables/useState';
+
+const emit = defineEmits(['onRequestCreated']);
+
+const route = useRoute();
+const { t } = useI18n();
+const state = useState();
+const user = state.getUser();
+const stateFetchDataRef = ref(null);
+
+const statesOptions = ref([]);
+const workersOptions = ref([]);
+
+const onStateFkChange = (formData) => (formData.userFk = user.value.id);
+</script>
+<template>
+    <FetchData
+        ref="stateFetchDataRef"
+        url="States"
+        auto-load
+        @on-fetch="(data) => (statesOptions = data)"
+    />
+    <FetchData
+        url="Workers/search"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        auto-load
+        @on-fetch="(data) => (workersOptions = data)"
+    />
+    <FormModelPopup
+        :title="t('Create tracking')"
+        url-create="Tickets/state"
+        model="CreateTicketTracking"
+        :form-initial-data="{ ticketFk: route.params.id }"
+        @on-data-saved="() => emit('onRequestCreated')"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    v-model="data.stateFk"
+                    :label="t('tracking.state')"
+                    :options="statesOptions"
+                    @update:model-value="onStateFkChange(data)"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                />
+                <VnSelect
+                    :label="t('tracking.worker')"
+                    v-model="data.userFk"
+                    :options="workersOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                >
+                    <template #option="{ opt, itemProps }">
+                        <QItem v-bind="itemProps">
+                            <QItemSection>
+                                <QItemLabel>
+                                    {{ opt.name }}
+                                </QItemLabel>
+                                <QItemLabel caption>
+                                    {{ opt.nickname }}, {{ opt.code }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template></VnSelect
+                >
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+    es:
+        Create tracking: Crear estado
+</i18n>
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@ -71,7 +71,7 @@ const filter = {

 const data = ref(useCardDescription());
 const setData = (entity) =>
-    (data.value = useCardDescription(entity.client.name, entity.id));
+    (data.value = useCardDescription(entity.client?.name, entity.id));
 </script>

 <template>
@ -93,7 +93,7 @@ const setData = (entity) =>
                <template #value>
                    <span class="link">
                        {{ entity.clientFk }}
-                        <CustomerDescriptorProxy :id="entity.client.id" />
+                        <CustomerDescriptorProxy :id="entity.client?.id" />
                    </span>
                </template>
            </VnLv>
@ -110,8 +110,8 @@ const setData = (entity) =>
            <VnLv :label="t('ticket.summary.salesPerson')">
                <template #value>
                    <VnUserLink
-                        :name="entity.client.salesPersonUser?.name"
-                        :worker-id="entity.client.salesPersonFk"
+                        :name="entity.client?.salesPersonUser?.name"
+                        :worker-id="entity.client?.salesPersonFk"
                    />
                </template>
            </VnLv>
--- a/src/pages/Ticket/Card/TicketNotes.vue
+++ b/src/pages/Ticket/Card/TicketNotes.vue
@ -0,0 +1,106 @@
+<script setup>
+import { ref, watch, computed, reactive } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CrudModel from 'components/CrudModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+
+const route = useRoute();
+const { t } = useI18n();
+const ticketNotesCrudRef = ref(null);
+const observationTypes = ref([]);
+const arrayData = useArrayData('TicketNotes');
+const { store } = arrayData;
+
+const crudModelFilter = reactive({
+    where: { ticketFk: route.params.id },
+    fields: ['id', 'ticketFk', 'observationTypeFk', 'description'],
+});
+
+const crudModelRequiredData = computed(() => ({ ticketFk: route.params.id }));
+
+watch(
+    () => route.params.id,
+    async () => {
+        crudModelFilter.where.ticketFk = route.params.id;
+        store.filter = crudModelFilter;
+        await ticketNotesCrudRef.value.reload();
+    }
+);
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (observationTypes = data)"
+        auto-load
+        url="ObservationTypes"
+    />
+    <div class="flex justify-center">
+        <CrudModel
+            ref="ticketNotesCrudRef"
+            data-key="TicketNotes"
+            url="TicketObservations"
+            model="TicketNotes"
+            :filter="crudModelFilter"
+            :data-required="crudModelRequiredData"
+            :default-remove="false"
+            auto-load
+            style="max-width: 800px"
+        >
+            <template #body="{ rows }">
+                <QCard class="q-px-lg q-py-md">
+                    <div
+                        v-for="(row, index) in rows"
+                        :key="index"
+                        class="q-mb-md row items-center q-gutter-x-md"
+                    >
+                        <VnSelect
+                            :label="t('ticketNotes.observationType')"
+                            :options="observationTypes"
+                            hide-selected
+                            option-label="description"
+                            option-value="id"
+                            v-model="row.observationTypeFk"
+                            :disable="!!row.id"
+                        />
+                        <VnInput
+                            :label="t('ticketNotes.description')"
+                            v-model="row.description"
+                            class="col"
+                        />
+                        <QIcon
+                            name="delete"
+                            size="sm"
+                            class="cursor-pointer"
+                            color="primary"
+                            @click="ticketNotesCrudRef.remove([row])"
+                        >
+                            <QTooltip>
+                                {{ t('ticketNotes.removeNote') }}
+                            </QTooltip>
+                        </QIcon>
+                    </div>
+                    <VnRow v-if="observationTypes.length > rows.length">
+                        <QIcon
+                            name="add_circle"
+                            class="fill-icon-on-hover q-ml-md"
+                            size="sm"
+                            color="primary"
+                            @click="ticketNotesCrudRef.insert()"
+                        >
+                            <QTooltip>
+                                {{ t('ticketNotes.addNote') }}
+                            </QTooltip>
+                        </QIcon>
+                    </VnRow>
+                </QCard>
+            </template>
+        </CrudModel>
+    </div>
+</template>
--- a/src/pages/Ticket/Card/TicketService.vue
+++ b/src/pages/Ticket/Card/TicketService.vue
@ -0,0 +1,190 @@
+<script setup>
+import { ref, watch, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CrudModel from 'components/CrudModel.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import FetchData from 'components/FetchData.vue';
+import TicketCreateServiceType from './TicketCreateServiceType.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const ticketServiceTypeFetchRef = ref(null);
+const ticketServiceCrudRef = ref(null);
+const ticketServiceOptions = ref([]);
+const arrayData = useArrayData('TicketNotes');
+const { store } = arrayData;
+const { notify } = useNotify();
+
+const selected = ref([]);
+const defaultTaxClass = ref(null);
+
+const crudModelFilter = computed(() => ({
+    where: { ticketFk: route.params.id },
+}));
+
+const crudModelRequiredData = computed(() => ({
+    ticketFk: route.params.id,
+    taxClassFk: defaultTaxClass.value?.id,
+}));
+
+watch(
+    () => route.params.id,
+    async () => {
+        store.filter = crudModelFilter.value;
+        await ticketServiceCrudRef.value.reload();
+    }
+);
+
+onMounted(async () => await getDefaultTaxClass());
+
+const createRefund = async () => {
+    try {
+        if (!selected.value.length) return;
+
+        const params = {
+            servicesIds: selected.value.map((s) => +s.ticketFk),
+            withWarehouse: false,
+            negative: true,
+        };
+        const { data } = await axios.post('Sales/clone', params);
+        const [refundTicket] = data;
+        notify(
+            t('service.createRefundSuccess', {
+                ticketId: refundTicket.id,
+            }),
+            'positive'
+        );
+        router.push({ name: 'TicketSale', params: { id: refundTicket.id } });
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const getDefaultTaxClass = async () => {
+    try {
+        let filter = {
+            where: { code: 'G' },
+        };
+        const { data } = await axios.get('TaxClasses/findOne', {
+            params: { filter: JSON.stringify(filter) },
+        });
+        defaultTaxClass.value = data;
+        console.log('defaultTaxClass', defaultTaxClass.value);
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const columns = computed(() => [
+    {
+        name: 'description',
+        label: t('service.description'),
+        field: (row) => row.ticketServiceTypeFk,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'quantity',
+        label: t('service.quantity'),
+        field: (row) => row.quantity,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'price',
+        label: t('service.price'),
+        field: (row) => row.price,
+        sortable: true,
+        align: 'left',
+    },
+]);
+</script>
+
+<template>
+    <FetchData
+        ref="ticketServiceTypeFetchRef"
+        @on-fetch="(data) => (ticketServiceOptions = data)"
+        auto-load
+        url="TicketServiceTypes"
+    />
+    <CrudModel
+        ref="ticketServiceCrudRef"
+        data-key="TicketService"
+        url="TicketServices"
+        model="TicketService"
+        :filter="crudModelFilter"
+        :data-required="crudModelRequiredData"
+        auto-load
+        v-model:selected="selected"
+    >
+        <template #moreBeforeActions>
+            <QBtn
+                color="primary"
+                :label="t('service.pay')"
+                :disabled="!selected.length"
+                @click.stop="createRefund()"
+            />
+        </template>
+        <template #body="{ rows }">
+            <QTable
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                selection="multiple"
+                v-model:selected="selected"
+                table-header-class="text-left"
+            >
+                <template #body-cell-description="{ row, col }">
+                    <QTd auto-width>
+                        <VnSelectDialog
+                            :label="col.label"
+                            v-model="row.ticketServiceTypeFk"
+                            :options="ticketServiceOptions"
+                            option-label="name"
+                            option-value="id"
+                            hide-selected
+                        >
+                            <template #form>
+                                <TicketCreateServiceType
+                                    @on-data-saved="ticketServiceTypeFetchRef.fetch()"
+                                />
+                            </template>
+                        </VnSelectDialog>
+                    </QTd>
+                </template>
+                <template #body-cell-quantity="{ row, col }">
+                    <QTd auto-width>
+                        <VnInput
+                            :label="col.label"
+                            v-model.number="row.quantity"
+                            type="number"
+                            min="0"
+                            :info="t('service.quantityInfo')"
+                        />
+                    </QTd>
+                </template>
+                <template #body-cell-price="{ row, col }">
+                    <QTd auto-width>
+                        <VnInput
+                            :label="col.label"
+                            v-model.number="row.price"
+                            type="number"
+                            min="0"
+                        />
+                    </QTd>
+                </template>
+            </QTable>
+        </template>
+    </CrudModel>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn fab color="primary" icon="add" @click="ticketServiceCrudRef.insert()" />
+    </QPageSticky>
+</template>
--- a/src/pages/Ticket/Card/TicketTracking.vue
+++ b/src/pages/Ticket/Card/TicketTracking.vue
@ -0,0 +1,121 @@
+<script setup>
+import { ref, computed, watch, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import TicketCreateTracking from './TicketCreateTracking.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+
+import { toDateTimeFormat } from 'src/filters/date.js';
+
+const route = useRoute();
+const { t } = useI18n();
+const createTrackingDialogRef = ref(null);
+const paginateRef = ref(null);
+
+watch(
+    () => route.params.id,
+    async (val) => {
+        paginateFilter.where.ticketFk = val;
+        paginateRef.value.fetch();
+    }
+);
+
+const paginateFilter = reactive({
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['id', 'name'],
+                include: {
+                    relation: 'worker',
+                    scope: {
+                        fields: ['id'],
+                    },
+                },
+            },
+        },
+        {
+            relation: 'state',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+
+    order: ['created DESC'],
+    where: {
+        ticketFk: route.params.id,
+    },
+});
+
+const columns = computed(() => [
+    {
+        label: t('tracking.state'),
+        name: 'state',
+        field: 'state',
+        align: 'left',
+        format: (val) => val.name,
+    },
+    {
+        label: t('tracking.worker'),
+        name: 'worker',
+        align: 'left',
+    },
+    {
+        label: t('tracking.created'),
+        name: 'created',
+        field: 'created',
+        align: 'left',
+        format: (val) => toDateTimeFormat(val),
+    },
+]);
+
+const openCreateModal = () => createTrackingDialogRef.value.show();
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <VnPaginate
+            ref="paginateRef"
+            data-key="TicketTracking"
+            :filter="paginateFilter"
+            url="TicketTrackings"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :rows="rows"
+                    :columns="columns"
+                    row-key="id"
+                    :pagination="{ rowsPerPage: 0 }"
+                    class="full-width q-mt-md"
+                    :no-data-label="t('globals.noResults')"
+                >
+                    <template #body-cell-worker="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary">
+                                {{ row.user?.name }}
+                                <WorkerDescriptorProxy :id="row.user?.worker?.id" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                </QTable>
+            </template>
+        </VnPaginate>
+        <QDialog
+            ref="createTrackingDialogRef"
+            transition-show="scale"
+            transition-hide="scale"
+        >
+            <TicketCreateTracking @on-request-created="paginateRef.fetch()" />
+        </QDialog>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn @click="openCreateModal()" color="primary" fab icon="add" />
+            <QTooltip class="text-no-wrap">
+                {{ t('tracking.addState') }}
+            </QTooltip>
+        </QPageSticky>
+    </QPage>
+</template>
--- a/src/pages/Ticket/Card/TicketVolume.vue
+++ b/src/pages/Ticket/Card/TicketVolume.vue
@ -0,0 +1,153 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { dashIfEmpty } from 'src/filters';
+import axios from 'axios';
+
+const route = useRoute();
+const stateStore = useStateStore();
+const { t } = useI18n();
+const salesRef = ref(null);
+
+watch(
+    () => route.params.id,
+    async () => {
+        await nextTick();
+        salesRef.value?.fetch();
+    }
+);
+
+const salesFilter = computed(() => ({
+    include: { relation: 'item' },
+    order: 'concept',
+    where: { ticketFk: route.params.id },
+    limit: 20,
+}));
+
+const sales = ref([]);
+const packingTypeVolume = ref([]);
+const rows = computed(() => sales.value);
+
+const columns = computed(() => [
+    {
+        label: t('volume.item'),
+        name: 'item',
+        align: 'left',
+    },
+    {
+        label: t('volume.description'),
+        name: 'description',
+        align: 'left',
+    },
+    {
+        label: t('volume.packingType'),
+        name: 'quantity',
+        field: (row) => row.item.itemPackingTypeFk,
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('volume.quantity'),
+        name: 'quantity',
+        field: 'quantity',
+        align: 'left',
+    },
+    {
+        label: t('volume.volumeQuantity'),
+        name: 'quantity',
+        field: (row) => row.saleVolume?.volume,
+        align: 'left',
+    },
+]);
+
+const applyVolumes = async (salesData) => {
+    try {
+        if (!salesData.length) return;
+
+        sales.value = salesData;
+        const ticket = sales.value[0].ticketFk;
+        const { data } = await axios.get(`Tickets/${ticket}/getVolume`);
+        const volumes = new Map(data.saleVolume.map((volume) => [volume.saleFk, volume]));
+
+        sales.value.forEach((sale) => {
+            sale.saleVolume = volumes.get(sale.id);
+        });
+
+        packingTypeVolume.value = data.packingTypeVolume;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+onMounted(() => {
+    stateStore.rightDrawer = true;
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        ref="salesRef"
+        url="sales"
+        :filter="salesFilter"
+        @on-fetch="(data) => applyVolumes(data)"
+        auto-load
+    />
+    <RightMenu v-if="packingTypeVolume.length">
+        <template #right-panel>
+            <QCard
+                v-for="(packingType, index) in packingTypeVolume"
+                :key="index"
+                class="q-pa-md q-mb-md q-ma-md color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection class="column items-center" horizontal>
+                    <span>
+                        {{ t('volume.type') }}:
+                        {{ dashIfEmpty(packingType.description) }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <span> {{ t('volume.volume') }}: {{ packingType.volume }} </span>
+                </QCardSection>
+            </QCard>
+        </template>
+    </RightMenu>
+    <QTable
+        :rows="rows"
+        :columns="columns"
+        row-key="id"
+        :pagination="{ rowsPerPage: 0 }"
+        class="full-width q-mt-md"
+        :no-data-label="t('globals.noResults')"
+    >
+        <template #body-cell-item="{ row }">
+            <QTd>
+                <QBtn flat color="primary">
+                    {{ row.itemFk }}
+                    <ItemDescriptorProxy :id="row.itemFk" />
+                </QBtn>
+            </QTd>
+        </template>
+        <template #body-cell-description="{ row }">
+            <QTd>
+                <div class="column">
+                    <span>{{ row.item.name }}</span>
+                    <span class="color-vn-label">{{ row.item.subName }}</span>
+                    <FetchedTags :item="row.item" :max-length="6" />
+                </div>
+            </QTd>
+        </template>
+    </QTable>
+</template>
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@ -1,3 +1,19 @@
+card:
+    search: Search tickets
+    searchInfo: You can search by ticket id or alias
+volume:
+    item: Item
+    description: Description
+    packingType: Packing Type
+    quantity: Quantity
+    volumeQuantity: m³ per quantity
+    type: Type
+    volume: Volume
+ticketNotes:
+    observationType: Observation type
+    description: Description
+    removeNote: Remove note
+    addNote: Add note
 ticketSale:
    id: Id
    visible: Visible
@ -113,9 +129,6 @@ basicData:
    negativesConfirmMessage: Negatives are going to be generated, are you sure you want to advance all the lines?
    chooseAnOption: Choose an option
    unroutedTicket: The ticket has been unrouted
-card:
-    search: Search tickets
-    searchInfo: You can search by ticket id or alias
 purchaseRequest:
    id: Id
    description: Description
@ -136,3 +149,18 @@ weeklyTickets:
    salesperson: Salesperson
    search: Search weekly tickets
    searchInfo: Search weekly tickets by id or client id
+service:
+    pay: Pay
+    description: Description
+    quantity: Quantity
+    price: Price
+    removeService: Remove service
+    newService: New service type
+    addService: Add service
+    quantityInfo: To create services with negative amounts mark the service on the source ticket and press the pay button.
+    createRefundSuccess: 'The following refund ticket have been created: { ticketId }'
+tracking:
+    state: State
+    worker: Worker
+    created: Created
+    addState: Add state
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@ -1,6 +1,34 @@
+service:
+    pay: Abonar
+    description: Descripción
+    quantity: Cantidad
+    price: Precio
+    removeService: Quitar servicio
+    newService: Nuevo tipo de servicio
+    addService: Añadir servicio
+    quantityInfo: Para crear sevicios con cantidades negativas marcar servicio en el ticket origen y apretar el boton abonar.
+    createRefundSuccess: 'Se ha creado siguiente ticket de abono: { ticketId }'
+tracking:
+    state: Estado
+    worker: Trabajador
+    created: Fecha creación
+    addState: Añadir estado
 card:
    search: Buscar tickets
    searchInfo: Buscar tickets por identificador o alias
+volume:
+    item: Artículo
+    description: Descripción
+    packingType: Encajado
+    quantity: Cantidad
+    volumeQuantity: m³ por cantidad
+    type: Tipo
+    volume: Volumen
+ticketNotes:
+    observationType: Tipo de observación
+    description: Descripción
+    removeNote: Quitar nota
+    addNote: Añadir nota
 purchaseRequest:
    Id: Id
    description: Descripción
@ -112,8 +140,6 @@ futureTickets:
    moveTicketSuccess: Tickets movidos correctamente
    searchInfo: Buscar tickets por fecha
    futureTicket: Tickets a futuro
-Search ticket: Buscar tickets
-You can search by ticket id or alias: Puedes buscar por id o alias del ticket
 ticketSale:
    id: Id
    visible: Visible
@ -138,3 +164,5 @@ ticketSale:
    shipped: F. Envío
    agency: Agencia
    address: Consignatario
+Search ticket: Buscar tickets
+You can search by ticket id or alias: Puedes buscar por id o alias del ticket
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@ -49,7 +49,7 @@ const entriesTableColumns = computed(() => {
            showValue: false,
        },
        {
-            label: t('supplier.pageTitles.supplier'),
+            label: t('globals.pageTitles.supplier'),
            field: 'supplierName',
            name: 'supplierName',
            align: 'left',
@ -248,7 +248,7 @@ const getLink = (param) => `#/travel/${entityId.value}/${param}`;
                <QCardSection class="q-pa-none">
                    <VnTitle
                        :url="getLink('basic-data')"
-                        :text="t('travel.pageTitles.basicData')"
+                        :text="t('globals.pageTitles.basicData')"
                    />
                </QCardSection>
                <VnLv :label="t('globals.shipped')" :value="toDate(travel.shipped)" />
@ -266,7 +266,7 @@ const getLink = (param) => `#/travel/${entityId.value}/${param}`;
                <QCardSection class="q-pa-none">
                    <VnTitle
                        :url="getLink('basic-data')"
-                        :text="t('travel.pageTitles.basicData')"
+                        :text="t('globals.pageTitles.basicData')"
                    />
                </QCardSection>
                <VnLv :label="t('globals.landed')" :value="toDate(travel.landed)" />
@ -284,7 +284,7 @@ const getLink = (param) => `#/travel/${entityId.value}/${param}`;
                <QCardSection class="q-pa-none">
                    <VnTitle
                        :url="getLink('basic-data')"
-                        :text="t('travel.pageTitles.basicData')"
+                        :text="t('globals.pageTitles.basicData')"
                    />
                </QCardSection>
                <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@ -140,7 +140,7 @@ const columns = computed(() => [
        sortable: true,
    },
    {
-        label: t('supplier.pageTitles.supplier'),
+        label: t('globals.pageTitles.supplier'),
        field: 'cargoSupplierNickname',
        name: 'cargoSupplierNickname',
        align: 'left',
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@ -7,6 +7,7 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import axios from 'axios';

 const { t } = useI18n();
 const props = defineProps({
@ -20,6 +21,7 @@ const warehousesOptions = ref([]);
 const continentsOptions = ref([]);
 const agenciesOptions = ref([]);
 const suppliersOptions = ref([]);
+const warehousesByContinent = ref({});

 const add = (paramsObj, key) => {
    if (paramsObj[key] === undefined) {
@ -34,6 +36,28 @@ const decrement = (paramsObj, key) => {

    paramsObj[key]--;
 };
+
+const warehouses = async () => {
+    const warehousesResponse = await axios.get('Warehouses');
+    const countriesResponse = await axios.get('Countries');
+    const continentsResponse = await axios.get('Continents');
+
+    const countryContinentMap = countriesResponse.data.reduce((acc, country) => {
+        acc[country.id] = country.continentFk;
+        return acc;
+    }, {});
+
+    continentsResponse.data.forEach((continent) => {
+        const countriesInContinent = Object.keys(countryContinentMap).filter(
+            (countryId) => countryContinentMap[countryId] === continent.id.toString()
+        );
+
+        warehousesByContinent.value[continent.code] = warehousesResponse.data.filter(
+            (warehouse) => countriesInContinent.includes(warehouse.countryFk.toString())
+        );
+    });
+};
+warehouses();
 </script>

 <template>
@ -116,7 +140,6 @@ const decrement = (paramsObj, key) => {
                    <VnSelect
                        :label="t('params.agencyModeFk')"
                        v-model="params.agencyModeFk"
-                        @update:model-value="searchFn()"
                        :options="agenciesOptions"
                        option-value="agencyFk"
                        option-label="name"
@ -147,12 +170,26 @@ const decrement = (paramsObj, key) => {
                    />
                </QItemSection>
            </QItem>
-            <QItem>
+            <QItem v-if="warehousesByContinent[params.continent]">
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.warehouseOutFk')"
+                        v-model="params.warehouseOutFk"
+                        :options="warehousesByContinent[params.continent]"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-else>
                <QItemSection>
                    <VnSelect
                        :label="t('params.warehouseOutFk')"
                        v-model="params.warehouseOutFk"
-                        @update:model-value="searchFn()"
                        :options="warehousesOptions"
                        option-value="id"
                        option-label="name"
@ -168,7 +205,6 @@ const decrement = (paramsObj, key) => {
                    <VnSelect
                        :label="t('params.warehouseInFk')"
                        v-model="params.warehouseInFk"
-                        @update:model-value="searchFn()"
                        :options="warehousesOptions"
                        option-value="id"
                        option-label="name"
@ -182,9 +218,8 @@ const decrement = (paramsObj, key) => {
            <QItem>
                <QItemSection>
                    <VnSelect
-                        :label="t('supplier.pageTitles.supplier')"
+                        :label="t('globals.pageTitles.supplier')"
                        v-model="params.cargoSupplierFk"
-                        @update:model-value="searchFn()"
                        :options="suppliersOptions"
                        option-value="id"
                        option-label="name"
@ -200,7 +235,6 @@ const decrement = (paramsObj, key) => {
                    <VnSelect
                        :label="t('params.continent')"
                        v-model="params.continent"
-                        @update:model-value="searchFn()"
                        :options="continentsOptions"
                        option-value="code"
                        option-label="name"
--- a/src/pages/Worker/Card/WorkerBalance.vue
+++ b/src/pages/Worker/Card/WorkerBalance.vue
@ -0,0 +1,91 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import VnTable from 'components/VnTable/VnTable.vue';
+const tableRef = ref();
+const { t } = useI18n();
+const route = useRoute();
+const entityId = computed(() => route.params.id);
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'paymentDate',
+        label: t('worker.balance.tableVisibleColumns.paymentDate'),
+        create: true,
+        component: 'date',
+        field: 'paymentDate',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'incomeTypeFk',
+        label: t('worker.balance.tableVisibleColumns.incomeType'),
+        create: true,
+        component: 'select',
+        attrs: {
+            url: 'payrollComponents',
+            fields: ['id', 'name'],
+        },
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'debit',
+        label: t('worker.balance.tableVisibleColumns.debit'),
+        create: true,
+        component: 'input',
+        field: 'debit',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'credit',
+        label: t('worker.balance.tableVisibleColumns.credit'),
+        create: true,
+        component: 'input',
+        field: 'credit',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'concept',
+        label: t('worker.balance.tableVisibleColumns.concept'),
+        create: true,
+        component: 'input',
+        field: 'concept',
+        cardVisible: true,
+    },
+]);
+</script>
+
+<template>
+    <VnTable
+        ref="tableRef"
+        data-key="WorkerBalance"
+        :url="`Workers/${entityId}/incomes`"
+        :url-create="`Workers/${entityId}/incomes`"
+        save-url="WorkerIncomes/crud"
+        :create="{
+            urlCreate: 'workerIncomes',
+            title: t('Create workerBalance'),
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: {
+                workerFk: entityId,
+            },
+        }"
+        order="paymentDate DESC"
+        :columns="columns"
+        default-mode="table"
+        auto-load
+        :right-search="false"
+        :is-editable="true"
+        :use-model="true"
+    />
+</template>
+
+<i18n>
+    es:
+        Create workerBalance: Crear balance
+</i18n>
--- a/src/pages/Worker/Card/WorkerFormation.vue
+++ b/src/pages/Worker/Card/WorkerFormation.vue
@ -35,6 +35,7 @@ const columns = computed(() => [
            url: 'TrainingCourseTypes',
            fields: ['id', 'name'],
        },
+        cardVisible: true,
    },
    {
        align: 'left',
@ -52,6 +53,7 @@ const columns = computed(() => [
        component: 'date',
        field: 'ended',
        create: true,
+        cardVisible: true,
    },
    {
        align: 'left',
@ -63,6 +65,7 @@ const columns = computed(() => [
            url: 'TrainingCenters',
            fields: ['id', 'name'],
        },
+        cardVisible: true,
    },
    {
        align: 'left',
@ -78,6 +81,7 @@ const columns = computed(() => [
        component: 'input',
        field: 'amount',
        create: true,
+        cardVisible: true,
    },
    {
        align: 'left',
--- a/src/pages/Worker/Card/WorkerNotificationsManager.vue
+++ b/src/pages/Worker/Card/WorkerNotificationsManager.vue
@ -56,7 +56,6 @@ const swapEntry = (from, to, key) => {
 };

 function setNotifications(data) {
-    console.log('data: ', data);
    active.value = new Map(data.active);
    available.value = new Map(data.available);
 }
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@ -9,6 +9,7 @@ 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';
+import RoleDescriptorProxy from 'src/pages/Account/Role/Card/RoleDescriptorProxy.vue';

 const route = useRoute();
 const { t } = useI18n();
@ -161,7 +162,14 @@ const filter = {
                <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" />
+                <VnLv :label="t('worker.summary.role')">
+                    <template #value>
+                        <span class="link">
+                            {{ worker.user.role.name }}
+                            <RoleDescriptorProxy :id="worker.user.role.id" />
+                        </span>
+                    </template>
+                </VnLv>
                <VnLv :value="worker?.sip?.extension">
                    <template #label>
                        {{ t('worker.summary.sipExtension') }}
--- a/src/router/index.js
+++ b/src/router/index.js
@ -11,7 +11,6 @@ import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import { useRole } from 'src/composables/useRole';
 import { useUserConfig } from 'src/composables/useUserConfig';
-import { toLowerCamel } from 'src/filters';
 import { useTokenConfig } from 'src/composables/useTokenConfig';
 import { useAcl } from 'src/composables/useAcl';

@ -79,13 +78,11 @@ export default route(function (/* { store, ssrContext } */) {
        let title = t(`login.title`);

        const matches = to.matched;
-        let moduleName;
        if (matches && matches.length > 1) {
            const module = matches[1];
            const moduleTitle = module.meta && module.meta.title;
-            moduleName = toLowerCamel(module.name);
            if (moduleTitle) {
-                title = t(`${moduleName}.pageTitles.${moduleTitle}`);
+                title = t(`globals.pageTitles.${moduleTitle}`);
            }
        }

@ -94,7 +91,7 @@ export default route(function (/* { store, ssrContext } */) {
        if (childPageTitle && matches.length > 2) {
            if (title != '') title += ': ';

-            const moduleLocale = `${moduleName}.pageTitles.${childPageTitle}`;
+            const moduleLocale = `globals.pageTitles.${childPageTitle}`;
            const pageTitle = te(moduleLocale)
                ? t(moduleLocale)
                : t(`globals.pageTitles.${childPageTitle}`);
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@ -274,7 +274,7 @@ export default {
                    name: 'CustomerBalance',
                    meta: {
                        title: 'balance',
-                        icon: 'vn:invoice',
+                        icon: 'balance',
                    },
                    component: () =>
                        import('src/pages/Customer/Card/CustomerBalance.vue'),
--- a/src/router/modules/item.js
+++ b/src/router/modules/item.js
@ -201,15 +201,6 @@ export default {
                    },
                    component: () => import('src/pages/Item/Card/ItemLog.vue'),
                },
-                {
-                    path: 'botanical',
-                    name: 'ItemBotanical',
-                    meta: {
-                        title: 'botanical',
-                        icon: 'vn:botanical',
-                    },
-                    component: () => import('src/pages/Item/Card/ItemBotanical.vue'),
-                },
            ],
        },
    ],
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@ -19,6 +19,10 @@ export default {
            'TicketSale',
            'TicketLog',
            'TicketPurchaseRequest',
+            'TicketService',
+            'TicketTracking',
+            'TicketVolume',
+            'TicketNotes',
        ],
    },
    children: [
@ -29,8 +33,8 @@ export default {
            redirect: { name: 'TicketList' },
            children: [
                {
-                    name: 'TicketList',
                    path: 'list',
+                    name: 'TicketList',
                    meta: {
                        title: 'list',
                        icon: 'view_list',
@ -38,8 +42,8 @@ export default {
                    component: () => import('src/pages/Ticket/TicketList.vue'),
                },
                {
-                    name: 'TicketCreate',
                    path: 'create',
+                    name: 'TicketCreate',
                    meta: {
                        title: 'createTicket',
                        icon: 'vn:ticketAdd',
@ -48,8 +52,8 @@ export default {
                    component: () => import('src/pages/Ticket/TicketCreate.vue'),
                },
                {
-                    name: 'TicketWeekly',
                    path: 'weekly',
+                    name: 'TicketWeekly',
                    meta: {
                        title: 'weeklyTickets',
                        icon: 'access_time',
@ -57,8 +61,8 @@ export default {
                    component: () => import('src/pages/Ticket/TicketWeekly.vue'),
                },
                {
-                    name: 'TicketFuture',
                    path: 'future',
+                    name: 'TicketFuture',
                    meta: {
                        title: 'futureTickets',
                        icon: 'keyboard_double_arrow_right',
@ -66,8 +70,8 @@ export default {
                    component: () => import('src/pages/Ticket/TicketFuture.vue'),
                },
                {
-                    name: 'TicketAdvance',
                    path: 'advance',
+                    name: 'TicketAdvance',
                    meta: {
                        title: 'ticketAdvance',
                        icon: 'keyboard_double_arrow_left',
@ -83,8 +87,8 @@ export default {
            redirect: { name: 'TicketSummary' },
            children: [
                {
-                    name: 'TicketSummary',
                    path: 'summary',
+                    name: 'TicketSummary',
                    meta: {
                        title: 'summary',
                        icon: 'launch',
@ -92,8 +96,8 @@ export default {
                    component: () => import('src/pages/Ticket/Card/TicketSummary.vue'),
                },
                {
-                    name: 'TicketBasicData',
                    path: 'basic-data',
+                    name: 'TicketBasicData',
                    meta: {
                        title: 'basicData',
                        icon: 'vn:settings',
@ -102,8 +106,8 @@ export default {
                        import('src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue'),
                },
                {
-                    name: 'TicketSale',
                    path: 'sale',
+                    name: 'TicketSale',
                    meta: {
                        title: 'sale',
                        icon: 'vn:lines',
@ -120,6 +124,15 @@ export default {
                    component: () =>
                        import('src/pages/Ticket/Card/TicketPurchaseRequest.vue'),
                },
+                {
+                    path: 'tracking',
+                    name: 'TicketTracking',
+                    meta: {
+                        title: 'tracking',
+                        icon: 'vn:eye',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketTracking.vue'),
+                },
                {
                    path: 'log',
                    name: 'TicketLog',
@ -147,6 +160,34 @@ export default {
                    },
                    component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                },
+
+                {
+                    path: 'service',
+                    name: 'TicketService',
+                    meta: {
+                        title: 'services',
+                        icon: 'vn:services',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketService.vue'),
+                },
+                {
+                    path: 'volume',
+                    name: 'TicketVolume',
+                    meta: {
+                        title: 'volume',
+                        icon: 'vn:volume',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketVolume.vue'),
+                },
+                {
+                    path: 'observation',
+                    name: 'TicketNotes',
+                    meta: {
+                        title: 'notes',
+                        icon: 'vn:notes',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketNotes.vue'),
+                },
            ],
        },
    ],
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@ -23,6 +23,7 @@ export default {
            'WorkerDms',
            'WorkerTimeControl',
            'WorkerLocker',
+            'WorkerBalance',
            'WorkerFormation',
        ],
    },
@ -177,6 +178,15 @@ export default {
                    },
                    component: () => import('src/pages/Worker/Card/WorkerLocker.vue'),
                },
+                {
+                    name: 'WorkerBalance',
+                    path: 'balance',
+                    meta: {
+                        title: 'balance',
+                        icon: 'balance',
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerBalance.vue'),
+                },
                {
                    name: 'WorkerFormation',
                    path: 'formation',
--- a/src/stores/useNavigationStore.js
+++ b/src/stores/useNavigationStore.js
@ -60,7 +60,7 @@ export const useNavigationStore = defineStore('navigationStore', () => {
            menuChildren = menuChildren.map(({ name, title, icon }) => ({
                name,
                icon,
-                title: `${module}.pageTitles.${title}`,
+                title: `globals.pageTitles.${title}`,
            }));

        if (meta && meta.roles && role.hasAny(meta.roles) === false) return;
@ -70,7 +70,7 @@ export const useNavigationStore = defineStore('navigationStore', () => {
            children: menuChildren,
        };
        if (meta) {
-            item.title = `${module}.pageTitles.${meta.title}`;
+            item.title = `globals.pageTitles.${meta.title}`;
            item.icon = meta.icon;
        }

--- a/test/cypress/integration/agency/agencyWorkCenter.spec.js
+++ b/test/cypress/integration/agency/agencyWorkCenter.spec.js
@ -2,13 +2,10 @@ describe('AgencyWorkCenter', () => {
    beforeEach(() => {
        cy.viewport(1920, 1080);
        cy.login('developer');
-        cy.visit(`/#/agency`);
+        cy.visit(`/#/agency/11/workCenter`);
    });

    it('assign workCenter', () => {
-        cy.visit(`/#/agency`);
-        cy.get(':nth-child(1) > :nth-child(1) > .card-list-body > .list-items').click();
-        cy.get('[href="#/agency/11/workCenter"] > .q-item__section--main').click();
        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
        cy.get(
            '.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'
@ -17,8 +14,6 @@ describe('AgencyWorkCenter', () => {
    });

    it('delete workCenter', () => {
-        cy.get(':nth-child(1) > :nth-child(1) > .card-list-body > .list-items').click();
-        cy.get('[href="#/agency/11/workCenter"] > .q-item__section--main').click();
        cy.get('.q-item__section--side > .q-btn > .q-btn__content > .q-icon').click();
        cy.get('.q-notification__message').should(
            'have.text',
@ -27,9 +22,6 @@ describe('AgencyWorkCenter', () => {
    });

    it('error on duplicate workCenter', () => {
-        cy.visit(`/#/agency`);
-        cy.get(':nth-child(1) > :nth-child(1) > .card-list-body > .list-items').click();
-        cy.get('[href="#/agency/11/workCenter"] > .q-item__section--main').click();
        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
        cy.get(
            '.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'
--- a/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js
@ -6,15 +6,14 @@ describe('InvoiceInCorrective', () => {
    const saveDialog = '.q-card > .q-card__actions > .q-btn--standard ';

    it('should create a correcting invoice', () => {
+        cy.viewport(1280, 720);
        cy.login('developer');
        cy.visit(`/#/invoice-in/1/summary?limit=10`);

-        cy.openLeftMenu();
        cy.openActionsDescriptor();

        cy.get(createRectificative).click();
        cy.get(saveDialog).click();
-        cy.openLeftMenu();
        cy.get(rectificativeSection).click();
        cy.get('tbody > tr:visible').should('have.length', 1);
    });
--- a/test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js
@ -1,24 +1,20 @@
 describe('InvoiceInDescriptor', () => {
    const dialogBtns = '.q-card__actions button';
    const firstDescritorOpt = '.q-menu > .q-list > :nth-child(1) > .q-item__section';
-    const isBookedField =
-        '.q-card:nth-child(3) .vn-label-value:nth-child(5) > .value > span';
+    const isBookedField = '.q-card:nth-child(3) .vn-label-value:nth-child(5) .q-checkbox';

    it('should booking and unbooking the invoice properly', () => {
+        cy.viewport(1280, 720);
        cy.login('developer');
-        cy.visit(`/#/invoice-in/1/summary?limit=10`);
+        cy.visit('/#/invoice-in/1/summary');

-        cy.openLeftMenu();
        cy.openActionsDescriptor();
        cy.get(firstDescritorOpt).click();
        cy.get(dialogBtns).eq(1).click();
-        cy.get('.fullscreen').first().click();
-        cy.get(isBookedField).should('have.attr', 'title', 'true');
+        cy.get(isBookedField).should('have.attr', 'aria-checked', 'true');

-        cy.openLeftMenu();
-        cy.openActionsDescriptor();
        cy.get(firstDescritorOpt).click();
        cy.get(dialogBtns).eq(1).click();
-        cy.get(isBookedField).should('have.attr', 'title', 'false');
+        cy.get(isBookedField).should('have.attr', 'aria-checked', 'false');
    });
 });
--- a/test/cypress/integration/invoiceIn/invoiceInList.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInList.spec.js
@ -5,12 +5,11 @@ describe('InvoiceInList', () => {
        ':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-link';
-    const screen = '.q-page-container > .q-drawer-container > .fullscreen';

    beforeEach(() => {
+        cy.viewport(1920, 1080);
        cy.login('developer');
        cy.visit(`/#/invoice-in/list`);
-        cy.get(screen).click();
    });

    it('should redirect on clicking a invoice', () => {
--- a/test/cypress/integration/parking/parkingList.spec.js
+++ b/test/cypress/integration/parking/parkingList.spec.js
@ -8,9 +8,9 @@ describe('ParkingList', () => {
    const summaryHeader = '.summaryBody .header';

    beforeEach(() => {
+        cy.viewport(1920, 1080);
        cy.login('developer');
        cy.visit(`/#/parking/list`);
-        cy.closeSideMenu();
    });

    it('should redirect on clicking a parking', () => {
--- a/test/cypress/integration/vnSearchBar.spec.js
+++ b/test/cypress/integration/vnSearchBar.spec.js
@ -3,13 +3,10 @@ describe('VnSearchBar', () => {
    const employeeId = ' #1';
    const salesPersonId = ' #18';
    const idGap = '.q-item > .q-item__label';
-    const cardList = '.vn-card-list';
-
-    let url;
+    const vnTableRow = '.q-virtual-scroll__content';
    beforeEach(() => {
        cy.login('developer');
        cy.visit('#/customer/list');
-        cy.url().then((currentUrl) => (url = currentUrl));
    });

    it('should redirect to customer summary page', () => {
@ -19,12 +16,12 @@ describe('VnSearchBar', () => {

    it('should stay on the list page if there are several results or none', () => {
        cy.writeSearchbar('salesA{enter}');
-        checkCardListAndUrl(2);
+        checkTableLength(2);

        cy.clearSearchbar();

        cy.writeSearchbar('0{enter}');
-        checkCardListAndUrl(0);
+        checkTableLength(0);
    });

    const searchAndCheck = (searchTerm, expectedText) => {
@ -33,10 +30,7 @@ describe('VnSearchBar', () => {
        cy.get(idGap).should('have.text', expectedText);
    };

-    const checkCardListAndUrl = (expectedLength) => {
-        cy.get(cardList).then(($cardList) => {
-            expect($cardList.find('.q-card').length).to.equal(expectedLength);
-            cy.url().then((currentUrl) => expect(currentUrl).to.contain(url));
-        });
+    const checkTableLength = (expectedLength) => {
+        cy.get(vnTableRow).find('tr').should('have.length', expectedLength);
    };
 });
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@ -221,10 +221,6 @@ Cypress.Commands.add('openLeftMenu', (element) => {
    if (element) cy.waitForElement(element);
    cy.get('.q-toolbar > .q-btn--round.q-btn--dense > .q-btn__content > .q-icon').click();
 });
-Cypress.Commands.add('closeSideMenu', (element) => {
-    if (element) cy.waitForElement(element);
-    cy.get('.fullscreen.q-drawer__backdrop:not(.hidden)').click();
-});

 Cypress.Commands.add('clearSearchbar', (element) => {
    if (element) cy.waitForElement(element);
--- a/test/vitest/tests/components/Leftmenu.spec.js
+++ b/test/vitest/tests/components/Leftmenu.spec.js
@ -78,13 +78,13 @@ describe('Leftmenu', () => {
            {
                children: null,
                name: 'CustomerList',
-                title: 'customer.pageTitles.list',
+                title: 'globals.pageTitles.list',
                icon: 'view_list',
            },
            {
                children: null,
                name: 'CustomerCreate',
-                title: 'customer.pageTitles.createCustomer',
+                title: 'globals.pageTitles.createCustomer',
                icon: 'vn:addperson',
            },
        ];