feat: add group statistics on profile page

* resolve file not found error and add constants

* add group stats and storage functionality

* generate new types

* add statistics and storage cap graphs

* fix: add loadFood query param #1103

* refactor to flex view

frontend/components/global/StatsCards.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-card :min-width="minWidth" :to="to" :hover="to ? true : false">
+    <div class="d-flex flex-no-wrap">
+      <v-avatar class="ml-3 mr-0 mt-3" color="primary" size="36">
+        <v-icon color="white" class="pa-1">
+          {{ activeIcon }}
+        </v-icon>
+      </v-avatar>
+      <div>
+        <v-card-title class="text-subtitle-1 pt-2 pb-2">
+          <slot name="title"></slot>
+        </v-card-title>
+        <v-card-subtitle class="pb-2">
+          <slot name="value"></slot>
+        </v-card-subtitle>
+      </div>
+    </div>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  props: {
+    icon: {
+      type: String,
+      default: null,
+    },
+    minWidth: {
+      type: String,
+      default: "",
+    },
+    to: {
+      type: String,
+      default: null,
+    },
+  },
+  setup(props) {
+    const { $globals } = useContext();
+
+    const activeIcon = computed(() => {
+      return props.icon ?? $globals.icons.primary;
+    });
+
+    return {
+      activeIcon,
+    };
+  },
+});
+</script>
+
+<style scoped></style>