Merge branch 'dev' into 6948-bank

src/components/common/VnLog.vue

@@ -1046,7 +1046,7 @@ es:
     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
+    Audit logs: Historial
     Property: Propiedad
     Before: Antes
     After: Después

src/components/ui/CardSummary.vue

@@ -46,7 +46,7 @@ watch(props, async () => {
         <QCard class="cardSummary">
             <SkeletonSummary v-if="!entity" />
             <template v-if="entity">
-                <div class="summaryHeader bg-primary q-pa-md text-weight-bolder">
+                <div class="summaryHeader bg-primary q-pa-sm text-weight-bolder">
                     <slot name="header-left">
                         <span></span>
                     </slot>
@@ -85,8 +85,8 @@ watch(props, async () => {
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: space-evenly;
-        gap: 15px;
-        padding: 15px;
+        gap: 10px;
+        padding: 10px;
         background-color: var(--vn-gray);
 
         > .q-card.vn-one {
@@ -105,14 +105,14 @@ watch(props, async () => {
         > .q-card {
             width: 100%;
             background-color: var(--vn-gray);
-            padding: 15px;
+            padding: 7px;
             font-size: 16px;
             min-width: 275px;
 
             .vn-label-value {
                 display: flex;
                 flex-direction: row;
-                margin-top: 5px;
+                margin-top: 2px;
                 .label {
                     color: var(--vn-label);
                     width: 8em;
@@ -131,7 +131,7 @@ watch(props, async () => {
             .header {
                 color: $primary;
                 font-weight: bold;
-                margin-bottom: 25px;
+                margin-bottom: 10px;
                 font-size: 20px;
                 display: inline-block;
             }

src/components/ui/VnNotes.vue

@@ -8,7 +8,6 @@ import VnPaginate from './VnPaginate.vue';
 import VnUserLink from '../ui/VnUserLink.vue';
 
 const $props = defineProps({
-    id: { type: String, required: true },
     url: { type: String, default: null },
     filter: { type: Object, default: () => {} },
     body: { type: Object, default: () => {} },
@@ -28,7 +27,7 @@ async function insert() {
 }
 </script>
 <template>
-    <div class="column items-center full-height">
+    <div class="column items-center full-height full-width">
         <VnPaginate
             :data-key="$props.url"
             :url="$props.url"
@@ -39,12 +38,21 @@ async function insert() {
             ref="vnPaginateRef"
         >
             <template #body="{ rows }">
-                <QCard class="q-pa-xs q-mb-md" v-for="(note, index) in rows" :key="index">
+                <div class="column items-center full-width">
+                    <QCard
+                        class="q-pa-xs q-mb-sm full-width"
+                        v-for="(note, index) in rows"
+                        :key="index"
+                    >
                         <QCardSection horizontal>
                             <slot name="picture">
-                            <VnAvatar :descriptor="false" :worker-id="note.workerFk" />
+                                <VnAvatar
+                                    :descriptor="false"
+                                    :worker-id="note.workerFk"
+                                    size="md"
+                                />
                             </slot>
-                        <QItem class="full-width justify-between items-start">
+                            <div class="full-width row justify-between q-pa-xs">
                                 <VnUserLink
                                     :name="`${note.worker.user.nickname}`"
                                     :worker-id="note.worker.id"
@@ -53,14 +61,15 @@ async function insert() {
                                 <slot name="actions">
                                     {{ toDateHour(note.created) }}
                                 </slot>
-                        </QItem>
+                            </div>
                         </QCardSection>
-                    <QCardSection class="q-pa-sm">
+                        <QCardSection class="q-pa-xs q-my-none q-py-none">
                             <slot name="text">
                                 {{ note.text }}
                             </slot>
                         </QCardSection>
                     </QCard>
+                </div>
             </template>
         </VnPaginate>
         <QPageSticky position="bottom-right" :offset="[25, 25]" v-if="addNote">
@@ -108,8 +117,10 @@ async function insert() {
 </template>
 <style lang="scss" scoped>
 .q-card {
-    max-width: 80em;
-
+    width: 90%;
+    @media (max-width: $breakpoint-sm) {
+        width: 100%;
+    }
     &__section {
         word-wrap: break-word;
     }

src/components/ui/VnPaginate.vue

@@ -138,7 +138,7 @@ async function onLoad(...params) {
 </script>
 
 <template>
-    <div>
+    <div class="full-width">
         <div
             v-if="!props.autoLoad && !store.data && !isLoading"
             class="info-row q-pa-md text-center"
@@ -175,6 +175,7 @@ async function onLoad(...params) {
         @load="onLoad"
         :offset="offset"
         class="full-width full-height"
+        v-bind="$attrs"
     >
         <slot name="body" :rows="store.data"></slot>
         <div v-if="isLoading" class="info-row q-pa-md text-center">

src/composables/useCardSize.js

@@ -0,0 +1,7 @@
+import { useQuasar } from 'quasar';
+
+export default function() {
+    const quasar = useQuasar();
+   return quasar.screen.gt.xs ? 'q-pa-md': 'q-pa-xs';
+
+}

src/css/app.scss

@@ -49,6 +49,7 @@ a {
     .q-icon {
         float: right;
     }
+    text-transform: uppercase;
 }
 
 .link:hover {

src/i18n/en/index.js

@@ -82,6 +82,7 @@ export default {
         file: 'File',
         selectFile: 'Select a file',
         copyClipboard: 'Copy on clipboard',
+        salesPerson: 'SalesPerson',
     },
     errors: {
         statusUnauthorized: 'Access denied',
@@ -529,6 +530,8 @@ export default {
             ticketId: 'Ticket ID',
             customerSummary: 'Customer summary',
             claimedTicket: 'Claimed ticket',
+            saleTracking: 'Sale tracking',
+            ticketTracking: 'Ticket tracking',
             commercial: 'Commercial',
             province: 'Province',
             zone: 'Zone',

src/i18n/es/index.js

@@ -82,6 +82,7 @@ export default {
         file: 'Fichero',
         selectFile: 'Seleccione un fichero',
         copyClipboard: 'Copiar en portapapeles',
+        salesPerson: 'Comercial',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
@@ -502,7 +503,7 @@ export default {
             rma: 'RMA',
             development: 'Trazabilidad',
             photos: 'Fotos',
-            log: 'Registros de auditoría',
+            log: 'Historial',
             notes: 'Notas',
             action: 'Acción',
         },
@@ -528,6 +529,8 @@ export default {
             ticketId: 'ID ticket',
             customerSummary: 'Resumen del cliente',
             claimedTicket: 'Ticket reclamado',
+            saleTracking: 'Líneas preparadas',
+            ticketTracking: 'Estados del ticket',
             commercial: 'Comercial',
             province: 'Provincia',
             zone: 'Zona',
@@ -725,7 +728,7 @@ export default {
             create: 'Crear',
             summary: 'Resumen',
             basicData: 'Datos básicos',
-            log: 'Registros de auditoría',
+            log: 'Historial',
         },
         list: {
             parking: 'Parking',
@@ -757,7 +760,7 @@ export default {
             dueDay: 'Vencimiento',
             intrastat: 'Intrastat',
             corrective: 'Rectificativa',
-            log: 'Registros de auditoría',
+            log: 'Historial',
         },
         list: {
             ref: 'Referencia',

src/pages/Claim/Card/ClaimCard.vue

@@ -5,6 +5,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import ClaimDescriptor from './ClaimDescriptor.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -28,7 +29,9 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -176,6 +176,7 @@ onMounted(async () => {
                     color="primary"
                     :href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
                 >
+                    <QTooltip>{{ t('claim.card.saleTracking') }}</QTooltip>
                 </QBtn>
                 <QBtn
                     size="md"
@@ -183,6 +184,7 @@ onMounted(async () => {
                     color="primary"
                     :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
                 >
+                    <QTooltip>{{ t('claim.card.ticketTracking') }}</QTooltip>
                 </QBtn>
             </QCardActions>
         </template>

src/pages/Claim/Card/ClaimNotes.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useState } from 'src/composables/useState';
 import VnNotes from 'src/components/ui/VnNotes.vue';
@@ -6,14 +7,15 @@ import VnNotes from 'src/components/ui/VnNotes.vue';
 const route = useRoute();
 const state = useState();
 const user = state.getUser();
-const id = route.params.id;
 
 const $props = defineProps({
+    id: { type: Number, default: null },
     addNote: { type: Boolean, default: true },
 });
+const claimId = computed(() => $props.id || route.params.id);
 
 const claimFilter = {
-    where: { claimFk: id },
+    where: { claimFk: claimId.value },
     fields: ['created', 'workerFk', 'text'],
     include: {
         relation: 'worker',
@@ -30,19 +32,16 @@ const claimFilter = {
 };
 
 const body = {
-    claimFk: id,
+    claimFk: claimId.value,
     workerFk: user.value.id,
 };
 </script>
 <template>
-    <div class="column items-center">
     <VnNotes
-            style="overflow-y: scroll"
+        style="overflow-y: auto"
         :add-note="$props.addNote"
-            :id="id"
         url="claimObservations"
         :filter="claimFilter"
         :body="body"
     />
-    </div>
 </template>

src/pages/Claim/Card/ClaimSummary.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, watch } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toCurrency } from 'src/filters';
@@ -70,7 +70,7 @@ const detailsColumns = ref([
     },
     {
         name: 'description',
-        label: 'claim.summary.description',
+        label: 'globals.description',
         field: (row) => row.sale.concept,
     },
     {
@@ -194,19 +194,19 @@ function openDialog(dmsId) {
                         </QChip>
                     </template>
                 </VnLv>
-                <VnLv :label="t('claim.summary.assignedTo')">
+                <VnLv :label="t('globals.salesPerson')">
                     <template #value>
                         <VnUserLink
-                            :name="claim.worker?.user?.nickname"
-                            :worker-id="claim.workerFk"
+                            :name="claim.client?.salesPersonUser?.name"
+                            :worker-id="claim.client?.salesPersonFk"
                         />
                     </template>
                 </VnLv>
                 <VnLv :label="t('claim.summary.attendedBy')">
                     <template #value>
                         <VnUserLink
-                            :name="claim.client?.salesPersonUser?.name"
-                            :worker-id="claim.client?.salesPersonFk"
+                            :name="claim.worker?.user?.nickname"
+                            :worker-id="claim.workerFk"
                         />
                     </template>
                 </VnLv>
@@ -218,26 +218,37 @@ function openDialog(dmsId) {
                         />
                     </template>
                 </VnLv>
-                <VnLv :label="t('claim.summary.returnOfMaterial')" :value="claim.rma" />
                 <QCheckbox
                     :label="t('claim.basicData.picked')"
                     v-model="claim.hasToPickUp"
                     :disable="true"
                 />
             </QCard>
-            <QCard class="vn-three claimVnNotes full-height">
+            <QCard class="vn-three">
                 <a class="header header-link" :href="`#/claim/${entityId}/notes`">
                     {{ t('claim.summary.notes') }}
                     <QIcon name="open_in_new" />
                 </a>
-                <ClaimNotes :add-note="false" style="height: 350px" order="created ASC" />
+                <ClaimNotes
+                    :id="entityId"
+                    :add-note="false"
+                    style="max-height: 300px"
+                    order="created ASC"
+                />
             </QCard>
             <QCard class="vn-two" v-if="salesClaimed.length > 0">
                 <a class="header header-link" :href="`#/claim/${entityId}/lines`">
                     {{ t('claim.summary.details') }}
                     <QIcon name="open_in_new" />
                 </a>
-                <QTable :columns="detailsColumns" :rows="salesClaimed" flat>
+                <QTable
+                    :columns="detailsColumns"
+                    :rows="salesClaimed"
+                    flat
+                    dense
+                    :rows-per-page-options="[0]"
+                    hide-bottom
+                >
                     <template #header="props">
                         <QTr :props="props">
                             <QTh v-for="col in props.cols" :key="col.name" :props="props">
@@ -272,7 +283,15 @@ function openDialog(dmsId) {
                     {{ t('claim.summary.development') }}
                     <QIcon name="open_in_new" />
                 </a>
-                <QTable :columns="developmentColumns" :rows="developments" flat>
+
+                <QTable
+                    :columns="developmentColumns"
+                    :rows="developments"
+                    flat
+                    dense
+                    :rows-per-page-options="[0]"
+                    hide-bottom
+                >
                     <template #header="props">
                         <QTr :props="props">
                             <QTh v-for="col in props.cols" :key="col.name" :props="props">
@@ -390,13 +409,7 @@ function openDialog(dmsId) {
         </template>
     </CardSummary>
 </template>
-<style lang="scss">
-.claimVnNotes {
-    .q-card {
-        max-width: 100%;
-    }
-}
-</style>
+
 <style lang="scss" scoped>
 .q-dialog__inner--minimized > div {
     max-width: 80%;
@@ -406,7 +419,6 @@ function openDialog(dmsId) {
     flex-direction: row;
     flex-wrap: wrap;
     gap: 15px;
-    flex-basis: 30%;
 }
 .multimedia-container {
     flex: 1 0 21%;

src/pages/Claim/ClaimList.vue

@@ -115,12 +115,6 @@ function navigate(event, id) {
                             </VnLv>
                         </template>
                         <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id)"
-                                class="bg-vn-dark"
-                                outline
-                            />
                             <QBtn
                                 :label="t('globals.description')"
                                 @click.stop

src/pages/Customer/Card/CustomerCard.vue

@@ -6,6 +6,7 @@ import CustomerDescriptor from './CustomerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const route = useRoute();
@@ -30,7 +31,9 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Entry/Card/EntryCard.vue

@@ -7,6 +7,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import EntryDescriptor from './EntryDescriptor.vue';
 
 import { useStateStore } from 'stores/useStateStore';
+import useCardSize from 'src/composables/useCardSize';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -33,7 +34,9 @@ const stateStore = useStateStore();
         <QPage>
             <VnSubToolbar />
 
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -8,6 +8,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { onMounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -74,7 +75,9 @@ watch(
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/InvoiceOut/Card/InvoiceOutCard.vue

@@ -5,6 +5,7 @@ import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -28,7 +29,9 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Item/Card/ItemCard.vue

@@ -4,6 +4,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import ItemDescriptor from './ItemDescriptor.vue';
 
 import { useStateStore } from 'stores/useStateStore';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 </script>
@@ -19,7 +20,9 @@ const stateStore = useStateStore();
         <QPage>
             <VnSubToolbar />
 
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Supplier/Card/SupplierCard.vue

@@ -5,6 +5,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import SupplierDescriptor from './SupplierDescriptor.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -30,7 +31,9 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Ticket/Card/TicketCard.vue

@@ -5,6 +5,7 @@ import TicketDescriptor from './TicketDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -29,7 +30,9 @@ const { t } = useI18n();
         <QPage>
             <VnSubToolbar />
 
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Ticket/Card/TicketSummary.vue

@@ -147,7 +147,7 @@ async function changeState(value) {
                 </div>
             </QCard>
             <QCard class="vn-one">
-                <a class="header link" :href="ticketUrl + 'basic-data/step-one'">
+                <a class="header header-link" :href="ticketUrl + 'basic-data/step-one'">
                     {{ t('globals.summary.basicData') }}
                     <QIcon name="open_in_new" />
                 </a>
@@ -193,7 +193,7 @@ async function changeState(value) {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a class="header link" :href="ticketUrl + 'basic-data/step-one'">
+                <a class="header header-link" :href="ticketUrl + 'basic-data/step-one'">
                     {{ t('globals.summary.basicData') }}
                     <QIcon name="open_in_new" />
                 </a>
@@ -236,7 +236,7 @@ async function changeState(value) {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a class="header link" :href="ticketUrl + 'observation'">
+                <a class="header header-link" :href="ticketUrl + 'observation'">
                     {{ t('ticket.pageTitles.notes') }}
                     <QIcon name="open_in_new" />
                 </a>
@@ -258,7 +258,7 @@ async function changeState(value) {
                 </VnLv>
             </QCard>
             <QCard class="vn-max">
-                <a class="header link" :href="ticketUrl + 'sale'">
+                <a class="header header-link" :href="ticketUrl + 'sale'">
                     {{ t('ticket.summary.saleLines') }}
                     <QIcon name="open_in_new" />
                 </a>
@@ -396,7 +396,7 @@ async function changeState(value) {
                 class="vn-max"
                 v-if="ticket.packagings.length > 0 || ticket.services.length > 0"
             >
-                <a class="header link" :href="ticketUrl + 'package'">
+                <a class="header header-link" :href="ticketUrl + 'package'">
                     {{ t('globals.packages') }}
                     <QIcon name="open_in_new" />
                 </a>
@@ -417,7 +417,7 @@ async function changeState(value) {
                     </template>
                 </QTable>
 
-                <a class="header link q-mt-xl" :href="ticketUrl + 'service'">
+                <a class="header header-link q-mt-xl" :href="ticketUrl + 'service'">
                     {{ t('ticket.summary.service') }}
                     <QIcon name="open_in_new" />
                 </a>

src/pages/Travel/Card/TravelCard.vue

@@ -3,6 +3,7 @@ import { useStateStore } from 'stores/useStateStore';
 import TravelDescriptor from './TravelDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 </script>
@@ -17,7 +18,9 @@ const stateStore = useStateStore();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Wagon/Card/WagonCard.vue

@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute } from 'vue-router';
 import LeftMenu from 'components/LeftMenu.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const route = useRoute();
@@ -17,7 +18,9 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Worker/Card/WorkerCard.vue

@@ -5,6 +5,7 @@ import WorkerDescriptor from './WorkerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -29,7 +30,9 @@ const { t } = useI18n();
         <QPage>
             <VnSubToolbar />
 
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/router/modules/claim.js

@@ -16,10 +16,10 @@ export default {
             'ClaimLines',
             'ClaimRma',
             'ClaimPhotos',
-            'ClaimLog',
             'ClaimNotes',
             'ClaimDevelopment',
             'ClaimAction',
+            'ClaimLog',
         ],
     },
     children: [
@@ -103,6 +103,15 @@ export default {
                     },
                     component: () => import('src/pages/Claim/Card/ClaimPhoto.vue'),
                 },
+                {
+                    name: 'ClaimNotes',
+                    path: 'notes',
+                    meta: {
+                        title: 'notes',
+                        icon: 'draft',
+                    },
+                    component: () => import('src/pages/Claim/Card/ClaimNotes.vue'),
+                },
                 {
                     name: 'ClaimDevelopment',
                     path: 'development',
@@ -113,24 +122,6 @@ export default {
                     },
                     component: () => import('src/pages/Claim/Card/ClaimDevelopment.vue'),
                 },
-                {
-                    name: 'ClaimLog',
-                    path: 'log',
-                    meta: {
-                        title: 'log',
-                        icon: 'history',
-                    },
-                    component: () => import('src/pages/Claim/Card/ClaimLog.vue'),
-                },
-                {
-                    name: 'ClaimNotes',
-                    path: 'notes',
-                    meta: {
-                        title: 'notes',
-                        icon: 'draft',
-                    },
-                    component: () => import('src/pages/Claim/Card/ClaimNotes.vue'),
-                },
                 {
                     name: 'ClaimAction',
                     path: 'action',
@@ -140,6 +131,15 @@ export default {
                     },
                     component: () => import('src/pages/Claim/Card/ClaimAction.vue'),
                 },
+                {
+                    name: 'ClaimLog',
+                    path: 'log',
+                    meta: {
+                        title: 'log',
+                        icon: 'history',
+                    },
+                    component: () => import('src/pages/Claim/Card/ClaimLog.vue'),
+                },
             ],
         },
     ],