From 6b8819591eaed19f745a8b7518d6b2303c79c281 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 15 Nov 2022 14:59:04 +0100
Subject: [PATCH 1/3] feat(teleport): teleport components

---
 src/components/Navbar.vue                     |  6 +++++
 src/composables/useState.js                   |  4 +++-
 src/pages/Customer/Card/CustomerBasicData.vue | 24 +++++++++++++++++--
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index e5c5676f7..a1eae0928 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
@@ -11,6 +12,8 @@ const state = useState();
 const user = state.getUser();
 const token = session.getToken();
 
+onMounted(() => (state.headerMounted.value = true));
+
 function onToggleDrawer() {
     state.drawer.value = !state.drawer.value;
 }
@@ -36,6 +39,8 @@ function onToggleDrawer() {
             </router-link>
             <q-toolbar-title shrink class="text-weight-bold">Salix</q-toolbar-title>
             <q-space></q-space>
+            <div id="searchbar"></div>
+            <q-space></q-space>
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                 <!-- <q-btn v-if="$q.screen.gt.xs" dense flat size="md" icon="add">
                     <q-menu>
@@ -62,6 +67,7 @@ function onToggleDrawer() {
                         </div>
                     </q-menu>
                 </q-btn> -->
+                <div id="header-actions"></div>
                 <q-btn dense flat no-wrap id="favoriteModules">
                     <q-avatar size="lg">
                         <q-icon name="apps" size="s" />
diff --git a/src/composables/useState.js b/src/composables/useState.js
index c17b8af5b..f0ff830ab 100644
--- a/src/composables/useState.js
+++ b/src/composables/useState.js
@@ -12,6 +12,7 @@ const user = ref({
 
 const roles = ref([]);
 const drawer = ref(true);
+const headerMounted = ref(false);
 
 export function useState() {
     function getUser() {
@@ -67,6 +68,7 @@ export function useState() {
         set,
         get,
         unset,
-        drawer
+        drawer,
+        headerMounted
     };
 }
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 3df10a095..c5c3456c9 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -1,14 +1,16 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
+import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'src/components/FetchData.vue';
 import FormModel from 'src/components/FormModel.vue';
 
 const route = useRoute();
 const { t } = useI18n();
+const state = useState();
 const session = useSession();
 const token = session.getToken();
 
@@ -40,6 +42,7 @@ const filterOptions = {
         });
     },
 };
+const headerMounted = computed(() => state.headerMounted.value);
 </script>
 <template>
     <fetch-data
@@ -50,7 +53,24 @@ const filterOptions = {
     />
     <fetch-data url="ContactChannels" @on-fetch="($data) => (contactChannels = $data)" auto-load />
     <fetch-data url="BusinessTypes" @on-fetch="($data) => (businessTypes = $data)" auto-load />
-
+    <teleport v-if="headerMounted" to="#header-actions">
+        <div class="row q-gutter-x-sm">
+            <q-btn color="primary" dense flat no-wrap>
+                <q-avatar size="lg">
+                    <q-icon name="save" size="s" />
+                </q-avatar>
+                <q-tooltip bottom> Save </q-tooltip>
+            </q-btn>
+            <q-btn color="primary" dense flat no-wrap>
+                <q-avatar size="lg">
+                    <q-icon name="delete" size="s" />
+                </q-avatar>
+                <q-tooltip bottom> Delete </q-tooltip>
+            </q-btn>
+            <q-separator vertical />
+        </div>
+    </teleport>
+    <teleport v-if="headerMounted" to="#searchbar"> input </teleport>
     <div class="container">
         <q-card>
             <form-model :url="`Clients/${route.params.id}`" model="customer">

From e7f7125a6003eb121b968900d82654ecf82af520 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 17 Nov 2022 15:12:48 +0100
Subject: [PATCH 2/3] Changes

---
 src/components/FormModel.vue                  |  12 ++
 src/components/Navbar.vue                     |  33 +----
 src/components/ui/TeleportSlot.vue            |  20 +++
 src/pages/Claim/Card/ClaimRma.vue             |  87 ++++++------
 src/pages/Customer/Card/CustomerBasicData.vue |  26 +---
 src/pages/Ticket/Card/TicketBoxing.vue        | 128 +++++++++---------
 6 files changed, 146 insertions(+), 160 deletions(-)
 create mode 100644 src/components/ui/TeleportSlot.vue

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index d36f8c4ea..7acf2b278 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -7,6 +7,7 @@ import axios from 'axios';
 import { useState } from 'src/composables/useState';
 import { useValidator } from 'src/composables/useValidator';
 import SkeletonForm from 'src/components/SkeletonForm.vue';
+import TeleportSlot from 'src/components/ui/TeleportSlot';
 
 const quasar = useQuasar();
 const { t } = useI18n();
@@ -93,6 +94,17 @@ function filter(value, update, filterOptions) {
 }
 </script>
 <template>
+    <teleport-slot to="#header-actions">
+        <div class="row q-gutter-x-sm">
+            <q-btn @click="addRow()" icon="save" color="primary" flat dense rounded>
+                <q-tooltip bottom> {{ t('globals.save') }} </q-tooltip>
+            </q-btn>
+            <q-btn @click="addRow()" icon="clear_all" color="primary" flat dense rounded>
+                <q-tooltip bottom> {{ t('globals.reset') }} </q-tooltip>
+            </q-btn>
+            <q-separator vertical />
+        </div>
+    </teleport-slot>
     <q-banner v-if="hasChanges" class="text-white bg-warning">
         <q-icon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index a1eae0928..7ffe3d888 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -42,42 +42,14 @@ function onToggleDrawer() {
             <div id="searchbar"></div>
             <q-space></q-space>
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
-                <!-- <q-btn v-if="$q.screen.gt.xs" dense flat size="md" icon="add">
-                    <q-menu>
-                        <q-list style="min-width: 150px">
-                            <q-item :to="{ path: '/customer/create' }" clickable>
-                                <q-item-section>New customer</q-item-section>
-                            </q-item>
-                            <q-item clickable>
-                                <q-item-section>New ticket</q-item-section>
-                            </q-item>
-                        </q-list>
-                    </q-menu>
-                </q-btn> -->
-                <!-- <q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications">
-                    <q-badge color="red" text-color="white" floating> 2 </q-badge>
-                    <q-tooltip bottom>
-                        {{ t('globals.notifications') }}
-                    </q-tooltip>
-                    <q-menu class="q-pa-md" style="min-width: 250px">
-                        <strong>Notifications</strong>
-                        <q-separator />
-                        <div style="text-align: center; font-size: 2em">
-                            <q-spinner-puff color="orange" />
-                        </div>
-                    </q-menu>
-                </q-btn> -->
                 <div id="header-actions"></div>
-                <q-btn dense flat no-wrap id="favoriteModules">
-                    <q-avatar size="lg">
-                        <q-icon name="apps" size="s" />
-                    </q-avatar>
+                <q-btn id="favoriteModules" icon="apps" flat dense rounded>
                     <q-tooltip bottom>
                         {{ t('globals.favoriteModules') }}
                     </q-tooltip>
                     <FavoriteModules />
                 </q-btn>
-                <q-btn dense flat no-wrap id="user">
+                <q-btn rounded dense flat no-wrap id="user">
                     <q-avatar size="lg">
                         <q-img
                             :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
@@ -85,7 +57,6 @@ function onToggleDrawer() {
                         >
                         </q-img>
                     </q-avatar>
-                    <q-icon name="arrow_drop_down" size="s" />
                     <q-tooltip bottom>
                         {{ t('globals.userPanel') }}
                     </q-tooltip>
diff --git a/src/components/ui/TeleportSlot.vue b/src/components/ui/TeleportSlot.vue
new file mode 100644
index 000000000..6a3f19ef0
--- /dev/null
+++ b/src/components/ui/TeleportSlot.vue
@@ -0,0 +1,20 @@
+<script setup>
+import { nextTick, ref } from 'vue';
+
+const $props = defineProps({
+    to: {
+        type: String,
+        required: true,
+    },
+});
+
+const isHeaderMounted = ref(false);
+nextTick(() => {
+    isHeaderMounted.value = document.querySelector($props.to) !== null;
+});
+</script>
+<template>
+    <teleport v-if="isHeaderMounted" :to="$props.to">
+        <slot />
+    </teleport>
+</template>
diff --git a/src/pages/Claim/Card/ClaimRma.vue b/src/pages/Claim/Card/ClaimRma.vue
index 4162d5acf..37d82ac29 100644
--- a/src/pages/Claim/Card/ClaimRma.vue
+++ b/src/pages/Claim/Card/ClaimRma.vue
@@ -6,6 +6,7 @@ import { useRoute } from 'vue-router';
 import axios from 'axios';
 import Paginate from 'src/components/Paginate.vue';
 import FetchData from 'src/components/FetchData.vue';
+import TeleportSlot from 'components/ui/TeleportSlot';
 import { toDate } from 'src/filters';
 
 const quasar = useQuasar();
@@ -80,51 +81,49 @@ function hide() {
         @on-fetch="($data) => (claim = $data)"
         auto-load
     />
-    <div class="sticky-page">
-        <q-page-sticky expand position="top">
-            <q-toolbar class="bg-grey-9">
-                <q-space />
-                <div class="q-gutter-md">
-                    <q-btn icon="add" :label="t('globals.add')" color="primary" @click="addRow()" />
-                </div>
-            </q-toolbar>
-        </q-page-sticky>
+    <teleport-slot to="#header-actions">
+        <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>
+            </q-btn>
+            <q-separator vertical />
+        </div>
+    </teleport-slot>
+    <paginate :data="claim.rmas">
+        <template #body="{ rows }">
+            <q-card class="card">
+                <template v-for="row 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 />
+                </template>
+            </q-card>
+        </template>
+    </paginate>
 
-        <paginate :data="claim.rmas">
-            <template #body="{ rows }">
-                <q-card class="card">
-                    <template v-for="row 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 />
-                    </template>
-                </q-card>
-            </template>
-        </paginate>
-    </div>
     <q-dialog v-model="confirmShown" persistent @hide="hide">
         <q-card>
             <q-card-section class="row items-center">
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index c5c3456c9..4b27656e6 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -1,16 +1,16 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import { useState } from 'src/composables/useState';
+// import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'src/components/FetchData.vue';
 import FormModel from 'src/components/FormModel.vue';
 
 const route = useRoute();
 const { t } = useI18n();
-const state = useState();
+// const state = useState();
 const session = useSession();
 const token = session.getToken();
 
@@ -42,7 +42,7 @@ const filterOptions = {
         });
     },
 };
-const headerMounted = computed(() => state.headerMounted.value);
+// const headerMounted = computed(() => state.headerMounted.value);
 </script>
 <template>
     <fetch-data
@@ -53,24 +53,6 @@ const headerMounted = computed(() => state.headerMounted.value);
     />
     <fetch-data url="ContactChannels" @on-fetch="($data) => (contactChannels = $data)" auto-load />
     <fetch-data url="BusinessTypes" @on-fetch="($data) => (businessTypes = $data)" auto-load />
-    <teleport v-if="headerMounted" to="#header-actions">
-        <div class="row q-gutter-x-sm">
-            <q-btn color="primary" dense flat no-wrap>
-                <q-avatar size="lg">
-                    <q-icon name="save" size="s" />
-                </q-avatar>
-                <q-tooltip bottom> Save </q-tooltip>
-            </q-btn>
-            <q-btn color="primary" dense flat no-wrap>
-                <q-avatar size="lg">
-                    <q-icon name="delete" size="s" />
-                </q-avatar>
-                <q-tooltip bottom> Delete </q-tooltip>
-            </q-btn>
-            <q-separator vertical />
-        </div>
-    </teleport>
-    <teleport v-if="headerMounted" to="#searchbar"> input </teleport>
     <div class="container">
         <q-card>
             <form-model :url="`Clients/${route.params.id}`" model="customer">
diff --git a/src/pages/Ticket/Card/TicketBoxing.vue b/src/pages/Ticket/Card/TicketBoxing.vue
index e777a20ba..2f2f07f8c 100644
--- a/src/pages/Ticket/Card/TicketBoxing.vue
+++ b/src/pages/Ticket/Card/TicketBoxing.vue
@@ -79,69 +79,71 @@ async function getVideoList(expeditionId, timed) {
 </script>
 
 <template>
-    <q-drawer show-if-above side="right">
-        <q-scroll-area class="fit">
-            <q-list bordered separator style="max-width: 318px">
-                <q-item v-if="lastExpedition && videoList.length">
-                    <q-item-section>
-                        <q-item-label class="text-h6">
-                            {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{ time.max }})
-                        </q-item-label>
-                        <q-range
-                            v-model="time"
-                            @change="getVideoList(lastExpedition, time)"
-                            :min="0"
-                            :max="24"
-                            :step="1"
-                            :left-label-value="time.min + ':00'"
-                            :right-label-value="time.max + ':00'"
-                            label
-                            markers
-                            snap
-                            color="orange"
-                        />
-                    </q-item-section>
-                </q-item>
-                <q-item v-if="lastExpedition && videoList.length">
-                    <q-item-section>
-                        <q-select
-                            color="orange"
-                            v-model="slide"
-                            :options="videoList"
-                            :label="t('ticket.boxing.selectVideo')"
-                            emit-value
-                            map-options
-                        >
-                            <template #prepend>
-                                <q-icon name="schedule" />
-                            </template>
-                        </q-select>
-                    </q-item-section>
-                </q-item>
-                <q-item
-                    v-for="expedition in expeditions"
-                    :key="expedition.id"
-                    @click="getVideoList(expedition.id)"
-                    clickable
-                    v-ripple
-                >
-                    <q-item-section>
-                        <q-item-label class="text-h6">#{{ expedition.id }}</q-item-label>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label caption>{{ t('ticket.boxing.created') }}</q-item-label>
-                        <q-item-label>
-                            {{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}
-                        </q-item-label>
-                        <q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label>
-                        <q-item-label>{{ expedition.packagingItemFk }}</q-item-label>
-                        <q-item-label caption>{{ t('ticket.boxing.worker') }}</q-item-label>
-                        <q-item-label>{{ expedition.userName }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-            </q-list>
-        </q-scroll-area>
-    </q-drawer>
+    <teleport to=".q-layout">
+        <q-drawer show-if-above side="right">
+            <q-scroll-area class="fit">
+                <q-list bordered separator style="max-width: 318px">
+                    <q-item v-if="lastExpedition && videoList.length">
+                        <q-item-section>
+                            <q-item-label class="text-h6">
+                                {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{ time.max }})
+                            </q-item-label>
+                            <q-range
+                                v-model="time"
+                                @change="getVideoList(lastExpedition, time)"
+                                :min="0"
+                                :max="24"
+                                :step="1"
+                                :left-label-value="time.min + ':00'"
+                                :right-label-value="time.max + ':00'"
+                                label
+                                markers
+                                snap
+                                color="orange"
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item v-if="lastExpedition && videoList.length">
+                        <q-item-section>
+                            <q-select
+                                color="orange"
+                                v-model="slide"
+                                :options="videoList"
+                                :label="t('ticket.boxing.selectVideo')"
+                                emit-value
+                                map-options
+                            >
+                                <template #prepend>
+                                    <q-icon name="schedule" />
+                                </template>
+                            </q-select>
+                        </q-item-section>
+                    </q-item>
+                    <q-item
+                        v-for="expedition in expeditions"
+                        :key="expedition.id"
+                        @click="getVideoList(expedition.id)"
+                        clickable
+                        v-ripple
+                    >
+                        <q-item-section>
+                            <q-item-label class="text-h6">#{{ expedition.id }}</q-item-label>
+                        </q-item-section>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('ticket.boxing.created') }}</q-item-label>
+                            <q-item-label>
+                                {{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}
+                            </q-item-label>
+                            <q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label>
+                            <q-item-label>{{ expedition.packagingItemFk }}</q-item-label>
+                            <q-item-label caption>{{ t('ticket.boxing.worker') }}</q-item-label>
+                            <q-item-label>{{ expedition.userName }}</q-item-label>
+                        </q-item-section>
+                    </q-item>
+                </q-list>
+            </q-scroll-area>
+        </q-drawer>
+    </teleport>
 
     <q-card>
         <q-carousel animated v-model="slide" height="max-content">

From a139debeb584cf0dd6140640b0df60dff7031e36 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Fri, 18 Nov 2022 08:49:40 +0100
Subject: [PATCH 3/3] Enabled header teleports

---
 package-lock.json                 | 12 ++++++------
 src/components/FormModel.vue      | 12 ------------
 src/layouts/MainLayout.vue        |  4 ++++
 src/pages/Claim/Card/ClaimRma.vue | 24 +++++++++++++++---------
 4 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index da3eb26d6..1af3be8e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5754,9 +5754,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001344",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz",
-            "integrity": "sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==",
+            "version": "1.0.30001431",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
+            "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
             "dev": true,
             "funding": [
                 {
@@ -25351,9 +25351,9 @@
             }
         },
         "caniuse-lite": {
-            "version": "1.0.30001344",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz",
-            "integrity": "sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==",
+            "version": "1.0.30001431",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
+            "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
             "dev": true
         },
         "capture-exit": {
diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 7acf2b278..d36f8c4ea 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -7,7 +7,6 @@ import axios from 'axios';
 import { useState } from 'src/composables/useState';
 import { useValidator } from 'src/composables/useValidator';
 import SkeletonForm from 'src/components/SkeletonForm.vue';
-import TeleportSlot from 'src/components/ui/TeleportSlot';
 
 const quasar = useQuasar();
 const { t } = useI18n();
@@ -94,17 +93,6 @@ function filter(value, update, filterOptions) {
 }
 </script>
 <template>
-    <teleport-slot to="#header-actions">
-        <div class="row q-gutter-x-sm">
-            <q-btn @click="addRow()" icon="save" color="primary" flat dense rounded>
-                <q-tooltip bottom> {{ t('globals.save') }} </q-tooltip>
-            </q-btn>
-            <q-btn @click="addRow()" icon="clear_all" color="primary" flat dense rounded>
-                <q-tooltip bottom> {{ t('globals.reset') }} </q-tooltip>
-            </q-btn>
-            <q-separator vertical />
-        </div>
-    </teleport-slot>
     <q-banner v-if="hasChanges" class="text-white bg-warning">
         <q-icon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 0418c8f3b..9c8a686c3 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,11 +1,15 @@
 <script setup>
+import { useQuasar } from 'quasar';
 import Navbar from 'src/components/Navbar.vue';
+
+const quasar = useQuasar();
 </script>
 
 <template>
     <q-layout view="hHh LpR fFf">
         <Navbar />
         <router-view></router-view>
+        <q-footer v-if="quasar.platform.is.mobile"></q-footer>
     </q-layout>
 </template>
 
diff --git a/src/pages/Claim/Card/ClaimRma.vue b/src/pages/Claim/Card/ClaimRma.vue
index 37d82ac29..345df2010 100644
--- a/src/pages/Claim/Card/ClaimRma.vue
+++ b/src/pages/Claim/Card/ClaimRma.vue
@@ -78,17 +78,9 @@ function hide() {
         ref="fetcher"
         :url="`Claims/${route.params.id}`"
         :filter="filter"
-        @on-fetch="($data) => (claim = $data)"
+        @on-fetch="(data) => (claim = data)"
         auto-load
     />
-    <teleport-slot to="#header-actions">
-        <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>
-            </q-btn>
-            <q-separator vertical />
-        </div>
-    </teleport-slot>
     <paginate :data="claim.rmas">
         <template #body="{ rows }">
             <q-card class="card">
@@ -137,6 +129,20 @@ function hide() {
             </q-card-actions>
         </q-card>
     </q-dialog>
+    <teleport-slot v-if="!quasar.platform.is.mobile" to="#header-actions">
+        <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>
+            </q-btn>
+            <q-separator vertical />
+        </div>
+    </teleport-slot>
+
+    <teleport-slot to=".q-footer">
+        <q-tabs align="justify" inline-label narrow-indicator>
+            <q-tab @click="addRow()" icon="add_circle" :label="t('globals.add')" />
+        </q-tabs>
+    </teleport-slot>
 </template>
 
 <style lang="scss" scoped>