src/css/app.scss

@@ -1,35 +1,38 @@
 // app global css in SCSS form
 
 @font-face {
-  font-family: Poppins;
-  src: url(./poppins.ttf) format('truetype');
+    font-family: Poppins;
+    src: url(./poppins.ttf) format('truetype');
 }
 @font-face {
-  font-family: 'Open Sans';
-  src: url(./opensans.ttf) format('truetype');
+    font-family: 'Open Sans';
+    src: url(./opensans.ttf) format('truetype');
 }
 @mixin mobile {
-  @media screen and (max-width: 960px) {
-    @content;
-  }
+    @media screen and (max-width: 960px) {
+        @content;
+    }
 }
 
 body {
-  font-family: 'Poppins', 'Verdana', 'Sans';
-  background-color: #fafafa;
+    font-family: 'Poppins', 'Verdana', 'Sans';
+    background-color: #fafafa;
 }
 a.link {
-  text-decoration: none;
-  color: #6a1;
+    text-decoration: none;
+    color: #6a1;
 
-  &:hover {
-    text-decoration: underline;
-  }
+    &:hover {
+        text-decoration: underline;
+    }
 }
 .q-card {
-  border-radius: 7px;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
+    border-radius: 0.6em !important;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
+}
+.q-table__container {
+    border-radius: 0.6em !important;
 }
 .q-page-sticky.fixed-bottom-right {
-  margin: 18px;
+    margin: 18px;
 }

src/i18n/es-ES/index.js

@@ -12,6 +12,15 @@ export default {
     today: 'Hoy',
     yesterday: 'Ayer',
     tomorrow: 'Mañana',
+    language: 'Idioma',
+    langs: {
+        en: 'Inglés',
+        es: 'Español',
+        ca: 'Catalán',
+        fr: 'Francés',
+        mn: 'Ruso',
+        pt: 'Portugés'
+    },
     date: {
         days: [
             'Domingo',
@@ -76,7 +85,7 @@ export default {
     remindMe: 'Recuérdame',
     logInAsGuest: 'Entrar como invitado',
     logIn: 'Iniciar sesión',
-    loginMail: 'info@verdnatura.es',
+    loginMail: "{'info'}{'@'}{'verdnatura.es'}",
     loginPhone: '+34 963 242 100',
     haveForgottenPassword: '¿Has olvidado tu contraseña?',
     notACustomerYet: '¿Todavía no eres cliente?',

src/pages/Agencies/PackagesView.vue

@@ -0,0 +1,108 @@
+<script setup>
+import { ref, inject, onMounted, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const jApi = inject('jApi');
+const { t } = useI18n();
+
+const packages = ref([]);
+
+const columns = computed(() => [
+    {
+        label: t('agency'),
+        name: 'agency',
+        field: 'Agencia',
+        align: 'left',
+        sortable: true
+    },
+    {
+        label: t('expeditions'),
+        name: 'expeditions',
+        field: 'expediciones',
+        align: 'right',
+        sortable: true
+    },
+    {
+        label: t('bundles'),
+        name: 'bundles',
+        field: 'Bultos',
+        align: 'right',
+        sortable: true
+    },
+
+    {
+        label: t('prevision'),
+        name: 'prevision',
+        field: 'Faltan',
+        align: 'right',
+        sortable: true
+    }
+]);
+
+const getPackages = async () => {
+    try {
+        const data = await jApi.query('CALL vn.agencyVolume()');
+        packages.value = data;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+onMounted(() => getPackages());
+</script>
+
+<template>
+    <QPage class="flex justify-center q-pa-md">
+        <QTable
+            :columns="columns"
+            :rows="packages"
+            :loading="loading"
+            class="q-mt-lg"
+            style="max-width: 100%; height: max-content"
+            table-header-class="packages-table-header"
+            hide-bottom
+        >
+            <template #body-cell-id="{ row }">
+                <QTd auto-width @click.stop>
+                    <QBtn flat color="blue">{{ row.id }}</QBtn>
+                    <ItemDescriptorProxy :id="row.id" />
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss">
+.packages-table-header {
+    background-color: $accent !important;
+    color: white;
+}
+</style>
+
+<i18n lang="yaml">
+en-US:
+    agency: Agency
+    bundles: Bundles
+    expeditions: Exps.
+    prevision: Prev.
+es-ES:
+    agency: Agencia
+    bundles: Bultos
+    expeditions: Exps.
+    prevision: Prev.
+ca-ES:
+    agency: Agència
+    bundles: Paquets
+    expeditions: Exps.
+    prevision: Prev.
+fr-FR:
+    agency: Agence
+    bundles: Cartons
+    expeditions: Exps.
+    prevision: Prev.
+pt-PT:
+    agency: Agência
+    bundles: Bultos
+    expeditions: Exps.
+    prevision: Prev.
+</i18n>

src/pages/Login/LoginView.vue

@@ -15,6 +15,7 @@ const password = ref(null);
 const remember = ref(false);
 const showPwd = ref(false);
 
+const langs = ['en', 'es', 'ca', 'fr', 'mn', 'pt'];
 onMounted(() => {
     if (route.query.emailConfirmed !== undefined) {
         notify({
@@ -56,12 +57,31 @@ async function onLogin() {
                         />
                     </template>
                 </QInput>
-                <QCheckbox
+                <div class="  text-center"> <QCheckbox
                     v-model="remember"
                     :label="$t('remindMe')"
-                    class="remember"
                     dense
-                />
+                /> <QBtn
+                    id="switchLanguage"
+                    :label="$t('language')"
+                    icon="translate"
+                    color="primary"
+                    size="sm"
+                    flat
+                    rounded
+                >
+                    <QMenu auto-close>
+                        <QList dense v-for="lang in langs" :key="lang">
+                            <QItem
+                            disabled
+                                v-ripple
+                                clickable
+                            >
+                                {{ $t(`langs.${lang}`) }}
+                            </QItem>
+                        </QList>
+                    </QMenu>
+                </QBtn></div>
             </div>
             <div class="justify-center">
                 <QBtn

src/router/routes.js

@@ -54,6 +54,11 @@ const routes = [
                 path: '/ecomerce/catalog/:category?/:type?',
                 component: () => import('pages/Ecomerce/Catalog.vue')
             },
+            {
+                name: 'packages',
+                path: '/agencies/packages',
+                component: () => import('src/pages/Agencies/PackagesView.vue')
+            },
             {
                 name: 'Account',
                 path: '/account/conf',