diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 9174e4d3a..80f6dba45 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -48,24 +48,13 @@ onMounted(() => stateStore.setMounted());
             <div id="searchbar"></div>
             <q-space></q-space>
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
-                <div id="header-actions"></div>
+                <div id="actions-prepend"></div>
                 <q-btn id="pinnedModules" icon="apps" flat dense rounded>
                     <q-tooltip bottom>
                         {{ t('globals.pinnedModules') }}
                     </q-tooltip>
                     <PinnedModules />
                 </q-btn>
-                <q-btn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <q-tooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </q-tooltip>
-                </q-btn>
                 <q-btn rounded dense flat no-wrap id="user">
                     <q-avatar size="lg">
                         <q-img
@@ -79,6 +68,7 @@ onMounted(() => stateStore.setMounted());
                     </q-tooltip>
                     <UserPanel />
                 </q-btn>
+                <div id="actions-append"></div>
             </div>
         </q-toolbar>
     </q-header>
diff --git a/src/components/PaginateData.vue b/src/components/PaginateData.vue
index 78389f75b..849cadb98 100644
--- a/src/components/PaginateData.vue
+++ b/src/components/PaginateData.vue
@@ -86,6 +86,7 @@ async function paginate() {
 
     if (!props.url) return;
 
+    isLoading.value = true;
     await arrayData.loadMore();
 
     if (!arrayData.hasMoreData.value) {
@@ -121,7 +122,7 @@ async function onLoad(...params) {
 </script>
 
 <template>
-    <div class="column items-center">
+    <div>
         <div
             v-if="store.data && store.data.length === 0 && !isLoading"
             class="info-row q-pa-md text-center"
@@ -150,27 +151,18 @@ async function onLoad(...params) {
             </q-card>
         </div>
     </div>
-    <q-infinite-scroll
-        v-if="store.data"
-        @load="onLoad"
-        :offset="offset"
-        class="column items-center"
-    >
-        <div v-if="store" class="card-list q-gutter-y-md">
-            <slot name="body" :rows="store.data"></slot>
-            <div v-if="isLoading" class="info-row q-pa-md text-center">
-                <q-spinner color="orange" size="md" />
-            </div>
+    <q-infinite-scroll v-if="store.data" @load="onLoad" :offset="offset">
+        <slot name="body" :rows="store.data"></slot>
+        <div v-if="isLoading" class="info-row q-pa-md text-center">
+            <q-spinner color="orange" size="md" />
         </div>
     </q-infinite-scroll>
 </template>
 
 <style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-
+// .q-infinite-scroll {
+//     width: 100%;
+// }
 .info-row {
     width: 100%;
 
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 10e80c727..53eccc5b5 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -50,7 +50,7 @@ export function useArrayData(key, userOptions) {
         Object.assign(store.filter, filter);
 
         const params = {
-            filter: JSON.stringify(filter),
+            filter: JSON.stringify(store.filter),
         };
 
         Object.assign(params, store.userParams);
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index d9df1342f..b8b44b644 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -242,6 +242,7 @@ export default {
             basicData: 'Basic Data',
             rma: 'RMA',
             photos: 'Photos',
+            log: 'Audit logs',
         },
         list: {
             customer: 'Customer',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index bdbee15a2..ef75ab73b 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -241,6 +241,7 @@ export default {
             basicData: 'Datos básicos',
             rma: 'RMA',
             photos: 'Fotos',
+            log: 'Registros de auditoría',
         },
         list: {
             customer: 'Cliente',
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index a8d149d0a..a28f6e1d7 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -2,26 +2,13 @@
 import { useQuasar } from 'quasar';
 import Navbar from 'src/components/NavBar.vue';
 
-import { useStateStore } from 'stores/useStateStore';
-
 const quasar = useQuasar();
-const stateStore = useStateStore();
 </script>
 
 <template>
     <q-layout view="hHh LpR fFf">
         <Navbar />
         <router-view></router-view>
-        <q-drawer
-            v-model="stateStore.rightDrawer"
-            side="right"
-            :width="256"
-            :persistent="false"
-        >
-            <q-scroll-area class="fit text-grey-8">
-                <div id="rightPanel"></div>
-            </q-scroll-area>
-        </q-drawer>
         <q-footer v-if="quasar.platform.is.mobile"></q-footer>
     </q-layout>
 </template>
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index 284fbdfca..f8ba29819 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -81,22 +81,47 @@ const statesFilter = {
     />
     <fetch-data url="ClaimStates" @on-fetch="setClaimStates" auto-load />
 
-    <div class="container">
+    <div class="column items-center">
         <q-card>
-            <form-model :url="`Claims/${route.params.id}`" :filter="claimFilter" model="claim">
+            <form-model
+                :url="`Claims/${route.params.id}`"
+                :filter="claimFilter"
+                model="claim"
+            >
                 <template #form="{ data, validate, filter }">
                     <div class="row q-gutter-md q-mb-md">
                         <div class="col">
-                            <q-input v-model="data.client.name" :label="t('claim.basicData.customer')" disable />
+                            <q-input
+                                v-model="data.client.name"
+                                :label="t('claim.basicData.customer')"
+                                disable
+                            />
                         </div>
                         <div class="col">
-                            <q-input v-model="data.created" mask="####-##-##" fill-mask="_" autofocus>
+                            <q-input
+                                v-model="data.created"
+                                mask="####-##-##"
+                                fill-mask="_"
+                                autofocus
+                            >
                                 <template #append>
                                     <q-icon name="event" class="cursor-pointer">
-                                        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-                                            <q-date v-model="data.created" mask="YYYY-MM-DD">
+                                        <q-popup-proxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <q-date
+                                                v-model="data.created"
+                                                mask="YYYY-MM-DD"
+                                            >
                                                 <div class="row items-center justify-end">
-                                                    <q-btn v-close-popup label="Close" color="primary" flat />
+                                                    <q-btn
+                                                        v-close-popup
+                                                        label="Close"
+                                                        color="primary"
+                                                        flat
+                                                    />
                                                 </div>
                                             </q-date>
                                         </q-popup-proxy>
@@ -116,7 +141,9 @@ const statesFilter = {
                                 :label="t('claim.basicData.assignedTo')"
                                 map-options
                                 use-input
-                                @filter="(value, update) => filter(value, update, workerFilter)"
+                                @filter="
+                                    (value, update) => filter(value, update, workerFilter)
+                                "
                                 :rules="validate('claim.claimStateFk')"
                                 :input-debounce="0"
                             >
@@ -141,7 +168,9 @@ const statesFilter = {
                                 :label="t('claim.basicData.state')"
                                 map-options
                                 use-input
-                                @filter="(value, update) => filter(value, update, statesFilter)"
+                                @filter="
+                                    (value, update) => filter(value, update, statesFilter)
+                                "
                                 :rules="validate('claim.claimStateFk')"
                                 :input-debounce="0"
                             >
@@ -166,7 +195,10 @@ const statesFilter = {
                     </div>
                     <div class="row q-gutter-md q-mb-md">
                         <div class="col">
-                            <q-checkbox v-model="data.hasToPickUp" :label="t('claim.basicData.picked')" />
+                            <q-checkbox
+                                v-model="data.hasToPickUp"
+                                :label="t('claim.basicData.picked')"
+                            />
                         </div>
                     </div>
                 </template>
@@ -176,12 +208,8 @@ const statesFilter = {
 </template>
 
 <style lang="scss" scoped>
-.container {
-    display: flex;
-    justify-content: center;
-}
-
 .q-card {
-    width: 800px;
+    width: 100%;
+    max-width: 60em;
 }
 </style>
diff --git a/src/pages/Claim/Card/ClaimLog.vue b/src/pages/Claim/Card/ClaimLog.vue
index d71b565e9..d9fe3eb60 100644
--- a/src/pages/Claim/Card/ClaimLog.vue
+++ b/src/pages/Claim/Card/ClaimLog.vue
@@ -1,120 +1,190 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
 import { useSession } from 'src/composables/useSession';
-import FetchData from 'components/FetchData.vue';
+import { useStateStore } from 'stores/useStateStore';
+import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import Paginate from 'src/components/PaginateData.vue';
+import ClaimLogFilter from './ClaimLogFilter.vue';
 
 import { toDate } from 'src/filters';
 
-// const quasar = useQuasar();
+const stateStore = useStateStore();
 const route = useRoute();
 const session = useSession();
 const token = session.getToken();
 const { t } = useI18n();
 
-const filter = {
-    include: [
-        {
-            relation: 'user',
-            scope: {
-                fields: ['name'],
-                include: { relation: 'worker', scope: { fields: ['id'] } },
-            },
-        },
-    ],
-    where: {
-        originFk: route.params.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 logs = ref();
-function onFetch(data) {
-    //rows.value = data;
-    logs.value = [];
-    for (const row of data) {
-        const changes = [];
-        const oldInstance = row.oldInstance;
-        const newInstance = row.newInstance;
-        for (const property in oldInstance) {
-            let oldValue = oldInstance[property];
-            let newValue = newInstance[property];
-
-            // if (isNaN(oldValue) && !isNaN(Date.parse(oldValue))) {
-            //     oldValue = toDate(oldValue);
-            // }
-
-            // if (isNaN(newValue) && !isNaN(Date.parse(newValue))) {
-            //     newValue = toDate(newValue);
-            // }
-
-            const change = {
-                property: property,
-                value: `${oldValue} -> ${newValue}`,
-            };
-
-            changes.push(change);
-        }
-
-        logs.value.push({
-            model: row.changedModel,
-            created: row.creationDate,
-            userFk: row.userFk,
-            changes: changes,
-        });
+function formatValue(value) {
+    if (typeof value === 'boolean') {
+        return value ? t('Yes') : t('No');
     }
+
+    if (isNaN(value) && !isNaN(Date.parse(value))) {
+        return toDate(value);
+    }
+
+    if (value === undefined) {
+        return t('Nothing');
+    }
+
+    return `"${value}"`;
+}
+
+function actionColor(action) {
+    if (action === 'insert') return 'positive';
+    if (action === 'update') return 'positive';
+    if (action === 'delete') return 'negative';
 }
 </script>
 <template>
-    <fetch-data url="ClaimLogs" :filter="filter" @on-fetch="onFetch" auto-load />
-
-    <div class="q-px-lg">
-        <q-timeline>
-            <q-timeline-entry heading> Logs </q-timeline-entry>
-            <template v-for="log of logs" :key="log.id">
-                <q-timeline-entry
-                    :title="t(`models.${log.model}`)"
-                    :subtitle="toDate(log.created)"
-                    :avatar="`/api/Images/user/160x160/${log.userFk}/download?access_token=${token}`"
-                >
-                    <q-list
-                        v-for="change of log.changes"
-                        :key="change.property"
-                        dense
-                        style="width: 500px"
-                    >
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
-                                    {{ t(`properties.${change.property}`) }}
-                                </q-item-label>
-                            </q-item-section>
-                            <q-item-section>
-                                <q-item-label>{{ change.value }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
-                    <!-- <div v-for="change of log.changes" :key="change.property">
-                    {{ change.property }}: {{ change.value }}
-                </div> -->
-                </q-timeline-entry>
-            </template>
+    <div class="column items-center">
+        <q-timeline class="q-pa-md">
+            <q-timeline-entry heading tag="h4"> {{ t('Audit logs') }} </q-timeline-entry>
+            <Paginate
+                data-key="ClaimLogs"
+                :url="`Claims/${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">
+                        <q-timeline-entry
+                            :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>
+                                <q-chip :color="actionColor(log.action)">
+                                    {{ t(`actions.${log.action}`) }}
+                                </q-chip>
+                                {{ t(`models.${log.model}`) }}
+                            </template>
+                            <q-table
+                                :rows="log.changes"
+                                :columns="columns"
+                                row-key="property"
+                                hide-pagination
+                                dense
+                                flat
+                            >
+                                <template #header="props">
+                                    <q-tr :props="props">
+                                        <q-th
+                                            v-for="col in props.cols"
+                                            :key="col.name"
+                                            :props="props"
+                                        >
+                                            {{ t(col.label) }}
+                                        </q-th>
+                                    </q-tr>
+                                </template>
+                            </q-table>
+                        </q-timeline-entry>
+                    </template>
+                </template>
+            </Paginate>
         </q-timeline>
     </div>
+    <TeleportSlot to="#actions-append">
+        <div class="row q-gutter-x-sm">
+            <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
+                <q-tooltip bottom anchor="bottom right">
+                    {{ t('globals.collapseMenu') }}
+                </q-tooltip>
+            </q-btn>
+        </div>
+    </TeleportSlot>
+    <q-drawer v-model="stateStore.rightDrawer" show-if-above side="right" :width="300">
+        <q-scroll-area class="fit text-grey-8">
+            <ClaimLogFilter data-key="ClaimLogs" />
+        </q-scroll-area>
+    </q-drawer>
 </template>
 
+<style lang="scss" scoped>
+.q-timeline {
+    width: 100%;
+    max-width: 80em;
+}
+</style>
 <i18n>
 en: 
+    actions:
+        insert: Creates
+        update: Updates
+        delete: Deletes
     models:
         Claim: Claim
+        ClaimDms: Document
+        ClaimBeginning: Claimed Sales
+        ClaimObservation: Observation
     properties:
         id: ID
+        claimFk: Claim ID
+        saleFk: Sale ID
+        quantity: Quantity
         observation: Observation
+        ticketCreated: Created
+        created: Created
+        isChargedToMana: Charged to mana
+        hasToPickUp: Has to pick Up
+        dmsFk: Document ID
+        text: Description
 es:
+    Audit logs: Registros de auditoría
+    Property: Propiedad
+    Before: Antes
+    After: Después
+    Yes: Si
+    Nothing: Nada
+    actions:
+        insert: Crea
+        update: Actualiza
+        delete: Elimina
     models:
         Claim: Reclamación
+        ClaimDms: Documento
+        ClaimBeginning: Línea reclamada
+        ClaimObservation: Observación
     properties:
         id: ID
+        claimFk: ID reclamación
+        saleFk: ID linea de venta
+        quantity: Cantidad
         observation: Observación
+        ticketCreated: Creado
+        created: Creado
+        isChargedToMana: Cargado a maná
+        hasToPickUp: Se debe recoger
+        dmsFk: ID documento
+        text: Descripción
 </i18n>
diff --git a/src/pages/Claim/Card/ClaimLogFilter.vue b/src/pages/Claim/Card/ClaimLogFilter.vue
new file mode 100644
index 000000000..33cf823d2
--- /dev/null
+++ b/src/pages/Claim/Card/ClaimLogFilter.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const workers = ref();
+</script>
+
+<template>
+    <fetch-data
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="(data) => (workers = data)"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <q-date
+                v-model="params.created"
+                @update:model-value="searchFn()"
+                dense
+                flat
+                minimal
+            >
+            </q-date>
+            <q-list dense>
+                <q-separator />
+                <q-item>
+                    <q-item-section v-if="!workers">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="workers">
+                        <q-select
+                            :label="t('User')"
+                            v-model="params.userFk"
+                            @update:model-value="searchFn()"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </q-item-section>
+                </q-item>
+            </q-list>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: Contains
+        userFk: User
+        created: Created
+es:
+    params:
+        search: Contiene
+        userFk: Usuario
+        created: Creada
+    User: Usuario
+</i18n>
diff --git a/src/pages/Claim/Card/ClaimPhoto.vue b/src/pages/Claim/Card/ClaimPhoto.vue
index 9e89211b2..d47f9798f 100644
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/src/pages/Claim/Card/ClaimPhoto.vue
@@ -239,7 +239,7 @@ function onDrag() {
         </div>
     </div>
 
-    <teleport-slot v-if="!quasar.platform.is.mobile" to="#header-actions">
+    <teleport-slot v-if="!quasar.platform.is.mobile" to="#actions-prepend">
         <div class="row q-gutter-x-sm">
             <label for="fileInput">
                 <q-btn
diff --git a/src/pages/Claim/Card/ClaimRma.vue b/src/pages/Claim/Card/ClaimRma.vue
index bbcd6e12c..7b71dde53 100644
--- a/src/pages/Claim/Card/ClaimRma.vue
+++ b/src/pages/Claim/Card/ClaimRma.vue
@@ -84,58 +84,61 @@ async function remove(id) {
         @on-fetch="onFetch"
         auto-load
     />
-    <paginate data-key="ClaimRma" url="ClaimRmas">
-        <template #body="{ rows }">
-            <q-card class="card">
-                <template v-for="(row, index) of rows" :key="row.id">
-                    <q-item class="q-pa-none items-start">
-                        <q-item-section class="q-pa-md">
-                            <q-list>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('claim.rma.user') }}
-                                        </q-item-label>
-                                        <q-item-label>
-                                            {{ row.worker.user.name }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('claim.rma.created') }}
-                                        </q-item-label>
-                                        <q-item-label>
-                                            {{
-                                                toDate(row.created, {
-                                                    timeStyle: 'medium',
-                                                })
-                                            }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                            </q-list>
-                        </q-item-section>
-                        <q-card-actions vertical class="justify-between">
-                            <q-btn
-                                flat
-                                round
-                                color="orange"
-                                icon="vn:bin"
-                                @click="confirmRemove(row.id)"
-                            >
-                                <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
-                            </q-btn>
-                        </q-card-actions>
-                    </q-item>
-                    <q-separator v-if="index !== rows.length - 1" />
+    <div class="column items-center">
+        <div class="list">
+            <paginate data-key="ClaimRma" url="ClaimRmas">
+                <template #body="{ rows }">
+                    <q-card class="card">
+                        <template v-for="(row, index) of rows" :key="row.id">
+                            <q-item class="q-pa-none items-start">
+                                <q-item-section class="q-pa-md">
+                                    <q-list>
+                                        <q-item class="q-pa-none">
+                                            <q-item-section>
+                                                <q-item-label caption>
+                                                    {{ t('claim.rma.user') }}
+                                                </q-item-label>
+                                                <q-item-label>
+                                                    {{ row.worker.user.name }}
+                                                </q-item-label>
+                                            </q-item-section>
+                                        </q-item>
+                                        <q-item class="q-pa-none">
+                                            <q-item-section>
+                                                <q-item-label caption>
+                                                    {{ t('claim.rma.created') }}
+                                                </q-item-label>
+                                                <q-item-label>
+                                                    {{
+                                                        toDate(row.created, {
+                                                            timeStyle: 'medium',
+                                                        })
+                                                    }}
+                                                </q-item-label>
+                                            </q-item-section>
+                                        </q-item>
+                                    </q-list>
+                                </q-item-section>
+                                <q-card-actions vertical class="justify-between">
+                                    <q-btn
+                                        flat
+                                        round
+                                        color="orange"
+                                        icon="vn:bin"
+                                        @click="confirmRemove(row.id)"
+                                    >
+                                        <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
+                                    </q-btn>
+                                </q-card-actions>
+                            </q-item>
+                            <q-separator v-if="index !== rows.length - 1" />
+                        </template>
+                    </q-card>
                 </template>
-            </q-card>
-        </template>
-    </paginate>
-
-    <teleport-slot v-if="!quasar.platform.is.mobile" to="#header-actions">
+            </paginate>
+        </div>
+    </div>
+    <teleport-slot v-if="!quasar.platform.is.mobile" to="#actions-prepend">
         <div class="row q-gutter-x-sm">
             <q-btn @click="addRow()" icon="add" color="primary" dense rounded>
                 <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
@@ -152,6 +155,10 @@ async function remove(id) {
 </template>
 
 <style lang="scss" scoped>
+.list {
+    width: 100%;
+    max-width: 60em;
+}
 .q-toolbar {
     background-color: $grey-9;
 }
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 708472108..071fb83c6 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
@@ -17,9 +16,6 @@ const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-onMounted(() => (stateStore.rightDrawer = true));
-onUnmounted(() => (stateStore.rightDrawer = false));
-
 function stateColor(code) {
     if (code === 'pending') return 'green';
     if (code === 'managed') return 'orange';
@@ -48,67 +44,83 @@ function viewSummary(id) {
             :info="t('You can search by claim id or customer name')"
         />
     </teleport-slot>
-    <teleport-slot to="#rightPanel">
-        <ClaimFilter data-key="ClaimList" />
+    <teleport-slot to="#actions-append">
+        <div class="row q-gutter-x-sm">
+            <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
+                <q-tooltip bottom anchor="bottom right">
+                    {{ t('globals.collapseMenu') }}
+                </q-tooltip>
+            </q-btn>
+        </div>
     </teleport-slot>
-    <q-page class="q-pa-md">
-        <paginate data-key="ClaimList" url="Claims/filter" order="id DESC" auto-load>
-            <template #body="{ rows }">
-                <q-card class="card" v-for="row of rows" :key="row.id">
-                    <q-item
-                        class="q-pa-none items-start cursor-pointer q-hoverable"
-                        v-ripple
-                        clickable
-                    >
-                        <q-item-section class="q-pa-md" @click="navigate(row.id)">
-                            <div class="text-h6 link">
-                                {{ row.clientName }}
-                            </div>
-                            <q-item-label caption>#{{ row.id }}</q-item-label>
-                            <q-list>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('claim.list.customer') }}
-                                        </q-item-label>
-                                        <q-item-label>{{ row.clientName }}</q-item-label>
-                                    </q-item-section>
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('claim.list.assignedTo') }}
-                                        </q-item-label>
-                                        <q-item-label>{{ row.workerName }}</q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('claim.list.created') }}
-                                        </q-item-label>
-                                        <q-item-label>
-                                            {{ toDate(row.created) }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('claim.list.state') }}
-                                        </q-item-label>
-                                        <q-item-label>
-                                            <q-badge
-                                                :color="stateColor(row.stateCode)"
-                                                class="q-ma-none"
-                                                dense
-                                            >
-                                                {{ row.stateDescription }}
-                                            </q-badge>
-                                        </q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                            </q-list>
-                        </q-item-section>
-                        <q-separator vertical />
-                        <q-card-actions vertical class="justify-between">
-                            <!-- <q-btn color="grey-7" round flat icon="more_vert">
+    <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <q-scroll-area class="fit text-grey-8">
+            <ClaimFilter data-key="ClaimList" />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page class="column items-center q-pa-md">
+        <div class="card-list">
+            <paginate data-key="ClaimList" url="Claims/filter" order="id DESC" auto-load>
+                <template #body="{ rows }">
+                    <q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <q-item
+                            class="q-pa-none items-start cursor-pointer q-hoverable"
+                            v-ripple
+                            clickable
+                        >
+                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                                <div class="text-h6 link">
+                                    {{ row.clientName }}
+                                </div>
+                                <q-item-label caption>#{{ row.id }}</q-item-label>
+                                <q-list>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('claim.list.customer') }}
+                                            </q-item-label>
+                                            <q-item-label>
+                                                {{ row.clientName }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('claim.list.assignedTo') }}
+                                            </q-item-label>
+                                            <q-item-label>
+                                                {{ row.workerName }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('claim.list.created') }}
+                                            </q-item-label>
+                                            <q-item-label>
+                                                {{ toDate(row.created) }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('claim.list.state') }}
+                                            </q-item-label>
+                                            <q-item-label>
+                                                <q-badge
+                                                    :color="stateColor(row.stateCode)"
+                                                    class="q-ma-none"
+                                                    dense
+                                                >
+                                                    {{ row.stateDescription }}
+                                                </q-badge>
+                                            </q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                </q-list>
+                            </q-item-section>
+                            <q-separator vertical />
+                            <q-card-actions vertical class="justify-between">
+                                <!-- <q-btn color="grey-7" round flat icon="more_vert">
                                 <q-tooltip>{{ t('customer.list.moreOptions') }}</q-tooltip>
                                 <q-menu cover auto-close>
                                     <q-list>
@@ -128,44 +140,52 @@ function viewSummary(id) {
                                 </q-menu>
                             </q-btn> -->
 
-                            <q-btn
-                                flat
-                                round
-                                color="orange"
-                                icon="arrow_circle_right"
-                                @click="navigate(row.id)"
-                            >
-                                <q-tooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </q-tooltip>
-                            </q-btn>
-                            <q-btn
-                                flat
-                                round
-                                color="grey-7"
-                                icon="preview"
-                                @click="viewSummary(row.id)"
-                            >
-                                <q-tooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </q-tooltip>
-                            </q-btn>
-                            <q-btn flat round color="grey-7" icon="vn:client">
-                                <q-tooltip>
-                                    {{ t('components.smartCard.viewDescription') }}
-                                </q-tooltip>
-                                <q-popup-proxy>
-                                    <CustomerDescriptorPopover :id="row.clientFk" />
-                                </q-popup-proxy>
-                            </q-btn>
-                        </q-card-actions>
-                    </q-item>
-                </q-card>
-            </template>
-        </paginate>
+                                <q-btn
+                                    flat
+                                    round
+                                    color="orange"
+                                    icon="arrow_circle_right"
+                                    @click="navigate(row.id)"
+                                >
+                                    <q-tooltip>
+                                        {{ t('components.smartCard.openCard') }}
+                                    </q-tooltip>
+                                </q-btn>
+                                <q-btn
+                                    flat
+                                    round
+                                    color="grey-7"
+                                    icon="preview"
+                                    @click="viewSummary(row.id)"
+                                >
+                                    <q-tooltip>
+                                        {{ t('components.smartCard.openSummary') }}
+                                    </q-tooltip>
+                                </q-btn>
+                                <q-btn flat round color="grey-7" icon="vn:client">
+                                    <q-tooltip>
+                                        {{ t('components.smartCard.viewDescription') }}
+                                    </q-tooltip>
+                                    <q-popup-proxy>
+                                        <CustomerDescriptorPopover :id="row.clientFk" />
+                                    </q-popup-proxy>
+                                </q-btn>
+                            </q-card-actions>
+                        </q-item>
+                    </q-card>
+                </template>
+            </paginate>
+        </div>
     </q-page>
 </template>
 
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
+
 <i18n>
 es:
     Search claim: Buscar reclamación
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index a65f17e83..892817513 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -58,7 +58,7 @@ const filterOptions = {
         @on-fetch="(data) => (businessTypes = data)"
         auto-load
     />
-    <div class="container">
+    <div class="column items-center">
         <q-card>
             <form-model :url="`Clients/${route.params.id}`" model="customer">
                 <template #form="{ data, validate, filter }">
@@ -172,11 +172,6 @@ const filterOptions = {
 </template>
 
 <style lang="scss" scoped>
-.container {
-    display: flex;
-    justify-content: center;
-}
-
 .q-card {
     width: 800px;
 }
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 745731962..429e15e0e 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
@@ -15,9 +14,6 @@ const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-onMounted(() => (stateStore.rightDrawer = true));
-onUnmounted(() => (stateStore.rightDrawer = false));
-
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
@@ -40,44 +36,61 @@ function viewSummary(id) {
             :info="t('You can search by customer id or name')"
         />
     </teleport-slot>
-    <teleport-slot to="#rightPanel">
-        <CustomerFilter data-key="CustomerList" />
+    <teleport-slot to="#actions-append">
+        <div class="row q-gutter-x-sm">
+            <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
+                <q-tooltip bottom anchor="bottom right">
+                    {{ t('globals.collapseMenu') }}
+                </q-tooltip>
+            </q-btn>
+        </div>
     </teleport-slot>
-    <q-page class="q-pa-md">
-        <paginate data-key="CustomerList" url="/Clients/filter" order="id DESC" auto-load>
-            <template #body="{ rows }">
-                <q-card class="card" v-for="row of rows" :key="row.id">
-                    <q-item
-                        class="q-pa-none items-start cursor-pointer q-hoverable"
-                        v-ripple
-                        clickable
-                    >
-                        <q-item-section class="q-pa-md" @click="navigate(row.id)">
-                            <div class="text-h6">{{ row.name }}</div>
-                            <q-item-label caption>#{{ row.id }}</q-item-label>
+    <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <q-scroll-area class="fit text-grey-8">
+            <CustomerFilter data-key="CustomerList" />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page class="column items-center q-pa-md">
+        <div class="card-list">
+            <paginate
+                data-key="CustomerList"
+                url="/Clients/filter"
+                order="id DESC"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <q-item
+                            class="q-pa-none items-start cursor-pointer q-hoverable"
+                            v-ripple
+                            clickable
+                        >
+                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                                <div class="text-h6">{{ row.name }}</div>
+                                <q-item-label caption>#{{ row.id }}</q-item-label>
 
-                            <q-list>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('customer.list.email') }}
-                                        </q-item-label>
-                                        <q-item-label>{{ row.email }}</q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('customer.list.phone') }}
-                                        </q-item-label>
-                                        <q-item-label>{{ row.phone }}</q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                            </q-list>
-                        </q-item-section>
-                        <q-separator vertical />
-                        <q-card-actions vertical class="justify-between">
-                            <!-- <q-btn color="grey-7" round flat icon="more_vert">
+                                <q-list>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('customer.list.email') }}
+                                            </q-item-label>
+                                            <q-item-label>{{ row.email }}</q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('customer.list.phone') }}
+                                            </q-item-label>
+                                            <q-item-label>{{ row.phone }}</q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                </q-list>
+                            </q-item-section>
+                            <q-separator vertical />
+                            <q-card-actions vertical class="justify-between">
+                                <!-- <q-btn color="grey-7" round flat icon="more_vert">
                                 <q-tooltip>{{ t('customer.list.moreOptions') }}</q-tooltip>
                                 <q-menu cover auto-close>
                                     <q-list>
@@ -97,39 +110,47 @@ function viewSummary(id) {
                                 </q-menu>
                             </q-btn> -->
 
-                            <q-btn
-                                flat
-                                round
-                                color="orange"
-                                icon="arrow_circle_right"
-                                @click="navigate(row.id)"
-                            >
-                                <q-tooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </q-tooltip>
-                            </q-btn>
-                            <q-btn
-                                flat
-                                round
-                                color="grey-7"
-                                icon="preview"
-                                @click="viewSummary(row.id)"
-                            >
-                                <q-tooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </q-tooltip>
-                            </q-btn>
-                            <!-- <q-btn flat round color="grey-7" icon="vn:ticket">
+                                <q-btn
+                                    flat
+                                    round
+                                    color="orange"
+                                    icon="arrow_circle_right"
+                                    @click="navigate(row.id)"
+                                >
+                                    <q-tooltip>
+                                        {{ t('components.smartCard.openCard') }}
+                                    </q-tooltip>
+                                </q-btn>
+                                <q-btn
+                                    flat
+                                    round
+                                    color="grey-7"
+                                    icon="preview"
+                                    @click="viewSummary(row.id)"
+                                >
+                                    <q-tooltip>
+                                        {{ t('components.smartCard.openSummary') }}
+                                    </q-tooltip>
+                                </q-btn>
+                                <!-- <q-btn flat round color="grey-7" icon="vn:ticket">
                                 <q-tooltip>{{ t('customer.list.customerOrders') }}</q-tooltip>
                             </q-btn> -->
-                        </q-card-actions>
-                    </q-item>
-                </q-card>
-            </template>
-        </paginate>
+                            </q-card-actions>
+                        </q-item>
+                    </q-card>
+                </template>
+            </paginate>
+        </div>
     </q-page>
 </template>
 
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
+
 <i18n>
 es:
     Search customer: Buscar cliente
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index e1f7334c7..46228e5de 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -41,113 +41,135 @@ function viewSummary(id) {
             :info="t('You can search by invoice reference')"
         />
     </teleport-slot>
-    <teleport-slot to="#rightPanel">
-        <InvoiceOutFilter data-key="InvoiceOutList" />
+    <teleport-slot to="#actions-append">
+        <div class="row q-gutter-x-sm">
+            <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
+                <q-tooltip bottom anchor="bottom right">
+                    {{ t('globals.collapseMenu') }}
+                </q-tooltip>
+            </q-btn>
+        </div>
     </teleport-slot>
-    <q-page class="q-pa-md">
-        <paginate
-            data-key="InvoiceOutList"
-            url="InvoiceOuts/filter"
-            order="issued DESC, id DESC"
-            auto-load
-        >
-            <template #body="{ rows }">
-                <q-card class="card" v-for="row of rows" :key="row.id">
-                    <q-item
-                        class="q-pa-none items-start cursor-pointer q-hoverable"
-                        v-ripple
-                        clickable
-                    >
-                        <q-item-section class="q-pa-md" @click="navigate(row.id)">
-                            <div class="text-h6">{{ row.ref }}</div>
-                            <q-item-label caption>#{{ row.id }}</q-item-label>
-                            <q-list>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('invoiceOut.list.issued') }}
-                                        </q-item-label>
-                                        <q-item-label>
-                                            {{ toDate(row.issued) }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('invoiceOut.list.amount') }}
-                                        </q-item-label>
-                                        <q-item-label>
-                                            {{ toCurrency(row.amount) }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('invoiceOut.list.client') }}
-                                        </q-item-label>
-                                        <q-item-label>
-                                            {{ row.clientSocialName }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('invoiceOut.list.created') }}
-                                        </q-item-label>
-                                        <q-item-label>
-                                            {{ toDate(row.created) }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('invoiceOut.list.company') }}
-                                        </q-item-label>
-                                        <q-item-label>{{ row.companyCode }}</q-item-label>
-                                    </q-item-section>
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('invoiceOut.list.dued') }}
-                                        </q-item-label>
-                                        <q-item-label>
-                                            {{ toDate(row.dued) }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                            </q-list>
-                        </q-item-section>
-                        <q-separator vertical />
-                        <q-card-actions vertical class="justify-between">
-                            <q-btn
-                                flat
-                                round
-                                color="orange"
-                                icon="arrow_circle_right"
-                                @click="navigate(row.id)"
-                            >
-                                <q-tooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </q-tooltip>
-                            </q-btn>
-                            <q-btn
-                                flat
-                                round
-                                color="grey-7"
-                                icon="preview"
-                                @click="viewSummary(row.id)"
-                            >
-                                <q-tooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </q-tooltip>
-                            </q-btn>
-                        </q-card-actions>
-                    </q-item>
-                </q-card>
-            </template>
-        </paginate>
+    <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <q-scroll-area class="fit text-grey-8">
+            <InvoiceOutFilter data-key="InvoiceOutList" />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page class="column items-center q-pa-md">
+        <div class="card-list">
+            <paginate
+                data-key="InvoiceOutList"
+                url="InvoiceOuts/filter"
+                order="issued DESC, id DESC"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <q-item
+                            class="q-pa-none items-start cursor-pointer q-hoverable"
+                            v-ripple
+                            clickable
+                        >
+                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                                <div class="text-h6">{{ row.ref }}</div>
+                                <q-item-label caption>#{{ row.id }}</q-item-label>
+                                <q-list>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('invoiceOut.list.issued') }}
+                                            </q-item-label>
+                                            <q-item-label>
+                                                {{ toDate(row.issued) }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('invoiceOut.list.amount') }}
+                                            </q-item-label>
+                                            <q-item-label>
+                                                {{ toCurrency(row.amount) }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('invoiceOut.list.client') }}
+                                            </q-item-label>
+                                            <q-item-label>
+                                                {{ row.clientSocialName }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('invoiceOut.list.created') }}
+                                            </q-item-label>
+                                            <q-item-label>
+                                                {{ toDate(row.created) }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('invoiceOut.list.company') }}
+                                            </q-item-label>
+                                            <q-item-label>{{
+                                                row.companyCode
+                                            }}</q-item-label>
+                                        </q-item-section>
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('invoiceOut.list.dued') }}
+                                            </q-item-label>
+                                            <q-item-label>
+                                                {{ toDate(row.dued) }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                </q-list>
+                            </q-item-section>
+                            <q-separator vertical />
+                            <q-card-actions vertical class="justify-between">
+                                <q-btn
+                                    flat
+                                    round
+                                    color="orange"
+                                    icon="arrow_circle_right"
+                                    @click="navigate(row.id)"
+                                >
+                                    <q-tooltip>
+                                        {{ t('components.smartCard.openCard') }}
+                                    </q-tooltip>
+                                </q-btn>
+                                <q-btn
+                                    flat
+                                    round
+                                    color="grey-7"
+                                    icon="preview"
+                                    @click="viewSummary(row.id)"
+                                >
+                                    <q-tooltip>
+                                        {{ t('components.smartCard.openSummary') }}
+                                    </q-tooltip>
+                                </q-btn>
+                            </q-card-actions>
+                        </q-item>
+                    </q-card>
+                </template>
+            </paginate>
+        </div>
     </q-page>
 </template>
 
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
+
 <i18n>
 es:
     Search invoice: Buscar factura emitida
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 0f9cfdd4f..a0fe69b3b 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -78,120 +78,142 @@ function viewSummary(id) {
             :info="t('You can search by ticket id or alias')"
         />
     </teleport-slot>
-    <teleport-slot to="#rightPanel">
-        <TicketFilter data-key="TicketList" />
+    <teleport-slot to="#actions-append">
+        <div class="row q-gutter-x-sm">
+            <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
+                <q-tooltip bottom anchor="bottom right">
+                    {{ t('globals.collapseMenu') }}
+                </q-tooltip>
+            </q-btn>
+        </div>
     </teleport-slot>
-    <q-page class="q-pa-md">
-        <paginate
-            data-key="TicketList"
-            url="Tickets/filter"
-            :filter="filter"
-            order="id DESC"
-            auto-load
-        >
-            <template #body="{ rows }">
-                <q-card class="card" v-for="row of rows" :key="row.id">
-                    <q-item
-                        class="q-pa-none items-start cursor-pointer q-hoverable"
-                        v-ripple
-                        clickable
-                    >
-                        <q-item-section class="q-pa-md" @click="navigate(row.id)">
-                            <div class="text-h6">{{ row.name }}</div>
-                            <q-item-label caption>#{{ row.id }}</q-item-label>
-                            <q-list>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('ticket.list.nickname') }}
-                                        </q-item-label>
-                                        <q-item-label>{{ row.nickname }}</q-item-label>
-                                    </q-item-section>
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('ticket.list.state') }}
-                                        </q-item-label>
-                                        <q-item-label>
-                                            <q-badge
-                                                :color="stateColor(row)"
-                                                class="q-ma-none"
-                                                dense
-                                            >
-                                                {{ row.state }}
-                                            </q-badge>
-                                        </q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('ticket.list.shipped') }}
-                                        </q-item-label>
-                                        <q-item-label>
-                                            {{ toDate(row.shipped) }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('Zone') }}
-                                        </q-item-label>
-                                        <q-item-label>
-                                            {{ row.zoneName }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('ticket.list.salesPerson') }}
-                                        </q-item-label>
-                                        <q-item-label>
-                                            {{ row.salesPerson }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('ticket.list.total') }}
-                                        </q-item-label>
-                                        <q-item-label>
-                                            {{ toCurrency(row.totalWithVat) }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                            </q-list>
-                        </q-item-section>
-                        <q-separator vertical />
-                        <q-card-actions vertical class="justify-between">
-                            <q-btn
-                                flat
-                                round
-                                color="orange"
-                                icon="arrow_circle_right"
-                                @click="navigate(row.id)"
-                            >
-                                <q-tooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </q-tooltip>
-                            </q-btn>
-                            <q-btn
-                                flat
-                                round
-                                color="grey-7"
-                                icon="preview"
-                                @click="viewSummary(row.id)"
-                            >
-                                <q-tooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </q-tooltip>
-                            </q-btn>
-                        </q-card-actions>
-                    </q-item>
-                </q-card>
-            </template>
-        </paginate>
+    <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <q-scroll-area class="fit text-grey-8">
+            <TicketFilter data-key="TicketList" />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page class="column items-center q-pa-md">
+        <div class="card-list">
+            <paginate
+                data-key="TicketList"
+                url="Tickets/filter"
+                :filter="filter"
+                order="id DESC"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <q-item
+                            class="q-pa-none items-start cursor-pointer q-hoverable"
+                            v-ripple
+                            clickable
+                        >
+                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                                <div class="text-h6">{{ row.name }}</div>
+                                <q-item-label caption>#{{ row.id }}</q-item-label>
+                                <q-list>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('ticket.list.nickname') }}
+                                            </q-item-label>
+                                            <q-item-label>{{
+                                                row.nickname
+                                            }}</q-item-label>
+                                        </q-item-section>
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('ticket.list.state') }}
+                                            </q-item-label>
+                                            <q-item-label>
+                                                <q-badge
+                                                    :color="stateColor(row)"
+                                                    class="q-ma-none"
+                                                    dense
+                                                >
+                                                    {{ row.state }}
+                                                </q-badge>
+                                            </q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('ticket.list.shipped') }}
+                                            </q-item-label>
+                                            <q-item-label>
+                                                {{ toDate(row.shipped) }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('Zone') }}
+                                            </q-item-label>
+                                            <q-item-label>
+                                                {{ row.zoneName }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('ticket.list.salesPerson') }}
+                                            </q-item-label>
+                                            <q-item-label>
+                                                {{ row.salesPerson }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('ticket.list.total') }}
+                                            </q-item-label>
+                                            <q-item-label>
+                                                {{ toCurrency(row.totalWithVat) }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                </q-list>
+                            </q-item-section>
+                            <q-separator vertical />
+                            <q-card-actions vertical class="justify-between">
+                                <q-btn
+                                    flat
+                                    round
+                                    color="orange"
+                                    icon="arrow_circle_right"
+                                    @click="navigate(row.id)"
+                                >
+                                    <q-tooltip>
+                                        {{ t('components.smartCard.openCard') }}
+                                    </q-tooltip>
+                                </q-btn>
+                                <q-btn
+                                    flat
+                                    round
+                                    color="grey-7"
+                                    icon="preview"
+                                    @click="viewSummary(row.id)"
+                                >
+                                    <q-tooltip>
+                                        {{ t('components.smartCard.openSummary') }}
+                                    </q-tooltip>
+                                </q-btn>
+                            </q-card-actions>
+                        </q-item>
+                    </q-card>
+                </template>
+            </paginate>
+        </div>
     </q-page>
 </template>
 
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
+
 <i18n>
 es:
     Search ticket: Buscar ticket