diff --git a/package-lock.json b/package-lock.json
index a3a9dcc63..2e96d2ccf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "23.40.01",
+    "version": "23.36.01",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
diff --git a/package.json b/package.json
index 583233204..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": "cd ../salix && gulp docker && cd ../salix-front && cypress run --browser chromium",
+        "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"
diff --git a/quasar.config.js b/quasar.config.js
index 3a7dc1f1e..755e96bd3 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/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..e89fce476 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -1,19 +1,25 @@
 <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 { date } from 'quasar';
 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 { toRelativeDate } from 'src/filters';
+import { useColor } from 'src/composables/useColor';
+import { useFirstUpper } from 'src/composables/useFirstUpper';
+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';
+import VnSelectFilter from './VnSelectFilter.vue';
 
 const stateStore = useStateStore();
+const validationsStore = useValidator();
+const { models } = validationsStore;
 const route = useRoute();
-const session = useSession();
-const token = session.getToken();
 const { t } = useI18n();
-
 const props = defineProps({
     model: {
         type: String,
@@ -21,108 +27,598 @@ const props = defineProps({
     },
 });
 
-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 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 workers = ref();
+const actions = ref();
+const changeInput = ref();
+const searchInput = ref();
+const userRadio = ref();
+const userSelect = ref();
+const dateFrom = ref();
+const dateFromDialog = 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 = models;
+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');
-    }
-
-    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;
+    let nLogs;
+
+    data.forEach((log) => {
+        const locale = validations[log.changedModel]?.locale || {};
+
+        // Origin
+        const originChanged = !prevLog || log.originFk != prevLog.originFk;
+        if (originChanged) {
+            logs.push((originLog = { originFk: log.originFk, logs: [] }));
+            prevLog = log;
+        }
+        // User
+        const userChanged = originChanged || log.userFk != prevLog.userFk;
+        if (userChanged) {
+            originLog.logs.push(
+                (userLog = {
+                    user: log.user,
+                    userFk: log.userFk,
+                    logs: [],
+                })
+            );
+        }
+        // Model
+        const modelChanged =
+            userChanged ||
+            log.changedModel != prevLog.changedModel ||
+            log.changedModelId != prevLog.changedModelId ||
+            nLogs >= 6;
+        if (modelChanged) {
+            userLog.logs.push(
+                (modelLog = {
+                    model: log.changedModel,
+                    modelI18n: useFirstUpper(locale.name) || log.changedModel,
+                    id: log.changedModelId,
+                    showValue: log.changedModelValue,
+                    logs: [],
+                })
+            );
+            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 = validations[modelLog.model]?.locale || {};
+    pointRecord.value = parseProps(propNames, locale, data);
+}
+async function setLogTree() {
+    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) {
+    let from = dateFrom.value
+        ? date.formatDate(dateFrom.value.split('-').reverse().join('-'), 'YYYY-MM-DD')
+        : undefined;
+    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 (dateFrom.value) {
+                return {
+                    between: [from, to],
+                };
+            }
+            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 (!dateFrom.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;
+    dateFrom.value = undefined;
+    dateTo.value = undefined;
+    userRadio.value = undefined;
+    Object.keys(checkboxOptions.value).forEach(
+        (opt) => (checkboxOptions.value[opt].selected = false)
+    );
+    await applyFilter();
+}
+
+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) => {
+                    return {
+                        locale: useFirstUpper(validations[item.changedModel].locale.name),
+                        value: 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 text-grey">
+                {{ useFirstUpper(validations[props.model].locale.name) }}
+                #{{ originLog.originFk }}
+            </h6>
+            <div class="line bg-grey"></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="
+                                            date.formatDate(
+                                                log.creationDate,
+                                                'DD/MM/YYYY hh:mm:ss'
+                                            ) ?? `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="none"
+                                            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"
+                                />
+                                <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"
+                                            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"
+                                                >,&nbsp;
+                                            </span>
+                                        </span>
+                                    </span>
+                                    <span
+                                        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>
+                                    </span>
+                                </span>
+                                <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 +627,390 @@ 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>
+                    <VnSelectFilter
+                        class="full-width"
+                        :label="t('globals.entity')"
+                        v-model="selectedFilters.changedModel"
+                        option-label="locale"
+                        :options="actions"
+                        @update:model-value="selectFilter('action')"
+                        @clear="() => selectFilter('action')"
+                        hide-selected
+                    />
+                </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 && userRadio !== null">
+                        <VnSelectFilter
+                            class="full-width"
+                            :label="t('globals.user')"
+                            v-model="userSelect"
+                            option-label="name"
+                            option-value="id"
+                            :options="workers"
+                            @update:model-value="selectFilter('userSelect')"
+                            hide-selected
+                        >
+                            <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>
+                        </VnSelectFilter>
+                    </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="dateFromDialog = true"
+                        @focus="(evt) => evt.target.blur()"
+                        @clear="selectFilter('date', 'to')"
+                        v-model="dateFrom"
+                        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="dateFromDialog">
+        <QDate
+            :years-in-month-view="false"
+            v-model="dateFrom"
+            dense
+            flat
+            minimal
+            @update:model-value="
+                (value) => {
+                    dateFromDialog = false;
+                    dateFrom = date.formatDate(value, 'DD-MM-YYYY');
+                    selectFilter('date', 'from');
+                }
+            "
+        />
+    </QDialog>
+    <QDialog v-model="dateToDialog">
+        <QDate
+            v-model="dateTo"
+            dense
+            flat
+            minimal
+            @update:model-value="
+                (value) => {
+                    dateToDialog = false;
+                    dateTo = date.formatDate(value, 'DD-MM-YYYY');
+                    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" scoped>
-.q-timeline {
+.q-card {
+    background-color: var(--vn-gray);
+}
+.q-item {
+    min-height: 0px;
+}
+
+.origin-log {
+    &:first-child > .origin-info {
+        margin-top: 0;
+    }
+    & > .origin-info {
+        width: 100%;
+        max-width: 42em;
+        margin-top: 28px;
+        gap: 6px;
+
+        & > .origin-id {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            margin: 0;
+        }
+        & > .line {
+            flex-grow: 1;
+            height: 2px;
+        }
+    }
+}
+.user-log {
     width: 100%;
-    max-width: 80em;
+    max-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 {
+            visibility: hidden;
+            float: right;
+        }
+    }
+
+    &:hover {
+        .model-info {
+            .q-btn {
+                visibility: visible;
+            }
+        }
+    }
+}
+.changes-log {
+    width: 100%;
+    overflow: hidden;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+    .change-info {
+        overflow: hidden;
+        background-color: var(--vn-dark);
+        & > .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;
+                }
+            }
+        }
+        .q-btn.pit {
+            visibility: hidden;
+        }
+        &:hover .q-btn.pit {
+            visibility: visible;
+        }
+    }
+    & > .change-detail {
+        position: relative;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        background-color: var(--vn-gray);
+        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
-    models:
-        Claim: Claim
-        ClaimDms: Document
-        ClaimBeginning: Claimed Sales
-        ClaimObservation: Observation
+        Creates: Creates
+        Edits: Edits
+        Deletes: Deletes
+        Accesses: Accesses
+    Users:
+        User: Usuario
+        All: Todo
+        System: Sistema
     properties:
         id: ID
         claimFk: Claim ID
@@ -172,6 +1030,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 +1043,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/useValidator.js b/src/composables/useValidator.js
index bc48332a2..3f9f00367 100644
--- a/src/composables/useValidator.js
+++ b/src/composables/useValidator.js
@@ -1,19 +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('.');
@@ -75,5 +68,6 @@ export function useValidator() {
 
     return {
         validate,
+        models,
     };
 }
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 148ce743d..41bf03c5e 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',
         microsip: 'Open in MicroSIP',
         noSelectedRows: `You don't have any line selected`,
     },
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index de9a2888b..83893ece4 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',
         noSelectedRows: `No tienes ninguna línea seleccionada`,
         microsip: 'Abrir en MicroSIP',
     },
diff --git a/src/stores/useValidationsStore.js b/src/stores/useValidationsStore.js
new file mode 100644
index 000000000..e00812379
--- /dev/null
+++ b/src/stores/useValidationsStore.js
@@ -0,0 +1,18 @@
+import axios from 'axios';
+import { defineStore } from 'pinia';
+
+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);
+            }
+        },
+    },
+});
diff --git a/test/cypress/integration/vnLog.spec.js b/test/cypress/integration/vnLog.spec.js
new file mode 100644
index 000000000..d120b8ad4
--- /dev/null
+++ b/test/cypress/integration/vnLog.spec.js
@@ -0,0 +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.openRightMenu('.timeline');
+    });
+
+    it('should filter by insert actions', () => {
+        cy.checkOption(':nth-child(7) > .q-checkbox');
+        cy.get('.q-page').click();
+        cy.validateContent(chips[0], 'Document');
+        cy.validateContent(chips[1], 'Beginning');
+    });
+
+    it('should filter by entity', () => {
+        cy.selectOption('.q-drawer--right .q-item > .q-select', 'Claim');
+        cy.get('.q-page').click();
+        cy.validateContent(chips[0], 'Claim');
+    });
+});
diff --git a/test/cypress/integration/worker/workerList.spec.js b/test/cypress/integration/worker/workerList.spec.js
index 219633263..2ab84c623 100644
--- a/test/cypress/integration/worker/workerList.spec.js
+++ b/test/cypress/integration/worker/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,20 +8,14 @@ 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(1).click();
-        cy.get('.summaryHeader div').should('have.text', '1109 - Bruce Banner');
+        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 0b518ca26..4dfde6e21 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');
     });
 });
 
@@ -70,7 +69,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
@@ -158,4 +157,16 @@ Cypress.Commands.add('removeRow', (rowIndex) => {
                 });
         });
 });
+Cypress.Commands.add('openListSummary', (row) => {
+    cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(row).click();
+});
+
+Cypress.Commands.add('openRightMenu', (element) => {
+    if (element) cy.waitForElement(element);
+    cy.get('#actions-append').click();
+});
+
+Cypress.Commands.add('validateContent', (selector, expectedValue) => {
+    cy.get(selector).should('have.text', expectedValue);
+});
 // registerCommands();
diff --git a/test/vitest/__tests__/components/common/VnLog.spec.js b/test/vitest/__tests__/components/common/VnLog.spec.js
index 6787b6d51..dbcb30272 100644
--- a/test/vitest/__tests__/components/common/VnLog.spec.js
+++ b/test/vitest/__tests__/components/common/VnLog.spec.js
@@ -1,75 +1,134 @@
 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;
-    beforeAll(() => {
-        vm = createWrapper(VnLog, {
-            global: {
-                stubs: ['FetchData', 'VnPaginate'],
-                mocks: {
-                    fetch: vi.fn(),
+    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: {
+                name: 'reclamación',
+            },
+        },
+        ClaimObservation: {
+            locale: {
+                name: 'observación',
+            },
+        },
+        ClaimDms: {
+            locale: {
+                name: 'documento',
+            },
+        },
+        ClaimBeginning: {
+            locale: {
+                name: 'comienzo',
+            },
+        },
+    };
+
+    beforeAll(async () => {
+        axios.get.mockImplementation(() => {
+            return { data: fakeLogTreeData };
+        });
+
+        vm = createWrapper(VnLog, {
+            global: {
+                stubs: [],
+                mocks: {},
+            },
             propsData: {
-                model: "Claim",
+                model: 'Claim',
             },
         }).vm;
+        vm.validations = mockValidations;
     });
 
     afterEach(() => {
         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"
-                },
-            }));
-
-           const result = vm.formatValue('01-01-1970');
-           expect(result).toEqual("Date formatted");
-        });
+    it('should correctly set logTree', async () => {
+        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', () => {
+        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.dateFrom = '18-09-2023';
+        vm.selectFilter('date', 'from');
+        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 7cc2bdfa5..89cc640fd 100644
--- a/test/vitest/helper.js
+++ b/test/vitest/helper.js
@@ -13,7 +13,6 @@ installQuasarPlugin({
         Dialog,
     },
 });
-
 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 {