From 4484f431bf29c48e2116c70a48d360d88ccfd663 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 4 Mar 2024 14:42:15 +0100
Subject: [PATCH] refs #6336 feat: polish claims

---
 src/components/common/VnLog.vue              |  2 +-
 src/components/ui/CardSummary.vue            | 12 ++--
 src/components/ui/VnNotes.vue                | 61 ++++++++++++--------
 src/components/ui/VnPaginate.vue             |  3 +-
 src/i18n/en/index.js                         |  3 +
 src/i18n/es/index.js                         |  9 ++-
 src/pages/Claim/Card/ClaimCard.vue           |  4 +-
 src/pages/Claim/Card/ClaimDescriptor.vue     |  2 +
 src/pages/Claim/Card/ClaimNotes.vue          | 25 ++++----
 src/pages/Claim/Card/ClaimSummary.vue        | 53 ++++++++++-------
 src/pages/Claim/ClaimList.vue                |  6 --
 src/pages/Customer/Card/CustomerCard.vue     |  4 +-
 src/pages/Entry/Card/EntryCard.vue           |  4 +-
 src/pages/InvoiceIn/Card/InvoiceInCard.vue   |  4 +-
 src/pages/InvoiceOut/Card/InvoiceOutCard.vue |  4 +-
 src/pages/Item/Card/ItemCard.vue             |  4 +-
 src/pages/Supplier/Card/SupplierCard.vue     |  4 +-
 src/pages/Ticket/Card/TicketCard.vue         |  4 +-
 src/pages/Travel/Card/TravelCard.vue         |  4 +-
 src/pages/Wagon/Card/WagonCard.vue           |  4 +-
 src/pages/Worker/Card/WorkerCard.vue         |  4 +-
 src/router/modules/claim.js                  | 38 ++++++------
 22 files changed, 153 insertions(+), 105 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 6368a3e52..f818f7457 100644
--- a/src/components/common/VnLog.vue
+++ b/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
diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index cb2c97746..cbc1777ec 100644
--- a/src/components/ui/CardSummary.vue
+++ b/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;
             }
diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index 6890b52c3..44ef798ec 100644
--- a/src/components/ui/VnNotes.vue
+++ b/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,28 +38,38 @@ async function insert() {
             ref="vnPaginateRef"
         >
             <template #body="{ rows }">
-                <QCard class="q-pa-xs q-mb-md" v-for="(note, index) in rows" :key="index">
-                    <QCardSection horizontal>
-                        <slot name="picture">
-                            <VnAvatar :descriptor="false" :worker-id="note.workerFk" />
-                        </slot>
-                        <QItem class="full-width justify-between items-start">
-                            <VnUserLink
-                                :name="`${note.worker.user.nickname}`"
-                                :worker-id="note.worker.id"
-                            />
-
-                            <slot name="actions">
-                                {{ toDateHour(note.created) }}
+                <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"
+                                    size="md"
+                                />
                             </slot>
-                        </QItem>
-                    </QCardSection>
-                    <QCardSection class="q-pa-sm">
-                        <slot name="text">
-                            {{ note.text }}
-                        </slot>
-                    </QCardSection>
-                </QCard>
+                            <div class="full-width row justify-between q-pa-xs">
+                                <VnUserLink
+                                    :name="`${note.worker.user.nickname}`"
+                                    :worker-id="note.worker.id"
+                                />
+
+                                <slot name="actions">
+                                    {{ toDateHour(note.created) }}
+                                </slot>
+                            </div>
+                        </QCardSection>
+                        <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;
     }
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 4c38c1c1a..98c89c051 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/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">
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 0cc91c88d..ee404b298 100644
--- a/src/i18n/en/index.js
+++ b/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',
@@ -527,6 +528,8 @@ export default {
             ticketId: 'Ticket ID',
             customerSummary: 'Customer summary',
             claimedTicket: 'Claimed ticket',
+            saleTracking: 'Sale tracking',
+            ticketTracking: 'Ticket tracking',
             commercial: 'Commercial',
             province: 'Province',
             zone: 'Zone',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 7369721e6..42e4a0a42 100644
--- a/src/i18n/es/index.js
+++ b/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',
@@ -500,7 +501,7 @@ export default {
             rma: 'RMA',
             development: 'Trazabilidad',
             photos: 'Fotos',
-            log: 'Registros de auditoría',
+            log: 'Historial',
             notes: 'Notas',
             action: 'Acción',
         },
@@ -526,6 +527,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',
@@ -723,7 +726,7 @@ export default {
             create: 'Crear',
             summary: 'Resumen',
             basicData: 'Datos básicos',
-            log: 'Registros de auditoría',
+            log: 'Historial',
         },
         list: {
             parking: 'Parking',
@@ -755,7 +758,7 @@ export default {
             dueDay: 'Vencimiento',
             intrastat: 'Intrastat',
             corrective: 'Rectificativa',
-            log: 'Registros de auditoría',
+            log: 'Historial',
         },
         list: {
             ref: 'Referencia',
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 64cf736a9..249337c49 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -28,7 +28,9 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 3827a70d4..61b8488fe 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/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>
diff --git a/src/pages/Claim/Card/ClaimNotes.vue b/src/pages/Claim/Card/ClaimNotes.vue
index ed4c2040d..63c5a5f0a 100644
--- a/src/pages/Claim/Card/ClaimNotes.vue
+++ b/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 },
     fields: ['created', 'workerFk', 'text'],
     include: {
         relation: 'worker',
@@ -30,19 +32,16 @@ const claimFilter = {
 };
 
 const body = {
-    claimFk: id,
+    claimFk: claimId,
     workerFk: user.value.id,
 };
 </script>
 <template>
-    <div class="column items-center">
-        <VnNotes
-            style="overflow-y: scroll"
-            :add-note="$props.addNote"
-            :id="id"
-            url="claimObservations"
-            :filter="claimFilter"
-            :body="body"
-        />
-    </div>
+    <VnNotes
+        style="overflow-y: auto"
+        :add-note="$props.addNote"
+        url="claimObservations"
+        :filter="claimFilter"
+        :body="body"
+    />
 </template>
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index b93cbbd81..e46327c6f 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/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,38 @@ function openDialog(dmsId) {
                         />
                     </template>
                 </VnLv>
-                <VnLv :label="t('claim.summary.returnOfMaterial')" :value="claim.rma" />
                 <QCheckbox
                     :align-items="right"
                     :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" :href="`#/claim/${entityId}/notes`">
                     {{ t('claim.summary.notes') }}
                     <QIcon name="open_in_new" color="primary" />
                 </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" :href="`#/claim/${entityId}/lines`">
                     {{ t('claim.summary.details') }}
                     <QIcon name="open_in_new" color="primary" />
                 </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 +284,15 @@ function openDialog(dmsId) {
                     {{ t('claim.summary.development') }}
                     <QIcon name="open_in_new" color="primary" />
                 </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 +410,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 +420,6 @@ function openDialog(dmsId) {
     flex-direction: row;
     flex-wrap: wrap;
     gap: 15px;
-    flex-basis: 30%;
 }
 .multimedia-container {
     flex: 1 0 21%;
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index fd0d2561f..6a793314f 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/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
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 36ec263f0..a35036284 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -30,7 +30,9 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>
diff --git a/src/pages/Entry/Card/EntryCard.vue b/src/pages/Entry/Card/EntryCard.vue
index fe4d73f99..eea0b3b6b 100644
--- a/src/pages/Entry/Card/EntryCard.vue
+++ b/src/pages/Entry/Card/EntryCard.vue
@@ -33,7 +33,9 @@ const stateStore = useStateStore();
         <QPage>
             <VnSubToolbar />
 
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
index 9268fe3b1..c0e36e589 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInCard.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
@@ -74,7 +74,9 @@ watch(
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index bfab4b9e1..fe6649fb1 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -28,7 +28,9 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>
diff --git a/src/pages/Item/Card/ItemCard.vue b/src/pages/Item/Card/ItemCard.vue
index 57c3a434d..5ca20d6f3 100644
--- a/src/pages/Item/Card/ItemCard.vue
+++ b/src/pages/Item/Card/ItemCard.vue
@@ -19,7 +19,9 @@ const stateStore = useStateStore();
         <QPage>
             <VnSubToolbar />
 
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>
diff --git a/src/pages/Supplier/Card/SupplierCard.vue b/src/pages/Supplier/Card/SupplierCard.vue
index ddac988e7..74b2dfb4c 100644
--- a/src/pages/Supplier/Card/SupplierCard.vue
+++ b/src/pages/Supplier/Card/SupplierCard.vue
@@ -30,7 +30,9 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 35870946a..568cf6440 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -29,7 +29,9 @@ const { t } = useI18n();
         <QPage>
             <VnSubToolbar />
 
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>
diff --git a/src/pages/Travel/Card/TravelCard.vue b/src/pages/Travel/Card/TravelCard.vue
index 1b185592b..76bf74c6a 100644
--- a/src/pages/Travel/Card/TravelCard.vue
+++ b/src/pages/Travel/Card/TravelCard.vue
@@ -17,7 +17,9 @@ const stateStore = useStateStore();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>
diff --git a/src/pages/Wagon/Card/WagonCard.vue b/src/pages/Wagon/Card/WagonCard.vue
index 18ec121e3..ba4517777 100644
--- a/src/pages/Wagon/Card/WagonCard.vue
+++ b/src/pages/Wagon/Card/WagonCard.vue
@@ -17,7 +17,9 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index 719831523..3b31f9064 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -29,7 +29,9 @@ const { t } = useI18n();
         <QPage>
             <VnSubToolbar />
 
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>
diff --git a/src/router/modules/claim.js b/src/router/modules/claim.js
index 1dfd75cff..67313cd44 100644
--- a/src/router/modules/claim.js
+++ b/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'),
+                },
             ],
         },
     ],