diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8c59fc781..243d67a34 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   (Reclamaciones) => Añadida nueva sección "Registros de auditoría"
 -   (Trabajadores) => Añadido módulo de trabajadores
 -   (General) => Añadida barra de búsqueda general en los listados principales
+-   (Vagones) => Añadido módulo de vagones
 
 ### Changed
 
diff --git a/quasar.config.js b/quasar.config.js
index e9f7a1929..cbcbae4dc 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -140,8 +140,8 @@ module.exports = configure(function (/* ctx */) {
 
             // Quasar plugins
             plugins: ['Notify', 'Dialog'],
-            //all: 'auto',
-            //autoImportComponentCase: 'pascal',
+            all: 'auto',
+            autoImportComponentCase: 'pascal',
         },
 
         // animations: 'all', // --- includes all animations
diff --git a/src/App.vue b/src/App.vue
index 650a979d8..8e9bea2e4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,7 +36,7 @@ quasar.iconMapFn = (iconName) => {
 </script>
 
 <template>
-    <router-view />
+    <RouterView />
 </template>
 
 <style lang="scss">
diff --git a/src/boot/axios.js b/src/boot/axios.js
index 2f454188e..cbd5e7213 100644
--- a/src/boot/axios.js
+++ b/src/boot/axios.js
@@ -58,9 +58,12 @@ const onResponseError = (error) => {
             break;
     }
 
-    if (session.isLoggedIn && response.status === 401) {
+    if (session.isLoggedIn() && response.status === 401) {
         session.destroy();
         Router.push({ path: '/login' });
+    } else if(!session.isLoggedIn())
+    {
+        message = 'login.loginError';
     }
 
     Notify.create({
diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 439f653b3..f4d81a30f 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -99,16 +99,16 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <q-banner v-if="hasChanges" class="text-white bg-warning">
-        <q-icon name="warning" size="md" class="q-mr-md" />
+    <QBanner v-if="hasChanges" class="text-white bg-warning">
+        <QIcon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>
-    </q-banner>
-    <q-form v-if="formData" @submit="save" @reset="reset" class="q-pa-md">
+    </QBanner>
+    <QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md">
         <slot name="form" :data="formData" :validate="validate" :filter="filter"></slot>
         <div class="q-mt-lg">
             <slot name="actions">
-                <q-btn :label="t('globals.save')" type="submit" color="primary" />
-                <q-btn
+                <QBtn :label="t('globals.save')" type="submit" color="primary" />
+                <QBtn
                     :label="t('globals.reset')"
                     type="reset"
                     class="q-ml-sm"
@@ -118,7 +118,11 @@ watch(formUrl, async () => {
                 />
             </slot>
         </div>
-    </q-form>
-    <skeleton-form v-if="!formData" />
-    <q-inner-loading :showing="isLoading" :label="t('globals.pleaseWait')" color="primary" />
+    </QForm>
+    <SkeletonForm v-if="!formData" />
+    <QInnerLoading
+        :showing="isLoading"
+        :label="t('globals.pleaseWait')"
+        color="primary"
+    />
 </template>
diff --git a/src/components/LeftMenu.vue b/src/components/LeftMenu.vue
index b8e199b80..7f2fb579f 100644
--- a/src/components/LeftMenu.vue
+++ b/src/components/LeftMenu.vue
@@ -2,7 +2,7 @@
 import axios from 'axios';
 import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
+import { QSeparator, useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
 import { useNavigationStore } from 'src/stores/useNavigationStore';
 import { toLowerCamel } from 'src/filters';
@@ -65,7 +65,9 @@ function getRoutes() {
         const modules = Object.assign([], navigation.getModules().value);
 
         for (const item of modules) {
-            const moduleDef = routes.find((route) => toLowerCamel(route.name) === item.module);
+            const moduleDef = routes.find(
+                (route) => toLowerCamel(route.name) === item.module
+            );
             item.children = [];
 
             if (!moduleDef) continue;
@@ -79,7 +81,9 @@ function getRoutes() {
     if (props.source === 'card') {
         const currentRoute = route.matched[1];
         const currentModule = toLowerCamel(currentRoute.name);
-        const moduleDef = routes.find((route) => toLowerCamel(route.name) === currentModule);
+        const moduleDef = routes.find(
+            (route) => toLowerCamel(route.name) === currentModule
+        );
 
         if (!moduleDef) return;
 
@@ -111,16 +115,16 @@ async function togglePinned(item, event) {
 </script>
 
 <template>
-    <q-list padding>
+    <QList padding>
         <template v-if="$props.source === 'main'">
-            <q-item-label header>
+            <QItemLabel header>
                 {{ t('globals.pinnedModules') }}
-            </q-item-label>
+            </QItemLabel>
             <template v-for="item in pinnedItems" :key="item.name">
                 <template v-if="item.children">
-                    <left-menu-item-group :item="item" group="pinnedModules" class="pinned">
+                    <LeftMenuItemGroup :item="item" group="pinnedModules" class="pinned">
                         <template #side>
-                            <q-btn
+                            <QBtn
                                 v-if="item.isPinned === true"
                                 @click="togglePinned(item, $event)"
                                 icon="vn:pin_off"
@@ -128,9 +132,11 @@ async function togglePinned(item, event) {
                                 flat
                                 round
                             >
-                                <q-tooltip>{{ t('components.leftMenu.removeFromPinned') }}</q-tooltip>
-                            </q-btn>
-                            <q-btn
+                                <QTooltip>{{
+                                    t('components.leftMenu.removeFromPinned')
+                                }}</QTooltip>
+                            </QBtn>
+                            <QBtn
                                 v-if="item.isPinned === false"
                                 @click="togglePinned(item, $event)"
                                 icon="vn:pin"
@@ -138,21 +144,23 @@ async function togglePinned(item, event) {
                                 flat
                                 round
                             >
-                                <q-tooltip>{{ t('components.leftMenu.addToPinned') }}</q-tooltip>
-                            </q-btn>
+                                <QTooltip>{{
+                                    t('components.leftMenu.addToPinned')
+                                }}</QTooltip>
+                            </QBtn>
                         </template>
-                    </left-menu-item-group>
+                    </LeftMenuItemGroup>
                 </template>
 
-                <left-menu-item v-if="!item.children" :item="item" />
+                <LeftMenuItem v-if="!item.children" :item="item" />
             </template>
-            <q-separator />
-            <q-expansion-item :label="t('moduleIndex.allModules')">
+            <QSeparator />
+            <QExpansionItem :label="t('moduleIndex.allModules')">
                 <template v-for="item in items" :key="item.name">
                     <template v-if="item.children">
-                        <left-menu-item-group :item="item" group="modules">
+                        <LeftMenuItemGroup :item="item" group="modules">
                             <template #side>
-                                <q-btn
+                                <QBtn
                                     v-if="item.isPinned === true"
                                     @click="togglePinned(item, $event)"
                                     icon="vn:pin_off"
@@ -160,9 +168,11 @@ async function togglePinned(item, event) {
                                     flat
                                     round
                                 >
-                                    <q-tooltip>{{ t('components.leftMenu.removeFromPinned') }}</q-tooltip>
-                                </q-btn>
-                                <q-btn
+                                    <QTooltip>
+                                        {{ t('components.leftMenu.removeFromPinned') }}
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn
                                     v-if="item.isPinned === false"
                                     @click="togglePinned(item, $event)"
                                     icon="vn:pin"
@@ -170,21 +180,23 @@ async function togglePinned(item, event) {
                                     flat
                                     round
                                 >
-                                    <q-tooltip>{{ t('components.leftMenu.addToPinned') }}</q-tooltip>
-                                </q-btn>
+                                    <QTooltip>
+                                        {{ t('components.leftMenu.addToPinned') }}
+                                    </QTooltip>
+                                </QBtn>
                             </template>
-                        </left-menu-item-group>
+                        </LeftMenuItemGroup>
                     </template>
                 </template>
-            </q-expansion-item>
-            <q-separator />
+            </QExpansionItem>
+            <QSeparator />
         </template>
         <template v-if="$props.source === 'card'">
             <template v-for="item in items" :key="item.name">
-                <left-menu-item v-if="!item.children" :item="item" />
+                <LeftMenuItem v-if="!item.children" :item="item" />
             </template>
         </template>
-    </q-list>
+    </QList>
 </template>
 
 <style>
diff --git a/src/components/LeftMenuItem.vue b/src/components/LeftMenuItem.vue
index 2713f434c..9b4876b15 100644
--- a/src/components/LeftMenuItem.vue
+++ b/src/components/LeftMenuItem.vue
@@ -14,13 +14,13 @@ const props = defineProps({
 const item = computed(() => props.item);
 </script>
 <template>
-    <q-item active-class="text-primary" :to="{ name: item.name }" clickable v-ripple>
-        <q-item-section avatar v-if="item.icon">
-            <q-icon :name="item.icon" />
-        </q-item-section>
-        <q-item-section avatar v-if="!item.icon">
-            <q-icon name="disabled_by_default" />
-        </q-item-section>
-        <q-item-section>{{ t(item.title) }}</q-item-section>
-    </q-item>
+    <QItem active-class="text-primary" :to="{ name: item.name }" clickable v-ripple>
+        <QItemSection avatar v-if="item.icon">
+            <QIcon :name="item.icon" />
+        </QItemSection>
+        <QItemSection avatar v-if="!item.icon">
+            <QIcon name="disabled_by_default" />
+        </QItemSection>
+        <QItemSection>{{ t(item.title) }}</QItemSection>
+    </QItem>
 </template>
diff --git a/src/components/LeftMenuItemGroup.vue b/src/components/LeftMenuItemGroup.vue
index 8305c2ec4..2b375becf 100644
--- a/src/components/LeftMenuItemGroup.vue
+++ b/src/components/LeftMenuItemGroup.vue
@@ -27,7 +27,7 @@ const isOpened = computed(() => {
 });
 </script>
 <template>
-    <q-expansion-item
+    <QExpansionItem
         :group="props.group"
         active-class="text-primary"
         :label="item.title"
@@ -36,16 +36,16 @@ const isOpened = computed(() => {
         :default-opened="isOpened"
     >
         <template #header>
-            <q-item-section avatar>
-                <q-icon :name="item.icon"></q-icon>
-            </q-item-section>
-            <q-item-section>{{ t(item.title) }}</q-item-section>
-            <q-item-section side>
+            <QItemSection avatar>
+                <QIcon :name="item.icon"></QIcon>
+            </QItemSection>
+            <QItemSection>{{ t(item.title) }}</QItemSection>
+            <QItemSection side>
                 <slot name="side" :item="item" />
-            </q-item-section>
+            </QItemSection>
         </template>
         <template v-for="section in item.children" :key="section.name">
-            <left-menu-item :item="section" />
+            <LeftMenuItem :item="section" />
         </template>
-    </q-expansion-item>
+    </QExpansionItem>
 </template>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 88f8856e6..7b7b1097f 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -19,9 +19,9 @@ onMounted(() => stateStore.setMounted());
 </script>
 
 <template>
-    <q-header class="bg-dark" color="white" elevated>
-        <q-toolbar class="q-py-sm q-px-md">
-            <q-btn
+    <QHeader class="bg-dark" color="white" elevated>
+        <QToolbar class="q-py-sm q-px-md">
+            <QBtn
                 @click="stateStore.toggleLeftDrawer()"
                 icon="menu"
                 class="q-mr-sm"
@@ -29,54 +29,54 @@ onMounted(() => stateStore.setMounted());
                 dense
                 flat
             >
-                <q-tooltip bottom anchor="bottom right">
+                <QTooltip bottom anchor="bottom right">
                     {{ t('globals.collapseMenu') }}
-                </q-tooltip>
-            </q-btn>
-            <router-link to="/">
-                <q-btn class="q-ml-xs" color="primary" v-if="$q.screen.gt.xs" flat round>
-                    <q-avatar square size="md">
-                        <q-img
+                </QTooltip>
+            </QBtn>
+            <RouterLink to="/">
+                <QBtn class="q-ml-xs" color="primary" flat round>
+                    <QAvatar square size="md">
+                        <QImg
                             src="~/assets/logo_icon.svg"
                             :alt="appName"
                             spinner-color="primary"
                         />
-                    </q-avatar>
-                    <q-tooltip bottom>
+                    </QAvatar>
+                    <QTooltip bottom>
                         {{ t('globals.backToDashboard') }}
-                    </q-tooltip>
-                </q-btn>
-            </router-link>
-            <q-toolbar-title shrink class="text-weight-bold" v-if="$q.screen.gt.xs">
+                    </QTooltip>
+                </QBtn>
+            </RouterLink>
+            <QToolbarTitle shrink class="text-weight-bold" v-if="$q.screen.gt.sm">
                 {{ appName }}
-                <q-badge label="Beta" align="top" />
-            </q-toolbar-title>
-            <q-space></q-space>
+                <QBadge label="Beta" align="top" />
+            </QToolbarTitle>
+            <QSpace />
             <div id="searchbar"></div>
-            <q-space></q-space>
+            <QSpace />
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                 <div id="actions-prepend"></div>
-                <q-btn id="pinnedModules" icon="apps" flat dense rounded>
-                    <q-tooltip bottom>
+                <QBtn id="pinnedModules" icon="apps" flat dense rounded>
+                    <QTooltip bottom>
                         {{ t('globals.pinnedModules') }}
-                    </q-tooltip>
+                    </QTooltip>
                     <PinnedModules />
-                </q-btn>
-                <q-btn rounded dense flat no-wrap id="user">
-                    <q-avatar size="lg">
-                        <q-img
+                </QBtn>
+                <QBtn rounded dense flat no-wrap id="user">
+                    <QAvatar size="lg">
+                        <QImg
                             :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
                             spinner-color="primary"
                         >
-                        </q-img>
-                    </q-avatar>
-                    <q-tooltip bottom>
+                        </QImg>
+                    </QAvatar>
+                    <QTooltip bottom>
                         {{ t('globals.userPanel') }}
-                    </q-tooltip>
+                    </QTooltip>
                     <UserPanel />
-                </q-btn>
+                </QBtn>
                 <div id="actions-append"></div>
             </div>
-        </q-toolbar>
-    </q-header>
+        </QToolbar>
+    </QHeader>
 </template>
diff --git a/src/components/PinnedModules.vue b/src/components/PinnedModules.vue
index 57490619b..2df7db390 100644
--- a/src/components/PinnedModules.vue
+++ b/src/components/PinnedModules.vue
@@ -14,10 +14,19 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
 </script>
 
 <template>
-    <q-menu anchor="bottom left" class="row q-pa-md q-col-gutter-lg" max-width="350px" max-height="400px">
+    <QMenu
+        anchor="bottom left"
+        class="row q-pa-md q-col-gutter-lg"
+        max-width="350px"
+        max-height="400px"
+    >
         <template v-if="pinnedModules.length">
-            <div v-for="item of pinnedModules" :key="item.title" class="row no-wrap q-pa-xs flex-item">
-                <q-btn
+            <div
+                v-for="item of pinnedModules"
+                :key="item.title"
+                class="row no-wrap q-pa-xs flex-item"
+            >
+                <QBtn
                     align="evenly"
                     padding="16px"
                     flat
@@ -31,15 +40,18 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
                     <div class="text-center text-primary button-text">
                         {{ t(item.title) }}
                     </div>
-                </q-btn>
+                </QBtn>
             </div>
         </template>
         <template v-else>
-            <div class="row no-wrap q-pa-xs flex-item text-center text-grey-5" style="min-width: 200px">
+            <div
+                class="row no-wrap q-pa-xs flex-item text-center text-grey-5"
+                style="min-width: 200px"
+            >
                 {{ t('globals.noPinnedModules') }}
             </div>
         </template>
-    </q-menu>
+    </QMenu>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index 56c574c70..a7504705a 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -70,7 +70,7 @@ async function saveDarkMode(value) {
 }
 
 async function saveLanguage(value) {
-    const query = `/Accounts/${user.value.id}`;
+    const query = `/VnUsers/${user.value.id}`;
     await axios.patch(query, {
         lang: value,
     });
@@ -84,11 +84,13 @@ function logout() {
 </script>
 
 <template>
-    <q-menu anchor="bottom left">
+    <QMenu anchor="bottom left">
         <div class="row no-wrap q-pa-md">
             <div class="column panel">
-                <div class="text-h6 q-mb-md">{{ t('components.userPanel.settings') }}</div>
-                <q-toggle
+                <div class="text-h6 q-mb-md">
+                    {{ t('components.userPanel.settings') }}
+                </div>
+                <QToggle
                     v-model="userLocale"
                     @update:model-value="saveLanguage"
                     :label="t(`globals.lang['${userLocale}']`)"
@@ -97,7 +99,7 @@ function logout() {
                     false-value="es"
                     true-value="en"
                 />
-                <q-toggle
+                <QToggle
                     v-model="darkMode"
                     @update:model-value="saveDarkMode"
                     :label="t(`globals.darkMode`)"
@@ -107,22 +109,22 @@ function logout() {
                 />
             </div>
 
-            <q-separator vertical inset class="q-mx-lg" />
+            <QSeparator vertical inset class="q-mx-lg" />
 
             <div class="column items-center panel">
-                <q-avatar size="80px">
-                    <q-img
+                <QAvatar size="80px">
+                    <QImg
                         :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
                         spinner-color="white"
                     />
-                </q-avatar>
+                </QAvatar>
 
                 <div class="text-subtitle1 q-mt-md">
                     <strong>{{ user.nickname }}</strong>
                 </div>
                 <div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.name }}</div>
 
-                <q-btn
+                <QBtn
                     id="logout"
                     color="orange"
                     flat
@@ -134,7 +136,7 @@ function logout() {
                 />
             </div>
         </div>
-    </q-menu>
+    </QMenu>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/common/SendEmailDialog.vue b/src/components/common/SendEmailDialog.vue
index 0ede6c441..e4fefe00f 100644
--- a/src/components/common/SendEmailDialog.vue
+++ b/src/components/common/SendEmailDialog.vue
@@ -40,31 +40,31 @@ async function confirm() {
 }
 </script>
 <template>
-    <q-dialog ref="dialogRef" persistent>
-        <q-card class="q-pa-sm">
-            <q-card-section class="row items-center q-pb-none">
+    <QDialog ref="dialogRef" persistent>
+        <QCard class="q-pa-sm">
+            <QCardSection class="row items-center q-pb-none">
                 <span class="text-h6 text-grey">{{ t('Send email notification') }}</span>
-                <q-space />
-                <q-btn icon="close" flat round dense v-close-popup />
-            </q-card-section>
-            <q-card-section class="row items-center">
+                <QSpace />
+                <QBtn icon="close" flat round dense v-close-popup />
+            </QCardSection>
+            <QCardSection class="row items-center">
                 {{ t('The notification will be sent to the following address') }}
-            </q-card-section>
-            <q-card-section class="q-pt-none">
-                <q-input dense v-model="address" rounded outlined autofocus />
-            </q-card-section>
-            <q-card-actions align="right">
-                <q-btn :label="t('globals.cancel')" color="primary" flat v-close-popup />
-                <q-btn
+            </QCardSection>
+            <QCardSection class="q-pt-none">
+                <QInput dense v-model="address" rounded outlined autofocus />
+            </QCardSection>
+            <QCardActions align="right">
+                <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+                <QBtn
                     :label="t('globals.confirm')"
                     color="primary"
                     :loading="isLoading"
                     @click="confirm"
                     unelevated
                 />
-            </q-card-actions>
-        </q-card>
-    </q-dialog>
+            </QCardActions>
+        </QCard>
+    </QDialog>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/common/VnSmsDialog.vue b/src/components/common/VnSmsDialog.vue
index ebd5b2a3b..ef25bbf4a 100644
--- a/src/components/common/VnSmsDialog.vue
+++ b/src/components/common/VnSmsDialog.vue
@@ -83,27 +83,27 @@ async function send() {
 </script>
 
 <template>
-    <q-dialog ref="dialogRef" persistent>
-        <q-card class="q-pa-sm">
-            <q-card-section class="row items-center q-pb-none">
+    <QDialog ref="dialogRef" persistent>
+        <QCard class="q-pa-sm">
+            <QCardSection class="row items-center q-pb-none">
                 <span class="text-h6 text-grey">
                     {{ t('Send SMS') }}
                 </span>
-                <q-space />
-                <q-btn icon="close" :disable="isLoading" flat round dense v-close-popup />
-            </q-card-section>
-            <q-card-section v-if="props.locale">
-                <q-banner class="bg-amber text-white" rounded dense>
+                <QSpace />
+                <QBtn icon="close" :disable="isLoading" flat round dense v-close-popup />
+            </QCardSection>
+            <QCardSection v-if="props.locale">
+                <QBanner class="bg-amber text-white" rounded dense>
                     <template #avatar>
-                        <q-icon name="warning" />
+                        <QIcon name="warning" />
                     </template>
                     <span
                         v-html="t('CustomerDefaultLanguage', { locale: t(props.locale) })"
                     ></span>
-                </q-banner>
-            </q-card-section>
-            <q-card-section class="q-pb-xs">
-                <q-select
+                </QBanner>
+            </QCardSection>
+            <QCardSection class="q-pb-xs">
+                <QSelect
                     :label="t('Language')"
                     :options="languages"
                     v-model="locale"
@@ -115,9 +115,9 @@ async function send() {
                     outlined
                     dense
                 />
-            </q-card-section>
-            <q-card-section class="q-pb-xs">
-                <q-input
+            </QCardSection>
+            <QCardSection class="q-pb-xs">
+                <QInput
                     :label="t('Phone')"
                     v-model="phone"
                     rounded
@@ -125,9 +125,9 @@ async function send() {
                     autofocus
                     dense
                 />
-            </q-card-section>
-            <q-card-section class="q-pb-xs">
-                <q-input
+            </QCardSection>
+            <QCardSection class="q-pb-xs">
+                <QInput
                     :label="t('Subject')"
                     v-model="subject"
                     rounded
@@ -135,9 +135,9 @@ async function send() {
                     autofocus
                     dense
                 />
-            </q-card-section>
-            <q-card-section class="q-mb-md" q-input>
-                <q-input
+            </QCardSection>
+            <QCardSection class="q-mb-md" q-input>
+                <QInput
                     :label="t('Message')"
                     v-model="message"
                     type="textarea"
@@ -151,7 +151,7 @@ async function send() {
                     autofocus
                 >
                     <template #append>
-                        <q-icon
+                        <QIcon
                             v-if="message !== ''"
                             name="close"
                             @click="message = ''"
@@ -159,30 +159,30 @@ async function send() {
                         />
                     </template>
                     <template #counter>
-                        <q-chip :color="color" dense>
+                        <QChip :color="color" dense>
                             {{ totalLength }}/{{ maxLength }}
-                        </q-chip>
+                        </QChip>
                     </template>
-                </q-input>
-            </q-card-section>
-            <q-card-actions align="right">
-                <q-btn
+                </QInput>
+            </QCardSection>
+            <QCardActions align="right">
+                <QBtn
                     :label="t('globals.cancel')"
                     color="primary"
                     :disable="isLoading"
                     flat
                     v-close-popup
                 />
-                <q-btn
+                <QBtn
                     :label="t('globals.confirm')"
                     @click="send()"
                     :loading="isLoading"
                     color="primary"
                     unelevated
                 />
-            </q-card-actions>
-        </q-card>
-    </q-dialog>
+            </QCardActions>
+        </QCard>
+    </QDialog>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/common/vnDiscount.vue b/src/components/common/vnDiscount.vue
new file mode 100644
index 000000000..37cbd478f
--- /dev/null
+++ b/src/components/common/vnDiscount.vue
@@ -0,0 +1,139 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { toCurrency } from 'filters/index';
+
+const { t } = useI18n();
+
+const props = defineProps({
+    quantity: {
+        type: Number,
+        required: true,
+    },
+    price: {
+        type: Number,
+        required: true,
+    },
+    discount: {
+        type: Number,
+        required: false,
+        default: 0,
+    },
+    mana: {
+        type: Number,
+        required: true,
+    },
+    promise: {
+        type: Function,
+        required: true,
+    },
+    data: {
+        type: Object,
+        required: false,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['onUpdate']);
+
+const discount = ref(0);
+let canceller;
+
+onMounted(() => {
+    if (props.discount) {
+        discount.value = props.discount;
+    }
+});
+
+const total = computed(() => {
+    const amount = props.price * props.quantity;
+    const appliedDiscount = (discount.value * amount) / 100;
+
+    return amount - appliedDiscount;
+});
+
+const newAmount = computed(() => `${t('New amount')}: ${toCurrency(total.value)}`);
+
+const isLoading = ref(false);
+async function save({ set }) {
+    isLoading.value = true;
+    const response = {
+        ...props.data,
+        ...{
+            discount: parseInt(discount.value),
+        },
+    };
+    if (props.promise) {
+        canceller = new AbortController();
+        Object.assign(response, { canceller });
+
+        await props.promise(response);
+    }
+
+    if (set) set();
+    emit('onUpdate', response);
+    isLoading.value = false;
+}
+
+function cancel({ cancel }) {
+    if (canceller) {
+        canceller.abort();
+        canceller = null;
+    }
+
+    discount.value = props.discount;
+    if (isLoading.value === true) isLoading.value = false;
+    if (cancel) cancel();
+}
+</script>
+
+<template>
+    <QPopupEdit
+        v-model="discount"
+        v-slot="scope"
+        :title="t('Update discount')"
+        @cancel="cancel"
+    >
+        <QBanner class="bg-primary text-center q-mb-md" rounded dense>
+            {{ t('Mana') }} {{ toCurrency(props.mana) }}
+        </QBanner>
+        <QInput
+            v-model="scope.value"
+            type="number"
+            dense
+            autofocus
+            @keyup.enter="save(scope)"
+            @update:model-value="discount = scope.value"
+            @focus="($event) => $event.target.select()"
+            min="0"
+            max="100"
+            :disable="isLoading"
+            :hint="newAmount"
+            :rules="[
+                (value) => value.length > 0 || t('Enter a value'),
+                (value) => (value >= 0 && value <= 100) || t('Invalid discount amount'),
+            ]"
+        />
+        <QCardActions class="q-px-none q-mt-sm" align="right">
+            <QBtn :label="t('Cancel')" color="primary" flat @click="cancel(scope)" />
+            <QBtn
+                :label="t('Update')"
+                color="primary"
+                :loading="isLoading"
+                unelevated
+                @click="save(scope)"
+            />
+        </QCardActions>
+    </QPopupEdit>
+</template>
+
+<i18n>
+es:
+    New amount: Nuevo importe
+    Update discount: Actualizar descuento
+    Mana: Maná
+    Enter a value: Introduce un valor
+    Invalid discount amount: Cantidad de descuento incorrecta
+    Cancel: Cancelar
+    Update: Actualizar
+</i18n>
diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 8c94b11d4..54123d087 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -48,24 +48,22 @@ watch(props, async () => {
     <div class="descriptor">
         <template v-if="entity">
             <div class="header bg-primary q-pa-sm">
-                <router-link :to="{ name: `${module}List` }">
-                    <q-btn round flat dense size="md" icon="view_list" color="white">
-                        <q-tooltip>
+                <RouterLink :to="{ name: `${module}List` }">
+                    <QBtn round flat dense size="md" icon="view_list" color="white">
+                        <QTooltip>
                             {{ t('components.cardDescriptor.mainList') }}
-                        </q-tooltip>
-                    </q-btn>
-                </router-link>
-                <router-link
-                    :to="{ name: `${module}Summary`, params: { id: entity.id } }"
-                >
-                    <q-btn round flat dense size="md" icon="launch" color="white">
-                        <q-tooltip>
+                        </QTooltip>
+                    </QBtn>
+                </RouterLink>
+                <RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
+                    <QBtn round flat dense size="md" icon="launch" color="white">
+                        <QTooltip>
                             {{ t('components.cardDescriptor.summary') }}
-                        </q-tooltip>
-                    </q-btn>
-                </router-link>
+                        </QTooltip>
+                    </QBtn>
+                </RouterLink>
 
-                <q-btn
+                <QBtn
                     v-if="slots.menu"
                     size="md"
                     icon="more_vert"
@@ -74,39 +72,39 @@ watch(props, async () => {
                     flat
                     dense
                 >
-                    <q-tooltip>
+                    <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}
-                    </q-tooltip>
-                    <q-menu>
-                        <q-list>
+                    </QTooltip>
+                    <QMenu>
+                        <QList>
                             <slot name="menu" :entity="entity" />
-                        </q-list>
-                    </q-menu>
-                </q-btn>
+                        </QList>
+                    </QMenu>
+                </QBtn>
             </div>
             <slot name="before" />
             <div class="body q-py-sm">
-                <q-list dense>
-                    <q-item-label header class="ellipsis text-h5" :lines="1">
+                <QList dense>
+                    <QItemLabel header class="ellipsis text-h5" :lines="1">
                         <slot name="description" :entity="entity">
                             <span>
                                 {{ entity.name }}
-                                <q-tooltip>{{ entity.name }}</q-tooltip>
+                                <QTooltip>{{ entity.name }}</QTooltip>
                             </span>
                         </slot>
-                    </q-item-label>
-                    <q-item dense>
-                        <q-item-label class="text-subtitle2" caption>
+                    </QItemLabel>
+                    <QItem dense>
+                        <QItemLabel class="text-subtitle2" caption>
                             #{{ entity.id }}
-                        </q-item-label>
-                    </q-item>
-                </q-list>
+                        </QItemLabel>
+                    </QItem>
+                </QList>
                 <slot name="body" :entity="entity" />
             </div>
             <slot name="after" />
         </template>
         <!-- Skeleton -->
-        <skeleton-descriptor v-if="!entity" />
+        <SkeletonDescriptor v-if="!entity" />
     </div>
 </template>
 
diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index 87b7002dc..b3fb9746b 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -41,8 +41,8 @@ watch(props, async () => {
 
 <template>
     <div class="summary container">
-        <q-card>
-            <skeleton-summary v-if="!entity" />
+        <QCard>
+            <SkeletonSummary v-if="!entity" />
             <template v-if="entity">
                 <div class="header bg-primary q-pa-sm q-mb-md">
                     <slot name="header" :entity="entity">
@@ -53,7 +53,7 @@ watch(props, async () => {
                     <slot name="body" :entity="entity" />
                 </div>
             </template>
-        </q-card>
+        </QCard>
     </div>
 </template>
 
diff --git a/src/components/ui/SkeletonDescriptor.vue b/src/components/ui/SkeletonDescriptor.vue
index 03623f4d1..470d47e49 100644
--- a/src/components/ui/SkeletonDescriptor.vue
+++ b/src/components/ui/SkeletonDescriptor.vue
@@ -1,19 +1,19 @@
 <template>
     <div id="descriptor-skeleton">
         <div class="col q-pl-sm q-pa-sm">
-            <q-skeleton type="text" square height="45px" />
-            <q-skeleton type="text" square height="18px" />
-            <q-skeleton type="text" square height="18px" />
-            <q-skeleton type="text" square height="18px" />
+            <QSkeleton type="text" square height="45px" />
+            <QSkeleton type="text" square height="18px" />
+            <QSkeleton type="text" square height="18px" />
+            <QSkeleton type="text" square height="18px" />
         </div>
 
-        <q-card-actions>
-            <q-skeleton size="40px" />
-            <q-skeleton size="40px" />
-            <q-skeleton size="40px" />
-            <q-skeleton size="40px" />
-            <q-skeleton size="40px" />
-        </q-card-actions>
+        <QCardActions>
+            <QSkeleton size="40px" />
+            <QSkeleton size="40px" />
+            <QSkeleton size="40px" />
+            <QSkeleton size="40px" />
+            <QSkeleton size="40px" />
+        </QCardActions>
     </div>
 </template>
 
diff --git a/src/components/ui/SkeletonForm.vue b/src/components/ui/SkeletonForm.vue
index f7c54ef77..d27934adf 100644
--- a/src/components/ui/SkeletonForm.vue
+++ b/src/components/ui/SkeletonForm.vue
@@ -2,31 +2,31 @@
     <div class="q-pa-md">
         <div class="row q-gutter-md q-mb-md">
             <div class="col">
-                <q-skeleton type="QInput" square />
+                <QSkeleton type="QInput" square />
             </div>
             <div class="col">
-                <q-skeleton type="QInput" square />
+                <QSkeleton type="QInput" square />
             </div>
         </div>
         <div class="row q-gutter-md q-mb-md">
             <div class="col">
-                <q-skeleton type="QInput" square />
+                <QSkeleton type="QInput" square />
             </div>
             <div class="col">
-                <q-skeleton type="QInput" square />
+                <QSkeleton type="QInput" square />
             </div>
         </div>
         <div class="row q-gutter-md q-mb-md">
             <div class="col">
-                <q-skeleton type="QInput" square />
+                <QSkeleton type="QInput" square />
             </div>
             <div class="col">
-                <q-skeleton type="QInput" square />
+                <QSkeleton type="QInput" square />
             </div>
         </div>
         <div class="row q-gutter-md">
-            <q-skeleton type="QBtn" />
-            <q-skeleton type="QBtn" />
+            <QSkeleton type="QBtn" />
+            <QSkeleton type="QBtn" />
         </div>
     </div>
 </template>
diff --git a/src/components/ui/SkeletonSummary.vue b/src/components/ui/SkeletonSummary.vue
index 34244d457..087dc32f9 100644
--- a/src/components/ui/SkeletonSummary.vue
+++ b/src/components/ui/SkeletonSummary.vue
@@ -1,47 +1,47 @@
 <template>
     <div class="header bg-primary q-pa-sm q-mb-md">
-        <q-skeleton type="rect" square />
+        <QSkeleton type="rect" square />
     </div>
     <div class="row q-pa-md q-col-gutter-md q-mb-md">
         <div class="col">
-            <q-skeleton type="rect" class="q-mb-md" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
+            <QSkeleton type="rect" class="q-mb-md" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
         </div>
         <div class="col">
-            <q-skeleton type="rect" class="q-mb-md" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
+            <QSkeleton type="rect" class="q-mb-md" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
         </div>
         <div class="col">
-            <q-skeleton type="rect" class="q-mb-md" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
+            <QSkeleton type="rect" class="q-mb-md" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
         </div>
         <div class="col">
-            <q-skeleton type="rect" class="q-mb-md" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
+            <QSkeleton type="rect" class="q-mb-md" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
         </div>
         <div class="col">
-            <q-skeleton type="rect" class="q-mb-md" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
-            <q-skeleton type="text" square />
+            <QSkeleton type="rect" class="q-mb-md" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
+            <QSkeleton type="text" square />
         </div>
     </div>
 </template>
diff --git a/src/components/ui/VnConfirm.vue b/src/components/ui/VnConfirm.vue
index f04e51224..a371db970 100644
--- a/src/components/ui/VnConfirm.vue
+++ b/src/components/ui/VnConfirm.vue
@@ -51,10 +51,10 @@ async function confirm() {
 }
 </script>
 <template>
-    <q-dialog ref="dialogRef" persistent>
-        <q-card class="q-pa-sm">
-            <q-card-section class="row items-center q-pb-none q-gutter-md">
-                <q-avatar
+    <QDialog ref="dialogRef" persistent>
+        <QCard class="q-pa-sm">
+            <QCardSection class="row items-center q-pb-none">
+                <QAvatar
                     :icon="icon"
                     color="primary"
                     text-color="white"
@@ -62,21 +62,21 @@ async function confirm() {
                     v-if="icon"
                 />
                 <span class="text-h6 text-grey">{{ title }}</span>
-                <q-space />
-                <q-btn icon="close" :disable="isLoading" flat round dense v-close-popup />
-            </q-card-section>
-            <q-card-section class="row items-center">
-                {{ message }}
-            </q-card-section>
-            <q-card-actions align="right">
-                <q-btn
+                <QSpace />
+                <QBtn icon="close" :disable="isLoading" flat round dense v-close-popup />
+            </QCardSection>
+            <QCardSection class="row items-center">
+                <span v-html="message"></span>
+            </QCardSection>
+            <QCardActions align="right">
+                <QBtn
                     :label="t('globals.cancel')"
                     color="primary"
                     :disable="isLoading"
                     flat
                     v-close-popup
                 />
-                <q-btn
+                <QBtn
                     :label="t('globals.confirm')"
                     color="primary"
                     :loading="isLoading"
@@ -84,9 +84,9 @@ async function confirm() {
                     unelevated
                     autofocus
                 />
-            </q-card-actions>
-        </q-card>
-    </q-dialog>
+            </QCardActions>
+        </QCard>
+    </QDialog>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index d361838e1..68b3a7676 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -99,21 +99,17 @@ function formatValue(value) {
 }
 </script>
 <template>
-    <q-form @submit="search">
-        <q-list dense>
-            <q-item class="q-mt-xs">
-                <q-item-section top>
-                    <q-item-label
-                        header
-                        lines="1"
-                        class="text-uppercase q-py-xs q-px-none"
-                    >
+    <QForm @submit="search">
+        <QList dense>
+            <QItem class="q-mt-xs">
+                <QItemSection top>
+                    <QItemLabel header lines="1" class="text-uppercase q-py-xs q-px-none">
                         {{ t('Applied filters') }}
-                    </q-item-label>
-                </q-item-section>
-                <q-item-section top side>
+                    </QItemLabel>
+                </QItemSection>
+                <QItemSection top side>
                     <div class="q-gutter-xs">
-                        <q-btn
+                        <QBtn
                             @click="clearFilters"
                             icon="filter_list_off"
                             color="primary"
@@ -123,9 +119,9 @@ function formatValue(value) {
                             flat
                             dense
                         >
-                            <q-tooltip>{{ t('Remove filters') }}</q-tooltip>
-                        </q-btn>
-                        <q-btn
+                            <QTooltip>{{ t('Remove filters') }}</QTooltip>
+                        </QBtn>
+                        <QBtn
                             @click="reload"
                             icon="refresh"
                             color="primary"
@@ -135,12 +131,12 @@ function formatValue(value) {
                             flat
                             dense
                         >
-                            <q-tooltip>{{ t('Refresh') }}</q-tooltip>
-                        </q-btn>
+                            <QTooltip>{{ t('Refresh') }}</QTooltip>
+                        </QBtn>
                     </div>
-                </q-item-section>
-            </q-item>
-            <q-item>
+                </QItemSection>
+            </QItem>
+            <QItem>
                 <div
                     v-if="tags.length === 0"
                     class="text-grey font-xs text-center full-width"
@@ -148,7 +144,7 @@ function formatValue(value) {
                     {{ t(`No filters applied`) }}
                 </div>
                 <div>
-                    <q-chip
+                    <QChip
                         v-for="chip of tags"
                         :key="chip.label"
                         @remove="remove(chip.label)"
@@ -164,14 +160,14 @@ function formatValue(value) {
                                 <span>"{{ chip.value }}"</span>
                             </div>
                         </slot>
-                    </q-chip>
+                    </QChip>
                 </div>
-            </q-item>
-            <q-separator />
+            </QItem>
+            <QSeparator />
             <template v-if="props.searchButton">
-                <q-item>
-                    <q-item-section class="q-py-sm">
-                        <q-btn
+                <QItem>
+                    <QItemSection class="q-py-sm">
+                        <QBtn
                             :label="t('Search')"
                             type="submit"
                             color="primary"
@@ -181,14 +177,14 @@ function formatValue(value) {
                             rounded
                             dense
                         />
-                    </q-item-section>
-                </q-item>
-                <q-separator />
+                    </QItemSection>
+                </QItem>
+                <QSeparator />
             </template>
-        </q-list>
+        </QList>
         <slot name="body" :params="userParams" :search-fn="search"></slot>
-    </q-form>
-    <q-inner-loading
+    </QForm>
+    <QInnerLoading
         :showing="isLoading"
         :label="t('globals.pleaseWait')"
         color="primary"
diff --git a/src/components/PaginateData.vue b/src/components/ui/VnPaginate.vue
similarity index 74%
rename from src/components/PaginateData.vue
rename to src/components/ui/VnPaginate.vue
index 8f07e44a9..2a5b878f5 100644
--- a/src/components/PaginateData.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -145,31 +145,31 @@ async function onLoad(...params) {
             </h5>
         </div>
         <div v-if="props.autoLoad && !store.data" class="card-list q-gutter-y-md">
-            <q-card class="card" v-for="$index in $props.limit" :key="$index">
-                <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
-                    <q-item-section class="q-pa-md">
-                        <q-skeleton type="rect" class="q-mb-md" square />
-                        <q-skeleton type="text" square />
-                        <q-skeleton type="text" class="q-mb-md" square />
-                        <q-skeleton type="text" square />
-                        <q-skeleton type="text" square />
-                    </q-item-section>
-                    <q-separator vertical />
-                    <q-card-actions vertical class="justify-between">
-                        <q-skeleton type="circle" class="q-mb-md" size="40px" />
-                        <q-skeleton type="circle" class="q-mb-md" size="40px" />
-                        <q-skeleton type="circle" class="q-mb-md" size="40px" />
-                    </q-card-actions>
-                </q-item>
-            </q-card>
+            <QCard class="card" v-for="$index in $props.limit" :key="$index">
+                <QItem v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
+                    <QItemSection class="q-pa-md">
+                        <QSkeleton type="rect" class="q-mb-md" square />
+                        <QSkeleton type="text" square />
+                        <QSkeleton type="text" class="q-mb-md" square />
+                        <QSkeleton type="text" square />
+                        <QSkeleton type="text" square />
+                    </QItemSection>
+                    <QSeparator vertical />
+                    <QCardActions vertical class="justify-between">
+                        <QSkeleton type="circle" class="q-mb-md" size="40px" />
+                        <QSkeleton type="circle" class="q-mb-md" size="40px" />
+                        <QSkeleton type="circle" class="q-mb-md" size="40px" />
+                    </QCardActions>
+                </QItem>
+            </QCard>
         </div>
     </div>
-    <q-infinite-scroll v-if="store.data" @load="onLoad" :offset="offset">
+    <QInfiniteScroll v-if="store.data" @load="onLoad" :offset="offset">
         <slot name="body" :rows="store.data"></slot>
         <div v-if="isLoading" class="info-row q-pa-md text-center">
-            <q-spinner color="orange" size="md" />
+            <QSpinner color="orange" size="md" />
         </div>
-    </q-infinite-scroll>
+    </QInfiniteScroll>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 47a7fc24c..453af78af 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -83,8 +83,8 @@ async function search() {
 </script>
 
 <template>
-    <q-form @submit="search">
-        <q-input
+    <QForm @submit="search">
+        <QInput
             id="searchbar"
             v-model="searchText"
             :placeholder="props.label"
@@ -93,32 +93,30 @@ async function search() {
             autofocus
         >
             <template #prepend>
-                <q-icon name="search" />
+                <QIcon name="search" />
             </template>
             <template #append>
-                <q-icon
+                <QIcon
                     v-if="searchText !== ''"
                     name="close"
                     @click="searchText = ''"
                     class="cursor-pointer"
                 />
 
-                <q-icon v-if="props.info" name="info" class="cursor-info">
-                    <q-tooltip>{{ props.info }}</q-tooltip>
-                </q-icon>
+                <QIcon v-if="props.info" name="info" class="cursor-info">
+                    <QTooltip>{{ props.info }}</QTooltip>
+                </QIcon>
             </template>
-        </q-input>
-    </q-form>
+        </QInput>
+    </QForm>
 </template>
 
 <style lang="scss" scoped>
-@media screen and (max-width: $breakpoint-xs-max) {
-    .q-field {
-        width: 250px;
-    }
+.q-field {
+    width: 250px;
 }
 
-@media screen and (min-width: $breakpoint-xs-max) {
+@media screen and (min-width: $breakpoint-sm-max) {
     .q-field {
         width: 400px;
     }
diff --git a/src/composables/getUrl.js b/src/composables/getUrl.js
new file mode 100644
index 000000000..63eb63c0b
--- /dev/null
+++ b/src/composables/getUrl.js
@@ -0,0 +1,19 @@
+import axios from 'axios';
+
+export async function getUrl(route, appName = 'salix') {
+    let url;
+    const env = process.env.NODE_ENV === 'development' ? 'dev' : process.env.NODE_ENV;
+    const filter = {
+        where: {and: [
+            {appName: appName},
+            {environment:  env}
+        ]}
+    };
+
+    await axios.get('Urls/findOne', {params: {filter}})
+        .then(res => {
+            url = res.data.url + route;
+        });
+
+    return url;
+}
diff --git a/src/composables/useRole.js b/src/composables/useRole.js
index b8da153d3..a781785a0 100644
--- a/src/composables/useRole.js
+++ b/src/composables/useRole.js
@@ -5,7 +5,7 @@ export function useRole() {
     const state = useState();
 
     async function fetch() {
-        const { data } = await axios.get('Accounts/acl');
+        const { data } = await axios.get('VnUsers/acl');
         const roles = data.roles.map((userRoles) => userRoles.role.name);
 
         const userData = {
diff --git a/src/css/fonts/icomoon.eot b/src/css/fonts/icomoon.eot
index cbe9d016e..f85902086 100644
Binary files a/src/css/fonts/icomoon.eot and b/src/css/fonts/icomoon.eot differ
diff --git a/src/css/fonts/icomoon.svg b/src/css/fonts/icomoon.svg
index 7465c400c..b4208013b 100644
--- a/src/css/fonts/icomoon.svg
+++ b/src/css/fonts/icomoon.svg
@@ -3,7 +3,7 @@
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>Generated by IcoMoon</metadata>
 <defs>
-<font id="icomoon" horiz-adv-x="1024">
+<font id="salixfont" horiz-adv-x="1024">
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
@@ -15,7 +15,7 @@
 <glyph unicode="&#xe905;" glyph-name="noPayMethod" d="M957.013-52.48l-945.493 945.067c-15.36 15.36-15.36 40.107 0 55.893 7.68 7.68 17.92 11.52 27.733 11.52 10.24 0 20.053-3.84 27.733-11.52l945.493-945.067c15.36-15.36 15.36-40.107 0-55.893-7.68-7.68-17.92-11.52-27.733-11.52-10.24 0-20.053 3.84-27.733 11.52zM346.88 728.747c17.493 10.24 37.12 15.36 56.747 20.053 63.573 14.507 128.427 16.213 193.28 10.667 34.56-2.987 69.12-8.107 102.4-19.627 13.227-4.693 26.027-11.52 37.973-18.773 7.68-4.693 8.107-8.533 0-13.227-11.947-7.253-24.747-14.080-37.973-18.773-35.84-12.8-73.387-17.92-110.933-20.48-20.053-1.28-40.107-1.707-60.587-2.56-45.653 1.28-90.88 5.12-135.253 17.067l55.893-55.893c29.867-3.413 59.733-4.693 90.027-4.693 70.827 0.427 140.373 7.68 207.36 37.12-1.28-19.627 2.56-38.827-2.987-57.6-0.853-3.413-4.267-6.4-7.253-8.533-13.227-9.813-28.16-15.36-43.947-20.053-37.12-11.093-75.52-16.213-113.92-18.773-18.773-1.28-37.12-1.707-55.893-1.28l43.947-43.947c61.013 2.133 120.747 11.947 179.2 36.267 0-15.36 0-31.147 0-46.933-18.347-1.28-36.267-2.56-54.187-4.693-31.147-3.413-62.293-8.107-91.733-18.347l36.267-36.267c54.187 12.8 109.227 15.36 164.693 13.227 40.96-1.707 81.92-5.973 121.6-17.067 16.64-4.693 33.28-10.24 47.787-20.053 11.093-7.68 11.093-10.667 0-17.92-18.773-12.8-40.107-18.773-61.867-24.32-45.227-10.667-90.88-14.507-147.627-14.507-14.080 0-29.44 0.427-45.653 1.707l46.080-46.080c4.267 0 8.107 0 12.373 0 70.4 0.427 139.52 7.253 205.653 36.267 0-17.067 0-33.707 0-50.347 0-6.827-4.267-11.52-9.813-15.36-16.64-11.52-35.84-17.493-55.040-22.613-28.587-7.253-57.6-11.52-86.613-14.080l40.533-40.533c37.973 5.12 75.52 14.507 111.787 31.147 0-18.773 0.427-37.12-0.427-55.467 0-2.987-2.987-7.253-5.547-9.387-8.96-5.973-18.347-11.52-28.16-15.787-6.827-2.987-14.080-5.12-21.333-7.253l34.987-34.987c14.080 5.547 27.733 12.373 40.107 21.76 16.213 12.373 24.747 28.587 24.747 49.92-0.427 70.4 0 141.227 0 211.627 0 18.773-6.4 35.413-21.76 46.507-11.947 8.96-25.173 16.64-38.827 22.613-39.253 16.213-80.64 23.040-122.453 26.88-16.64 1.707-32.853 2.133-50.347 3.413 0 2.987 0 5.973 0 8.533 0 65.707-0.427 131.413 0 197.12 0 18.347-6.827 33.28-19.627 45.227-8.533 8.107-18.773 14.507-29.44 20.053-30.72 15.36-64.427 23.040-98.133 28.16-69.12 10.667-138.667 11.093-208.213 1.28-33.28-4.693-65.707-11.947-96.427-25.6-8.533-3.84-16.64-8.107-23.893-13.227l32.427-31.573zM754.773 89.6c-3.413 0-6.827 0-10.24 0.427-48.64 1.707-96.427 7.253-142.933 23.040-12.8 4.267-25.6 10.24-37.973 16.64-20.48 11.093-28.587 20.907-37.12 41.387-20.48 1.28-40.96 2.133-61.013 4.267-20.48 2.133-40.533 5.973-61.013 9.387-4.267 0.853-7.253 0-10.24-2.133-54.187-40.533-114.773-56.747-181.76-48.64-96 11.093-178.773 83.627-203.947 177.92-37.547 141.227 52.907 282.027 197.12 306.773 5.973 0.853 11.52 1.707 17.493 2.133l45.227-45.227c-7.68 0.853-15.787 1.28-23.893 1.28-110.507 0-200.107-90.027-200.107-200.533 0-110.933 89.6-200.96 200.533-200.96 110.507-0.427 200.96 90.027 200.96 200.533 0 8.107-0.427 15.787-1.28 23.467l43.947-43.947c-0.427-8.533-0.853-17.067-1.28-25.6 8.96 0 17.92 0 26.88 0l112.64-112.64c-19.2 4.693-37.973 10.667-56.32 18.347 0-13.653 1.28-26.453-0.427-39.253-2.133-17.067 6.4-25.6 20.053-31.573 2.987-1.28 5.547-2.987 8.533-3.84 25.173-10.667 51.627-16.64 78.507-20.48 9.813-1.28 20.053-2.56 29.867-3.84l47.787-46.933zM524.373 284.16c-15.787 0.853-30.72 1.28-45.653 2.56-4.267 0.427-5.547-0.853-7.68-4.267-9.387-17.067-19.2-34.133-28.587-50.773-1.28-2.56-3.413-4.693-6.4-8.96 30.293-2.56 59.307-5.12 88.32-7.68 0 23.893 0 46.080 0 69.12zM184.32 434.347c26.027 37.973 73.387 53.333 116.907 38.4 4.693-1.707 9.387-2.56 14.080-2.133 10.24 1.28 17.493 9.387 18.347 19.2 1.28 10.667-4.267 19.627-15.36 23.893-69.547 27.307-151.893-5.973-183.040-74.24-3.84-8.107-7.253-12.373-17.067-11.947-11.093 0.853-19.627-8.533-20.907-19.2-0.853-11.52 5.547-20.907 16.64-23.893 2.133-0.427 4.267-0.853 6.827-1.28 0-5.973 0-11.52 0-17.493-1.707-0.427-2.987-0.427-4.693-0.853-12.373-2.133-20.053-11.52-19.2-23.893 0.853-11.093 9.813-19.627 21.76-20.053 2.56 0 5.12-0.427 7.68 0 4.267 0.427 6.4-0.853 8.107-5.12 9.813-22.187 24.747-40.96 43.947-55.040 43.093-31.573 89.6-37.973 139.947-20.48 7.68 2.56 12.8 7.68 14.507 15.787 2.133 8.533 0 16.213-6.827 22.187-7.253 6.4-15.36 6.827-24.32 3.84-43.093-13.653-79.787-3.84-110.933 28.587-2.987 2.987-5.12 6.4-8.533 11.093 3.84 0 6.4 0 8.533 0 30.72 0 61.013 0 91.733 0 11.093 0 19.2 5.547 22.187 14.507 5.12 14.933-5.547 29.867-22.187 29.867-36.267 0-72.107 0-108.373 0-2.56 0-5.12 0-8.107 0 0 6.4 0 12.373 0 18.347 3.413 0 5.973 0 8.96 0 39.253 0 78.507 0 117.76 0 11.947 0 20.907 6.827 23.040 17.067 3.413 14.080-7.253 27.307-22.187 27.307-35.84 0-71.253 0-107.093 0-2.133 0-4.267 0-7.253 0 2.987 1.707 3.84 3.413 5.12 5.547z" />
 <glyph unicode="&#xe906;" glyph-name="preserved" d="M512-64c16.213 0 28.587 13.227 28.587 28.587v215.040h2.987c73.387 2.133 130.987 25.173 170.667 67.84 68.267 72.107 62.72 177.493 60.16 197.973v0c-1.28 15.36-14.080 28.16-29.44 29.44-7.253 0.853-33.707 2.987-67.84-2.133l-12.373-2.133 11.093 6.827c14.080 8.96 26.453 19.2 37.547 30.72 68.267 72.107 62.72 177.493 60.16 197.973-1.28 15.36-14.080 28.16-29.44 29.44-14.080 1.28-64 4.267-117.76-14.507l-4.267-1.28 0.853 5.12c2.987 15.36 4.267 31.573 4.267 46.933-2.56 98.56-78.933 168.107-93.867 180.48-12.373 10.24-29.44 10.24-41.813 0-15.36-11.947-92.16-81.067-94.72-180.48-0.853-16.213 0.853-31.573 4.267-47.787l0.853-5.12-4.267 1.28c-53.76 19.2-104.533 16.213-118.613 14.507-15.36-1.28-28.16-14.080-29.44-29.44-2.133-20.48-8.107-125.867 60.16-197.973 11.093-11.093 22.613-21.333 36.693-30.293l10.24-6.827-12.373 2.133c-16.213 2.133-30.293 2.987-41.387 2.987s-19.2-0.853-23.467-0.853c-15.36-1.28-28.16-14.080-29.44-29.44-2.133-20.48-8.107-125.013 60.16-197.973 39.68-41.813 97.28-64.853 169.813-67.84h2.987v-215.040c0.427-14.933 12.8-28.16 29.013-28.16zM715.093 418.133h2.987v-2.987c-0.853-30.72-7.253-87.467-45.653-128-28.587-30.72-71.253-46.933-127.147-49.92h-2.987v2.987c2.133 58.88 20.053 103.68 51.627 133.12 38.827 37.973 92.587 44.8 121.173 44.8zM713.813 679.253h2.987v-2.987c-0.853-30.72-7.253-87.467-45.653-128-28.587-30.293-71.253-46.933-127.147-49.493h-2.987v2.987c2.133 58.88 20.053 103.68 51.627 133.12 39.253 37.12 93.013 43.52 121.173 44.373zM454.4 770.56c1.28 55.040 35.413 99.413 55.893 120.747l2.133 2.133 2.133-2.133c20.053-21.333 53.76-65.707 55.893-120.747 1.28-43.52-17.493-87.040-55.040-128.853l-2.133-2.133-2.133 2.133c-39.68 41.813-58.027 85.333-56.747 128.853zM351.573 548.267c-37.547 39.68-44.8 97.28-45.653 128v2.987h2.987c34.56-0.853 84.053-8.96 121.6-43.947v0c31.573-29.44 48.64-74.24 51.627-133.12v-2.987h-2.987c-56.32 2.133-98.987 18.773-127.573 49.067zM479.573 237.653c-55.893 2.133-98.56 19.2-127.147 49.493-37.547 39.68-44.8 97.28-45.653 128v2.987h2.987c28.587-0.853 82.347-7.253 121.6-43.947 31.573-29.44 48.64-74.24 51.627-133.12v-2.987h-3.413zM471.467 416.427c-8.96 8.107-18.347 15.36-29.44 22.613l-11.093 6.827 12.373-1.28c21.333-2.987 41.813-3.84 64-2.987 0.853 0 1.28 0 2.133 0h2.56c0.853 0 1.28 0 2.133 0 5.12 0 9.387 0 14.507 0 17.493 0 35.413 1.28 52.053 3.84l13.227 2.133-11.093-7.253c-11.093-6.827-20.48-14.507-29.44-22.613-14.507-14.080-28.16-31.573-38.827-51.627l-2.133-4.267-2.133 4.267c-10.667 18.773-23.893 36.267-38.827 50.347z" />
 <glyph unicode="&#xe907;" glyph-name="greenery" d="M871.68 419.84c-8.96 111.36-82.773 224.853-219.733 337.493-110.507 90.88-232.107 155.307-279.467 178.347l-0.853 1.28h-0.853l-0.853 0.853c-11.093 5.973-18.347 8.96-20.48 10.24l-27.307 11.947-14.080-26.88c-168.96-333.227-201.387-578.56-96-728.32 93.013-132.267 263.68-152.32 356.267-152.32 14.507 0 28.587 0.853 40.96 1.28h1.28l0.853-1.28c22.613-40.107 44.8-75.52 66.56-104.533 5.12-6.4 12.373-11.093 21.333-11.52 8.96-0.853 17.493 2.133 24.32 7.253l0.853 0.853c12.373 11.093 14.080 29.44 3.84 42.24-19.2 25.6-39.68 56.32-59.307 92.16l-1.28 2.133 2.133 1.28c143.787 103.253 211.2 216.747 201.813 337.493zM575.147 115.627c-1.28 0-2.987 0-5.12 0-190.293 0-273.92 78.507-305.92 125.013-81.067 116.48-59.307 319.573 64.427 587.52l2.987 7.253 2.133-7.253c43.093-165.547 131.84-477.867 243.627-708.267l2.133-3.84-4.267-0.427zM641.707 139.52l-2.987-2.133-1.28 2.987c-109.653 224-199.68 539.307-243.627 706.987l-1.707 5.973 5.973-2.987c67.413-37.12 165.547-97.28 248.747-172.8 101.12-90.027 155.307-178.773 161.707-263.68 7.253-93.44-49.067-186.453-166.827-274.347z" />
-<glyph unicode="&#xe908;" glyph-name="planta" d="M826.88 730.453l3.413 0.853c17.92 2.987 36.693 6.4 55.040 9.813 21.76 4.267 49.493 9.813 77.227 18.773 22.187 6.827 42.667 20.053 58.453 31.147l2.987 2.987-2.133 3.413c-0.853 1.28-1.28 2.133-2.133 2.133-24.32 25.173-54.187 54.187-87.893 77.227-60.16 40.96-119.467 60.587-180.907 59.307-67.413-1.28-125.867-27.733-175.36-78.080-26.453-27.307-47.36-59.733-60.587-96.853l-2.987-6.827-2.987 6.827c-4.693 14.507-11.947 29.44-20.907 44.373-27.307 47.787-64.853 83.2-111.36 105.387-62.72 29.867-129.28 33.28-199.68 8.96-35.413-12.373-69.547-31.147-103.68-58.453-27.307-20.907-50.347-42.24-70.4-66.133l-2.987-2.56 3.413-2.133c31.147-20.907 40.533-27.307 80.213-37.547 36.267-9.813 72.96-16.213 109.227-21.76 10.24-2.133 21.76-3.413 32-5.547 35.413-6.4 77.227-14.080 116.907-25.173h2.133v-5.547h-2.987c-17.92 2.133-36.267 2.133-55.893 0-65.28-6.4-120.32-32-163.413-75.947-27.307-27.733-46.507-60.587-59.733-101.12s-17.493-86.187-12.373-139.093c2.987-32.853 9.813-64 20.053-101.12 0.853-2.133 1.28-4.693 4.693-5.547h1.28l1.28 0.853c11.947 5.547 25.173 11.947 36.693 19.627 25.173 16.213 45.227 38.4 62.72 57.173 17.92 20.053 36.267 40.96 53.76 61.44l25.6 29.867 0.853-5.547c0.853-4.693 1.28-8.96 2.133-14.080l26.453-188.587c9.813-64 20.053-128 30.72-188.16 2.987-17.493 11.093-31.147 25.6-43.093 14.080-11.093 30.72-19.627 54.187-26.453 36.693-11.093 77.227-16.213 123.307-15.36 34.987 0.853 64.853 4.267 92.587 10.24 20.907 4.693 45.227 12.373 67.413 27.733 17.493 12.373 26.453 25.173 28.587 40.96 3.413 20.053 6.4 40.96 8.96 61.44 2.133 12.373 3.413 25.6 5.547 38.4 4.267 26.453 7.68 53.76 11.947 80.213l13.227 89.6c5.547 38.4 11.093 77.227 17.493 115.627 0 2.133 0.853 3.413 0.853 5.547 0 1.28 0.853 3.413 0.853 4.693l0.853 5.547 32.853-38.4c24.32-28.587 49.92-58.453 77.227-85.76 18.773-17.92 40.533-32.853 69.547-46.080l2.133-0.853 3.413 2.987v1.28c8.96 32.853 19.627 76.373 22.187 122.453 2.133 43.093-2.133 81.493-13.227 117.76-12.373 41.387-32.853 76.8-61.013 105.387-36.267 36.693-82.773 61.44-136.96 71.68-22.187 4.267-46.080 5.547-70.4 4.267-3.413 0-6.4-0.853-9.813-0.853l-0.853 4.693c18.773 4.693 36.693 8.96 50.773 12.373 31.147 8.533 63.147 14.080 93.867 19.627zM487.253 536.32v0 0c0.853 0 68.267-12.373 85.76 27.733 6.827 9.813 15.36 14.507 24.32 15.36v0h0.853c2.133 0 3.413-0.853 5.547-1.28 19.627-4.693 35.413-15.36 48.213-23.467 14.080-9.813 38.4-29.867 49.493-41.813l2.133-2.987-2.987-1.28c-11.947-6.4-24.32-10.24-35.413-14.080-28.587-8.533-59.733-14.080-98.133-17.493-17.92-1.28-36.267-2.133-55.893-2.133-15.36 0-30.72 0.853-46.507 1.28-49.493 2.987-89.173 9.813-124.587 22.187-6.4 2.133-13.227 4.693-19.627 8.533l-2.987 1.28 2.133 2.987c7.68 8.533 16.64 16.213 26.453 24.32 17.92 15.36 38.4 30.72 62.72 39.68 4.693 2.133 11.947 4.267 19.627 5.547 7.68 0 19.627-5.547 34.133-29.44 3.413-8.107 12.373-13.653 24.747-14.933zM211.627 785.067l-25.6 4.267c-28.587 4.693-58.027 9.387-87.040 17.067l-5.12 1.28 4.267 3.413c1.28 0.853 2.987 2.133 4.267 2.987l3.413 2.987c31.147 24.32 62.72 41.813 95.573 52.053 17.493 5.547 34.987 8.96 52.053 9.813 57.173 4.267 107.093-15.36 150.187-57.173 29.867-29.44 49.92-65.28 60.587-108.8l1.28-6.827-5.547 4.267c-35.413 25.173-75.093 37.547-113.493 48.213-44.373 11.093-90.453 18.773-134.827 26.453zM196.267 462.080l-5.547-6.4c-5.547-6.827-11.947-14.080-17.493-20.053-20.053-23.467-40.533-47.36-61.867-68.267l-3.413-3.413-1.28 4.693c-0.853 2.987-0.853 5.547-1.28 8.533l-0.853 4.693c-4.693 38.4-2.987 75.093 6.4 110.080 20.053 78.507 84.053 135.253 166.4 146.347 34.987 4.693 69.12 2.133 101.547-8.96l6.827-2.133-6.4-2.987c-31.147-14.080-57.173-34.133-77.227-52.053-38.827-33.707-72.96-72.533-105.813-110.080zM709.973 443.733v0c-1.28-8.96-2.987-17.92-3.413-26.453l-23.467-159.573c-4.693-29.867-8.96-59.733-13.227-90.453l-2.987-19.627c-4.267-29.867-8.96-59.307-12.373-88.32-0.853-6.827-4.267-11.947-10.24-15.36-14.080-8.533-29.867-14.507-52.053-18.773-17.493-3.413-36.267-5.547-60.587-6.827-6.827-0.853-14.080-0.853-20.907-0.853-33.28 0-66.987 4.693-98.987 14.080-10.24 2.987-20.907 7.68-31.147 14.080-4.693 2.987-6.827 6.827-8.533 12.373-7.68 42.667-15.36 89.173-24.32 145.493-8.533 55.040-16.64 110.507-25.173 165.547l-7.68 51.627c-1.28 7.68-2.133 14.507-3.413 22.187l-0.853 5.547 4.267-1.28c55.893-19.627 116.053-28.587 196.267-28.587h1.28c78.080 0 139.947 9.813 195.413 30.72l4.267 1.28-2.133-6.827zM705.707 640c41.813 1.28 80.64-8.533 114.347-27.733 48.64-29.44 80.64-73.813 93.44-133.12 4.693-23.467 6.827-48.213 6.4-71.68-0.853-11.947-1.28-25.6-4.267-40.533l-0.853-4.693-3.413 3.413c-4.267 4.267-8.96 8.533-13.227 13.227-14.080 16.213-27.733 31.147-40.96 47.36l-2.987 3.413c-23.040 26.453-47.36 54.187-70.827 80.64-22.187 24.32-52.053 56.32-88.32 83.627-13.227 9.813-31.147 22.187-51.627 31.147l-6.4 2.987 6.827 2.133c20.053 5.547 40.96 9.387 61.867 9.813zM660.48 753.493v0c-24.32-6.827-52.053-16.213-78.080-30.72v0c0 0-1.28-0.853-2.987-2.133-3.413-2.133-6.4-3.413-9.813-5.547s-7.68-4.693-11.947-7.68v2.133c6.827 29.44 17.493 51.627 21.76 59.307 23.040 43.093 57.173 75.093 104.533 96 16.64 7.68 36.267 11.947 58.453 14.080 4.693 0.853 9.813 0.853 14.507 0.853 34.133 0 69.12-8.96 106.667-27.733 20.053-10.24 39.68-23.040 59.733-40.533l4.267-3.413-4.693-1.28c-23.467-6.4-48.213-10.24-74.667-15.36-11.093-2.133-21.76-3.413-32.853-5.547-51.627-9.387-104.533-17.92-154.88-32.427z" />
+<glyph unicode="&#xe908;" glyph-name="plant" d="M826.88 730.453l3.413 0.853c17.92 2.987 36.693 6.4 55.040 9.813 21.76 4.267 49.493 9.813 77.227 18.773 22.187 6.827 42.667 20.053 58.453 31.147l2.987 2.987-2.133 3.413c-0.853 1.28-1.28 2.133-2.133 2.133-24.32 25.173-54.187 54.187-87.893 77.227-60.16 40.96-119.467 60.587-180.907 59.307-67.413-1.28-125.867-27.733-175.36-78.080-26.453-27.307-47.36-59.733-60.587-96.853l-2.987-6.827-2.987 6.827c-4.693 14.507-11.947 29.44-20.907 44.373-27.307 47.787-64.853 83.2-111.36 105.387-62.72 29.867-129.28 33.28-199.68 8.96-35.413-12.373-69.547-31.147-103.68-58.453-27.307-20.907-50.347-42.24-70.4-66.133l-2.987-2.56 3.413-2.133c31.147-20.907 40.533-27.307 80.213-37.547 36.267-9.813 72.96-16.213 109.227-21.76 10.24-2.133 21.76-3.413 32-5.547 35.413-6.4 77.227-14.080 116.907-25.173h2.133v-5.547h-2.987c-17.92 2.133-36.267 2.133-55.893 0-65.28-6.4-120.32-32-163.413-75.947-27.307-27.733-46.507-60.587-59.733-101.12s-17.493-86.187-12.373-139.093c2.987-32.853 9.813-64 20.053-101.12 0.853-2.133 1.28-4.693 4.693-5.547h1.28l1.28 0.853c11.947 5.547 25.173 11.947 36.693 19.627 25.173 16.213 45.227 38.4 62.72 57.173 17.92 20.053 36.267 40.96 53.76 61.44l25.6 29.867 0.853-5.547c0.853-4.693 1.28-8.96 2.133-14.080l26.453-188.587c9.813-64 20.053-128 30.72-188.16 2.987-17.493 11.093-31.147 25.6-43.093 14.080-11.093 30.72-19.627 54.187-26.453 36.693-11.093 77.227-16.213 123.307-15.36 34.987 0.853 64.853 4.267 92.587 10.24 20.907 4.693 45.227 12.373 67.413 27.733 17.493 12.373 26.453 25.173 28.587 40.96 3.413 20.053 6.4 40.96 8.96 61.44 2.133 12.373 3.413 25.6 5.547 38.4 4.267 26.453 7.68 53.76 11.947 80.213l13.227 89.6c5.547 38.4 11.093 77.227 17.493 115.627 0 2.133 0.853 3.413 0.853 5.547 0 1.28 0.853 3.413 0.853 4.693l0.853 5.547 32.853-38.4c24.32-28.587 49.92-58.453 77.227-85.76 18.773-17.92 40.533-32.853 69.547-46.080l2.133-0.853 3.413 2.987v1.28c8.96 32.853 19.627 76.373 22.187 122.453 2.133 43.093-2.133 81.493-13.227 117.76-12.373 41.387-32.853 76.8-61.013 105.387-36.267 36.693-82.773 61.44-136.96 71.68-22.187 4.267-46.080 5.547-70.4 4.267-3.413 0-6.4-0.853-9.813-0.853l-0.853 4.693c18.773 4.693 36.693 8.96 50.773 12.373 31.147 8.533 63.147 14.080 93.867 19.627zM487.253 536.32v0 0c0.853 0 68.267-12.373 85.76 27.733 6.827 9.813 15.36 14.507 24.32 15.36v0h0.853c2.133 0 3.413-0.853 5.547-1.28 19.627-4.693 35.413-15.36 48.213-23.467 14.080-9.813 38.4-29.867 49.493-41.813l2.133-2.987-2.987-1.28c-11.947-6.4-24.32-10.24-35.413-14.080-28.587-8.533-59.733-14.080-98.133-17.493-17.92-1.28-36.267-2.133-55.893-2.133-15.36 0-30.72 0.853-46.507 1.28-49.493 2.987-89.173 9.813-124.587 22.187-6.4 2.133-13.227 4.693-19.627 8.533l-2.987 1.28 2.133 2.987c7.68 8.533 16.64 16.213 26.453 24.32 17.92 15.36 38.4 30.72 62.72 39.68 4.693 2.133 11.947 4.267 19.627 5.547 7.68 0 19.627-5.547 34.133-29.44 3.413-8.107 12.373-13.653 24.747-14.933zM211.627 785.067l-25.6 4.267c-28.587 4.693-58.027 9.387-87.040 17.067l-5.12 1.28 4.267 3.413c1.28 0.853 2.987 2.133 4.267 2.987l3.413 2.987c31.147 24.32 62.72 41.813 95.573 52.053 17.493 5.547 34.987 8.96 52.053 9.813 57.173 4.267 107.093-15.36 150.187-57.173 29.867-29.44 49.92-65.28 60.587-108.8l1.28-6.827-5.547 4.267c-35.413 25.173-75.093 37.547-113.493 48.213-44.373 11.093-90.453 18.773-134.827 26.453zM196.267 462.080l-5.547-6.4c-5.547-6.827-11.947-14.080-17.493-20.053-20.053-23.467-40.533-47.36-61.867-68.267l-3.413-3.413-1.28 4.693c-0.853 2.987-0.853 5.547-1.28 8.533l-0.853 4.693c-4.693 38.4-2.987 75.093 6.4 110.080 20.053 78.507 84.053 135.253 166.4 146.347 34.987 4.693 69.12 2.133 101.547-8.96l6.827-2.133-6.4-2.987c-31.147-14.080-57.173-34.133-77.227-52.053-38.827-33.707-72.96-72.533-105.813-110.080zM709.973 443.733v0c-1.28-8.96-2.987-17.92-3.413-26.453l-23.467-159.573c-4.693-29.867-8.96-59.733-13.227-90.453l-2.987-19.627c-4.267-29.867-8.96-59.307-12.373-88.32-0.853-6.827-4.267-11.947-10.24-15.36-14.080-8.533-29.867-14.507-52.053-18.773-17.493-3.413-36.267-5.547-60.587-6.827-6.827-0.853-14.080-0.853-20.907-0.853-33.28 0-66.987 4.693-98.987 14.080-10.24 2.987-20.907 7.68-31.147 14.080-4.693 2.987-6.827 6.827-8.533 12.373-7.68 42.667-15.36 89.173-24.32 145.493-8.533 55.040-16.64 110.507-25.173 165.547l-7.68 51.627c-1.28 7.68-2.133 14.507-3.413 22.187l-0.853 5.547 4.267-1.28c55.893-19.627 116.053-28.587 196.267-28.587h1.28c78.080 0 139.947 9.813 195.413 30.72l4.267 1.28-2.133-6.827zM705.707 640c41.813 1.28 80.64-8.533 114.347-27.733 48.64-29.44 80.64-73.813 93.44-133.12 4.693-23.467 6.827-48.213 6.4-71.68-0.853-11.947-1.28-25.6-4.267-40.533l-0.853-4.693-3.413 3.413c-4.267 4.267-8.96 8.533-13.227 13.227-14.080 16.213-27.733 31.147-40.96 47.36l-2.987 3.413c-23.040 26.453-47.36 54.187-70.827 80.64-22.187 24.32-52.053 56.32-88.32 83.627-13.227 9.813-31.147 22.187-51.627 31.147l-6.4 2.987 6.827 2.133c20.053 5.547 40.96 9.387 61.867 9.813zM660.48 753.493v0c-24.32-6.827-52.053-16.213-78.080-30.72v0c0 0-1.28-0.853-2.987-2.133-3.413-2.133-6.4-3.413-9.813-5.547s-7.68-4.693-11.947-7.68v2.133c6.827 29.44 17.493 51.627 21.76 59.307 23.040 43.093 57.173 75.093 104.533 96 16.64 7.68 36.267 11.947 58.453 14.080 4.693 0.853 9.813 0.853 14.507 0.853 34.133 0 69.12-8.96 106.667-27.733 20.053-10.24 39.68-23.040 59.733-40.533l4.267-3.413-4.693-1.28c-23.467-6.4-48.213-10.24-74.667-15.36-11.093-2.133-21.76-3.413-32.853-5.547-51.627-9.387-104.533-17.92-154.88-32.427z" />
 <glyph unicode="&#xe909;" glyph-name="handmade" d="M984.32 238.080c11.52 48.213 14.507 93.013 11.093 136.96-4.267 40.96-14.507 75.947-32.853 108.373-30.72 55.040-77.653 93.44-139.093 113.493-7.253 2.133-14.507 4.267-22.613 5.973l-13.227 2.987 14.080 2.133c10.24 1.28 20.48 3.84 29.867 5.12l5.12 0.853c32 5.973 65.28 11.52 97.28 21.333 24.32 7.253 45.227 19.627 64.427 32.853l5.973 4.267-5.12 5.12c-4.267 4.267-9.387 9.387-14.080 14.080-14.507 14.507-29.44 29.44-45.227 42.24-57.173 46.080-109.653 70.4-167.68 77.653-41.813 5.12-81.92 0.853-118.613-14.080-11.52-4.267-22.613-10.24-30.72-14.507l-2.133-1.28-1.28 2.133c-8.96 16.213-20.48 30.72-35.84 43.947-29.867 24.747-65.707 36.693-107.52 33.707h-2.987l-0.853 2.987c-7.253 20.48-19.2 38.827-35.84 55.040-49.493 46.507-123.307 54.187-180.907 17.493-24.32-15.36-42.667-35.84-54.187-62.293l-1.28-3.84-3.84 0.853c-14.080 2.133-27.733 2.133-43.093 0-35.84-4.267-69.547-23.467-93.44-52.48-25.6-31.573-36.693-70.827-31.573-111.787 2.987-24.747 11.52-46.933 25.6-66.56 0-0.853 0.853-0.853 0.853-0.853l0.853-1.28-1.28-2.133c-24.747-30.72-35.84-65.28-32.853-103.68 3.84-49.92 26.88-89.173 70.4-116.48 25.6-16.64 56.32-23.467 90.027-20.48l2.133 0.853 0.853-2.133c8.96-24.747 23.467-45.227 42.24-61.44 24.747-21.333 52.48-32 82.773-34.56 2.133 0 2.987-0.853 5.12-3.84l47.36-64.427c18.347-24.32 36.693-49.92 55.040-74.667 3.84-5.12 3.84-8.107 2.133-11.52-2.987-6.4-4.267-14.080-6.4-19.627v-0.853c-0.853-2.987-1.28-5.973-2.133-8.96l-14.507-47.36c-9.387-29.867-18.347-60.16-27.733-89.173-3.84-11.52-2.133-21.76 2.987-29.867 5.973-8.107 15.36-11.52 27.733-11.52h176.213c7.253 0 14.507 0 21.76 0 19.627 0 39.68 0 59.307 0 8.96 0 16.213 2.133 21.76 7.253 12.373 11.093 11.093 24.747 7.253 35.84l-13.227 43.093c-12.373 40.96-24.747 82.773-37.12 125.013-0.853 3.84-0.853 5.973 1.28 9.387 31.573 49.92 62.293 100.267 93.013 149.333l37.973 60.587c1.28 2.133 2.987 5.12 5.12 7.253l2.133 2.987 57.6-66.56c22.613-26.453 46.933-54.187 72.96-78.080 18.347-16.64 40.107-27.733 61.44-37.973l6.4-2.987 5.12 21.333c1.28 8.107 3.413 16.213 5.973 24.747zM610.133 630.187c17.493 25.6 26.453 54.187 25.6 85.76 0 3.84 0.853 5.12 4.267 7.253 37.973 24.32 76.8 33.707 120.747 29.44 39.68-4.267 76.8-19.627 116.907-47.36 5.12-3.84 11.093-7.253 16.64-12.373l4.267-3.84-5.12-1.28c-11.093-2.987-21.76-5.12-31.573-6.4-22.613-4.267-44.8-8.107-66.56-11.52-29.44-5.12-59.307-10.24-89.173-16.64-25.6-5.12-59.307-13.227-93.013-25.6l-8.107-2.987 5.12 5.547zM320.427 356.693c-21.333 0-41.813 8.107-57.6 24.32-16.213 15.36-25.6 34.987-27.733 60.16-0.853 5.12-0.853 9.387-1.28 14.507l-1.28 14.080h-6.4c-8.96-0.853-16.64-4.267-24.32-7.253l-2.987-1.28c-21.76-8.96-46.933-8.107-67.84 2.133-21.76 10.24-39.68 29.867-46.933 53.333-11.52 33.707 0.853 72.533 30.293 94.72l29.44 21.76-3.84 5.12c-4.267 6.4-10.24 11.093-16.213 15.36l-0.853 0.853c-1.28 1.28-3.84 2.987-5.12 3.84-21.76 18.347-32.853 41.813-32 67.84 0.853 38.827 21.76 68.693 58.453 81.92 20.48 7.253 40.96 6.4 62.293-2.133l34.56-14.507 2.133 6.4c2.987 8.107 4.267 16.213 5.12 24.32l1.28 7.253c5.973 32 32.853 67.84 79.787 70.4 30.72 1.28 56.32-10.24 75.52-36.693 10.24-14.080 15.36-30.72 16.64-52.053 0.853-6.4 0.853-13.227 2.987-19.627l1.28-5.973 16.64 5.973c5.973 2.133 11.52 4.267 17.493 5.973 40.107 14.507 84.907-2.987 104.533-40.107 16.213-29.867 14.507-60.587-4.267-91.307-7.253-11.52-18.347-20.48-30.72-28.587l-3.84-2.987c-7.253-5.12-10.24-8.107-10.24-12.373s2.987-8.107 9.387-13.227c11.52-10.24 23.467-20.48 31.573-34.56 14.080-22.613 15.36-52.053 4.267-78.080s-32-44.8-60.587-51.2c-16.64-4.267-34.56-2.133-52.053 5.12-5.12 2.133-10.24 4.267-15.36 6.4l-18.347 8.107-1.28-5.12c-2.987-7.253-3.84-14.080-5.12-20.48l-0.853-5.12c-5.12-29.44-19.627-51.2-44.8-65.28-13.227-7.68-27.733-11.947-41.813-11.947zM657.067 304.213c-28.587-46.080-54.187-87.040-80.64-129.707-5.973-9.387-6.4-19.2-2.987-31.573l32.853-110.507c3.84-11.093 6.4-21.76 9.387-32.853l0.853-3.84h-3.84c-15.36 0-30.72 0-46.080 0h-19.627c-34.56 0-70.827 0-108.373-1.28h-3.413l0.853 3.84c1.28 5.12 2.987 10.24 4.267 15.36 0.853 2.987 2.133 6.4 2.987 9.387 13.227 43.947 24.747 80.64 35.84 114.773 5.12 15.36 2.133 29.44-7.253 42.24-23.467 31.573-47.36 63.573-68.693 93.013l-25.6 34.56 2.987 1.28c24.747 11.52 43.947 27.733 59.307 49.067 5.12 7.253 9.387 15.36 13.227 22.613l1.28 3.84 3.84-0.853c21.76-3.84 43.093-2.133 62.72 3.84 50.347 15.36 84.053 48.213 100.267 98.56l0.853 3.84 3.84-0.853c22.613-3.84 41.813-16.64 60.587-30.72 10.24-7.253 19.2-16.213 28.587-24.32 3.84-3.84 8.107-7.253 12.373-10.24l2.133-1.28-72.533-118.187zM935.68 327.253c-0.853-11.52-1.28-22.613-2.987-33.707l-0.853-5.973-9.387 10.24c-20.48 21.76-40.107 45.227-59.307 67.413-14.507 16.64-30.72 35.84-46.933 53.333-25.6 27.733-53.333 57.6-85.76 83.2-17.493 14.080-34.56 24.747-51.2 32.853l-6.4 2.987 6.4 2.133c5.973 1.28 11.52 2.987 18.347 4.267 46.933 8.107 90.88 2.987 129.707-16.213 52.053-25.6 85.76-67.84 100.267-128 7.68-22.613 9.813-46.933 8.107-72.533zM328.533 744.533h-2.133c-63.573-0.853-113.493-52.053-113.493-116.48 0-31.573 11.52-60.587 33.707-82.773 21.333-21.333 50.347-33.707 81.92-33.707 64.427 0 115.627 51.2 115.627 115.627 0 31.573-11.52 60.587-33.707 81.92-21.76 23.040-51.2 35.413-81.92 35.413zM327.68 572.587c-14.507 0-28.587 5.973-38.827 16.64-9.813 11.093-15.787 25.173-15.787 39.68 0.853 31.573 24.32 55.467 55.467 55.467 14.507 0 27.733-5.973 37.973-16.213 11.093-11.093 16.64-25.6 16.64-40.107 0.427-30.72-24.747-55.467-55.467-55.467z" />
 <glyph unicode="&#xe90a;" glyph-name="accessory" d="M955.307 932.267h-885.76c-37.973 0-69.547-30.72-69.547-69.547v-130.56c0-37.973 30.72-69.547 69.547-69.547h53.333v-2.133l81.493-567.040c10.667-75.093 67.413-129.707 133.973-129.707h346.88c67.413 0 123.733 54.613 133.973 129.707l81.92 569.173h53.333c37.973 0 69.547 30.72 69.547 69.547v131.413c0 37.973-30.72 68.693-68.693 68.693zM843.093 660.053l-80.64-558.080c-6.827-46.507-39.253-80.213-77.227-80.213h-346.027c-37.973 0-70.827 33.707-77.227 80.213l-81.067 561.493h663.040l-0.853-3.413zM966.4 732.16c0-6.4-5.12-11.947-11.947-11.947h-884.907c-6.4 0-11.947 5.12-11.947 11.947v131.413c0 6.4 5.12 11.947 11.947 11.947h885.76c6.4 0 11.947-5.12 11.947-11.947v-131.413h-0.853z" />
 <glyph unicode="&#xe90b;" glyph-name="artificial" d="M613.973 562.773c-28.16 0-56.32 0-85.333 0-35.84 0-71.253 0-107.093 0h-13.653c-10.24 0-12.373-1.28-12.373-12.373v-207.36c0-4.267 0-5.973 2.133-8.107s4.267-2.133 8.96-2.133h207.36c10.24 0 11.52 2.133 11.52 11.52 0 68.693 0 137.813 0 206.507 0.853 10.667-1.28 11.947-11.52 11.947zM570.027 442.453v-52.053h-4.267c-8.96 0-17.92 0-26.88 0h-42.24c-13.227 0-26.88 0-39.68 0h-2.56l-0.853 2.56c0 37.973 0 74.24 0 111.36v2.56h3.413c43.947 0 78.080 0 109.653 0h2.133l1.28-2.133c0 0 0-0.853 0-1.28 0-21.333 0-40.96 0-61.013zM834.987 48.213l177.067 306.773c2.133 3.413 4.267 6.827 5.973 11.093l5.547 9.813-124.587 72.107 125.013 72.107-2.56 5.547c-0.853 2.133-2.133 3.413-2.56 5.547l-180.48 314.453c-2.56 5.547-5.547 7.68-7.68 8.107-2.133 0.853-5.547-0.853-10.24-3.413l-31.573-17.92c-26.027-14.933-51.627-29.44-77.653-44.8l-4.693-3.413v132.693c0 4.693 0 7.68-2.133 9.813s-4.267 2.133-9.813 2.133h-363.52c-0.853 0-2.133 0-3.413 0-3.413 0-5.547-0.853-7.68-2.133-1.28-1.28-2.133-4.267-2.133-6.827 0-1.28 0-2.56 0-4.267v-27.307c0-32.853 0-65.707 0-98.987v-4.693l-121.173 69.973-3.413 0.853-2.133-2.56c-0.853-0.853-1.28-1.28-2.133-2.133l-183.467-316.587c-6.827-11.52-5.973-13.653 5.547-20.48l112.64-65.707-70.827-39.68c-15.787-8.96-30.72-17.92-46.507-26.88-2.56-1.28-5.547-3.413-5.973-6.827-0.853-2.133 0-4.693 2.133-7.68 0.853-1.28 1.28-2.133 2.133-3.413l177.92-308.907c2.133-4.267 4.693-8.107 8.107-12.373l2.133-2.133 124.16 71.253v-17.067c0-11.093 0-21.333 0-31.573l-0.853-83.2c0-10.24 1.28-11.52 11.093-11.52h17.067c11.093 0 21.333-0.853 32.427-0.853h309.76c16.64 0 17.92 1.28 17.92 18.347v125.44l4.267-2.133c19.2-11.093 38.4-21.76 57.173-32.853l13.227-7.68c14.507-8.107 29.013-16.64 43.093-24.747 1.28-0.853 4.693-2.56 7.68-1.28 1.707 0 3.413 1.28 5.12 5.973zM808.96 116.907l-2.133 1.28-155.733 90.027-1.28-3.413c-2.133-4.267-2.133-7.68-1.28-11.093v-2.133c0-43.947 0-87.893 0-132.693v-28.16c0-1.28 0-2.56 0-4.693v-2.56h-274.773v4.693c0 12.373 0 24.747 0 36.267l0.853 143.36-4.693-2.133c-13.227-5.547-23.893-12.373-35.84-19.2-5.973-3.413-12.373-6.827-17.92-10.24-11.093-5.973-21.76-12.373-34.133-20.053l-68.693-39.68-136.533 237.653 100.267 57.6 61.867 35.84-44.8 25.6-118.187 68.693 2.133 4.267 131.84 227.413c0.853 1.28 1.28 2.133 2.133 3.413l1.28 2.133 3.413-1.28c8.96-5.547 18.347-11.093 27.307-16.64l119.467-69.547c2.133-1.28 4.693-2.56 8.107-0.853l2.133 1.28c1.28 2.133 1.28 4.693 1.28 8.107 0 5.973 0 11.52 0 17.067s0 10.24 0 15.787l0.853 138.667h4.267c14.507 0 29.013 0 42.667-0.853h2.133c15.787-0.853 29.013-0.853 40.533-0.853 39.68 0 78.080 0 124.16 0h55.040c0.853 0 1.28 0 2.133 0h2.133v-186.027l162.133 92.587 136.533-237.653-161.28-92.587 160.853-92.16-1.28-2.133-136.96-235.093z" />
@@ -28,12 +28,12 @@
 <glyph unicode="&#xe912;" glyph-name="invoice-in-create" d="M153.6 443.733c-85.333 0-153.6 68.267-153.6 153.6s68.267 153.6 153.6 153.6 153.6-68.267 153.6-153.6-68.267-153.6-153.6-153.6zM243.2 605.867h-81.067v42.667c0 8.533-4.267 12.8-12.8 8.533l-98.133-55.467c-8.533-4.267-8.533-12.8 0-17.067l98.133-55.467c8.533-4.267 12.8 0 12.8 8.533v42.667h81.067c12.8 0 17.067 8.533 17.067 8.533 0 8.533-8.533 17.067-17.067 17.067zM153.6 405.333c5.547 0 11.52 0.427 17.067 0.853v-235.52c0-12.8-8.533-21.333-21.333-21.333s-21.333 8.533-21.333 21.333v236.373c8.533-1.28 17.067-1.707 25.6-1.707zM344.32 576c0.853 6.827 1.28 14.080 1.28 21.333s-0.427 14.507-1.28 21.333h317.013c12.8 0 21.333-8.533 21.333-21.333s-8.533-21.333-21.333-21.333h-317.013zM917.333 810.667c-12.8 0-21.333-8.533-21.333-21.333s8.533-21.333 21.333-21.333h85.333c12.8 0 21.333 8.533 21.333 21.333v64c0 59.733-46.933 106.667-106.667 106.667h-682.667c-59.733 0-106.667-46.933-106.667-106.667v-65.707c8.533 1.28 17.067 1.707 25.6 1.707 5.547 0 11.52-0.427 17.067-0.853v64.853c0 34.133 29.867 64 64 64h597.333c-12.8-17.067-21.333-38.4-21.333-64v-317.44c-29.44 9.387-61.013 14.507-93.867 14.507-53.76 0-104.533-14.080-148.907-38.4h-241.92c-5.973-12.373-13.653-24.32-22.613-35.413 3.84-4.693 9.387-7.253 16.64-7.253h189.013c-21.76-20.053-40.533-43.093-55.893-68.693-1.707 0.427-3.413 0.427-5.12 0.427h-128c-12.8 0-21.333-8.533-21.333-21.333s8.533-21.333 21.333-21.333h112.213c-14.507-35.413-22.613-74.24-22.613-115.2 0-49.067 11.52-95.573 32-136.533h-420.267c-12.8 0-21.333-8.533-21.333-21.333v-42.667c0-59.733 46.933-106.667 106.667-106.667h640c15.36 0 29.867 2.987 43.093 8.96 134.4 32.853 234.24 154.027 234.24 298.24 0 120.747-69.547 224.853-170.667 275.2v334.933c0 34.133 29.867 64 64 64s64-29.867 64-64v-42.667h-64zM128-21.333h-21.333c-34.133 0-64 29.867-64 64v21.333h424.533c24.747-34.56 56.747-63.573 93.44-85.333h-432.64zM897.28 287.573v-89.173h-135.68v-135.68h-89.173v136.107h-135.68v89.173h135.68v135.68h89.173v-135.68h92.16l43.52-0.427z" />
 <glyph unicode="&#xe913;" glyph-name="basketadd" d="M197.973 505.173c-15.787-2.987-25.6-15.787-25.6-32l15.787-261.973c0-12.8 12.8-25.6 25.6-22.187h2.987c15.787 2.987 25.6 15.787 25.6 32l-12.8 258.987c-2.56 12.373-18.773 25.173-31.573 25.173zM284.587 479.573v-261.973c0-19.2 12.8-28.587 28.587-28.587s28.587 12.8 28.587 28.587v261.973c0 15.787-12.8 28.587-28.587 28.587s-28.587-12.8-28.587-28.587zM359.68 182.187h-203.093l-44.8 348.16h384.427c61.44 47.36 137.813 75.52 220.587 75.52 39.68 0 78.080-6.4 113.92-18.347v35.84c0 15.787-12.8 28.587-32 32h-140.8l-115.2 226.987c6.4 6.4 6.4 19.2 6.4 28.587-6.4 32-34.987 54.187-64 47.787-32-6.4-54.187-32-47.787-64s34.987-54.187 64-47.787l89.6-197.973h-354.56l89.6 197.973c32-6.4 60.587 19.2 64 47.787 2.987 28.587-19.2 57.6-47.787 64-32 6.4-60.587-19.2-64-47.787 0-9.387 2.987-19.2 6.4-28.587l-115.2-233.387h-140.8c-15.787 0-28.587-12.8-28.587-28.587v-64c0-15.787 12.8-28.587 28.587-28.587h22.613l51.2-377.173c2.987-12.8 15.787-22.187 28.587-22.187h242.347c-5.973 17.067-10.667 35.413-13.653 53.76zM444.16 481.707v0.853c0 12.8-12.8 25.6-28.587 25.6s-28.587-12.8-28.587-28.587v-87.040c14.507 32.853 34.133 62.72 57.173 89.173zM716.8 550.4c-169.813 0-307.2-137.387-307.2-307.2s137.387-307.2 307.2-307.2c169.813 0 307.2 137.387 307.2 307.2s-137.387 307.2-307.2 307.2zM897.28 287.573v-89.173h-135.68v-135.68h-89.173v136.107h-135.68v89.173h135.68v135.68h89.173v-135.68h135.68v-0.427z" />
 <glyph unicode="&#xe914;" glyph-name="basket" d="M235.093 39.68l-18.773 321.28c0 18.773 12.8 34.56 31.573 37.973 18.773 0 34.56-12.8 37.973-31.573l15.787-317.867c0-18.773-12.8-34.56-31.573-37.973h-2.987c-16.213-2.987-32 12.8-32 28.16zM389.12 11.52c18.773 0 34.56 15.787 34.56 34.56v324.267c0 18.773-15.787 34.56-34.56 34.56s-34.56-15.787-34.56-34.56v-324.267c0-21.76 15.787-34.56 34.56-34.56zM512 14.507c18.773 0 34.56 15.787 34.56 34.56v321.28c0 18.773-15.787 34.56-34.56 34.56s-34.56-15.787-34.56-34.56v-321.28c0-18.773 15.787-34.56 34.56-34.56zM760.747 14.507v0c18.773 0 34.56 15.787 34.56 31.573 6.4 148.053 9.387 311.467 9.387 314.88 0 18.773-15.787 34.56-34.56 34.56s-34.56-15.787-34.56-34.56c0-6.4-6.4-226.56-9.387-311.467 0-15.787 15.787-34.987 34.56-34.987zM634.88 14.507c18.773 0 34.56 15.787 34.56 34.56v321.28c0 18.773-15.787 34.56-34.56 34.56s-34.56-15.787-34.56-34.56v-321.28c0-18.773 15.36-34.56 34.56-34.56zM1015.893 540.587v-78.507c0-18.773-15.787-34.56-34.56-34.56h-28.16l-63.147-462.933c-2.987-15.787-15.787-28.16-34.56-28.16h-686.507c-15.787 0-31.573 12.8-34.56 28.16l-63.147 465.493h-28.16c-18.773 0-34.56 15.787-34.56 34.56v78.933c0 18.773 15.787 34.56 34.56 34.56h169.813l138.667 286.293c-2.987 9.387-6.4 22.187-6.4 34.56 6.4 37.973 40.96 66.133 78.507 59.733s66.133-40.96 59.733-78.507-40.96-66.133-78.507-59.733v0l-110.080-245.333h431.36l-110.080 245.76c-37.973-6.4-72.533 22.187-78.507 59.733s22.187 72.533 59.733 78.507c37.973 6.4 72.533-22.187 78.507-59.733 2.987-12.8 0-25.173-6.4-34.56l138.667-286.293h169.813c22.187-3.413 37.973-19.2 37.973-37.973zM880.213 430.080h-736.427l53.333-427.947h629.76l53.333 427.947z" />
-<glyph unicode="&#xe915;" glyph-name="uniE915" d="M830.72 949.333h-727.040c-56.747 0-103.68-46.933-103.68-104.107v-727.040c0-57.173 46.933-103.68 103.68-103.68h727.040c57.173 0 103.68 46.933 103.68 103.68v727.040c0.427 57.173-46.507 104.107-103.68 104.107zM830.72 118.187h-727.040v727.040h727.040v-727.040z" />
-<glyph unicode="&#xe916;" glyph-name="uniE916" d="M168.96 704h259.84v-78.080h-259.84v78.080z" />
-<glyph unicode="&#xe917;" glyph-name="uniE917" d="M259.84 170.24h77.653v103.68h104.107v78.080h-104.107v103.68h-77.653v-103.68h-104.107v-78.080h104.107z" />
-<glyph unicode="&#xe918;" glyph-name="uniE918" d="M576 536.32l72.96 73.387 73.387-73.387 55.040 55.040-73.387 73.813 73.387 73.387-55.040 55.040-73.387-73.387-72.96 73.387-55.040-55.040 72.96-73.387-72.96-73.813z" />
-<glyph unicode="&#xe919;" glyph-name="uniE919" d="M1024 231.68c0-157.409-127.605-285.013-285.013-285.013s-285.013 127.605-285.013 285.013c0 157.409 127.605 285.013 285.013 285.013s285.013-127.605 285.013-285.013z" />
-<glyph unicode="&#xe91a;" glyph-name="uniE91A" d="M925.867 327.68c-1.28 4.267-3.84 7.68-7.68 10.24l-168.107 96.853c-5.12 2.987-11.52 2.987-16.64 0l-168.107-96.853c-5.12-2.987-8.533-8.533-8.533-14.507v-194.133c0-5.973 2.987-11.52 8.533-14.507l168.107-96.853c2.56-1.28 5.547-2.133 8.533-2.133 0.853 0 1.707 0 2.56 0 1.28 0 2.56 0.427 3.84 0.853 0.427 0 0.853 0.427 1.28 0.427s0.427 0 0.853 0.427v0c0 0 0 0 0 0l168.107 96.853c5.12 2.987 8.533 8.533 8.533 14.507v194.133c-0.853 1.707-0.853 2.987-1.28 4.693zM606.72 322.987l134.827 77.653 134.827-77.653-134.4-77.653-126.293 72.96-8.96 4.693zM590.080 294.4l134.827-77.653v-155.733l-134.827 77.653v155.733zM758.187 61.013v155.733l134.827 77.653v-155.733l-134.827-77.653z" />
+<glyph unicode="&#xe915;" d="M830.72 949.333h-727.040c-56.747 0-103.68-46.933-103.68-104.107v-727.040c0-57.173 46.933-103.68 103.68-103.68h727.040c57.173 0 103.68 46.933 103.68 103.68v727.040c0.427 57.173-46.507 104.107-103.68 104.107zM830.72 118.187h-727.040v727.040h727.040v-727.040z" />
+<glyph unicode="&#xe916;" d="M168.96 704h259.84v-78.080h-259.84v78.080z" />
+<glyph unicode="&#xe917;" d="M259.84 170.24h77.653v103.68h104.107v78.080h-104.107v103.68h-77.653v-103.68h-104.107v-78.080h104.107z" />
+<glyph unicode="&#xe918;" d="M576 536.32l72.96 73.387 73.387-73.387 55.040 55.040-73.387 73.813 73.387 73.387-55.040 55.040-73.387-73.387-72.96 73.387-55.040-55.040 72.96-73.387-72.96-73.813z" />
+<glyph unicode="&#xe919;" d="M1024 231.68c0-157.409-127.605-285.013-285.013-285.013s-285.013 127.605-285.013 285.013c0 157.409 127.605 285.013 285.013 285.013s285.013-127.605 285.013-285.013z" />
+<glyph unicode="&#xe91a;" d="M925.867 327.68c-1.28 4.267-3.84 7.68-7.68 10.24l-168.107 96.853c-5.12 2.987-11.52 2.987-16.64 0l-168.107-96.853c-5.12-2.987-8.533-8.533-8.533-14.507v-194.133c0-5.973 2.987-11.52 8.533-14.507l168.107-96.853c2.56-1.28 5.547-2.133 8.533-2.133 0.853 0 1.707 0 2.56 0 1.28 0 2.56 0.427 3.84 0.853 0.427 0 0.853 0.427 1.28 0.427s0.427 0 0.853 0.427v0c0 0 0 0 0 0l168.107 96.853c5.12 2.987 8.533 8.533 8.533 14.507v194.133c-0.853 1.707-0.853 2.987-1.28 4.693zM606.72 322.987l134.827 77.653 134.827-77.653-134.4-77.653-126.293 72.96-8.96 4.693zM590.080 294.4l134.827-77.653v-155.733l-134.827 77.653v155.733zM758.187 61.013v155.733l134.827 77.653v-155.733l-134.827-77.653z" />
 <glyph unicode="&#xe91b;" glyph-name="isTooLittle" d="M512 955.733c-279.893 0-507.733-227.84-507.733-507.733s227.84-507.733 507.733-507.733 507.733 227.84 507.733 507.733-227.84 507.733-507.733 507.733zM512-15.787c-255.573 0-463.787 207.787-463.787 463.787s208.213 463.787 463.787 463.787c255.573 0 463.787-207.787 463.787-463.787s-208.213-463.787-463.787-463.787zM833.707 706.133c-95.147 79.36-198.827 120.32-308.053 122.453-167.253 3.413-290.56-88.747-349.013-143.787l-6.827-6.4 185.6-273.92 9.387 7.253c15.787 12.373 31.573 22.187 46.933 29.867l41.387-72.107c-5.973-11.947-8.107-25.6-5.973-39.68 5.547-36.267 39.68-61.013 75.52-55.040 36.267 5.547 61.013 39.68 55.040 75.52-5.547 36.267-39.68 61.013-75.52 55.040-3.413-0.427-6.4-1.28-9.387-2.133l-43.52 53.333c40.107 12.373 69.547 10.667 69.973 10.667 0.853 0 66.133-4.267 131.413-53.333l9.813-7.253 180.907 293.547-7.68 5.973zM540.16 344.32c2.133-14.933-8.107-29.013-23.040-31.573-14.933-2.133-29.013 8.107-31.573 23.040-2.133 14.933 8.107 29.013 23.040 31.573s29.013-7.68 31.573-23.040zM654.080 438.613c-67.413 46.507-130.987 50.347-133.547 50.773-2.133 0-38.4 2.56-86.613-14.507l-137.387 166.4 104.107-180.48c-13.227-6.4-26.453-14.507-40.107-24.32l-161.707 238.933c19.627 17.92 46.080 39.253 78.507 59.307l32-55.040 19.2 11.093-32.427 55.040c53.333 30.72 120.32 56.32 198.4 60.16v-74.667h22.187v75.093c2.987 0 5.547 0 8.533 0 65.28-1.28 128.427-17.493 189.013-47.787l-36.693-68.267 19.627-10.667 36.693 68.267c26.88-14.933 52.907-32.427 78.507-53.333l-158.293-256z" />
 <glyph unicode="&#xe91c;" glyph-name="deliveryprices" d="M251.733 264.533c-55.467 0-102.4-46.933-102.4-102.4s46.933-102.4 102.4-102.4 102.4 46.933 102.4 102.4c0 59.733-46.933 102.4-102.4 102.4zM251.733 110.933c-29.867 0-51.2 21.333-51.2 51.2s21.333 51.2 51.2 51.2 51.2-21.333 51.2-51.2c0-25.6-25.6-51.2-51.2-51.2zM789.333 264.533c-55.467 0-102.4-46.933-102.4-102.4s46.933-102.4 102.4-102.4 102.4 46.933 102.4 102.4c0 59.733-46.933 102.4-102.4 102.4zM789.333 110.933c-29.867 0-51.2 21.333-51.2 51.2s21.333 51.2 51.2 51.2 51.2-21.333 51.2-51.2c0-25.6-25.6-51.2-51.2-51.2zM1006.933 537.6l-196.267 192c-12.8 12.8-29.867 17.067-46.933 17.067h-98.133v38.4c0 25.6-21.333 51.2-51.2 51.2h-563.2c-29.867 0-51.2-21.333-51.2-51.2v-554.667c0-29.867 25.6-51.2 51.2-51.2h68.267c8.533 64 64 115.2 132.267 115.2 64 0 123.733-51.2 132.267-115.2h268.8c8.533 64 64 115.2 132.267 115.2s128-51.2 136.533-115.2h51.2c29.867 0 51.2 25.6 51.2 51.2v260.267c0 17.067-8.533 34.133-17.067 46.933zM376.32 614.827v-28.16h-166.4c-0.853-6.4-1.707-13.227-1.707-20.48 0-6.827 0.427-14.080 1.707-20.48h166.4v-28.16h-159.147c9.387-26.027 25.6-46.933 48.64-62.72s49.92-23.467 80.213-23.467c39.68 0 72.533 14.080 99.413 42.24l32-31.573c-15.787-17.92-34.987-32-58.453-40.96-23.040-9.387-48.213-14.080-75.947-14.080-29.013 0-55.893 5.547-80.64 16.213s-45.653 26.027-62.72 46.080c-17.067 19.627-29.013 42.667-36.267 68.693h-56.747v28.16h52.053c-0.853 8.533-0.853 15.36-0.853 20.48s0.427 11.947 0.853 20.48h-52.053v28.16h57.173c6.827 26.027 19.2 49.067 36.267 68.693s37.973 34.987 62.72 46.080c24.747 10.667 51.627 16.213 80.64 16.213 27.733 0 53.333-4.693 75.947-14.080 23.040-9.387 42.24-23.040 58.027-40.533l-32-31.573c-26.453 27.733-59.733 41.813-99.413 41.813-30.293 0-57.173-7.68-80.213-23.467s-39.253-36.693-48.64-62.72h159.147zM921.6 529.067h-187.733c-8.533 0-8.533 4.267-8.533 8.533v145.067c0 4.267 4.267 8.533 8.533 8.533h34.133c0 0 4.267 0 4.267-4.267l153.6-145.067c4.267 0 0-12.8-4.267-12.8z" />
 <glyph unicode="&#xe91d;" glyph-name="onlinepayment" d="M721.067 541.867c-166.4 0-298.667-136.533-298.667-302.933s132.267-302.933 298.667-302.933 298.667 136.533 298.667 302.933c0 170.667-132.267 302.933-298.667 302.933zM773.12 287.573v-28.16h-166.4c-0.853-6.4-1.707-13.227-1.707-20.48 0-6.827 0.427-14.080 1.707-20.48h166.4v-28.16h-159.147c9.387-26.027 25.6-46.933 48.64-62.72s49.92-23.467 80.213-23.467c39.68 0 72.533 14.080 99.413 42.24l32-31.573c-15.787-17.92-34.987-32-58.453-40.96-23.040-9.387-48.213-14.080-75.947-14.080-29.013 0-55.893 5.547-80.64 16.213s-45.653 26.027-62.72 46.080c-17.067 19.627-29.013 42.667-36.267 68.693h-56.747v28.16h52.053c-0.853 8.533-0.853 15.36-0.853 20.48s0.427 11.947 0.853 20.48h-52.053v28.16h57.173c6.827 26.027 19.2 49.067 36.267 68.693s37.973 34.987 62.72 46.080c24.747 10.667 51.627 16.213 80.64 16.213 27.733 0 53.333-4.693 75.947-14.080 23.040-9.387 42.24-23.040 58.027-40.533l-32-31.573c-26.453 27.733-59.733 41.813-99.413 41.813-30.293 0-57.173-7.68-80.213-23.467s-39.253-36.693-48.64-62.72h159.147zM874.667 810.667c-98.133 98.133-226.133 149.333-362.667 149.333 0 0 0 0-4.267 0-136.533 0-260.267-55.467-358.4-149.333-98.133-98.133-149.333-226.133-149.333-362.667 0-281.6 230.4-512 512-512 8.533 0 12.8 0 21.333 0-21.333 12.8-42.667 29.867-59.733 46.933-68.267 21.333-132.267 98.133-166.4 204.8 21.333 4.267 42.667 8.533 59.733 12.8 0 12.8-4.267 25.6-4.267 38.4-21.333 0-46.933-4.267-68.267-8.533-17.067 59.733-25.6 128-29.867 196.267h153.6c8.533 12.8 17.067 29.867 29.867 42.667h-183.467c0 81.067 12.8 153.6 34.133 221.867 59.733-12.8 123.733-21.333 187.733-21.333v-153.6c12.8 12.8 25.6 21.333 42.667 29.867v119.467c68.267 0 132.267 12.8 192 25.6 8.533-29.867 17.067-64 25.6-93.867 12.8 0 29.867-4.267 42.667-4.267-8.533 38.4-17.067 76.8-25.6 110.933 42.667 12.8 81.067 25.6 110.933 42.667 59.733-72.533 98.133-166.4 106.667-260.267 17.067-17.067 29.867-38.4 42.667-55.467 0 4.267 0 12.8 0 17.067 0 136.533-55.467 264.533-149.333 362.667zM145.067 742.4c34.133-17.067 72.533-29.867 115.2-38.4-21.333-68.267-34.133-149.333-38.4-230.4h-179.2c4.267 93.867 38.4 187.733 102.4 268.8zM132.267 170.667c-51.2 72.533-85.333 162.133-89.6 256h179.2c0-76.8 12.8-145.067 29.867-209.067-42.667-12.8-85.333-29.867-119.467-46.933zM268.8 179.2c21.333-76.8 59.733-136.533 102.4-179.2-81.067 25.6-153.6 72.533-209.067 136.533 29.867 17.067 68.267 29.867 106.667 42.667zM273.067 738.133c-34.133 12.8-68.267 21.333-98.133 34.133 0 4.267 4.267 4.267 4.267 8.533 55.467 55.467 119.467 93.867 192 115.2-25.6-21.333-46.933-55.467-68.267-89.6-8.533-21.333-21.333-42.667-29.867-68.267zM490.667 708.267h-4.267c-55.467 0-115.2 8.533-174.933 21.333 12.8 21.333 21.333 38.4 29.867 55.467 42.667 76.8 93.867 119.467 149.333 132.267v-209.067zM529.067 708.267v209.067c59.733-8.533 110.933-55.467 153.6-132.267 8.533-17.067 17.067-34.133 25.6-51.2-55.467-12.8-115.2-21.333-179.2-25.6zM746.667 742.4c-8.533 21.333-17.067 42.667-29.867 59.733-21.333 38.4-42.667 68.267-68.267 89.6 76.8-17.067 140.8-55.467 196.267-110.933-25.6-12.8-59.733-25.6-98.133-38.4z" />
@@ -82,12 +82,12 @@
 <glyph unicode="&#xe948;" glyph-name="linesprepaired" d="M870.4 857.6h-213.333c-21.333 59.733-76.8 102.4-145.067 102.4s-123.733-42.667-145.067-102.4h-213.333c-55.467 0-102.4-46.933-102.4-102.4v-716.8c0-55.467 46.933-102.4 102.4-102.4h716.8c55.467 0 102.4 46.933 102.4 102.4v716.8c0 55.467-46.933 102.4-102.4 102.4zM512 857.6c29.867 0 51.2-21.333 51.2-51.2s-21.333-51.2-51.2-51.2-51.2 21.333-51.2 51.2 21.333 51.2 51.2 51.2zM614.4 140.8h-358.4v102.4h358.4v-102.4zM768 345.6h-512v102.4h512v-102.4zM768 550.4h-512v102.4h512v-102.4z" />
 <glyph unicode="&#xe949;" glyph-name="control" d="M418.133 315.733l-128-123.733 256-256 469.333 469.333-128 128-341.333-341.333zM546.133 311.467l34.133 34.133h-68.267zM230.4 128l-59.733 64 153.6 153.6h-68.267v102.4h426.667l204.8 204.8 85.333-85.333v187.733c0 55.467-46.933 102.4-102.4 102.4h-213.333c-21.333 59.733-76.8 102.4-145.067 102.4s-123.733-42.667-145.067-102.4h-213.333c-55.467 0-102.4-46.933-102.4-102.4v-716.8c0-55.467 46.933-102.4 102.4-102.4h273.067l-196.267 192zM512 857.6c29.867 0 51.2-21.333 51.2-51.2s-21.333-51.2-51.2-51.2-51.2 21.333-51.2 51.2c0 29.867 21.333 51.2 51.2 51.2zM256 652.8h512v-102.4h-512v102.4zM665.6-64h204.8c55.467 0 102.4 46.933 102.4 102.4v204.8l-307.2-307.2z" />
 <glyph unicode="&#xe94a;" glyph-name="revision" d="M358.4 140.8h-102.4v102.4h81.067c0 0 0 4.267 0 4.267 0 34.133 8.533 68.267 21.333 98.133h-102.4v102.4h170.667c51.2 51.2 123.733 85.333 200.533 102.4h-371.2v102.4h512v-93.867c76.8-8.533 149.333-34.133 204.8-72.533v268.8c0 55.467-46.933 102.4-102.4 102.4h-213.333c-21.333 59.733-76.8 102.4-145.067 102.4s-123.733-42.667-145.067-102.4h-213.333c-55.467 0-102.4-46.933-102.4-102.4v-716.8c0-55.467 46.933-102.4 102.4-102.4h546.133c-157.867 8.533-290.133 89.6-341.333 204.8zM512 857.6c29.867 0 51.2-21.333 51.2-51.2s-21.333-51.2-51.2-51.2-51.2 21.333-51.2 51.2c0 29.867 21.333 51.2 51.2 51.2zM721.067 452.267c-136.533 0-251.733-85.333-302.933-204.8 46.933-119.467 162.133-204.8 302.933-204.8s251.733 85.333 302.933 204.8c-46.933 119.467-162.133 204.8-302.933 204.8zM721.067 110.933c-76.8 0-136.533 59.733-136.533 136.533s64 136.533 136.533 136.533 136.533-64 136.533-136.533-59.733-136.533-136.533-136.533zM721.067 328.533c-46.933 0-81.067-38.4-81.067-81.067s38.4-81.067 81.067-81.067c46.933 0 81.067 38.4 81.067 81.067s-34.133 81.067-81.067 81.067z" />
-<glyph unicode="&#xe94b;" glyph-name="deaulter" d="M677.973-64c-30.72 35.84-61.867 70.827-91.307 107.52-40.96 51.2-80.64 103.253-121.173 154.88-16.64 21.333-21.76 20.48-30.72-4.693-13.227-36.693-25.6-73.387-40.107-109.653-5.12-12.8-13.227-26.88-24.32-34.56-51.627-34.987-104.107-69.12-157.867-100.693-10.667-6.4-30.72-5.547-41.813 0.853-8.107 4.693-12.373 23.893-11.093 35.84 0.853 8.96 11.093 19.627 19.627 25.6 39.253 26.453 78.933 51.627 119.040 76.8 18.347 11.52 30.293 26.027 35.84 47.787 12.373 48.213 27.307 95.573 39.253 143.36 8.533 33.707 26.88 58.88 56.32 77.227 40.533 25.173 80.64 52.053 120.747 78.507 6.4 4.267 10.24 11.52 15.36 17.493-7.253 2.56-14.933 7.253-22.187 6.827-75.52-6.4-151.467-13.227-226.987-20.48-2.133 0-4.693-0.853-6.827-0.853-22.613-1.707-39.253 10.24-40.96 29.867s12.373 33.707 35.413 35.84c45.227 4.267 90.88 8.96 136.107 12.8 65.707 5.547 131.84 10.667 197.547 15.36 26.027 1.707 53.76-21.76 67.413-55.467 9.813-23.893 5.12-46.080-18.347-65.28-49.92-40.107-100.693-78.933-151.040-118.187-23.040-17.92-23.893-23.467-6.4-46.507 58.453-78.080 116.48-156.587 174.933-234.667 27.307-36.693 25.173-50.773-12.373-75.52-5.12 0-9.813 0-14.080 0zM791.893 649.813c-43.093 1.28-76.373-31.573-77.227-75.52-0.853-44.373 29.44-76.8 72.107-77.653 45.227-1.28 77.653 29.44 78.080 73.813 0.427 45.227-29.44 78.080-72.96 79.36zM671.147 737.707c0-72.107-34.133-136.107-87.467-176.64l-235.52-21.76c-72.107 36.693-122.027 111.787-122.027 198.4 0 122.88 99.84 222.293 222.72 222.293 122.453 0 222.293-99.413 222.293-222.293zM592.213 680.533l-50.347 18.347c-2.133-8.533-5.12-16.213-9.813-22.613-5.12-6.4-10.24-11.947-16.213-17.067-5.973-4.267-12.373-8.107-19.2-11.093s-13.653-4.693-20.053-5.547c-17.92-2.987-33.707-0.427-48.64 6.827s-26.88 18.347-36.693 32.853l76.373 12.373 7.253 32.427-97.28-15.787c-1.28 5.547-2.987 11.093-3.84 16.64l-0.853 4.267 99.413 16.213 7.253 32.427-106.667-17.493c0.853 9.387 2.987 17.493 6.4 26.027 3.84 8.533 8.107 16.213 14.080 23.040 5.547 6.827 12.8 12.373 21.333 17.067s17.92 8.107 28.587 9.813c6.827 1.28 13.227 1.707 20.907 1.28s14.507-1.707 21.333-3.84c6.827-2.133 13.653-5.973 20.053-10.24 5.973-4.693 11.947-11.093 17.493-18.773l38.827 37.973c-13.227 17.92-30.293 31.147-52.053 39.253-21.76 8.533-46.080 10.667-73.387 6.4-19.627-2.987-36.267-9.387-51.2-17.92-14.507-8.533-26.88-19.2-37.547-32-10.667-12.373-18.773-26.027-23.893-40.96-5.547-14.507-8.96-29.867-9.813-45.653l-21.76-3.84-7.253-32.427 29.013 4.693 0.427-2.987c1.28-6.827 2.56-12.8 4.267-18.347l-23.467-3.84-8.107-32.427 43.52 7.253c6.827-13.653 15.787-26.027 26.027-36.693 10.24-11.52 22.187-20.48 35.413-27.733 13.227-7.68 27.307-12.8 42.667-15.787s31.573-3.413 47.36-0.853c12.373 2.133 24.32 5.12 35.84 10.667s22.613 11.52 32.853 19.2c10.24 8.107 18.347 16.64 26.027 26.453 6.827 9.387 12.373 20.48 15.36 32.427z" />
+<glyph unicode="&#xe94b;" glyph-name="defaulter" d="M677.973-64c-30.72 35.84-61.867 70.827-91.307 107.52-40.96 51.2-80.64 103.253-121.173 154.88-16.64 21.333-21.76 20.48-30.72-4.693-13.227-36.693-25.6-73.387-40.107-109.653-5.12-12.8-13.227-26.88-24.32-34.56-51.627-34.987-104.107-69.12-157.867-100.693-10.667-6.4-30.72-5.547-41.813 0.853-8.107 4.693-12.373 23.893-11.093 35.84 0.853 8.96 11.093 19.627 19.627 25.6 39.253 26.453 78.933 51.627 119.040 76.8 18.347 11.52 30.293 26.027 35.84 47.787 12.373 48.213 27.307 95.573 39.253 143.36 8.533 33.707 26.88 58.88 56.32 77.227 40.533 25.173 80.64 52.053 120.747 78.507 6.4 4.267 10.24 11.52 15.36 17.493-7.253 2.56-14.933 7.253-22.187 6.827-75.52-6.4-151.467-13.227-226.987-20.48-2.133 0-4.693-0.853-6.827-0.853-22.613-1.707-39.253 10.24-40.96 29.867s12.373 33.707 35.413 35.84c45.227 4.267 90.88 8.96 136.107 12.8 65.707 5.547 131.84 10.667 197.547 15.36 26.027 1.707 53.76-21.76 67.413-55.467 9.813-23.893 5.12-46.080-18.347-65.28-49.92-40.107-100.693-78.933-151.040-118.187-23.040-17.92-23.893-23.467-6.4-46.507 58.453-78.080 116.48-156.587 174.933-234.667 27.307-36.693 25.173-50.773-12.373-75.52-5.12 0-9.813 0-14.080 0zM791.893 649.813c-43.093 1.28-76.373-31.573-77.227-75.52-0.853-44.373 29.44-76.8 72.107-77.653 45.227-1.28 77.653 29.44 78.080 73.813 0.427 45.227-29.44 78.080-72.96 79.36zM671.147 737.707c0-72.107-34.133-136.107-87.467-176.64l-235.52-21.76c-72.107 36.693-122.027 111.787-122.027 198.4 0 122.88 99.84 222.293 222.72 222.293 122.453 0 222.293-99.413 222.293-222.293zM592.213 680.533l-50.347 18.347c-2.133-8.533-5.12-16.213-9.813-22.613-5.12-6.4-10.24-11.947-16.213-17.067-5.973-4.267-12.373-8.107-19.2-11.093s-13.653-4.693-20.053-5.547c-17.92-2.987-33.707-0.427-48.64 6.827s-26.88 18.347-36.693 32.853l76.373 12.373 7.253 32.427-97.28-15.787c-1.28 5.547-2.987 11.093-3.84 16.64l-0.853 4.267 99.413 16.213 7.253 32.427-106.667-17.493c0.853 9.387 2.987 17.493 6.4 26.027 3.84 8.533 8.107 16.213 14.080 23.040 5.547 6.827 12.8 12.373 21.333 17.067s17.92 8.107 28.587 9.813c6.827 1.28 13.227 1.707 20.907 1.28s14.507-1.707 21.333-3.84c6.827-2.133 13.653-5.973 20.053-10.24 5.973-4.693 11.947-11.093 17.493-18.773l38.827 37.973c-13.227 17.92-30.293 31.147-52.053 39.253-21.76 8.533-46.080 10.667-73.387 6.4-19.627-2.987-36.267-9.387-51.2-17.92-14.507-8.533-26.88-19.2-37.547-32-10.667-12.373-18.773-26.027-23.893-40.96-5.547-14.507-8.96-29.867-9.813-45.653l-21.76-3.84-7.253-32.427 29.013 4.693 0.427-2.987c1.28-6.827 2.56-12.8 4.267-18.347l-23.467-3.84-8.107-32.427 43.52 7.253c6.827-13.653 15.787-26.027 26.027-36.693 10.24-11.52 22.187-20.48 35.413-27.733 13.227-7.68 27.307-12.8 42.667-15.787s31.573-3.413 47.36-0.853c12.373 2.133 24.32 5.12 35.84 10.667s22.613 11.52 32.853 19.2c10.24 8.107 18.347 16.64 26.027 26.453 6.827 9.387 12.373 20.48 15.36 32.427z" />
 <glyph unicode="&#xe94c;" glyph-name="services" d="M951.467 217.6c0 8.533 0 21.333 0 29.867s0 21.333-4.267 29.867l64 51.2c4.267 4.267 8.533 12.8 4.267 21.333l-64 106.667c-4.267 8.533-12.8 8.533-17.067 8.533l-76.8-29.867c-17.067 12.8-34.133 21.333-51.2 29.867l-12.8 81.067c0 8.533-8.533 12.8-17.067 12.8h-123.733c-8.533 0-12.8-4.267-17.067-12.8l-12.8-81.067c-17.067-8.533-38.4-17.067-51.2-29.867l-76.8 29.867c-8.533 4.267-17.067 0-17.067-8.533l-64-106.667c-4.267-8.533-4.267-17.067 4.267-21.333l64-51.2c0-8.533-4.267-21.333-4.267-29.867s0-21.333 4.267-29.867l-55.467-51.2c-4.267-4.267-8.533-12.8-4.267-21.333l64-106.667c4.267-8.533 12.8-8.533 17.067-8.533l76.8 29.867c17.067-12.8 34.133-21.333 51.2-29.867l12.8-81.067c0-8.533 8.533-12.8 17.067-12.8h123.733c8.533 0 12.8 4.267 17.067 12.8l12.8 81.067c17.067 8.533 38.4 17.067 51.2 29.867l76.8-29.867c8.533-4.267 17.067 0 17.067 8.533l64 106.667c4.267 8.533 4.267 17.067-4.267 21.333 0 0-68.267 51.2-68.267 51.2zM721.067 132.267c-64 0-115.2 51.2-115.2 115.2s51.2 115.2 115.2 115.2 115.2-51.2 115.2-115.2c0-64-51.2-115.2-115.2-115.2zM345.6 174.933h-89.6v102.4h81.067c4.267 34.133 8.533 68.267 21.333 102.4h-102.4v102.4h162.133c34.133 42.667 72.533 76.8 119.467 102.4h-281.6v102.4h520.533v-59.733c51.2-8.533 102.4-25.6 145.067-51.2v281.6c0 55.467-46.933 102.4-102.4 102.4h-622.933c-55.467 0-102.4-46.933-102.4-102.4v-819.2c0-55.467 46.933-102.4 102.4-102.4h302.933c-81.067 55.467-136.533 140.8-153.6 238.933z" />
 <glyph unicode="&#xe94d;" glyph-name="albaran" d="M819.2 960h-622.933c-55.467 0-102.4-46.933-102.4-102.4v-819.2c0-55.467 46.933-102.4 102.4-102.4h622.933c55.467 0 102.4 46.933 102.4 102.4v819.2c0 55.467-46.933 102.4-102.4 102.4zM358.4 174.933h-102.4v102.4h503.467v-102.4h-401.067zM256 379.733v102.4h503.467v-102.4h-503.467zM759.467 584.533h-503.467v102.4h503.467v-102.4z" />
 <glyph unicode="&#xe94e;" glyph-name="solunion" d="M759.467 870.4v-136.533h-601.6c0 0-128-341.333 106.667-341.333s469.333 0 469.333 0 34.133 0 34.133-34.133-8.533-98.133-8.533-98.133h-541.867c0 0-247.467 29.867-204.8 320 0 0 8.533 140.8 72.533 298.667 0 0 21.333-8.533 85.333-8.533h588.8zM853.333 25.6c64 0 85.333-8.533 85.333-8.533 64 153.6 72.533 298.667 72.533 298.667 42.667 290.133-204.8 320-204.8 320h-541.867c0 0-8.533-64-8.533-98.133s34.133-34.133 34.133-34.133 238.933 0 469.333 0 106.667-341.333 106.667-341.333h-601.6v-136.533h588.8z" />
 <glyph unicode="&#xe94f;" glyph-name="stowaway" d="M1006.933 452.267l-260.267 106.667 29.867 29.867c4.267 4.267 4.267 12.8 4.267 17.067-4.267 4.267-8.533 8.533-12.8 8.533h-157.867c0 93.867 76.8 157.867 174.933 157.867 4.267 0 8.533 4.267 12.8 8.533s4.267 8.533 0 17.067l-81.067 153.6c-4.267 0-12.8 4.267-17.067 4.267-46.933 0-93.867-17.067-132.267-42.667-21.333-17.067-42.667-38.4-55.467-59.733-12.8 21.333-29.867 42.667-55.467 59.733-34.133 12.8-81.067 34.133-128 34.133-4.267 0-12.8-4.267-12.8-8.533l-85.333-153.6c-4.267-4.267-4.267-4.267 0-12.8 4.267-4.267 8.533-8.533 12.8-8.533 98.133 0 174.933-59.733 174.933-153.6v0h-140.8c-4.267 0-12.8-4.267-12.8-8.533-8.533-4.267-4.267-17.067 0-21.333l21.333-21.333-277.333-110.933c-8.533-8.533-12.8-12.8-8.533-21.333 0-8.533 8.533-12.8 17.067-12.8v0l98.133 4.267-81.067-85.333c0-4.267-4.267-8.533 0-12.8 0-4.267 4.267-8.533 8.533-8.533l85.333-34.133v-179.2c0-8.533 4.267-12.8 8.533-12.8l358.4-145.067h8.533l358.4 145.067c4.267 4.267 8.533 8.533 8.533 12.8v179.2l85.333 34.133c4.267 0 8.533 4.267 8.533 8.533s0 8.533-4.267 12.8l-68.267 98.133 102.4-4.267c8.533 0 12.8 4.267 17.067 12.8 8.533 0 4.267 4.267-4.267 12.8zM110.933 456.533l196.267 76.8 8.533-8.533-166.4-64-38.4-4.267zM153.6 285.867v0l-68.267 34.133 68.267 98.133 328.533-132.267-68.267-98.133-260.267 98.133zM490.667-29.867l-328.533 132.267v153.6l243.2-98.133h12.8c0 0 0 0 4.267 0v0c0 0 4.267 0 4.267 4.267l64 85.333c0-4.267 0-277.333 0-277.333zM490.667 324.267l-298.667 115.2 149.333 64 153.6-157.867v-17.067h-4.267zM529.067 337.067l157.867 157.867 140.8-55.467-298.667-115.2c0 0 0 12.8 0 12.8zM849.067 102.4l-328.533-132.267v281.6l64-85.333c0 0 0-4.267 4.267-4.267v0h17.067l243.2 98.133v-157.867zM938.667 324.267l-324.267-132.267-68.267 98.133 328.533 132.267 64-98.133zM870.4 460.8l-157.867 64 12.8 8.533 187.733-76.8-42.667 4.267z" />
-<glyph unicode="&#xe950;" glyph-name="pin" d="M739.556 732.444v113.778h-455.111v-113.778h56.889v-284.444l-85.333-85.333v-85.333h199.111v-227.556l56.889-56.889 56.889 56.889v227.556h199.111v85.333l-85.333 85.333v284.444z" />
+<glyph unicode="&#xe950;" glyph-name="agency-term" d="M789.333 266.667c-55.467 0-102.4-46.933-102.4-102.4s46.933-102.4 102.4-102.4c55.467 0 102.4 46.933 102.4 102.4 0 59.733-46.933 102.4-102.4 102.4zM789.333 113.067c-29.867 0-51.2 21.333-51.2 51.2s21.333 51.2 51.2 51.2c29.867 0 51.2-21.333 51.2-51.2 0-25.6-25.6-51.2-51.2-51.2zM251.733 266.667c-55.467 0-102.4-46.933-102.4-102.4s46.933-102.4 102.4-102.4 102.4 46.933 102.4 102.4c0 59.733-46.933 102.4-102.4 102.4zM251.733 113.067c-29.867 0-51.2 21.333-51.2 51.2s21.333 51.2 51.2 51.2 51.2-21.333 51.2-51.2c0-25.6-25.6-51.2-51.2-51.2zM1006.933 539.733l-196.267 192c-12.8 12.8-29.867 17.067-46.933 17.067h-98.133v38.4c0 25.6-21.333 51.2-51.2 51.2h-563.2c-29.867 0-51.2-21.333-51.2-51.2v-554.667c0-29.867 25.6-51.2 51.2-51.2h68.267c8.533 64 64 115.2 132.267 115.2 64 0 123.733-51.2 132.267-115.2h268.8c8.533 64 64 115.2 132.267 115.2s128-51.2 136.533-115.2h51.2c29.867 0 51.2 25.6 51.2 51.2v260.267c0 17.067-8.533 34.133-17.067 46.933v0zM725.333 684.8c0 4.267 4.267 8.533 8.533 8.533h34.133c0 0 4.267 0 4.267-4.267l153.6-145.067c4.267 0 0-12.8-4.267-12.8h-187.733c-8.533 0-8.533 4.267-8.533 8.533v145.067zM509.013 556.373c0-113.92-92.16-206.080-206.080-206.080s-206.080 92.16-206.080 206.080 92.16 206.507 206.080 206.507 206.080-92.587 206.080-206.507zM342.613 494.080h-87.893l-15.36-40.107h-78.933l100.693 230.827h76.373l100.693-230.827h-80.213l-15.36 40.107zM321.28 550.4l-22.613 58.027-22.187-58.027h44.8z" />
 <glyph unicode="&#xe951;" glyph-name="apps" d="M0 704h256v256h-256v-256zM384-64h256v256h-256v-256zM0-64h256v256h-256v-256zM0 320h256v256h-256v-256zM384 320h256v256h-256v-256zM768 960v-256h256v256h-256zM384 704h256v256h-256v-256zM768 320h256v256h-256v-256zM768-64h256v256h-256v-256z" />
 <glyph unicode="&#xe952;" glyph-name="info" d="M512 960c-281.6 0-512-230.4-512-512s230.4-512 512-512 512 230.4 512 512-230.4 512-512 512zM563.2 192h-102.4v307.2h102.4v-307.2zM563.2 601.6h-102.4v102.4h102.4v-102.4z" />
 <glyph unicode="&#xe953;" glyph-name="columndelete" d="M0 960h256v-256h-256v256zM0 192h256v-256h-256v256zM0 576h256v-256h-256v256zM785.067 686.933l93.867-98.133-140.8-140.8 140.8-145.067-93.867-98.133-145.067 145.067-145.067-145.067-93.867 98.133 140.8 145.067-140.8 140.8 93.867 98.133 145.067-145.067z" />
@@ -98,7 +98,8 @@
 <glyph unicode="&#xe958;" glyph-name="headercol" d="M362.667-64h302.933v678.4h-302.933v-678.4zM0-64h302.933v678.4h-302.933v-678.4zM721.067 614.4v-678.4h302.933v678.4h-302.933zM362.667 678.4h302.933v281.6h-302.933v-281.6zM0 678.4h302.933v281.6h-302.933v-281.6zM721.067 960v-281.6h302.933v281.6h-302.933z" />
 <glyph unicode="&#xe959;" glyph-name="reserva" d="M841.6 864c48 0 86.4-38.4 86.4-86.4v-662.4c0-48-38.4-86.4-86.4-86.4h-659.2c-48 3.2-86.4 41.6-86.4 89.6v659.2c0 48 38.4 86.4 86.4 86.4h659.2zM841.6 960h-659.2c-99.2 0-182.4-83.2-182.4-182.4v-662.4c0-96 83.2-179.2 182.4-179.2h662.4c99.2 0 182.4 83.2 182.4 182.4v659.2c-3.2 99.2-86.4 182.4-185.6 182.4v0zM611.2 192l-99.2 144h-108.8v-144h-118.4v512h220.8c44.8 0 83.2-6.4 118.4-22.4 32-16 57.6-35.2 76.8-64s25.6-60.8 25.6-99.2c0-38.4-9.6-70.4-28.8-99.2s-44.8-48-76.8-64l115.2-163.2h-124.8zM582.4 585.6c-19.2 16-44.8 22.4-80 22.4h-96v-179.2h96c35.2 0 64 6.4 80 22.4 19.2 16 28.8 38.4 28.8 67.2-3.2 28.8-9.6 51.2-28.8 67.2z" />
 <glyph unicode="&#xe95a;" glyph-name="100" d="M640 38.4l-17.067-17.067h-213.333v153.6h-153.6v102.4h200.533l102.4 102.4h-302.933v102.4h405.333l102.4 102.4h-507.733v102.4h520.533v-89.6l72.533 72.533c17.067 17.067 42.667 29.867 68.267 29.867 4.267 0 8.533 0 8.533 0v157.867c0 55.467-46.933 102.4-102.4 102.4h-627.2c-55.467 0-102.4-46.933-102.4-102.4v-819.2c0-55.467 46.933-102.4 102.4-102.4h627.2c55.467 0 102.4 46.933 102.4 102.4v285.867l-285.867-285.867zM917.333 635.733c8.533 0 17.067-4.267 21.333-8.533l76.8-76.8c12.8-12.8 12.8-34.133 0-46.933l-64-64-119.467 119.467 64 64c4.267 8.533 12.8 12.8 21.333 12.8zM797.867 529.067l119.467-123.733-320-320h-123.733v119.467l324.267 324.267z" />
-<glyph unicode="&#xe95b;" glyph-name="pin_off" d="M860.729 89.031l-704.853 705.422-52.907-52.907 238.364-236.658v-12.516l-85.333-87.040v-85.333h213.333v-256l42.667-42.667 42.667 42.667v227.556l253.724-253.724zM341.333 714.809l394.809-394.809h31.858v85.333l-85.333 85.333v298.667h42.098v85.333h-426.098v-85.333h42.667z" />
+<glyph unicode="&#xe95b;" glyph-name="Client-unpaid" horiz-adv-x="1135" d="M1135.22-64v47.845h-84.359v927.41l8.574 0.42c3.118 0.18 6.295 0.36 9.473 0.36h23.683c14.21 0.060 28.36 0.060 42.569 0.060v47.905c-314.713-0.18-629.485-0.24-944.258-0.24h-190.902v-47.726h83.16s0-928.069 0-928.069h-83.16v-47.726h140.898c331.44 0 662.881 0 994.321-0.24zM821.526 911.255h180.17v-926.93h-180.17v926.93zM591.892 911.735h180.11v-926.93h-180.11v926.87zM362.258 911.735h180.17v-926.93h-180.17v926.93zM132.624 911.255h180.17v-926.93h-180.17v926.93zM748.139 719.694c4.916-1.079 9.653-2.578 14.27-4.197v142.157c-7.555 1.739-15.169 3.358-22.963 4.737-16.668 2.818-33.576 4.437-50.364 6.595h-52.642c-2.938-0.48-5.876-1.199-8.814-1.439-8.754-0.719-17.507-1.679-26.141-2.998v-144.735c47.785 14.569 97.19 10.732 146.654-0.060zM878.545 627.6c27.82 34.775 55.94 69.969 84.179 105.284-38.072 44.428-81.661 78.543-131.605 101.447v-162.842c16.368-13.61 31.357-28.899 47.426-43.828zM467.003 283.809c-0.3 0.6 0 1.559 0 3.058h65.892v101.806h-97.43c-6.535 32.437-3.477 64.693-4.257 97.849h101.687v101.866h-74.706c0.060 1.439 0 2.039 0.18 2.458 18.107 37.653 42.509 69.43 74.526 93.652v161.403c-3.298-1.379-6.655-2.818-9.893-4.317-60.496-28.599-111.34-66.012-151.091-113.438v-564.612c37.953-46.646 86.997-82.8 147.194-108.342 4.557-1.919 9.173-3.717 13.79-5.456v153.489c-26.921 20.505-48.445 48.085-65.832 80.702zM297.925 591.806c-1.919-6.056-4.617-7.794-10.852-7.734-35.075 0.3-70.149 0.18-105.224 0.18h-9.293v-93.652h100.787c0.899-33.156 1.799-65.233 2.758-98.149h-103.605v-101.746h9.293c36.693 0 73.447-0.36 110.14 0.24 5.276 0.12 8.694-0.839 11.212-3.238v319.389c-1.799-5.036-3.657-10.073-5.276-15.289zM736.688 286.866v101.806h-135.202v-101.806h135.202zM736.808 588.329h-135.322v-101.866h135.322v101.866zM954.27 163.236c-28.419 34.055-56.539 67.811-83.999 100.727-13.31-10.972-26.201-21.884-39.152-32.556v-169.258c13.49 6.415 26.681 13.79 39.571 22.304 32.257 21.345 59.777 47.726 83.58 78.783zM615.215 167.493c-4.677 0.839-9.233 1.799-13.73 2.938v-138.68c32.017-5.036 64.633-5.816 97.789-3.178 21.524 1.739 42.629 4.916 63.134 9.773v145.695c-45.447-21.524-95.031-25.781-147.194-16.548z" />
+<glyph unicode="&#xe95c;" glyph-name="trolley" d="M972.8 57.6v902.4h-44.373v-153.173h-832.853v153.173h-44.373v-902.4c-23.893-8.96-40.533-32-40.533-58.88 0-34.56 28.16-62.72 62.72-62.72s62.72 28.16 62.72 62.72c0 26.88-17.067 49.92-40.533 58.88v9.387h832.853v-9.387c-23.893-8.96-40.533-32-40.533-58.88 0-34.56 28.16-62.72 62.72-62.72s62.72 28.16 62.72 62.72c0 26.88-16.64 49.92-40.533 58.88zM928.427 767.147v-314.453h-832.853v314.453h832.853zM139.947 107.093h-44.373v305.493h832.853v-305.493h-788.48z" />
 <glyph unicode="&#xe95d;" glyph-name="sign" d="M725.333 960c72.533-72.533 145.067-145.067 217.6-217.6-4.267-4.267-8.533-12.8-17.067-17.067-179.2-179.2-358.4-362.667-537.6-541.867-8.533-8.533-25.6-17.067-38.4-21.333-81.067-21.333-166.4-42.667-247.467-64-4.267 0-12.8-4.267-21.333-4.267 0 8.533 0 17.067 4.267 21.333 21.333 85.333 42.667 166.4 64 251.733 4.267 8.533 8.533 21.333 17.067 25.6 183.467 187.733 371.2 371.2 554.667 554.667 0 8.533 0 12.8 4.267 12.8zM849.067 25.6c-25.6-21.333-46.933-42.667-72.533-59.733-29.867-17.067-59.733-25.6-89.6-29.867-21.333-4.267-42.667 0-55.467 12.8-12.8 8.533-25.6 46.933-38.4 51.2-4.267 0-12.8 0-17.067-4.267-68.267-25.6-145.067-55.467-221.867-55.467-106.667 0-209.067 0-315.733 0-4.267 0-8.533 0-12.8 0-4.267 4.267-12.8 8.533-12.8 12.8s8.533 12.8 12.8 17.067c4.267 4.267 12.8 0 21.333 0 102.4 0 204.8 0 307.2 4.267 76.8 0 153.6 25.6 221.867 64 8.533 4.267 12.8 12.8 12.8 21.333 4.267 55.467 12.8 106.667 42.667 153.6 17.067 29.867 42.667 51.2 81.067 55.467 55.467 0 85.333-38.4 64-89.6-17.067-34.133-42.667-64-64-89.6-21.333-21.333-51.2-38.4-72.533-55.467-4.267-4.267-8.533-17.067-8.533-21.333 8.533-34.133 29.867-51.2 59.733-42.667 29.867 4.267 59.733 17.067 81.067 34.133 25.6 17.067 46.933 42.667 72.533 64 8.533 8.533 17.067 21.333 29.867 25.6 8.533 4.267 21.333 8.533 29.867 4.267 4.267-4.267 8.533-21.333 4.267-29.867-8.533-21.333-17.067-42.667-25.6-64-4.267-8.533-8.533-25.6 0-34.133s29.867-4.267 38.4 4.267c25.6 17.067 51.2 34.133 72.533 55.467 8.533 8.533 17.067 17.067 25.6 8.533 4.267-4.267 4.267-21.333 0-29.867-25.6-34.133-59.733-59.733-102.4-72.533-46.933-12.8-76.8 17.067-68.267 64-4.267 12.8-4.267 17.067 0 25.6zM618.667 72.533c0 0 0-4.267 0-4.267s4.267 0 4.267 0c29.867 25.6 59.733 51.2 85.333 81.067 12.8 12.8 21.333 34.133 29.867 51.2 8.533 21.333 0 34.133-21.333 38.4-25.6 4.267-42.667-8.533-55.467-25.6-29.867-46.933-38.4-93.867-42.667-140.8z" />
 <glyph unicode="&#xe95e;" glyph-name="polizon" d="M1011.2 456.533l-264.533 106.667 29.867 29.867c4.267 4.267 4.267 12.8 4.267 17.067-4.267 4.267-8.533 8.533-12.8 8.533h-157.867c0 93.867 76.8 157.867 174.933 157.867 4.267 0 8.533 4.267 12.8 8.533s4.267 8.533 0 17.067l-81.067 153.6c-4.267 0-12.8 4.267-17.067 4.267-46.933 0-93.867-17.067-132.267-42.667-25.6-17.067-42.667-38.4-55.467-59.733-12.8 25.6-29.867 42.667-55.467 59.733-38.4 25.6-85.333 42.667-132.267 42.667-4.267 0-12.8-4.267-12.8-8.533l-81.067-153.6c-4.267-4.267-4.267-8.533 0-17.067 4.267-4.267 8.533-8.533 12.8-8.533 98.133 0 174.933-59.733 174.933-153.6v0h-140.8c-4.267 0-12.8-4.267-12.8-8.533-4.267-4.267 0-12.8 4.267-17.067l21.333-21.333-277.333-110.933c-8.533-8.533-12.8-12.8-8.533-21.333 0-8.533 8.533-12.8 17.067-12.8 0 0 0 0 0 0l98.133 4.267-76.8-98.133c0-4.267-4.267-8.533 0-12.8 0-4.267 4.267-8.533 8.533-8.533l85.333-34.133v-179.2c0-8.533 4.267-12.8 8.533-12.8l362.667-145.067c0 0 4.267 0 4.267 0s4.267 0 4.267 0l362.667 145.067c4.267 4.267 8.533 8.533 8.533 12.8v179.2l85.333 34.133c4.267 0 8.533 4.267 8.533 8.533s0 8.533-4.267 12.8l-72.533 98.133 102.4-4.267c8.533 0 12.8 4.267 17.067 12.8 0 8.533-4.267 12.8-12.8 17.067zM110.933 460.8l200.533 81.067 8.533-8.533-170.667-68.267-38.4-4.267zM153.6 294.4v4.267l-72.533 29.867 72.533 98.133 328.533-132.267-72.533-98.133-256 102.4v-4.267zM494.933-25.6l-328.533 132.267v153.6l243.2-98.133c0 0 4.267 0 4.267 0h4.267c0 0 4.267 0 4.267 0v0c0 0 0 0 4.267 0v0c0 0 4.267 0 4.267 4.267l64 85.333v-277.333zM494.933 328.533l-302.933 119.467 149.333 59.733 153.6-162.133v-17.067zM529.067 345.6l162.133 157.867 140.8-55.467-302.933-119.467v17.067zM857.6 106.667l-328.533-132.267v281.6l64-85.333c0 0 0-4.267 4.267-4.267v0c0 0 4.267 0 4.267 0v0c0 0 4.267 0 4.267 0v0 0c0 0 4.267 0 4.267 0l243.2 98.133v-157.867zM942.933 328.533l-328.533-132.267-72.533 98.133 328.533 132.267 72.533-98.133zM874.667 465.067l-162.133 64 12.8 8.533 187.733-76.8-38.4 4.267z" />
 <glyph unicode="&#xe95f;" glyph-name="solclaim" d="M1024 917.333v-938.667h-938.667v68.267h234.667v51.2h38.4c8.533-4.267 17.067-4.267 29.867-4.267h298.667c42.667 0 76.8 34.133 76.8 76.8 0 0 0 0 0 0 29.867 12.8 46.933 38.4 46.933 72.533 0 0 0 0 0 0 29.867 12.8 46.933 38.4 46.933 72.533s-21.333 59.733-46.933 72.533c0 0 0 0 0 0 0 42.667-34.133 76.8-76.8 76.8h-106.667c21.333 21.333 29.867 55.467 17.067 89.6-12.8 25.6-38.4 42.667-68.267 42.667-12.8 0-21.333-4.267-34.133-8.533l-217.6-98.133v29.867h-238.933v396.8h362.667v-209.067h209.067v209.067h366.933zM0 89.6h281.6v51.2h89.6c4.267-4.267 12.8-4.267 17.067-4.267h298.667c21.333 0 34.133 12.8 34.133 34.133s-12.8 34.133-34.133 34.133h-136.533v12.8h183.467c21.333 0 34.133 12.8 34.133 29.867 0 21.333-12.8 29.867-34.133 29.867h-179.2v12.8h234.667c21.333 0 34.133 8.533 34.133 29.867s-12.8 29.867-34.133 29.867h-230.4v12.8h183.467c21.333 0 29.867 12.8 29.867 34.133s-12.8 34.133-34.133 34.133h-230.4l93.867 64c12.8 8.533 21.333 29.867 12.8 46.933s-29.867 25.6-51.2 17.067l-251.733-119.467c-4.267 0-4.267-4.267-8.533-4.267-4.267-4.267-8.533-8.533-12.8-12.8h-8.533v55.467h-281.6v-388.267z" />
diff --git a/src/css/fonts/icomoon.ttf b/src/css/fonts/icomoon.ttf
index b5fdefb0b..b69a35035 100644
Binary files a/src/css/fonts/icomoon.ttf and b/src/css/fonts/icomoon.ttf differ
diff --git a/src/css/fonts/icomoon.woff b/src/css/fonts/icomoon.woff
index 647668481..aa2d01bfb 100644
Binary files a/src/css/fonts/icomoon.woff and b/src/css/fonts/icomoon.woff differ
diff --git a/src/css/icons.scss b/src/css/icons.scss
index 1492a50d4..920a59626 100644
--- a/src/css/icons.scss
+++ b/src/css/icons.scss
@@ -1,399 +1,403 @@
 @font-face {
-  font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?g6kvgn');
-  src:  url('fonts/icomoon.eot?g6kvgn#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?g6kvgn') format('truetype'),
-    url('fonts/icomoon.woff?g6kvgn') format('woff'),
-    url('fonts/icomoon.svg?g6kvgn#icomoon') format('svg');
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
+    font-family: 'icomoon';
+    src: url('fonts/icomoon.eot?g6kvgn');
+    src: url('fonts/icomoon.eot?g6kvgn#iefix') format('embedded-opentype'),
+        url('fonts/icomoon.ttf?g6kvgn') format('truetype'),
+        url('fonts/icomoon.woff?g6kvgn') format('woff'),
+        url('fonts/icomoon.svg?g6kvgn#icomoon') format('svg');
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
 }
 
-[class^="icon-"], [class*=" icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'icomoon' !important;
-  speak: never;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
+[class^='icon-'],
+[class*=' icon-'] {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'icomoon' !important;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
 
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .icon-pin:before {
-  content: "\e950";
+    content: '\e950';
 }
 .icon-pin_off:before {
-  content: "\e95b";
+    content: '\e95b';
 }
 .icon-frozen:before {
-  content: "\e900";
+    content: '\e900';
 }
 .icon-Person:before {
-  content: "\e901";
+    content: '\e901';
 }
 .icon-handmadeArtificial:before {
-  content: "\e902";
+    content: '\e902';
 }
 .icon-fruit:before {
-  content: "\e903";
+    content: '\e903';
 }
 .icon-funeral:before {
-  content: "\e904";
+    content: '\e904';
 }
 .icon-noPayMethod:before {
-  content: "\e905";
+    content: '\e905';
 }
 .icon-preserved:before {
-  content: "\e906";
+    content: '\e906';
 }
 .icon-greenery:before {
-  content: "\e907";
+    content: '\e907';
 }
 .icon-planta:before {
-  content: "\e908";
+    content: '\e908';
 }
 .icon-handmade:before {
-  content: "\e909";
+    content: '\e909';
 }
 .icon-accessory:before {
-  content: "\e90a";
+    content: '\e90a';
 }
 .icon-artificial:before {
-  content: "\e90b";
+    content: '\e90b';
 }
 .icon-flower:before {
-  content: "\e90c";
+    content: '\e90c';
 }
 .icon-fixedPrice:before {
-  content: "\e90d";
+    content: '\e90d';
 }
 .icon-addperson:before {
-  content: "\e90e";
+    content: '\e90e';
 }
 .icon-supplierfalse:before {
-  content: "\e90f";
+    content: '\e90f';
 }
 .icon-invoice-out:before {
-  content: "\e910";
+    content: '\e910';
 }
 .icon-invoice-in:before {
-  content: "\e911";
+    content: '\e911';
 }
 .icon-invoice-in-create:before {
-  content: "\e912";
+    content: '\e912';
 }
 .icon-basketadd:before {
-  content: "\e913";
+    content: '\e913';
 }
 .icon-basket:before {
-  content: "\e914";
+    content: '\e914';
 }
 .icon-uniE915:before {
-  content: "\e915";
+    content: '\e915';
 }
 .icon-uniE916:before {
-  content: "\e916";
+    content: '\e916';
 }
 .icon-uniE917:before {
-  content: "\e917";
+    content: '\e917';
 }
 .icon-uniE918:before {
-  content: "\e918";
+    content: '\e918';
 }
 .icon-uniE919:before {
-  content: "\e919";
+    content: '\e919';
 }
 .icon-uniE91A:before {
-  content: "\e91a";
+    content: '\e91a';
 }
 .icon-isTooLittle:before {
-  content: "\e91b";
+    content: '\e91b';
 }
 .icon-deliveryprices:before {
-  content: "\e91c";
+    content: '\e91c';
 }
 .icon-onlinepayment:before {
-  content: "\e91d";
+    content: '\e91d';
 }
 .icon-risk:before {
-  content: "\e91e";
+    content: '\e91e';
 }
 .icon-noweb:before {
-  content: "\e91f";
+    content: '\e91f';
 }
 .icon-no036:before {
-  content: "\e920";
+    content: '\e920';
 }
 .icon-disabled:before {
-  content: "\e921";
+    content: '\e921';
 }
 .icon-treatments:before {
-  content: "\e922";
+    content: '\e922';
 }
 .icon-invoice:before {
-  content: "\e923";
+    content: '\e923';
 }
 .icon-photo:before {
-  content: "\e924";
+    content: '\e924';
 }
 .icon-supplier:before {
-  content: "\e925";
+    content: '\e925';
 }
 .icon-languaje:before {
-  content: "\e926";
+    content: '\e926';
 }
 .icon-credit:before {
-  content: "\e927";
+    content: '\e927';
 }
 .icon-client:before {
-  content: "\e928";
+    content: '\e928';
 }
 .icon-shipment-01:before {
-  content: "\e929";
+    content: '\e929';
 }
 .icon-account:before {
-  content: "\e92a";
+    content: '\e92a';
 }
 .icon-inventory:before {
-  content: "\e92b";
+    content: '\e92b';
 }
 .icon-unavailable:before {
-  content: "\e92c";
+    content: '\e92c';
 }
 .icon-wiki:before {
-  content: "\e92d";
+    content: '\e92d';
 }
 .icon-attach:before {
-  content: "\e92e";
+    content: '\e92e';
 }
 .icon-exit:before {
-  content: "\e92f";
+    content: '\e92f';
 }
 .icon-anonymous:before {
-  content: "\e930";
+    content: '\e930';
 }
 .icon-net:before {
-  content: "\e931";
+    content: '\e931';
 }
 .icon-buyrequest:before {
-  content: "\e932";
+    content: '\e932';
 }
 .icon-thermometer:before {
-  content: "\e933";
+    content: '\e933';
 }
 .icon-entry:before {
-  content: "\e934";
+    content: '\e934';
 }
 .icon-deletedTicket:before {
-  content: "\e935";
+    content: '\e935';
 }
 .icon-logout:before {
-  content: "\e936";
+    content: '\e936';
 }
 .icon-catalog:before {
-  content: "\e937";
+    content: '\e937';
 }
 .icon-agency:before {
-  content: "\e938";
+    content: '\e938';
 }
 .icon-delivery:before {
-  content: "\e939";
+    content: '\e939';
 }
 .icon-wand:before {
-  content: "\e93a";
+    content: '\e93a';
 }
 .icon-buscaman:before {
-  content: "\e93b";
+    content: '\e93b';
 }
 .icon-pbx:before {
-  content: "\e93c";
+    content: '\e93c';
 }
 .icon-calendar:before {
-  content: "\e93d";
+    content: '\e93d';
 }
 .icon-splitline:before {
-  content: "\e93e";
+    content: '\e93e';
 }
 .icon-consignatarios:before {
-  content: "\e93f";
+    content: '\e93f';
 }
 .icon-tax:before {
-  content: "\e940";
+    content: '\e940';
 }
 .icon-notes:before {
-  content: "\e941";
+    content: '\e941';
 }
 .icon-lines:before {
-  content: "\e942";
+    content: '\e942';
 }
 .icon-zone:before {
-  content: "\e943";
+    content: '\e943';
 }
 .icon-greuge:before {
-  content: "\e944";
+    content: '\e944';
 }
 .icon-ticketAdd:before {
-  content: "\e945";
+    content: '\e945';
 }
 .icon-components:before {
-  content: "\e946";
+    content: '\e946';
 }
 .icon-pets:before {
-  content: "\e947";
+    content: '\e947';
 }
 .icon-linesprepaired:before {
-  content: "\e948";
+    content: '\e948';
 }
 .icon-control:before {
-  content: "\e949";
+    content: '\e949';
 }
 .icon-revision:before {
-  content: "\e94a";
+    content: '\e94a';
 }
 .icon-deaulter:before {
-  content: "\e94b";
+    content: '\e94b';
 }
 .icon-services:before {
-  content: "\e94c";
+    content: '\e94c';
 }
 .icon-albaran:before {
-  content: "\e94d";
+    content: '\e94d';
 }
 .icon-solunion:before {
-  content: "\e94e";
+    content: '\e94e';
 }
 .icon-stowaway:before {
-  content: "\e94f";
+    content: '\e94f';
 }
 .icon-apps:before {
-  content: "\e951";
+    content: '\e951';
 }
 .icon-info:before {
-  content: "\e952";
+    content: '\e952';
 }
 .icon-columndelete:before {
-  content: "\e953";
+    content: '\e953';
 }
 .icon-columnadd:before {
-  content: "\e954";
+    content: '\e954';
 }
 .icon-deleteline:before {
-  content: "\e955";
+    content: '\e955';
 }
 .icon-item:before {
-  content: "\e956";
+    content: '\e956';
 }
 .icon-worker:before {
-  content: "\e957";
+    content: '\e957';
 }
 .icon-headercol:before {
-  content: "\e958";
+    content: '\e958';
 }
 .icon-reserva:before {
-  content: "\e959";
+    content: '\e959';
 }
 .icon-100:before {
-  content: "\e95a";
+    content: '\e95a';
 }
 .icon-sign:before {
-  content: "\e95d";
+    content: '\e95d';
 }
 .icon-polizon:before {
-  content: "\e95e";
+    content: '\e95e';
 }
 .icon-solclaim:before {
-  content: "\e95f";
+    content: '\e95f';
 }
 .icon-actions:before {
-  content: "\e960";
+    content: '\e960';
 }
 .icon-details:before {
-  content: "\e961";
+    content: '\e961';
 }
 .icon-traceability:before {
-  content: "\e962";
+    content: '\e962';
 }
 .icon-claims:before {
-  content: "\e963";
+    content: '\e963';
 }
 .icon-regentry:before {
-  content: "\e964";
+    content: '\e964';
 }
 .icon-transaction:before {
-  content: "\e966";
+    content: '\e966';
 }
 .icon-History:before {
-  content: "\e968";
+    content: '\e968';
 }
 .icon-mana:before {
-  content: "\e96a";
+    content: '\e96a';
 }
 .icon-ticket:before {
-  content: "\e96b";
+    content: '\e96b';
 }
 .icon-niche:before {
-  content: "\e96c";
+    content: '\e96c';
 }
 .icon-tags:before {
-  content: "\e96d";
+    content: '\e96d';
 }
 .icon-volume:before {
-  content: "\e96e";
+    content: '\e96e';
 }
 .icon-bin:before {
-  content: "\e96f";
+    content: '\e96f';
 }
 .icon-splur:before {
-  content: "\e970";
+    content: '\e970';
 }
 .icon-barcode:before {
-  content: "\e971";
+    content: '\e971';
 }
 .icon-botanical:before {
-  content: "\e972";
+    content: '\e972';
 }
 .icon-clone:before {
-  content: "\e973";
+    content: '\e973';
 }
 .icon-sms:before {
-  content: "\e975";
+    content: '\e975';
 }
 .icon-eye:before {
-  content: "\e976";
+    content: '\e976';
 }
 .icon-doc:before {
-  content: "\e977";
+    content: '\e977';
 }
 .icon-package:before {
-  content: "\e978";
+    content: '\e978';
 }
 .icon-settings:before {
-  content: "\e979";
+    content: '\e979';
 }
 .icon-bucket:before {
-  content: "\e97a";
+    content: '\e97a';
 }
 .icon-mandatory:before {
-  content: "\e97b";
+    content: '\e97b';
 }
 .icon-recovery:before {
-  content: "\e97c";
+    content: '\e97c';
 }
 .icon-payment:before {
-  content: "\e97e";
+    content: '\e97e';
 }
 .icon-grid:before {
-  content: "\e980";
+    content: '\e980';
 }
 .icon-web:before {
-  content: "\e982";
+    content: '\e982';
 }
 .icon-dfiscales:before {
-  content: "\e984";
+    content: '\e984';
+}
+.icon-trolley:before {
+    content: '\e95c';
 }
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 078ad3815..a4b53e891 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -241,6 +241,7 @@ export default {
             rmaList: 'RMA',
             summary: 'Summary',
             basicData: 'Basic Data',
+            lines: 'Lines',
             rma: 'RMA',
             photos: 'Photos',
             log: 'Audit logs',
@@ -287,6 +288,14 @@ export default {
             responsibility: 'Responsibility',
             company: 'Company',
             person: 'Employee/Customer',
+            notes: 'Notes',
+            photos: 'Photos',
+            development: 'Development',
+            reason: 'Reason',
+            result: 'Result',
+            responsible: 'Responsible',
+            worker: 'Worker',
+            redelivery: 'Redelivery'
         },
         basicData: {
             customer: 'Customer',
@@ -387,6 +396,49 @@ export default {
         },
         imageNotFound: 'Image not found',
     },
+    wagon: {
+        pageTitles: {
+            wagons: 'Wagons',
+            wagonsList: 'Wagons List',
+            wagonCreate: 'Create wagon',
+            wagonEdit: 'Edit wagon',
+            typesList: 'Types List',
+            typeCreate: 'Create type',
+            typeEdit: 'Edit type'
+        },
+        type: {
+            name: 'Name',
+            submit: 'Submit',
+            reset: 'Reset',
+            trayColor: 'Tray color',
+            removeItem: 'Wagon type removed successfully',
+        },
+        list: {
+            plate: 'Plate',
+            volume: 'Volume',
+            type: 'Type',
+            remove: 'Remove',
+            removeItem: 'Wagon removed successfully',
+        },
+        create: {
+            plate: 'Plate',
+            volume: 'Volume',
+            type: 'Type',
+            label: 'Label'
+        },
+        warnings: {
+            noData: 'No data available',
+            nameNotEmpty: 'Name can not be empty',
+            labelNotEmpty: 'Label can not be empty',
+            plateNotEmpty: 'Plate can not be empty',
+            volumeNotEmpty: 'Volume can not be empty',
+            typeNotEmpty: 'Type can not be empty',
+            maxTrays: 'You have reached the max number of trays',
+            minHeightBetweenTrays: 'The minimum height between trays is ',
+            maxWagonHeight: 'The maximum height of the wagon is ',
+            uncompleteTrays: 'There are incomplete trays',
+        }
+    },
     components: {
         topbar: {},
         userPanel: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 5a069fba8..cd052fe3f 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -240,6 +240,7 @@ export default {
             rmaList: 'RMA',
             summary: 'Resumen',
             basicData: 'Datos básicos',
+            lines: 'Líneas',
             rma: 'RMA',
             photos: 'Fotos',
             log: 'Registros de auditoría',
@@ -286,6 +287,14 @@ export default {
             responsibility: 'Responsabilidad',
             company: 'Empresa',
             person: 'Comercial/Cliente',
+            notes: 'Observaciones',
+            photos: 'Fotos',
+            development: 'Trazabilidad',
+            reason: 'Motivo',
+            result: 'Consecuencias',
+            responsible: 'Responsable',
+            worker: 'Trabajador',
+            redelivery: 'Devolución'
         },
         basicData: {
             customer: 'Cliente',
@@ -387,6 +396,49 @@ export default {
         },
         imageNotFound: 'No se ha encontrado la imagen',
     },
+    wagon: {
+        pageTitles: {
+            wagons: 'Vagones',
+            wagonsList: 'Listado vagones',
+            wagonCreate: 'Crear tipo',
+            wagonEdit: 'Editar tipo',
+            typesList: 'Listado tipos',
+            typeCreate: 'Crear tipo',
+            typeEdit: 'Editar tipo'
+        },
+        type: {
+            name: 'Nombre',
+            submit: 'Guardar',
+            reset: 'Deshacer cambios',
+            trayColor: 'Color de la bandeja',
+            removeItem: 'Tipo de vagón borrado correctamente',
+        },
+        list: {
+            plate: 'Matrícula',
+            volume: 'Volumen',
+            type: 'Tipo',
+            remove: 'Borrar',
+            removeItem: 'Vagón borrado correctamente',
+        },
+        create: {
+            plate: 'Matrícula',
+            volume: 'Volumen',
+            type: 'Tipo',
+            label: 'Etiqueta',
+        },
+        warnings: {
+            noData: 'Sin datos disponibles',
+            nameNotEmpty: 'El nombre no puede estar vacío',
+            labelNotEmpty: 'La etiqueta no puede estar vacía',
+            plateNotEmpty: 'La matrícula no puede estar vacía',
+            volumeNotEmpty: 'El volumen no puede estar vacío',
+            typeNotEmpty: 'El tipo no puede estar vacío',
+            maxTrays: 'Has alcanzado el número máximo de bandejas',
+            minHeightBetweenTrays: 'La distancia mínima entre bandejas es ',
+            maxWagonHeight: 'La altura máxima del vagón es ',
+            uncompleteTrays: 'Hay bandejas sin completar',
+        }
+    },
     components: {
         topbar: {},
         userPanel: {
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index a28f6e1d7..9c076d98c 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -6,11 +6,11 @@ const quasar = useQuasar();
 </script>
 
 <template>
-    <q-layout view="hHh LpR fFf">
+    <QLayout view="hHh LpR fFf">
         <Navbar />
-        <router-view></router-view>
-        <q-footer v-if="quasar.platform.is.mobile"></q-footer>
-    </q-layout>
+        <RouterView></RouterView>
+        <QFooter v-if="quasar.platform.is.mobile"></QFooter>
+    </QLayout>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index f8ba29819..87a5dd8bb 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -73,17 +73,17 @@ const statesFilter = {
 };
 </script>
 <template>
-    <fetch-data
+    <FetchData
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
         @on-fetch="setWorkers"
         auto-load
     />
-    <fetch-data url="ClaimStates" @on-fetch="setClaimStates" auto-load />
+    <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
 
     <div class="column items-center">
-        <q-card>
-            <form-model
+        <QCard>
+            <FormModel
                 :url="`Claims/${route.params.id}`"
                 :filter="claimFilter"
                 model="claim"
@@ -91,48 +91,48 @@ const statesFilter = {
                 <template #form="{ data, validate, filter }">
                     <div class="row q-gutter-md q-mb-md">
                         <div class="col">
-                            <q-input
+                            <QInput
                                 v-model="data.client.name"
                                 :label="t('claim.basicData.customer')"
                                 disable
                             />
                         </div>
                         <div class="col">
-                            <q-input
+                            <QInput
                                 v-model="data.created"
                                 mask="####-##-##"
                                 fill-mask="_"
                                 autofocus
                             >
                                 <template #append>
-                                    <q-icon name="event" class="cursor-pointer">
-                                        <q-popup-proxy
+                                    <QIcon name="event" class="cursor-pointer">
+                                        <QPopupProxy
                                             cover
                                             transition-show="scale"
                                             transition-hide="scale"
                                         >
-                                            <q-date
+                                            <QDate
                                                 v-model="data.created"
                                                 mask="YYYY-MM-DD"
                                             >
                                                 <div class="row items-center justify-end">
-                                                    <q-btn
+                                                    <QBtn
                                                         v-close-popup
                                                         label="Close"
                                                         color="primary"
                                                         flat
                                                     />
                                                 </div>
-                                            </q-date>
-                                        </q-popup-proxy>
-                                    </q-icon>
+                                            </QDate>
+                                        </QPopupProxy>
+                                    </QIcon>
                                 </template>
-                            </q-input>
+                            </QInput>
                         </div>
                     </div>
                     <div class="row q-gutter-md q-mb-md">
                         <div class="col">
-                            <q-select
+                            <QSelect
                                 v-model="data.workerFk"
                                 :options="workers"
                                 option-value="id"
@@ -148,18 +148,18 @@ const statesFilter = {
                                 :input-debounce="0"
                             >
                                 <template #before>
-                                    <q-avatar color="orange">
-                                        <q-img
+                                    <QAvatar color="orange">
+                                        <QImg
                                             v-if="data.workerFk"
                                             :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
                                             spinner-color="white"
                                         />
-                                    </q-avatar>
+                                    </QAvatar>
                                 </template>
-                            </q-select>
+                            </QSelect>
                         </div>
                         <div class="col">
-                            <q-select
+                            <QSelect
                                 v-model="data.claimStateFk"
                                 :options="claimStates"
                                 option-value="id"
@@ -174,19 +174,19 @@ const statesFilter = {
                                 :rules="validate('claim.claimStateFk')"
                                 :input-debounce="0"
                             >
-                            </q-select>
+                            </QSelect>
                         </div>
                     </div>
                     <div class="row q-gutter-md q-mb-md">
                         <div class="col">
-                            <q-input
+                            <QInput
                                 v-model="data.packages"
                                 :label="t('claim.basicData.packages')"
                                 :rules="validate('claim.packages')"
                             />
                         </div>
                         <div class="col">
-                            <q-input
+                            <QInput
                                 v-model="data.rma"
                                 :label="t('claim.basicData.returnOfMaterial')"
                                 :rules="validate('claim.rma')"
@@ -195,15 +195,15 @@ const statesFilter = {
                     </div>
                     <div class="row q-gutter-md q-mb-md">
                         <div class="col">
-                            <q-checkbox
+                            <QCheckbox
                                 v-model="data.hasToPickUp"
                                 :label="t('claim.basicData.picked')"
                             />
                         </div>
                     </div>
                 </template>
-            </form-model>
-        </q-card>
+            </FormModel>
+        </QCard>
     </div>
 </template>
 
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index fd827ca65..2691bbc51 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -1,12 +1,36 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import ClaimDescriptor from './ClaimDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
+import { getUrl } from 'composables/getUrl';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import { useStateStore } from 'stores/useStateStore';
+import { computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import ClaimDescriptor from './ClaimDescriptor.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
+const route = useRoute();
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+const claimSections = [
+    { name: 'Notes', url: '/note/index', icon: 'draft' },
+    { name: 'Development', url: '/development', icon: 'vn:traceability' },
+    { name: 'Action', url: '/action', icon: 'vn:actions' },
+];
+
+let salixUrl;
+onMounted(async () => {
+    salixUrl = await getUrl(`claim/${entityId.value}`);
+});
 </script>
 <template>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
@@ -17,22 +41,42 @@ const { t } = useI18n();
             :info="t('You can search by claim id or customer name')"
         />
     </Teleport>
-    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <q-scroll-area class="fit">
-            <claim-descriptor />
-            <q-separator />
-            <left-menu source="card" />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page-container>
-        <q-page class="q-pa-md">
-            <router-view></router-view>
-        </q-page>
-    </q-page-container>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <ClaimDescriptor />
+            <QSeparator />
+            <LeftMenu source="card" />
+            <QSeparator />
+            <QList>
+                <QItem
+                    v-for="section in claimSections"
+                    :key="section.name"
+                    active-class="text-primary"
+                    :href="salixUrl + section.url"
+                    clickable
+                    v-ripple
+                >
+                    <QItemSection avatar>
+                        <QIcon :name="section.icon" />
+                    </QItemSection>
+                    <QItemSection> {{ t(section.name) }} </QItemSection>
+                </QItem>
+            </QList>
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage class="q-pa-md">
+            <RouterView></RouterView>
+        </QPage>
+    </QPageContainer>
 </template>
 
 <i18n>
 es:
     Search claim: Buscar reclamación
     You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
+    Details: Detalles
+    Notes: Notas
+    Development: Trazabilidad
+    Action: Acción
 </i18n>
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index aa78776a9..baba66e2a 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -47,77 +47,77 @@ function stateColor(code) {
 </script>
 
 <template>
-    <card-descriptor
+    <CardDescriptor
         ref="descriptor"
         :url="`Claims/${entityId}`"
         :filter="filter"
         module="Claim"
     >
         <template #menu="{ entity }">
-            <claim-descriptor-menu :claim="entity" />
+            <ClaimDescriptorMenu :claim="entity" />
         </template>
         <template #description="{ entity }">
             <span>
                 {{ entity.client.name }}
-                <q-tooltip>{{ entity.client.name }}</q-tooltip>
+                <QTooltip>{{ entity.client.name }}</QTooltip>
             </span>
         </template>
         <template #body="{ entity }">
-            <q-list>
-                <q-item>
-                    <q-item-section>
-                        <q-item-label caption>{{ t('claim.card.created') }}</q-item-label>
-                        <q-item-label>{{ toDate(entity.created) }}</q-item-label>
-                    </q-item-section>
-                    <q-item-section v-if="entity.claimState">
-                        <q-item-label caption>{{ t('claim.card.state') }}</q-item-label>
-                        <q-item-label>
-                            <q-chip :color="stateColor(entity.claimState.code)" dense>
+            <QList>
+                <QItem>
+                    <QItemSection>
+                        <QItemLabel caption>{{ t('claim.card.created') }}</QItemLabel>
+                        <QItemLabel>{{ toDate(entity.created) }}</QItemLabel>
+                    </QItemSection>
+                    <QItemSection v-if="entity.claimState">
+                        <QItemLabel caption>{{ t('claim.card.state') }}</QItemLabel>
+                        <QItemLabel>
+                            <QBadge :color="stateColor(entity.claimState.code)" dense>
                                 {{ entity.claimState.description }}
-                            </q-chip>
-                        </q-item-label>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-item-label caption>
+                            </QBadge>
+                        </QItemLabel>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QItemLabel caption>
                             {{ t('claim.card.ticketId') }}
-                        </q-item-label>
-                        <q-item-label>
+                        </QItemLabel>
+                        <QItemLabel>
                             <span class="link">
                                 {{ entity.ticketFk }}
 
                                 <TicketDescriptorProxy :id="entity.ticketFk" />
                             </span>
-                        </q-item-label>
-                    </q-item-section>
-                    <q-item-section v-if="entity.worker">
-                        <q-item-label caption>
+                        </QItemLabel>
+                    </QItemSection>
+                    <QItemSection v-if="entity.worker">
+                        <QItemLabel caption>
                             {{ t('claim.card.assignedTo') }}
-                        </q-item-label>
-                        <q-item-label>{{ entity.worker.user.name }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-            </q-list>
+                        </QItemLabel>
+                        <QItemLabel>{{ entity.worker.user.name }}</QItemLabel>
+                    </QItemSection>
+                </QItem>
+            </QList>
 
-            <q-card-actions>
-                <q-btn
+            <QCardActions>
+                <QBtn
                     size="md"
                     icon="vn:client"
                     color="primary"
                     :to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
                 >
-                    <q-tooltip>{{ t('claim.card.customerSummary') }}</q-tooltip>
-                </q-btn>
-                <q-btn
+                    <QTooltip>{{ t('claim.card.customerSummary') }}</QTooltip>
+                </QBtn>
+                <QBtn
                     size="md"
                     icon="vn:ticket"
                     color="primary"
                     :to="{ name: 'TicketCard', params: { id: entity.ticketFk } }"
                 >
-                    <q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
-                </q-btn>
-            </q-card-actions>
+                    <QTooltip>{{ t('claim.card.claimedTicket') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
         </template>
-    </card-descriptor>
+    </CardDescriptor>
 </template>
diff --git a/src/pages/Claim/Card/ClaimDescriptorMenu.vue b/src/pages/Claim/Card/ClaimDescriptorMenu.vue
index bd1efe0ce..5688613d6 100644
--- a/src/pages/Claim/Card/ClaimDescriptorMenu.vue
+++ b/src/pages/Claim/Card/ClaimDescriptorMenu.vue
@@ -69,43 +69,43 @@ async function remove() {
     await axios.delete(`Claims/${id}`);
     quasar.notify({
         message: t('globals.dataDeleted'),
-        type: 'positive'
+        type: 'positive',
     });
 }
 </script>
 <template>
-    <q-item v-ripple clickable>
-        <q-item-section avatar>
-            <q-icon name="summarize" />
-        </q-item-section>
-        <q-item-section>{{ t('pickupOrder') }}</q-item-section>
-        <q-item-section side>
-            <q-icon name="keyboard_arrow_right" />
-        </q-item-section>
-        <q-menu anchor="top end" self="top start" auto-close>
-            <q-list>
-                <q-item @click="openPickupOrder" v-ripple clickable>
-                    <q-item-section avatar>
-                        <q-icon name="picture_as_pdf" />
-                    </q-item-section>
-                    <q-item-section>{{ t('openPickupOrder') }}</q-item-section>
-                </q-item>
-                <q-item @click="confirmPickupOrder" v-ripple clickable>
-                    <q-item-section avatar>
-                        <q-icon name="send" />
-                    </q-item-section>
-                    <q-item-section>{{ t('sendPickupOrder') }}</q-item-section>
-                </q-item>
-            </q-list>
-        </q-menu>
-    </q-item>
-    <q-separator />
-    <q-item @click="confirmRemove()" v-ripple clickable>
-        <q-item-section avatar>
-            <q-icon name="delete" />
-        </q-item-section>
-        <q-item-section>{{ t('deleteClaim') }}</q-item-section>
-    </q-item>
+    <QItem v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="summarize" />
+        </QItemSection>
+        <QItemSection>{{ t('pickupOrder') }}</QItemSection>
+        <QItemSection side>
+            <QIcon name="keyboard_arrow_right" />
+        </QItemSection>
+        <QMenu anchor="top end" self="top start" auto-close>
+            <QList>
+                <QItem @click="openPickupOrder" v-ripple clickable>
+                    <QItemSection avatar>
+                        <QIcon name="picture_as_pdf" />
+                    </QItemSection>
+                    <QItemSection>{{ t('openPickupOrder') }}</QItemSection>
+                </QItem>
+                <QItem @click="confirmPickupOrder" v-ripple clickable>
+                    <QItemSection avatar>
+                        <QIcon name="send" />
+                    </QItemSection>
+                    <QItemSection>{{ t('sendPickupOrder') }}</QItemSection>
+                </QItem>
+            </QList>
+        </QMenu>
+    </QItem>
+    <QSeparator />
+    <QItem @click="confirmRemove()" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="delete" />
+        </QItemSection>
+        <QItemSection>{{ t('deleteClaim') }}</QItemSection>
+    </QItem>
 </template>
 
 <i18n>
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
new file mode 100644
index 000000000..ea87aa314
--- /dev/null
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -0,0 +1,440 @@
+<script setup>
+import axios from 'axios';
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import { useRoute } from 'vue-router';
+import { useArrayData } from 'composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import FetchData from 'components/FetchData.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+
+import { toDate, toCurrency, toPercentage } from 'filters/index';
+import VnDiscount from 'components/common/vnDiscount.vue';
+import ClaimLinesImport from './ClaimLinesImport.vue';
+
+const quasar = useQuasar();
+const route = useRoute();
+const { t } = useI18n();
+const stateStore = useStateStore();
+const arrayData = useArrayData('ClaimLines');
+const store = arrayData.store;
+
+const claimFilter = {
+    fields: ['ticketFk'],
+};
+const linesFilter = {
+    include: {
+        relation: 'sale',
+        scope: {
+            fields: ['concept', 'ticketFk', 'price', 'quantity', 'discount', 'itemFk'],
+            include: {
+                relation: 'ticket',
+            },
+        },
+    },
+};
+
+const claim = ref(null);
+async function onFetchClaim(data) {
+    claim.value = data;
+
+    fetchMana();
+}
+
+const amount = ref(0);
+const amountClaimed = ref(0);
+async function onFetch(rows) {
+    amount.value = rows.reduce(
+        (acumulator, { sale }) => acumulator + sale.price * sale.quantity,
+        0
+    );
+
+    amountClaimed.value = rows.reduce(
+        (acumulator, line) => acumulator + line.sale.price * line.quantity,
+        0
+    );
+}
+
+const columns = computed(() => [
+    {
+        name: 'dated',
+        label: t('Delivered'),
+        field: ({ sale: { ticket } }) => toDate(ticket.landed),
+        sortable: true,
+    },
+    {
+        name: 'quantity',
+        label: t('Quantity'),
+        field: ({ sale }) => sale.quantity,
+        sortable: true,
+    },
+    {
+        name: 'claimed',
+        label: t('Claimed'),
+        field: (row) => row.quantity,
+        sortable: true,
+    },
+    {
+        name: 'description',
+        label: t('Description'),
+        field: ({ sale }) => sale.concept,
+    },
+    {
+        name: 'price',
+        label: t('Price'),
+        field: ({ sale }) => sale.price,
+        format: (value) => toCurrency(value),
+        sortable: true,
+    },
+    {
+        name: 'discount',
+        label: t('Discount'),
+        field: ({ sale }) => sale.discount,
+        format: (value) => toPercentage(value / 100),
+        sortable: true,
+    },
+    {
+        name: 'total',
+        label: t('Total'),
+        field: ({ sale }) => {
+            const amount = sale.price * sale.quantity;
+            const appliedDiscount = (sale.discount * amount) / 100;
+
+            return amount - appliedDiscount;
+        },
+        format: (value) => toCurrency(value),
+        sortable: true,
+    },
+]);
+
+const selected = ref([]);
+const mana = ref(0);
+async function fetchMana() {
+    const ticketId = claim.value.ticketFk;
+    const response = await axios.get(`Tickets/${ticketId}/getSalesPersonMana`);
+    mana.value = response.data;
+}
+
+async function updateQuantity({ id, quantity }) {
+    if (!id) return;
+    await axios.patch(`ClaimBeginnings/${id}`, { quantity });
+}
+
+async function updateDiscount({ saleFk, discount, canceller }) {
+    const body = { salesIds: [saleFk], newDiscount: discount };
+    const claimId = claim.value.ticketFk;
+    const query = `Tickets/${claimId}/updateDiscount`;
+
+    await axios.post(query, body, {
+        signal: canceller.signal,
+    });
+}
+
+function onUpdateDiscount(response) {
+    const row = store.data[response.rowIndex];
+    row.sale.discount = response.discount;
+    quasar.notify({
+        message: t('Discount updated'),
+        type: 'positive',
+    });
+}
+
+async function confirmRemove() {
+    const rows = selected.value;
+    const count = rows.length;
+
+    if (count === 0) {
+        return quasar.notify({
+            message: 'You must select at least one row',
+            type: 'warning',
+        });
+    }
+
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('Delete claimed sales'),
+                message: t('You are about to remove {count} rows', count, { count }),
+                data: { rows },
+                promise: remove,
+            },
+        })
+        .onOk(() => {
+            for (const row of rows) {
+                const orgData = store.data;
+                const index = orgData.findIndex((item) => item.id === row.id);
+                store.data.splice(index, 1);
+                selected.value = [];
+            }
+        });
+}
+
+async function remove({ rows }) {
+    if (!rows.length) return;
+    const body = { deletes: rows.map((row) => row.id) };
+    await axios.post(`ClaimBeginnings/crud`, body);
+    quasar.notify({
+        type: 'positive',
+        message: t('globals.rowRemoved'),
+    });
+}
+
+function showImportDialog() {
+    quasar
+        .dialog({
+            component: ClaimLinesImport,
+        })
+        .onOk(() => arrayData.refresh());
+}
+</script>
+<template>
+    <QPageSticky position="top" :offset="[0, 0]" expand>
+        <QToolbar class="bg-dark text-white">
+            <QToolbarTitle> {{ t('Claimed lines') }} </QToolbarTitle>
+            <QSpace />
+            <div class="row q-gutter-md">
+                <div>
+                    {{ t('Amount') }}
+                    <QChip :dense="$q.screen.lt.sm">
+                        {{ toCurrency(amount) }}
+                    </QChip>
+                </div>
+                <QSeparator dark vertical />
+                <div>
+                    {{ t('Amount Claimed') }}
+                    <QChip color="positive" :dense="$q.screen.lt.sm">
+                        {{ toCurrency(amountClaimed) }}
+                    </QChip>
+                </div>
+            </div>
+        </QToolbar>
+    </QPageSticky>
+
+    <FetchData
+        :url="`Claims/${route.params.id}`"
+        :filter="claimFilter"
+        @on-fetch="onFetchClaim"
+        auto-load
+    />
+    <div class="column items-center">
+        <div class="list">
+            <VnPaginate
+                data-key="ClaimLines"
+                :url="`Claims/${route.params.id}/lines`"
+                :filter="linesFilter"
+                @on-fetch="onFetch"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QTable
+                        :columns="columns"
+                        :rows="rows"
+                        :dense="$q.screen.lt.md"
+                        :pagination="{ rowsPerPage: 0 }"
+                        row-key="id"
+                        selection="multiple"
+                        v-model:selected="selected"
+                        hide-pagination
+                        :grid="$q.screen.lt.md"
+                    >
+                        <template #body-cell-claimed="{ row, value }">
+                            <QTd auto-width align="right" class="text-primary">
+                                <span>{{ value }}</span>
+
+                                <QPopupEdit
+                                    v-model="row.quantity"
+                                    v-slot="scope"
+                                    :title="t('Claimed quantity')"
+                                    @update:model-value="updateQuantity(row)"
+                                    buttons
+                                >
+                                    <QInput
+                                        v-model="scope.value"
+                                        type="number"
+                                        dense
+                                        autofocus
+                                        @keyup.enter="scope.set"
+                                        @focus="($event) => $event.target.select()"
+                                    />
+                                </QPopupEdit>
+                            </QTd>
+                        </template>
+
+                        <template #body-cell-discount="{ row, value, rowIndex }">
+                            <QTd auto-width align="right" class="text-primary">
+                                {{ value }}
+                                <VnDiscount
+                                    :quantity="row.quantity"
+                                    :price="row.sale.price"
+                                    :discount="row.sale.discount"
+                                    :mana="mana"
+                                    :promise="updateDiscount"
+                                    :data="{ saleFk: row.sale.id, rowIndex: rowIndex }"
+                                    @on-update="onUpdateDiscount"
+                                />
+                            </QTd>
+                        </template>
+                        <!-- View for grid mode -->
+                        <template #item="props">
+                            <div
+                                class="q-mb-md col-12 grid-style-transition"
+                                :style="props.selected ? 'transform: scale(0.95);' : ''"
+                            >
+                                <QCard>
+                                    <QCardSection>
+                                        <QCheckbox v-model="props.selected" />
+                                    </QCardSection>
+                                    <QSeparator inset />
+                                    <QList dense>
+                                        <QItem
+                                            v-for="column of props.cols"
+                                            :key="column.name"
+                                        >
+                                            <QItemSection>
+                                                <QItemLabel caption>
+                                                    {{ column.label }}
+                                                </QItemLabel>
+                                            </QItemSection>
+                                            <QItemSection side>
+                                                <template
+                                                    v-if="column.name === 'claimed'"
+                                                >
+                                                    <QItemLabel class="text-primary">
+                                                        {{ column.value }}
+                                                        <QPopupEdit
+                                                            v-model="props.row.quantity"
+                                                            v-slot="scope"
+                                                            :title="t('Claimed quantity')"
+                                                            @update:model-value="
+                                                                updateQuantity(props.row)
+                                                            "
+                                                            buttons
+                                                        >
+                                                            <QInput
+                                                                v-model="scope.value"
+                                                                type="number"
+                                                                dense
+                                                                autofocus
+                                                                @keyup.enter="scope.set"
+                                                                @focus="
+                                                                    ($event) =>
+                                                                        $event.target.select()
+                                                                "
+                                                            />
+                                                        </QPopupEdit>
+                                                    </QItemLabel>
+                                                </template>
+                                                <template
+                                                    v-else-if="column.name === 'discount'"
+                                                >
+                                                    <QItemLabel class="text-primary">
+                                                        {{ column.value }}
+                                                        <VnDiscount
+                                                            :quantity="props.row.quantity"
+                                                            :price="props.row.sale.price"
+                                                            :discount="
+                                                                props.row.sale.discount
+                                                            "
+                                                            :mana="mana"
+                                                            :promise="updateDiscount"
+                                                            :data="{
+                                                                saleFk: props.row.sale.id,
+                                                                rowIndex: props.rowIndex,
+                                                            }"
+                                                            @on-update="onUpdateDiscount"
+                                                        />
+                                                    </QItemLabel>
+                                                </template>
+                                                <template v-else>
+                                                    <QItemLabel>
+                                                        {{ column.value }}
+                                                    </QItemLabel>
+                                                </template>
+                                            </QItemSection>
+                                        </QItem>
+                                    </QList>
+                                </QCard>
+                            </div>
+                        </template>
+                    </QTable>
+                </template>
+            </VnPaginate>
+        </div>
+    </div>
+
+    <Teleport
+        v-if="stateStore.isHeaderMounted() && !$q.screen.lt.sm"
+        to="#actions-prepend"
+    >
+        <div class="row q-gutter-x-sm">
+            <QBtn
+                v-if="selected.length > 0"
+                @click="confirmRemove"
+                icon="delete"
+                color="primary"
+                flat
+                dense
+                rounded
+            >
+                <QTooltip bottom> {{ t('globals.remove') }} </QTooltip>
+            </QBtn>
+            <QBtn @click="showImportDialog" icon="add" color="primary" flat dense rounded>
+                <QTooltip bottom> {{ t('globals.add') }} </QTooltip>
+            </QBtn>
+            <QSeparator vertical />
+        </div>
+    </Teleport>
+    <!-- v-if="quasar.platform.is.mobile" -->
+    <QPageSticky v-if="$q.screen.lt.sm" position="bottom" :offset="[0, 0]" expand>
+        <QToolbar class="bg-primary text-white q-pa-none">
+            <QTabs class="full-width" align="justify" inline-label narrow-indicator>
+                <QTab @click="showImportDialog" icon="add" :label="t('globals.add')" />
+                <QSeparator vertical inset />
+                <QTab
+                    @click="confirmRemove"
+                    icon="delete"
+                    :label="t('globals.remove')"
+                    :disable="selected.length === 0"
+                />
+            </QTabs>
+        </QToolbar>
+    </QPageSticky>
+</template>
+
+<style lang="scss" scoped>
+.list {
+    padding-top: 50px;
+    max-width: 900px;
+    width: 100%;
+}
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+</style>
+
+<i18n>
+en:
+    You are about to remove {count} rows: '
+        You are about to remove <strong>{count}</strong> row | 
+        You are about to remove  <strong>{count}</strong> rows'
+es:
+    Claimed lines: Líneas reclamadas
+    Delivered: Entregado
+    Quantity: Cantidad
+    Claimed: Reclamada
+    Description: Descripción
+    Price: Precio
+    Discount: Descuento
+    Actions: Acciones
+    Amount: Total
+    Amount Claimed: Cantidad reclamada
+    Delete claimed sales: Eliminar ventas reclamadas
+    Discount updated: Descuento actualizado
+    Claimed quantity: Cantidad reclamada
+    You are about to remove {count} rows: '
+        Vas a eliminar <strong>{count}</strong> línea | 
+        Vas a eliminar <strong>{count}</strong> líneas'
+</i18n>
diff --git a/src/pages/Claim/Card/ClaimLinesImport.vue b/src/pages/Claim/Card/ClaimLinesImport.vue
new file mode 100644
index 000000000..fad1ac3af
--- /dev/null
+++ b/src/pages/Claim/Card/ClaimLinesImport.vue
@@ -0,0 +1,182 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useQuasar, useDialogPluginComponent } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import FetchData from 'components/FetchData.vue';
+import { toDate, toCurrency, toPercentage } from 'filters/index';
+import axios from 'axios';
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+const route = useRoute();
+const quasar = useQuasar();
+const { t } = useI18n();
+
+const columns = computed(() => [
+    {
+        name: 'delivered',
+        label: t('Delivered'),
+        field: (row) => row.landed,
+        format: (value) => toDate(value),
+        sortable: true,
+    },
+    {
+        name: 'quantity',
+        label: t('Quantity'),
+        field: (row) => row.quantity,
+        sortable: true,
+    },
+    {
+        name: 'description',
+        label: t('Description'),
+        field: (row) => row.concept,
+    },
+    {
+        name: 'price',
+        label: t('Price'),
+        field: (row) => row.price,
+        format: (value) => toCurrency(value),
+        sortable: true,
+    },
+    {
+        name: 'discount',
+        label: t('Discount'),
+        field: (row) => row.discount,
+        format: (value) => toPercentage(value),
+        sortable: true,
+    },
+]);
+
+const selected = ref([]);
+const claimableSales = ref([]);
+const isLoading = ref(false);
+let canceller;
+
+async function importLines() {
+    const sales = selected.value;
+
+    if (!sales.length) {
+        return quasar.notify({
+            message: 'You must select at least one',
+            type: 'warning',
+        });
+    }
+
+    const body = sales.map((row) => ({
+        claimFk: route.params.id,
+        saleFk: row.saleFk,
+        quantity: row.quantity,
+    }));
+
+    canceller = new AbortController();
+    isLoading.value = true;
+
+    const { data } = await axios.post('ClaimBeginnings', body, {
+        signal: canceller.signal,
+    });
+
+    quasar.notify({
+        message: 'Lines added to claim',
+        type: 'positive',
+    });
+
+    onDialogOK(data);
+
+    canceller = null;
+    isLoading.value = false;
+}
+
+function cancel() {
+    if (canceller) {
+        canceller.abort();
+        canceller = null;
+    }
+
+    onDialogCancel();
+}
+</script>
+<template>
+    <FetchData
+        url="Sales/getClaimableFromTicket?ticketFk=16"
+        @on-fetch="(data) => (claimableSales = data)"
+        auto-load
+    />
+    <QDialog ref="dialogRef" persistent>
+        <QCard>
+            <QCardSection class="row items-center">
+                <span class="text-h6 text-grey">{{ t('Available sales lines') }}</span>
+                <QSpace />
+                <QBtn icon="close" flat round dense v-close-popup />
+            </QCardSection>
+            <QTable
+                class="my-sticky-header-table"
+                :columns="columns"
+                :rows="claimableSales"
+                :pagination="{ rowsPerPage: 10 }"
+                row-key="saleFk"
+                selection="multiple"
+                v-model:selected="selected"
+                square
+                flat
+            />
+            <QSeparator />
+            <QCardActions align="right">
+                <QBtn :label="t('globals.cancel')" color="primary" flat @click="cancel" />
+                <QBtn
+                    :label="t('globals.confirm')"
+                    color="primary"
+                    :loading="isLoading"
+                    @click="importLines"
+                    unelevated
+                />
+            </QCardActions>
+        </QCard>
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.q-card {
+    max-width: 800px;
+}
+</style>
+
+<style lang="scss">
+.my-sticky-header-table {
+    height: 400px;
+
+    thead tr th {
+        position: sticky;
+        z-index: 1;
+    }
+
+    thead tr:first-child th {
+        /* this is when the loading indicator appears */
+        top: 0;
+    }
+
+    &.q-table--loading thead tr:last-child th {
+        /* height of all previous header rows */
+        top: 48px;
+    }
+
+    // /* prevent scrolling behind sticky top row on focus */
+    tbody {
+        /* height of all previous header rows */
+        scroll-margin-top: 48px;
+    }
+}
+</style>
+
+<i18n>
+es:
+    Available sales lines: Líneas de venta disponibles
+    Delivered: Entrega
+    Quantity: Cantidad
+    Description: Descripción
+    Price: Precio
+    Discount: Descuento
+    Lines added to claim: Lineas añadidas a la reclamación
+    You must select at least one: Debes seleccionar al menos una
+</i18n>
diff --git a/src/pages/Claim/Card/ClaimLog.vue b/src/pages/Claim/Card/ClaimLog.vue
index 7a72a5e53..a5af8c72a 100644
--- a/src/pages/Claim/Card/ClaimLog.vue
+++ b/src/pages/Claim/Card/ClaimLog.vue
@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { useSession } from 'src/composables/useSession';
 import { useStateStore } from 'stores/useStateStore';
-import Paginate from 'src/components/PaginateData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import ClaimLogFilter from './ClaimLogFilter.vue';
 
 import { toDate } from 'src/filters';
@@ -57,9 +57,9 @@ function actionColor(action) {
 </script>
 <template>
     <div class="column items-center">
-        <q-timeline class="q-pa-md">
-            <q-timeline-entry heading tag="h4"> {{ t('Audit logs') }} </q-timeline-entry>
-            <Paginate
+        <QTimeline class="q-pa-md">
+            <QTimelineEntry heading tag="h4"> {{ t('Audit logs') }} </QTimelineEntry>
+            <VnPaginate
                 data-key="ClaimLogs"
                 :url="`Claims/${route.params.id}/logs`"
                 order="id DESC"
@@ -69,7 +69,7 @@ function actionColor(action) {
             >
                 <template #body="{ rows }">
                     <template v-for="log of rows" :key="log.id">
-                        <q-timeline-entry
+                        <QTimelineEntry
                             :avatar="`/api/Images/user/160x160/${log.userFk}/download?access_token=${token}`"
                         >
                             <template #subtitle>
@@ -82,12 +82,12 @@ function actionColor(action) {
                                 }}
                             </template>
                             <template #title>
-                                <q-chip :color="actionColor(log.action)">
+                                <QChip :color="actionColor(log.action)">
                                     {{ t(`actions.${log.action}`) }}
-                                </q-chip>
+                                </QChip>
                                 {{ t(`models.${log.model}`) }}
                             </template>
-                            <q-table
+                            <QTable
                                 :rows="log.changes"
                                 :columns="columns"
                                 row-key="property"
@@ -96,37 +96,37 @@ function actionColor(action) {
                                 flat
                             >
                                 <template #header="props">
-                                    <q-tr :props="props">
-                                        <q-th
+                                    <QTr :props="props">
+                                        <QTh
                                             v-for="col in props.cols"
                                             :key="col.name"
                                             :props="props"
                                         >
                                             {{ t(col.label) }}
-                                        </q-th>
-                                    </q-tr>
+                                        </QTh>
+                                    </QTr>
                                 </template>
-                            </q-table>
-                        </q-timeline-entry>
+                            </QTable>
+                        </QTimelineEntry>
                     </template>
                 </template>
-            </Paginate>
-        </q-timeline>
+            </VnPaginate>
+        </QTimeline>
     </div>
     <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">
         <div class="row q-gutter-x-sm">
-            <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
-                <q-tooltip bottom anchor="bottom right">
+            <QBtn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
+                <QTooltip bottom anchor="bottom right">
                     {{ t('globals.collapseMenu') }}
-                </q-tooltip>
-            </q-btn>
+                </QTooltip>
+            </QBtn>
         </div>
     </Teleport>
-    <q-drawer v-model="stateStore.rightDrawer" show-if-above side="right" :width="300">
-        <q-scroll-area class="fit text-grey-8">
+    <QDrawer v-model="stateStore.rightDrawer" show-if-above side="right" :width="300">
+        <QScrollArea class="fit text-grey-8">
             <ClaimLogFilter data-key="ClaimLogs" />
-        </q-scroll-area>
-    </q-drawer>
+        </QScrollArea>
+    </QDrawer>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Claim/Card/ClaimLogFilter.vue b/src/pages/Claim/Card/ClaimLogFilter.vue
index 33cf823d2..5f4dbf717 100644
--- a/src/pages/Claim/Card/ClaimLogFilter.vue
+++ b/src/pages/Claim/Card/ClaimLogFilter.vue
@@ -16,7 +16,7 @@ const workers = ref();
 </script>
 
 <template>
-    <fetch-data
+    <FetchData
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
         @on-fetch="(data) => (workers = data)"
@@ -30,22 +30,22 @@ const workers = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <q-date
+            <QDate
                 v-model="params.created"
                 @update:model-value="searchFn()"
                 dense
                 flat
                 minimal
             >
-            </q-date>
-            <q-list dense>
-                <q-separator />
-                <q-item>
-                    <q-item-section v-if="!workers">
-                        <q-skeleton type="QInput" class="full-width" />
-                    </q-item-section>
-                    <q-item-section v-if="workers">
-                        <q-select
+            </QDate>
+            <QList dense>
+                <QSeparator />
+                <QItem>
+                    <QItemSection v-if="!workers">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="workers">
+                        <QSelect
                             :label="t('User')"
                             v-model="params.userFk"
                             @update:model-value="searchFn()"
@@ -57,9 +57,9 @@ const workers = ref();
                             use-input
                             :input-debounce="0"
                         />
-                    </q-item-section>
-                </q-item>
-            </q-list>
+                    </QItemSection>
+                </QItem>
+            </QList>
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/Claim/Card/ClaimPhoto.vue b/src/pages/Claim/Card/ClaimPhoto.vue
index 385471ef2..839fbefc9 100644
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/src/pages/Claim/Card/ClaimPhoto.vue
@@ -147,7 +147,7 @@ function onDrag() {
 }
 </script>
 <template>
-    <fetch-data
+    <FetchData
         url="Claims"
         :filter="claimDmsFilter"
         @on-fetch="([data]) => setClaimDms(data)"
@@ -155,13 +155,13 @@ function onDrag() {
         auto-load
         ref="claimDmsRef"
     />
-    <fetch-data
+    <FetchData
         url="DmsTypes/findOne"
         :filter="{ where: { code: 'claim' } }"
         @on-fetch="(data) => (dmsType = data)"
         auto-load
     />
-    <fetch-data
+    <FetchData
         url="UserConfigs/getUserConfig"
         @on-fetch="(data) => (config = data)"
         auto-load
@@ -176,7 +176,7 @@ function onDrag() {
             class="flex flex-center items-center text-grey q-mt-md column"
             v-if="dragFile"
         >
-            <q-icon size="xl" name="file_download" />
+            <QIcon size="xl" name="file_download" />
             <h5>
                 {{ t('claim.photo.dragDrop') }}
             </h5>
@@ -186,8 +186,8 @@ function onDrag() {
             v-if="!claimDms?.length && !dragFile"
             @click="inputFile.nativeEl.click()"
         >
-            <q-icon size="xl" name="image"></q-icon>
-            <q-icon size="xl" name="movie"></q-icon>
+            <QIcon size="xl" name="image"></QIcon>
+            <QIcon size="xl" name="movie"></QIcon>
             <h5>
                 {{ t('claim.photo.noData') }}
             </h5>
@@ -198,7 +198,7 @@ function onDrag() {
                 :key="index"
                 class="relative-position"
             >
-                <q-btn
+                <QBtn
                     icon="delete"
                     color="primary"
                     text-color="white"
@@ -207,7 +207,7 @@ function onDrag() {
                     @click.stop="viewDeleteDms(index)"
                     round
                 />
-                <q-icon
+                <QIcon
                     name="play_circle"
                     color="primary"
                     size="xl"
@@ -215,16 +215,16 @@ function onDrag() {
                     v-if="media.isVideo"
                     @click.stop="openDialog(media.dmsFk)"
                 >
-                    <q-tooltip>Video</q-tooltip>
-                </q-icon>
-                <q-card class="multimedia relative-position">
-                    <q-img
+                    <QTooltip>Video</QTooltip>
+                </QIcon>
+                <QCard class="multimedia relative-position">
+                    <QImg
                         :src="media.url"
                         class="rounded-borders cursor-pointer fit"
                         @click="openDialog(media.dmsFk)"
                         v-if="!media.isVideo"
                     >
-                    </q-img>
+                    </QImg>
                     <video
                         :src="media.url"
                         class="rounded-borders cursor-pointer fit"
@@ -232,7 +232,7 @@ function onDrag() {
                         v-if="media.isVideo"
                         @click="openDialog(media.dmsFk)"
                     />
-                </q-card>
+                </QCard>
             </div>
         </div>
     </div>
@@ -243,14 +243,14 @@ function onDrag() {
     >
         <div class="row q-gutter-x-sm">
             <label for="fileInput">
-                <q-btn
+                <QBtn
                     @click="inputFile.nativeEl.click()"
                     icon="add"
                     color="primary"
                     dense
                     rounded
                 >
-                    <q-input
+                    <QInput
                         ref="inputFile"
                         type="file"
                         style="display: none"
@@ -258,27 +258,27 @@ function onDrag() {
                         v-model="files"
                         @update:model-value="create()"
                     />
-                    <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
-                </q-btn>
+                    <QTooltip bottom> {{ t('globals.add') }} </QTooltip>
+                </QBtn>
             </label>
-            <q-separator vertical />
+            <QSeparator vertical />
         </div>
     </Teleport>
 
-    <q-page-sticky
+    <QPageSticky
         v-if="quasar.platform.is.mobile"
         position="bottom"
         :offset="[0, 0]"
         expand
     >
-        <q-toolbar class="bg-primary text-white q-pa-none">
-            <q-tabs class="full-width" align="justify" inline-label narrow-indicator>
-                <q-tab
+        <QToolbar class="bg-primary text-white q-pa-none">
+            <QTabs class="full-width" align="justify" inline-label narrow-indicator>
+                <QTab
                     @click="inputFile.nativeEl.click()"
                     icon="add_circle"
                     :label="t('globals.add')"
                 >
-                    <q-input
+                    <QInput
                         ref="inputFile"
                         type="file"
                         style="display: none"
@@ -286,29 +286,29 @@ function onDrag() {
                         v-model="files"
                         @update:model-value="create()"
                     />
-                    <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
-                </q-tab>
-            </q-tabs>
-        </q-toolbar>
-    </q-page-sticky>
+                    <QTooltip bottom> {{ t('globals.add') }} </QTooltip>
+                </QTab>
+            </QTabs>
+        </QToolbar>
+    </QPageSticky>
 
     <!-- MULTIMEDIA DIALOG START-->
-    <q-dialog
+    <QDialog
         v-model="multimediaDialog"
         transition-show="slide-up"
         transition-hide="slide-down"
     >
-        <q-toolbar class="absolute zindex close-button">
-            <q-space />
-            <q-btn icon="close" color="primary" round dense v-close-popup />
-        </q-toolbar>
-        <q-carousel swipeable animated v-model="multimediaSlide" arrows class="fit">
-            <q-carousel-slide
+        <QToolbar class="absolute zindex close-button">
+            <QSpace />
+            <QBtn icon="close" color="primary" round dense v-close-popup />
+        </QToolbar>
+        <QCarousel swipeable animated v-model="multimediaSlide" arrows class="fit">
+            <QCarouselSlide
                 v-for="media of claimDms"
                 :key="media.dmsFk"
                 :name="media.dmsFk"
             >
-                <q-img
+                <QImg
                     :src="media.url"
                     class="fit"
                     fit="scale-down"
@@ -317,9 +317,9 @@ function onDrag() {
                 <video class="q-ma-none fit" v-if="media.isVideo" controls muted autoplay>
                     <source :src="media.url" type="video/mp4" />
                 </video>
-            </q-carousel-slide>
-        </q-carousel>
-    </q-dialog>
+            </QCarouselSlide>
+        </QCarousel>
+    </QDialog>
     <!-- MULTIMEDIA DIALOG END-->
 </template>
 
diff --git a/src/pages/Claim/Card/ClaimRma.vue b/src/pages/Claim/Card/ClaimRma.vue
index 2c0fdf428..c59c11845 100644
--- a/src/pages/Claim/Card/ClaimRma.vue
+++ b/src/pages/Claim/Card/ClaimRma.vue
@@ -6,7 +6,7 @@ import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
-import Paginate from 'src/components/PaginateData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import FetchData from 'components/FetchData.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
@@ -86,7 +86,7 @@ async function remove({ id }) {
 }
 </script>
 <template>
-    <fetch-data
+    <FetchData
         :url="`Claims/${route.params.id}`"
         :filter="claimFilter"
         @on-fetch="onFetch"
@@ -94,56 +94,56 @@ async function remove({ id }) {
     />
     <div class="column items-center">
         <div class="list">
-            <paginate data-key="ClaimRma" url="ClaimRmas">
+            <VnPaginate data-key="ClaimRma" url="ClaimRmas">
                 <template #body="{ rows }">
-                    <q-card class="card">
+                    <QCard class="card">
                         <template v-for="(row, index) of rows" :key="row.id">
-                            <q-item class="q-pa-none items-start">
-                                <q-item-section class="q-pa-md">
-                                    <q-list>
-                                        <q-item class="q-pa-none">
-                                            <q-item-section>
-                                                <q-item-label caption>
+                            <QItem class="q-pa-none items-start">
+                                <QItemSection class="q-pa-md">
+                                    <QList>
+                                        <QItem class="q-pa-none">
+                                            <QItemSection>
+                                                <QItemLabel caption>
                                                     {{ t('claim.rma.user') }}
-                                                </q-item-label>
-                                                <q-item-label>
+                                                </QItemLabel>
+                                                <QItemLabel>
                                                     {{ 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>
+                                                </QItemLabel>
+                                            </QItemSection>
+                                        </QItem>
+                                        <QItem class="q-pa-none">
+                                            <QItemSection>
+                                                <QItemLabel caption>
                                                     {{ t('claim.rma.created') }}
-                                                </q-item-label>
-                                                <q-item-label>
+                                                </QItemLabel>
+                                                <QItemLabel>
                                                     {{
                                                         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
+                                                </QItemLabel>
+                                            </QItemSection>
+                                        </QItem>
+                                    </QList>
+                                </QItemSection>
+                                <QCardActions vertical class="justify-between">
+                                    <QBtn
                                         flat
                                         round
                                         color="orange"
                                         icon="vn:bin"
                                         @click="confirmRemove(row.id)"
                                     >
-                                        <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
-                                    </q-btn>
-                                </q-card-actions>
-                            </q-item>
-                            <q-separator v-if="index !== rows.length - 1" />
+                                        <QTooltip>{{ t('globals.remove') }}</QTooltip>
+                                    </QBtn>
+                                </QCardActions>
+                            </QItem>
+                            <QSeparator v-if="index !== rows.length - 1" />
                         </template>
-                    </q-card>
+                    </QCard>
                 </template>
-            </paginate>
+            </VnPaginate>
         </div>
     </div>
 
@@ -152,25 +152,25 @@ async function remove({ id }) {
         to="#actions-prepend"
     >
         <div class="row q-gutter-x-sm">
-            <q-btn @click="addRow()" icon="add" color="primary" dense rounded>
-                <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
-            </q-btn>
-            <q-separator vertical />
+            <QBtn @click="addRow()" icon="add" color="primary" dense rounded>
+                <QTooltip bottom> {{ t('globals.add') }} </QTooltip>
+            </QBtn>
+            <QSeparator vertical />
         </div>
     </Teleport>
 
-    <q-page-sticky
+    <QPageSticky
         v-if="quasar.platform.is.mobile"
         position="bottom"
         :offset="[0, 0]"
         expand
     >
-        <q-toolbar class="bg-primary text-white q-pa-none">
-            <q-tabs class="full-width" align="justify" inline-label narrow-indicator>
-                <q-tab @click="addRow()" icon="add_circle" :label="t('globals.add')" />
-            </q-tabs>
-        </q-toolbar>
-    </q-page-sticky>
+        <QToolbar class="bg-primary text-white q-pa-none">
+            <QTabs class="full-width" align="justify" inline-label narrow-indicator>
+                <QTab @click="addRow()" icon="add_circle" :label="t('globals.add')" />
+            </QTabs>
+        </QToolbar>
+    </QPageSticky>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 77b9a6b27..ac464d125 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -5,9 +5,13 @@ import { useI18n } from 'vue-i18n';
 import { toDate, toCurrency } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
 import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
+import FetchData from 'components/FetchData.vue';
+import { useSession } from 'src/composables/useSession';
 
 const route = useRoute();
 const { t } = useI18n();
+const session = useSession();
+const token = session.getToken();
 
 const $props = defineProps({
     id: {
@@ -76,90 +80,219 @@ function stateColor(code) {
     if (code === 'managed') return 'orange';
     if (code === 'resolved') return 'red';
 }
+
+const developmentColumns = ref([
+    {
+        name: 'claimReason',
+        label: 'claim.summary.reason',
+        field: (row) => row.claimReason.description,
+        sortable: true,
+    },
+    {
+        name: 'claimResult',
+        label: 'claim.summary.result',
+        field: (row) => row.claimResult.description,
+        sortable: true,
+    },
+    {
+        name: 'claimResponsible',
+        label: 'claim.summary.responsible',
+        field: (row) => row.claimResponsible.description,
+        sortable: true,
+    },
+    {
+        name: 'worker',
+        label: 'claim.summary.worker',
+        field: (row) => row.worker.user.nickname,
+        sortable: true,
+    },
+    {
+        name: 'claimRedelivery',
+        label: 'claim.summary.redelivery',
+        field: (row) => row.claimRedelivery.description,
+        sortable: true,
+    },
+]);
+const claimDms = ref([]);
+const multimediaDialog = ref();
+const multimediaSlide = ref();
+const claimDmsFilter = ref({
+    include: [
+        {
+            relation: 'dms',
+        },
+    ],
+    where: { claimFk: entityId.value },
+});
+
+function setClaimDms(data) {
+    if (!data) return;
+
+    data.forEach((media) => {
+        claimDms.value.push({
+            isVideo: media.dms.contentType == 'video/mp4',
+            url: `/api/Claims/${media.dmsFk}/downloadFile?access_token=${token}`,
+            dmsFk: media.dmsFk,
+        });
+    });
+}
+
+function openDialog(dmsId) {
+    multimediaSlide.value = dmsId;
+    multimediaDialog.value = true;
+}
 </script>
 
 <template>
-    <card-summary ref="summary" :url="`Claims/${entityId}/getSummary`">
+    <FetchData
+        url="ClaimDms"
+        :filter="claimDmsFilter"
+        @on-fetch="(data) => setClaimDms(data)"
+        limit="20"
+        auto-load
+    />
+    <CardSummary ref="summary" :url="`Claims/${entityId}/getSummary`">
         <template #header="{ entity: { claim } }">
             {{ claim.id }} - {{ claim.client.name }}
         </template>
-        <template #body="{ entity: { claim, salesClaimed } }">
-            <q-card-section class="row q-pa-none q-col-gutter-md">
+        <template #body="{ entity: { developments, observations, claim, salesClaimed } }">
+            <QCardSection class="row q-pa-none q-col-gutter-md">
                 <div class="col">
-                    <q-list>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                    <QList>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('claim.summary.created') }}
-                                </q-item-label>
-                                <q-item-label>{{ toDate(claim.created) }}</q-item-label>
-                            </q-item-section>
-                            <q-item-section v-if="claim.claimState">
-                                <q-item-label caption>{{
-                                    t('claim.summary.state')
-                                }}</q-item-label>
-                                <q-item-label>
-                                    <q-chip
+                                </QItemLabel>
+                                <QItemLabel>{{ toDate(claim.created) }}</QItemLabel>
+                            </QItemSection>
+                            <QItemSection v-if="claim.claimState">
+                                <QItemLabel caption>
+                                    {{ t('claim.summary.state') }}
+                                </QItemLabel>
+                                <QItemLabel>
+                                    <QChip
                                         :color="stateColor(claim.claimState.code)"
                                         dense
                                     >
                                         {{ claim.claimState.description }}
-                                    </q-chip>
-                                </q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item>
-                            <q-item-section v-if="claim.worker && claim.worker.user">
-                                <q-item-label caption>
+                                    </QChip>
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem>
+                            <QItemSection v-if="claim.worker && claim.worker.user">
+                                <QItemLabel caption>
                                     {{ t('claim.summary.assignedTo') }}
-                                </q-item-label>
-                                <q-item-label>
+                                </QItemLabel>
+                                <QItemLabel>
                                     <span class="link">
                                         {{ claim.worker.user.nickname }}
                                         <WorkerDescriptorProxy :id="claim.workerFk" />
                                     </span>
-                                </q-item-label>
-                            </q-item-section>
-                            <q-item-section
+                                </QItemLabel>
+                            </QItemSection>
+                            <QItemSection
                                 v-if="claim.client && claim.client.salesPersonUser"
                             >
-                                <q-item-label caption>
+                                <QItemLabel caption>
                                     {{ t('claim.summary.attendedBy') }}
-                                </q-item-label>
-                                <q-item-label>
+                                </QItemLabel>
+                                <QItemLabel>
                                     <span class="link">
                                         {{ claim.client.salesPersonUser.name }}
                                         <WorkerDescriptorProxy
                                             :id="claim.client.salesPersonFk"
                                         />
                                     </span>
-                                </q-item-label>
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QList>
                 </div>
-            </q-card-section>
-            <q-card-section class="q-pa-md">
+            </QCardSection>
+            <QCardSection class="q-pa-md" v-if="observations.length > 0">
+                <h6>{{ t('claim.summary.notes') }}</h6>
+                <div class="note-list" v-for="note in observations" :key="note.id">
+                    <div class="note-caption">
+                        <span
+                            >{{ note.worker.firstName }} {{ note.worker.lastName }}
+                        </span>
+                        <span>{{ toDate(note.created) }}</span>
+                    </div>
+                    <div class="note-text">
+                        <span>{{ note.text }}</span>
+                    </div>
+                </div>
+            </QCardSection>
+            <QCardSection class="q-pa-md" v-if="salesClaimed.length > 0">
                 <h6>{{ t('claim.summary.details') }}</h6>
-                <q-table :columns="detailsColumns" :rows="salesClaimed" flat>
+                <QTable :columns="detailsColumns" :rows="salesClaimed" flat>
                     <template #header="props">
-                        <q-tr :props="props">
-                            <q-th
-                                v-for="col in props.cols"
-                                :key="col.name"
-                                :props="props"
-                            >
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
                                 {{ t(col.label) }}
-                            </q-th>
-                        </q-tr>
+                            </QTh>
+                        </QTr>
                     </template>
-                </q-table>
-            </q-card-section>
-            <q-card-section class="q-pa-md">
+                </QTable>
+            </QCardSection>
+            <QCardSection class="q-pa-md" v-if="claimDms.length > 0">
+                <h6>{{ t('claim.summary.photos') }}</h6>
+                <div class="container">
+                    <div class="multimediaParent bg-transparent">
+                        <div
+                            v-for="(media, index) of claimDms"
+                            :key="index"
+                            class="relative-position"
+                        >
+                            <QIcon
+                                name="play_circle"
+                                color="primary"
+                                size="xl"
+                                class="absolute-center zindex"
+                                v-if="media.isVideo"
+                                @click.stop="openDialog(media.dmsFk)"
+                            >
+                                <QTooltip>Video</QTooltip>
+                            </QIcon>
+                            <QCard class="multimedia relative-position">
+                                <QImg
+                                    :src="media.url"
+                                    class="rounded-borders cursor-pointer fit"
+                                    @click="openDialog(media.dmsFk)"
+                                    v-if="!media.isVideo"
+                                >
+                                </QImg>
+                                <video
+                                    :src="media.url"
+                                    class="rounded-borders cursor-pointer fit"
+                                    muted="muted"
+                                    v-if="media.isVideo"
+                                    @click="openDialog(media.dmsFk)"
+                                />
+                            </QCard>
+                        </div>
+                    </div>
+                </div>
+            </QCardSection>
+            <QCardSection class="q-pa-md" v-if="developments.length > 0">
+                <h6>{{ t('claim.summary.development') }}</h6>
+                <QTable :columns="developmentColumns" :rows="developments" flat>
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCardSection>
+            <QCardSection class="q-pa-md">
                 <h6>{{ t('claim.summary.actions') }}</h6>
-                <q-separator />
+                <QSeparator />
                 <div id="slider-container">
-                    <q-slider
+                    <QSlider
                         v-model="claim.responsibility"
                         label
                         :label-value="t('claim.summary.responsibility')"
@@ -175,7 +308,105 @@ function stateColor(code) {
                         readonly
                     />
                 </div>
-            </q-card-section>
+            </QCardSection>
+            <QDialog
+                v-model="multimediaDialog"
+                transition-show="slide-up"
+                transition-hide="slide-down"
+            >
+                <QToolbar class="absolute zindex close-button">
+                    <QSpace />
+                    <QBtn icon="close" color="primary" round dense v-close-popup />
+                </QToolbar>
+                <QCarousel
+                    swipeable
+                    animated
+                    v-model="multimediaSlide"
+                    arrows
+                    class="fit"
+                >
+                    <QCarouselSlide
+                        v-for="media of claimDms"
+                        :key="media.dmsFk"
+                        :name="media.dmsFk"
+                    >
+                        <QImg
+                            :src="media.url"
+                            class="fit"
+                            fit="scale-down"
+                            v-if="!media.isVideo"
+                        />
+                        <video
+                            class="q-ma-none fit"
+                            v-if="media.isVideo"
+                            controls
+                            muted
+                            autoplay
+                        >
+                            <source :src="media.url" type="video/mp4" />
+                        </video>
+                    </QCarouselSlide>
+                </QCarousel>
+            </QDialog>
         </template>
-    </card-summary>
+    </CardSummary>
 </template>
+<style lang="scss" scoped>
+.container {
+    min-width: 80%;
+}
+.q-dialog__inner--minimized > div {
+    max-width: 80%;
+}
+
+.multimediaParent {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+
+    grid-auto-rows: auto;
+
+    grid-gap: 1rem;
+}
+
+.multimedia {
+    transition: all 0.5s;
+    opacity: 1;
+    height: 250px;
+
+    .q-img {
+        object-fit: cover;
+        background-color: black;
+    }
+    video {
+        object-fit: cover;
+        background-color: black;
+    }
+}
+
+.multimedia:hover {
+    opacity: 0.5;
+}
+
+.close-button {
+    top: 1%;
+    right: 10%;
+}
+
+.zindex {
+    z-index: 1;
+}
+
+.note-list {
+    width: 100%;
+    border: 0.1rem solid $grey-7;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.note-caption {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+    color: $grey-7;
+}
+</style>
diff --git a/src/pages/Claim/Card/ClaimSummaryDialog.vue b/src/pages/Claim/Card/ClaimSummaryDialog.vue
index 4364f28ab..5a2b965eb 100644
--- a/src/pages/Claim/Card/ClaimSummaryDialog.vue
+++ b/src/pages/Claim/Card/ClaimSummaryDialog.vue
@@ -15,9 +15,9 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
 </script>
 
 <template>
-    <q-dialog ref="dialogRef" @hide="onDialogHide">
-        <claim-summary v-if="$props.id" :id="$props.id" />
-    </q-dialog>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <ClaimSummary v-if="$props.id" :id="$props.id" />
+    </QDialog>
 </template>
 
 <style lang="scss">
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index dc33d1808..5918712fd 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -17,8 +17,8 @@ const states = ref();
 </script>
 
 <template>
-    <fetch-data url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
-    <fetch-data
+    <FetchData url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
+    <FetchData
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
         @on-fetch="(data) => (workers = data)"
@@ -32,35 +32,35 @@ const states = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <q-list dense>
-                <q-item>
-                    <q-item-section>
-                        <q-input
+            <QList dense>
+                <QItem>
+                    <QItemSection>
+                        <QInput
                             :label="t('Customer ID')"
                             v-model="params.clientFk"
                             lazy-rules
                         >
                             <template #prepend>
-                                <q-icon name="badge" size="sm"></q-icon>
+                                <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
                             :label="t('Client Name')"
                             v-model="params.clientName"
                             lazy-rules
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section v-if="!workers">
-                        <q-skeleton type="QInput" class="full-width" />
-                    </q-item-section>
-                    <q-item-section v-if="workers">
-                        <q-select
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="!workers">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="workers">
+                        <QSelect
                             :label="t('Salesperson')"
                             v-model="params.salesPersonFk"
                             @update:model-value="searchFn()"
@@ -72,14 +72,14 @@ const states = ref();
                             use-input
                             :input-debounce="0"
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section v-if="!workers">
-                        <q-skeleton type="QInput" class="full-width" />
-                    </q-item-section>
-                    <q-item-section v-if="workers">
-                        <q-select
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="!workers">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="workers">
+                        <QSelect
                             :label="t('Attender')"
                             v-model="params.attenderFk"
                             @update:model-value="searchFn()"
@@ -91,14 +91,14 @@ const states = ref();
                             use-input
                             :input-debounce="0"
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section v-if="!workers">
-                        <q-skeleton type="QInput" class="full-width" />
-                    </q-item-section>
-                    <q-item-section v-if="workers">
-                        <q-select
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="!workers">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="workers">
+                        <QSelect
                             :label="t('Responsible')"
                             v-model="params.claimResponsibleFk"
                             @update:model-value="searchFn()"
@@ -110,14 +110,14 @@ const states = ref();
                             use-input
                             :input-debounce="0"
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item class="q-mb-md">
-                    <q-item-section v-if="!states">
-                        <q-skeleton type="QInput" class="full-width" />
-                    </q-item-section>
-                    <q-item-section v-if="states">
-                        <q-select
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-md">
+                    <QItemSection v-if="!states">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="states">
+                        <QSelect
                             :label="t('State')"
                             v-model="params.claimStateFk"
                             @update:model-value="searchFn()"
@@ -127,13 +127,13 @@ const states = ref();
                             emit-value
                             map-options
                         />
-                    </q-item-section>
-                </q-item>
-                <q-separator />
-                <q-expansion-item :label="t('More options')" expand-separator>
-                    <!-- <q-item>
-                        <q-item-section>
-                            <q-select
+                    </QItemSection>
+                </QItem>
+                <QSeparator />
+                <QExpansionItem :label="t('More options')" expand-separator>
+                    <!-- <QItem>
+                        <QItemSection>
+                            <qSelect
                                 :label="t('Item')"
                                 v-model="params.itemFk"
                                 :options="items"
@@ -145,41 +145,41 @@ const states = ref();
                                 emit-value
                                 map-options
                             />
-                        </q-item-section>
-                    </q-item> -->
-                    <q-item>
-                        <q-item-section>
-                            <q-input
+                        </QItemSection>
+                    </QItem> -->
+                    <QItem>
+                        <QItemSection>
+                            <QInput
                                 v-model="params.created"
                                 :label="t('Created')"
                                 autofocus
                                 readonly
                             >
                                 <template #append>
-                                    <q-icon name="event" class="cursor-pointer">
-                                        <q-popup-proxy
+                                    <QIcon name="event" class="cursor-pointer">
+                                        <QPopupProxy
                                             cover
                                             transition-show="scale"
                                             transition-hide="scale"
                                         >
-                                            <q-date v-model="params.created">
+                                            <QDate v-model="params.created">
                                                 <div class="row items-center justify-end">
-                                                    <q-btn
+                                                    <QBtn
                                                         v-close-popup
                                                         label="Close"
                                                         color="primary"
                                                         flat
                                                     />
                                                 </div>
-                                            </q-date>
-                                        </q-popup-proxy>
-                                    </q-icon>
+                                            </QDate>
+                                        </QPopupProxy>
+                                    </QIcon>
                                 </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                </q-expansion-item>
-            </q-list>
+                            </QInput>
+                        </QItemSection>
+                    </QItem>
+                </QExpansionItem>
+            </QList>
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 05c074ee0..f9afa7177 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
-import Paginate from 'components/PaginateData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
@@ -46,143 +46,148 @@ function viewSummary(id) {
         </Teleport>
         <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
-                <q-btn
+                <QBtn
                     flat
                     @click="stateStore.toggleRightDrawer()"
                     round
                     dense
                     icon="menu"
                 >
-                    <q-tooltip bottom anchor="bottom right">
+                    <QTooltip bottom anchor="bottom right">
                         {{ t('globals.collapseMenu') }}
-                    </q-tooltip>
-                </q-btn>
+                    </QTooltip>
+                </QBtn>
             </div>
         </Teleport>
     </template>
-    <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <q-scroll-area class="fit text-grey-8">
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
             <ClaimFilter data-key="ClaimList" />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page class="column items-center q-pa-md">
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
         <div class="card-list">
-            <paginate data-key="ClaimList" url="Claims/filter" order="id DESC" auto-load>
+            <VnPaginate
+                data-key="ClaimList"
+                url="Claims/filter"
+                order="id DESC"
+                auto-load
+            >
                 <template #body="{ rows }">
-                    <q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <q-item
+                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <QItem
                             class="q-pa-none items-start cursor-pointer q-hoverable"
                             v-ripple
                             clickable
                         >
-                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
                                 <div class="text-h6 link">
                                     {{ row.clientName }}
                                 </div>
-                                <q-item-label caption>#{{ row.id }}</q-item-label>
-                                <q-list>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
+                                <QList>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('claim.list.customer') }}
-                                            </q-item-label>
-                                            <q-item-label>
+                                            </QItemLabel>
+                                            <QItemLabel>
                                                 {{ row.clientName }}
-                                            </q-item-label>
-                                        </q-item-section>
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                        </QItemSection>
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('claim.list.assignedTo') }}
-                                            </q-item-label>
-                                            <q-item-label>
+                                            </QItemLabel>
+                                            <QItemLabel>
                                                 {{ row.workerName }}
-                                            </q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('claim.list.created') }}
-                                            </q-item-label>
-                                            <q-item-label>
+                                            </QItemLabel>
+                                            <QItemLabel>
                                                 {{ toDate(row.created) }}
-                                            </q-item-label>
-                                        </q-item-section>
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                        </QItemSection>
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('claim.list.state') }}
-                                            </q-item-label>
-                                            <q-item-label>
-                                                <q-badge
+                                            </QItemLabel>
+                                            <QItemLabel>
+                                                <QBadge
                                                     :color="stateColor(row.stateCode)"
                                                     class="q-ma-none"
                                                     dense
                                                 >
                                                     {{ row.stateDescription }}
-                                                </q-badge>
-                                            </q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                </q-list>
-                            </q-item-section>
-                            <q-separator vertical />
-                            <q-card-actions vertical class="justify-between">
-                                <!-- <q-btn color="grey-7" round flat icon="more_vert">
-                                <q-tooltip>{{ t('customer.list.moreOptions') }}</q-tooltip>
-                                <q-menu cover auto-close>
-                                    <q-list>
-                                        <q-item clickable>
-                                            <q-item-section avatar>
-                                                <q-icon name="add" />
-                                            </q-item-section>
-                                            <q-item-section>Add a note</q-item-section>
-                                        </q-item>
-                                        <q-item clickable>
-                                            <q-item-section avatar>
-                                                <q-icon name="logs" />
-                                            </q-item-section>
-                                            <q-item-section>Display claim logs</q-item-section>
-                                        </q-item>
-                                    </q-list>
-                                </q-menu>
-                            </q-btn> -->
+                                                </QBadge>
+                                            </QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                </QList>
+                            </QItemSection>
+                            <QSeparator vertical />
+                            <QCardActions vertical class="justify-between">
+                                <!-- <QBtn color="grey-7" round flat icon="more_vert">
+                                <QTooltip>{{ t('customer.list.moreOptions') }}</QTooltip>
+                                <QMenu cover auto-close>
+                                    <QList>
+                                        <QItem clickable>
+                                            <QItemSection avatar>
+                                                <QIcon name="add" />
+                                            </QItemSection>
+                                            <QItemSection>Add a note</QItemSection>
+                                        </QItem>
+                                        <QItem clickable>
+                                            <QItemSection avatar>
+                                                <QIcon name="logs" />
+                                            </QItemSection>
+                                            <QItemSection>Display claim logs</QItemSection>
+                                        </QItem>
+                                    </QList>
+                                </QMenu>
+                            </QBtn> -->
 
-                                <q-btn
+                                <QBtn
                                     flat
                                     round
                                     color="orange"
                                     icon="arrow_circle_right"
                                     @click="navigate(row.id)"
                                 >
-                                    <q-tooltip>
+                                    <QTooltip>
                                         {{ t('components.smartCard.openCard') }}
-                                    </q-tooltip>
-                                </q-btn>
-                                <q-btn
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn
                                     flat
                                     round
                                     color="grey-7"
                                     icon="preview"
                                     @click="viewSummary(row.id)"
                                 >
-                                    <q-tooltip>
+                                    <QTooltip>
                                         {{ t('components.smartCard.openSummary') }}
-                                    </q-tooltip>
-                                </q-btn>
-                                <q-btn flat round color="grey-7" icon="vn:client">
-                                    <q-tooltip>
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn flat round color="grey-7" icon="vn:client">
+                                    <QTooltip>
                                         {{ t('components.smartCard.viewDescription') }}
-                                    </q-tooltip>
+                                    </QTooltip>
 
                                     <CustomerDescriptorProxy :id="row.clientFk" />
-                                </q-btn>
-                            </q-card-actions>
-                        </q-item>
-                    </q-card>
+                                </QBtn>
+                            </QCardActions>
+                        </QItem>
+                    </QCard>
                 </template>
-            </paginate>
+            </VnPaginate>
         </div>
-    </q-page>
+    </QPage>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Claim/ClaimMain.vue b/src/pages/Claim/ClaimMain.vue
index e4350a6e7..f0dc2e500 100644
--- a/src/pages/Claim/ClaimMain.vue
+++ b/src/pages/Claim/ClaimMain.vue
@@ -6,12 +6,12 @@ const stateStore = useStateStore();
 </script>
 
 <template>
-    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <q-scroll-area class="fit text-grey-8">
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
             <LeftMenu />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page-container>
-        <router-view></router-view>
-    </q-page-container>
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
 </template>
diff --git a/src/pages/Claim/ClaimRmaList.vue b/src/pages/Claim/ClaimRmaList.vue
index dcb586e73..8eac83b1e 100644
--- a/src/pages/Claim/ClaimRmaList.vue
+++ b/src/pages/Claim/ClaimRmaList.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import axios from 'axios';
-import Paginate from 'src/components/PaginateData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
@@ -61,11 +61,11 @@ async function remove({ id }) {
 </script>
 
 <template>
-    <q-page class="column items-center q-pa-md sticky">
-        <q-page-sticky expand position="top" :offset="[16, 16]">
-            <q-card class="card q-pa-md">
-                <q-form @submit="submit">
-                    <q-input
+    <QPage class="column items-center q-pa-md sticky">
+        <QPageSticky expand position="top" :offset="[16, 16]">
+            <QCard class="card q-pa-md">
+                <QForm @submit="submit">
+                    <QInput
                         ref="input"
                         v-model="newRma.code"
                         :label="t('claim.rmaList.code')"
@@ -78,11 +78,11 @@ async function remove({ id }) {
                     <div class="text-caption">
                         {{ arrayData.totalRows }} {{ t('claim.rmaList.records') }}
                     </div>
-                </q-form>
-            </q-card>
-        </q-page-sticky>
+                </QForm>
+            </QCard>
+        </QPageSticky>
         <div class="card-list">
-            <paginate
+            <VnPaginate
                 data-key="ClaimRmaList"
                 url="ClaimRmas"
                 order="id DESC"
@@ -90,68 +90,66 @@ async function remove({ id }) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <q-card class="card">
+                    <QCard class="card">
                         <template v-if="isLoading">
-                            <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>
-                                                    <q-skeleton />
-                                                </q-item-label>
-                                                <q-item-label
-                                                    ><q-skeleton type="text"
-                                                /></q-item-label>
-                                            </q-item-section>
-                                        </q-item>
-                                    </q-list>
-                                </q-item-section>
-                                <q-card-actions vertical class="justify-between">
-                                    <q-skeleton
+                            <QItem class="q-pa-none items-start">
+                                <QItemSection class="q-pa-md">
+                                    <QList>
+                                        <QItem class="q-pa-none">
+                                            <QItemSection>
+                                                <QItemLabel caption>
+                                                    <QSkeleton />
+                                                </QItemLabel>
+                                                <QItemLabel>
+                                                    <QSkeleton type="text" />
+                                                </QItemLabel>
+                                            </QItemSection>
+                                        </QItem>
+                                    </QList>
+                                </QItemSection>
+                                <QCardActions vertical class="justify-between">
+                                    <QSkeleton
                                         type="circle"
                                         class="q-mb-md"
                                         size="40px"
                                     />
-                                </q-card-actions>
-                            </q-item>
-                            <q-separator />
+                                </QCardActions>
+                            </QItem>
+                            <QSeparator />
                         </template>
                         <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>{{
+                            <QItem class="q-pa-none items-start">
+                                <QItemSection class="q-pa-md">
+                                    <QList>
+                                        <QItem class="q-pa-none">
+                                            <QItemSection>
+                                                <QItemLabel caption>{{
                                                     t('claim.rmaList.code')
-                                                }}</q-item-label>
-                                                <q-item-label>{{
-                                                    row.code
-                                                }}</q-item-label>
-                                            </q-item-section>
-                                        </q-item>
-                                    </q-list>
-                                </q-item-section>
-                                <q-card-actions vertical class="justify-between">
-                                    <q-btn
+                                                }}</QItemLabel>
+                                                <QItemLabel>{{ row.code }}</QItemLabel>
+                                            </QItemSection>
+                                        </QItem>
+                                    </QList>
+                                </QItemSection>
+                                <QCardActions vertical class="justify-between">
+                                    <QBtn
                                         flat
                                         round
                                         color="primary"
                                         icon="vn:bin"
                                         @click="confirm(row.id)"
                                     >
-                                        <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
-                                    </q-btn>
-                                </q-card-actions>
-                            </q-item>
-                            <q-separator />
+                                        <QTooltip>{{ t('globals.remove') }}</QTooltip>
+                                    </QBtn>
+                                </QCardActions>
+                            </QItem>
+                            <QSeparator />
                         </template>
-                    </q-card>
+                    </QCard>
                 </template>
-            </paginate>
+            </VnPaginate>
         </div>
-    </q-page>
+    </QPage>
 </template>
 
 <style lang="scss" scoped>
@@ -159,7 +157,8 @@ async function remove({ id }) {
     padding-top: 156px;
 }
 
-.card-list, .card {
+.card-list,
+.card {
     width: 100%;
     max-width: 60em;
 }
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 892817513..ffd3c3476 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -59,12 +59,12 @@ const filterOptions = {
         auto-load
     />
     <div class="column items-center">
-        <q-card>
-            <form-model :url="`Clients/${route.params.id}`" model="customer">
+        <QCard>
+            <FormModel :url="`Clients/${route.params.id}`" model="customer">
                 <template #form="{ data, validate, filter }">
                     <div class="row q-gutter-md q-mb-md">
                         <div class="col">
-                            <q-input
+                            <QInput
                                 v-model="data.socialName"
                                 :label="t('customer.basicData.socialName')"
                                 :rules="validate('client.socialName')"
@@ -72,7 +72,7 @@ const filterOptions = {
                             />
                         </div>
                         <div class="col">
-                            <q-select
+                            <QSelect
                                 v-model="data.businessTypeFk"
                                 :options="businessTypes"
                                 option-value="code"
@@ -87,7 +87,7 @@ const filterOptions = {
                     </div>
                     <div class="row q-gutter-md q-mb-md">
                         <div class="col">
-                            <q-input
+                            <QInput
                                 v-model="data.contact"
                                 :label="t('customer.basicData.contact')"
                                 :rules="validate('client.contact')"
@@ -95,7 +95,7 @@ const filterOptions = {
                             />
                         </div>
                         <div class="col">
-                            <q-input
+                            <QInput
                                 v-model="data.email"
                                 type="email"
                                 :label="t('customer.basicData.email')"
@@ -106,7 +106,7 @@ const filterOptions = {
                     </div>
                     <div class="row q-gutter-md q-mb-md">
                         <div class="col">
-                            <q-input
+                            <QInput
                                 v-model="data.phone"
                                 :label="t('customer.basicData.phone')"
                                 :rules="validate('client.phone')"
@@ -114,7 +114,7 @@ const filterOptions = {
                             />
                         </div>
                         <div class="col">
-                            <q-input
+                            <QInput
                                 v-model="data.mobile"
                                 :label="t('customer.basicData.mobile')"
                                 :rules="validate('client.mobile')"
@@ -124,7 +124,7 @@ const filterOptions = {
                     </div>
                     <div class="row q-gutter-md q-mb-md">
                         <div class="col">
-                            <q-select
+                            <QSelect
                                 v-model="data.salesPersonFk"
                                 :options="workers"
                                 option-value="id"
@@ -141,18 +141,18 @@ const filterOptions = {
                                 :input-debounce="0"
                             >
                                 <template #prepend>
-                                    <q-avatar color="orange">
-                                        <q-img
+                                    <QAvatar color="orange">
+                                        <QImg
                                             v-if="data.salesPersonFk"
                                             :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
                                             spinner-color="white"
                                         />
-                                    </q-avatar>
+                                    </QAvatar>
                                 </template>
-                            </q-select>
+                            </QSelect>
                         </div>
                         <div class="col">
-                            <q-select
+                            <QSelect
                                 v-model="data.contactChannelFk"
                                 :options="contactChannels"
                                 option-value="id"
@@ -166,8 +166,8 @@ const filterOptions = {
                         </div>
                     </div>
                 </template>
-            </form-model>
-        </q-card>
+            </FormModel>
+        </QCard>
     </div>
 </template>
 
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index e3c349a4a..3a1c28d18 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -17,18 +17,18 @@ const { t } = useI18n();
             :info="t('You can search by customer id or name')"
         />
     </Teleport>
-    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <q-scroll-area class="fit">
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
             <CustomerDescriptor />
-            <q-separator />
-            <left-menu source="card" />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page-container>
-        <q-page class="q-pa-md">
-            <router-view></router-view>
-        </q-page>
-    </q-page-container>
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage class="q-pa-md">
+            <RouterView></RouterView>
+        </QPage>
+    </QPageContainer>
 </template>
 
 <i18n>
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 91a644c71..8463e0390 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -23,97 +23,97 @@ const entityId = computed(() => {
 </script>
 
 <template>
-    <card-descriptor module="Customer" :url="`Clients/${entityId}/getCard`">
+    <CardDescriptor module="Customer" :url="`Clients/${entityId}/getCard`">
         <template #body="{ entity }">
-            <q-list dense>
-                <q-item v-if="entity.salesPersonUser" class="row">
-                    <q-item-label class="col" caption>
+            <QList dense>
+                <QItem v-if="entity.salesPersonUser" class="row">
+                    <QItemLabel class="col" caption>
                         {{ t('customer.card.salesPerson') }}
-                    </q-item-label>
-                    <q-item-label class="col q-ma-none">
+                    </QItemLabel>
+                    <QItemLabel class="col q-ma-none">
                         <span class="link">
                             {{ entity.salesPersonUser.name }}
                             <WorkerDescriptorProxy :id="entity.salesPersonFk" />
                         </span>
-                    </q-item-label>
-                </q-item>
-                <q-item class="row">
-                    <q-item-label class="col" caption>
+                    </QItemLabel>
+                </QItem>
+                <QItem class="row">
+                    <QItemLabel class="col" caption>
                         {{ t('customer.card.credit') }}
-                    </q-item-label>
-                    <q-item-label class="col q-ma-none">
+                    </QItemLabel>
+                    <QItemLabel class="col q-ma-none">
                         {{ toCurrency(entity.credit) }}
-                    </q-item-label>
-                </q-item>
-                <q-item class="row">
-                    <q-item-label class="col" caption>
+                    </QItemLabel>
+                </QItem>
+                <QItem class="row">
+                    <QItemLabel class="col" caption>
                         {{ t('customer.card.securedCredit') }}
-                    </q-item-label>
-                    <q-item-label class="col q-ma-none">
+                    </QItemLabel>
+                    <QItemLabel class="col q-ma-none">
                         {{ toCurrency(entity.creditInsurance) }}
-                    </q-item-label>
-                </q-item>
-                <q-item v-if="entity.payMethod" class="row">
-                    <q-item-label class="col" caption>
+                    </QItemLabel>
+                </QItem>
+                <QItem v-if="entity.payMethod" class="row">
+                    <QItemLabel class="col" caption>
                         {{ t('customer.card.payMethod') }}
-                    </q-item-label>
-                    <q-item-label class="col q-ma-none">
+                    </QItemLabel>
+                    <QItemLabel class="col q-ma-none">
                         {{ entity.payMethod.name }}
-                    </q-item-label>
-                </q-item>
-                <q-item class="row">
-                    <q-item-label class="col" caption>
+                    </QItemLabel>
+                </QItem>
+                <QItem class="row">
+                    <QItemLabel class="col" caption>
                         {{ t('customer.card.debt') }}
-                    </q-item-label>
-                    <q-item-label class="col q-ma-none">
+                    </QItemLabel>
+                    <QItemLabel class="col q-ma-none">
                         {{ toCurrency(entity.debt) }}
-                    </q-item-label>
-                </q-item>
-            </q-list>
-            <q-card-actions class="q-gutter-md">
-                <q-icon
+                    </QItemLabel>
+                </QItem>
+            </QList>
+            <QCardActions class="q-gutter-md">
+                <QIcon
                     v-if="entity.isActive == false"
                     name="vn:disabled"
                     size="xs"
                     color="primary"
                 >
-                    <q-tooltip>{{ t('customer.card.isDisabled') }}</q-tooltip>
-                </q-icon>
-                <q-icon
+                    <QTooltip>{{ t('customer.card.isDisabled') }}</QTooltip>
+                </QIcon>
+                <QIcon
                     v-if="entity.isFreezed == true"
                     name="vn:frozen"
                     size="xs"
                     color="primary"
                 >
-                    <q-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
-                </q-icon>
-                <q-icon
+                    <QTooltip>{{ t('customer.card.isFrozen') }}</QTooltip>
+                </QIcon>
+                <QIcon
                     v-if="entity.debt > entity.credit"
                     name="vn:risk"
                     size="xs"
                     color="primary"
                 >
-                    <q-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
-                </q-icon>
-                <q-icon
+                    <QTooltip>{{ t('customer.card.hasDebt') }}</QTooltip>
+                </QIcon>
+                <QIcon
                     v-if="entity.isTaxDataChecked == false"
                     name="vn:no036"
                     size="xs"
                     color="primary"
                 >
-                    <q-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
-                </q-icon>
-                <q-icon
+                    <QTooltip>{{ t('customer.card.notChecked') }}</QTooltip>
+                </QIcon>
+                <QIcon
                     v-if="entity.account && entity.account.active == false"
                     name="vn:noweb"
                     size="xs"
                     color="primary"
                 >
-                    <q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
-                </q-icon>
-            </q-card-actions>
-            <q-card-actions>
-                <q-btn
+                    <QTooltip>{{ t('customer.card.noWebAccess') }}</QTooltip>
+                </QIcon>
+            </QCardActions>
+            <QCardActions>
+                <QBtn
                     :to="{
                         name: 'TicketList',
                         query: { params: JSON.stringify({ clientFk: entity.id }) },
@@ -122,9 +122,9 @@ const entityId = computed(() => {
                     icon="vn:ticket"
                     color="primary"
                 >
-                    <q-tooltip>{{ t('ticketList') }}</q-tooltip>
-                </q-btn>
-                <q-btn
+                    <QTooltip>{{ t('ticketList') }}</QTooltip>
+                </QBtn>
+                <QBtn
                     :to="{
                         name: 'InvoiceOutList',
                         query: { params: JSON.stringify({ clientFk: entity.id }) },
@@ -133,23 +133,23 @@ const entityId = computed(() => {
                     icon="vn:invoice-out"
                     color="primary"
                 >
-                    <q-tooltip>{{ t('invoiceOutList') }}</q-tooltip>
-                </q-btn>
+                    <QTooltip>{{ t('invoiceOutList') }}</QTooltip>
+                </QBtn>
                 <!-- 
-                <q-btn size="md" icon="vn:basketadd" color="primary">
-                    <q-tooltip>Order list</q-tooltip>
-                </q-btn>
+                <QBtn size="md" icon="vn:basketadd" color="primary">
+                    <QTooltip>Order list</QTooltip>
+                </QBtn>
 
-                <q-btn size="md" icon="face" color="primary">
-                    <q-tooltip>View user</q-tooltip>
-                </q-btn>
+                <QBtn size="md" icon="face" color="primary">
+                    <QTooltip>View user</QTooltip>
+                </QBtn>
 
-                <q-btn size="md" icon="expand_more" color="primary">
-                    <q-tooltip>More options</q-tooltip>
-                </q-btn> -->
-            </q-card-actions>
+                <QBtn size="md" icon="expand_more" color="primary">
+                    <QTooltip>More options</QTooltip>
+                </QBtn> -->
+            </QCardActions>
         </template>
-    </card-descriptor>
+    </CardDescriptor>
 </template>
 
 <i18n>
diff --git a/src/pages/Customer/Card/CustomerDescriptorProxy.vue b/src/pages/Customer/Card/CustomerDescriptorProxy.vue
index 6e69ca1a0..84a69c026 100644
--- a/src/pages/Customer/Card/CustomerDescriptorProxy.vue
+++ b/src/pages/Customer/Card/CustomerDescriptorProxy.vue
@@ -9,7 +9,7 @@ const $props = defineProps({
 });
 </script>
 <template>
-    <q-popup-proxy>
+    <QPopupProxy>
         <CustomerDescriptor v-if="$props.id" :id="$props.id" />
-    </q-popup-proxy>
+    </QPopupProxy>
 </template>
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index c7f5f60dd..4eaf3d704 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -51,478 +51,476 @@ const creditWarning = computed(() => {
 </script>
 
 <template>
-    <card-summary ref="summary" :url="`Clients/${entityId}/summary`">
+    <CardSummary ref="summary" :url="`Clients/${entityId}/summary`">
         <template #body="{ entity }">
-            <q-card-section class="row q-pa-none q-col-gutter-md">
+            <QCardSection class="row q-pa-none QCol-gutter-md">
                 <div class="col">
-                    <q-list dense>
-                        <q-item-label header class="text-h6">
+                    <QList dense>
+                        <QItemLabel header class="text-h6">
                             {{ t('customer.summary.basicData') }}
-                            <router-link
+                            <RouterLink
                                 :to="{
                                     name: 'CustomerBasicData',
                                     params: { id: entity.id },
                                 }"
                                 target="_blank"
                             >
-                                <q-icon name="open_in_new" />
-                            </router-link>
-                        </q-item-label>
-                        <q-separator class="q-mb-md" />
+                                <QIcon name="open_in_new" />
+                            </RouterLink>
+                        </QItemLabel>
+                        <QSeparator class="q-mb-md" />
 
-                        <q-item class="row col">
-                            <q-item-label class="col" caption>
+                        <QItem class="row col">
+                            <QItemLabel class="col" caption>
                                 {{ t('customer.summary.customerId') }}
-                            </q-item-label>
-                            <q-item-label class="col q-ma-none">
+                            </QItemLabel>
+                            <QItemLabel class="col q-ma-none">
                                 {{ entity.id }}
-                            </q-item-label>
-                        </q-item>
-                        <q-item class="row col">
-                            <q-item-label class="col" caption>
+                            </QItemLabel>
+                        </QItem>
+                        <QItem class="row col">
+                            <QItemLabel class="col" caption>
                                 {{ t('customer.summary.name') }}
-                            </q-item-label>
-                            <q-item-label class="col q-ma-none">{{
-                                entity.name
-                            }}</q-item-label>
-                        </q-item>
-                        <q-item class="row col">
-                            <q-item-label class="col" caption>
+                            </QItemLabel>
+                            <QItemLabel class="col q-ma-none">
+                                {{ entity.name }}
+                            </QItemLabel>
+                        </QItem>
+                        <QItem class="row col">
+                            <QItemLabel class="col" caption>
                                 {{ t('customer.summary.contact') }}
-                            </q-item-label>
-                            <q-item-label class="col q-ma-none">{{
-                                entity.contact
-                            }}</q-item-label>
-                        </q-item>
+                            </QItemLabel>
+                            <QItemLabel class="col q-ma-none">
+                                {{ entity.contact }}
+                            </QItemLabel>
+                        </QItem>
 
-                        <q-item v-if="entity.salesPersonUser" class="row col">
-                            <q-item-label class="col" caption>
+                        <QItem v-if="entity.salesPersonUser" class="row col">
+                            <QItemLabel class="col" caption>
                                 {{ t('customer.summary.salesPerson') }}
-                            </q-item-label>
-                            <q-item-label class="col q-ma-none">
+                            </QItemLabel>
+                            <QItemLabel class="col q-ma-none">
                                 {{ entity.salesPersonUser.name }}
-                            </q-item-label>
-                        </q-item>
+                            </QItemLabel>
+                        </QItem>
 
-                        <q-item class="row col">
-                            <q-item-label class="col" caption>
+                        <QItem class="row col">
+                            <QItemLabel class="col" caption>
                                 {{ t('customer.summary.phone') }}
-                            </q-item-label>
-                            <q-item-label class="col q-ma-none">{{
-                                entity.phone
-                            }}</q-item-label>
-                        </q-item>
+                            </QItemLabel>
+                            <QItemLabel class="col q-ma-none">
+                                {{ entity.phone }}
+                            </QItemLabel>
+                        </QItem>
 
-                        <q-item class="row col">
-                            <q-item-label class="col" caption>
+                        <QItem class="row col">
+                            <QItemLabel class="col" caption>
                                 {{ t('customer.summary.mobile') }}
-                            </q-item-label>
-                            <q-item-label class="col q-ma-none">{{
+                            </QItemLabel>
+                            <QItemLabel class="col q-ma-none">{{
                                 entity.mobile
-                            }}</q-item-label>
-                        </q-item>
+                            }}</QItemLabel>
+                        </QItem>
 
-                        <q-item v-if="entity.contactChannel" class="row col">
-                            <q-item-label class="col" caption>
+                        <QItem v-if="entity.contactChannel" class="row col">
+                            <QItemLabel class="col" caption>
                                 {{ t('customer.summary.contactChannel') }}
-                            </q-item-label>
-                            <q-item-label class="col q-ma-none">
+                            </QItemLabel>
+                            <QItemLabel class="col q-ma-none">
                                 {{ entity.contactChannel.name }}
-                            </q-item-label>
-                        </q-item>
+                            </QItemLabel>
+                        </QItem>
 
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.email') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.email }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
+                                </QItemLabel>
+                                <QItemLabel>{{ entity.email }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QList>
                 </div>
                 <div class="col">
-                    <q-list>
-                        <q-item-label header class="text-h6">
+                    <QList>
+                        <QItemLabel header class="text-h6">
                             {{ t('customer.summary.fiscalAddress') }}
-                        </q-item-label>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                        </QItemLabel>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.socialName') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.socialName }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                                </QItemLabel>
+                                <QItemLabel>{{ entity.socialName }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.fiscalId') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.fi }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                                </QItemLabel>
+                                <QItemLabel>{{ entity.fi }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.postcode') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.postcode }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item v-if="entity.province">
-                            <q-item-section>
-                                <q-item-label caption>
+                                </QItemLabel>
+                                <QItemLabel>{{ entity.postcode }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem v-if="entity.province">
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.province') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.province.name }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item v-if="entity.country">
-                            <q-item-section>
-                                <q-item-label caption>
+                                </QItemLabel>
+                                <QItemLabel>{{ entity.province.name }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem v-if="entity.country">
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.country') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.country.country }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                                </QItemLabel>
+                                <QItemLabel>{{ entity.country.country }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.street') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.street }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
+                                </QItemLabel>
+                                <QItemLabel>{{ entity.street }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QList>
                 </div>
                 <div class="col">
-                    <q-list>
-                        <q-item-label header class="text-h6">
+                    <QList>
+                        <QItemLabel header class="text-h6">
                             {{ t('customer.summary.fiscalData') }}
-                        </q-item-label>
-                        <q-item dense>
-                            <q-checkbox
+                        </QItemLabel>
+                        <QItem dense>
+                            <QCheckbox
                                 v-model="entity.isEqualizated"
                                 :label="t('customer.summary.isEqualizated')"
                                 disable
                             />
-                        </q-item>
-                        <q-item dense>
-                            <q-checkbox
+                        </QItem>
+                        <QItem dense>
+                            <QCheckbox
                                 v-model="entity.isActive"
                                 :label="t('customer.summary.isActive')"
                                 disable
                             />
-                        </q-item>
-                        <q-item dense>
-                            <q-checkbox
+                        </QItem>
+                        <QItem dense>
+                            <QCheckbox
                                 v-model="entity.hasToInvoiceByAddress"
                                 :label="t('customer.summary.invoiceByAddress')"
                                 disable
                             />
-                        </q-item>
-                        <q-item dense>
-                            <q-checkbox
+                        </QItem>
+                        <QItem dense>
+                            <QCheckbox
                                 v-model="entity.isTaxDataChecked"
                                 :label="t('customer.summary.verifiedData')"
                                 disable
                             />
-                        </q-item>
-                        <q-item dense>
-                            <q-checkbox
+                        </QItem>
+                        <QItem dense>
+                            <QCheckbox
                                 v-model="entity.hasToInvoice"
                                 :label="t('customer.summary.hasToInvoice')"
                                 disable
                             />
-                        </q-item>
-                        <q-item dense>
-                            <q-checkbox
+                        </QItem>
+                        <QItem dense>
+                            <QCheckbox
                                 v-model="entity.isToBeMailed"
                                 :label="t('customer.summary.notifyByEmail')"
                                 disable
                             />
-                        </q-item>
-                        <q-item dense>
-                            <q-checkbox
+                        </QItem>
+                        <QItem dense>
+                            <QCheckbox
                                 v-model="entity.isVies"
                                 :label="t('customer.summary.vies')"
                                 disable
                             />
-                        </q-item>
-                    </q-list>
+                        </QItem>
+                    </QList>
                 </div>
                 <div class="col">
-                    <q-list>
-                        <q-item-label header class="text-h6">
+                    <QList>
+                        <QItemLabel header class="text-h6">
                             {{ t('customer.summary.billingData') }}
-                        </q-item-label>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                        </QItemLabel>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.payMethod') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.payMethod.name }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                                </QItemLabel>
+                                <QItemLabel>{{ entity.payMethod.name }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.bankAccount') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.iban }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                                </QItemLabel>
+                                <QItemLabel>{{ entity.iban }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.dueDay') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.dueDay }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item dense>
-                            <q-checkbox
+                                </QItemLabel>
+                                <QItemLabel>{{ entity.dueDay }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem dense>
+                            <QCheckbox
                                 v-model="entity.hasLcr"
                                 :label="t('customer.summary.hasLcr')"
                                 disable
                             />
-                        </q-item>
-                        <q-item dense>
-                            <q-checkbox
+                        </QItem>
+                        <QItem dense>
+                            <QCheckbox
                                 v-model="entity.hasCoreVnl"
                                 :label="t('customer.summary.hasCoreVnl')"
                                 disable
                             />
-                        </q-item>
-                        <q-item dense>
-                            <q-checkbox
+                        </QItem>
+                        <QItem dense>
+                            <QCheckbox
                                 v-model="entity.hasSepaVnl"
                                 :label="t('customer.summary.hasB2BVnl')"
                                 disable
                             />
-                        </q-item>
-                    </q-list>
+                        </QItem>
+                    </QList>
                 </div>
                 <div class="col" v-if="entity.defaultAddress">
-                    <q-list>
-                        <q-item-label header class="text-h6">
+                    <QList>
+                        <QItemLabel header class="text-h6">
                             {{ t('customer.summary.consignee') }}
-                        </q-item-label>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                        </QItemLabel>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.addressName') }}
-                                </q-item-label>
-                                <q-item-label>
+                                </QItemLabel>
+                                <QItemLabel>
                                     {{ entity.defaultAddress.nickname }}
-                                </q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.addressCity') }}
-                                </q-item-label>
-                                <q-item-label>{{
-                                    entity.defaultAddress.city
-                                }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                                </QItemLabel>
+                                <QItemLabel>{{ entity.defaultAddress.city }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.addressStreet') }}
-                                </q-item-label>
-                                <q-item-label>
+                                </QItemLabel>
+                                <QItemLabel>
                                     {{ entity.defaultAddress.street }}
-                                </q-item-label>
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QList>
                 </div>
                 <div class="col" v-if="entity.account">
-                    <q-list>
-                        <q-item-label header class="text-h6">
+                    <QList>
+                        <QItemLabel header class="text-h6">
                             {{ t('customer.summary.webAccess') }}
-                        </q-item-label>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                        </QItemLabel>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.username') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.account.name }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item dense>
-                            <q-checkbox
+                                </QItemLabel>
+                                <QItemLabel>{{ entity.account.name }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem dense>
+                            <QCheckbox
                                 v-model="entity.account.active"
                                 :label="t('customer.summary.webAccess')"
                                 disable
                             />
-                        </q-item>
-                    </q-list>
+                        </QItem>
+                    </QList>
                 </div>
                 <div class="col">
-                    <q-list>
-                        <q-item-label header class="text-h6">
+                    <QList>
+                        <QItemLabel header class="text-h6">
                             {{ t('customer.summary.businessData') }}
-                        </q-item-label>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                        </QItemLabel>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.totalGreuge') }}
-                                </q-item-label>
-                                <q-item-label>
+                                </QItemLabel>
+                                <QItemLabel>
                                     {{ toCurrency(entity.totalGreuge) }}
-                                </q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item v-if="entity.mana">
-                            <q-item-section>
-                                <q-item-label caption>
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem v-if="entity.mana">
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.mana') }}
-                                </q-item-label>
-                                <q-item-label>
+                                </QItemLabel>
+                                <QItemLabel>
                                     {{ toCurrency(entity.mana.mana) }}
-                                </q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item v-if="entity.claimsRatio">
-                            <q-item-section>
-                                <q-item-label caption>
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem v-if="entity.claimsRatio">
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.priceIncreasingRate') }}
-                                </q-item-label>
-                                <q-item-label>
+                                </QItemLabel>
+                                <QItemLabel>
                                     {{ toPercentage(priceIncreasingRate) }}
-                                </q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item v-if="entity.averageInvoiced">
-                            <q-item-section>
-                                <q-item-label caption>
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem v-if="entity.averageInvoiced">
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.averageInvoiced') }}
-                                </q-item-label>
-                                <q-item-label>
+                                </QItemLabel>
+                                <QItemLabel>
                                     {{ toCurrency(entity.averageInvoiced.invoiced) }}
-                                </q-item-label>
-                            </q-item-section>
-                        </q-item>
-                        <q-item v-if="entity.claimsRatio">
-                            <q-item-section>
-                                <q-item-label caption>
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem v-if="entity.claimsRatio">
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.claimRate') }}
-                                </q-item-label>
-                                <q-item-label>{{ toPercentage(claimRate) }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
+                                </QItemLabel>
+                                <QItemLabel>{{ toPercentage(claimRate) }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QList>
                 </div>
                 <div class="col">
-                    <q-list>
-                        <q-item-label header class="text-h6">
+                    <QList>
+                        <QItemLabel header class="text-h6">
                             {{ t('customer.summary.financialData') }}
-                        </q-item-label>
-                        <q-item v-if="entity.debt">
-                            <q-item-section>
-                                <q-item-label caption>
+                        </QItemLabel>
+                        <QItem v-if="entity.debt">
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.risk') }}
-                                </q-item-label>
-                                <q-item-label :class="debtWarning">
+                                </QItemLabel>
+                                <QItemLabel :class="debtWarning">
                                     {{ toCurrency(entity.debt.debt) }}
-                                </q-item-label>
-                            </q-item-section>
-                            <q-item-section side>
-                                <q-icon name="vn:info">
-                                    <q-tooltip>
+                                </QItemLabel>
+                            </QItemSection>
+                            <QItemSection side>
+                                <QIcon name="vn:info">
+                                    <QTooltip>
                                         {{ t('customer.summary.riskInfo') }}
-                                    </q-tooltip>
-                                </q-icon>
-                            </q-item-section>
-                        </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                                    </QTooltip>
+                                </QIcon>
+                            </QItemSection>
+                        </QItem>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.credit') }}
-                                </q-item-label>
-                                <q-item-label :class="creditWarning">
+                                </QItemLabel>
+                                <QItemLabel :class="creditWarning">
                                     {{ toCurrency(entity.credit) }}
-                                </q-item-label>
-                            </q-item-section>
-                            <q-item-section side>
-                                <q-icon name="vn:info">
-                                    <q-tooltip>
+                                </QItemLabel>
+                            </QItemSection>
+                            <QItemSection side>
+                                <QIcon name="vn:info">
+                                    <QTooltip>
                                         {{ t('customer.summary.creditInfo') }}
-                                    </q-tooltip>
-                                </q-icon>
-                            </q-item-section>
-                        </q-item>
-                        <q-item v-if="entity.creditInsurance">
-                            <q-item-section>
-                                <q-item-label caption>
+                                    </QTooltip>
+                                </QIcon>
+                            </QItemSection>
+                        </QItem>
+                        <QItem v-if="entity.creditInsurance">
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.securedCredit') }}
-                                </q-item-label>
-                                <q-item-label>
+                                </QItemLabel>
+                                <QItemLabel>
                                     {{ toCurrency(entity.creditInsurance) }}
-                                </q-item-label>
-                            </q-item-section>
-                            <q-item-section side>
-                                <q-icon name="vn:info">
-                                    <q-tooltip>
+                                </QItemLabel>
+                            </QItemSection>
+                            <QItemSection side>
+                                <QIcon name="vn:info">
+                                    <QTooltip>
                                         {{ t('customer.summary.securedCreditInfo') }}
-                                    </q-tooltip>
-                                </q-icon>
-                            </q-item-section>
-                        </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
+                                    </QTooltip>
+                                </QIcon>
+                            </QItemSection>
+                        </QItem>
+                        <QItem>
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.balance') }}
-                                </q-item-label>
-                                <q-item-label>
+                                </QItemLabel>
+                                <QItemLabel>
                                     {{ toCurrency(entity.sumRisk) || toCurrency(0) }}
-                                </q-item-label>
-                            </q-item-section>
-                            <q-item-section side>
-                                <q-icon name="vn:info">
-                                    <q-tooltip>
+                                </QItemLabel>
+                            </QItemSection>
+                            <QItemSection side>
+                                <QIcon name="vn:info">
+                                    <QTooltip>
                                         {{ t('customer.summary.balanceInfo') }}
-                                    </q-tooltip>
-                                </q-icon>
-                            </q-item-section>
-                        </q-item>
-                        <q-item v-if="entity.defaulters">
-                            <q-item-section>
-                                <q-item-label caption>
+                                    </QTooltip>
+                                </QIcon>
+                            </QItemSection>
+                        </QItem>
+                        <QItem v-if="entity.defaulters">
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.balanceDue') }}
-                                </q-item-label>
-                                <q-item-label :class="balanceDueWarning">
+                                </QItemLabel>
+                                <QItemLabel :class="balanceDueWarning">
                                     {{ toCurrency(balanceDue) }}
-                                </q-item-label>
-                            </q-item-section>
-                            <q-item-section side>
-                                <q-icon name="vn:info">
-                                    <q-tooltip>
+                                </QItemLabel>
+                            </QItemSection>
+                            <QItemSection side>
+                                <QIcon name="vn:info">
+                                    <QTooltip>
                                         {{ t('customer.summary.balanceDueInfo') }}
-                                    </q-tooltip>
-                                </q-icon>
-                            </q-item-section>
-                        </q-item>
-                        <q-item v-if="entity.recovery">
-                            <q-item-section>
-                                <q-item-label caption>
+                                    </QTooltip>
+                                </QIcon>
+                            </QItemSection>
+                        </QItem>
+                        <QItem v-if="entity.recovery">
+                            <QItemSection>
+                                <QItemLabel caption>
                                     {{ t('customer.summary.recoverySince') }}
-                                </q-item-label>
-                                <q-item-label>
+                                </QItemLabel>
+                                <QItemLabel>
                                     {{ toDate(entity.recovery.started) }}
-                                </q-item-label>
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QList>
                 </div>
-            </q-card-section>
+            </QCardSection>
         </template>
-    </card-summary>
+    </CardSummary>
 </template>
 
 <style lang="scss">
diff --git a/src/pages/Customer/Card/CustomerSummaryDialog.vue b/src/pages/Customer/Card/CustomerSummaryDialog.vue
index d40d99d1b..d9571ac54 100644
--- a/src/pages/Customer/Card/CustomerSummaryDialog.vue
+++ b/src/pages/Customer/Card/CustomerSummaryDialog.vue
@@ -15,9 +15,9 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
 </script>
 
 <template>
-    <q-dialog ref="dialogRef" @hide="onDialogHide">
-        <customer-summary v-if="$props.id" :id="$props.id" />
-    </q-dialog>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <CustomerSummary v-if="$props.id" :id="$props.id" />
+    </QDialog>
 </template>
 
 <style lang="scss">
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index f58a230d9..7cf260a73 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -14,10 +14,10 @@ watch(
 </script>
 
 <template>
-    <q-page class="q-pa-md">
-        <q-card class="q-pa-md">
-            <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
-                <q-input
+    <QPage class="q-pa-md">
+        <QCard class="q-pa-md">
+            <QForm @submit="onSubmit" @reset="onReset" class="q-gutter-md">
+                <QInput
                     filled
                     v-model="customer.name"
                     label="Your name *"
@@ -26,7 +26,7 @@ watch(
                     :rules="[(val) => (val && val.length > 0) || 'Please type something']"
                 />
 
-                <q-input
+                <QInput
                     filled
                     type="number"
                     v-model="age"
@@ -39,12 +39,18 @@ watch(
                 />
 
                 <div>
-                    <q-btn label="Submit" type="submit" color="primary" />
-                    <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
+                    <QBtn label="Submit" type="submit" color="primary" />
+                    <QBtn
+                        label="Reset"
+                        type="reset"
+                        color="primary"
+                        flat
+                        class="q-ml-sm"
+                    />
                 </div>
-            </q-form>
-        </q-card>
-    </q-page>
+            </QForm>
+        </QCard>
+    </QPage>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index 0e9c5be83..113e0cc7c 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -18,9 +18,9 @@ const zones = ref();
 </script>
 
 <template>
-    <fetch-data url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
-    <fetch-data url="Zones" @on-fetch="(data) => (zones = data)" auto-load />
-    <fetch-data
+    <FetchData url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
+    <FetchData url="Zones" @on-fetch="(data) => (zones = data)" auto-load />
+    <FetchData
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
         @on-fetch="(data) => (workers = data)"
@@ -34,36 +34,36 @@ const zones = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <q-list dense>
-                <q-item>
-                    <q-item-section>
-                        <q-input :label="t('FI')" v-model="params.fi" lazy-rules>
+            <QList dense>
+                <QItem>
+                    <QItemSection>
+                        <QInput :label="t('FI')" v-model="params.fi" lazy-rules>
                             <template #prepend>
-                                <q-icon name="badge" size="sm"></q-icon>
+                                <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input :label="t('Name')" v-model="params.name" lazy-rules />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput :label="t('Name')" v-model="params.name" lazy-rules />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
                             :label="t('Social Name')"
                             v-model="params.socialName"
                             lazy-rules
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section v-if="!workers">
-                        <q-skeleton type="QInput" class="full-width" />
-                    </q-item-section>
-                    <q-item-section v-if="workers">
-                        <q-select
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="!workers">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="workers">
+                        <QSelect
                             :label="t('Salesperson')"
                             v-model="params.salesPersonFk"
                             @update:model-value="searchFn()"
@@ -75,14 +75,14 @@ const zones = ref();
                             use-input
                             :input-debounce="0"
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section v-if="!provinces">
-                        <q-skeleton type="QInput" class="full-width" />
-                    </q-item-section>
-                    <q-item-section v-if="provinces">
-                        <q-select
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="!provinces">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="provinces">
+                        <QSelect
                             :label="t('Province')"
                             v-model="params.provinceFk"
                             @update:model-value="searchFn()"
@@ -92,47 +92,39 @@ const zones = ref();
                             emit-value
                             map-options
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item class="q-mb-md">
-                    <q-item-section>
-                        <q-input :label="t('City')" v-model="params.city" lazy-rules />
-                    </q-item-section>
-                </q-item>
-                <q-separator />
-                <q-expansion-item :label="t('More options')" expand-separator>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
-                                :label="t('Phone')"
-                                v-model="params.phone"
-                                lazy-rules
-                            >
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-md">
+                    <QItemSection>
+                        <QInput :label="t('City')" v-model="params.city" lazy-rules />
+                    </QItemSection>
+                </QItem>
+                <QSeparator />
+                <QExpansionItem :label="t('More options')" expand-separator>
+                    <QItem>
+                        <QItemSection>
+                            <QInput :label="t('Phone')" v-model="params.phone" lazy-rules>
                                 <template #prepend>
-                                    <q-icon name="phone" size="sm"></q-icon>
+                                    <QIcon name="phone" size="sm"></QIcon>
                                 </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
-                                :label="t('Email')"
-                                v-model="params.email"
-                                lazy-rules
-                            >
+                            </QInput>
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection>
+                            <QInput :label="t('Email')" v-model="params.email" lazy-rules>
                                 <template #prepend>
-                                    <q-icon name="email" size="sm"></q-icon>
+                                    <QIcon name="email" size="sm"></QIcon>
                                 </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section v-if="!zones">
-                            <q-skeleton type="QInput" class="full-width" />
-                        </q-item-section>
-                        <q-item-section v-if="zones">
-                            <q-select
+                            </QInput>
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection v-if="!zones">
+                            <QSkeleton type="QInput" class="full-width" />
+                        </QItemSection>
+                        <QItemSection v-if="zones">
+                            <QSelect
                                 :label="t('Zone')"
                                 v-model="params.zoneFk"
                                 @update:model-value="searchFn()"
@@ -142,19 +134,19 @@ const zones = ref();
                                 emit-value
                                 map-options
                             />
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection>
+                            <QInput
                                 :label="t('Postcode')"
                                 v-model="params.postcode"
                                 lazy-rules
                             />
-                        </q-item-section>
-                    </q-item>
-                </q-expansion-item>
-            </q-list>
+                        </QItemSection>
+                    </QItem>
+                </QExpansionItem>
+            </QList>
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index faa960512..acd5e3bdf 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
-import Paginate from 'src/components/PaginateData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import CustomerFilter from './CustomerFilter.vue';
@@ -38,117 +38,117 @@ function viewSummary(id) {
         </Teleport>
         <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
-                <q-btn
+                <QBtn
                     flat
                     @click="stateStore.toggleRightDrawer()"
                     round
                     dense
                     icon="menu"
                 >
-                    <q-tooltip bottom anchor="bottom right">
+                    <QTooltip bottom anchor="bottom right">
                         {{ t('globals.collapseMenu') }}
-                    </q-tooltip>
-                </q-btn>
+                    </QTooltip>
+                </QBtn>
             </div>
         </Teleport>
     </template>
-    <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <q-scroll-area class="fit text-grey-8">
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
             <CustomerFilter data-key="CustomerList" />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page class="column items-center q-pa-md">
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
         <div class="card-list">
-            <paginate
+            <VnPaginate
                 data-key="CustomerList"
                 url="/Clients/filter"
                 order="id DESC"
                 auto-load
             >
                 <template #body="{ rows }">
-                    <q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <q-item
+                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <QItem
                             class="q-pa-none items-start cursor-pointer q-hoverable"
                             v-ripple
                             clickable
                         >
-                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
                                 <div class="text-h6">{{ row.name }}</div>
-                                <q-item-label caption>#{{ row.id }}</q-item-label>
+                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
 
-                                <q-list>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                <QList>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('customer.list.email') }}
-                                            </q-item-label>
-                                            <q-item-label>{{ row.email }}</q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                            <QItemLabel>{{ row.email }}</QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('customer.list.phone') }}
-                                            </q-item-label>
-                                            <q-item-label>{{ row.phone }}</q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                </q-list>
-                            </q-item-section>
-                            <q-separator vertical />
-                            <q-card-actions vertical class="justify-between">
-                                <!-- <q-btn color="grey-7" round flat icon="more_vert">
-                                <q-tooltip>{{ t('customer.list.moreOptions') }}</q-tooltip>
-                                <q-menu cover auto-close>
-                                    <q-list>
-                                        <q-item clickable>
-                                            <q-item-section avatar>
-                                                <q-icon name="add" />
-                                            </q-item-section>
-                                            <q-item-section>Add a note</q-item-section>
-                                        </q-item>
-                                        <q-item clickable>
-                                            <q-item-section avatar>
-                                                <q-icon name="history" />
-                                            </q-item-section>
-                                            <q-item-section>Display customer history</q-item-section>
-                                        </q-item>
-                                    </q-list>
-                                </q-menu>
-                            </q-btn> -->
+                                            </QItemLabel>
+                                            <QItemLabel>{{ row.phone }}</QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                </QList>
+                            </QItemSection>
+                            <QSeparator vertical />
+                            <QCardActions vertical class="justify-between">
+                                <!-- <QBtn color="grey-7" round flat icon="more_vert">
+                                    <QTooltip>{{ t('customer.list.moreOptions') }}</QTooltip>
+                                    <QMenu cover auto-close>
+                                        <QList>
+                                            <QItem clickable>
+                                                <QItemSection avatar>
+                                                    <QIcon name="add" />
+                                                </QItemSection>
+                                                <QItemSection>Add a note</QItemSection>
+                                            </QItem>
+                                            <QItem clickable>
+                                                <QItemSection avatar>
+                                                    <QIcon name="history" />
+                                                </QItemSection>
+                                                <QItemSection>Display customer history</QItemSection>
+                                            </QItem>
+                                        </QList>
+                                    </QMenu>
+                                </QBtn> -->
 
-                                <q-btn
+                                <QBtn
                                     flat
                                     round
                                     color="primary"
                                     icon="arrow_circle_right"
                                     @click="navigate(row.id)"
                                 >
-                                    <q-tooltip>
+                                    <QTooltip>
                                         {{ t('components.smartCard.openCard') }}
-                                    </q-tooltip>
-                                </q-btn>
-                                <q-btn
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn
                                     flat
                                     round
                                     color="grey-7"
                                     icon="preview"
                                     @click="viewSummary(row.id)"
                                 >
-                                    <q-tooltip>
+                                    <QTooltip>
                                         {{ t('components.smartCard.openSummary') }}
-                                    </q-tooltip>
-                                </q-btn>
-                                <!-- <q-btn flat round color="grey-7" icon="vn:ticket">
-                                <q-tooltip>{{ t('customer.list.customerOrders') }}</q-tooltip>
-                            </q-btn> -->
-                            </q-card-actions>
-                        </q-item>
-                    </q-card>
+                                    </QTooltip>
+                                </QBtn>
+                                <!-- <QBtn flat round color="grey-7" icon="vn:ticket">
+                                <QTooltip>{{ t('customer.list.customerOrders') }}</QTooltip>
+                            </QBtn> -->
+                            </QCardActions>
+                        </QItem>
+                    </QCard>
                 </template>
-            </paginate>
+            </VnPaginate>
         </div>
-    </q-page>
+    </QPage>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index 7b6f42c7d..d7b900e1f 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -6,14 +6,14 @@ const stateStore = useStateStore();
 </script>
 
 <template>
-    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <q-scroll-area class="fit text-grey-8">
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
             <LeftMenu />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page-container>
-        <router-view></router-view>
-    </q-page-container>
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
 </template>
 
 <style lang="scss">
diff --git a/src/pages/Customer/CustomerPayments.vue b/src/pages/Customer/CustomerPayments.vue
index c1853ac20..608aca2af 100644
--- a/src/pages/Customer/CustomerPayments.vue
+++ b/src/pages/Customer/CustomerPayments.vue
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
-import Paginate from 'components/PaginateData.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import CustomerDescriptorProxy from './Card/CustomerDescriptorProxy.vue';
 import { toDate, toCurrency } from 'filters/index';
@@ -96,30 +96,30 @@ function stateColor(row) {
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
-                <q-btn
+                <QBtn
                     flat
                     @click="stateStore.toggleRightDrawer()"
                     round
                     dense
                     icon="menu"
                 >
-                    <q-tooltip bottom anchor="bottom right">
+                    <QTooltip bottom anchor="bottom right">
                         {{ t('globals.collapseMenu') }}
-                    </q-tooltip>
-                </q-btn>
+                    </QTooltip>
+                </QBtn>
             </div>
         </Teleport>
     </template>
-    <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <q-scroll-area class="fit text-grey-8">
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
             <CustomerPaymentsFilter data-key="CustomerTransactions" />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page class="column items-center q-pa-md">
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
         <div class="card-list">
-            <q-toolbar class="q-pa-none">
-                <q-toolbar-title>{{ t('Web Payments') }}</q-toolbar-title>
-                <q-btn
+            <QToolbar class="q-pa-none">
+                <QToolbarTitle>{{ t('Web Payments') }}</QToolbarTitle>
+                <QBtn
                     @click="arrayData.refresh()"
                     :loading="isLoading"
                     icon="refresh"
@@ -127,12 +127,12 @@ function stateColor(row) {
                     class="q-mr-sm"
                     round
                     dense
-                ></q-btn>
-                <q-btn @click="grid = !grid" icon="list" color="primary" round dense>
-                    <q-tooltip>{{ t('Change view') }}</q-tooltip>
-                </q-btn>
-            </q-toolbar>
-            <paginate
+                ></QBtn>
+                <QBtn @click="grid = !grid" icon="list" color="primary" round dense>
+                    <QTooltip>{{ t('Change view') }}</QTooltip>
+                </QBtn>
+            </QToolbar>
+            <VnPaginate
                 data-key="CustomerTransactions"
                 url="Clients/transactions"
                 order="created DESC"
@@ -141,7 +141,7 @@ function stateColor(row) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <q-table
+                    <QTable
                         :dense="$q.screen.lt.md"
                         :columns="columns"
                         :rows="rows"
@@ -152,8 +152,8 @@ function stateColor(row) {
                         hide-pagination
                     >
                         <template #body-cell-actions="{ row }">
-                            <q-td auto-width class="text-center">
-                                <q-btn
+                            <QTd auto-width class="text-center">
+                                <QBtn
                                     v-if="!row.isConfirmed"
                                     icon="check"
                                     @click="confirm(row)"
@@ -163,87 +163,75 @@ function stateColor(row) {
                                     flat
                                     dense
                                 >
-                                    <q-tooltip>{{ t('Confirm transaction') }}</q-tooltip>
-                                </q-btn>
-                            </q-td>
+                                    <QTooltip>{{ t('Confirm transaction') }}</QTooltip>
+                                </QBtn>
+                            </QTd>
                         </template>
                         <template #body-cell-customerId="{ row }">
-                            <q-td align="right">
+                            <QTd align="right">
                                 <span class="link">
                                     {{ row.clientFk }}
                                     <CustomerDescriptorProxy :id="row.clientFk" />
                                 </span>
-                            </q-td>
+                            </QTd>
                         </template>
                         <template #body-cell-state="{ row }">
-                            <q-td auto-width class="text-center">
-                                <q-badge :color="stateColor(row)">
+                            <QTd auto-width class="text-center">
+                                <QBadge :color="stateColor(row)">
                                     {{
                                         row.isConfirmed
                                             ? t('Confirmed')
                                             : t('Unconfirmed')
                                     }}
-                                </q-badge>
-                            </q-td>
+                                </QBadge>
+                            </QTd>
                         </template>
                         <template #item="{ cols, row }">
                             <div class="q-mb-md col-12">
-                                <q-card>
-                                    <q-item class="q-pa-none items-start">
-                                        <q-item-section class="q-pa-md">
-                                            <q-list>
+                                <QCard>
+                                    <QItem class="q-pa-none items-start">
+                                        <QItemSection class="q-pa-md">
+                                            <QList>
                                                 <template
                                                     v-for="col of cols"
                                                     :key="col.name"
                                                 >
-                                                    <q-item
+                                                    <QItem
                                                         v-if="col.grid !== false"
                                                         class="q-pa-none"
                                                     >
-                                                        <q-item-section>
-                                                            <q-item-label caption>
+                                                        <QItemSection>
+                                                            <QItemLabel caption>
                                                                 {{ col.label }}
-                                                            </q-item-label>
-                                                            <q-item-label
+                                                            </QItemLabel>
+                                                            <QItemLabel
                                                                 v-if="col.name == 'state'"
                                                             >
-                                                                <q-badge
+                                                                <QBadge
                                                                     :color="
                                                                         stateColor(row)
                                                                     "
                                                                 >
                                                                     {{ col.value }}
-                                                                </q-badge>
-                                                            </q-item-label>
-                                                            <q-item-label
+                                                                </QBadge>
+                                                            </QItemLabel>
+                                                            <QItemLabel
                                                                 v-if="col.name != 'state'"
                                                             >
                                                                 {{ col.value }}
-                                                            </q-item-label>
-                                                        </q-item-section>
-                                                    </q-item>
+                                                            </QItemLabel>
+                                                        </QItemSection>
+                                                    </QItem>
                                                 </template>
-                                            </q-list>
-                                            <!-- <q-list>
-                                                <q-item class="q-pa-none">
-                                                    <q-item-section>
-                                                        <q-item-label caption>
-                                                            <q-skeleton />
-                                                        </q-item-label>
-                                                        <q-item-label
-                                                            ><q-skeleton type="text"
-                                                        /></q-item-label>
-                                                    </q-item-section>
-                                                </q-item>
-                                            </q-list> -->
-                                        </q-item-section>
+                                            </QList>
+                                        </QItemSection>
                                         <template v-if="!row.isConfirmed">
-                                            <q-separator vertical />
-                                            <q-card-actions
+                                            <QSeparator vertical />
+                                            <QCardActions
                                                 vertical
                                                 class="justify-between"
                                             >
-                                                <q-btn
+                                                <QBtn
                                                     icon="check"
                                                     @click="confirm(row)"
                                                     color="primary"
@@ -252,21 +240,21 @@ function stateColor(row) {
                                                     flat
                                                     dense
                                                 >
-                                                    <q-tooltip>{{
-                                                        t('Confirm transaction')
-                                                    }}</q-tooltip>
-                                                </q-btn>
-                                            </q-card-actions>
+                                                    <QTooltip>
+                                                        {{ t('Confirm transaction') }}
+                                                    </QTooltip>
+                                                </QBtn>
+                                            </QCardActions>
                                         </template>
-                                    </q-item>
-                                </q-card>
+                                    </QItem>
+                                </QCard>
                             </div>
                         </template>
-                    </q-table>
+                    </QTable>
                 </template>
-            </paginate>
+            </VnPaginate>
         </div>
-    </q-page>
+    </QPage>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Customer/CustomerPaymentsFilter.vue b/src/pages/Customer/CustomerPaymentsFilter.vue
index 1d26b2d6a..d2a9160ab 100644
--- a/src/pages/Customer/CustomerPaymentsFilter.vue
+++ b/src/pages/Customer/CustomerPaymentsFilter.vue
@@ -20,43 +20,43 @@ const props = defineProps({
             </div>
         </template>
         <template #body="{ params }">
-            <q-list dense>
-                <q-item>
-                    <q-item-section>
-                        <q-input
+            <QList dense>
+                <QItem>
+                    <QItemSection>
+                        <QInput
                             :label="t('Order ID')"
                             v-model="params.orderFk"
                             lazy-rules
                         >
                             <template #prepend>
-                                <q-icon name="vn:basket" size="sm"></q-icon>
+                                <QIcon name="vn:basket" size="sm"></QIcon>
                             </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
                             :label="t('Customer ID')"
                             v-model="params.clientFk"
                             lazy-rules
                         >
                             <template #prepend>
-                                <q-icon name="vn:client" size="sm"></q-icon>
+                                <QIcon name="vn:client" size="sm"></QIcon>
                             </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input :label="t('Amount')" v-model="params.amount" lazy-rules>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput :label="t('Amount')" v-model="params.amount" lazy-rules>
                             <template #prepend>
-                                <q-icon name="euro" size="sm"></q-icon>
+                                <QIcon name="euro" size="sm"></QIcon>
                             </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
-            </q-list>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+            </QList>
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/Dashboard/DashboardMain.vue b/src/pages/Dashboard/DashboardMain.vue
index 301967afb..8db97c448 100644
--- a/src/pages/Dashboard/DashboardMain.vue
+++ b/src/pages/Dashboard/DashboardMain.vue
@@ -15,24 +15,24 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
 </script>
 
 <template>
-    <q-drawer
+    <QDrawer
         v-model="stateStore.leftDrawer"
         show-if-above
         :width="256"
         :breakpoint="1000"
     >
-        <q-scroll-area class="fit text-grey-8">
+        <QScrollArea class="fit text-grey-8">
             <LeftMenu />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page-container>
-        <q-page class="q-pa-md">
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage class="q-pa-md">
             <div class="row items-start wrap q-col-gutter-md q-mb-lg">
                 <div class="col-12 col-md">
                     <div class="text-h6 text-grey-8 q-mb-sm">
                         {{ t('globals.pinnedModules') }}
                     </div>
-                    <q-card class="row flex-container q-pa-md">
+                    <QCard class="row flex-container q-pa-md">
                         <div class="text-grey-5" v-if="pinnedModules.length === 0">
                             {{ t('pinnedInfo') }}
                         </div>
@@ -42,7 +42,7 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
                                 :key="item.title"
                                 class="row no-wrap q-pa-xs flex-item"
                             >
-                                <q-btn
+                                <QBtn
                                     align="evenly"
                                     padding="16px"
                                     flat
@@ -56,14 +56,14 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
                                     <div class="text-center text-primary button-text">
                                         {{ t(item.title) }}
                                     </div>
-                                </q-btn>
+                                </QBtn>
                             </div>
                         </template>
-                    </q-card>
+                    </QCard>
                 </div>
             </div>
-        </q-page>
-    </q-page-container>
+        </QPage>
+    </QPageContainer>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index 031e8bbfe..5cbe72396 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -17,18 +17,18 @@ const { t } = useI18n();
             :info="t('You can search by invoice reference')"
         />
     </Teleport>
-    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <q-scroll-area class="fit">
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
             <InvoiceOutDescriptor />
-            <q-separator />
-            <left-menu source="card" />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page-container>
-        <q-page class="q-pa-md">
-            <router-view></router-view>
-        </q-page>
-    </q-page-container>
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage class="q-pa-md">
+            <RouterView></RouterView>
+        </QPage>
+    </QPageContainer>
 </template>
 
 <i18n>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
index 2e13b1438..fb7cf5c98 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
@@ -45,7 +45,7 @@ function ticketFilter(invoice) {
 </script>
 
 <template>
-    <card-descriptor
+    <CardDescriptor
         ref="descriptor"
         module="InvoiceOut"
         :url="`InvoiceOuts/${entityId}`"
@@ -54,54 +54,54 @@ function ticketFilter(invoice) {
         <template #description="{ entity }">
             <span>
                 {{ entity.ref }}
-                <q-tooltip>{{ entity.ref }}</q-tooltip>
+                <QTooltip>{{ entity.ref }}</QTooltip>
             </span>
         </template>
         <template #body="{ entity }">
-            <q-list>
-                <q-item>
-                    <q-item-section>
-                        <q-item-label caption>
+            <QList>
+                <QItem>
+                    <QItemSection>
+                        <QItemLabel caption>
                             {{ t('invoiceOut.card.issued') }}
-                        </q-item-label>
-                        <q-item-label>{{ toDate(entity.issued) }}</q-item-label>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label caption>
+                        </QItemLabel>
+                        <QItemLabel>{{ toDate(entity.issued) }}</QItemLabel>
+                    </QItemSection>
+                    <QItemSection>
+                        <QItemLabel caption>
                             {{ t('invoiceOut.card.amount') }}
-                        </q-item-label>
-                        <q-item-label>{{ toCurrency(entity.amount) }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section v-if="entity.client">
-                        <q-item-label caption>
+                        </QItemLabel>
+                        <QItemLabel>{{ toCurrency(entity.amount) }}</QItemLabel>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="entity.client">
+                        <QItemLabel caption>
                             {{ t('invoiceOut.card.client') }}
-                        </q-item-label>
-                        <q-item-label class="link">
+                        </QItemLabel>
+                        <QItemLabel class="link">
                             {{ entity.client.name }}
                             <CustomerDescriptorProxy :id="entity.client.id" />
-                        </q-item-label>
-                    </q-item-section>
-                    <q-item-section v-if="entity.company">
-                        <q-item-label caption>{{
+                        </QItemLabel>
+                    </QItemSection>
+                    <QItemSection v-if="entity.company">
+                        <QItemLabel caption>{{
                             t('invoiceOut.card.company')
-                        }}</q-item-label>
-                        <q-item-label>{{ entity.company.code }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-            </q-list>
-            <q-card-actions>
-                <q-btn
+                        }}</QItemLabel>
+                        <QItemLabel>{{ entity.company.code }}</QItemLabel>
+                    </QItemSection>
+                </QItem>
+            </QList>
+            <QCardActions>
+                <QBtn
                     v-if="entity.client"
                     size="md"
                     icon="vn:client"
                     color="primary"
                     :to="{ name: 'CustomerCard', params: { id: entity.client.id } }"
                 >
-                    <q-tooltip>{{ t('invoiceOut.card.customerCard') }}</q-tooltip>
-                </q-btn>
-                <q-btn
+                    <QTooltip>{{ t('invoiceOut.card.customerCard') }}</QTooltip>
+                </QBtn>
+                <QBtn
                     size="md"
                     icon="vn:ticket"
                     color="primary"
@@ -110,9 +110,9 @@ function ticketFilter(invoice) {
                         query: { q: ticketFilter(entity) },
                     }"
                 >
-                    <q-tooltip>{{ t('invoiceOut.card.ticketList') }}</q-tooltip>
-                </q-btn>
-            </q-card-actions>
+                    <QTooltip>{{ t('invoiceOut.card.ticketList') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
         </template>
-    </card-descriptor>
+    </CardDescriptor>
 </template>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue b/src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue
index a3389545b..9ef0ed4b8 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue
@@ -9,7 +9,7 @@ const $props = defineProps({
 });
 </script>
 <template>
-    <q-popup-proxy>
+    <QPopupProxy>
         <InvoiceOutDescriptor v-if="$props.id" :id="$props.id" />
-    </q-popup-proxy>
+    </QPopupProxy>
 </template>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
index 092931bb2..71ec773e9 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
@@ -96,66 +96,84 @@ const ticketsColumns = ref([
 
 <template>
     <div class="summary container">
-        <q-card>
-            <skeleton-summary v-if="!invoiceOut" />
+        <QCard>
+            <SkeletonSummary v-if="!invoiceOut" />
             <template v-if="invoiceOut">
                 <div class="header bg-primary q-pa-sm q-mb-md">
                     {{ invoiceOut.ref }} - {{ invoiceOut.client.socialName }}
                 </div>
-                <q-list>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('invoiceOut.summary.issued') }}</q-item-label>
-                            <q-item-label>{{ toDate(invoiceOut.issued) }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('invoiceOut.summary.dued') }}</q-item-label>
-                            <q-item-label>{{ toDate(invoiceOut.dued) }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('invoiceOut.summary.created') }}</q-item-label>
-                            <q-item-label>{{ toDate(invoiceOut.created) }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('invoiceOut.summary.booked') }}</q-item-label>
-                            <q-item-label>{{ toDate(invoiceOut.booked) }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('invoiceOut.summary.company') }}</q-item-label>
-                            <q-item-label>{{ invoiceOut.company.code }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-                <q-card-section class="q-pa-md">
+                <QList>
+                    <QItem>
+                        <QItemSection>
+                            <QItemLabel caption>{{
+                                t('invoiceOut.summary.issued')
+                            }}</QItemLabel>
+                            <QItemLabel>{{ toDate(invoiceOut.issued) }}</QItemLabel>
+                        </QItemSection>
+                        <QItemSection>
+                            <QItemLabel caption>{{
+                                t('invoiceOut.summary.dued')
+                            }}</QItemLabel>
+                            <QItemLabel>{{ toDate(invoiceOut.dued) }}</QItemLabel>
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection>
+                            <QItemLabel caption>{{
+                                t('invoiceOut.summary.created')
+                            }}</QItemLabel>
+                            <QItemLabel>{{ toDate(invoiceOut.created) }}</QItemLabel>
+                        </QItemSection>
+                        <QItemSection>
+                            <QItemLabel caption>{{
+                                t('invoiceOut.summary.booked')
+                            }}</QItemLabel>
+                            <QItemLabel>{{ toDate(invoiceOut.booked) }}</QItemLabel>
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection>
+                            <QItemLabel caption>{{
+                                t('invoiceOut.summary.company')
+                            }}</QItemLabel>
+                            <QItemLabel>{{ invoiceOut.company.code }}</QItemLabel>
+                        </QItemSection>
+                    </QItem>
+                </QList>
+                <QCardSection class="q-pa-md">
                     <h6>{{ t('invoiceOut.summary.taxBreakdown') }}</h6>
-                    <q-table :columns="taxColumns" :rows="tax" flat>
+                    <QTable :columns="taxColumns" :rows="tax" flat>
                         <template #header="props">
-                            <q-tr :props="props">
-                                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                            <QTr :props="props">
+                                <QTh
+                                    v-for="col in props.cols"
+                                    :key="col.name"
+                                    :props="props"
+                                >
                                     {{ t(col.label) }}
-                                </q-th>
-                            </q-tr>
+                                </QTh>
+                            </QTr>
                         </template>
-                    </q-table>
-                </q-card-section>
-                <q-card-section class="q-pa-md">
+                    </QTable>
+                </QCardSection>
+                <QCardSection class="q-pa-md">
                     <h6>{{ t('invoiceOut.summary.tickets') }}</h6>
-                    <q-table :columns="ticketsColumns" :rows="tikets" flat>
+                    <QTable :columns="ticketsColumns" :rows="tikets" flat>
                         <template #header="props">
-                            <q-tr :props="props">
-                                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                            <QTr :props="props">
+                                <QTh
+                                    v-for="col in props.cols"
+                                    :key="col.name"
+                                    :props="props"
+                                >
                                     {{ t(col.label) }}
-                                </q-th>
-                            </q-tr>
+                                </QTh>
+                            </QTr>
                         </template>
-                    </q-table>
-                </q-card-section>
+                    </QTable>
+                </QCardSection>
             </template>
-        </q-card>
+        </QCard>
     </div>
 </template>
 
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutSummaryDialog.vue b/src/pages/InvoiceOut/Card/InvoiceOutSummaryDialog.vue
index d04841307..76283ff10 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutSummaryDialog.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutSummaryDialog.vue
@@ -15,9 +15,9 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
 </script>
 
 <template>
-    <q-dialog ref="dialogRef" @hide="onDialogHide">
-        <invoiceOut-summary v-if="$props.id" :id="$props.id" />
-    </q-dialog>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <InvoiceOutSummary v-if="$props.id" :id="$props.id" />
+    </QDialog>
 </template>
 
 <style lang="scss">
diff --git a/src/pages/InvoiceOut/InvoiceOutFilter.vue b/src/pages/InvoiceOut/InvoiceOutFilter.vue
index 37283a404..1ecaf828b 100644
--- a/src/pages/InvoiceOut/InvoiceOutFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutFilter.vue
@@ -23,8 +23,8 @@ function setWorkers(data) {
 </script>
 
 <template>
-    <fetch-data url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
-    <fetch-data
+    <FetchData url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
+    <FetchData
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
         @on-fetch="setWorkers"
@@ -38,101 +38,101 @@ function setWorkers(data) {
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <q-list dense>
-                <q-item>
-                    <q-item-section>
-                        <q-input
+            <QList dense>
+                <QItem>
+                    <QItemSection>
+                        <QInput
                             :label="t('Customer ID')"
                             v-model="params.clientFk"
                             lazy-rules
                         >
                             <template #prepend>
-                                <q-icon name="vn:client" size="sm"></q-icon>
+                                <QIcon name="vn:client" size="sm"></QIcon>
                             </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input :label="t('FI')" v-model="params.fi" lazy-rules>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput :label="t('FI')" v-model="params.fi" lazy-rules>
                             <template #prepend>
-                                <q-icon name="badge" size="sm"></q-icon>
+                                <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input :label="t('Amount')" v-model="params.amount" lazy-rules>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput :label="t('Amount')" v-model="params.amount" lazy-rules>
                             <template #prepend>
-                                <q-icon name="euro" size="sm"></q-icon>
+                                <QIcon name="euro" size="sm"></QIcon>
                             </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
                             :label="t('Min')"
                             type="number"
                             v-model.number="params.min"
                             lazy-rules
                         >
                             <template #prepend>
-                                <q-icon name="euro" size="sm"></q-icon>
+                                <QIcon name="euro" size="sm"></QIcon>
                             </template>
-                        </q-input>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-input
+                        </QInput>
+                    </QItemSection>
+                    <QItemSection>
+                        <QInput
                             :label="t('Max')"
                             type="number"
                             v-model.number="params.max"
                             lazy-rules
                         >
                             <template #prepend>
-                                <q-icon name="euro" size="sm"></q-icon>
+                                <QIcon name="euro" size="sm"></QIcon>
                             </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
-                <q-item class="q-mb-md">
-                    <q-item-section>
-                        <q-checkbox
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-md">
+                    <QItemSection>
+                        <QCheckbox
                             v-model="params.hasPdf"
                             @update:model-value="searchFn()"
                             :label="t('Has PDF')"
                             toggle-indeterminate
                         />
-                    </q-item-section>
-                </q-item>
-                <q-separator />
-                <q-expansion-item :label="t('More options')" expand-separator>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
+                    </QItemSection>
+                </QItem>
+                <QSeparator />
+                <QExpansionItem :label="t('More options')" expand-separator>
+                    <QItem>
+                        <QItemSection>
+                            <QInput
                                 :label="t('Issued')"
                                 v-model="params.issued"
                                 mask="date"
                             >
                                 <template #append>
-                                    <q-icon name="event" class="cursor-pointer">
-                                        <q-popup-proxy
+                                    <QIcon name="event" class="cursor-pointer">
+                                        <QPopupProxy
                                             cover
                                             transition-show="scale"
                                             transition-hide="scale"
                                         >
-                                            <q-date v-model="params.issued" landscape>
+                                            <QDate v-model="params.issued" landscape>
                                                 <div
                                                     class="row items-center justify-end q-gutter-sm"
                                                 >
-                                                    <q-btn
+                                                    <QBtn
                                                         :label="t('globals.cancel')"
                                                         color="primary"
                                                         flat
                                                         v-close-popup
                                                     />
-                                                    <q-btn
+                                                    <QBtn
                                                         :label="t('globals.confirm')"
                                                         color="primary"
                                                         flat
@@ -140,38 +140,38 @@ function setWorkers(data) {
                                                         v-close-popup
                                                     />
                                                 </div>
-                                            </q-date>
-                                        </q-popup-proxy>
-                                    </q-icon>
+                                            </QDate>
+                                        </QPopupProxy>
+                                    </QIcon>
                                 </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
+                            </QInput>
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection>
+                            <QInput
                                 :label="t('Created')"
                                 v-model="params.created"
                                 mask="date"
                             >
                                 <template #append>
-                                    <q-icon name="event" class="cursor-pointer">
-                                        <q-popup-proxy
+                                    <QIcon name="event" class="cursor-pointer">
+                                        <QPopupProxy
                                             cover
                                             transition-show="scale"
                                             transition-hide="scale"
                                         >
-                                            <q-date v-model="params.created" landscape>
+                                            <QDate v-model="params.created" landscape>
                                                 <div
                                                     class="row items-center justify-end q-gutter-sm"
                                                 >
-                                                    <q-btn
+                                                    <QBtn
                                                         :label="t('globals.cancel')"
                                                         color="primary"
                                                         flat
                                                         v-close-popup
                                                     />
-                                                    <q-btn
+                                                    <QBtn
                                                         :label="t('globals.confirm')"
                                                         color="primary"
                                                         flat
@@ -179,34 +179,34 @@ function setWorkers(data) {
                                                         v-close-popup
                                                     />
                                                 </div>
-                                            </q-date>
-                                        </q-popup-proxy>
-                                    </q-icon>
+                                            </QDate>
+                                        </QPopupProxy>
+                                    </QIcon>
                                 </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-input :label="t('Dued')" v-model="params.dued" mask="date">
+                            </QInput>
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection>
+                            <QInput :label="t('Dued')" v-model="params.dued" mask="date">
                                 <template #append>
-                                    <q-icon name="event" class="cursor-pointer">
-                                        <q-popup-proxy
+                                    <QIcon name="event" class="cursor-pointer">
+                                        <QPopupProxy
                                             cover
                                             transition-show="scale"
                                             transition-hide="scale"
                                         >
-                                            <q-date v-model="params.dued" landscape>
+                                            <QDate v-model="params.dued" landscape>
                                                 <div
                                                     class="row items-center justify-end q-gutter-sm"
                                                 >
-                                                    <q-btn
+                                                    <QBtn
                                                         :label="t('globals.cancel')"
                                                         color="primary"
                                                         flat
                                                         v-close-popup
                                                     />
-                                                    <q-btn
+                                                    <QBtn
                                                         :label="t('globals.confirm')"
                                                         color="primary"
                                                         flat
@@ -214,15 +214,15 @@ function setWorkers(data) {
                                                         v-close-popup
                                                     />
                                                 </div>
-                                            </q-date>
-                                        </q-popup-proxy>
-                                    </q-icon>
+                                            </QDate>
+                                        </QPopupProxy>
+                                    </QIcon>
                                 </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                </q-expansion-item>
-            </q-list>
+                            </QInput>
+                        </QItemSection>
+                    </QItem>
+                </QExpansionItem>
+            </QList>
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index b05376079..00bed322e 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
-import Paginate from 'src/components/PaginateData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
 import { toDate, toCurrency } from 'src/filters/index';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
@@ -19,7 +19,7 @@ onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
 
 function navigate(id) {
-    router.push({ path: `/invoiceOut/${id}` });
+    router.push({ path: `/invoice-out/${id}` });
 }
 
 function viewSummary(id) {
@@ -43,131 +43,129 @@ function viewSummary(id) {
         </Teleport>
         <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
-                <q-btn
+                <QBtn
                     flat
                     @click="stateStore.toggleRightDrawer()"
                     round
                     dense
                     icon="menu"
                 >
-                    <q-tooltip bottom anchor="bottom right">
+                    <QTooltip bottom anchor="bottom right">
                         {{ t('globals.collapseMenu') }}
-                    </q-tooltip>
-                </q-btn>
+                    </QTooltip>
+                </QBtn>
             </div>
         </Teleport>
     </template>
-    <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <q-scroll-area class="fit text-grey-8">
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
             <InvoiceOutFilter data-key="InvoiceOutList" />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page class="column items-center q-pa-md">
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
         <div class="card-list">
-            <paginate
+            <VnPaginate
                 data-key="InvoiceOutList"
                 url="InvoiceOuts/filter"
                 order="issued DESC, id DESC"
                 auto-load
             >
                 <template #body="{ rows }">
-                    <q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <q-item
+                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <QItem
                             class="q-pa-none items-start cursor-pointer q-hoverable"
                             v-ripple
                             clickable
                         >
-                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
                                 <div class="text-h6">{{ row.ref }}</div>
-                                <q-item-label caption>#{{ row.id }}</q-item-label>
-                                <q-list>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
+                                <QList>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('invoiceOut.list.issued') }}
-                                            </q-item-label>
-                                            <q-item-label>
+                                            </QItemLabel>
+                                            <QItemLabel>
                                                 {{ toDate(row.issued) }}
-                                            </q-item-label>
-                                        </q-item-section>
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                        </QItemSection>
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('invoiceOut.list.amount') }}
-                                            </q-item-label>
-                                            <q-item-label>
+                                            </QItemLabel>
+                                            <QItemLabel>
                                                 {{ toCurrency(row.amount) }}
-                                            </q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('invoiceOut.list.client') }}
-                                            </q-item-label>
-                                            <q-item-label>
+                                            </QItemLabel>
+                                            <QItemLabel>
                                                 {{ row.clientSocialName }}
-                                            </q-item-label>
-                                        </q-item-section>
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                        </QItemSection>
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('invoiceOut.list.created') }}
-                                            </q-item-label>
-                                            <q-item-label>
+                                            </QItemLabel>
+                                            <QItemLabel>
                                                 {{ toDate(row.created) }}
-                                            </q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('invoiceOut.list.company') }}
-                                            </q-item-label>
-                                            <q-item-label>{{
-                                                row.companyCode
-                                            }}</q-item-label>
-                                        </q-item-section>
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                            <QItemLabel>{{ row.companyCode }}</QItemLabel>
+                                        </QItemSection>
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('invoiceOut.list.dued') }}
-                                            </q-item-label>
-                                            <q-item-label>
+                                            </QItemLabel>
+                                            <QItemLabel>
                                                 {{ toDate(row.dued) }}
-                                            </q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                </q-list>
-                            </q-item-section>
-                            <q-separator vertical />
-                            <q-card-actions vertical class="justify-between">
-                                <q-btn
+                                            </QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                </QList>
+                            </QItemSection>
+                            <QSeparator vertical />
+                            <QCardActions vertical class="justify-between">
+                                <QBtn
                                     flat
                                     round
                                     color="orange"
                                     icon="arrow_circle_right"
                                     @click="navigate(row.id)"
                                 >
-                                    <q-tooltip>
+                                    <QTooltip>
                                         {{ t('components.smartCard.openCard') }}
-                                    </q-tooltip>
-                                </q-btn>
-                                <q-btn
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn
                                     flat
                                     round
                                     color="grey-7"
                                     icon="preview"
                                     @click="viewSummary(row.id)"
                                 >
-                                    <q-tooltip>
+                                    <QTooltip>
                                         {{ t('components.smartCard.openSummary') }}
-                                    </q-tooltip>
-                                </q-btn>
-                            </q-card-actions>
-                        </q-item>
-                    </q-card>
+                                    </QTooltip>
+                                </QBtn>
+                            </QCardActions>
+                        </QItem>
+                    </QCard>
                 </template>
-            </paginate>
+            </VnPaginate>
         </div>
-    </q-page>
+    </QPage>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/InvoiceOut/InvoiceOutMain.vue b/src/pages/InvoiceOut/InvoiceOutMain.vue
index 2fb079daa..66ce78f23 100644
--- a/src/pages/InvoiceOut/InvoiceOutMain.vue
+++ b/src/pages/InvoiceOut/InvoiceOutMain.vue
@@ -6,12 +6,12 @@ const stateStore = useStateStore();
 </script>
 
 <template>
-    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <q-scroll-area class="fit text-grey-8">
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
             <LeftMenu />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page-container>
-        <router-view></router-view>
-    </q-page-container>
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
 </template>
diff --git a/src/pages/Login/LoginMain.vue b/src/pages/Login/LoginMain.vue
index 0058bf2f3..747fe8b14 100644
--- a/src/pages/Login/LoginMain.vue
+++ b/src/pages/Login/LoginMain.vue
@@ -48,36 +48,40 @@ const password = ref('');
 const keepLogin = ref(true);
 
 async function onSubmit() {
-    const { data } = await axios.post('Accounts/login', {
-        user: username.value,
-        password: password.value,
-    });
+    try {
+        const { data } = await axios.post('Accounts/login', {
+            user: username.value,
+            password: password.value,
+        });
 
-    if (!data) return;
+        if (!data) return;
 
-    await session.login(data.token, keepLogin.value);
+        await session.login(data.token, keepLogin.value);
 
-    quasar.notify({
-        message: t('login.loginSuccess'),
-        type: 'positive',
-    });
+        quasar.notify({
+            message: t('login.loginSuccess'),
+            type: 'positive',
+        });
 
-    const currentRoute = router.currentRoute.value;
-    if (currentRoute.query && currentRoute.query.redirect) {
-        router.push(currentRoute.query.redirect);
-    } else {
-        router.push({ name: 'Dashboard' });
+        const currentRoute = router.currentRoute.value;
+        if (currentRoute.query && currentRoute.query.redirect) {
+            router.push(currentRoute.query.redirect);
+        } else {
+            router.push({ name: 'Dashboard' });
+        }
+    } catch (e) {
+        //
     }
 }
 </script>
 
 <template>
-    <q-layout>
-        <q-page-container>
-            <q-page id="login">
-                <q-page-sticky position="top-right">
-                    <q-toolbar>
-                        <q-btn
+    <QLayout>
+        <QPageContainer>
+            <QPage id="login">
+                <QPageSticky position="top-right">
+                    <QToolbar>
+                        <QBtn
                             id="switchLanguage"
                             :label="t('globals.language')"
                             icon="translate"
@@ -86,55 +90,55 @@ async function onSubmit() {
                             flat
                             rounded
                         >
-                            <q-menu auto-close>
-                                <q-list dense>
-                                    <q-item
+                            <QMenu auto-close>
+                                <QList dense>
+                                    <QItem
                                         @click="userLocale = 'en'"
                                         :active="userLocale == 'en'"
                                         v-ripple
                                         clickable
                                     >
                                         {{ t('globals.lang.en') }}
-                                    </q-item>
-                                    <q-item
+                                    </QItem>
+                                    <QItem
                                         @click="userLocale = 'es'"
                                         :active="userLocale == 'es'"
                                         v-ripple
                                         clickable
                                     >
                                         {{ t('globals.lang.es') }}
-                                    </q-item>
-                                </q-list>
-                            </q-menu>
-                        </q-btn>
-                        <q-list>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
-                                        t(`globals.darkMode`)
-                                    }}</q-item-label>
-                                </q-item-section>
-                                <q-item-section side>
-                                    <q-toggle
+                                    </QItem>
+                                </QList>
+                            </QMenu>
+                        </QBtn>
+                        <QList>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>
+                                        {{ t(`globals.darkMode`) }}
+                                    </QItemLabel>
+                                </QItemSection>
+                                <QItemSection side>
+                                    <QToggle
                                         v-model="darkMode"
                                         checked-icon="dark_mode"
                                         unchecked-icon="light_mode"
                                     />
-                                </q-item-section>
-                            </q-item>
-                        </q-list>
-                    </q-toolbar>
-                </q-page-sticky>
+                                </QItemSection>
+                            </QItem>
+                        </QList>
+                    </QToolbar>
+                </QPageSticky>
                 <div class="login-form q-pa-xl">
-                    <q-img
+                    <QImg
                         src="~/assets/logo.svg"
                         alt="Logo"
                         fit="contain"
                         :ratio="16 / 9"
                         class="q-mb-md"
                     />
-                    <q-form @submit="onSubmit" class="q-gutter-md">
-                        <q-input
+                    <QForm @submit="onSubmit" class="q-gutter-md">
+                        <QInput
                             v-model="username"
                             :label="t('login.username')"
                             lazy-rules
@@ -143,7 +147,7 @@ async function onSubmit() {
                                     (val && val.length > 0) || t('login.fieldRequired'),
                             ]"
                         />
-                        <q-input
+                        <QInput
                             type="password"
                             v-model="password"
                             :label="t('login.password')"
@@ -153,10 +157,10 @@ async function onSubmit() {
                                     (val && val.length > 0) || t('login.fieldRequired'),
                             ]"
                         />
-                        <q-toggle v-model="keepLogin" :label="t('login.keepLogin')" />
+                        <QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
 
                         <div>
-                            <q-btn
+                            <QBtn
                                 :label="t('login.submit')"
                                 type="submit"
                                 color="primary"
@@ -165,11 +169,11 @@ async function onSubmit() {
                                 unelevated
                             />
                         </div>
-                    </q-form>
+                    </QForm>
                 </div>
-            </q-page>
-        </q-page-container>
-    </q-layout>
+            </QPage>
+        </QPageContainer>
+    </QLayout>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/NotFound.vue b/src/pages/NotFound.vue
index 4845f0091..a5bf58e0a 100644
--- a/src/pages/NotFound.vue
+++ b/src/pages/NotFound.vue
@@ -9,12 +9,14 @@ const { t } = useI18n();
     <div class="text-center q-pa-md flex flex-center">
         <div>
             <div class="text-grey-5" style="opacity: 0.4; font-size: 30vh">
-                <q-icon name="vn:claims" />
+                <QIcon name="vn:claims" />
             </div>
 
-            <div class="text-h2 text-grey-5" style="opacity: 0.4">{{ t('notFound') }}</div>
+            <div class="text-h2 text-grey-5" style="opacity: 0.4">
+                {{ t('notFound') }}
+            </div>
 
-            <q-btn
+            <QBtn
                 @click="router.go(-1)"
                 :label="t('globals.back')"
                 class="q-mt-xl"
diff --git a/src/pages/Ticket/Card/TicketBasicData.vue b/src/pages/Ticket/Card/TicketBasicData.vue
index b4e913ad5..0c9a8b042 100644
--- a/src/pages/Ticket/Card/TicketBasicData.vue
+++ b/src/pages/Ticket/Card/TicketBasicData.vue
@@ -1,3 +1,3 @@
 <template>
-    <q-card>Basic Data</q-card>
-</template>
\ No newline at end of file
+    <QCard>Basic Data</QCard>
+</template>
diff --git a/src/pages/Ticket/Card/TicketBoxing.vue b/src/pages/Ticket/Card/TicketBoxing.vue
index 2f2f07f8c..05bde8977 100644
--- a/src/pages/Ticket/Card/TicketBoxing.vue
+++ b/src/pages/Ticket/Card/TicketBoxing.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { computed, ref, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
 import axios from 'axios';
 import { date, useQuasar } from 'quasar';
+import { computed, onMounted, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
 const router = useRouter();
 const { t } = useI18n();
@@ -21,22 +21,25 @@ const expeditions = ref({});
 const lastExpedition = ref();
 const slide = ref(null);
 const videoList = ref([]);
-const time = ref({
+const time = reactive({
     min: 0,
     max: 24,
 });
-
 async function fetch() {
-    const filter = {
-        where: {
-            ticketFk: entityId.value,
-        },
-    };
-    const { data } = await axios.get(`/Expeditions/filter`, {
-        params: { filter },
-    });
+    try {
+        const filter = {
+            where: {
+                ticketFk: entityId.value,
+            },
+        };
+        const { data } = await axios.get(`/Expeditions/filter`, {
+            params: { filter },
+        });
 
-    if (data) expeditions.value = data;
+        if (data) expeditions.value = data;
+    } catch (e) {
+        //
+    }
 }
 
 async function getVideoList(expeditionId, timed) {
@@ -46,110 +49,118 @@ async function getVideoList(expeditionId, timed) {
     };
 
     if (timed) {
+        if (timed.max == timed.min) {
+            if (timed.max != 24) timed.max += 1;
+            else timed.min -= 1;
+        }
         Object.assign(params, { from: timed.min, to: timed.max });
     }
-    const { data } = await axios.get(`/Boxings/getVideoList`, { params: params });
+    await axios.get(`/Boxings/getVideoList`, { params: params }).then((res) => {
+        const data = res.data;
+        if (!data.length) {
+            return quasar.notify({
+                message: t('ticket.boxing.notFound'),
+                type: 'negative',
+            });
+        }
+        const list = [];
+        for (const video of data) {
+            const videoName = video.split('.')[0].split('T')[1].replace(/-/g, ':');
+            list.push({
+                label: videoName,
+                value: video,
+                url: `api/Boxings/getVideo?id=${expeditionId}&filename=${video}`,
+            });
+        }
 
-    const list = [];
-    for (const video of data) {
-        const videName = video.split('.')[0].split('T')[1].replaceAll('-', ':');
-        list.push({
-            label: videName,
-            value: video,
-            url: `api/Boxings/getVideo?id=${expeditionId}&filename=${video}`,
-        });
-    }
-
-    videoList.value = list.reverse();
-    if (list[0]) {
-        slide.value = list[0].value;
-        time.value = {
-            min: parseInt(list[0].label.split(':')[0]),
-            max: parseInt(list[list.length - 1].label.split(':')[0]),
-        };
-    }
-
-    if (!data.length) {
-        return quasar.notify({
-            message: t('ticket.boxing.notFound'),
-            type: 'negative',
-        });
-    }
+        videoList.value = list.reverse();
+        if (list[0]) {
+            slide.value = list[0].value;
+            time.min = parseInt(list[0].label.split(':')[0]);
+            time.max = parseInt(list[list.length - 1].label.split(':')[0]) + 1;
+        }
+    });
 }
 </script>
 
 <template>
-    <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>
+    <QDrawer show-if-above side="right">
+        <QScrollArea class="fit">
+            <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="orange"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem v-if="lastExpedition && videoList.length">
+                    <QItemSection>
+                        <QSelect
+                            color="orange"
+                            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('ticket.boxing.created') }}</QItemLabel>
+                        <QItemLabel>
+                            {{
+                                date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss')
+                            }}
+                        </QItemLabel>
+                        <QItemLabel caption>{{ t('ticket.boxing.item') }}</QItemLabel>
+                        <QItemLabel>{{ expedition.packagingItemFk }}</QItemLabel>
+                        <QItemLabel caption>{{ t('ticket.boxing.worker') }}</QItemLabel>
+                        <QItemLabel>{{ expedition.userName }}</QItemLabel>
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </QScrollArea>
+    </QDrawer>
 
-    <q-card>
-        <q-carousel animated v-model="slide" height="max-content">
-            <q-carousel-slide v-for="video in videoList" :key="video.value" :name="video.value">
-                <q-video :src="video.url" :ratio="16 / 9" />
-            </q-carousel-slide>
-        </q-carousel>
-    </q-card>
+    <QCard>
+        <QCarousel animated v-model="slide" height="max-content">
+            <QCarouselSlide
+                v-for="video in videoList"
+                :key="video.value"
+                :name="video.value"
+            >
+                <QVideo :src="video.url" :ratio="16 / 9" />
+            </QCarouselSlide>
+        </QCarousel>
+    </QCard>
 </template>
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index c680441ff..e0ad5054d 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -17,18 +17,18 @@ const { t } = useI18n();
             :info="t('You can search by ticket id or alias')"
         />
     </Teleport>
-    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <q-scroll-area class="fit">
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
             <TicketDescriptor />
-            <q-separator />
-            <left-menu source="card" />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page-container>
-        <q-page class="q-pa-md">
-            <router-view></router-view>
-        </q-page>
-    </q-page-container>
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage class="q-pa-md">
+            <RouterView></RouterView>
+        </QPage>
+    </QPageContainer>
 </template>
 
 <style lang="scss">
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index bdf796893..845e5f465 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -75,91 +75,91 @@ function stateColor(state) {
 </script>
 
 <template>
-    <card-descriptor module="Ticket" :url="`Tickets/${entityId}`" :filter="filter">
+    <CardDescriptor module="Ticket" :url="`Tickets/${entityId}`" :filter="filter">
         <template #menu="{ entity }">
             <TicketDescriptorMenu :ticket="entity" />
         </template>
         <template #description="{ entity }">
             <span>
                 {{ entity.client.name }}
-                <q-tooltip>{{ entity.client.name }}</q-tooltip>
+                <QTooltip>{{ entity.client.name }}</QTooltip>
             </span>
         </template>
         <template #body="{ entity }">
-            <q-list>
-                <q-item>
-                    <q-item-section v-if="entity.ticketState">
-                        <q-item-label caption>{{ t('ticket.card.state') }}</q-item-label>
-                        <q-item-label :class="stateColor(entity.ticketState.state)">
+            <QList>
+                <QItem>
+                    <QItemSection v-if="entity.ticketState">
+                        <QItemLabel caption>{{ t('ticket.card.state') }}</QItemLabel>
+                        <QItemLabel :class="stateColor(entity.ticketState.state)">
                             {{ entity.ticketState.state.name }}
-                        </q-item-label>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label caption>
+                        </QItemLabel>
+                    </QItemSection>
+                    <QItemSection>
+                        <QItemLabel caption>
                             {{ t('ticket.card.shipped') }}
-                        </q-item-label>
-                        <q-item-label>{{ toDate(entity.shipped) }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-item-label caption>
+                        </QItemLabel>
+                        <QItemLabel>{{ toDate(entity.shipped) }}</QItemLabel>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QItemLabel caption>
                             {{ t('ticket.card.customerId') }}
-                        </q-item-label>
-                        <q-item-label>
+                        </QItemLabel>
+                        <QItemLabel>
                             <span class="link">
                                 {{ entity.clientFk }}
                                 <CustomerDescriptorProxy :id="entity.client.id" />
                             </span>
-                        </q-item-label>
-                    </q-item-section>
-                    <q-item-section v-if="entity.client && entity.client.salesPersonUser">
-                        <q-item-label caption>
+                        </QItemLabel>
+                    </QItemSection>
+                    <QItemSection v-if="entity.client && entity.client.salesPersonUser">
+                        <QItemLabel caption>
                             {{ t('ticket.card.salesPerson') }}
-                        </q-item-label>
-                        <q-item-label>
+                        </QItemLabel>
+                        <QItemLabel>
                             {{ entity.client.salesPersonUser.name }}
-                        </q-item-label>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section v-if="entity.warehouse">
-                        <q-item-label caption>
+                        </QItemLabel>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="entity.warehouse">
+                        <QItemLabel caption>
                             {{ t('ticket.card.warehouse') }}
-                        </q-item-label>
-                        <q-item-label>{{ entity.warehouse.name }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-                <q-item v-if="entity.agencyMode">
-                    <q-item-section>
-                        <q-item-label caption>{{ t('ticket.card.agency') }}</q-item-label>
-                        <q-item-label>{{ entity.agencyMode.name }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-            </q-list>
-            <q-card-actions class="q-gutter-md">
-                <q-icon
+                        </QItemLabel>
+                        <QItemLabel>{{ entity.warehouse.name }}</QItemLabel>
+                    </QItemSection>
+                </QItem>
+                <QItem v-if="entity.agencyMode">
+                    <QItemSection>
+                        <QItemLabel caption>{{ t('ticket.card.agency') }}</QItemLabel>
+                        <QItemLabel>{{ entity.agencyMode.name }}</QItemLabel>
+                    </QItemSection>
+                </QItem>
+            </QList>
+            <QCardActions class="q-gutter-md">
+                <QIcon
                     v-if="entity.isDeleted == true"
                     name="vn:deletedTicket"
                     size="xs"
                     color="primary"
                 >
-                    <q-tooltip>{{ t('This ticket is deleted') }}</q-tooltip>
-                </q-icon>
-            </q-card-actions>
+                    <QTooltip>{{ t('This ticket is deleted') }}</QTooltip>
+                </QIcon>
+            </QCardActions>
 
-            <q-card-actions>
-                <q-btn
+            <QCardActions>
+                <QBtn
                     size="md"
                     icon="vn:client"
                     color="primary"
                     :to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
                 >
-                    <q-tooltip>{{ t('ticket.card.customerCard') }}</q-tooltip>
-                </q-btn>
-            </q-card-actions>
+                    <QTooltip>{{ t('ticket.card.customerCard') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
         </template>
-    </card-descriptor>
+    </CardDescriptor>
 </template>
 
 <i18n>
diff --git a/src/pages/Ticket/Card/TicketDescriptorMenu.vue b/src/pages/Ticket/Card/TicketDescriptorMenu.vue
index cc2bf289a..f55229bcf 100644
--- a/src/pages/Ticket/Card/TicketDescriptorMenu.vue
+++ b/src/pages/Ticket/Card/TicketDescriptorMenu.vue
@@ -135,106 +135,106 @@ async function remove() {
 }
 </script>
 <template>
-    <q-item v-ripple clickable>
-        <q-item-section avatar>
-            <q-icon name="picture_as_pdf" />
-        </q-item-section>
-        <q-item-section>{{ t('Open Delivery Note...') }}</q-item-section>
-        <q-item-section side>
-            <q-icon name="keyboard_arrow_right" />
-        </q-item-section>
-        <q-menu anchor="top end" self="top start" auto-close bordered>
-            <q-list>
-                <q-item @click="openDeliveryNote('deliveryNote')" v-ripple clickable>
-                    <q-item-section>{{ t('With prices') }}</q-item-section>
-                </q-item>
-                <q-item @click="openDeliveryNote('withoutPrices')" v-ripple clickable>
-                    <q-item-section>{{ t('Without prices') }}</q-item-section>
-                </q-item>
-                <q-item
+    <QItem v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="picture_as_pdf" />
+        </QItemSection>
+        <QItemSection>{{ t('Open Delivery Note...') }}</QItemSection>
+        <QItemSection side>
+            <QIcon name="keyboard_arrow_right" />
+        </QItemSection>
+        <QMenu anchor="top end" self="top start" auto-close bordered>
+            <QList>
+                <QItem @click="openDeliveryNote('deliveryNote')" v-ripple clickable>
+                    <QItemSection>{{ t('With prices') }}</QItemSection>
+                </QItem>
+                <QItem @click="openDeliveryNote('withoutPrices')" v-ripple clickable>
+                    <QItemSection>{{ t('Without prices') }}</QItemSection>
+                </QItem>
+                <QItem
                     @click="openDeliveryNote('deliveryNote', 'csv')"
                     v-ripple
                     clickable
                 >
-                    <q-item-section>{{ t('As CSV') }}</q-item-section>
-                </q-item>
-            </q-list>
-        </q-menu>
-    </q-item>
-    <q-item v-ripple clickable>
-        <q-item-section avatar>
-            <q-icon name="send" />
-        </q-item-section>
-        <q-item-section>{{ t('Send Delivery Note...') }}</q-item-section>
-        <q-item-section side>
-            <q-icon name="keyboard_arrow_right" />
-        </q-item-section>
-        <q-menu anchor="top end" self="top start" auto-close>
-            <q-list>
-                <q-item
+                    <QItemSection>{{ t('As CSV') }}</QItemSection>
+                </QItem>
+            </QList>
+        </QMenu>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="send" />
+        </QItemSection>
+        <QItemSection>{{ t('Send Delivery Note...') }}</QItemSection>
+        <QItemSection side>
+            <QIcon name="keyboard_arrow_right" />
+        </QItemSection>
+        <QMenu anchor="top end" self="top start" auto-close>
+            <QList>
+                <QItem
                     @click="sendDeliveryNoteConfirmation('deliveryNote')"
                     v-ripple
                     clickable
                 >
-                    <q-item-section>{{ t('With prices') }}</q-item-section>
-                </q-item>
-                <q-item
+                    <QItemSection>{{ t('With prices') }}</QItemSection>
+                </QItem>
+                <QItem
                     @click="sendDeliveryNoteConfirmation('withoutPrices')"
                     v-ripple
                     clickable
                 >
-                    <q-item-section>{{ t('Without prices') }}</q-item-section>
-                </q-item>
-                <q-item
+                    <QItemSection>{{ t('Without prices') }}</QItemSection>
+                </QItem>
+                <QItem
                     @click="sendDeliveryNoteConfirmation('deliveryNote', 'csv')"
                     v-ripple
                     clickable
                 >
-                    <q-item-section>{{ t('As CSV') }}</q-item-section>
-                </q-item>
-            </q-list>
-        </q-menu>
-    </q-item>
-    <q-item @click="openDeliveryNote('proforma')" v-ripple clickable>
-        <q-item-section avatar>
-            <q-icon name="receipt" />
-        </q-item-section>
-        <q-item-section>{{ t('Open Proforma Invoice') }}</q-item-section>
-    </q-item>
-    <q-item v-ripple clickable>
-        <q-item-section avatar>
-            <q-icon name="sms" />
-        </q-item-section>
-        <q-item-section>{{ t('Send SMS...') }}</q-item-section>
-        <q-item-section side>
-            <q-icon name="keyboard_arrow_right" />
-        </q-item-section>
-        <q-menu anchor="top end" self="top start" auto-close>
-            <q-list>
-                <q-item @click="showSmsDialog('pendingPayment')" v-ripple clickable>
-                    <q-item-section>{{ t('Pending payment') }}</q-item-section>
-                </q-item>
-                <q-item @click="showSmsDialog('minAmount')" v-ripple clickable>
-                    <q-item-section>{{ t('Minimum amount') }}</q-item-section>
-                </q-item>
-                <q-item
+                    <QItemSection>{{ t('As CSV') }}</QItemSection>
+                </QItem>
+            </QList>
+        </QMenu>
+    </QItem>
+    <QItem @click="openDeliveryNote('proforma')" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="receipt" />
+        </QItemSection>
+        <QItemSection>{{ t('Open Proforma Invoice') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="sms" />
+        </QItemSection>
+        <QItemSection>{{ t('Send SMS...') }}</QItemSection>
+        <QItemSection side>
+            <QIcon name="keyboard_arrow_right" />
+        </QItemSection>
+        <QMenu anchor="top end" self="top start" auto-close>
+            <QList>
+                <QItem @click="showSmsDialog('pendingPayment')" v-ripple clickable>
+                    <QItemSection>{{ t('Pending payment') }}</QItemSection>
+                </QItem>
+                <QItem @click="showSmsDialog('minAmount')" v-ripple clickable>
+                    <QItemSection>{{ t('Minimum amount') }}</QItemSection>
+                </QItem>
+                <QItem
                     @click="showSmsDialogWithChanges('orderChanges')"
                     v-ripple
                     clickable
                 >
-                    <q-item-section>{{ t('Order changes') }}</q-item-section>
-                </q-item>
-            </q-list>
-        </q-menu>
-    </q-item>
+                    <QItemSection>{{ t('Order changes') }}</QItemSection>
+                </QItem>
+            </QList>
+        </QMenu>
+    </QItem>
     <template v-if="!ticket.isDeleted">
-        <q-separator />
-        <q-item @click="confirmDelete()" v-ripple clickable>
-            <q-item-section avatar>
-                <q-icon name="delete" />
-            </q-item-section>
-            <q-item-section>{{ t('Delete ticket') }}</q-item-section>
-        </q-item>
+        <QSeparator />
+        <QItem @click="confirmDelete()" v-ripple clickable>
+            <QItemSection avatar>
+                <QIcon name="delete" />
+            </QItemSection>
+            <QItemSection>{{ t('Delete ticket') }}</QItemSection>
+        </QItem>
     </template>
 </template>
 
diff --git a/src/pages/Ticket/Card/TicketDescriptorProxy.vue b/src/pages/Ticket/Card/TicketDescriptorProxy.vue
index 0a7a353bb..7799b9ee6 100644
--- a/src/pages/Ticket/Card/TicketDescriptorProxy.vue
+++ b/src/pages/Ticket/Card/TicketDescriptorProxy.vue
@@ -9,7 +9,7 @@ const $props = defineProps({
 });
 </script>
 <template>
-    <q-popup-proxy>
+    <QPopupProxy>
         <TicketDescriptor v-if="$props.id" :id="$props.id" />
-    </q-popup-proxy>
+    </QPopupProxy>
 </template>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index 320437596..945a98925 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -81,14 +81,14 @@ async function changeState(value) {
 </script>
 
 <template>
-    <fetch-data
+    <FetchData
         url="States/editableStates"
         @on-fetch="(data) => (editableStates = data)"
         auto-load
     />
     <div class="summary container">
-        <q-card>
-            <skeleton-summary v-if="!ticket" />
+        <QCard>
+            <SkeletonSummary v-if="!ticket" />
             <template v-if="ticket">
                 <div class="header bg-primary q-pa-sm q-mb-md">
                     <span>
@@ -97,7 +97,7 @@ async function changeState(value) {
                         }}) -
                         {{ ticket.nickname }}
                     </span>
-                    <q-btn-dropdown
+                    <QBtnDropdown
                         side
                         top
                         color="orange-11"
@@ -105,284 +105,270 @@ async function changeState(value) {
                         :label="t('ticket.summary.changeState')"
                         :disable="!isEditable()"
                     >
-                        <q-list>
-                            <q-virtual-scroll
+                        <QList>
+                            <QVirtualScroll
                                 style="max-height: 300px"
                                 :items="editableStates"
                                 separator
                                 v-slot="{ item, index }"
                             >
-                                <q-item
+                                <QItem
                                     :key="index"
                                     dense
                                     clickable
                                     v-close-popup
                                     @click="changeState(item.code)"
                                 >
-                                    <q-item-section>
-                                        <q-item-label>{{ item.name }}</q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                            </q-virtual-scroll>
-                        </q-list>
-                    </q-btn-dropdown>
+                                    <QItemSection>
+                                        <QItemLabel>{{ item.name }}</QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </QVirtualScroll>
+                        </QList>
+                    </QBtnDropdown>
                 </div>
                 <div class="row q-pa-md q-col-gutter-md q-mb-md">
                     <div class="col">
-                        <q-list>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
-                                        t('ticket.summary.state')
-                                    }}</q-item-label>
-                                    <q-item-label
+                        <QList>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>
+                                        {{ t('ticket.summary.state') }}
+                                    </QItemLabel>
+                                    <QItemLabel
                                         :class="stateColor(ticket.ticketState.state)"
                                     >
                                         {{ ticket.ticketState.state.name }}
-                                    </q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.salesPerson')
-                                    }}</q-item-label>
-                                    <q-item-label>
+                                    }}</QItemLabel>
+                                    <QItemLabel>
                                         <span class="link">
                                             {{ ticket.client.salesPersonUser.name }}
                                             <WorkerDescriptorProxy
                                                 :id="ticket.client.salesPersonFk"
                                             />
                                         </span>
-                                    </q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.agency')
-                                    }}</q-item-label>
-                                    <q-item-label>{{
-                                        ticket.agencyMode.name
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                                    }}</QItemLabel>
+                                    <QItemLabel>{{ ticket.agencyMode.name }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.zone')
-                                    }}</q-item-label>
-                                    <q-item-label class="link">{{
+                                    }}</QItemLabel>
+                                    <QItemLabel class="link">{{
                                         ticket.routeFk
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.warehouse')
-                                    }}</q-item-label>
-                                    <q-item-label>{{
-                                        ticket.warehouse.name
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                                    }}</QItemLabel>
+                                    <QItemLabel>{{ ticket.warehouse.name }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.invoice')
-                                    }}</q-item-label>
-                                    <q-item-label v-if="ticket.refFk">
+                                    }}</QItemLabel>
+                                    <QItemLabel v-if="ticket.refFk">
                                         <span class="link">
                                             {{ ticket.refFk }}
                                             <InvoiceOutDescriptorProxy :id="ticket.id" />
                                         </span>
-                                    </q-item-label>
-                                </q-item-section>
-                            </q-item>
-                        </q-list>
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </QList>
                     </div>
                     <div class="col">
-                        <q-list>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                        <QList>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.shipped')
-                                    }}</q-item-label>
-                                    <q-item-label>{{
-                                        toDate(ticket.shipped)
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                                    }}</QItemLabel>
+                                    <QItemLabel>{{ toDate(ticket.shipped) }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.landed')
-                                    }}</q-item-label>
-                                    <q-item-label>{{
-                                        toDate(ticket.landed)
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                                    }}</QItemLabel>
+                                    <QItemLabel>{{ toDate(ticket.landed) }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.packages')
-                                    }}</q-item-label>
-                                    <q-item-label>{{ ticket.packages }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                                    }}</QItemLabel>
+                                    <QItemLabel>{{ ticket.packages }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.consigneePhone')
-                                    }}</q-item-label>
-                                    <q-item-label>{{
-                                        ticket.address.phone
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                                    }}</QItemLabel>
+                                    <QItemLabel>{{ ticket.address.phone }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.consigneeMobile')
-                                    }}</q-item-label>
-                                    <q-item-label>{{
-                                        ticket.address.mobile
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                                    }}</QItemLabel>
+                                    <QItemLabel>{{ ticket.address.mobile }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.clientPhone')
-                                    }}</q-item-label>
-                                    <q-item-label>{{ ticket.client.phone }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                                    }}</QItemLabel>
+                                    <QItemLabel>{{ ticket.client.phone }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.clientMobile')
-                                    }}</q-item-label>
-                                    <q-item-label>{{
-                                        ticket.client.mobile
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                                    }}</QItemLabel>
+                                    <QItemLabel>{{ ticket.client.mobile }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.consignee')
-                                    }}</q-item-label>
-                                    <q-item-label>{{ formattedAddress() }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                        </q-list>
+                                    }}</QItemLabel>
+                                    <QItemLabel>{{ formattedAddress() }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </QList>
                     </div>
                     <div class="col">
-                        <q-list>
-                            <q-item v-for="note in ticket.notes" :key="note.id">
-                                <q-item-section>
-                                    <q-item-label caption>
+                        <QList>
+                            <QItem v-for="note in ticket.notes" :key="note.id">
+                                <QItemSection>
+                                    <QItemLabel caption>
                                         {{ note.observationType.description }}
-                                    </q-item-label>
-                                    <q-item-label>
+                                    </QItemLabel>
+                                    <QItemLabel>
                                         {{ note.description }}
-                                    </q-item-label>
-                                </q-item-section>
-                            </q-item>
-                        </q-list>
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </QList>
                     </div>
                     <div class="col">
-                        <q-list class="taxes">
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                        <QList class="taxes">
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.subtotal')
-                                    }}</q-item-label>
-                                    <q-item-label>{{
+                                    }}</QItemLabel>
+                                    <QItemLabel>{{
                                         toCurrency(ticket.totalWithoutVat)
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.vat')
-                                    }}</q-item-label>
-                                    <q-item-label>{{
+                                    }}</QItemLabel>
+                                    <QItemLabel>{{
                                         toCurrency(
                                             ticket.totalWithVat - ticket.totalWithoutVat
                                         )
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>{{
                                         t('ticket.summary.total')
-                                    }}</q-item-label>
-                                    <q-item-label>{{
+                                    }}</QItemLabel>
+                                    <QItemLabel>{{
                                         toCurrency(ticket.totalWithVat)
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                        </q-list>
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </QList>
                     </div>
                 </div>
                 <div class="row q-pa-md" v-if="salesLines.length > 0">
                     <div class="col">
-                        <q-list>
-                            <q-item-label header class="text-h6">
+                        <QList>
+                            <QItemLabel header class="text-h6">
                                 {{ t('ticket.summary.saleLines') }}
-                                <router-link
+                                <RouterLink
                                     :to="{
                                         name: 'TicketBasicData',
                                         params: { id: entityId },
                                     }"
                                     target="_blank"
                                 >
-                                    <q-icon name="open_in_new" />
-                                </router-link>
-                            </q-item-label>
-                            <q-table :rows="ticket.sales" flat>
+                                    <QIcon name="open_in_new" />
+                                </RouterLink>
+                            </QItemLabel>
+                            <QTable :rows="ticket.sales" flat>
                                 <template #header="props">
-                                    <q-tr :props="props">
-                                        <q-th auto-width></q-th>
-                                        <q-th auto-width>{{
+                                    <QTr :props="props">
+                                        <QTh auto-width></QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.item')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.visible')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.available')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.quantity')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.description')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.price')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.discount')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.amount')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.packing')
-                                        }}</q-th>
-                                    </q-tr>
+                                        }}</QTh>
+                                    </QTr>
                                 </template>
                                 <template #body="props">
-                                    <q-tr :props="props">
-                                        <q-td>
-                                            <q-btn
+                                    <QTr :props="props">
+                                        <QTd>
+                                            <QBtn
                                                 flat
                                                 round
                                                 size="xs"
@@ -396,14 +382,14 @@ async function changeState(value) {
                                                     },
                                                 }"
                                             >
-                                                <q-tooltip
+                                                <QTooltip
                                                     >{{ t('ticket.summary.claim') }}:
                                                     {{
                                                         props.row.claim.claimFk
-                                                    }}</q-tooltip
+                                                    }}</QTooltip
                                                 >
-                                            </q-btn>
-                                            <q-btn
+                                            </QBtn>
+                                            <QBtn
                                                 flat
                                                 round
                                                 size="xs"
@@ -418,60 +404,64 @@ async function changeState(value) {
                                                     },
                                                 }"
                                             >
-                                                <q-tooltip
+                                                <QTooltip
                                                     >{{ t('ticket.summary.claim') }}:
                                                     {{
                                                         props.row.claimBeginning.claimFk
-                                                    }}</q-tooltip
+                                                    }}</QTooltip
                                                 >
-                                            </q-btn>
-                                            <q-icon
+                                            </QBtn>
+                                            <QIcon
                                                 name="warning"
                                                 v-show="props.row.visible < 0"
                                                 size="xs"
                                                 color="primary"
                                             >
-                                                <q-tooltip
+                                                <QTooltip
                                                     >{{ t('ticket.summary.visible') }}:
-                                                    {{ props.row.visible }}</q-tooltip
+                                                    {{ props.row.visible }}</QTooltip
                                                 >
-                                            </q-icon>
-                                            <q-icon
+                                            </QIcon>
+                                            <QIcon
                                                 name="vn:reserva"
                                                 v-show="props.row.reserved"
                                                 size="xs"
                                                 color="primary"
                                             >
-                                                <q-tooltip>{{
-                                                    t('ticket.summary.reserved')
-                                                }}</q-tooltip>
-                                            </q-icon>
-                                            <q-icon
+                                                <QTooltip>
+                                                    {{ t('ticket.summary.reserved') }}
+                                                </QTooltip>
+                                            </QIcon>
+                                            <QIcon
                                                 name="vn:unavailable"
                                                 v-show="props.row.itemShortage"
                                                 size="xs"
                                                 color="primary"
                                             >
-                                                <q-tooltip>{{
-                                                    t('ticket.summary.itemShortage')
-                                                }}</q-tooltip>
-                                            </q-icon>
-                                            <q-icon
+                                                <QTooltip>
+                                                    {{ t('ticket.summary.itemShortage') }}
+                                                </QTooltip>
+                                            </QIcon>
+                                            <QIcon
                                                 name="vn:components"
                                                 v-show="props.row.hasComponentLack"
                                                 size="xs"
                                                 color="primary"
                                             >
-                                                <q-tooltip>{{
-                                                    t('ticket.summary.hasComponentLack')
-                                                }}</q-tooltip>
-                                            </q-icon>
-                                        </q-td>
-                                        <q-td class="link">{{ props.row.itemFk }}</q-td>
-                                        <q-td>{{ props.row.visible }}</q-td>
-                                        <q-td>{{ props.row.available }}</q-td>
-                                        <q-td>{{ props.row.quantity }}</q-td>
-                                        <q-td>
+                                                <QTooltip>
+                                                    {{
+                                                        t(
+                                                            'ticket.summary.hasComponentLack'
+                                                        )
+                                                    }}
+                                                </QTooltip>
+                                            </QIcon>
+                                        </QTd>
+                                        <QTd class="link">{{ props.row.itemFk }}</QTd>
+                                        <QTd>{{ props.row.visible }}</QTd>
+                                        <QTd>{{ props.row.available }}</QTd>
+                                        <QTd>{{ props.row.quantity }}</QTd>
+                                        <QTd>
                                             <div class="fetched-tags">
                                                 <span>{{ props.row.item.name }}</span>
                                                 <span
@@ -484,10 +474,10 @@ async function changeState(value) {
                                                 :item="props.row.item"
                                                 :max-length="5"
                                             ></fetched-tags>
-                                        </q-td>
-                                        <q-td>{{ props.row.price }}</q-td>
-                                        <q-td>{{ props.row.discount }} %</q-td>
-                                        <q-td
+                                        </QTd>
+                                        <QTd>{{ props.row.price }}</QTd>
+                                        <QTd>{{ props.row.discount }} %</QTd>
+                                        <QTd
                                             >{{
                                                 toCurrency(
                                                     props.row.quantity *
@@ -495,14 +485,14 @@ async function changeState(value) {
                                                         ((100 - props.row.discount) / 100)
                                                 )
                                             }}
-                                        </q-td>
-                                        <q-td>{{
+                                        </QTd>
+                                        <QTd>{{
                                             dashIfEmpty(props.row.item.itemPackingTypeFk)
-                                        }}</q-td>
-                                    </q-tr>
+                                        }}</QTd>
+                                    </QTr>
                                 </template>
-                            </q-table>
-                        </q-list>
+                            </QTable>
+                        </QList>
                     </div>
                 </div>
                 <div
@@ -510,137 +500,137 @@ async function changeState(value) {
                     v-if="ticket.packagings.length > 0 || ticket.services.length > 0"
                 >
                     <div class="col" v-if="ticket.packagings.length > 0">
-                        <q-list>
-                            <q-item-label header class="text-h6">
+                        <QList>
+                            <QItemLabel header class="text-h6">
                                 {{ t('ticket.summary.packages') }}
-                                <q-icon name="open_in_new" />
-                            </q-item-label>
-                            <q-table :rows="ticket.packagings" flat>
+                                <QIcon name="open_in_new" />
+                            </QItemLabel>
+                            <QTable :rows="ticket.packagings" flat>
                                 <template #header="props">
-                                    <q-tr :props="props">
-                                        <q-th auto-width>{{
+                                    <QTr :props="props">
+                                        <QTh auto-width>{{
                                             t('ticket.summary.created')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.package')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.quantity')
-                                        }}</q-th>
-                                    </q-tr>
+                                        }}</QTh>
+                                    </QTr>
                                 </template>
                                 <template #body="props">
-                                    <q-tr :props="props">
-                                        <q-td>{{ toDate(props.row.created) }}</q-td>
-                                        <q-td>{{ props.row.packaging.item.name }}</q-td>
-                                        <q-td>{{ props.row.quantity }}</q-td>
-                                    </q-tr>
+                                    <QTr :props="props">
+                                        <QTd>{{ toDate(props.row.created) }}</QTd>
+                                        <QTd>{{ props.row.packaging.item.name }}</QTd>
+                                        <QTd>{{ props.row.quantity }}</QTd>
+                                    </QTr>
                                 </template>
-                            </q-table>
-                        </q-list>
+                            </QTable>
+                        </QList>
                     </div>
                     <div class="col" v-if="ticket.services.length > 0">
-                        <q-list>
-                            <q-item-label header class="text-h6">
+                        <QList>
+                            <QItemLabel header class="text-h6">
                                 {{ t('ticket.summary.services') }}
-                                <q-icon name="open_in_new" />
-                            </q-item-label>
-                            <q-table :rows="ticket.services" flat>
+                                <QIcon name="open_in_new" />
+                            </QItemLabel>
+                            <QTable :rows="ticket.services" flat>
                                 <template #header="props">
-                                    <q-tr :props="props">
-                                        <q-th auto-width>{{
+                                    <QTr :props="props">
+                                        <QTh auto-width>{{
                                             t('ticket.summary.quantity')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.description')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.price')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.taxClass')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.amount')
-                                        }}</q-th>
-                                    </q-tr>
+                                        }}</QTh>
+                                    </QTr>
                                 </template>
                                 <template #body="props">
-                                    <q-tr :props="props">
-                                        <q-td>{{ props.row.quantity }}</q-td>
-                                        <q-td>{{ props.row.description }}</q-td>
-                                        <q-td>{{ toCurrency(props.row.price) }}</q-td>
-                                        <q-td>{{ props.row.taxClass.description }}</q-td>
-                                        <q-td>{{
+                                    <QTr :props="props">
+                                        <QTd>{{ props.row.quantity }}</QTd>
+                                        <QTd>{{ props.row.description }}</QTd>
+                                        <QTd>{{ toCurrency(props.row.price) }}</QTd>
+                                        <QTd>{{ props.row.taxClass.description }}</QTd>
+                                        <QTd>{{
                                             toCurrency(
                                                 props.row.quantity * props.row.price
                                             )
-                                        }}</q-td>
-                                    </q-tr>
+                                        }}</QTd>
+                                    </QTr>
                                 </template>
-                            </q-table>
-                        </q-list>
+                            </QTable>
+                        </QList>
                     </div>
                 </div>
                 <div class="row q-pa-md" v-if="ticket.requests.length > 0">
                     <div class="col">
-                        <q-list>
-                            <q-item-label header class="text-h6">
+                        <QList>
+                            <QItemLabel header class="text-h6">
                                 {{ t('ticket.summary.request') }}
-                                <q-icon name="open_in_new" />
-                            </q-item-label>
-                            <q-table :rows="ticket.requests" flat>
+                                <QIcon name="open_in_new" />
+                            </QItemLabel>
+                            <QTable :rows="ticket.requests" flat>
                                 <template #header="props">
-                                    <q-tr :props="props">
-                                        <q-th auto-width>{{
+                                    <QTr :props="props">
+                                        <QTh auto-width>{{
                                             t('ticket.summary.description')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.created')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.requester')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.atender')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.quantity')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.price')
-                                        }}</q-th>
-                                        <q-th auto-width>{{
+                                        }}</QTh>
+                                        <QTh auto-width>{{
                                             t('ticket.summary.item')
-                                        }}</q-th>
-                                        <q-th auto-width>Ok</q-th>
-                                    </q-tr>
+                                        }}</QTh>
+                                        <QTh auto-width>Ok</QTh>
+                                    </QTr>
                                 </template>
                                 <template #body="props">
-                                    <q-tr :props="props">
-                                        <q-td>{{ props.row.description }}</q-td>
-                                        <q-td>{{ toDate(props.row.created) }}</q-td>
-                                        <q-td>{{ props.row.requester.user.name }}</q-td>
-                                        <q-td>{{ props.row.atender.user.name }}</q-td>
-                                        <q-td>{{ props.row.quantity }}</q-td>
-                                        <q-td>{{ toCurrency(props.row.price) }}</q-td>
-                                        <q-td v-if="!props.row.sale">-</q-td>
-                                        <q-td v-if="props.row.sale" class="link">{{
+                                    <QTr :props="props">
+                                        <QTd>{{ props.row.description }}</QTd>
+                                        <QTd>{{ toDate(props.row.created) }}</QTd>
+                                        <QTd>{{ props.row.requester.user.name }}</QTd>
+                                        <QTd>{{ props.row.atender.user.name }}</QTd>
+                                        <QTd>{{ props.row.quantity }}</QTd>
+                                        <QTd>{{ toCurrency(props.row.price) }}</QTd>
+                                        <QTd v-if="!props.row.sale">-</QTd>
+                                        <QTd v-if="props.row.sale" class="link">{{
                                             props.row.sale.itemFk
-                                        }}</q-td>
-                                        <q-td
-                                            ><q-checkbox
+                                        }}</QTd>
+                                        <QTd
+                                            ><QCheckbox
                                                 v-model="props.row.isOk"
                                                 :disable="true"
-                                        /></q-td>
-                                    </q-tr>
+                                        /></QTd>
+                                    </QTr>
                                 </template>
-                            </q-table>
-                        </q-list>
+                            </QTable>
+                        </QList>
                     </div>
                 </div>
             </template>
-        </q-card>
+        </QCard>
     </div>
 </template>
 <style lang="scss" scoped>
diff --git a/src/pages/Ticket/Card/TicketSummaryDialog.vue b/src/pages/Ticket/Card/TicketSummaryDialog.vue
index 40b88a96d..11e12c8a9 100644
--- a/src/pages/Ticket/Card/TicketSummaryDialog.vue
+++ b/src/pages/Ticket/Card/TicketSummaryDialog.vue
@@ -15,9 +15,9 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
 </script>
 
 <template>
-    <q-dialog ref="dialogRef" @hide="onDialogHide">
-        <ticket-summary v-if="$props.id" :id="$props.id" />
-    </q-dialog>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <TicketSummary v-if="$props.id" :id="$props.id" />
+    </QDialog>
 </template>
 
 <style lang="scss">
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 9839c774c..aa98b9564 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -13,9 +13,9 @@ const props = defineProps({
     },
 });
 
-const from = Date.vnNew()
+const from = Date.vnNew();
 const to = Date.vnNew();
-to.setDate(to.getDate() + 1)
+to.setDate(to.getDate() + 1);
 
 const defaultParams = {
     from: toDateString(from),
@@ -30,11 +30,11 @@ const warehouses = ref();
 </script>
 
 <template>
-    <fetch-data url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
-    <fetch-data url="States" @on-fetch="(data) => (states = data)" auto-load />
-    <fetch-data url="AgencyModes" @on-fetch="(data) => (agencies = data)" auto-load />
-    <fetch-data url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
-    <fetch-data
+    <FetchData url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
+    <FetchData url="States" @on-fetch="(data) => (states = data)" auto-load />
+    <FetchData url="AgencyModes" @on-fetch="(data) => (agencies = data)" auto-load />
+    <FetchData url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
+    <FetchData
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
         @on-fetch="(data) => (workers = data)"
@@ -52,76 +52,76 @@ const warehouses = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <q-list dense>
-                <q-item>
-                    <q-item-section>
-                        <q-input
+            <QList dense>
+                <QItem>
+                    <QItemSection>
+                        <QInput
                             v-model="params.clientFk"
                             :label="t('Customer ID')"
                             lazy-rules
                         />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-input
+                    </QItemSection>
+                    <QItemSection>
+                        <QInput
                             v-model="params.orderFk"
                             :label="t('Order ID')"
                             lazy-rules
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input v-model="params.from" :label="t('From')" mask="date">
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput v-model="params.from" :label="t('From')" mask="date">
                             <template #append>
-                                <q-icon name="event" class="cursor-pointer">
-                                    <q-popup-proxy
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
                                         cover
                                         transition-show="scale"
                                         transition-hide="scale"
                                     >
-                                        <q-date v-model="params.from" landscape>
+                                        <QDate v-model="params.from" landscape>
                                             <div
                                                 class="row items-center justify-end q-gutter-sm"
                                             >
-                                                <q-btn
+                                                <QBtn
                                                     :label="t('globals.cancel')"
                                                     color="primary"
                                                     flat
                                                     v-close-popup
                                                 />
-                                                <q-btn
+                                                <QBtn
                                                     :label="t('globals.confirm')"
                                                     color="primary"
                                                     flat
                                                     v-close-popup
                                                 />
                                             </div>
-                                        </q-date>
-                                    </q-popup-proxy>
-                                </q-icon>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
                             </template>
-                        </q-input>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-input v-model="params.to" :label="t('To')" mask="date">
+                        </QInput>
+                    </QItemSection>
+                    <QItemSection>
+                        <QInput v-model="params.to" :label="t('To')" mask="date">
                             <template #append>
-                                <q-icon name="event" class="cursor-pointer">
-                                    <q-popup-proxy
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
                                         cover
                                         transition-show="scale"
                                         transition-hide="scale"
                                     >
-                                        <q-date v-model="params.to" landscape>
+                                        <QDate v-model="params.to" landscape>
                                             <div
                                                 class="row items-center justify-end q-gutter-sm"
                                             >
-                                                <q-btn
+                                                <QBtn
                                                     :label="t('globals.cancel')"
                                                     color="primary"
                                                     flat
                                                     v-close-popup
                                                 />
-                                                <q-btn
+                                                <QBtn
                                                     :label="t('globals.confirm')"
                                                     color="primary"
                                                     flat
@@ -129,19 +129,19 @@ const warehouses = ref();
                                                     v-close-popup
                                                 />
                                             </div>
-                                        </q-date>
-                                    </q-popup-proxy>
-                                </q-icon>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
                             </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section v-if="!workers">
-                        <q-skeleton type="QInput" class="full-width" />
-                    </q-item-section>
-                    <q-item-section v-if="workers">
-                        <q-select
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="!workers">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="workers">
+                        <QSelect
                             :label="t('Salesperson')"
                             v-model="params.salesPersonFk"
                             :options="workers"
@@ -152,14 +152,14 @@ const warehouses = ref();
                             use-input
                             :input-debounce="0"
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section v-if="!states">
-                        <q-skeleton type="QInput" class="full-width" />
-                    </q-item-section>
-                    <q-item-section v-if="states">
-                        <q-select
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="!states">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="states">
+                        <QSelect
                             :label="t('State')"
                             v-model="params.stateFk"
                             @update:model-value="searchFn()"
@@ -169,71 +169,71 @@ const warehouses = ref();
                             emit-value
                             map-options
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
                             v-model="params.refFk"
                             :label="t('Invoice Ref.')"
                             lazy-rules
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-checkbox
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QCheckbox
                             v-model="params.myTeam"
                             @update:model-value="searchFn()"
                             :label="t('My team')"
                             toggle-indeterminate
                         />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-checkbox
+                    </QItemSection>
+                    <QItemSection>
+                        <QCheckbox
                             v-model="params.pending"
                             @update:model-value="searchFn()"
                             :label="t('Pending')"
                             toggle-indeterminate
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-checkbox
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QCheckbox
                             v-model="params.hasInvoice"
                             @update:model-value="searchFn()"
                             :label="t('Invoiced')"
                             toggle-indeterminate
                         />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-checkbox
+                    </QItemSection>
+                    <QItemSection>
+                        <QCheckbox
                             v-model="params.hasRoute"
                             @update:model-value="searchFn()"
                             :label="t('Routed')"
                             toggle-indeterminate
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-checkbox
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QCheckbox
                             v-model="params.problems"
                             @update:model-value="searchFn()"
                             :label="t('With problems')"
                             toggle-indeterminate
                         />
-                    </q-item-section>
-                </q-item>
-                <q-separator />
-                <q-expansion-item :label="t('More options')" expand-separator>
-                    <q-item>
-                        <q-item-section v-if="!provinces">
-                            <q-skeleton type="QInput" class="full-width" />
-                        </q-item-section>
-                        <q-item-section v-if="provinces">
-                            <q-select
+                    </QItemSection>
+                </QItem>
+                <QSeparator />
+                <QExpansionItem :label="t('More options')" expand-separator>
+                    <QItem>
+                        <QItemSection v-if="!provinces">
+                            <QSkeleton type="QInput" class="full-width" />
+                        </QItemSection>
+                        <QItemSection v-if="provinces">
+                            <QSelect
                                 :label="t('Province')"
                                 v-model="params.provinceFk"
                                 @update:model-value="searchFn()"
@@ -243,14 +243,14 @@ const warehouses = ref();
                                 emit-value
                                 map-options
                             />
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section v-if="!states">
-                            <q-skeleton type="QInput" class="full-width" />
-                        </q-item-section>
-                        <q-item-section v-if="!states">
-                            <q-select
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection v-if="!agencies">
+                            <QSkeleton type="QInput" class="full-width" />
+                        </QItemSection>
+                        <QItemSection v-if="agencies">
+                            <QSelect
                                 :label="t('Agency')"
                                 v-model="params.agencyModeFk"
                                 @update:model-value="searchFn()"
@@ -260,14 +260,14 @@ const warehouses = ref();
                                 emit-value
                                 map-options
                             />
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section v-if="!warehouses">
-                            <q-skeleton type="QInput" class="full-width" />
-                        </q-item-section>
-                        <q-item-section v-if="warehouses">
-                            <q-select
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection v-if="!warehouses">
+                            <QSkeleton type="QInput" class="full-width" />
+                        </QItemSection>
+                        <QItemSection v-if="warehouses">
+                            <QSelect
                                 :label="t('Warehouse')"
                                 v-model="params.warehouseFk"
                                 @update:model-value="searchFn()"
@@ -277,10 +277,10 @@ const warehouses = ref();
                                 emit-value
                                 map-options
                             />
-                        </q-item-section>
-                    </q-item>
-                </q-expansion-item>
-            </q-list>
+                        </QItemSection>
+                    </QItem>
+                </QExpansionItem>
+            </QList>
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index b8cf78181..afa504e8c 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
-import Paginate from 'src/components/PaginateData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { toDate, toDateString, toCurrency } from 'src/filters/index';
 import TicketSummaryDialog from './Card/TicketSummaryDialog.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
@@ -88,28 +88,28 @@ function viewSummary(id) {
         </Teleport>
         <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
-                <q-btn
+                <QBtn
                     flat
                     @click="stateStore.toggleRightDrawer()"
                     round
                     dense
                     icon="menu"
                 >
-                    <q-tooltip bottom anchor="bottom right">
+                    <QTooltip bottom anchor="bottom right">
                         {{ t('globals.collapseMenu') }}
-                    </q-tooltip>
-                </q-btn>
+                    </QTooltip>
+                </QBtn>
             </div>
         </Teleport>
     </template>
-    <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <q-scroll-area class="fit text-grey-8">
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
             <TicketFilter data-key="TicketList" />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page class="column items-center q-pa-md">
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
         <div class="card-list">
-            <paginate
+            <VnPaginate
                 data-key="TicketList"
                 url="Tickets/filter"
                 :filter="filter"
@@ -118,109 +118,109 @@ function viewSummary(id) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <q-item
+                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <QItem
                             class="q-pa-none items-start cursor-pointer q-hoverable"
                             v-ripple
                             clickable
                         >
-                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
                                 <div class="text-h6">{{ row.name }}</div>
-                                <q-item-label caption>#{{ row.id }}</q-item-label>
-                                <q-list>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
+                                <QList>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('ticket.list.nickname') }}
-                                            </q-item-label>
-                                            <q-item-label>
+                                            </QItemLabel>
+                                            <QItemLabel>
                                                 {{ row.nickname }}
-                                            </q-item-label>
-                                        </q-item-section>
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                        </QItemSection>
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('ticket.list.state') }}
-                                            </q-item-label>
-                                            <q-item-label>
-                                                <q-badge
+                                            </QItemLabel>
+                                            <QItemLabel>
+                                                <QBadge
                                                     :color="stateColor(row)"
                                                     class="q-ma-none"
                                                     dense
                                                 >
                                                     {{ row.state }}
-                                                </q-badge>
-                                            </q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                                </QBadge>
+                                            </QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('ticket.list.shipped') }}
-                                            </q-item-label>
-                                            <q-item-label>
+                                            </QItemLabel>
+                                            <QItemLabel>
                                                 {{ toDate(row.shipped) }}
-                                            </q-item-label>
-                                        </q-item-section>
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                        </QItemSection>
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('Zone') }}
-                                            </q-item-label>
-                                            <q-item-label>
+                                            </QItemLabel>
+                                            <QItemLabel>
                                                 {{ row.zoneName }}
-                                            </q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('ticket.list.salesPerson') }}
-                                            </q-item-label>
-                                            <q-item-label>
+                                            </QItemLabel>
+                                            <QItemLabel>
                                                 {{ row.salesPerson }}
-                                            </q-item-label>
-                                        </q-item-section>
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                        </QItemSection>
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('ticket.list.total') }}
-                                            </q-item-label>
-                                            <q-item-label>
+                                            </QItemLabel>
+                                            <QItemLabel>
                                                 {{ toCurrency(row.totalWithVat) }}
-                                            </q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                </q-list>
-                            </q-item-section>
-                            <q-separator vertical />
-                            <q-card-actions vertical class="justify-between">
-                                <q-btn
+                                            </QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                </QList>
+                            </QItemSection>
+                            <QSeparator vertical />
+                            <QCardActions vertical class="justify-between">
+                                <QBtn
                                     flat
                                     round
                                     color="orange"
                                     icon="arrow_circle_right"
                                     @click="navigate(row.id)"
                                 >
-                                    <q-tooltip>
+                                    <QTooltip>
                                         {{ t('components.smartCard.openCard') }}
-                                    </q-tooltip>
-                                </q-btn>
-                                <q-btn
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn
                                     flat
                                     round
                                     color="grey-7"
                                     icon="preview"
                                     @click="viewSummary(row.id)"
                                 >
-                                    <q-tooltip>
+                                    <QTooltip>
                                         {{ t('components.smartCard.openSummary') }}
-                                    </q-tooltip>
-                                </q-btn>
-                            </q-card-actions>
-                        </q-item>
-                    </q-card>
+                                    </QTooltip>
+                                </QBtn>
+                            </QCardActions>
+                        </QItem>
+                    </QCard>
                 </template>
-            </paginate>
+            </VnPaginate>
         </div>
-    </q-page>
+    </QPage>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Ticket/TicketMain.vue b/src/pages/Ticket/TicketMain.vue
index e4350a6e7..f0dc2e500 100644
--- a/src/pages/Ticket/TicketMain.vue
+++ b/src/pages/Ticket/TicketMain.vue
@@ -6,12 +6,12 @@ const stateStore = useStateStore();
 </script>
 
 <template>
-    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <q-scroll-area class="fit text-grey-8">
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
             <LeftMenu />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page-container>
-        <router-view></router-view>
-    </q-page-container>
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
 </template>
diff --git a/src/pages/Wagon/Type/WagonTypeCreate.vue b/src/pages/Wagon/Type/WagonTypeCreate.vue
new file mode 100644
index 000000000..adfd41049
--- /dev/null
+++ b/src/pages/Wagon/Type/WagonTypeCreate.vue
@@ -0,0 +1,419 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import { computed, ref, onMounted, onUpdated } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+onMounted(() => fetch());
+onUpdated(() => fetch());
+
+const { t } = useI18n();
+const route = useRoute();
+const quasar = useQuasar();
+const router = useRouter();
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+const entityId = computed(() => $props.id || route.params.id);
+
+const wagon = ref([]);
+const divisible = ref(false);
+const name = ref('');
+const colorPickerActive = ref(false);
+let originalData = { trays: [] };
+let wagonConfig;
+let wagonTypeColors;
+let currentTrayColorPicked;
+
+async function fetch() {
+    try {
+        await axios.get('WagonConfigs').then(async (res) => {
+            if (res.data) {
+                wagonConfig = res.data[0];
+            }
+        });
+
+        await axios.get(`WagonTypeColors`).then(async (res) => {
+            if (res.data) {
+                wagonTypeColors = res.data;
+                if (!entityId.value)
+                    wagon.value.push({
+                        id: 0,
+                        position: 0,
+                        color: { ...wagonTypeColors[0] },
+                        action: 'add',
+                    });
+                else {
+                    await axios
+                        .get(`WagonTypeTrays`, {
+                            params: { filter: { where: { typeFk: entityId.value } } },
+                        })
+                        .then(async (res) => {
+                            if (res.data) {
+                                for (let i = 0; i < res.data.length; i++) {
+                                    const tray = res.data[i];
+                                    wagon.value.push({
+                                        id: res.data.length - i - 1,
+                                        position: tray.height,
+                                        color: {
+                                            ...wagonTypeColors.find((color) => {
+                                                return color.id === tray.colorFk;
+                                            }),
+                                        },
+                                        action: tray.height == 0 ? 'add' : 'delete',
+                                    });
+                                }
+                                wagon.value.forEach((value) => {
+                                    originalData.trays.push({ ...value });
+                                });
+                            }
+                        });
+                }
+            }
+        });
+
+        if (entityId.value) {
+            await axios.get(`WagonTypes/${entityId.value}`).then((res) => {
+                if (res.data) {
+                    originalData.name = name.value = res.data.name;
+                    originalData.divisible = divisible.value = res.data.divisible;
+                }
+            });
+        }
+    } catch (e) {
+        //
+    }
+}
+
+function addTray() {
+    if (
+        wagon.value.find((tray) => {
+            return tray.position == null;
+        })
+    ) {
+        quasar.notify({
+            message: t('wagon.warnings.uncompleteTrays'),
+            type: 'warning',
+        });
+        return;
+    }
+
+    if (wagon.value.length < wagonConfig.maxTrays) {
+        wagon.value.unshift({
+            id: wagon.value.length,
+            position: null,
+            color: { ...wagonTypeColors[0] },
+            action: 'delete',
+        });
+    } else {
+        quasar.notify({
+            message: t('wagon.warnings.maxTrays'),
+            type: 'warning',
+        });
+    }
+}
+
+function deleteTray(trayToDelete) {
+    wagon.value = wagon.value.filter((tray) => tray.id !== trayToDelete.id);
+    reorderIds();
+}
+
+function reorderIds() {
+    for (let index = wagon.value.length - 1; index >= 0; index--) {
+        wagon.value[index].id = index;
+    }
+}
+
+async function onSubmit() {
+    try {
+        const path = entityId.value
+            ? 'WagonTypes/editWagonType'
+            : 'WagonTypes/createWagonType';
+
+        const params = {
+            id: entityId.value,
+            name: name.value,
+            divisible: divisible.value,
+            trays: wagon.value,
+        };
+
+        await axios.patch(path, params).then((res) => {
+            if (res.status == 204) router.push({ path: `/wagon/type/list` });
+        });
+    } catch (error) {
+        //
+    }
+}
+
+function onReset() {
+    name.value = entityId.value ? originalData.name : null;
+    divisible.value = entityId.value ? originalData.divisible : false;
+    wagon.value = entityId.value
+        ? [...originalData.trays]
+        : [
+              {
+                  id: 0,
+                  position: 0,
+                  color: { ...wagonTypeColors[0] },
+                  action: 'add',
+              },
+          ];
+}
+
+function doAction(tray) {
+    if (tray.action == 'add') {
+        addTray();
+    } else {
+        deleteTray(tray);
+    }
+}
+
+function showColorPicker(tray) {
+    colorPickerActive.value = true;
+    currentTrayColorPicked = wagon.value.findIndex((val) => {
+        return val.id === tray.id;
+    });
+}
+
+function updateColor(newColor) {
+    wagon.value[currentTrayColorPicked].color = {
+        ...wagonTypeColors.find((color) => {
+            return color.rgb === newColor;
+        }),
+    };
+}
+
+function onPositionBlur(tray) {
+    if (tray.position) {
+        if (tray.position == '' || tray.position < 0) {
+            tray.position = null;
+            return;
+        }
+        tray.position = parseInt(tray.position);
+        wagon.value.sort((a, b) => b.position - a.position);
+        reorderIds();
+        for (let index = wagon.value.length - 1; index > 0; index--) {
+            if (exceedMaxHeight(index - 1)) continue;
+            if (
+                wagon.value[index - 1].position - wagon.value[index].position >=
+                wagonConfig.minHeightBetweenTrays
+            ) {
+                continue;
+            } else {
+                wagon.value[index - 1].position +=
+                    wagonConfig.minHeightBetweenTrays -
+                    (wagon.value[index - 1].position - wagon.value[index].position);
+
+                quasar.notify({
+                    message:
+                        t('wagon.warnings.minHeightBetweenTrays') +
+                        wagonConfig.minHeightBetweenTrays +
+                        ' cm',
+                    type: 'warning',
+                });
+
+                exceedMaxHeight(index - 1);
+            }
+        }
+    }
+}
+
+function exceedMaxHeight(pos) {
+    if (wagon.value[pos].position > wagonConfig.maxWagonHeight) {
+        wagon.value.splice(pos, 1);
+        quasar.notify({
+            message:
+                t('wagon.warnings.maxWagonHeight') + wagonConfig.maxWagonHeight + ' cm',
+            type: 'warning',
+        });
+        return true;
+    }
+    return false;
+}
+</script>
+
+<template>
+    <QPage class="q-pa-sm q-mx-xl">
+        <QCard class="q-pa-sm">
+            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
+                <QInput
+                    filled
+                    v-model="name"
+                    :label="t('wagon.type.name')"
+                    :rules="[(val) => !!val || t('wagon.warnings.nameNotEmpty')]"
+                />
+                <QCheckbox class="q-mb-sm" v-model="divisible" label="Divisible" />
+                <div class="wagon-tray q-mx-xl" v-for="tray in wagon" :key="tray.id">
+                    <div class="position">
+                        <QInput
+                            autofocus
+                            filled
+                            type="number"
+                            :class="{ isVisible: tray.action == 'add' }"
+                            v-model="tray.position"
+                            @blur="onPositionBlur(tray)"
+                        >
+                            <QTooltip :delay="2000">
+                                {{
+                                    t('wagon.warnings.minHeightBetweenTrays') +
+                                    wagonConfig.minHeightBetweenTrays +
+                                    ' cm'
+                                }}
+                                <QSpace />
+                                {{
+                                    t('wagon.warnings.maxWagonHeight') +
+                                    wagonConfig.maxWagonHeight +
+                                    ' cm'
+                                }}
+                            </QTooltip>
+                        </QInput>
+                    </div>
+                    <div class="shelving">
+                        <div class="shelving-half">
+                            <div class="shelving-up"></div>
+                            <div
+                                class="shelving-down"
+                                :style="{ backgroundColor: tray.color.rgb }"
+                                @click="showColorPicker(tray)"
+                            ></div>
+                        </div>
+                        <div
+                            class="shelving-divisible"
+                            :class="{ isVisible: !divisible }"
+                        ></div>
+                        <div class="shelving-half">
+                            <div class="shelving-up"></div>
+                            <div
+                                class="shelving-down"
+                                :style="{ backgroundColor: tray.color.rgb }"
+                                @click="showColorPicker(tray)"
+                            ></div>
+                        </div>
+                    </div>
+                    <div class="action-button">
+                        <QBtn
+                            flat
+                            round
+                            color="primary"
+                            :icon="tray.action"
+                            @click="doAction(tray)"
+                        />
+                    </div>
+                </div>
+                <div class="q-mb-sm wheels">
+                    <QIcon color="grey-6" name="trip_origin" size="3rem" />
+                    <QIcon color="grey-6" name="trip_origin" size="3rem" />
+                </div>
+                <div>
+                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                    <QBtn
+                        :label="t('wagon.type.reset')"
+                        type="reset"
+                        color="primary"
+                        flat
+                        class="q-ml-sm"
+                    />
+                </div>
+                <QDialog
+                    v-model="colorPickerActive"
+                    position="right"
+                    :no-backdrop-dismiss="false"
+                >
+                    <QCard>
+                        <QCardSection>
+                            <div class="text-h6">{{ t('wagon.type.trayColor') }}</div>
+                        </QCardSection>
+                        <QCardSection class="row items-center no-wrap">
+                            <QColor
+                                flat
+                                v-model="wagon[currentTrayColorPicked].color.rgb"
+                                no-header
+                                no-footer
+                                default-view="palette"
+                                :palette="
+                                    wagonTypeColors.map((color) => {
+                                        return color.rgb;
+                                    })
+                                "
+                                @change="updateColor($event)"
+                            />
+                            <QBtn flat round icon="close" v-close-popup />
+                        </QCardSection>
+                    </QCard>
+                </QDialog>
+            </QForm>
+        </QCard>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.q-page {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+.q-card {
+    width: 70%;
+}
+.q-dialog {
+    .q-card {
+        width: 100%;
+    }
+}
+.wheels {
+    margin-left: 5%;
+    display: flex;
+    justify-content: space-around;
+}
+.wagon-tray {
+    display: flex;
+    height: 6rem;
+    .position {
+        width: 15%;
+        border-right: 1rem solid gray;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-end;
+        padding-right: 1rem;
+    }
+    .shelving {
+        display: flex;
+        width: 75%;
+        .shelving-half {
+            width: 50%;
+            height: 100%;
+            .shelving-up {
+                height: 80%;
+                width: 100%;
+            }
+            .shelving-down {
+                height: 20%;
+                width: 100%;
+            }
+        }
+        .shelving-divisible {
+            width: 1%;
+            height: 100%;
+            border-left: 0.5rem dashed grey;
+            border-right: 0.5rem dashed grey;
+        }
+    }
+    .action-button {
+        width: 10%;
+        border-left: 1rem solid gray;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-start;
+        padding-left: 1rem;
+    }
+
+    .isVisible {
+        display: none;
+    }
+}
+</style>
diff --git a/src/pages/Wagon/Type/WagonTypeList.vue b/src/pages/Wagon/Type/WagonTypeList.vue
new file mode 100644
index 000000000..f364da008
--- /dev/null
+++ b/src/pages/Wagon/Type/WagonTypeList.vue
@@ -0,0 +1,102 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+const quasar = useQuasar();
+const arrayData = useArrayData('WagonTypeList');
+const store = arrayData.store;
+const router = useRouter();
+const { t } = useI18n();
+
+function navigate(id) {
+    router.push({ path: `/wagon/type/${id}/edit` });
+}
+
+function create() {
+    router.push({ path: `/wagon/type/create` });
+}
+
+async function remove(row) {
+    try {
+        const id = row.id;
+        await axios
+            .delete(`WagonTypes/deleteWagonType`, { params: { id } })
+            .then(async () => {
+                quasar.notify({
+                    message: t('wagon.type.removeItem'),
+                    type: 'positive',
+                });
+                store.data.splice(store.data.indexOf(row), 1);
+            });
+    } catch (error) {
+        //
+    }
+}
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <VnPaginate
+                data-key="WagonTypeList"
+                url="/WagonTypes"
+                order="id DESC"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <QItem
+                            class="q-pa-none items-start cursor-pointer q-hoverable"
+                            v-ripple
+                            clickable
+                        >
+                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
+                                <div class="text-h6">{{ row.name }}</div>
+                                <QItem-label caption>#{{ row.id }}</QItem-label>
+                            </QItemSection>
+                            <QSeparator vertical />
+                            <QCardActions vertical class="justify-between">
+                                <QBtn
+                                    flat
+                                    round
+                                    color="primary"
+                                    icon="arrow_circle_right"
+                                    @click="navigate(row.id)"
+                                >
+                                    <QTooltip>
+                                        {{ t('components.smartCard.openCard') }}
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn
+                                    flat
+                                    round
+                                    color="primary"
+                                    icon="delete"
+                                    @click="remove(row)"
+                                >
+                                    <QTooltip>
+                                        {{ t('wagon.list.remove') }}
+                                    </QTooltip>
+                                </QBtn>
+                            </QCardActions>
+                        </QItem>
+                    </QCard>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn @click="create" fab icon="add" color="primary" />
+        </QPageSticky>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
diff --git a/src/pages/Wagon/WagonCreate.vue b/src/pages/Wagon/WagonCreate.vue
new file mode 100644
index 000000000..3f7824975
--- /dev/null
+++ b/src/pages/Wagon/WagonCreate.vue
@@ -0,0 +1,182 @@
+<script setup>
+import axios from 'axios';
+import { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
+import { computed, onMounted, onUpdated, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+onMounted(() => fetch());
+onUpdated(() => fetch());
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+const entityId = computed(() => $props.id || route.params.id);
+
+let wagonTypes;
+let originalData = {};
+const wagon = ref({});
+const filteredWagonTypes = ref(wagonTypes);
+
+async function onSubmit() {
+    try {
+        const params = {
+            id: entityId.value,
+            label: wagon.value.label,
+            plate: wagon.value.plate,
+            volume: wagon.value.volume,
+            typeFk: wagon.value.typeFk,
+        };
+        await axios.patch('Wagons', params).then((res) => {
+            if (res.status == 200) router.push({ path: `/wagon/list` });
+        });
+    } catch (error) {
+        //
+    }
+}
+
+async function onReset() {
+    if (entityId.value) {
+        wagon.value = { ...originalData };
+    } else {
+        wagon.value = {};
+    }
+}
+
+async function fetch() {
+    try {
+        await axios.get('WagonTypes').then(async (res) => {
+            if (res.data) {
+                filteredWagonTypes.value = wagonTypes = res.data;
+            }
+        });
+        if (entityId.value) {
+            await axios.get(`Wagons/${entityId.value}`).then(async (res) => {
+                const data = res.data;
+                if (data) {
+                    wagon.value.label = data.label;
+                    wagon.value.plate = data.plate;
+                    wagon.value.volume = data.volume;
+                    wagon.value.typeFk = data.typeFk;
+                    originalData = { ...wagon.value };
+                }
+            });
+        }
+    } catch (e) {
+        //
+    }
+}
+
+function filterType(val, update) {
+    update(() => {
+        const needle = val.toLowerCase();
+        filteredWagonTypes.value = wagonTypes.filter(
+            (v) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    });
+}
+</script>
+
+<template>
+    <QPage class="q-pa-sm q-mx-xl">
+        <QCard class="q-pa-sm">
+            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
+                <div class="row q-col-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            filled
+                            v-model="wagon.label"
+                            :label="t('wagon.create.label')"
+                            type="number"
+                            min="0"
+                            :rules="[(val) => !!val || t('wagon.warnings.labelNotEmpty')]"
+                        />
+                    </div>
+                    <div class="col">
+                        <QInput
+                            filled
+                            v-model="wagon.plate"
+                            :label="t('wagon.create.plate')"
+                            :rules="[(val) => !!val || t('wagon.warnings.plateNotEmpty')]"
+                        />
+                    </div>
+                </div>
+                <div class="row q-col-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            filled
+                            v-model="wagon.volume"
+                            :label="t('wagon.create.volume')"
+                            type="number"
+                            min="0"
+                            :rules="[
+                                (val) => !!val || t('wagon.warnings.volumeNotEmpty'),
+                            ]"
+                        />
+                    </div>
+                    <div class="col">
+                        <QSelect
+                            filled
+                            v-model="wagon.typeFk"
+                            use-input
+                            fill-input
+                            hide-selected
+                            input-debounce="0"
+                            option-label="name"
+                            option-value="id"
+                            emit-value
+                            map-options
+                            :label="t('wagon.create.type')"
+                            :options="filteredWagonTypes"
+                            :rules="[(val) => !!val || t('wagon.warnings.typeNotEmpty')]"
+                            @filter="filterType"
+                        >
+                            <template v-if="wagon.typeFk" #append>
+                                <QIcon
+                                    name="cancel"
+                                    @click.stop.prevent="wagon.typeFk = null"
+                                    class="cursor-pointer"
+                                />
+                            </template>
+                            <template #no-option>
+                                <QItem>
+                                    <QItemSection class="text-grey">
+                                        {{ t('wagon.warnings.noData') }}
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </QSelect>
+                    </div>
+                </div>
+                <div>
+                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                    <QBtn
+                        :label="t('wagon.type.reset')"
+                        type="reset"
+                        color="primary"
+                        flat
+                        class="q-ml-sm"
+                    />
+                </div>
+            </QForm>
+        </QCard>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.q-page {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+.q-card {
+    width: 70%;
+}
+</style>
diff --git a/src/pages/Wagon/WagonList.vue b/src/pages/Wagon/WagonList.vue
new file mode 100644
index 000000000..5e512aa92
--- /dev/null
+++ b/src/pages/Wagon/WagonList.vue
@@ -0,0 +1,135 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+const quasar = useQuasar();
+const arrayData = useArrayData('WagonList');
+const store = arrayData.store;
+const router = useRouter();
+const { t } = useI18n();
+
+const filter = {
+    include: {
+        relation: 'type',
+        scope: {
+            fields: 'name',
+        },
+    },
+};
+
+function navigate(id) {
+    router.push({ path: `/wagon/${id}/edit` });
+}
+
+function create() {
+    router.push({ path: `/wagon/create` });
+}
+
+async function remove(row) {
+    try {
+        await axios.delete(`Wagons/${row.id}`).then(async () => {
+            quasar.notify({
+                message: t('wagon.list.removeItem'),
+                type: 'positive',
+            });
+            store.data.splice(store.data.indexOf(row), 1);
+        });
+    } catch (error) {
+        //
+    }
+}
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <VnPaginate
+                data-key="WagonList"
+                url="/Wagons"
+                order="id DESC"
+                :filter="filter"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <QItem
+                            class="q-pa-none items-start cursor-pointer q-hoverable"
+                            v-ripple
+                            clickable
+                        >
+                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
+                                <div class="text-h6">{{ row.label }}</div>
+                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
+                                <QList>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
+                                                {{ t('wagon.list.plate') }}
+                                            </QItemLabel>
+                                            <QItemLabel>{{ row.plate }}</QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
+                                                {{ t('wagon.list.volume') }}
+                                            </QItemLabel>
+                                            <QItemLabel>{{ row.volume }}</QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
+                                                {{ t('wagon.list.type') }}
+                                            </QItemLabel>
+                                            <QItemLabel>{{ row.type.name }}</QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                </QList>
+                            </QItemSection>
+                            <QSeparator vertical />
+                            <QCardActions vertical class="justify-between">
+                                <QBtn
+                                    flat
+                                    round
+                                    color="primary"
+                                    icon="arrow_circle_right"
+                                    @click="navigate(row.id)"
+                                >
+                                    <QTooltip>
+                                        {{ t('components.smartCard.openCard') }}
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn
+                                    flat
+                                    round
+                                    color="primary"
+                                    icon="delete"
+                                    @click="remove(row)"
+                                >
+                                    <QTooltip>
+                                        {{ t('wagon.list.remove') }}
+                                    </QTooltip>
+                                </QBtn>
+                            </QCardActions>
+                        </QItem>
+                    </QCard>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn @click="create" fab icon="add" color="primary" />
+        </QPageSticky>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
diff --git a/src/pages/Wagon/WagonMain.vue b/src/pages/Wagon/WagonMain.vue
new file mode 100644
index 000000000..66ce78f23
--- /dev/null
+++ b/src/pages/Wagon/WagonMain.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index 65d863143..3d6b46e11 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -17,18 +17,18 @@ const { t } = useI18n();
             :info="t('You can search by worker id or name')"
         />
     </Teleport>
-    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <q-scroll-area class="fit">
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
             <WorkerDescriptor />
-            <q-separator />
-            <left-menu source="card" />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page-container>
-        <q-page class="q-pa-md">
-            <router-view></router-view>
-        </q-page>
-    </q-page-container>
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage class="q-pa-md">
+            <RouterView></RouterView>
+        </QPage>
+    </QPageContainer>
 </template>
 
 <i18n>
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index e138be22e..3b34d8b6f 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -54,21 +54,21 @@ function getWorkerAvatar() {
 }
 </script>
 <template>
-    <card-descriptor
+    <CardDescriptor
         module="Worker"
         :url="`Workers/${entityId}`"
         :filter="filter"
         @on-fetch="(data) => (worker = data)"
     >
         <template #before>
-            <q-img :src="getWorkerAvatar()" class="photo">
+            <QImg :src="getWorkerAvatar()" class="photo">
                 <template #error>
                     <div
                         class="absolute-full bg-grey-10 text-center q-pa-md flex flex-center"
                     >
                         <div>
                             <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
-                                <q-icon name="vn:claims" />
+                                <QIcon name="vn:claims" />
                             </div>
                             <div class="text-grey-5" style="opacity: 0.4">
                                 {{ t('worker.imageNotFound') }}
@@ -76,59 +76,59 @@ function getWorkerAvatar() {
                         </div>
                     </div>
                 </template>
-            </q-img>
+            </QImg>
         </template>
         <template #description="{ entity }">
             <span>
                 {{ entity.user.nickname }}
-                <q-tooltip>{{ entity.user.nickname }}</q-tooltip>
+                <QTooltip>{{ entity.user.nickname }}</QTooltip>
             </span>
         </template>
         <template #body="{ entity }">
-            <q-list>
-                <q-item>
-                    <q-item-section>
-                        <q-item-label caption> {{ t('worker.card.name') }} </q-item-label>
-                        <q-item-label>{{ entity.user.nickname }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-item-label caption>
+            <QList>
+                <QItem>
+                    <QItemSection>
+                        <QItemLabel caption> {{ t('worker.card.name') }} </QItemLabel>
+                        <QItemLabel>{{ entity.user.nickname }}</QItemLabel>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QItemLabel caption>
                             {{ t('worker.card.email') }}
-                        </q-item-label>
-                        <q-item-label>{{ entity.user.email }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-item-label caption>
+                        </QItemLabel>
+                        <QItemLabel>{{ entity.user.email }}</QItemLabel>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QItemLabel caption>
                             {{ t('worker.list.department') }}
-                        </q-item-label>
-                        <q-item-label>
+                        </QItemLabel>
+                        <QItemLabel>
                             {{ entity.department.department.name }}
-                        </q-item-label>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-item-label caption>
+                        </QItemLabel>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QItemLabel caption>
                             {{ t('worker.card.phone') }}
-                        </q-item-label>
-                        <q-item-label>{{ entity.phone }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-item-label caption
+                        </QItemLabel>
+                        <QItemLabel>{{ entity.phone }}</QItemLabel>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QItemLabel caption
                             >{{ t('worker.summary.sipExtension') }}
-                        </q-item-label>
-                        <q-item-label>{{ sip }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-            </q-list>
+                        </QItemLabel>
+                        <QItemLabel>{{ sip }}</QItemLabel>
+                    </QItemSection>
+                </QItem>
+            </QList>
         </template>
-    </card-descriptor>
+    </CardDescriptor>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Worker/Card/WorkerDescriptorProxy.vue b/src/pages/Worker/Card/WorkerDescriptorProxy.vue
index be03485f7..8d372b6de 100644
--- a/src/pages/Worker/Card/WorkerDescriptorProxy.vue
+++ b/src/pages/Worker/Card/WorkerDescriptorProxy.vue
@@ -10,7 +10,7 @@ const $props = defineProps({
 </script>
 
 <template>
-    <q-popup-proxy>
+    <QPopupProxy>
         <WorkerDescriptor v-if="$props.id" :id="$props.id" />
-    </q-popup-proxy>
+    </QPopupProxy>
 </template>
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index 39054e6bc..7fc4802c6 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -75,7 +75,7 @@ function sipExtension() {
 
 <template>
     <div class="summary container">
-        <q-card>
+        <QCard>
             <SkeletonSummary v-if="!worker" />
             <template v-if="worker">
                 <div class="header bg-primary q-pa-sm q-mb-md">
@@ -83,144 +83,140 @@ function sipExtension() {
                 </div>
                 <div class="row q-pa-md q-col-gutter-md q-mb-md">
                     <div class="col">
-                        <q-list>
-                            <q-item-label header class="text-h6">
+                        <QList>
+                            <QItemLabel header class="text-h6">
                                 {{ t('worker.summary.basicData') }}
-                            </q-item-label>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption> ID </q-item-label>
-                                    <q-item-label>{{ worker.id }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption
+                            </QItemLabel>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption> ID </QItemLabel>
+                                    <QItemLabel>{{ worker.id }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption
                                         >{{ t('worker.card.name') }}
-                                    </q-item-label>
-                                    <q-item-label>
+                                    </QItemLabel>
+                                    <QItemLabel>
                                         {{ worker.user.nickname }}
-                                    </q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption
                                         >{{ t('worker.list.department') }}
-                                    </q-item-label>
-                                    <q-item-label>{{
+                                    </QItemLabel>
+                                    <QItemLabel>{{
                                         worker.department.department.name
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption
                                         >{{ t('worker.list.email') }}
-                                    </q-item-label>
-                                    <q-item-label>{{ worker.user.email }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item
+                                    </QItemLabel>
+                                    <QItemLabel>{{ worker.user.email }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem
                                 class="items-start cursor-pointer q-hoverable"
                                 v-if="worker.boss"
                             >
-                                <q-item-section>
-                                    <q-item-label caption>
+                                <QItemSection>
+                                    <QItemLabel caption>
                                         {{ t('worker.summary.boss') }}
-                                    </q-item-label>
-                                    <q-item-label>
+                                    </QItemLabel>
+                                    <QItemLabel>
                                         <span class="link">
                                             {{ worker.boss.name }}
                                             <WorkerDescriptorProxy :id="worker.bossFk" />
                                         </span>
-                                    </q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption
                                         >{{ t('worker.summary.phoneExtension') }}
-                                    </q-item-label>
-                                    <q-item-label>
+                                    </QItemLabel>
+                                    <QItemLabel>
                                         {{
                                             worker.mobileExtension == ''
                                                 ? worker.mobileExtension
                                                 : '-'
                                         }}
-                                    </q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption
                                         >{{ t('worker.summary.entPhone') }}
-                                    </q-item-label>
-                                    <q-item-label>{{
+                                    </QItemLabel>
+                                    <QItemLabel>{{
                                         worker.phone == '' ? worker.phone : '-'
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption
                                         >{{ t('worker.summary.personalPhone') }}
-                                    </q-item-label>
-                                    <q-item-label>{{
+                                    </QItemLabel>
+                                    <QItemLabel>{{
                                         worker.client.phone == ''
                                             ? worker.client.phone
                                             : '-'
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                        </q-list>
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </QList>
                     </div>
                     <div class="col">
-                        <q-list>
-                            <q-item-label header class="text-h6">
+                        <QList>
+                            <QItemLabel header class="text-h6">
                                 {{ t('worker.summary.userData') }}
-                            </q-item-label>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>
+                            </QItemLabel>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption>
                                         {{ t('worker.summary.userId') }}
-                                    </q-item-label>
-                                    <q-item-label>{{ worker.user.id }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption
+                                    </QItemLabel>
+                                    <QItemLabel>{{ worker.user.id }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption
                                         >{{ t('worker.card.name') }}
-                                    </q-item-label>
-                                    <q-item-label>{{
-                                        worker.user.nickname
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption
+                                    </QItemLabel>
+                                    <QItemLabel>{{ worker.user.nickname }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption
                                         >{{ t('worker.summary.role') }}
-                                    </q-item-label>
-                                    <q-item-label>{{
-                                        worker.user.role.name
-                                    }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption
+                                    </QItemLabel>
+                                    <QItemLabel>{{ worker.user.role.name }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                            <QItem>
+                                <QItemSection>
+                                    <QItemLabel caption
                                         >{{ t('worker.summary.sipExtension') }}
-                                    </q-item-label>
-                                    <q-item-label>{{ sipExtension() }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                        </q-list>
+                                    </QItemLabel>
+                                    <QItemLabel>{{ sipExtension() }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </QList>
                     </div>
                 </div>
             </template>
-        </q-card>
+        </QCard>
     </div>
 </template>
 <style lang="scss" scoped>
diff --git a/src/pages/Worker/Card/WorkerSummaryDialog.vue b/src/pages/Worker/Card/WorkerSummaryDialog.vue
index 4eedb6f6a..59ea702e0 100644
--- a/src/pages/Worker/Card/WorkerSummaryDialog.vue
+++ b/src/pages/Worker/Card/WorkerSummaryDialog.vue
@@ -15,7 +15,7 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
 </script>
 
 <template>
-    <q-dialog ref="dialogRef" @hide="onDialogHide">
-        <worker-summary v-if="$props.id" :id="$props.id" />
-    </q-dialog>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <WorkerSummary v-if="$props.id" :id="$props.id" />
+    </QDialog>
 </template>
diff --git a/src/pages/Worker/WorkerFilter.vue b/src/pages/Worker/WorkerFilter.vue
index 24dfec7a5..079905c4f 100644
--- a/src/pages/Worker/WorkerFilter.vue
+++ b/src/pages/Worker/WorkerFilter.vue
@@ -16,7 +16,7 @@ const departments = ref();
 </script>
 
 <template>
-    <fetch-data url="Departments" @on-fetch="(data) => (departments = data)" auto-load />
+    <FetchData url="Departments" @on-fetch="(data) => (departments = data)" auto-load />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
@@ -25,49 +25,49 @@ const departments = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <q-list dense>
-                <q-item>
-                    <q-item-section>
-                        <q-input :label="t('FI')" v-model="params.fi" lazy-rules>
+            <QList dense>
+                <QItem>
+                    <QItemSection>
+                        <QInput :label="t('FI')" v-model="params.fi" lazy-rules>
                             <template #prepend>
-                                <q-icon name="badge" size="sm"></q-icon>
+                                <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
                             :label="t('First Name')"
                             v-model="params.firstName"
                             lazy-rules
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
                             :label="t('Last Name')"
                             v-model="params.lastName"
                             lazy-rules
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
                             :label="t('User Name')"
                             v-model="params.userName"
                             lazy-rules
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section v-if="!departments">
-                        <q-skeleton type="QInput" class="full-width" />
-                    </q-item-section>
-                    <q-item-section v-if="departments">
-                        <q-select
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="!departments">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="departments">
+                        <QSelect
                             :label="t('Department')"
                             v-model="params.departmentFk"
                             @update:model-value="searchFn()"
@@ -79,18 +79,18 @@ const departments = ref();
                             use-input
                             :input-debounce="0"
                         />
-                    </q-item-section>
-                </q-item>
-                <q-item class="q-mb-md">
-                    <q-item-section>
-                        <q-input
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-md">
+                    <QItemSection>
+                        <QInput
                             :label="t('Extension')"
                             v-model="params.extension"
                             lazy-rules
                         />
-                    </q-item-section>
-                </q-item>
-            </q-list>
+                    </QItemSection>
+                </QItem>
+            </QList>
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 8b0d9392c..15df7373a 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
-import Paginate from 'src/components/PaginateData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import WorkerFilter from './WorkerFilter.vue';
@@ -38,107 +38,105 @@ function viewSummary(id) {
         </Teleport>
         <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
-                <q-btn
+                <QBtn
                     flat
                     @click="stateStore.toggleRightDrawer()"
                     round
                     dense
                     icon="menu"
                 >
-                    <q-tooltip bottom anchor="bottom right">
+                    <QTooltip bottom anchor="bottom right">
                         {{ t('globals.collapseMenu') }}
-                    </q-tooltip>
-                </q-btn>
+                    </QTooltip>
+                </QBtn>
             </div>
         </Teleport>
     </template>
-    <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <q-scroll-area class="fit text-grey-8">
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
             <WorkerFilter data-key="WorkerList" />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page class="column items-center q-pa-md">
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
         <div class="card-list">
-            <paginate
+            <VnPaginate
                 data-key="WorkerList"
                 url="Workers/filter"
                 order="id DESC"
                 auto-load
             >
                 <template #body="{ rows }">
-                    <q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <q-item
+                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <QItem
                             class="q-pa-none items-start cursor-pointer q-hoverable"
                             v-ripple
                             clickable
                         >
-                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
-                                <q-item-label class="text-h6">
+                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
+                                <QItemLabel class="text-h6">
                                     {{ row.nickname }}
-                                </q-item-label>
-                                <q-item-label caption>#{{ row.id }}</q-item-label>
-                                <q-list>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                </QItemLabel>
+                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
+                                <QList>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('worker.list.name') }}
-                                            </q-item-label>
-                                            <q-item-label>{{
-                                                row.userName
-                                            }}</q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                            <QItemLabel>{{ row.userName }}</QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('worker.list.email') }}
-                                            </q-item-label>
-                                            <q-item-label>{{ row.email }}</q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>{{
+                                            </QItemLabel>
+                                            <QItemLabel>{{ row.email }}</QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>{{
                                                 t('worker.list.department')
-                                            }}</q-item-label>
-                                            <q-item-label>
+                                            }}</QItemLabel>
+                                            <QItemLabel>
                                                 {{ row.department }}
-                                            </q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                </q-list>
-                            </q-item-section>
-                            <q-separator vertical />
-                            <q-card-actions vertical class="justify-between">
-                                <q-btn
+                                            </QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                </QList>
+                            </QItemSection>
+                            <QSeparator vertical />
+                            <QCardActions vertical class="justify-between">
+                                <QBtn
                                     flat
                                     round
                                     color="primary"
                                     icon="arrow_circle_right"
                                     @click="navigate(row.id)"
                                 >
-                                    <q-tooltip>
+                                    <QTooltip>
                                         {{ t('components.smartCard.openCard') }}
-                                    </q-tooltip>
-                                </q-btn>
-                                <q-btn
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn
                                     flat
                                     round
                                     color="grey-7"
                                     icon="preview"
                                     @click="viewSummary(row.id)"
                                 >
-                                    <q-tooltip>
+                                    <QTooltip>
                                         {{ t('components.smartCard.openSummary') }}
-                                    </q-tooltip>
-                                </q-btn>
-                            </q-card-actions>
-                        </q-item>
-                    </q-card>
+                                    </QTooltip>
+                                </QBtn>
+                            </QCardActions>
+                        </QItem>
+                    </QCard>
                 </template>
-            </paginate>
+            </VnPaginate>
         </div>
-    </q-page>
+    </QPage>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Worker/WorkerMain.vue b/src/pages/Worker/WorkerMain.vue
index 2fb079daa..66ce78f23 100644
--- a/src/pages/Worker/WorkerMain.vue
+++ b/src/pages/Worker/WorkerMain.vue
@@ -6,12 +6,12 @@ const stateStore = useStateStore();
 </script>
 
 <template>
-    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <q-scroll-area class="fit text-grey-8">
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
             <LeftMenu />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page-container>
-        <router-view></router-view>
-    </q-page-container>
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
 </template>
diff --git a/src/router/modules/claim.js b/src/router/modules/claim.js
index 0e8222cc5..c43ed5012 100644
--- a/src/router/modules/claim.js
+++ b/src/router/modules/claim.js
@@ -11,7 +11,7 @@ export default {
     redirect: { name: 'ClaimMain' },
     menus: {
         main: ['ClaimList', 'ClaimRmaList'],
-        card: ['ClaimBasicData', 'ClaimRma', 'ClaimPhotos', 'ClaimLog'],
+        card: ['ClaimBasicData', 'ClaimLines', 'ClaimRma', 'ClaimPhotos', 'ClaimLog'],
     },
     children: [
         {
@@ -66,6 +66,15 @@ export default {
                     },
                     component: () => import('src/pages/Claim/Card/ClaimBasicData.vue'),
                 },
+                {
+                    name: 'ClaimLines',
+                    path: 'lines',
+                    meta: {
+                        title: 'lines',
+                        icon: 'vn:details',
+                    },
+                    component: () => import('src/pages/Claim/Card/ClaimLines.vue'),
+                },
                 {
                     name: 'ClaimRma',
                     path: 'rma',
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index ca8b3c958..30c51939d 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -3,11 +3,13 @@ import Ticket from './ticket';
 import Claim from './claim';
 import InvoiceOut from './invoiceOut';
 import Worker from './worker';
+import Wagon from './wagon';
 
 export default [
     Customer,
     Ticket,
     Claim,
     InvoiceOut,
-    Worker
+    Worker,
+    Wagon
 ]
diff --git a/src/router/modules/invoiceOut.js b/src/router/modules/invoiceOut.js
index a9236b713..daf5041e9 100644
--- a/src/router/modules/invoiceOut.js
+++ b/src/router/modules/invoiceOut.js
@@ -1,7 +1,7 @@
 import { RouterView } from 'vue-router';
 
 export default {
-    path: '/invoiceOut',
+    path: '/invoice-out',
     name: 'InvoiceOut',
     meta: {
         title: 'invoiceOuts',
@@ -10,7 +10,8 @@ export default {
     component: RouterView,
     redirect: { name: 'InvoiceOutMain' },
     menus: {
-        main: ['InvoiceOutList']
+        main: ['InvoiceOutList'],
+        card: [],
     },
     children: [
         {
diff --git a/src/router/modules/wagon.js b/src/router/modules/wagon.js
new file mode 100644
index 000000000..02513d5a8
--- /dev/null
+++ b/src/router/modules/wagon.js
@@ -0,0 +1,88 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/wagon',
+    name: 'Wagon',
+    meta: {
+        title: 'wagons',
+        icon: 'vn:trolley',
+    },
+    component: RouterView,
+    redirect: { name: 'WagonMain' },
+    menus: {
+        main: ['WagonList', 'WagonTypeList'],
+        card: [],
+    },
+    children: [
+        {
+            path: '/wagon',
+            name: 'WagonMain',
+            component: () => import('src/pages/Wagon/WagonMain.vue'),
+            redirect: { name: 'WagonList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'WagonList',
+                    meta: {
+                        title: 'wagonsList',
+                        icon: 'vn:trolley',
+                    },
+                    component: () => import('src/pages/Wagon/WagonList.vue')
+                },
+                {
+                    path: 'create',
+                    name: 'WagonCreate',
+                    meta: {
+                        title: 'wagonCreate',
+                        icon: 'create',
+                    },
+                    component: () => import('src/pages/Wagon/WagonCreate.vue')
+                },
+                {
+                    path: ':id/edit',
+                    name: 'WagonEdit',
+                    meta: {
+                        title: 'wagonEdit',
+                        icon: 'edit',
+                    },
+                    component: () => import('src/pages/Wagon/WagonCreate.vue')
+                },
+            ],
+        },
+        {
+            path: '/wagon/type',
+            name: 'WagonTypeMain',
+            component: () => import('src/pages/Wagon/WagonMain.vue'),
+            redirect: { name: 'WagonTypeList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'WagonTypeList',
+                    meta: {
+                        title: 'typesList',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Wagon/Type/WagonTypeList.vue')
+                },
+                {
+                    path: 'create',
+                    name: 'WagonTypeCreate',
+                    meta: {
+                        title: 'typeCreate',
+                        icon: 'create',
+                    },
+                    component: () => import('src/pages/Wagon/Type/WagonTypeCreate.vue')
+                },
+                {
+                    path: ':id/edit',
+                    name: 'WagonTypeEdit',
+                    meta: {
+                        title: 'typeEdit',
+                        icon: 'edit',
+                    },
+                    component: () => import('src/pages/Wagon/Type/WagonTypeCreate.vue')
+                },
+            ],
+        }
+    ],
+};
diff --git a/src/router/routes.js b/src/router/routes.js
index c92075a82..17a56505d 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -3,6 +3,7 @@ import ticket from './modules/ticket';
 import claim from './modules/claim';
 import worker from './modules/worker';
 import invoiceOut from './modules/invoiceOut';
+import wagon from './modules/wagon';
 
 const routes = [
     {
@@ -34,6 +35,7 @@ const routes = [
                 name: 'NotFound',
                 component: () => import('../pages/NotFound.vue'),
             },
+            wagon
         ],
     },
 ];
diff --git a/src/stores/useNavigationStore.js b/src/stores/useNavigationStore.js
index 3b2c7e8a7..bcaeeb953 100644
--- a/src/stores/useNavigationStore.js
+++ b/src/stores/useNavigationStore.js
@@ -6,7 +6,7 @@ import { useRole } from 'src/composables/useRole';
 import routes from 'src/router/modules';
 
 export const useNavigationStore = defineStore('navigationStore', () => {
-    const modules = ['customer', 'claim', 'ticket', 'invoiceOut', 'worker'];
+    const modules = ['customer', 'claim', 'ticket', 'invoiceOut', 'worker', 'wagon'];
     const pinnedModules = ref([]);
     const role = useRole();
 
diff --git a/test/cypress/integration/claimPhoto.spec.js b/test/cypress/integration/claimPhoto.spec.js
index e5ea2ce25..ec41e92a3 100755
--- a/test/cypress/integration/claimPhoto.spec.js
+++ b/test/cypress/integration/claimPhoto.spec.js
@@ -43,13 +43,13 @@ describe('ClaimPhoto', () => {
         cy.get(
             '.multimediaParent > :nth-child(3) > .q-btn > .q-btn__content > .q-icon'
         ).click();
-        cy.get('.q-btn--standard > .q-btn__content > .block').click();
+        cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
         cy.get('.q-notification__message').should('have.text', 'Data deleted');
 
         cy.get(
             '.multimediaParent > :nth-child(3) > .q-btn > .q-btn__content > .q-icon'
         ).click();
-        cy.get('.q-btn--standard > .q-btn__content > .block').click();
+        cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
         cy.get('.q-notification__message').should('have.text', 'Data deleted');
     });
 });
diff --git a/test/cypress/integration/ticketBoxing.spec.js b/test/cypress/integration/ticketBoxing.spec.js
index 7a1ed669d..7b3bd36cc 100755
--- a/test/cypress/integration/ticketBoxing.spec.js
+++ b/test/cypress/integration/ticketBoxing.spec.js
@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-xdescribe('TicketBoxing', () => {
+describe('TicketBoxing', () => {
     beforeEach(() => {
         const ticketId = 1;
         cy.viewport(1280, 720);
@@ -26,9 +26,9 @@ xdescribe('TicketBoxing', () => {
             },
             ['2022-01-01T01-01-00.mp4', '2022-02-02T02-02-00.mp4', '2022-03-03T03-03-00.mp4']
         ).as('getVideoList');
-        cy.get('.q-list > :nth-child(3)').click();
+        cy.get('.q-list').eq(3).find('.q-item').eq(2).click();
 
-        cy.get('.q-list > :nth-child(1)').should('be.visible');
-        cy.get('.q-list > :nth-child(2)').should('be.visible');
+        cy.get('.q-list').eq(3).find('.q-item').eq(0).find('.q-range');
+        cy.get('.q-list').eq(3).find('.q-item').eq(1).find('.q-select');
     });
 });
diff --git a/test/cypress/integration/wagonCreate.spec.js b/test/cypress/integration/wagonCreate.spec.js
new file mode 100644
index 000000000..62eadc5fd
--- /dev/null
+++ b/test/cypress/integration/wagonCreate.spec.js
@@ -0,0 +1,33 @@
+describe('WagonCreate', () => {
+    beforeEach(() => {
+        cy.viewport(1280, 720);
+        cy.login('developer');
+        cy.visit('/#/wagon/create');
+    });
+
+    it('should create and delete a new wagon', () => {
+        cy.get('input').eq(0).type('1234');
+        cy.get('input').eq(1).type('1234ABCD');
+        cy.get('input').eq(2).type('100');
+        cy.get('input').eq(3).click();
+        cy.get('div[role="listbox"]').find('div.q-item').click();
+
+        // Save
+        cy.get('button[type="submit"]').click();
+
+        // Check data has been saved successfully
+        cy.get('div.text-h6').contains('1234').click();
+        cy.get('input').eq(0).should('have.value', '1234');
+        cy.get('input').eq(1).should('have.value', '1234ABCD');
+        cy.get('input').eq(2).should('have.value', '100');
+        cy.get('input').eq(3).should('have.value', 'Wagon Type #1');
+
+        // Delete wagon type created
+        cy.go('back');
+        cy.get('div.text-h6')
+            .contains('1234')
+            .parentsUntil('div.q-card')
+            .find('div.q-card__actions')
+            .find('button').last().click();
+    });
+});
diff --git a/test/cypress/integration/wagonTypeCreate.spec.js b/test/cypress/integration/wagonTypeCreate.spec.js
new file mode 100644
index 000000000..ae74dff16
--- /dev/null
+++ b/test/cypress/integration/wagonTypeCreate.spec.js
@@ -0,0 +1,57 @@
+describe('WagonTypeCreate', () => {
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('developer');
+        cy.visit('/#/wagon/type/create');
+    });
+
+    function chooseColor(color){
+        cy.get('div.shelving-down').eq(1).click();
+        cy.get('div.q-color-picker__cube').eq(color).click();
+        cy.get('div.q-card__section').find('button').click();
+    }
+
+    function addTray(position){
+        cy.get('div.action-button').last().find('button').click();
+        cy.focused().type(position);
+        cy.focused().blur();
+    }
+
+    it('should create and delete a new wagon type', () => {
+        cy.get('input').first().type('Example for testing');
+        cy.get('div.q-checkbox__bg').click();
+        chooseColor(1);
+
+        // Insert invalid position (not minimal height)
+        addTray(20);
+        cy.get('div[role="alert"]').should('exist');
+        chooseColor(2);
+        addTray(150);
+        chooseColor(3);
+        addTray(100);
+
+        // Insert invalid position (max height reached)
+        addTray(210);
+        cy.get('div[role="alert"]').should('exist');
+
+        // Save
+        cy.get('button[type="submit"]').click();
+
+        // Check data has been saved successfully
+        cy.get('div.text-h6').contains('Example for testing').click();
+        cy.get('input').first().should('have.value', 'Example for testing');
+        cy.get('div.wagon-tray').should('have.length', 4);
+        cy.get('div.position').eq(0).find('input').should('have.value', '150');
+        cy.get('div.position').eq(1).find('input').should('have.value', '100');
+        cy.get('div.position').eq(2).find('input').should('have.value', '50');
+
+        // Delete wagon type created
+        cy.go('back');
+        cy.get('div.text-h6')
+            .contains('Example for testing')
+            .parentsUntil('div.q-card')
+            .find('div.q-card__actions')
+            .find('button').last().click();
+
+    });
+});
diff --git a/test/cypress/integration/workerList.spec.js b/test/cypress/integration/workerList.spec.js
index 9f3d62448..79f2400bf 100644
--- a/test/cypress/integration/workerList.spec.js
+++ b/test/cypress/integration/workerList.spec.js
@@ -12,7 +12,10 @@ describe('WorkerList', () => {
     });
 
     it('should open the worker summary', () => {
-        cy.get('div[class="q-item__section column q-item__section--side justify-center q-pa-md"]').eq(0).click();
+        cy.get('div.text-h6')
+            .parentsUntil('div.q-card')
+            .find('div.q-card__actions')
+            .find('button').first().click();
         cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should('have.text', '1110 - Jessica Jones');
         cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(0).should('have.text', 'Basic data');
         cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(1).should('have.text', 'User data');
diff --git a/test/cypress/integration/workerSummary.spec.js b/test/cypress/integration/workerSummary.spec.js
index ae01378f6..cef26d061 100644
--- a/test/cypress/integration/workerSummary.spec.js
+++ b/test/cypress/integration/workerSummary.spec.js
@@ -6,10 +6,10 @@ describe('WorkerSummary', () => {
     });
 
     it('should load worker summary', () => {
-        cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should('have.text', '19 - salesBoss');
+        cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should('have.text', '19 - salesBoss salesBoss');
         cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(0).should('have.text', 'Basic data');
         cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(1).should('have.text', 'User data');
         cy.get('div[class="q-item__section column q-item__section--main justify-center"]').eq(0).should('have.text', 'NamesalesBossNick');
     });
 
-});
\ No newline at end of file
+});
diff --git a/test/cypress/wrappers/LayoutContainer.vue b/test/cypress/wrappers/LayoutContainer.vue
index 63490b7b4..e029e135a 100644
--- a/test/cypress/wrappers/LayoutContainer.vue
+++ b/test/cypress/wrappers/LayoutContainer.vue
@@ -1,7 +1,7 @@
 <template>
-    <q-layout>
+    <QLayout>
         <component :is="component" v-bind="$attrs" />
-    </q-layout>
+    </QLayout>
 </template>
 
 <script>
diff --git a/test/vitest/__tests__/boot/axios.spec.js b/test/vitest/__tests__/boot/axios.spec.js
index a95c57fba..feb0d93ea 100644
--- a/test/vitest/__tests__/boot/axios.spec.js
+++ b/test/vitest/__tests__/boot/axios.spec.js
@@ -1,15 +1,15 @@
-import { vi, describe, expect, it } from 'vitest';
+import { Notify } from 'quasar';
 import { onRequest, onResponseError } from 'src/boot/axios';
-import { Notify } from 'quasar'
+import { describe, expect, it, vi } from 'vitest';
 
 vi.mock('src/composables/useSession', () => ({
     useSession: () => ({
-        getToken: () => 'DEFAULT_TOKEN'
-    }),
+        getToken: () => 'DEFAULT_TOKEN',
+        isLoggedIn: () => vi.fn(),
+        destroy: () => vi.fn(),
+    })
 }));
 
-vi.mock('src/router', () => ({}));
-
 describe('Axios boot', () => {
 
     describe('onRequest()', async () => {
diff --git a/test/vitest/__tests__/components/Paginate.spec.js b/test/vitest/__tests__/components/Paginate.spec.js
index 5a6b08712..af9fb41a1 100644
--- a/test/vitest/__tests__/components/Paginate.spec.js
+++ b/test/vitest/__tests__/components/Paginate.spec.js
@@ -1,8 +1,8 @@
 import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
 import { createWrapper, axios } from 'app/test/vitest/helper';
-import Paginate from 'components/PaginateData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 
-describe('Paginate', () => {
+describe('VnPaginate', () => {
     const expectedUrl = '/api/customers';
 
     let vm;
@@ -15,7 +15,7 @@ describe('Paginate', () => {
                 limit: 3,
             },
         };
-        vm = createWrapper(Paginate, options).vm;
+        vm = createWrapper(VnPaginate, options).vm;
     });
 
     afterEach(() => {
diff --git a/test/vitest/__tests__/components/common/VnSmsDialog.spec.js b/test/vitest/__tests__/components/common/VnSmsDialog.spec.js
new file mode 100644
index 000000000..0b3473982
--- /dev/null
+++ b/test/vitest/__tests__/components/common/VnSmsDialog.spec.js
@@ -0,0 +1,58 @@
+import { createWrapper } from 'app/test/vitest/helper';
+import VnSmsDialog from 'components/common/VnSmsDialog.vue';
+import { vi, afterEach, beforeAll, describe, expect, it } from 'vitest';
+
+
+describe('VnSmsDialog', () => {
+    let vm;
+    const orderId = 1;
+    const shipped = new Date();
+    const phone = '012345678';
+    const promise = (response) => {return response;};
+    const template = 'minAmount';
+    const locale = 'en';
+
+    beforeAll(() => {
+        vm = createWrapper(VnSmsDialog, {
+            propsData: {
+                data: {
+                    orderId,
+                    shipped
+                },
+                template,
+                locale,
+                phone,
+                promise
+            }
+        }).vm;
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    describe('updateMessage()', () => {
+        it('should update the message value with the correct template and parameters', () => {
+            vm.updateMessage();
+
+            expect(vm.message).toEqual(`A minimum amount of 50€ (VAT excluded) is required for your order ${orderId} of ${shipped} to receive it without additional shipping costs.`);
+        });
+    });
+
+    describe('send()', async () => {
+        it('should send the message', async () => {
+            vi.spyOn(vm.props, 'promise');
+            vm.message = 'Example message';
+            const response = {
+                orderId,
+                shipped,
+                destination: phone,
+                message: vm.message
+            };
+            await vm.send();
+
+            expect(vm.isLoading).toEqual(false);
+            expect(vm.props.promise).toHaveBeenCalledWith(response);
+        });
+    });
+});
diff --git a/test/vitest/__tests__/pages/Claims/ClaimLines.spec.js b/test/vitest/__tests__/pages/Claims/ClaimLines.spec.js
new file mode 100644
index 000000000..dda59a98d
--- /dev/null
+++ b/test/vitest/__tests__/pages/Claims/ClaimLines.spec.js
@@ -0,0 +1,94 @@
+import { vi, describe, expect, it, beforeAll, beforeEach, afterEach } from 'vitest';
+import { createWrapper, axios } from 'app/test/vitest/helper';
+import ClaimLines from 'pages/Claim/Card/ClaimLines.vue';
+
+describe('ClaimLines', () => {
+    let vm;
+
+
+    beforeAll(() => {
+        vm = createWrapper(ClaimLines, {
+            global: {
+                stubs: ['FetchData', 'VnPaginate'],
+                mocks: {
+                    fetch: vi.fn(),
+                },
+            }
+        }).vm;
+    });
+
+    beforeEach(() => {
+        vm.claim = {
+            id: 1,
+            ticketFk: 1
+        }
+        vm.store.data = [
+            {
+                id: 1,
+                quantity: 10,
+                sale: {
+                    id: 1, discount: 0
+                }
+            }
+        ]
+    })
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    describe('updateDiscount()', () => {
+        it('should make a POST request to endpoint "updateDiscount"', async () => {
+            vi.spyOn(axios, 'post').mockResolvedValue({ data: true });
+            vi.spyOn(vm.quasar, 'notify');
+
+            const canceller = new AbortController()
+            await vm.updateDiscount({ saleFk: 1, discount: 5, canceller });
+
+            const expectedData = { salesIds: [1], newDiscount: 5 }
+            expect(axios.post).toHaveBeenCalledWith('Tickets/1/updateDiscount', expectedData, {
+                signal: canceller.signal
+            })
+        });
+    });
+
+    describe('onUpdateDiscount()', () => {
+        it('should make a POST request and then set the discount on the original row', async () => {
+            vi.spyOn(vm.quasar, 'notify');
+
+
+            vm.onUpdateDiscount({ discount: 5, rowIndex: 0 });
+            const firstRow = vm.store.data[0]
+
+            expect(firstRow.sale.discount).toEqual(5)
+            expect(vm.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    message: 'Discount updated',
+                    type: 'positive'
+                })
+            );
+        });
+    });
+
+    describe('remove()', () => {
+        it('should make a POST request and then call to the quasar notify() method', async () => {
+            vi.spyOn(axios, 'post').mockResolvedValue({ data: true });
+            vi.spyOn(vm.quasar, 'notify');
+
+            await vm.remove({
+                rows: [
+                    { id: 1 }
+                ]
+            });
+            const expectedData = { deletes: [1] }
+
+            expect(axios.post).toHaveBeenCalledWith('ClaimBeginnings/crud', expectedData)
+            expect(vm.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    message: 'Row removed',
+                    type: 'positive'
+                })
+            );
+        });
+    });
+});
diff --git a/test/vitest/__tests__/pages/Claims/ClaimLinesImport.spec.js b/test/vitest/__tests__/pages/Claims/ClaimLinesImport.spec.js
new file mode 100644
index 000000000..085118b14
--- /dev/null
+++ b/test/vitest/__tests__/pages/Claims/ClaimLinesImport.spec.js
@@ -0,0 +1,50 @@
+import { vi, describe, expect, it, beforeAll, beforeEach, afterEach } from 'vitest';
+import { createWrapper, axios } from 'app/test/vitest/helper';
+import ClaimLinesImport from 'pages/Claim/Card/ClaimLinesImport.vue';
+
+describe('ClaimLinesImport', () => {
+    let vm;
+
+
+    beforeAll(() => {
+        vm = createWrapper(ClaimLinesImport, {
+            global: {
+                stubs: ['FetchData'],
+                mocks: {
+                    fetch: vi.fn(),
+                },
+            }
+        }).vm;
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    describe('importLines()', () => {
+        it('should make a POST request and then call to the quasar notify() method', async () => {
+            vi.spyOn(axios, 'post').mockResolvedValue({ data: true });
+            vi.spyOn(vm.quasar, 'notify');
+
+            vm.selected = [
+                { id: 1, saleFk: 1, claimFk: 1, quantity: 10 }
+            ]
+
+            vm.route.params.id = 1
+
+            await vm.importLines();
+            const expectedData = [{ saleFk: 1, claimFk: 1, quantity: 10 }]
+
+            expect(axios.post).toHaveBeenCalledWith('ClaimBeginnings', expectedData, {
+                signal: expect.any(Object)
+            })
+            expect(vm.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    message: 'Lines added to claim',
+                    type: 'positive'
+                })
+            );
+            expect(vm.canceller).toEqual(null)
+        });
+    });
+});
diff --git a/test/vitest/__tests__/pages/Customer/CustomerPayments.spec.js b/test/vitest/__tests__/pages/Customer/CustomerPayments.spec.js
index b56b29c20..5d096f113 100644
--- a/test/vitest/__tests__/pages/Customer/CustomerPayments.spec.js
+++ b/test/vitest/__tests__/pages/Customer/CustomerPayments.spec.js
@@ -9,7 +9,7 @@ describe('CustomerPayments', () => {
     beforeAll(() => {
         vm = createWrapper(CustomerPayments, {
             global: {
-                stubs: ['Paginate'],
+                stubs: ['VnPaginate'],
                 mocks: {
                     fetch: vi.fn(),
                 },
diff --git a/test/vitest/__tests__/pages/Tickets/TicketBoxing.spec.js b/test/vitest/__tests__/pages/Tickets/TicketBoxing.spec.js
index b731cf2cf..8fd62d8c2 100644
--- a/test/vitest/__tests__/pages/Tickets/TicketBoxing.spec.js
+++ b/test/vitest/__tests__/pages/Tickets/TicketBoxing.spec.js
@@ -4,7 +4,7 @@ import TicketBoxing from 'pages/Ticket/Card/TicketBoxing.vue';
 
 // #4836 - Investigate how to test q-drawer outside
 // q-layout or how to teleport q-drawer inside
-describe.skip('TicketBoxing', () => {
+describe('TicketBoxing', () => {
     let vm;
     beforeAll(() => {
         vm = createWrapper(TicketBoxing).vm;
diff --git a/test/vitest/__tests__/pages/Wagons/WagonCreate.spec.js b/test/vitest/__tests__/pages/Wagons/WagonCreate.spec.js
new file mode 100644
index 000000000..bc6b92639
--- /dev/null
+++ b/test/vitest/__tests__/pages/Wagons/WagonCreate.spec.js
@@ -0,0 +1,103 @@
+import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
+import { createWrapper, axios } from 'app/test/vitest/helper';
+import WagonCreate from 'pages/Wagon/WagonCreate.vue';
+
+describe('WagonCreate', () => {
+    let vmEdit, vmCreate;
+    const entityId = 1;
+
+    beforeAll(() => {
+        vmEdit = createWrapper(WagonCreate, {propsData: {
+                id: entityId,
+            }}).vm;
+        vmCreate = createWrapper(WagonCreate).vm;
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    describe('onSubmit()', () => {
+        it('should create a wagon', async () => {
+            vi.spyOn(axios, 'patch').mockResolvedValue({ data: true });
+            vmCreate.wagon = {
+                label: 1234,
+                plate: 'MOCK PLATE',
+                volume: 50,
+                typeFk: 1,
+            };
+
+            await vmCreate.onSubmit();
+
+            expect(axios.patch).toHaveBeenCalledWith(
+                `Wagons`, vmCreate.wagon
+            );
+        });
+
+        it('should update a wagon', async () => {
+            vi.spyOn(axios, 'patch').mockResolvedValue({ data: true });
+            vmEdit.wagon = {
+                id: entityId,
+                label: 1234,
+                plate: 'MOCK PLATE',
+                volume: 50,
+                typeFk: 1,
+            };
+
+            await vmEdit.onSubmit();
+
+            expect(axios.patch).toHaveBeenCalledWith(
+                `Wagons`, vmEdit.wagon
+            );
+        });
+    });
+
+    describe('onReset()', () => {
+        it('should reset wagon if have id', async () => {
+            vmEdit.originalData = {
+                label: 1234,
+                plate: 'Original',
+                volume: 200,
+                typeFk: 1,
+            };
+            vmEdit.wagon = {
+                label: 4321,
+                plate: 'Edited',
+                volume: 50,
+                typeFk: 2,
+            };
+
+            await vmEdit.onReset();
+
+            expect(vmEdit.wagon).toEqual(vmEdit.originalData);
+        });
+
+        it('should reset wagon if not have id', async () => {
+            vmCreate.wagon = {
+                label: 4321,
+                plate: 'Edited',
+                volume: 50,
+                typeFk: 2,
+            };
+
+            await vmCreate.onReset();
+
+            expect(vmCreate.wagon).toEqual({});
+        });
+    });
+
+    describe('fetch()', () => {
+        it('should fetch data', async () => {
+            vi.spyOn(axios, 'get').mockResolvedValue({ data: true });
+
+            await vmEdit.fetch();
+
+            expect(axios.get).toHaveBeenCalledWith(
+                `WagonTypes`
+            );
+            expect(axios.get).toHaveBeenCalledWith(
+                `Wagons/${entityId}`
+            );
+        });
+    });
+});
diff --git a/test/vitest/__tests__/pages/Wagons/WagonTypeCreate.spec.js b/test/vitest/__tests__/pages/Wagons/WagonTypeCreate.spec.js
new file mode 100644
index 000000000..60c199b73
--- /dev/null
+++ b/test/vitest/__tests__/pages/Wagons/WagonTypeCreate.spec.js
@@ -0,0 +1,271 @@
+import { axios, createWrapper } from 'app/test/vitest/helper';
+import WagonTypeCreate from 'pages/Wagon/Type/WagonTypeCreate.vue';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+
+describe('WagonTypeCreate', () => {
+    let vmCreate, vmEdit;
+    const entityId = 1;
+
+    beforeAll(() => {
+        vmEdit = createWrapper(WagonTypeCreate, {propsData: {
+                id: entityId,
+            }}).vm;
+        vmCreate = createWrapper(WagonTypeCreate).vm;
+        vmEdit.wagonConfig = vmCreate.wagonConfig = {maxTrays: 2 ,minHeightBetweenTrays: 50, maxWagonHeight: 200 };
+        vmEdit.wagonTypeColors = vmCreate.wagonTypeColors = [{id: 1, color:'white', rgb:'#000000'}];
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    describe('addTray()', () => {
+        it('should throw message if there are uncomplete trays', async () => {
+            vi.spyOn(vmEdit.quasar, 'notify');
+            vmEdit.wagon = [{
+                id: 1,
+                position: null,
+                color: vmEdit.wagonTypeColors[0]
+            }];
+
+            await vmEdit.addTray();
+
+            expect(vmEdit.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: 'warning',
+                })
+            );
+        });
+
+        it('should create a new tray if the limit has not been reached', async () => {
+            vmEdit.wagon = [{
+                id: 1,
+                position: 0,
+                color: vmEdit.wagonTypeColors[0]
+            }];
+
+            await vmEdit.addTray();
+            expect(vmEdit.wagon.length).toEqual(2);
+        });
+
+        it('should throw message if there are uncomplete trays', async () => {
+            vi.spyOn(vmEdit.quasar, 'notify');
+            vmEdit.wagon = [{
+                id: 1,
+                position: 0,
+                color: vmEdit.wagonTypeColors[0]
+            },{
+                id: 2,
+                position: 50,
+                color: vmEdit.wagonTypeColors[0]
+            }];
+
+            await vmEdit.addTray();
+
+            expect(vmEdit.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: 'warning',
+                })
+            );
+        });
+    });
+
+    describe('deleteTray() reorderIds()', () => {
+        it('should delete a tray and reorder the ids', async () => {
+            const trayToDelete = {
+                id: 1,
+                position: 0,
+                color: vmEdit.wagonTypeColors[0]
+            };
+            const trayMaintained = {
+                id: 2,
+                position: 50,
+                color: vmEdit.wagonTypeColors[0]
+            };
+            vmEdit.wagon = [trayToDelete,trayMaintained];
+
+            await vmEdit.deleteTray(trayToDelete);
+
+            expect(vmEdit.wagon.length).toEqual(1);
+            expect(vmEdit.wagon[0].id).toEqual(0);
+            expect(vmEdit.wagon[0].position).toEqual(50);
+
+        });
+    });
+
+    describe('onSubmit()', () => {
+        it('should make a patch to editWagonType if have id', async () => {
+            vi.spyOn(axios, 'patch').mockResolvedValue({ data: true });
+            const wagon = {
+                id: entityId,
+                name: "Mock name",
+                divisible: true,
+                trays: [{
+                    id: 1,
+                    position: 0,
+                    color: vmEdit.wagonTypeColors[0]
+                }]
+            }
+            vmEdit.name = wagon.name;
+            vmEdit.divisible = wagon.divisible;
+            vmEdit.wagon = wagon.trays;
+
+            await vmEdit.onSubmit();
+
+            expect(axios.patch).toHaveBeenCalledWith(
+                `WagonTypes/editWagonType`, wagon
+            );
+        });
+
+        it('should make a patch to createtWagonType if not have id', async () => {
+            vi.spyOn(axios, 'patch').mockResolvedValue({ data: true });
+            const wagon = {
+                name: "Mock name",
+                divisible: true,
+                trays: [{
+                    id: 1,
+                    position: 0,
+                    color: vmCreate.wagonTypeColors[0]
+                }]
+            }
+            vmCreate.name = wagon.name;
+            vmCreate.divisible = wagon.divisible;
+            vmCreate.wagon = wagon.trays;
+
+            await vmCreate.onSubmit();
+
+            expect(axios.patch).toHaveBeenCalledWith(
+                `WagonTypes/createWagonType`, wagon
+            );
+        });
+    });
+
+    describe('onReset()', () => {
+        it('should reset if have id', async () => {
+            vmEdit.name = 'Changed name';
+            vmEdit.divisible = false;
+            vmEdit.wagon = [];
+            vmEdit.originalData = {
+                name: 'Original name',
+                divisible: true,
+                trays: [{
+                    id: 1,
+                    position: 0,
+                    color: vmEdit.wagonTypeColors[0]
+                },{
+                    id: 2,
+                    position: 50,
+                    color: vmEdit.wagonTypeColors[0]
+                }]
+            };
+
+            vmEdit.onReset();
+
+            expect(vmEdit.name).toEqual(vmEdit.originalData.name);
+            expect(vmEdit.divisible).toEqual(vmEdit.originalData.divisible);
+            expect(vmEdit.wagon).toEqual(vmEdit.originalData.trays);
+        });
+
+        it('should reset if not have id', async () => {
+            vmCreate.name = 'Changed name';
+            vmCreate.divisible = false;
+            vmCreate.wagon = [];
+
+            vmCreate.onReset();
+
+            expect(vmCreate.name).toEqual(null);
+            expect(vmCreate.divisible).toEqual(false);
+            expect(vmCreate.wagon.length).toEqual(1);
+        });
+    });
+
+    describe('onPositionBlur()', () => {
+        it('should set position null if position is negative', async () => {
+            const negativeTray = {
+                id: 1,
+                position: -1,
+                color: vmCreate.wagonTypeColors[0]
+            };
+
+            vmCreate.onPositionBlur(negativeTray);
+
+            expect(negativeTray.position).toEqual(null);
+        });
+
+        it('should set position and reorder array', async () => {
+            const trays = [{
+                id: 0,
+                position: 100,
+                color: vmCreate.wagonTypeColors[0]
+            },{
+                id: 1,
+                position: 0,
+                color: vmCreate.wagonTypeColors[0]
+            }];
+            const newTray = {
+                id: 2,
+                position: 50,
+                color: vmCreate.wagonTypeColors[0]
+            };
+            trays.push(newTray);
+            vmCreate.wagon = trays;
+
+            vmCreate.onPositionBlur(newTray);
+
+            expect(vmCreate.wagon[0].position).toEqual(100);
+            expect(vmCreate.wagon[1].position).toEqual(50);
+            expect(vmCreate.wagon[2].position).toEqual(0);
+        });
+
+        it('should throw message if not have min height between trays and should set new adequate positions', async () => {
+            vi.spyOn(vmCreate.quasar, 'notify');
+            const trays = [{
+                id: 0,
+                position: 0,
+                color: vmCreate.wagonTypeColors[0]
+            }];
+            const newTray = {
+                id: 1,
+                position: 20,
+                color: vmCreate.wagonTypeColors[0]
+            };
+            trays.push(newTray);
+            vmCreate.wagon = trays;
+
+            vmCreate.onPositionBlur(newTray);
+
+            expect(vmCreate.wagon[0].position).toEqual(50);
+            expect(vmCreate.wagon[1].position).toEqual(0);
+            expect(vmCreate.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: 'warning',
+                })
+            );
+        });
+
+        it('should throw message if max height has been exceed', async () => {
+            vi.spyOn(vmCreate.quasar, 'notify');
+            const trays = [{
+                id: 0,
+                position: 0,
+                color: vmCreate.wagonTypeColors[0]
+            }];
+            const newTray = {
+                id: 1,
+                position: 210,
+                color: vmCreate.wagonTypeColors[0]
+            };
+            trays.push(newTray);
+            vmCreate.wagon = trays;
+
+            vmCreate.onPositionBlur(newTray);
+
+            expect(vmCreate.wagon.length).toEqual(1);
+            expect(vmCreate.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: 'warning',
+                })
+            );
+        });
+    });
+});
diff --git a/vitest.config.js b/vitest.config.js
index bde8537f8..5a8699e99 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -18,9 +18,12 @@ export default defineConfig({
     },
     plugins: [
         vue({
-            template: { transformAssetUrls },
+            template: {
+                transformAssetUrls
+            },
         }),
         quasar({
+            autoImportComponentCase: 'pascal',
             sassVariables: 'src/quasar-variables.scss',
         }),
         VueI18nPlugin({