Merge branch 'dev' into feature/TicketVolume

2024-07-01 14:48:12 +02:00 · 2024-07-01 14:48:12 +02:00 · 9bb75b8305
parent 5b07f3015d fc7f4fda49
commit 9bb75b8305
35 changed files with 339 additions and 153 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
--- 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/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 />
+        <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" square />
-            <QSkeleton type="QInput" square />
+        <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" square />
-            <QSkeleton type="QInput" square />
-        </div>
-        <div class="row q-gutter-md">
-            <QSkeleton type="QBtn" />
-            <QSkeleton type="QBtn" />
-        </div>
+        <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,
@ -60,13 +63,14 @@ const emit = defineEmits(['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 +79,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(
@ -94,12 +98,12 @@ async function search(evt) {

    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 +113,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 +127,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 = [];
@ -145,8 +149,8 @@ async function clearFilters() {

 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,7 +165,7 @@ const customTags = computed(() =>
 );

 async function remove(key) {
-    params.value[key] = undefined;
+    userParams.value[key] = undefined;
    search();
    emit('remove', key);
 }
@ -236,7 +240,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 +250,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">
+        <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>{{ $props.label }}</span>
+                    <span>{{ label }}</span>
                </slot>
            </div>
            <div class="value">
                <slot name="value">
-                <span :title="$props.value">
-                    {{ $props.dash ? dashIfEmpty($props.value) : $props.value }}
+                    <span :title="value">
+                        {{ dash ? dashIfEmpty(value) : value }}
                    </span>
                </slot>
            </div>
-        <div class="info" v-if="$props.info">
+            <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]">
-                    {{ $props.info }}
+                        {{ info }}
                    </QTooltip>
                </QIcon>
            </div>
-        <div class="copy" v-if="$props.copy && $props.value" @click="copyValueText()">
+            <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 {
+.vn-label-value {
+    &:hover .copy {
        visibility: visible;
        cursor: pointer;
-}
-.copy {
+    }
+
+    .label,
+    .value {
+        white-space: pre-line;
+        word-wrap: break-word;
+    }
+    .copy {
        visibility: hidden;
-}
-.info {
+    }
+
+    .info {
        margin-left: 5px;
+    }
+}
+
+:deep(.q-checkbox.disabled) {
+    opacity: 1 !important;
 }
 </style>
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@ -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
@ -445,6 +445,7 @@ ticket:
        notes: Notes
        sale: Sale
        volume: Volume
+        observation: Notes
        ticketAdvance: Advance tickets
        futureTickets: Future tickets
        purchaseRequest: Purchase request
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@ -444,6 +444,7 @@ ticket:
        notes: Notas
        sale: Lineas del pedido
        volume: Volumen
+        observation: Notas
        ticketAdvance: Adelantar tickets
        futureTickets: Tickets a futuro
        purchaseRequest: Petición de compra
--- 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/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/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/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;
+
+        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/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>
@ -92,7 +92,7 @@ const setData = (entity) =>
                <template #value>
                    <span class="link">
                        {{ entity.clientFk }}
-                        <CustomerDescriptorProxy :id="entity.client.id" />
+                        <CustomerDescriptorProxy :id="entity.client?.id" />
                    </span>
                </template>
            </VnLv>
@ -109,8 +109,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/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@ -9,6 +9,11 @@ volume:
    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
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@ -9,6 +9,11 @@ volume:
    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
--- 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"
@ -184,7 +220,6 @@ const decrement = (paramsObj, key) => {
                    <VnSelect
                        :label="t('supplier.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/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/modules/ticket.js
+++ b/src/router/modules/ticket.js
@ -20,6 +20,7 @@ export default {
            'TicketLog',
            'TicketPurchaseRequest',
            'TicketVolume',
+            'TicketNotes',
        ],
    },
    children: [
@ -157,6 +158,15 @@ export default {
                    },
                    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/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/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);
    };
 });