fix: refs #8197 use rightMenu

src/pages/Claim/Card/ClaimAction.vue

@@ -4,7 +4,6 @@ import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
-import { useStateStore } from 'src/stores/useStateStore';
 import { toDate, toPercentage, toCurrency } from 'filters/index';
 import { tMobile } from 'src/composables/tMobile';
 import CrudModel from 'src/components/CrudModel.vue';
@@ -13,11 +12,11 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import { useArrayData } from 'composables/useArrayData';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const { t } = useI18n();
 const quasar = useQuasar();
 const route = useRoute();
-const stateStore = computed(() => useStateStore());
 const claim = ref(null);
 const claimRef = ref();
 const claimId = route.params.id;
@@ -201,58 +200,62 @@ async function post(query, params) {
         auto-load
         @on-fetch="(data) => (destinationTypes = data)"
     />
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted() && claim">
-        <QCard class="totalClaim q-my-md q-pa-sm no-box-shadow">
-            {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
-        </QCard>
-        <QCard class="q-mb-md q-pa-sm no-box-shadow">
-            <QItem class="justify-between">
-                <QItemLabel class="slider-container">
-                    <p class="text-primary">
-                        {{ t('claim.actions') }}
-                    </p>
-                    <QSlider
-                        class="responsibility { 'background-color:primary': quasar.platform.is.mobile }"
-                        v-model="claim.responsibility"
-                        :label-value="t('claim.responsibility')"
-                        @change="(value) => save({ responsibility: value })"
-                        label-always
-                        color="primary"
-                        markers
-                        :marker-labels="marker_labels"
-                        :min="DEFAULT_MIN_RESPONSABILITY"
-                        :max="DEFAULT_MAX_RESPONSABILITY"
+    <RightMenu v-if="claim">
+        <template #right-panel>
+            <QCard class="totalClaim q-my-md q-pa-sm no-box-shadow">
+                {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
+            </QCard>
+            <QCard class="q-mb-md q-pa-sm no-box-shadow">
+                <QItem class="justify-between">
+                    <QItemLabel class="slider-container">
+                        <p class="text-primary">
+                            {{ t('claim.actions') }}
+                        </p>
+                        <QSlider
+                            class="responsibility { 'background-color:primary': quasar.platform.is.mobile }"
+                            v-model="claim.responsibility"
+                            :label-value="t('claim.responsibility')"
+                            @change="(value) => save({ responsibility: value })"
+                            label-always
+                            color="primary"
+                            markers
+                            :marker-labels="marker_labels"
+                            :min="DEFAULT_MIN_RESPONSABILITY"
+                            :max="DEFAULT_MAX_RESPONSABILITY"
+                        />
+                    </QItemLabel>
+                </QItem>
+            </QCard>
+            <QCard class="q-mb-md q-pa-sm no-box-shadow" style="margin-bottom: 1em">
+                <QItemLabel class="mana q-mb-md">
+                    <QCheckbox
+                        v-model="claim.isChargedToMana"
+                        @update:model-value="(value) => save({ isChargedToMana: value })"
                     />
+                    <span>{{ t('mana') }}</span>
                 </QItemLabel>
-            </QItem>
-        </QCard>
-        <QCard class="q-mb-md q-pa-sm no-box-shadow" style="margin-bottom: 1em">
-            <QItemLabel class="mana q-mb-md">
-                <QCheckbox
-                    v-model="claim.isChargedToMana"
-                    @update:model-value="(value) => save({ isChargedToMana: value })"
+            </QCard>
+            <QCard class="q-mb-md q-pa-sm no-box-shadow" style="position: static">
+                <QInput
+                    :disable="
+                        !(
+                            claim.responsibility >=
+                            Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2
+                        )
+                    "
+                    :label="t('confirmGreuges')"
+                    class="q-field__native text-grey-2"
+                    type="number"
+                    placeholder="0"
+                    id="multiplicatorValue"
+                    name="multiplicatorValue"
+                    min="0"
+                    max="50"
+                    v-model="multiplicatorValue"
                 />
-                <span>{{ t('mana') }}</span>
-            </QItemLabel>
-        </QCard>
-        <QCard class="q-mb-md q-pa-sm no-box-shadow" style="position: static">
-            <QInput
-                :disable="
-                    !(claim.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2)
-                "
-                :label="t('confirmGreuges')"
-                class="q-field__native text-grey-2"
-                type="number"
-                placeholder="0"
-                id="multiplicatorValue"
-                name="multiplicatorValue"
-                min="0"
-                max="50"
-                v-model="multiplicatorValue"
-            />
-        </QCard>
-    </Teleport>
-    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
+            </QCard>
+        </template>
+    </RightMenu>
     <CrudModel
         v-if="claim"
         data-key="ClaimEnds"

src/pages/Claim/ClaimList.vue

@@ -134,7 +134,7 @@ const STATE_COLOR = {
             order: ['cs.priority ASC', 'created ASC'],
         }"
     >
-        <template #rightMenu>
+        <template #advanced-menu>
             <ClaimFilter data-key="ClaimList" ref="claimFilterRef" />
         </template>
         <template #body>

src/pages/Order/Card/OrderCatalog.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute, useRouter } from 'vue-router';
-import { onMounted, ref, computed, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';

src/pages/Order/Card/OrderLines.vue

@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { ref, computed, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import axios from 'axios';
-import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
 import { confirm } from 'src/pages/Order/composables/confirmOrder';
 import { toCurrency, toDate } from 'src/filters';
@@ -16,9 +15,9 @@ import VnImg from 'src/components/ui/VnImg.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import FetchedTags from 'src/components/ui/FetchedTags.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const router = useRouter();
-const stateStore = useStateStore();
 const route = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();
@@ -265,23 +264,27 @@ watch(
         @on-fetch="(data) => (orderSummary.vat = data)"
         auto-load
     />
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
-        <QCard
-            class="order-lines-summary q-pa-lg"
-            v-if="orderSummary.vat && orderSummary.total"
-        >
-            <p class="header text-right block">
-                {{ t('summary') }}
-            </p>
-            <VnLv
-                :label="t('subtotal') + ': '"
-                :value="toCurrency(orderSummary.total - orderSummary.vat)"
-            />
-            <VnLv :label="t('VAT') + ': '" :value="toCurrency(orderSummary?.vat)" />
-            <VnLv :label="t('total') + ': '" :value="toCurrency(orderSummary?.total)" />
-        </QCard>
-    </Teleport>
-
+    <RightMenu>
+        <template #right-panel>
+            <QCard
+                class="order-lines-summary q-pa-lg"
+                v-if="orderSummary.vat && orderSummary.total"
+            >
+                <p class="header text-right block">
+                    {{ t('summary') }}
+                </p>
+                <VnLv
+                    :label="t('subtotal') + ': '"
+                    :value="toCurrency(orderSummary.total - orderSummary.vat)"
+                />
+                <VnLv :label="t('VAT') + ': '" :value="toCurrency(orderSummary?.vat)" />
+                <VnLv
+                    :label="t('total') + ': '"
+                    :value="toCurrency(orderSummary?.total)"
+                />
+            </QCard>
+        </template>
+    </RightMenu>
     <VnTable
         ref="tableLinesRef"
         data-key="OrderLines"

src/pages/Order/OrderList.vue

@@ -190,7 +190,7 @@ const getDateColor = (date) => {
             order: ['landed DESC', 'clientFk ASC', 'id DESC'],
         }"
     >
-        <template #rightMenu>
+        <template #advanced-menu>
             <OrderFilter data-key="OrderList" />
         </template>
         <template #body>

src/pages/Ticket/Card/TicketBoxing.vue

@@ -1,7 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { date, useQuasar } from 'quasar';
-import { useStateStore } from 'src/stores/useStateStore';
+import RightMenu from 'src/components/common/RightMenu.vue';
 import { computed, onMounted, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -9,9 +9,7 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 const { t } = useI18n();
 const quasar = useQuasar();
-const stateStore = useStateStore();
 onMounted(async () => {
-    stateStore.rightDrawer = true;
     await fetch();
 });
 
@@ -86,69 +84,73 @@ async function getVideoList(expeditionId, timed) {
 </script>
 
 <template>
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
-        <QList bordered separator style="max-width: 318px">
-            <QItem v-if="lastExpedition && videoList.length">
-                <QItemSection>
-                    <QItemLabel class="text-h6">
-                        {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{
-                            time.max
-                        }})
-                    </QItemLabel>
-                    <QRange
-                        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="primary"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="lastExpedition && videoList.length">
-                <QItemSection>
-                    <QSelect
-                        color="primary"
-                        v-model="slide"
-                        :options="videoList"
-                        :label="t('ticket.boxing.selectVideo')"
-                        emit-value
-                        map-options
-                    >
-                        <template #prepend>
-                            <QIcon name="schedule" />
-                        </template>
-                    </QSelect>
-                </QItemSection>
-            </QItem>
-            <QItem
-                v-for="expedition in expeditions"
-                :key="expedition.id"
-                @click="getVideoList(expedition.id)"
-                clickable
-                v-ripple
-            >
-                <QItemSection>
-                    <QItemLabel class="text-h6">#{{ expedition.id }}</QItemLabel>
-                </QItemSection>
-                <QItemSection>
-                    <QItemLabel caption>{{ t('globals.created') }}</QItemLabel>
-                    <QItemLabel>
-                        {{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}
-                    </QItemLabel>
-                    <QItemLabel caption>{{ t('globals.item') }}</QItemLabel>
-                    <QItemLabel>{{ expedition.packagingItemFk }}</QItemLabel>
-                    <QItemLabel caption>{{ t('ticket.boxing.worker') }}</QItemLabel>
-                    <QItemLabel>{{ expedition.userName }}</QItemLabel>
-                </QItemSection>
-            </QItem>
-        </QList>
-    </Teleport>
+    <RightMenu>
+        <template #right-panel>
+            <QList bordered separator style="max-width: 318px">
+                <QItem v-if="lastExpedition && videoList.length">
+                    <QItemSection>
+                        <QItemLabel class="text-h6">
+                            {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{
+                                time.max
+                            }})
+                        </QItemLabel>
+                        <QRange
+                            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="primary"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem v-if="lastExpedition && videoList.length">
+                    <QItemSection>
+                        <QSelect
+                            color="primary"
+                            v-model="slide"
+                            :options="videoList"
+                            :label="t('ticket.boxing.selectVideo')"
+                            emit-value
+                            map-options
+                        >
+                            <template #prepend>
+                                <QIcon name="schedule" />
+                            </template>
+                        </QSelect>
+                    </QItemSection>
+                </QItem>
+                <QItem
+                    v-for="expedition in expeditions"
+                    :key="expedition.id"
+                    @click="getVideoList(expedition.id)"
+                    clickable
+                    v-ripple
+                >
+                    <QItemSection>
+                        <QItemLabel class="text-h6">#{{ expedition.id }}</QItemLabel>
+                    </QItemSection>
+                    <QItemSection>
+                        <QItemLabel caption>{{ t('globals.created') }}</QItemLabel>
+                        <QItemLabel>
+                            {{
+                                date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss')
+                            }}
+                        </QItemLabel>
+                        <QItemLabel caption>{{ t('globals.item') }}</QItemLabel>
+                        <QItemLabel>{{ expedition.packagingItemFk }}</QItemLabel>
+                        <QItemLabel caption>{{ t('ticket.boxing.worker') }}</QItemLabel>
+                        <QItemLabel>{{ expedition.userName }}</QItemLabel>
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </template>
+    </RightMenu>
     <QCard>
         <QCarousel animated v-model="slide" height="max-content">
             <QCarouselSlide

src/pages/Ticket/Card/TicketComponents.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, watch, nextTick } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -9,15 +9,14 @@ import FetchData from 'components/FetchData.vue';
 import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
 
-import { useStateStore } from 'stores/useStateStore';
 import { dashIfEmpty } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
 import { toCurrency } from 'filters/index';
 import axios from 'axios';
 import VnTable from 'src/components/VnTable/VnTable.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const route = useRoute();
-const stateStore = useStateStore();
 const { t } = useI18n();
 const salesRef = ref(null);
 const arrayData = useArrayData('ticketData');
@@ -164,10 +163,6 @@ const getTicketVolume = async () => {
     const { data } = await axios.get(`Tickets/${ticketData.value.id}/getVolume`);
     ticketVolume.value = data[0].volume;
 };
-
-onMounted(() => {
-    stateStore.rightDrawer = true;
-});
 </script>
 
 <template>
@@ -178,93 +173,121 @@ onMounted(() => {
         @on-fetch="(data) => (components = data)"
         auto-load
     />
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
-        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
-            <QCardSection horizontal>
-                <span class="text-weight-bold text-subtitle1 text-center full-width">
-                    {{ t('basicData.total') }}
-                </span>
-            </QCardSection>
-            <QCardSection horizontal>
-                <span class="q-mr-xs color-vn-label"
-                    >{{ t('ticketComponents.baseToCommission') }}:
-                </span>
-                <span>{{ toCurrency(getBase) }}</span>
-            </QCardSection>
-            <QCardSection horizontal>
-                <span class="q-mr-xs color-vn-label"
-                    >{{ t('ticketComponents.totalWithoutVat') }}:
-                </span>
-                <span>{{ toCurrency(getTotal) }}</span>
-            </QCardSection>
-        </QCard>
-        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
-            <QCardSection horizontal>
-                <span class="text-weight-bold text-subtitle1 text-center full-width">
-                    {{ t('ticketComponents.components') }}
-                </span>
-            </QCardSection>
-            <QCardSection
-                v-for="(component, index) in componentsList"
-                :key="index"
-                horizontal
+    <RightMenu>
+        <template #right-panel>
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
             >
-                <span v-if="component.name" class="q-mr-xs color-vn-label">
-                    {{ component.name }}:
-                </span>
-                <span v-if="component.value">{{
-                    toCurrency(component.value, 'EUR', 3)
-                }}</span>
-            </QCardSection>
-        </QCard>
-        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
-            <QCardSection horizontal>
-                <span class="text-weight-bold text-subtitle1 text-center full-width">
-                    {{ t('ticketComponents.zoneBreakdown') }}
-                </span>
-            </QCardSection>
-            <QCardSection horizontal>
-                <span class="q-mr-xs color-vn-label"> {{ t('basicData.price') }}: </span>
-                <span>{{ toCurrency(ticketData?.zonePrice, 'EUR', 2) }}</span>
-            </QCardSection>
-            <QCardSection horizontal>
-                <span class="q-mr-xs color-vn-label">
-                    {{ t('ticketComponents.bonus') }}:
-                </span>
-                <span>{{ toCurrency(ticketData?.zoneBonus, 'EUR', 2) }}</span>
-            </QCardSection>
-            <QCardSection horizontal>
-                <span class="q-mr-xs color-vn-label"> {{ t('ticketList.zone') }}: </span>
-                <span class="link">
-                    {{ dashIfEmpty(ticketData?.zone?.name) }}
-                    <ZoneDescriptorProxy :id="ticketData?.zone?.id" />
-                </span>
-            </QCardSection>
-            <QCardSection v-if="ticketData?.zone?.isVolumetric" horizontal>
-                <span class="q-mr-xs color-vn-label"> {{ t('volume.volume') }}: </span>
-                <span>{{ ticketVolume }}</span>
-            </QCardSection>
-            <QCardSection horizontal>
-                <span class="q-mr-xs color-vn-label">
-                    {{ t('ticketComponents.packages') }}:
-                </span>
-                <span>{{ dashIfEmpty(ticketData?.packages) }}</span>
-            </QCardSection>
-        </QCard>
-        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
-            <QCardSection horizontal>
-                <span class="text-weight-bold text-subtitle1 text-center full-width">
-                    {{ t('ticketComponents.theoricalCost') }}
-                </span>
-            </QCardSection>
-            <QCardSection horizontal>
-                <span class="q-mr-xs color-vn-label">
-                    {{ t('ticketComponents.totalPrice') }}:
-                </span>
-                <span>{{ toCurrency(theoricalCost, 'EUR', 2) }}</span>
-            </QCardSection>
-        </QCard>
-    </Teleport>
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('basicData.total') }}
+                    </span>
+                </QCardSection>
+                <QCardSection horizontal>
+                    <span class="q-mr-xs color-vn-label"
+                        >{{ t('ticketComponents.baseToCommission') }}:
+                    </span>
+                    <span>{{ toCurrency(getBase) }}</span>
+                </QCardSection>
+                <QCardSection horizontal>
+                    <span class="q-mr-xs color-vn-label"
+                        >{{ t('ticketComponents.totalWithoutVat') }}:
+                    </span>
+                    <span>{{ toCurrency(getTotal) }}</span>
+                </QCardSection>
+            </QCard>
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('ticketComponents.components') }}
+                    </span>
+                </QCardSection>
+                <QCardSection
+                    v-for="(component, index) in componentsList"
+                    :key="index"
+                    horizontal
+                >
+                    <span v-if="component.name" class="q-mr-xs color-vn-label">
+                        {{ component.name }}:
+                    </span>
+                    <span v-if="component.value">{{
+                        toCurrency(component.value, 'EUR', 3)
+                    }}</span>
+                </QCardSection>
+            </QCard>
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('ticketComponents.zoneBreakdown') }}
+                    </span>
+                </QCardSection>
+                <QCardSection horizontal>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('basicData.price') }}:
+                    </span>
+                    <span>{{ toCurrency(ticketData?.zonePrice, 'EUR', 2) }}</span>
+                </QCardSection>
+                <QCardSection horizontal>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('ticketComponents.bonus') }}:
+                    </span>
+                    <span>{{ toCurrency(ticketData?.zoneBonus, 'EUR', 2) }}</span>
+                </QCardSection>
+                <QCardSection horizontal>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('ticketList.zone') }}:
+                    </span>
+                    <span class="link">
+                        {{ dashIfEmpty(ticketData?.zone?.name) }}
+                        <ZoneDescriptorProxy :id="ticketData?.zone?.id" />
+                    </span>
+                </QCardSection>
+                <QCardSection v-if="ticketData?.zone?.isVolumetric" horizontal>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('volume.volume') }}:
+                    </span>
+                    <span>{{ ticketVolume }}</span>
+                </QCardSection>
+                <QCardSection horizontal>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('ticketComponents.packages') }}:
+                    </span>
+                    <span>{{ dashIfEmpty(ticketData?.packages) }}</span>
+                </QCardSection>
+            </QCard>
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('ticketComponents.theoricalCost') }}
+                    </span>
+                </QCardSection>
+                <QCardSection horizontal>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('ticketComponents.totalPrice') }}:
+                    </span>
+                    <span>{{ toCurrency(theoricalCost, 'EUR', 2) }}</span>
+                </QCardSection>
+            </QCard>
+        </template>
+    </RightMenu>
     <VnTable
         ref="tableRef"
         data-key="TicketComponents"

src/pages/Ticket/TicketList.vue

@@ -465,7 +465,7 @@ function setReference(data) {
             exprBuilder,
         }"
     >
-        <template #rightMenu>
+        <template #advanced-menu>
             <TicketFilter data-key="TicketList" />
         </template>
         <template #body>

src/pages/Worker/Card/WorkerCalendar.vue

@@ -1,18 +1,16 @@
 <script setup>
 import { nextTick, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import WorkerCalendarFilter from 'pages/Worker/Card/WorkerCalendarFilter.vue';
 import FetchData from 'components/FetchData.vue';
 import WorkerCalendarItem from 'pages/Worker/Card/WorkerCalendarItem.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
-import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 
-import { useRouter } from 'vue-router';
 const router = useRouter();
-const stateStore = useStateStore();
 const route = useRoute();
 const { t } = useI18n();
 const workerIsFreelance = ref();
@@ -171,16 +169,18 @@ watch([year, businessFk], () => refreshData());
         ref="WorkerFreelanceRef"
         auto-load
     />
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
-        <WorkerCalendarFilter
-            ref="workerCalendarFilterRef"
-            v-model:business-fk="businessFk"
-            v-model:year="year"
-            v-model:absence-type="absenceType"
-            :contract-holidays="contractHolidays"
-            :year-holidays="yearHolidays"
-        />
-    </Teleport>
+    <RightMenu>
+        <template #right-panel>
+            <WorkerCalendarFilter
+                ref="workerCalendarFilterRef"
+                v-model:business-fk="businessFk"
+                v-model:year="year"
+                v-model:absence-type="absenceType"
+                :contract-holidays="contractHolidays"
+                :year-holidays="yearHolidays"
+            />
+        </template>
+    </RightMenu>
     <QPage class="column items-center">
         <QCard v-if="workerIsFreelance">
             <QCardSection class="text-center">

src/pages/Worker/Card/WorkerTimeControl.vue

@@ -10,6 +10,7 @@ import WorkerTimeForm from 'pages/Worker/Card/WorkerTimeForm.vue';
 import WorkerTimeReasonForm from 'pages/Worker/Card/WorkerTimeReasonForm.vue';
 import WorkerDateLabel from './WorkerDateLabel.vue';
 import WorkerTimeControlCalendar from 'pages/Worker/Card/WorkerTimeControlCalendar.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
@@ -482,33 +483,35 @@ onMounted(async () => {
             </QBtnGroup>
         </div>
     </Teleport>
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
-        <div class="q-pa-md q-mb-md" style="border: 2px solid #222">
-            <QCardSection horizontal>
-                <span class="text-weight-bold text-subtitle1 text-center full-width">
-                    {{ t('Hours') }}
-                </span>
-            </QCardSection>
-            <QCardSection class="column items-center" horizontal>
-                <div>
-                    <span class="details-label">{{ t('Total semana') }} </span>
-                    <span>: {{ formattedWeekTotalHours }}</span>
-                </div>
-                <div>
-                    <span class="details-label">{{ t('Termina a las') }}: </span>
-                    <span>{{ dashIfEmpty(getFinishTime()) }}</span>
-                </div>
-            </QCardSection>
-        </div>
-        <WorkerTimeControlCalendar
-            v-model:model-value="selectedDateFormatted"
-            :selected-dates="selectedCalendarDates"
-            :active-date="false"
-            :worker-time-control-mails="workerTimeControlMails"
-            @click-date="onInputChange"
-            @on-moved="getMailStates"
-        />
-    </Teleport>
+    <RightMenu>
+        <template #right-panel>
+            <div class="q-pa-md q-mb-md" style="border: 2px solid #222">
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('Hours') }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <div>
+                        <span class="details-label">{{ t('Total semana') }} </span>
+                        <span>: {{ formattedWeekTotalHours }}</span>
+                    </div>
+                    <div>
+                        <span class="details-label">{{ t('Termina a las') }}: </span>
+                        <span>{{ dashIfEmpty(getFinishTime()) }}</span>
+                    </div>
+                </QCardSection>
+            </div>
+            <WorkerTimeControlCalendar
+                v-model:model-value="selectedDateFormatted"
+                :selected-dates="selectedCalendarDates"
+                :active-date="false"
+                :worker-time-control-mails="workerTimeControlMails"
+                @click-date="onInputChange"
+                @on-moved="getMailStates"
+            />
+        </template>
+    </RightMenu>
     <QPage class="column items-center">
         <QTable :columns="columns" :rows="['']" hide-bottom class="full-width">
             <template #header="props">

src/pages/Worker/WorkerList.vue

@@ -195,7 +195,7 @@ async function autofillBic(worker) {
             order: ['id DESC'],
         }"
     >
-        <template #rightMenu>
+        <template #advanced-menu>
             <WorkerFilter data-key="WorkerList" />
         </template>
         <template #body>

src/router/modules/ticket.js

@@ -168,7 +168,7 @@ const ticketCard = {
             name: 'TicketBoxing',
             meta: {
                 title: 'boxing',
-                icon: 'science',
+                icon: 'view_in_ar',
             },
             component: () => import('src/pages/Ticket/Card/TicketBoxing.vue'),
         },