add new statistic page

src/layouts/MainLayout.vue

@@ -63,6 +63,22 @@
         >
           <q-item-section>{{ $t('groups') }}</q-item-section>
         </q-item>
+        <q-item v-if="!autorized" to="/login" exact clickable v-ripple @click="closeDrawer">
+          <q-item-section>{{ $t('login') }}</q-item-section>
+        </q-item>
+        <!-- <q-item
+          v-if="autorized || user.isPermittedTo('members', 'read')"
+          to="/report"
+          exact
+          clickable
+          v-ripple
+          @click="closeDrawer"
+        >
+          <q-item-section> {{ $t('report') }}</q-item-section>
+        </q-item> -->
+        <q-item v-if="autorized" to="/stats" exact clickable v-ripple @click="closeDrawer">
+          <q-item-section> {{ $t('stats') }}</q-item-section>
+        </q-item>
       </q-list>
     </q-drawer>
     <q-page-container>

src/pages/StatsPage.vue

@@ -0,0 +1,116 @@
+<template>
+  <site-title :title="$t('stats')" />
+  <q-card class="q-ma-md">
+    <q-card-section>
+      <div class="row q-ma-md q-gutter-md">
+        <q-card class="row col-auto">
+          <div class="col">
+            <h5 class="text-primary q-ma-md">{{ i18n.global.t('database') }}</h5>
+            <q-card-section>
+              <div class="column q-gutter-y-sm">
+                <div class="row items-center">
+                  <p class="text-bold" style="min-width: 180px">
+                    {{ i18n.global.t('databaseSize') }}:
+                  </p>
+                  <p class="q-ml-md">{{ stats }}</p>
+                </div>
+                <div class="row items-center">
+                  <p class="text-bold" style="min-width: 180px">
+                    {{ i18n.global.t('numberOfMembers') }}:
+                  </p>
+                  <p class="q-ml-md">{{ amounts?.members }}</p>
+                </div>
+                <div class="row items-center">
+                  <p class="text-bold" style="min-width: 180px">
+                    {{ i18n.global.t('numberOfEvents') }}:
+                  </p>
+                  <p class="q-ml-md">{{ amounts?.events }}</p>
+                </div>
+                <div class="row items-center">
+                  <p class="text-bold" style="min-width: 180px">
+                    {{ i18n.global.t('numberOfResponsibles') }}:
+                  </p>
+                  <p class="q-ml-md">{{ amounts?.responsibles }}</p>
+                </div>
+                <div class="row items-center">
+                  <p class="text-bold" style="min-width: 180px">
+                    {{ i18n.global.t('numberOfGroups') }}:
+                  </p>
+                  <p class="q-ml-md">{{ amounts?.groups }}</p>
+                </div>
+              </div>
+            </q-card-section>
+          </div>
+        </q-card>
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { appApi } from 'src/boot/axios';
+import { i18n } from 'src/boot/lang';
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { databaseName } from 'src/vueLib/models/settings';
+import { onMounted, ref } from 'vue';
+
+const stats = ref();
+const amounts = ref<{
+  members: number;
+  events: number;
+  responsibles: number;
+  groups: number;
+}>({
+  members: 0,
+  events: 0,
+  responsibles: 0,
+  groups: 0,
+});
+
+const { NotifyResponse } = useNotify();
+
+onMounted(async () => {
+  stats.value = await appApi
+    .post('/stats', { database: databaseName.value })
+    .then((resp) => {
+      if ((resp.data.databaseSize as number) >= 1000000000) {
+        return (resp.data.data.databaseSize / 1000000000).toFixed(2) + ' GB';
+      } else if ((resp.data.data.databaseSize as number) >= 1000000) {
+        return (resp.data.data.databaseSize / 1000000).toFixed(2) + ' MB';
+      } else if ((resp.data.data.databaseSize as number) >= 1000) {
+        return (resp.data.data.databaseSize / 1000).toFixed(2) + ' kB';
+      }
+      return resp.data.data.databaseSize + ' B';
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+
+  amounts.value.members = await appApi
+    .get('/members')
+    .then((resp) => {
+      return resp.data.length;
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+
+  amounts.value.events = await appApi
+    .get('/events')
+    .then((resp) => {
+      return resp.data.length;
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+
+  amounts.value.responsibles = await appApi
+    .get('responsible')
+    .then((resp) => {
+      return resp.data.length;
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+
+  amounts.value.groups = await appApi
+    .get('/groups')
+    .then((resp) => {
+      return resp.data.length;
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+});
+</script>

src/router/index.ts

@@ -40,6 +40,7 @@ export default defineRouter(function (/* { store, ssrContext } */) {
 
   Router.beforeEach((to, from, next) => {
     const userStore = useUserStore();
+
     const isLoggedIn = userStore.isAuthenticated;
     if (!userStore.$state.firstLogin && to.path === '/firstlogin') {
       next('/login');
@@ -51,7 +52,11 @@ export default defineRouter(function (/* { store, ssrContext } */) {
       to.meta.requiresAdmin &&
       !userStore.isPermittedTo(to.path.replace('/', ''), 'read')
     ) {
-      next('/');
+      if (to.meta.noBackendAdmin) {
+        next();
+      } else {
+        next('/');
+      }
     } else {
       next();
     }

src/router/routes.ts

@@ -37,6 +37,16 @@ const routes: RouteRecordRaw[] = [
         component: () => import('src/pages/GroupTable.vue'),
         meta: { requiresAuth: true, requiresAdmin: true },
       },
+      {
+        path: 'report',
+        component: () => import('src/pages/ReportPage.vue'),
+        meta: { requiresAuth: true, requiresAdmin: false },
+      },
+      {
+        path: 'stats',
+        component: () => import('src/pages/StatsPage.vue'),
+        meta: { requiresAuth: true, requiresAdmin: true, noBackendAdmin: true },
+      },
       {
         path: 'settings',
         component: () => import('pages/SettingsPage.vue'),