From 79fc503a0184a48fb7bb5e2efc10cea07ffa6cb7 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 18 Sep 2023 14:35:21 +0200
Subject: [PATCH 01/17] ref #6104 recreate vnlog

---
 package.json                                |    2 +-
 src/components/FetchData.vue                |    2 +-
 src/components/common/VnJsonValue.vue       |   88 ++
 src/components/common/VnLog.vue             | 1133 +++++++++++++++++--
 src/composables/useColor.js                 |   35 +
 src/composables/useFirstUpper.js            |    3 +
 src/composables/useIso8601.js               |   18 +
 src/css/app.scss                            |    6 +
 src/filters/index.js                        |    2 +
 src/filters/toRelativeDate.js               |   32 +
 src/i18n/en/index.js                        |    9 +
 src/i18n/es/index.js                        |    9 +
 src/stores/useValidationsStore.js           |   19 +
 test/cypress/integration/ClaimNotes.spec.js |    1 +
 test/cypress/integration/vnLog.spec.js      |   31 +
 test/cypress/integration/workerList.spec.js |   10 +-
 16 files changed, 1279 insertions(+), 121 deletions(-)
 create mode 100644 src/components/common/VnJsonValue.vue
 create mode 100644 src/composables/useColor.js
 create mode 100644 src/composables/useFirstUpper.js
 create mode 100644 src/composables/useIso8601.js
 create mode 100644 src/filters/toRelativeDate.js
 create mode 100644 src/stores/useValidationsStore.js
 create mode 100644 test/cypress/integration/vnLog.spec.js

diff --git a/package.json b/package.json
index b713c906a..8568d507d 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test:e2e": "cypress open",
-        "test:e2e:ci": "cypress run --browser chromium",
+        "test:e2e:ci": "cypress run --browser chrome",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
         "test:unit": "vitest",
         "test:unit:ci": "vitest run"
diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index 251d7502a..f0d908972 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -46,7 +46,7 @@ async function fetch() {
         if ($props.limit) filter.limit = $props.limit;
 
         const { data } = await axios.get($props.url, {
-            params: { filter },
+            params: { filter: JSON.stringify(filter) },
         });
 
         emit('onFetch', data);
diff --git a/src/components/common/VnJsonValue.vue b/src/components/common/VnJsonValue.vue
new file mode 100644
index 000000000..a2e858d0d
--- /dev/null
+++ b/src/components/common/VnJsonValue.vue
@@ -0,0 +1,88 @@
+<script setup>
+import { watch } from 'vue';
+import { toDateString } from 'src/filters';
+
+const props = defineProps({
+    value: { type: [String, Number, Boolean, Object], default: undefined },
+});
+
+const maxStrLen = 512;
+let t = '';
+let cssClass = '';
+let type;
+const updateValue = () => {
+    type = typeof props.value;
+
+    if (props.value == null) {
+        t = '∅';
+        cssClass = 'json-null';
+    } else {
+        cssClass = `json-${type}`;
+        switch (type) {
+            case 'number':
+                if (Number.isInteger(props.value)) {
+                    t = props.value.toString();
+                } else {
+                    t = (
+                        Math.round((props.value + Number.EPSILON) * 1000) / 1000
+                    ).toString();
+                }
+                break;
+            case 'boolean':
+                t = props.value ? '✓' : '✗';
+                cssClass = `json-${props.value ? 'true' : 'false'}`;
+                break;
+            case 'string':
+                t =
+                    props.value.length <= maxStrLen
+                        ? props.value
+                        : props.value.substring(0, maxStrLen) + '...';
+                break;
+            case 'object':
+                if (props.value instanceof Date) {
+                    t = toDateString(props.value);
+                } else {
+                    t = props.value.toString();
+                }
+                break;
+            default:
+                t = props.value.toString();
+        }
+    }
+};
+
+watch(() => props.value, updateValue);
+
+updateValue();
+</script>
+
+<template>
+    <span
+        :title="type === 'string' && props.value.length > maxStrLen ? props.value : ''"
+        :class="{ [cssClass]: t !== '' }"
+    >
+        {{ t }}
+    </span>
+</template>
+
+<style scoped>
+.json-string {
+    color: #d172cc;
+}
+.json-object {
+    color: #d1a572;
+}
+.json-number {
+    color: #85d0ff;
+}
+.json-true {
+    color: #7dc489;
+}
+.json-false {
+    color: #c74949;
+}
+.json-null {
+    color: #cd7c7c;
+    font-style: italic;
+}
+</style>
diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 1213c8bbc..7e3cfc408 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -1,128 +1,641 @@
 <script setup>
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { useSession } from 'src/composables/useSession';
+import axios from 'axios';
 import { useStateStore } from 'stores/useStateStore';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnLogFilter from 'src/components/common/VnLogFilter.vue';
-
-import { toDate } from 'src/filters';
+import { useValidationsStore } from 'src/stores/useValidationsStore';
+import { toRelativeDate, toDateString, toDateHour } from 'src/filters';
+import { useColor } from 'src/composables/useColor';
+import { useFirstUpper } from 'src/composables/useFirstUpper';
+import { useIso8601 } from 'src/composables/useIso8601';
+import VnAvatar from '../ui/VnAvatar.vue';
+import VnJsonValue from '../common/VnJsonValue.vue';
+import FetchData from '../FetchData.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const stateStore = useStateStore();
 const route = useRoute();
-const session = useSession();
-const token = session.getToken();
 const { t } = useI18n();
-
+const validationsStore = useValidationsStore();
 const props = defineProps({
     model: {
         type: String,
         default: null,
     },
 });
+const filter = {
+    fields: [
+        'id',
+        'originFk',
+        'userFk',
+        'action',
+        'changedModel',
+        'oldInstance',
+        'newInstance',
+        'creationDate',
+        'changedModel',
+        'changedModelId',
+        'changedModelValue',
+        'description',
+    ],
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['nickname', 'name', 'image'],
+                include: {
+                    relation: 'worker',
+                    scope: {
+                        fields: ['id'],
+                    },
+                },
+            },
+        },
+    ],
+};
 
-const columns = [
-    {
-        name: 'property',
-        label: 'Property',
-        field: (row) => t(`properties.${row.property}`),
-        align: 'left',
-    },
-    {
-        name: 'before',
-        label: 'Before',
-        field: (row) => formatValue(row.before),
-    },
-    {
-        name: 'after',
-        label: 'After',
-        field: (row) => formatValue(row.after),
-    },
+const workers = ref();
+const actions = ref();
+const changeInput = ref();
+const searchInput = ref();
+const userRadio = ref();
+const userSelect = ref();
+const date = ref();
+const dateDialog = ref(false);
+const dateTo = ref();
+const dateToDialog = ref(false);
+const selectedFilters = ref({});
+const userTypes = [
+    { label: 'All', value: undefined },
+    { label: 'User', value: { neq: null } },
+    { label: 'System', value: null },
 ];
+const checkboxOptions = ref({
+    insert: {
+        label: 'Creates',
+        selected: false,
+    },
+    update: {
+        label: 'Edits',
+        selected: false,
+    },
+    delete: {
+        label: 'Deletes',
+        selected: false,
+    },
+    select: {
+        label: 'Accesses',
+        selected: false,
+    },
+});
 
-function formatValue(value) {
-    if (typeof value === 'boolean') {
-        return value ? t('Yes') : t('No');
-    }
+let validations;
+let pointRecord = ref(null);
+let byRecord = ref(false);
+const logTree = ref([]);
 
-    if (isNaN(value) && !isNaN(Date.parse(value))) {
-        return toDate(value);
-    }
+const actionsText = {
+    insert: 'Creates',
+    update: 'Edits',
+    delete: 'Deletes',
+    select: 'Accesses',
+};
+const actionsClass = {
+    insert: 'success',
+    update: 'warning',
+    delete: 'alert',
+    select: 'notice',
+};
+const actionsIcon = {
+    insert: 'add',
+    update: 'edit',
+    delete: 'remove',
+    select: 'visibility',
+};
+const validDate = new RegExp(
+    /^(-?(?:[1-9][0-9]*)?[0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[12][0-9])/.source +
+        /T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/.source
+);
 
-    if (value === undefined) {
-        return t('Nothing');
-    }
+const filteredActions = ref([]);
+const filteredWorkers = ref([]);
 
-    return `"${value}"`;
+function castJsonValue(value) {
+    return typeof value === 'string' && validDate.test(value) ? new Date(value) : value;
 }
 
-function actionColor(action) {
-    if (action === 'insert') return 'positive';
-    if (action === 'update') return 'positive';
-    if (action === 'delete') return 'negative';
+function parseProps(propNames, locale, vals, olds) {
+    const props = [];
+
+    for (const prop of propNames) {
+        if (prop.endsWith('$')) continue;
+        props.push({
+            name: prop,
+            nameI18n: useFirstUpper(locale.columns?.[prop]) || prop,
+            val: getVal(vals, prop),
+            old: olds && getVal(olds, prop),
+        });
+    }
+    props.sort((a, b) => a.nameI18n.localeCompare(b.nameI18n));
+
+    function getVal(vals, prop) {
+        let val;
+        let id;
+        const showProp = `${prop}$`;
+
+        if (vals[showProp] != null) {
+            val = vals[showProp];
+            id = vals[prop];
+        } else val = vals[prop];
+
+        return { val: castJsonValue(val), id };
+    }
+
+    return props;
 }
+
+function getLogs(data) {
+    const logs = [];
+    let originLog = null;
+    let userLog = null;
+    let modelLog = null;
+    let prevLog, prevUser, prevModel;
+    let nLogs;
+
+    data.forEach((log) => {
+        const locale = validationsStore.validations[log.changedModel]?.locale || {};
+
+        // Origin
+        if (!prevLog || prevLog.originFk != log.originFk) {
+            logs.push((originLog = { originFk: log.originFk, logs: [] }));
+            prevLog = log;
+        }
+        // User
+        if (prevUser != log.userFk) {
+            originLog.logs.push(
+                (userLog = {
+                    user: log.user,
+                    userFk: log.userFk,
+                    logs: [],
+                })
+            );
+            prevUser = log.userFk;
+        }
+        // Model
+        if (
+            !prevModel ||
+            prevModel.changedModelId != log.changedModelId ||
+            prevModel.changedModel != log.changedModel ||
+            nLogs >= 6
+        ) {
+            userLog.logs.push(
+                (modelLog = {
+                    model: log.changedModel,
+                    modelI18n: useFirstUpper(locale.name) || log.changedModel,
+                    id: log.changedModelId,
+                    showValue: log.changedModelValue,
+                    logs: [],
+                })
+            );
+            prevModel = {
+                changedModelId: log.changedModelId,
+                changedModel: log.changedModel,
+            };
+            nLogs = 0;
+        }
+        nLogs++;
+        modelLog.logs.push(log);
+
+        // Changes
+        const notDelete = log.action != 'delete';
+        const olds = (notDelete ? log.oldInstance : null) || {};
+        const vals = (notDelete ? log.newInstance : log.oldInstance) || {};
+
+        let propNames = Object.keys(olds).concat(Object.keys(vals));
+        propNames = [...new Set(propNames)];
+
+        log.props = parseProps(propNames, locale, vals, olds);
+    });
+    return logs;
+}
+
+async function openPointRecord(id, modelLog) {
+    pointRecord.value = null;
+    const { data } = await axios.get(`${props.model}Logs/${id}/pitInstance`);
+    const propNames = Object.keys(data);
+    const locale = validationsStore.validations[modelLog.model]?.locale || {};
+    pointRecord.value = parseProps(propNames, locale, data);
+}
+async function setLogTree() {
+    if (!validations) {
+        validations = await validationsStore.fetchModels();
+    }
+    filter.where = { and: [{ originFk: route.params.id }] };
+    const { data } = await axios.get(`${props.model}Logs`, {
+        params: { filter: JSON.stringify(filter) },
+    });
+    logTree.value = getLogs(data);
+}
+
+function filterByRecord(modelLog) {
+    byRecord.value = true;
+    const { id, model } = modelLog;
+
+    searchInput.value = id;
+    selectedFilters.value.changedModelId = id;
+    selectedFilters.value.changedModel = model;
+    applyFilter();
+}
+
+async function applyFilter() {
+    filter.where = { and: [] };
+    if (
+        !selectedFilters.value.changedModel ||
+        (!selectedFilters.value.changedModelValue &&
+            !selectedFilters.value.changedModelId)
+    )
+        byRecord.value = false;
+
+    if (!byRecord.value) filter.where.and.push({ originFk: route.params.id });
+
+    if (Object.keys(selectedFilters.value).length) {
+        filter.where.and.push(selectedFilters.value);
+    }
+
+    const { data } = await axios.get(`${props.model}Logs`, {
+        params: { filter: JSON.stringify(filter) },
+    });
+
+    logTree.value = getLogs(data);
+}
+
+function setDate(type) {
+    const from = date.value
+        ? useIso8601(date.value.split('-').reverse().join('-'))
+        : undefined;
+    const to = dateTo.value
+        ? useIso8601(`${dateTo.value.split('-').reverse().join('-')} 21:59:59.999`)
+        : useIso8601(`${date.value.split('-').reverse().join('-')} 21:59:59.999`);
+
+    switch (type) {
+        case 'from':
+            return { between: [from, to] };
+        case 'to': {
+            if (date.value) {
+                return {
+                    between: [from, to],
+                };
+            } else {
+                return { lte: to };
+            }
+        }
+    }
+}
+
+function selectFilter(type, dateType) {
+    const filter = {};
+    const actions = { inq: [] };
+    let reload = true;
+
+    if (type === 'search') {
+        if (/^\s*[0-9]+\s*$/.test(searchInput.value) || props.byRecord) {
+            selectedFilters.value.changedModelId = searchInput.value.trim();
+        } else if (!searchInput.value) {
+            selectedFilters.value.changedModelId = undefined;
+            selectedFilters.value.changedModelValue = undefined;
+        } else {
+            selectedFilters.value.changedModelValue = { like: `%${searchInput.value}%` };
+        }
+    }
+    if (type === 'action' && selectedFilters.value.changedModel === null) {
+        selectedFilters.value.changedModel = undefined;
+        reload = false;
+    }
+    if (type === 'userRadio') {
+        selectedFilters.value.userFk = userRadio.value;
+    }
+    if (type === 'change') {
+        if (changeInput.value)
+            selectedFilters.value.or = [
+                { oldJson: { like: `%${changeInput.value}%` } },
+                { newJson: { like: `%${changeInput.value}%` } },
+                { description: { like: `%${changeInput.value}%` } },
+            ];
+        else selectedFilters.value.or = undefined;
+    }
+    if (type === 'userSelect') {
+        selectedFilters.value.userFk =
+            userSelect.value !== null ? userSelect.value : undefined;
+    }
+    if (type === 'date') {
+        if (!date.value && !dateTo.value) {
+            selectedFilters.value.creationDate = undefined;
+        } else if (dateType === 'to') {
+            selectedFilters.value.creationDate = setDate('to');
+        } else if (dateType === 'from') {
+            selectedFilters.value.creationDate = setDate('from');
+        }
+    }
+
+    Object.keys(checkboxOptions.value).forEach((key) => {
+        if (checkboxOptions.value[key].selected) actions.inq.push(key);
+    });
+    selectedFilters.value.action = actions.inq.length ? actions : undefined;
+
+    Object.keys(selectedFilters.value).forEach((key) => {
+        if (selectedFilters.value[key]) filter[key] = selectedFilters.value[key];
+    });
+
+    if (reload) applyFilter(filter);
+}
+
+async function clearFilter() {
+    selectedFilters.value = {};
+    byRecord.value = false;
+    userSelect.value = undefined;
+    searchInput.value = undefined;
+    changeInput.value = undefined;
+    date.value = undefined;
+    dateTo.value = undefined;
+    Object.keys(checkboxOptions.value).forEach(
+        (opt) => (checkboxOptions.value[opt].selected = false)
+    );
+    await applyFilter();
+}
+
+function filterFn(val, update, abortFn, type) {
+    if (!val) {
+        update(() => {
+            if (type === 'actions') filteredActions.value = actions.value;
+            if (type === 'workers') filteredWorkers.value = workers.value;
+        });
+        return;
+    }
+
+    update(() => {
+        const needle = val.toLowerCase();
+        if (type === 'actions')
+            filteredActions.value = actions.value.filter((item) =>
+                item.toLowerCase().includes(needle)
+            );
+        if (type === 'workers') {
+            if (isNaN(needle))
+                filteredWorkers.value = workers.value.filter(
+                    (item) =>
+                        item.name.toLowerCase().includes(needle) ||
+                        item.nickname.toLowerCase().includes(needle)
+                );
+            else
+                filteredWorkers.value = workers.value.filter((item) => item.id == needle);
+        }
+    });
+}
+
+setLogTree();
 </script>
 <template>
-    <div class="column items-center">
-        <QTimeline class="q-pa-md">
-            <QTimelineEntry heading tag="h4"> {{ t('Audit logs') }} </QTimelineEntry>
-            <VnPaginate
-                :data-key="`${props.model}Logs`"
-                :url="`${props.model}s/${route.params.id}/logs`"
-                order="id DESC"
-                :offset="100"
-                :limit="5"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <template v-for="log of rows" :key="log.id">
-                        <QTimelineEntry
-                            :avatar="`/api/Images/user/160x160/${log.userFk}/download?access_token=${token}`"
-                        >
-                            <template #subtitle>
-                                {{ log.userName }} -
-                                {{
-                                    toDate(log.created, {
-                                        dateStyle: 'medium',
-                                        timeStyle: 'short',
-                                    })
-                                }}
-                            </template>
-                            <template #title>
-                                <QChip :color="actionColor(log.action)">
-                                    {{ t(`actions.${log.action}`) }}
-                                </QChip>
-                                {{ t(`models.${log.model}`) }}
-                            </template>
-                            <QTable
-                                :rows="log.changes"
-                                :columns="columns"
-                                row-key="property"
-                                hide-pagination
+    <FetchData
+        :url="`${props.model}Logs/${route.params.id}/editors`"
+        :filter="{
+            fields: ['id', 'nickname', 'name', 'image'],
+            order: 'nickname',
+            limit: 30,
+        }"
+        @on-fetch="(data) => (workers = data)"
+        auto-load
+    />
+    <FetchData
+        :url="`${props.model}Logs/${route.params.id}/models`"
+        :filter="{ order: ['changedModel'] }"
+        @on-fetch="(data) => (actions = data.map((item) => item.changedModel))"
+        auto-load
+    />
+    <div
+        class="column items-center logs origin-log"
+        v-for="(originLog, originLogIndex) in logTree"
+        :key="originLogIndex"
+    >
+        <QItem class="origin-info items-center q-my-md" v-if="logTree.length > 1">
+            <h6 class="origin-id">
+                {{ originLog.modelI18n }}
+                #{{ originLog.originFk }}
+            </h6>
+            <div class="line"></div>
+        </QItem>
+        <div
+            class="user-log q-mb-sm row"
+            v-for="(userLog, userIndex) in originLog.logs"
+            :key="userIndex"
+        >
+            <div class="timeline">
+                <div class="user-avatar">
+                    <VnAvatar
+                        class="cursor-pointer"
+                        :worker="userLog.user.id"
+                        :title="userLog.user.nickname"
+                    />
+                    <WorkerDescriptorProxy
+                        v-if="userLog.user.image"
+                        :id="userLog.user.id"
+                    />
+                </div>
+                <div class="arrow bg-panel" v-if="byRecord"></div>
+                <div class="line"></div>
+            </div>
+            <QList class="user-changes" v-if="userLog">
+                <QItem
+                    class="model-log column q-px-none q-py-xs"
+                    v-for="(modelLog, modelLogIndex) in userLog.logs"
+                    :key="modelLogIndex"
+                >
+                    <QItemSection>
+                        <QItemLabel class="model-info q-mb-xs" v-if="!byRecord">
+                            <QChip
                                 dense
-                                flat
+                                size="md"
+                                class="model-name q-mr-xs text-white"
+                                v-if="
+                                    !(modelLog.changedModel && modelLog.changedModelId) &&
+                                    modelLog.model
+                                "
+                                :style="{
+                                    backgroundColor: useColor(modelLog.model),
+                                }"
+                                :title="modelLog.model"
                             >
-                                <template #header="propsLabel">
-                                    <QTr :props="propsLabel">
-                                        <QTh
-                                            v-for="col in propsLabel.cols"
-                                            :key="col.name"
-                                            :props="propsLabel"
+                                {{ t(modelLog.modelI18n) }}
+                            </QChip>
+                            <span class="model-id" v-if="modelLog.id"
+                                >#{{ modelLog.id }}</span
+                            >
+                            <span class="model-value" :title="modelLog.showValue">
+                                {{ modelLog.showValue }}
+                            </span>
+                            <QBtn
+                                flat
+                                round
+                                color="grey"
+                                class="q-mr-xs q-ml-auto"
+                                size="sm"
+                                icon="filter_alt"
+                                :title="t('recordChanges')"
+                                @click.stop="filterByRecord(modelLog)"
+                            />
+                        </QItemLabel>
+                    </QItemSection>
+                    <QItemSection>
+                        <QCard
+                            class="changes-log q-py-none"
+                            v-for="(log, logIndex) in modelLog.logs"
+                            :key="logIndex"
+                        >
+                            <QCardSection class="change-info q-pa-none">
+                                <QItem
+                                    class="q-px-sm q-py-xs justify-between items-center"
+                                >
+                                    <div
+                                        class="date text-grey text-caption q-mr-sm"
+                                        :title="
+                                            toDateHour(log.creationDate) ??
+                                            `date:'dd/MM/yyyy HH:mm:ss'`
+                                        "
+                                    >
+                                        {{ toRelativeDate(log.creationDate) }}
+                                    </div>
+                                    <div>
+                                        <QBtn
+                                            color="grey"
+                                            class="pit"
+                                            icon="preview"
+                                            flat
+                                            round
+                                            :title="t('pointRecord')"
+                                            padding="xs"
+                                            v-if="log.action != 'insert'"
+                                            @click.stop="
+                                                openPointRecord(log.id, modelLog)
+                                            "
                                         >
-                                            {{ t(col.label) }}
-                                        </QTh>
-                                    </QTr>
-                                </template>
-                            </QTable>
-                        </QTimelineEntry>
-                    </template>
-                </template>
-            </VnPaginate>
-        </QTimeline>
+                                            <QPopupProxy>
+                                                <QCard v-if="pointRecord">
+                                                    <div
+                                                        class="header q-px-sm q-py-xs q-ma-none text-white text-bold bg-primary"
+                                                    >
+                                                        {{ modelLog.modelI18n }}
+                                                        <span v-if="modelLog.id"
+                                                            >#{{ modelLog.id }}</span
+                                                        >
+                                                    </div>
+                                                    <QCardSection
+                                                        class="change-detail q-pa-sm"
+                                                    >
+                                                        <QItem
+                                                            v-for="(
+                                                                value, index
+                                                            ) in pointRecord"
+                                                            :key="index"
+                                                            class="q-pa-none"
+                                                        >
+                                                            <span
+                                                                class="json-field q-mr-xs text-grey"
+                                                                :title="value.name"
+                                                            >
+                                                                {{ value.nameI18n }}:
+                                                            </span>
+                                                            <VnJsonValue
+                                                                :value="value.val.val"
+                                                            />
+                                                        </QItem>
+                                                    </QCardSection>
+                                                </QCard>
+                                            </QPopupProxy>
+                                        </QBtn>
+                                        <QIcon
+                                            class="action q-ml-xs"
+                                            :class="actionsClass[log.action]"
+                                            :name="actionsIcon[log.action]"
+                                            :title="
+                                                t(`actions.${actionsText[log.action]}`)
+                                            "
+                                        />
+                                    </div>
+                                </QItem>
+                            </QCardSection>
+                            <QCardSection
+                                class="change-detail q-px-sm q-py-xs"
+                                :class="{ expanded: log.expand }"
+                                v-if="log.props.length || log.description"
+                            >
+                                <QIcon
+                                    class="cursor-pointer q-mr-md"
+                                    color="grey"
+                                    name="expand_more"
+                                    :title="t('globals.details')"
+                                    size="sm"
+                                    @click="log.expand = !log.expand"
+                                />
+                                <QList v-if="log.props.length" class="attributes">
+                                    <QItem v-if="!log.expand" class="q-pa-none text-grey">
+                                        <span
+                                            v-for="(prop, propIndex) in log.props"
+                                            :key="propIndex"
+                                            class="basic-json"
+                                        >
+                                            <span class="json-field" :title="prop.name">
+                                                {{ prop.nameI18n }}:
+                                            </span>
+                                            <VnJsonValue :value="prop.val.val" />
+                                            <span v-if="propIndex < log.props.length - 1">
+                                                ,
+                                            </span>
+                                        </span>
+                                    </QItem>
+                                    <QItem
+                                        v-if="log.expand"
+                                        class="expanded-json column q-pa-none"
+                                    >
+                                        <div
+                                            v-for="(prop, prop2Index) in log.props"
+                                            :key="prop2Index"
+                                            class="q-pa-none text-grey"
+                                        >
+                                            <span class="json-field" :title="prop.name">
+                                                {{ prop.nameI18n }}:
+                                            </span>
+                                            <VnJsonValue :value="prop.val.val" />
+                                            <span v-if="prop.val.id" class="id-value">
+                                                #{{ prop.val.id }}
+                                            </span>
+                                            <span v-if="log.action == 'update'">
+                                                ←
+                                                <VnJsonValue :value="prop.old.val" />
+                                                <span v-if="prop.old.id" class="id-value">
+                                                    #{{ prop.old.id }}
+                                                </span>
+                                            </span>
+                                        </div>
+                                    </QItem>
+                                </QList>
+                                <span v-if="!log.props.length" class="description">
+                                    {{ log.description }}
+                                </span>
+                            </QCardSection>
+                        </QCard>
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </div>
     </div>
     <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">
         <div class="row q-gutter-x-sm">
-            <QBtn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
+            <QBtn
+                flat
+                @click.stop="stateStore.toggleRightDrawer()"
+                round
+                dense
+                icon="menu"
+            >
                 <QTooltip bottom anchor="bottom right">
                     {{ t('globals.collapseMenu') }}
                 </QTooltip>
@@ -131,28 +644,414 @@ function actionColor(action) {
     </Teleport>
     <QDrawer v-model="stateStore.rightDrawer" show-if-above side="right" :width="300">
         <QScrollArea class="fit text-grey-8">
-            <VnLogFilter :data-key="`${props.model}Logs`" />
+            <QList dense>
+                <QSeparator />
+                <QItem class="q-mt-sm">
+                    <QInput
+                        :label="t('globals.search')"
+                        v-model="searchInput"
+                        class="full-width"
+                        clearable
+                        clear-icon="close"
+                        @keyup.enter="() => selectFilter('search')"
+                        @focusout="() => selectFilter('search')"
+                        @clear="() => selectFilter('search')"
+                    >
+                        <template #append>
+                            <QIcon name="info" class="cursor-pointer">
+                                <QTooltip>{{ t('tooltips.search') }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QSelect
+                        class="full-width"
+                        v-model="selectedFilters.changedModel"
+                        @update:model-value="selectFilter('action')"
+                        :options="filteredActions"
+                        :label="t('globals.entity')"
+                        use-input
+                        clearable
+                        clear-icon="close"
+                        @filter="
+                            (val, update, abortFn) =>
+                                filterFn(val, update, abortFn, 'actions')
+                        "
+                        @clear="() => selectFilter('action')"
+                    >
+                        <template #option="{ opt, index, itemProps }">
+                            <QItem :index="index" v-bind="itemProps">
+                                {{ t(`models.${opt}`) }}
+                            </QItem>
+                        </template>
+                        <template #selected-item="{ opt }">
+                            {{ t(opt) }}
+                        </template>
+                    </QSelect>
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QOptionGroup
+                        size="sm"
+                        v-model="userRadio"
+                        :options="userTypes"
+                        color="primary"
+                        @update:model-value="selectFilter('userRadio')"
+                        right-label
+                    >
+                        <template #label="{ label }">
+                            {{ t(`Users.${label}`) }}
+                        </template>
+                    </QOptionGroup>
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QItemSection v-if="!workers">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="workers">
+                        <QSelect
+                            :label="t('globals.user')"
+                            v-model="userSelect"
+                            @update:model-value="selectFilter('userSelect')"
+                            :options="filteredWorkers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            clearable
+                            clear-icon="close"
+                            @filter="
+                                (val, update, abortFn) =>
+                                    filterFn(val, update, abortFn, 'workers')
+                            "
+                        >
+                            <template #option="{ opt, itemProps }">
+                                <QItem
+                                    v-bind="itemProps"
+                                    class="q-pa-xs row items-center"
+                                >
+                                    <QItemSection class="col-3 items-center">
+                                        <VnAvatar :worker="opt.id" />
+                                    </QItemSection>
+                                    <QItemSection class="col-9 justify-center">
+                                        <span>{{ opt.name }}</span>
+                                        <span class="text-grey">{{ opt.nickname }}</span>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </QSelect>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QInput
+                        :label="t('globals.changes')"
+                        v-model="changeInput"
+                        class="full-width"
+                        clearable
+                        clear-icon="close"
+                        @keyup.enter="selectFilter('change')"
+                        @focusout="selectFilter('change')"
+                        @clear="selectFilter('change')"
+                    >
+                        <template #append>
+                            <QIcon name="info" class="cursor-pointer">
+                                <QTooltip max-width="250px">{{
+                                    t('tooltips.changes')
+                                }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </QItem>
+                <QItem
+                    :class="index == 'create' ? 'q-mt-md' : 'q-mt-xs'"
+                    v-for="(checkboxOption, index) in checkboxOptions"
+                    :key="index"
+                >
+                    <QCheckbox
+                        size="sm"
+                        v-model="checkboxOption.selected"
+                        :label="t(`actions.${checkboxOption.label}`)"
+                        @update:model-value="selectFilter"
+                    />
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QInput
+                        class="full-width"
+                        :label="t('globals.date')"
+                        @click="dateDialog = true"
+                        @focus="(evt) => evt.target.blur()"
+                        @clear="selectFilter('date', 'to')"
+                        v-model="date"
+                        clearable
+                        clear-icon="close"
+                    />
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QInput
+                        class="full-width"
+                        :label="t('to')"
+                        @click="dateToDialog = true"
+                        @focus="(evt) => evt.target.blur()"
+                        @clear="selectFilter('date', 'from')"
+                        v-model="dateTo"
+                        clearable
+                        clear-icon="close"
+                    />
+                </QItem>
+            </QList>
         </QScrollArea>
     </QDrawer>
+    <QDialog v-model="dateDialog">
+        <QDate
+            :years-in-month-view="false"
+            v-model="date"
+            dense
+            flat
+            minimal
+            @update:model-value="
+                (value) => {
+                    dateDialog = false;
+                    const formatDate = toDateString(new Date(value));
+                    date = formatDate.split('-').reverse().join('-');
+                    selectFilter('date', 'from');
+                }
+            "
+        />
+    </QDialog>
+    <QDialog v-model="dateToDialog">
+        <QDate
+            v-model="dateTo"
+            dense
+            flat
+            minimal
+            @update:model-value="
+                (value) => {
+                    dateToDialog = false;
+                    const formatDate = toDateString(new Date(value));
+                    dateTo = formatDate.split('-').reverse().join('-');
+                    selectFilter('date', 'to');
+                }
+            "
+        />
+    </QDialog>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn
+            v-if="Object.values(selectedFilters).some((filter) => filter !== undefined)"
+            color="primary"
+            icon="filter_alt_off"
+            size="md"
+            round
+            @click="clearFilter"
+        />
+    </QPageSticky>
 </template>
-
+<style lang="scss">
+.q-timeline__subtitle {
+    opacity: 1 !important;
+}
+.logs {
+    .vn-label-value {
+        .label {
+            margin-right: 5px;
+            color: var(--vn-label);
+        }
+    }
+    .q-avatar {
+        font-size: 38px;
+    }
+}
+</style>
 <style lang="scss" scoped>
-.q-timeline {
-    width: 100%;
-    max-width: 80em;
+.q-card {
+    background-color: var(--vn-gray);
+}
+.q-item {
+    min-height: 0px;
+}
+
+.origin-log {
+    &:first-child > .origin-info {
+        margin-top: 0;
+    }
+    & > .origin-info {
+        gap: 6px;
+
+        & > .origin-id {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            margin: 0;
+        }
+        & > .line {
+            flex-grow: 1;
+            background-color: $primary;
+            height: 2px;
+        }
+    }
+}
+.user-log {
+    width: 40em;
+
+    & > .timeline {
+        position: relative;
+        padding-right: 5px;
+        width: 50px;
+        min-width: 38px;
+        & > .arrow {
+            height: 8px;
+            width: 8px;
+            position: absolute;
+            transform: rotateY(0deg) rotate(45deg);
+            top: 15px;
+            right: -4px;
+            z-index: 1;
+        }
+        & > .user-avatar {
+            padding: 8px 0;
+            margin-top: -8px;
+            position: sticky;
+            top: 64px;
+        }
+        & > .line {
+            position: absolute;
+            background-color: $primary;
+            width: 2px;
+            left: 23px;
+            z-index: -1;
+            top: 0;
+            bottom: -8px;
+        }
+    }
+    &:last-child > .timeline > .line {
+        display: none;
+    }
+    & > .user-changes {
+        flex-grow: 1;
+        overflow: hidden;
+    }
+}
+.model-log {
+    .model-info {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        .model-value {
+            font-style: italic;
+        }
+        .model-id {
+            color: var(--vn-label);
+            font-size: 0.9rem;
+        }
+        .q-btn {
+            float: right;
+        }
+    }
+}
+.changes-log {
+    overflow: hidden;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+    .change-info {
+        overflow: hidden;
+        background-color: var(--vn-header);
+        & > .date {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+        & > div {
+            white-space: nowrap;
+            .action {
+                color: black;
+                border-radius: 50%;
+                padding: 3px;
+                font-size: 18px;
+
+                &.notice {
+                    background-color: $info;
+                }
+                &.success {
+                    background-color: $positive;
+                }
+                &.warning {
+                    background-color: $warning;
+                }
+                &.alert {
+                    background-color: $negative;
+                }
+            }
+        }
+    }
+    & > .change-detail {
+        background-color: var(--vn-gray);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        box-sizing: border-box;
+        & > .q-icon {
+            float: right;
+            transition-property: transform, background-color;
+            transition-duration: 150ms;
+            margin: 0;
+        }
+        &.expanded {
+            text-overflow: initial;
+            white-space: initial;
+
+            & > .q-icon {
+                transform: rotate(180deg);
+            }
+        }
+        & > .no-changes {
+            font-style: italic;
+        }
+    }
+}
+.q-menu {
+    display: block;
+
+    & > .loading {
+        display: flex;
+        justify-content: center;
+    }
+    & > .q-card {
+        min-width: 180px;
+        max-width: 400px;
+
+        & > .header {
+            color: $dark;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    }
 }
 </style>
 <i18n>
 en:
+    to: To
+    pointRecord: View record at this point in time
+    recordChanges: show all record changes
+    tooltips:
+        search: Search by id or concept
+        changes: Search by changes
     actions:
-        insert: Creates
-        update: Updates
-        delete: Deletes
+        Creates: Creates
+        Edits: Edits
+        Deletes: Deletes
+        Accesses: Accesses
     models:
-        Claim: Claim
-        ClaimDms: Document
-        ClaimBeginning: Claimed Sales
-        ClaimObservation: Observation
+        Claim: Reclamación
+        ClaimDms: Documento
+        ClaimBeginning: Comienzo
+        ClaimObservation: Observación
+    Users:
+        User: Usuario
+        All: Todo
+        System: Sistema
     properties:
         id: ID
         claimFk: Claim ID
@@ -172,6 +1071,12 @@ en:
         responsibility: Responsibility
         packages: Packages
 es:
+    to: Hasta
+    pointRecord: Ver el registro en este punto
+    recordChanges: Mostrar todos los cambios realizados en el registro
+    tooltips:
+        search: Buscar por identificador o concepto
+        changes: Buscar por cambios. Los atributos deben buscarse por su nombre interno, para obtenerlo situar el cursor sobre el atributo.
     Audit logs: Registros de auditoría
     Property: Propiedad
     Before: Antes
@@ -179,14 +1084,14 @@ es:
     Yes: Si
     Nothing: Nada
     actions:
-        insert: Crea
-        update: Actualiza
-        delete: Elimina
-    models:
-        Claim: Reclamación
-        ClaimDms: Documento
-        ClaimBeginning: Línea reclamada
-        ClaimObservation: Observación
+        Creates: Crea
+        Edits: Modifica
+        Deletes: Elimina
+        Accesses: Accede
+    Users:
+        User: Usuario
+        All: Todo
+        System: Sistema
     properties:
         id: ID
         claimFk: ID reclamación
diff --git a/src/composables/useColor.js b/src/composables/useColor.js
new file mode 100644
index 000000000..b325e985f
--- /dev/null
+++ b/src/composables/useColor.js
@@ -0,0 +1,35 @@
+export function djb2a(string) {
+    let hash = 5381;
+    for (let i = 0; i < string.length; i++)
+        hash = ((hash << 5) + hash) ^ string.charCodeAt(i);
+    return hash >>> 0;
+}
+
+export function useColor(value) {
+    return '#' + colors[djb2a(value || '') % colors.length];
+}
+
+const colors = [
+    'b5b941', // Yellow
+    'ae9681', // Peach
+    'd78767', // Salmon
+    'cc7000', // Orange bright
+    'e2553d', // Coral
+    '8B0000', // Red dark
+    'de4362', // Red crimson
+    'FF1493', // Ping intense
+    'be39a2', // Pink light
+    'b754cf', // Purple middle
+    'a87ba8', // Pink
+    '8a69cd', // Blue lavender
+    'ab20ab', // Purple dark
+    '00b5b8', // Turquoise
+    '1fa8a1', // Green ocean
+    '5681cf', // Blue steel
+    '3399fe', // Blue sky
+    '6d9c3e', // Green chartreuse
+    '51bb51', // Green lime
+    '518b8b', // Gray board
+    '7e7e7e', // Gray
+    '5d5d5d', // Gray dark
+];
diff --git a/src/composables/useFirstUpper.js b/src/composables/useFirstUpper.js
new file mode 100644
index 000000000..36378c05f
--- /dev/null
+++ b/src/composables/useFirstUpper.js
@@ -0,0 +1,3 @@
+export function useFirstUpper(str) {
+    return str && str.charAt(0).toUpperCase() + str.substr(1);
+}
diff --git a/src/composables/useIso8601.js b/src/composables/useIso8601.js
new file mode 100644
index 000000000..848e60de8
--- /dev/null
+++ b/src/composables/useIso8601.js
@@ -0,0 +1,18 @@
+export function useIso8601(dateString) {
+    // Crear un objeto Date a partir de la cadena de texto
+    const date = new Date(dateString);
+
+    // Obtener los componentes de fecha y hora
+    const year = date.getUTCFullYear();
+    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
+    const day = String(date.getUTCDate()).padStart(2, '0');
+    const hours = String(date.getUTCHours()).padStart(2, '0');
+    const minutes = String(date.getUTCMinutes()).padStart(2, '0');
+    const seconds = String(date.getUTCSeconds()).padStart(2, '0');
+    const milliseconds = String(date.getUTCMilliseconds()).padStart(3, '0');
+
+    // Formatear la cadena en el formato ISO 8601
+    const formattedDate = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}Z`;
+
+    return formattedDate;
+}
diff --git a/src/css/app.scss b/src/css/app.scss
index 3c8cc50b6..9ed51c1c7 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -14,6 +14,10 @@ a {
     color: $orange-4;
 }
 
+.rounded--full {
+    border-radius: 50%;
+}
+
 // Removes chrome autofill background
 input:-webkit-autofill,
 select:-webkit-autofill {
@@ -32,10 +36,12 @@ body.body--light {
     --vn-text: #000000;
     --vn-gray: #f5f5f5;
     --vn-label: #5f5f5f;
+    --vn-header: #e9e9e9;
 }
 
 body.body--dark {
     --vn-text: #ffffff;
     --vn-gray: #313131;
     --vn-label: #a8a8a8;
+    --vn-header: #212121;
 }
diff --git a/src/filters/index.js b/src/filters/index.js
index 158ce1009..b0c441641 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -2,6 +2,7 @@ import toLowerCase from './toLowerCase';
 import toDate from './toDate';
 import toDateString from './toDateString';
 import toDateHour from './toDateHour';
+import toRelativeDate from './toRelativeDate';
 import toCurrency from './toCurrency';
 import toPercentage from './toPercentage';
 import toLowerCamel from './toLowerCamel';
@@ -13,6 +14,7 @@ export {
     toDate,
     toDateString,
     toDateHour,
+    toRelativeDate,
     toCurrency,
     toPercentage,
     dashIfEmpty,
diff --git a/src/filters/toRelativeDate.js b/src/filters/toRelativeDate.js
new file mode 100644
index 000000000..76e67dbea
--- /dev/null
+++ b/src/filters/toRelativeDate.js
@@ -0,0 +1,32 @@
+import { useI18n } from 'vue-i18n';
+
+export default function formatDate(dateVal) {
+    const { t } = useI18n();
+    const today = new Date();
+    if (dateVal == null) return '';
+
+    const date = new Date(dateVal);
+    const dateZeroTime = new Date(dateVal);
+    dateZeroTime.setHours(0, 0, 0, 0);
+    const diff = Math.trunc(
+        (today.getTime() - dateZeroTime.getTime()) / (1000 * 3600 * 24)
+    );
+    let format;
+    if (diff === 0) format = t('globals.today');
+    else if (diff === 1) format = t('globals.yesterday');
+    else if (diff > 1 && diff < 7) {
+        const options = { weekday: 'short' };
+        format = date.toLocaleDateString(t('globals.dateFormat'), options);
+    } else if (today.getFullYear() === date.getFullYear()) {
+        const options = { day: 'numeric', month: 'short' };
+        format = date.toLocaleDateString(t('globals.dateFormat'), options);
+    } else {
+        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
+        format = date.toLocaleDateString(t('globals.dateFormat'), options);
+    }
+
+    // Formatear la hora en HH:mm
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    return `${format} ${hours}:${minutes}`;
+}
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index d7519ba53..285fb778f 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -5,6 +5,9 @@ export default {
             en: 'English',
         },
         language: 'Language',
+        entity: 'Entity',
+        user: 'User',
+        details: 'Details',
         collapseMenu: 'Collapse left menu',
         backToDashboard: 'Return to dashboard',
         notifications: 'Notifications',
@@ -13,8 +16,11 @@ export default {
         pinnedModules: 'Pinned modules',
         darkMode: 'Dark mode',
         logOut: 'Log out',
+        date: 'Date',
         dataSaved: 'Data saved',
         dataDeleted: 'Data deleted',
+        search: 'Search',
+        changes: 'Changes',
         add: 'Add',
         create: 'Create',
         save: 'Save',
@@ -36,6 +42,9 @@ export default {
         summary: {
             basicData: 'Basic data',
         },
+        today: 'Today',
+        yesterday: 'Yesterday',
+        dateFormat: 'en-GB',
     },
     errors: {
         statusUnauthorized: 'Access denied',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index fc2c80f55..97001eab8 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -5,6 +5,9 @@ export default {
             en: 'Inglés',
         },
         language: 'Idioma',
+        entity: 'Entidad',
+        user: 'Usuario',
+        details: 'Detalles',
         collapseMenu: 'Contraer menú lateral',
         backToDashboard: 'Volver al tablón',
         notifications: 'Notificaciones',
@@ -13,8 +16,11 @@ export default {
         pinnedModules: 'Módulos fijados',
         darkMode: 'Modo oscuro',
         logOut: 'Cerrar sesión',
+        date: 'Fecha',
         dataSaved: 'Datos guardados',
         dataDeleted: 'Datos eliminados',
+        search: 'Buscar',
+        changes: 'Cambios',
         add: 'Añadir',
         create: 'Crear',
         save: 'Guardar',
@@ -36,6 +42,9 @@ export default {
         summary: {
             basicData: 'Datos básicos',
         },
+        today: 'Hoy',
+        yesterday: 'Ayer',
+        dateFormat: 'es-ES',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
diff --git a/src/stores/useValidationsStore.js b/src/stores/useValidationsStore.js
new file mode 100644
index 000000000..c658a90af
--- /dev/null
+++ b/src/stores/useValidationsStore.js
@@ -0,0 +1,19 @@
+import axios from 'axios';
+import { defineStore } from 'pinia';
+
+export const useValidationsStore = defineStore('validationsStore', {
+    state: () => ({
+        validations: null,
+    }),
+    actions: {
+        async fetchModels() {
+            if (this.validations) return;
+            try {
+                const { data } = await axios.get('Schemas/modelinfo');
+                this.validations = data;
+            } catch (error) {
+                console.error('Error al obtener las validaciones:', error);
+            }
+        },
+    },
+});
diff --git a/test/cypress/integration/ClaimNotes.spec.js b/test/cypress/integration/ClaimNotes.spec.js
index 5b52dd339..9f52c29e4 100644
--- a/test/cypress/integration/ClaimNotes.spec.js
+++ b/test/cypress/integration/ClaimNotes.spec.js
@@ -8,6 +8,7 @@ describe('ClaimNotes', () => {
     it('should add a new note', () => {
         const message = 'This is a new message.';
         cy.get('.q-page-sticky button').click();
+        cy.get('.q-page-sticky > div > button').click();
         cy.get('.q-dialog .q-card__section:nth-child(2)').type(message);
         cy.get('.q-card__actions button:nth-child(2)').click();
         cy.get('.q-card .q-card__section:nth-child(2)')
diff --git a/test/cypress/integration/vnLog.spec.js b/test/cypress/integration/vnLog.spec.js
new file mode 100644
index 000000000..3d6d9b95d
--- /dev/null
+++ b/test/cypress/integration/vnLog.spec.js
@@ -0,0 +1,31 @@
+/// <reference types="cypress" />
+describe('ClaimNotes', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit(`/#/claim/${1}/log`);
+    });
+
+    it('should have just one record', () => {
+        cy.get('.model-info .q-btn').eq(1).click();
+        cy.get('.user-log .model-log').its('length').should('eq', 1);
+        cy.get('.q-page-sticky .q-btn').click();
+        cy.get('.user-log .model-log').its('length').should('eq', 4);
+    });
+
+    it('should filter by insert actions', () => {
+        cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get('.q-checkbox__inner').eq(0).click();
+        cy.get('.q-page > .q-drawer-container > .fullscreen').click();
+        cy.get('.model-info .q-chip__content').eq(0).should('have.text', 'Document');
+        cy.get('.model-info .q-chip__content').eq(1).should('have.text', 'Beginning');
+    });
+
+    it('should show the point record', () => {
+        cy.get('.pit').eq(0).click();
+        cy.get('.q-menu .q-card .header').should('have.text', 'Observation #1');
+        cy.get('.q-menu .q-card .json-string').should(
+            'have.text',
+            'Waiting for customer'
+        );
+    });
+});
diff --git a/test/cypress/integration/workerList.spec.js b/test/cypress/integration/workerList.spec.js
index d76958367..8d4dd770d 100644
--- a/test/cypress/integration/workerList.spec.js
+++ b/test/cypress/integration/workerList.spec.js
@@ -8,17 +8,17 @@ describe('WorkerList', () => {
     it('should load workers', () => {
         cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
             .eq(0)
-            .should('have.text', 'victorvd');
-        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(1)
             .should('have.text', 'JessicaJones');
         cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(2)
+            .eq(1)
             .should('have.text', 'BruceBanner');
+        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
+            .eq(2)
+            .should('have.text', 'CharlesXavier');
     });
 
     it('should open the worker summary', () => {
-        cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(1).click();
+        cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(0).click();
         cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones');
         cy.get('.summary .header').eq(0).invoke('text').should('include', 'Basic data');
         cy.get('.summary .header').eq(1).should('have.text', 'User data');

From bdf288241b043b6192c6e96fa02aa10179b6ebf6 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 18 Sep 2023 14:38:35 +0200
Subject: [PATCH 02/17] ref #6104 fix package

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8568d507d..b713c906a 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test:e2e": "cypress open",
-        "test:e2e:ci": "cypress run --browser chrome",
+        "test:e2e:ci": "cypress run --browser chromium",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
         "test:unit": "vitest",
         "test:unit:ci": "vitest run"

From ca28ecdd8ecbfd2f1633b3ae7c8ba3f44033fc19 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 26 Sep 2023 11:49:57 +0200
Subject: [PATCH 03/17] ref #6104 tests created and searchFn fixed

---
 package.json                                  |   2 +-
 src/components/common/VnLog.vue               |  51 +++---
 src/css/app.scss                              |   4 -
 src/pages/Claim/Card/ClaimDescriptor.vue      |   2 +-
 src/stores/useValidationsStore.js             |  37 +++--
 .../__tests__/components/common/VnLog.spec.js | 150 ++++++++++++------
 test/vitest/helper.js                         |   2 +-
 7 files changed, 154 insertions(+), 94 deletions(-)

diff --git a/package.json b/package.json
index b713c906a..8568d507d 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test:e2e": "cypress open",
-        "test:e2e:ci": "cypress run --browser chromium",
+        "test:e2e:ci": "cypress run --browser chrome",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
         "test:unit": "vitest",
         "test:unit:ci": "vitest run"
diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 7e3cfc408..6ee09610a 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -15,15 +15,16 @@ import FetchData from '../FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const stateStore = useStateStore();
+
 const route = useRoute();
 const { t } = useI18n();
-const validationsStore = useValidationsStore();
 const props = defineProps({
     model: {
         type: String,
         default: null,
     },
 });
+
 const filter = {
     fields: [
         'id',
@@ -160,19 +161,21 @@ function getLogs(data) {
     let originLog = null;
     let userLog = null;
     let modelLog = null;
-    let prevLog, prevUser, prevModel;
+    let prevLog;
     let nLogs;
 
     data.forEach((log) => {
-        const locale = validationsStore.validations[log.changedModel]?.locale || {};
+        const locale = validations[log.changedModel]?.locale || {};
 
         // Origin
-        if (!prevLog || prevLog.originFk != log.originFk) {
+        const originChanged = !prevLog || log.originFk != prevLog.originFk;
+        if (originChanged) {
             logs.push((originLog = { originFk: log.originFk, logs: [] }));
             prevLog = log;
         }
         // User
-        if (prevUser != log.userFk) {
+        const userChanged = originChanged || log.userFk != prevLog.userFk;
+        if (userChanged) {
             originLog.logs.push(
                 (userLog = {
                     user: log.user,
@@ -180,15 +183,14 @@ function getLogs(data) {
                     logs: [],
                 })
             );
-            prevUser = log.userFk;
         }
         // Model
-        if (
-            !prevModel ||
-            prevModel.changedModelId != log.changedModelId ||
-            prevModel.changedModel != log.changedModel ||
-            nLogs >= 6
-        ) {
+        const modelChanged =
+            userChanged ||
+            log.changedModel != prevLog.changedModel ||
+            log.changedModelId != prevLog.changedModelId ||
+            nLogs >= 6;
+        if (modelChanged) {
             userLog.logs.push(
                 (modelLog = {
                     model: log.changedModel,
@@ -198,10 +200,6 @@ function getLogs(data) {
                     logs: [],
                 })
             );
-            prevModel = {
-                changedModelId: log.changedModelId,
-                changedModel: log.changedModel,
-            };
             nLogs = 0;
         }
         nLogs++;
@@ -224,12 +222,12 @@ async function openPointRecord(id, modelLog) {
     pointRecord.value = null;
     const { data } = await axios.get(`${props.model}Logs/${id}/pitInstance`);
     const propNames = Object.keys(data);
-    const locale = validationsStore.validations[modelLog.model]?.locale || {};
+    const locale = validations[modelLog.model]?.locale || {};
     pointRecord.value = parseProps(propNames, locale, data);
 }
 async function setLogTree() {
     if (!validations) {
-        validations = await validationsStore.fetchModels();
+        validations = await useValidationsStore();
     }
     filter.where = { and: [{ originFk: route.params.id }] };
     const { data } = await axios.get(`${props.model}Logs`, {
@@ -377,7 +375,7 @@ function filterFn(val, update, abortFn, type) {
         const needle = val.toLowerCase();
         if (type === 'actions')
             filteredActions.value = actions.value.filter((item) =>
-                item.toLowerCase().includes(needle)
+                t(`models.${item}`).toLowerCase().includes(needle)
             );
         if (type === 'workers') {
             if (isNaN(needle))
@@ -417,11 +415,11 @@ setLogTree();
         :key="originLogIndex"
     >
         <QItem class="origin-info items-center q-my-md" v-if="logTree.length > 1">
-            <h6 class="origin-id">
-                {{ originLog.modelI18n }}
+            <h6 class="origin-id text-grey">
+                {{ useFirstUpper(validations[props.model].locale.name) }}
                 #{{ originLog.originFk }}
             </h6>
-            <div class="line"></div>
+            <div class="line bg-grey"></div>
         </QItem>
         <div
             class="user-log q-mb-sm row"
@@ -686,7 +684,7 @@ setLogTree();
                             </QItem>
                         </template>
                         <template #selected-item="{ opt }">
-                            {{ t(opt) }}
+                            {{ t(`models.${opt}`) }}
                         </template>
                     </QSelect>
                 </QItem>
@@ -875,6 +873,9 @@ setLogTree();
         margin-top: 0;
     }
     & > .origin-info {
+        width: 100%;
+        max-width: 42em;
+        margin-top: 28px;
         gap: 6px;
 
         & > .origin-id {
@@ -885,13 +886,13 @@ setLogTree();
         }
         & > .line {
             flex-grow: 1;
-            background-color: $primary;
             height: 2px;
         }
     }
 }
 .user-log {
-    width: 40em;
+    width: 100%;
+    max-width: 40em;
 
     & > .timeline {
         position: relative;
diff --git a/src/css/app.scss b/src/css/app.scss
index 9ed51c1c7..b9ad4742c 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -14,10 +14,6 @@ a {
     color: $orange-4;
 }
 
-.rounded--full {
-    border-radius: 50%;
-}
-
 // Removes chrome autofill background
 input:-webkit-autofill,
 select:-webkit-autofill {
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 914de2eb2..f03a1d8a2 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -109,7 +109,7 @@ const setData = (entity) => {
                 <template #value>
                     <span class="link">
                         {{ entity.worker.user.name }}
-                        <WorkerDescriptorProxy :id="entity.worker.userFk" />
+                        <WorkerDescriptorProxy :id="entity.worker.id" />
                     </span>
                 </template>
             </VnLv>
diff --git a/src/stores/useValidationsStore.js b/src/stores/useValidationsStore.js
index c658a90af..5b196fa4c 100644
--- a/src/stores/useValidationsStore.js
+++ b/src/stores/useValidationsStore.js
@@ -1,19 +1,26 @@
 import axios from 'axios';
 import { defineStore } from 'pinia';
 
-export const useValidationsStore = defineStore('validationsStore', {
-    state: () => ({
-        validations: null,
-    }),
-    actions: {
-        async fetchModels() {
-            if (this.validations) return;
-            try {
-                const { data } = await axios.get('Schemas/modelinfo');
-                this.validations = data;
-            } catch (error) {
-                console.error('Error al obtener las validaciones:', error);
-            }
+export const useValidationsStore = async () => {
+    const validationsStore = defineStore('validationsStore', {
+        state: () => ({
+            validations: null,
+        }),
+        actions: {
+            async fetchModels() {
+                if (this.validations) return;
+                try {
+                    const { data } = await axios.get('Schemas/modelinfo');
+                    this.validations = data;
+                } catch (error) {
+                    console.error('Error al obtener las validaciones:', error);
+                }
+            },
         },
-    },
-});
+    });
+    const v = validationsStore();
+    if (!v.validations) {
+        await v.fetchModels();
+    }
+    return v.validations;
+};
diff --git a/test/vitest/__tests__/components/common/VnLog.spec.js b/test/vitest/__tests__/components/common/VnLog.spec.js
index 6787b6d51..79db1b9a5 100644
--- a/test/vitest/__tests__/components/common/VnLog.spec.js
+++ b/test/vitest/__tests__/components/common/VnLog.spec.js
@@ -2,18 +2,40 @@ import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
 import { createWrapper } from 'app/test/vitest/helper';
 import VnLog from 'src/components/common/VnLog.vue';
 
+const mockValidations = {
+    Claim: {
+        locale: {
+            name: 'reclamación',
+        },
+    },
+    ClaimObservation: {
+        locale: {
+            name: 'observación',
+        },
+    },
+    ClaimDms: {
+        locale: {
+            name: 'documento',
+        },
+    },
+    ClaimBeginning: {
+        locale: {
+            name: 'comienzo',
+        },
+    },
+};
+
 describe('VnLog', () => {
     let vm;
+
     beforeAll(() => {
         vm = createWrapper(VnLog, {
             global: {
-                stubs: ['FetchData', 'VnPaginate'],
-                mocks: {
-                    fetch: vi.fn(),
-                },
+                stubs: [],
+                mocks: {},
             },
             propsData: {
-                model: "Claim",
+                model: 'Claim',
             },
         }).vm;
     });
@@ -22,54 +44,88 @@ describe('VnLog', () => {
         vi.clearAllMocks();
     });
 
-    describe('formatValue()', () => {
-        it('should return Yes if has a true boolean', async () => {
-            const result = vm.formatValue(true);
-
-            expect(result).toEqual('Yes');
-        });
-        it('should return No if has a true boolean', async () => {
-            const result = vm.formatValue(false);
-
-            expect(result).toEqual('No');
-        });
-        it('should return Nothing if has no params', async () => {
-            const result = vm.formatValue();
-
-            expect(result).toEqual('Nothing');
-        });
-        it('should return a string from a string value', async () => {
-            const result = vm.formatValue('Something');
-
-            expect(result).toEqual(`"Something"`);
-        });
-        it('should call to format a date', async () => {
-            vi.mock('src/filters', () => ({
-                toDate: ()=>{
-                    return "Date formatted"
+    it('should correctly set logTree', async () => {
+        const fakeLogTreeData = [
+            {
+                id: 2,
+                originFk: 1,
+                userFk: 18,
+                action: 'update',
+                changedModel: 'ClaimObservation',
+                oldInstance: {},
+                newInstance: {
+                    claimFk: 1,
+                    text: 'Waiting for customer',
                 },
-            }));
-
-           const result = vm.formatValue('01-01-1970');
-           expect(result).toEqual("Date formatted");
-        });
+                creationDate: '2023-09-18T12:25:34.000Z',
+                changedModelId: '1',
+                changedModelValue: null,
+                description: null,
+                user: {
+                    id: 18,
+                    name: 'salesPerson',
+                    nickname: 'salesPersonNick',
+                    image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
+                    worker: {
+                        id: 18,
+                        userFk: 18,
+                    },
+                },
+            },
+            {
+                id: 1,
+                originFk: 1,
+                userFk: 18,
+                action: 'update',
+                changedModel: 'Claim',
+                oldInstance: {
+                    hasToPickUp: false,
+                },
+                newInstance: {
+                    hasToPickUp: true,
+                },
+                creationDate: '2023-09-18T12:25:34.000Z',
+                changedModelId: '1',
+                changedModelValue: null,
+                description: null,
+                user: {
+                    id: 18,
+                    name: 'salesPerson',
+                    nickname: 'salesPersonNick',
+                    image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
+                    worker: {
+                        id: 18,
+                        userFk: 18,
+                    },
+                },
+            },
+        ];
+        vm.validations = mockValidations;
+        vm.logTree = vm.getLogs(fakeLogTreeData);
+        expect(vm.logTree[0].originFk).toEqual(1);
+        expect(vm.logTree[0].logs[0].user.name).toEqual('salesPerson');
     });
 
-    describe('actionColor()', () => {
-        it('should return positive if insert', async () => {
-            const result = vm.actionColor('insert');
+    it('should correctly set the selectedFilters when filtering', async () => {
+        await vm.$nextTick();
+        vm.searchInput = '1';
+        vm.userSelect = '21';
+        vm.checkboxOptions.insert.selected = true;
+        vm.checkboxOptions.update.selected = true;
 
-            expect(result).toEqual('positive');
-        });
-        it('should return positive if update', async () => {
-            const result = vm.actionColor('update');
+        vm.selectFilter('search');
+        vm.selectFilter('userSelect');
 
-            expect(result).toEqual('positive');
-        });
-        it('should return negative if delete', async () => {
-            const result = vm.actionColor('delete');
+        expect(vm.selectedFilters.changedModelId).toEqual('1');
+        expect(vm.selectedFilters.userFk).toEqual('21');
+        expect(vm.selectedFilters.action).toEqual({ inq: ['insert', 'update'] });
+    });
 
-            expect(result).toEqual('negative');
+    it('should correctly set the date from', () => {
+        vm.date = '18-09-2023';
+        vm.selectFilter('date', 'from');
+        expect(vm.selectedFilters.creationDate).toEqual({
+            between: ['2023-09-18T00:00:00.000Z', '2023-09-18T19:59:59.999Z'],
         });
     });
 });
diff --git a/test/vitest/helper.js b/test/vitest/helper.js
index 8a6fb1415..67e4f960a 100644
--- a/test/vitest/helper.js
+++ b/test/vitest/helper.js
@@ -12,7 +12,7 @@ installQuasarPlugin({
         Dialog,
     },
 });
-
+axios.defaults.baseURL = 'http://localhost:9000/api/';
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
 const mockPush = vi.fn();
 

From 41eccd2885ecdc7dd1a5e00815fccc1eea2c96f3 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 27 Sep 2023 14:07:49 +0200
Subject: [PATCH 04/17] ref #6104 fix claimNotes test

---
 test/cypress/integration/ClaimNotes.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/cypress/integration/ClaimNotes.spec.js b/test/cypress/integration/ClaimNotes.spec.js
index 9f52c29e4..5b52dd339 100644
--- a/test/cypress/integration/ClaimNotes.spec.js
+++ b/test/cypress/integration/ClaimNotes.spec.js
@@ -8,7 +8,6 @@ describe('ClaimNotes', () => {
     it('should add a new note', () => {
         const message = 'This is a new message.';
         cy.get('.q-page-sticky button').click();
-        cy.get('.q-page-sticky > div > button').click();
         cy.get('.q-dialog .q-card__section:nth-child(2)').type(message);
         cy.get('.q-card__actions button:nth-child(2)').click();
         cy.get('.q-card .q-card__section:nth-child(2)')

From 4995c993bd9b64dc1352aa74d7b87d6e20cd3a01 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 28 Sep 2023 13:45:14 +0200
Subject: [PATCH 05/17] ref #6104 validations store created

---
 quasar.config.js                              |  2 +-
 src/boot/validations.js                       |  6 ++++
 src/components/common/VnLog.vue               | 10 +++---
 src/composables/useValidator.js               | 33 +++++++----------
 src/stores/useValidationsStore.js             | 36 ++++++++-----------
 .../__tests__/components/common/VnLog.spec.js |  4 +--
 6 files changed, 39 insertions(+), 52 deletions(-)
 create mode 100644 src/boot/validations.js

diff --git a/quasar.config.js b/quasar.config.js
index cbcbae4dc..2d3c71417 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -29,7 +29,7 @@ module.exports = configure(function (/* ctx */) {
         // app boot file (/src/boot)
         // --> boot files are part of "main.js"
         // https://v2.quasar.dev/quasar-cli/boot-files
-        boot: ['i18n', 'axios', 'vnDate'],
+        boot: ['i18n', 'axios', 'vnDate', 'validations'],
 
         // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
         css: ['app.scss'],
diff --git a/src/boot/validations.js b/src/boot/validations.js
new file mode 100644
index 000000000..31e232f86
--- /dev/null
+++ b/src/boot/validations.js
@@ -0,0 +1,6 @@
+import { boot } from 'quasar/wrappers';
+import { useValidationsStore } from 'src/stores/useValidationsStore';
+
+export default boot(async ({ store }) => {
+    await useValidationsStore(store).fetchModels();
+});
diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 6ee09610a..2c9451641 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -4,18 +4,19 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
 import { useStateStore } from 'stores/useStateStore';
-import { useValidationsStore } from 'src/stores/useValidationsStore';
 import { toRelativeDate, toDateString, toDateHour } from 'src/filters';
 import { useColor } from 'src/composables/useColor';
 import { useFirstUpper } from 'src/composables/useFirstUpper';
 import { useIso8601 } from 'src/composables/useIso8601';
+import { useValidator } from 'src/composables/useValidator';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnJsonValue from '../common/VnJsonValue.vue';
 import FetchData from '../FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const stateStore = useStateStore();
-
+const validationsStore = useValidator();
+const { models } = validationsStore;
 const route = useRoute();
 const { t } = useI18n();
 const props = defineProps({
@@ -91,7 +92,7 @@ const checkboxOptions = ref({
     },
 });
 
-let validations;
+let validations = models;
 let pointRecord = ref(null);
 let byRecord = ref(false);
 const logTree = ref([]);
@@ -226,9 +227,6 @@ async function openPointRecord(id, modelLog) {
     pointRecord.value = parseProps(propNames, locale, data);
 }
 async function setLogTree() {
-    if (!validations) {
-        validations = await useValidationsStore();
-    }
     filter.where = { and: [{ originFk: route.params.id }] };
     const { data } = await axios.get(`${props.model}Logs`, {
         params: { filter: JSON.stringify(filter) },
diff --git a/src/composables/useValidator.js b/src/composables/useValidator.js
index ef2dcbd90..3f9f00367 100644
--- a/src/composables/useValidator.js
+++ b/src/composables/useValidator.js
@@ -1,21 +1,12 @@
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import axios from 'axios';
 import validator from 'validator';
-
-
-const models = ref(null);
+import { useValidationsStore } from 'src/stores/useValidationsStore';
 
 export function useValidator() {
-    if (!models.value) fetch();
-
-    function fetch() {
-        axios.get('Schemas/ModelInfo')
-            .then(response => models.value = response.data)
-    }
+    const models = useValidationsStore().validations;
 
     function validate(propertyRule) {
-        const modelInfo = models.value;
+        const modelInfo = models;
         if (!modelInfo || !propertyRule) return;
 
         const rule = propertyRule.split('.');
@@ -38,19 +29,18 @@ export function useValidator() {
 
     const { t } = useI18n();
     const validations = function (validation) {
-
         return {
             presence: (value) => {
                 let message = `Value can't be empty`;
                 if (validation.message)
-                    message = t(validation.message) || validation.message
+                    message = t(validation.message) || validation.message;
 
-                return !validator.isEmpty(value ? String(value) : '') || message
+                return !validator.isEmpty(value ? String(value) : '') || message;
             },
             length: (value) => {
                 const options = {
                     min: validation.min || validation.is,
-                    max: validation.max || validation.is
+                    max: validation.max || validation.is,
                 };
 
                 value = String(value);
@@ -69,14 +59,15 @@ export function useValidator() {
             },
             numericality: (value) => {
                 if (validation.int)
-                    return validator.isInt(value) || 'Value should be integer'
-                return validator.isNumeric(value) || 'Value should be a number'
+                    return validator.isInt(value) || 'Value should be integer';
+                return validator.isNumeric(value) || 'Value should be a number';
             },
-            custom: (value) => validation.bindedFunction(value) || 'Invalid value'
+            custom: (value) => validation.bindedFunction(value) || 'Invalid value',
         };
     };
 
     return {
-        validate
+        validate,
+        models,
     };
-}
\ No newline at end of file
+}
diff --git a/src/stores/useValidationsStore.js b/src/stores/useValidationsStore.js
index 5b196fa4c..e00812379 100644
--- a/src/stores/useValidationsStore.js
+++ b/src/stores/useValidationsStore.js
@@ -1,26 +1,18 @@
 import axios from 'axios';
 import { defineStore } from 'pinia';
 
-export const useValidationsStore = async () => {
-    const validationsStore = defineStore('validationsStore', {
-        state: () => ({
-            validations: null,
-        }),
-        actions: {
-            async fetchModels() {
-                if (this.validations) return;
-                try {
-                    const { data } = await axios.get('Schemas/modelinfo');
-                    this.validations = data;
-                } catch (error) {
-                    console.error('Error al obtener las validaciones:', error);
-                }
-            },
+export const useValidationsStore = defineStore('validationsStore', {
+    state: () => ({
+        validations: null,
+    }),
+    actions: {
+        async fetchModels() {
+            try {
+                const { data } = await axios.get('Schemas/modelinfo');
+                this.validations = data;
+            } catch (error) {
+                console.error('Error al obtener las validaciones:', error);
+            }
         },
-    });
-    const v = validationsStore();
-    if (!v.validations) {
-        await v.fetchModels();
-    }
-    return v.validations;
-};
+    },
+});
diff --git a/test/vitest/__tests__/components/common/VnLog.spec.js b/test/vitest/__tests__/components/common/VnLog.spec.js
index 79db1b9a5..c818b3398 100644
--- a/test/vitest/__tests__/components/common/VnLog.spec.js
+++ b/test/vitest/__tests__/components/common/VnLog.spec.js
@@ -121,11 +121,11 @@ describe('VnLog', () => {
         expect(vm.selectedFilters.action).toEqual({ inq: ['insert', 'update'] });
     });
 
-    it('should correctly set the date from', () => {
+    /*it('should correctly set the date from', () => {
         vm.date = '18-09-2023';
         vm.selectFilter('date', 'from');
         expect(vm.selectedFilters.creationDate).toEqual({
             between: ['2023-09-18T00:00:00.000Z', '2023-09-18T19:59:59.999Z'],
         });
-    });
+    }); */
 });

From 30791acba648d3b63cb97fcea99ae761d6550cc0 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 28 Sep 2023 13:56:21 +0200
Subject: [PATCH 06/17] ref #6104 replace color vars

---
 src/components/common/VnLog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 2c9451641..27b7c3622 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -955,7 +955,7 @@ setLogTree();
     }
     .change-info {
         overflow: hidden;
-        background-color: var(--vn-header);
+        background-color: var(--vn-dark);
         & > .date {
             overflow: hidden;
             white-space: nowrap;

From 9a06a1296c7d499cf863293b4ffc38d39aeaa75e Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 28 Sep 2023 13:57:39 +0200
Subject: [PATCH 07/17] ref #6104 conflicts fixed

---
 src/composables/useValidator.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/composables/useValidator.js b/src/composables/useValidator.js
index 577cfa0bf..3f9f00367 100644
--- a/src/composables/useValidator.js
+++ b/src/composables/useValidator.js
@@ -68,9 +68,6 @@ export function useValidator() {
 
     return {
         validate,
-<<<<<<< HEAD
         models,
-=======
->>>>>>> 11305fc4c8efea147bc6ee9ff25e59e805b62e41
     };
 }

From 288a50b296b33910d53b81ab8865ad617bf28ba9 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 29 Sep 2023 15:03:02 +0200
Subject: [PATCH 08/17] ref #6104 fix validations,css and tests

---
 src/components/common/VnLog.vue               | 48 ++++++++++-------
 test/cypress/integration/vnLog.spec.js        | 24 +++------
 .../__tests__/components/common/VnLog.spec.js | 51 +++++++++----------
 3 files changed, 62 insertions(+), 61 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 27b7c3622..09e580f29 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -373,7 +373,7 @@ function filterFn(val, update, abortFn, type) {
         const needle = val.toLowerCase();
         if (type === 'actions')
             filteredActions.value = actions.value.filter((item) =>
-                t(`models.${item}`).toLowerCase().includes(needle)
+                validations[item].locale.name.includes(needle)
             );
         if (type === 'workers') {
             if (isNaN(needle))
@@ -507,7 +507,7 @@ setLogTree();
                                             flat
                                             round
                                             :title="t('pointRecord')"
-                                            padding="xs"
+                                            padding="none"
                                             v-if="log.action != 'insert'"
                                             @click.stop="
                                                 openPointRecord(log.id, modelLog)
@@ -571,8 +571,8 @@ setLogTree();
                                     size="sm"
                                     @click="log.expand = !log.expand"
                                 />
-                                <QList v-if="log.props.length" class="attributes">
-                                    <QItem v-if="!log.expand" class="q-pa-none text-grey">
+                                <span v-if="log.props.length" class="attributes">
+                                    <span v-if="!log.expand" class="q-pa-none text-grey">
                                         <span
                                             v-for="(prop, propIndex) in log.props"
                                             :key="propIndex"
@@ -582,12 +582,12 @@ setLogTree();
                                                 {{ prop.nameI18n }}:
                                             </span>
                                             <VnJsonValue :value="prop.val.val" />
-                                            <span v-if="propIndex < log.props.length - 1">
-                                                ,
+                                            <span v-if="propIndex < log.props.length - 1"
+                                                >,&nbsp;
                                             </span>
                                         </span>
-                                    </QItem>
-                                    <QItem
+                                    </span>
+                                    <span
                                         v-if="log.expand"
                                         class="expanded-json column q-pa-none"
                                     >
@@ -611,8 +611,8 @@ setLogTree();
                                                 </span>
                                             </span>
                                         </div>
-                                    </QItem>
-                                </QList>
+                                    </span>
+                                </span>
                                 <span v-if="!log.props.length" class="description">
                                     {{ log.description }}
                                 </span>
@@ -678,11 +678,11 @@ setLogTree();
                     >
                         <template #option="{ opt, index, itemProps }">
                             <QItem :index="index" v-bind="itemProps">
-                                {{ t(`models.${opt}`) }}
+                                {{ useFirstUpper(validations[opt].locale.name) }}
                             </QItem>
                         </template>
                         <template #selected-item="{ opt }">
-                            {{ t(`models.${opt}`) }}
+                            {{ useFirstUpper(validations[opt].locale.name) }}
                         </template>
                     </QSelect>
                 </QItem>
@@ -943,11 +943,21 @@ setLogTree();
             font-size: 0.9rem;
         }
         .q-btn {
+            visibility: hidden;
             float: right;
         }
     }
+
+    &:hover {
+        .model-info {
+            .q-btn {
+                visibility: visible;
+            }
+        }
+    }
 }
 .changes-log {
+    width: 100%;
     overflow: hidden;
 
     &:last-child {
@@ -983,11 +993,18 @@ setLogTree();
                 }
             }
         }
+        .q-btn.pit {
+            visibility: hidden;
+        }
+        &:hover .q-btn.pit {
+            visibility: visible;
+        }
     }
     & > .change-detail {
-        background-color: var(--vn-gray);
+        position: relative;
         overflow: hidden;
         text-overflow: ellipsis;
+        background-color: var(--vn-gray);
         white-space: nowrap;
         box-sizing: border-box;
         & > .q-icon {
@@ -1042,11 +1059,6 @@ en:
         Edits: Edits
         Deletes: Deletes
         Accesses: Accesses
-    models:
-        Claim: Reclamación
-        ClaimDms: Documento
-        ClaimBeginning: Comienzo
-        ClaimObservation: Observación
     Users:
         User: Usuario
         All: Todo
diff --git a/test/cypress/integration/vnLog.spec.js b/test/cypress/integration/vnLog.spec.js
index 3d6d9b95d..bf9edb66c 100644
--- a/test/cypress/integration/vnLog.spec.js
+++ b/test/cypress/integration/vnLog.spec.js
@@ -1,31 +1,21 @@
 /// <reference types="cypress" />
-describe('ClaimNotes', () => {
+describe('VnLog', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/claim/${1}/log`);
-    });
-
-    it('should have just one record', () => {
-        cy.get('.model-info .q-btn').eq(1).click();
-        cy.get('.user-log .model-log').its('length').should('eq', 1);
-        cy.get('.q-page-sticky .q-btn').click();
-        cy.get('.user-log .model-log').its('length').should('eq', 4);
+        cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
     });
 
     it('should filter by insert actions', () => {
-        cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
         cy.get('.q-checkbox__inner').eq(0).click();
-        cy.get('.q-page > .q-drawer-container > .fullscreen').click();
+        cy.get('.q-page').click();
         cy.get('.model-info .q-chip__content').eq(0).should('have.text', 'Document');
         cy.get('.model-info .q-chip__content').eq(1).should('have.text', 'Beginning');
     });
 
-    it('should show the point record', () => {
-        cy.get('.pit').eq(0).click();
-        cy.get('.q-menu .q-card .header').should('have.text', 'Observation #1');
-        cy.get('.q-menu .q-card .json-string').should(
-            'have.text',
-            'Waiting for customer'
-        );
+    it('should filter by entity', () => {
+        cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).click();
+        cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).type('mien');
+        cy.get('[role="listbox"] .q-item').should('have.text', 'Comienzo');
     });
 });
diff --git a/test/vitest/__tests__/components/common/VnLog.spec.js b/test/vitest/__tests__/components/common/VnLog.spec.js
index c818b3398..1fd5b3990 100644
--- a/test/vitest/__tests__/components/common/VnLog.spec.js
+++ b/test/vitest/__tests__/components/common/VnLog.spec.js
@@ -2,31 +2,30 @@ import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
 import { createWrapper } from 'app/test/vitest/helper';
 import VnLog from 'src/components/common/VnLog.vue';
 
-const mockValidations = {
-    Claim: {
-        locale: {
-            name: 'reclamación',
-        },
-    },
-    ClaimObservation: {
-        locale: {
-            name: 'observación',
-        },
-    },
-    ClaimDms: {
-        locale: {
-            name: 'documento',
-        },
-    },
-    ClaimBeginning: {
-        locale: {
-            name: 'comienzo',
-        },
-    },
-};
-
 describe('VnLog', () => {
     let vm;
+    const mockValidations = {
+        Claim: {
+            locale: {
+                name: 'reclamación',
+            },
+        },
+        ClaimObservation: {
+            locale: {
+                name: 'observación',
+            },
+        },
+        ClaimDms: {
+            locale: {
+                name: 'documento',
+            },
+        },
+        ClaimBeginning: {
+            locale: {
+                name: 'comienzo',
+            },
+        },
+    };
 
     beforeAll(() => {
         vm = createWrapper(VnLog, {
@@ -38,6 +37,7 @@ describe('VnLog', () => {
                 model: 'Claim',
             },
         }).vm;
+        vm.validations = mockValidations;
     });
 
     afterEach(() => {
@@ -100,7 +100,6 @@ describe('VnLog', () => {
                 },
             },
         ];
-        vm.validations = mockValidations;
         vm.logTree = vm.getLogs(fakeLogTreeData);
         expect(vm.logTree[0].originFk).toEqual(1);
         expect(vm.logTree[0].logs[0].user.name).toEqual('salesPerson');
@@ -121,11 +120,11 @@ describe('VnLog', () => {
         expect(vm.selectedFilters.action).toEqual({ inq: ['insert', 'update'] });
     });
 
-    /*it('should correctly set the date from', () => {
+    it('should correctly set the date from', () => {
         vm.date = '18-09-2023';
         vm.selectFilter('date', 'from');
         expect(vm.selectedFilters.creationDate).toEqual({
             between: ['2023-09-18T00:00:00.000Z', '2023-09-18T19:59:59.999Z'],
         });
-    }); */
+    });
 });

From 970226f012da3f24810b5513160cb268ee831df2 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 29 Sep 2023 15:13:19 +0200
Subject: [PATCH 09/17] ref #6104 test e2e fixed

---
 test/cypress/integration/vnLog.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/cypress/integration/vnLog.spec.js b/test/cypress/integration/vnLog.spec.js
index bf9edb66c..97c9e7a33 100644
--- a/test/cypress/integration/vnLog.spec.js
+++ b/test/cypress/integration/vnLog.spec.js
@@ -15,7 +15,7 @@ describe('VnLog', () => {
 
     it('should filter by entity', () => {
         cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).click();
-        cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).type('mien');
-        cy.get('[role="listbox"] .q-item').should('have.text', 'Comienzo');
+        cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).type('cla');
+        cy.get('[role="listbox"] .q-item').should('have.text', 'Claim');
     });
 });

From 801ed8ab50081917f5043fb889ce5f16ae84cefa Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 2 Oct 2023 09:19:08 +0200
Subject: [PATCH 10/17] ref #6104 remove css

---
 src/components/common/VnLog.vue | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 09e580f29..ba9d74ec5 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -842,22 +842,6 @@ setLogTree();
         />
     </QPageSticky>
 </template>
-<style lang="scss">
-.q-timeline__subtitle {
-    opacity: 1 !important;
-}
-.logs {
-    .vn-label-value {
-        .label {
-            margin-right: 5px;
-            color: var(--vn-label);
-        }
-    }
-    .q-avatar {
-        font-size: 38px;
-    }
-}
-</style>
 <style lang="scss" scoped>
 .q-card {
     background-color: var(--vn-gray);

From 868ecdf6803984e3959a7e3110e7590c6ae0486c Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 4 Oct 2023 15:46:15 +0200
Subject: [PATCH 11/17] ref #6104 mock axios test call and refactor e2e

---
 src/components/common/VnLog.vue               |  56 ++++----
 src/composables/useIso8601.js                 |  18 ---
 test/cypress/integration/workerList.spec.js   |  16 +--
 test/cypress/support/commands.js              |   4 +
 .../__tests__/components/common/VnLog.spec.js | 130 +++++++++---------
 test/vitest/helper.js                         |   5 +-
 6 files changed, 112 insertions(+), 117 deletions(-)
 delete mode 100644 src/composables/useIso8601.js

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index ba9d74ec5..eb0d1e345 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -3,11 +3,11 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
+import { date } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
-import { toRelativeDate, toDateString, toDateHour } from 'src/filters';
+import { toRelativeDate } from 'src/filters';
 import { useColor } from 'src/composables/useColor';
 import { useFirstUpper } from 'src/composables/useFirstUpper';
-import { useIso8601 } from 'src/composables/useIso8601';
 import { useValidator } from 'src/composables/useValidator';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnJsonValue from '../common/VnJsonValue.vue';
@@ -63,8 +63,8 @@ const changeInput = ref();
 const searchInput = ref();
 const userRadio = ref();
 const userSelect = ref();
-const date = ref();
-const dateDialog = ref(false);
+const dateFrom = ref();
+const dateFromDialog = ref(false);
 const dateTo = ref();
 const dateToDialog = ref(false);
 const selectedFilters = ref({});
@@ -164,7 +164,8 @@ function getLogs(data) {
     let modelLog = null;
     let prevLog;
     let nLogs;
-
+    console.log('EEEEEEE', data);
+    console.log('validations', validations);
     data.forEach((log) => {
         const locale = validations[log.changedModel]?.locale || {};
 
@@ -267,18 +268,25 @@ async function applyFilter() {
 }
 
 function setDate(type) {
-    const from = date.value
-        ? useIso8601(date.value.split('-').reverse().join('-'))
+    let from = dateFrom.value
+        ? date.formatDate(dateFrom.value.split('-').reverse().join('-'), 'YYYY-MM-DD')
         : undefined;
-    const to = dateTo.value
-        ? useIso8601(`${dateTo.value.split('-').reverse().join('-')} 21:59:59.999`)
-        : useIso8601(`${date.value.split('-').reverse().join('-')} 21:59:59.999`);
+    from = date.adjustDate(from, { hour: 0, minute: 0, second: 0, millisecond: 0 }, true);
+
+    let to = dateTo.value
+        ? date.formatDate(dateTo.value.split('-').reverse().join('-'), 'YYYY-MM-DD')
+        : date.formatDate(dateFrom.value.split('-').reverse().join('-'), 'YYYY-MM-DD');
+    to = date.adjustDate(
+        to,
+        { hour: 21, minute: 59, second: 59, millisecond: 999 },
+        true
+    );
 
     switch (type) {
         case 'from':
             return { between: [from, to] };
         case 'to': {
-            if (date.value) {
+            if (dateFrom.value) {
                 return {
                     between: [from, to],
                 };
@@ -325,7 +333,7 @@ function selectFilter(type, dateType) {
             userSelect.value !== null ? userSelect.value : undefined;
     }
     if (type === 'date') {
-        if (!date.value && !dateTo.value) {
+        if (!dateFrom.value && !dateTo.value) {
             selectedFilters.value.creationDate = undefined;
         } else if (dateType === 'to') {
             selectedFilters.value.creationDate = setDate('to');
@@ -352,7 +360,7 @@ async function clearFilter() {
     userSelect.value = undefined;
     searchInput.value = undefined;
     changeInput.value = undefined;
-    date.value = undefined;
+    dateFrom.value = undefined;
     dateTo.value = undefined;
     Object.keys(checkboxOptions.value).forEach(
         (opt) => (checkboxOptions.value[opt].selected = false)
@@ -493,8 +501,10 @@ setLogTree();
                                     <div
                                         class="date text-grey text-caption q-mr-sm"
                                         :title="
-                                            toDateHour(log.creationDate) ??
-                                            `date:'dd/MM/yyyy HH:mm:ss'`
+                                            date.formatDate(
+                                                log.creationDate,
+                                                'DD/MM/YYYY hh:mm:ss'
+                                            ) ?? `date:'dd/MM/yyyy HH:mm:ss'`
                                         "
                                     >
                                         {{ toRelativeDate(log.creationDate) }}
@@ -775,10 +785,10 @@ setLogTree();
                     <QInput
                         class="full-width"
                         :label="t('globals.date')"
-                        @click="dateDialog = true"
+                        @click="dateFromDialog = true"
                         @focus="(evt) => evt.target.blur()"
                         @clear="selectFilter('date', 'to')"
-                        v-model="date"
+                        v-model="dateFrom"
                         clearable
                         clear-icon="close"
                     />
@@ -798,18 +808,17 @@ setLogTree();
             </QList>
         </QScrollArea>
     </QDrawer>
-    <QDialog v-model="dateDialog">
+    <QDialog v-model="dateFromDialog">
         <QDate
             :years-in-month-view="false"
-            v-model="date"
+            v-model="dateFrom"
             dense
             flat
             minimal
             @update:model-value="
                 (value) => {
-                    dateDialog = false;
-                    const formatDate = toDateString(new Date(value));
-                    date = formatDate.split('-').reverse().join('-');
+                    dateFromDialog = false;
+                    dateFrom = date.formatDate(value, 'DD-MM-YYYY');
                     selectFilter('date', 'from');
                 }
             "
@@ -824,8 +833,7 @@ setLogTree();
             @update:model-value="
                 (value) => {
                     dateToDialog = false;
-                    const formatDate = toDateString(new Date(value));
-                    dateTo = formatDate.split('-').reverse().join('-');
+                    dateTo = date.formatDate(value, 'DD-MM-YYYY');
                     selectFilter('date', 'to');
                 }
             "
diff --git a/src/composables/useIso8601.js b/src/composables/useIso8601.js
deleted file mode 100644
index 848e60de8..000000000
--- a/src/composables/useIso8601.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export function useIso8601(dateString) {
-    // Crear un objeto Date a partir de la cadena de texto
-    const date = new Date(dateString);
-
-    // Obtener los componentes de fecha y hora
-    const year = date.getUTCFullYear();
-    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
-    const day = String(date.getUTCDate()).padStart(2, '0');
-    const hours = String(date.getUTCHours()).padStart(2, '0');
-    const minutes = String(date.getUTCMinutes()).padStart(2, '0');
-    const seconds = String(date.getUTCSeconds()).padStart(2, '0');
-    const milliseconds = String(date.getUTCMilliseconds()).padStart(3, '0');
-
-    // Formatear la cadena en el formato ISO 8601
-    const formattedDate = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}Z`;
-
-    return formattedDate;
-}
diff --git a/test/cypress/integration/workerList.spec.js b/test/cypress/integration/workerList.spec.js
index 8d4dd770d..2ab84c623 100644
--- a/test/cypress/integration/workerList.spec.js
+++ b/test/cypress/integration/workerList.spec.js
@@ -1,4 +1,6 @@
 describe('WorkerList', () => {
+    const workerFieldNames =
+        '.card-list-body > .list-items > :nth-child(2) > .value > span';
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('developer');
@@ -6,19 +8,13 @@ describe('WorkerList', () => {
     });
 
     it('should load workers', () => {
-        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(0)
-            .should('have.text', 'JessicaJones');
-        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(1)
-            .should('have.text', 'BruceBanner');
-        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(2)
-            .should('have.text', 'CharlesXavier');
+        cy.get(workerFieldNames).eq(0).should('have.text', 'JessicaJones');
+        cy.get(workerFieldNames).eq(1).should('have.text', 'BruceBanner');
+        cy.get(workerFieldNames).eq(2).should('have.text', 'CharlesXavier');
     });
 
     it('should open the worker summary', () => {
-        cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(0).click();
+        cy.openListSummary(0);
         cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones');
         cy.get('.summary .header').eq(0).invoke('text').should('include', 'Basic data');
         cy.get('.summary .header').eq(1).should('have.text', 'User data');
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 2eb14e463..0c930f9d8 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -127,4 +127,8 @@ Cypress.Commands.add('validateRow', (rowSelector, expectedValues) => {
         }
     });
 });
+
+Cypress.Commands.add('openListSummary', (row) => {
+    cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(row).click();
+});
 // registerCommands();
diff --git a/test/vitest/__tests__/components/common/VnLog.spec.js b/test/vitest/__tests__/components/common/VnLog.spec.js
index 1fd5b3990..dbcb30272 100644
--- a/test/vitest/__tests__/components/common/VnLog.spec.js
+++ b/test/vitest/__tests__/components/common/VnLog.spec.js
@@ -1,9 +1,64 @@
 import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
-import { createWrapper } from 'app/test/vitest/helper';
+import { createWrapper, axios } from 'app/test/vitest/helper';
 import VnLog from 'src/components/common/VnLog.vue';
 
 describe('VnLog', () => {
     let vm;
+    const fakeLogTreeData = [
+        {
+            id: 2,
+            originFk: 1,
+            userFk: 18,
+            action: 'update',
+            changedModel: 'ClaimObservation',
+            oldInstance: {},
+            newInstance: {
+                claimFk: 1,
+                text: 'Waiting for customer',
+            },
+            creationDate: '2023-09-18T12:25:34.000Z',
+            changedModelId: '1',
+            changedModelValue: null,
+            description: null,
+            user: {
+                id: 18,
+                name: 'salesPerson',
+                nickname: 'salesPersonNick',
+                image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
+                worker: {
+                    id: 18,
+                    userFk: 18,
+                },
+            },
+        },
+        {
+            id: 1,
+            originFk: 1,
+            userFk: 18,
+            action: 'update',
+            changedModel: 'Claim',
+            oldInstance: {
+                hasToPickUp: false,
+            },
+            newInstance: {
+                hasToPickUp: true,
+            },
+            creationDate: '2023-09-18T12:25:34.000Z',
+            changedModelId: '1',
+            changedModelValue: null,
+            description: null,
+            user: {
+                id: 18,
+                name: 'salesPerson',
+                nickname: 'salesPersonNick',
+                image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
+                worker: {
+                    id: 18,
+                    userFk: 18,
+                },
+            },
+        },
+    ];
     const mockValidations = {
         Claim: {
             locale: {
@@ -27,7 +82,11 @@ describe('VnLog', () => {
         },
     };
 
-    beforeAll(() => {
+    beforeAll(async () => {
+        axios.get.mockImplementation(() => {
+            return { data: fakeLogTreeData };
+        });
+
         vm = createWrapper(VnLog, {
             global: {
                 stubs: [],
@@ -45,68 +104,12 @@ describe('VnLog', () => {
     });
 
     it('should correctly set logTree', async () => {
-        const fakeLogTreeData = [
-            {
-                id: 2,
-                originFk: 1,
-                userFk: 18,
-                action: 'update',
-                changedModel: 'ClaimObservation',
-                oldInstance: {},
-                newInstance: {
-                    claimFk: 1,
-                    text: 'Waiting for customer',
-                },
-                creationDate: '2023-09-18T12:25:34.000Z',
-                changedModelId: '1',
-                changedModelValue: null,
-                description: null,
-                user: {
-                    id: 18,
-                    name: 'salesPerson',
-                    nickname: 'salesPersonNick',
-                    image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
-                    worker: {
-                        id: 18,
-                        userFk: 18,
-                    },
-                },
-            },
-            {
-                id: 1,
-                originFk: 1,
-                userFk: 18,
-                action: 'update',
-                changedModel: 'Claim',
-                oldInstance: {
-                    hasToPickUp: false,
-                },
-                newInstance: {
-                    hasToPickUp: true,
-                },
-                creationDate: '2023-09-18T12:25:34.000Z',
-                changedModelId: '1',
-                changedModelValue: null,
-                description: null,
-                user: {
-                    id: 18,
-                    name: 'salesPerson',
-                    nickname: 'salesPersonNick',
-                    image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
-                    worker: {
-                        id: 18,
-                        userFk: 18,
-                    },
-                },
-            },
-        ];
         vm.logTree = vm.getLogs(fakeLogTreeData);
         expect(vm.logTree[0].originFk).toEqual(1);
         expect(vm.logTree[0].logs[0].user.name).toEqual('salesPerson');
     });
 
-    it('should correctly set the selectedFilters when filtering', async () => {
-        await vm.$nextTick();
+    it('should correctly set the selectedFilters when filtering', () => {
         vm.searchInput = '1';
         vm.userSelect = '21';
         vm.checkboxOptions.insert.selected = true;
@@ -121,10 +124,11 @@ describe('VnLog', () => {
     });
 
     it('should correctly set the date from', () => {
-        vm.date = '18-09-2023';
+        vm.dateFrom = '18-09-2023';
         vm.selectFilter('date', 'from');
-        expect(vm.selectedFilters.creationDate).toEqual({
-            between: ['2023-09-18T00:00:00.000Z', '2023-09-18T19:59:59.999Z'],
-        });
+        expect(vm.selectedFilters.creationDate.between).toEqual([
+            new Date('2023-09-18T00:00:00.000Z'),
+            new Date('2023-09-18T21:59:59.999Z'),
+        ]);
     });
 });
diff --git a/test/vitest/helper.js b/test/vitest/helper.js
index dea335803..4bbdc337a 100644
--- a/test/vitest/helper.js
+++ b/test/vitest/helper.js
@@ -13,7 +13,6 @@ installQuasarPlugin({
         Dialog,
     },
 });
-axios.defaults.baseURL = 'http://localhost:9000/api/';
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
 const mockPush = vi.fn();
 
@@ -35,8 +34,10 @@ vi.mock('vue-router', () => ({
     }),
 }));
 
+vi.mock('axios');
+
 vi.spyOn(useValidator, 'useValidator').mockImplementation(() => {
-    return { validate: vi.fn(), fetch: vi.fn() };
+    return { validate: vi.fn() };
 });
 
 class FormDataMock {

From 128d7ab10d7a0337b816b6b325cc4cc919483ea5 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 4 Oct 2023 15:52:40 +0200
Subject: [PATCH 12/17] ref #6104 console logs removed

---
 src/components/common/VnLog.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index eb0d1e345..049613670 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -164,8 +164,7 @@ function getLogs(data) {
     let modelLog = null;
     let prevLog;
     let nLogs;
-    console.log('EEEEEEE', data);
-    console.log('validations', validations);
+
     data.forEach((log) => {
         const locale = validations[log.changedModel]?.locale || {};
 

From b29d32679748f410e6e61a65d59fae34a2d5a2d8 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 13 Oct 2023 12:26:37 +0200
Subject: [PATCH 13/17] ref #6104 vnSelectFilter added

---
 src/components/common/VnLog.vue          | 92 +++++++-----------------
 src/components/common/VnSelectFilter.vue |  5 +-
 test/cypress/integration/vnLog.spec.js   |  4 +-
 3 files changed, 30 insertions(+), 71 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 049613670..b0583b884 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -13,6 +13,7 @@ import VnAvatar from '../ui/VnAvatar.vue';
 import VnJsonValue from '../common/VnJsonValue.vue';
 import FetchData from '../FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnSelectFilter from './VnSelectFilter.vue';
 
 const stateStore = useStateStore();
 const validationsStore = useValidator();
@@ -120,7 +121,6 @@ const validDate = new RegExp(
         /T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/.source
 );
 
-const filteredActions = ref([]);
 const filteredWorkers = ref([]);
 
 function castJsonValue(value) {
@@ -361,40 +361,13 @@ async function clearFilter() {
     changeInput.value = undefined;
     dateFrom.value = undefined;
     dateTo.value = undefined;
+    userRadio.value = undefined;
     Object.keys(checkboxOptions.value).forEach(
         (opt) => (checkboxOptions.value[opt].selected = false)
     );
     await applyFilter();
 }
 
-function filterFn(val, update, abortFn, type) {
-    if (!val) {
-        update(() => {
-            if (type === 'actions') filteredActions.value = actions.value;
-            if (type === 'workers') filteredWorkers.value = workers.value;
-        });
-        return;
-    }
-
-    update(() => {
-        const needle = val.toLowerCase();
-        if (type === 'actions')
-            filteredActions.value = actions.value.filter((item) =>
-                validations[item].locale.name.includes(needle)
-            );
-        if (type === 'workers') {
-            if (isNaN(needle))
-                filteredWorkers.value = workers.value.filter(
-                    (item) =>
-                        item.name.toLowerCase().includes(needle) ||
-                        item.nickname.toLowerCase().includes(needle)
-                );
-            else
-                filteredWorkers.value = workers.value.filter((item) => item.id == needle);
-        }
-    });
-}
-
 setLogTree();
 </script>
 <template>
@@ -411,7 +384,15 @@ setLogTree();
     <FetchData
         :url="`${props.model}Logs/${route.params.id}/models`"
         :filter="{ order: ['changedModel'] }"
-        @on-fetch="(data) => (actions = data.map((item) => item.changedModel))"
+        @on-fetch="
+            (data) =>
+                (actions = data.map((item) => {
+                    return {
+                        locale: useFirstUpper(validations[item.changedModel].locale.name),
+                        value: item.changedModel,
+                    };
+                }))
+        "
         auto-load
     />
     <div
@@ -669,31 +650,16 @@ setLogTree();
                         </template>
                     </QInput>
                 </QItem>
-                <QItem class="q-mt-sm">
-                    <QSelect
+                <QItem>
+                    <VnSelectFilter
                         class="full-width"
-                        v-model="selectedFilters.changedModel"
-                        @update:model-value="selectFilter('action')"
-                        :options="filteredActions"
                         :label="t('globals.entity')"
-                        use-input
-                        clearable
-                        clear-icon="close"
-                        @filter="
-                            (val, update, abortFn) =>
-                                filterFn(val, update, abortFn, 'actions')
-                        "
+                        v-model="selectedFilters.changedModel"
+                        option-label="locale"
+                        :options="actions"
+                        @update:model-value="selectFilter('action')"
                         @clear="() => selectFilter('action')"
-                    >
-                        <template #option="{ opt, index, itemProps }">
-                            <QItem :index="index" v-bind="itemProps">
-                                {{ useFirstUpper(validations[opt].locale.name) }}
-                            </QItem>
-                        </template>
-                        <template #selected-item="{ opt }">
-                            {{ useFirstUpper(validations[opt].locale.name) }}
-                        </template>
-                    </QSelect>
+                    />
                 </QItem>
                 <QItem class="q-mt-sm">
                     <QOptionGroup
@@ -713,23 +679,15 @@ setLogTree();
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
-                    <QItemSection v-if="workers">
-                        <QSelect
+                    <QItemSection v-if="workers && userRadio !== null">
+                        <VnSelectFilter
+                            class="full-width"
                             :label="t('globals.user')"
                             v-model="userSelect"
-                            @update:model-value="selectFilter('userSelect')"
-                            :options="filteredWorkers"
-                            option-value="id"
                             option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            clearable
-                            clear-icon="close"
-                            @filter="
-                                (val, update, abortFn) =>
-                                    filterFn(val, update, abortFn, 'workers')
-                            "
+                            option-value="id"
+                            :options="workers"
+                            @update:model-value="selectFilter('userSelect')"
                         >
                             <template #option="{ opt, itemProps }">
                                 <QItem
@@ -745,7 +703,7 @@ setLogTree();
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </QSelect>
+                        </VnSelectFilter>
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mt-sm">
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 55395f260..fc8d5809e 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -83,11 +83,10 @@ const value = computed({
         @filter="filterHandler"
         hide-selected
         fill-input
+        clearable
+        clear-icon="close"
         ref="vnSelectRef"
     >
-        <template #append>
-            <QIcon name="close" @click.stop="value = null" class="cursor-pointer" />
-        </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
             <slot :name="slotName" v-bind="slotData" />
         </template>
diff --git a/test/cypress/integration/vnLog.spec.js b/test/cypress/integration/vnLog.spec.js
index 97c9e7a33..784780c68 100644
--- a/test/cypress/integration/vnLog.spec.js
+++ b/test/cypress/integration/vnLog.spec.js
@@ -16,6 +16,8 @@ describe('VnLog', () => {
     it('should filter by entity', () => {
         cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).click();
         cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).type('cla');
-        cy.get('[role="listbox"] .q-item').should('have.text', 'Claim');
+        cy.get('.q-virtual-scroll__content .q-item').eq(0).click();
+        cy.get('.q-page').click();
+        cy.get('.model-info .q-chip__content').eq(0).should('have.text', 'Claim');
     });
 });

From e977467eff0a2363fd90aa4c34d430689eab434a Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 18 Oct 2023 10:18:25 +0200
Subject: [PATCH 14/17] ref #6104 refactor e2e tests

---
 src/components/common/VnSelectFilter.vue |  2 --
 test/cypress/integration/vnLog.spec.js   | 18 ++++++++++--------
 test/cypress/support/commands.js         | 10 +++++++++-
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index fc8d5809e..ba06e3dfe 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -83,8 +83,6 @@ const value = computed({
         @filter="filterHandler"
         hide-selected
         fill-input
-        clearable
-        clear-icon="close"
         ref="vnSelectRef"
     >
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
diff --git a/test/cypress/integration/vnLog.spec.js b/test/cypress/integration/vnLog.spec.js
index 784780c68..80b9d07df 100644
--- a/test/cypress/integration/vnLog.spec.js
+++ b/test/cypress/integration/vnLog.spec.js
@@ -1,23 +1,25 @@
 /// <reference types="cypress" />
 describe('VnLog', () => {
+    const chips = [
+        ':nth-child(1) > :nth-child(1) > .q-item__label > .q-chip > .q-chip__content',
+        ':nth-child(2) > :nth-child(1) > .q-item__label > .q-chip > .q-chip__content',
+    ];
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/claim/${1}/log`);
-        cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
+        cy.openRightMenu();
     });
 
     it('should filter by insert actions', () => {
-        cy.get('.q-checkbox__inner').eq(0).click();
+        cy.checkOption(':nth-child(7) > .q-checkbox');
         cy.get('.q-page').click();
-        cy.get('.model-info .q-chip__content').eq(0).should('have.text', 'Document');
-        cy.get('.model-info .q-chip__content').eq(1).should('have.text', 'Beginning');
+        cy.validateContent(chips[0], 'Document');
+        cy.validateContent(chips[1], 'Beginning');
     });
 
     it('should filter by entity', () => {
-        cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).click();
-        cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).type('cla');
-        cy.get('.q-virtual-scroll__content .q-item').eq(0).click();
+        cy.selectOption('.q-drawer--right .q-item > .q-select', 'Claim');
         cy.get('.q-page').click();
-        cy.get('.model-info .q-chip__content').eq(0).should('have.text', 'Claim');
+        cy.validateContent(chips[0], 'Claim');
     });
 });
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 0f7fa0991..04282f5f8 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -70,7 +70,7 @@ Cypress.Commands.add('selectOption', (selector, option) => {
 });
 
 Cypress.Commands.add('checkOption', (selector) => {
-    cy.wrap(selector).find('.q-checkbox__inner').click();
+    cy.get(selector).find('.q-checkbox__inner').click();
 });
 
 // Global buttons
@@ -130,4 +130,12 @@ Cypress.Commands.add('validateRow', (rowSelector, expectedValues) => {
 Cypress.Commands.add('openListSummary', (row) => {
     cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(row).click();
 });
+
+Cypress.Commands.add('openRightMenu', () => {
+    cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
+});
+
+Cypress.Commands.add('validateContent', (selector, expectedValue) => {
+    cy.get(selector).should('have.text', expectedValue);
+});
 // registerCommands();

From cf404f5dfa29a94ac4ef9f1059b344111333954c Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 19 Oct 2023 09:57:34 +0200
Subject: [PATCH 15/17] ref #6104 refactor

---
 src/components/common/VnLog.vue          | 2 --
 src/components/common/VnSelectFilter.vue | 3 +++
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index b0583b884..bbc8d5cde 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -121,8 +121,6 @@ const validDate = new RegExp(
         /T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/.source
 );
 
-const filteredWorkers = ref([]);
-
 function castJsonValue(value) {
     return typeof value === 'string' && validDate.test(value) ? new Date(value) : value;
 }
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index ba06e3dfe..55395f260 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -85,6 +85,9 @@ const value = computed({
         fill-input
         ref="vnSelectRef"
     >
+        <template #append>
+            <QIcon name="close" @click.stop="value = null" class="cursor-pointer" />
+        </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
             <slot :name="slotName" v-bind="slotData" />
         </template>

From 52622d9a00a0debe3116572bd235750c2071076b Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 11 Dec 2023 11:59:01 +0100
Subject: [PATCH 16/17] refs #6104 fix tests

---
 src/components/common/VnLog.vue        |  5 +++--
 test/cypress/integration/vnLog.spec.js |  2 +-
 test/cypress/support/commands.js       | 12 ++++++------
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index bbc8d5cde..e89fce476 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -287,9 +287,8 @@ function setDate(type) {
                 return {
                     between: [from, to],
                 };
-            } else {
-                return { lte: to };
             }
+            return { lte: to };
         }
     }
 }
@@ -657,6 +656,7 @@ setLogTree();
                         :options="actions"
                         @update:model-value="selectFilter('action')"
                         @clear="() => selectFilter('action')"
+                        hide-selected
                     />
                 </QItem>
                 <QItem class="q-mt-sm">
@@ -686,6 +686,7 @@ setLogTree();
                             option-value="id"
                             :options="workers"
                             @update:model-value="selectFilter('userSelect')"
+                            hide-selected
                         >
                             <template #option="{ opt, itemProps }">
                                 <QItem
diff --git a/test/cypress/integration/vnLog.spec.js b/test/cypress/integration/vnLog.spec.js
index 80b9d07df..d120b8ad4 100644
--- a/test/cypress/integration/vnLog.spec.js
+++ b/test/cypress/integration/vnLog.spec.js
@@ -7,7 +7,7 @@ describe('VnLog', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/claim/${1}/log`);
-        cy.openRightMenu();
+        cy.openRightMenu('.timeline');
     });
 
     it('should filter by insert actions', () => {
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index e57826c88..2136584e2 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -51,15 +51,14 @@ Cypress.Commands.add('getValue', (selector) => {
             return cy.get(selector + '.q-checkbox__inner');
         }
         // Si es un QSelect
-        else if ($el.find('.q-select__dropdown-icon').length) {
+        if ($el.find('.q-select__dropdown-icon').length) {
             return cy.get(
                 selector +
                     '> .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > input'
             );
-        } else {
-            // Puedes añadir un log o lanzar un error si el elemento no es reconocido
-            cy.log('Elemento no soportado');
         }
+        // Puedes añadir un log o lanzar un error si el elemento no es reconocido
+        cy.log('Elemento no soportado');
     });
 });
 
@@ -136,8 +135,9 @@ Cypress.Commands.add('openListSummary', (row) => {
     cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(row).click();
 });
 
-Cypress.Commands.add('openRightMenu', () => {
-    cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
+Cypress.Commands.add('openRightMenu', (element) => {
+    if (element) cy.waitForElement(element);
+    cy.get('#actions-append').click();
 });
 
 Cypress.Commands.add('validateContent', (selector, expectedValue) => {

From e7c9a18f361d0df5c0c9f029ad10bad1e88475fa Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 11 Dec 2023 12:29:31 +0100
Subject: [PATCH 17/17] refs #6104 fix package

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 929a7c202..bfaba6f10 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test:e2e": "cypress open",
-        "test:e2e:ci": "cypress run --browser chrome",
+        "test:e2e:ci": "cd ../salix && gulp docker && cd ../salix-front && cypress run",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
         "test:unit": "vitest",
         "test:unit:ci": "vitest run"