Agencies packages

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/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/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',