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/api/class-interfaces/groups.ts

@@ -1,5 +1,6 @@
 import { BaseCRUDAPI } from "../_base";
 import { GroupInDB, UserOut } from "~/types/api-types/user";
+import { GroupStatistics, GroupStorage } from "~/types/api-types/group";
 
 const prefix = "/api";
 
@@ -11,6 +12,8 @@ const routes = {
   permissions: `${prefix}/groups/permissions`,
 
   preferences: `${prefix}/groups/preferences`,
+  statistics: `${prefix}/groups/statistics`,
+  storage: `${prefix}/groups/storage`,
 
   invitation: `${prefix}/groups/invitations`,
 
@@ -103,4 +106,12 @@ export class GroupAPI extends BaseCRUDAPI<GroupInDB, CreateGroup> {
     // TODO: This should probably be a patch request, which isn't offered by the API currently
     return await this.requests.put<Permissions, SetPermissions>(routes.permissions, payload);
   }
+
+  async statistics() {
+    return await this.requests.get<GroupStatistics>(routes.statistics);
+  }
+
+  async storage() {
+    return await this.requests.get<GroupStorage>(routes.storage);
+  }
 }

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>

frontend/composables/recipes/use-recipes.ts

@@ -97,7 +97,7 @@ export const useRecipes = (all = false, fetchRecipes = true) => {
   })();
 
   async function refreshRecipes() {
-    const { data } = await api.recipes.getAll(start, end);
+    const { data } = await api.recipes.getAll(start, end, { loadFood: true });
     if (data) {
       recipes.value = data;
     }

frontend/pages/user/profile/index.vue

@@ -38,6 +38,51 @@
         </div>
       </v-card>
     </section>
+    <section class="my-3">
+      <div>
+        <h3 class="headline">Account Summary</h3>
+        <p>Here's a summary of your group's information</p>
+      </div>
+      <v-row tag="section">
+        <v-col cols="12" sm="12" md="6">
+          <v-card outlined>
+            <v-card-title class="headline pb-0"> Group Statistics </v-card-title>
+            <v-card-text class="py-0">
+              Your Group Statistics provide some insight how you're using Mealie.
+            </v-card-text>
+            <v-card-text class="d-flex flex-wrap justify-center align-center" style="gap: 0.8rem">
+              <StatsCards
+                v-for="(value, key) in stats"
+                :key="`${key}-${value}`"
+                :min-width="$vuetify.breakpoint.xs ? '100%' : '158'"
+                :icon="getStatsIcon(key)"
+                :to="getStatsTo(key)"
+              >
+                <template #title> {{ getStatsTitle(key) }}</template>
+                <template #value> {{ value }}</template>
+              </StatsCards>
+            </v-card-text>
+          </v-card>
+        </v-col>
+        <v-col cols="12" sm="12" md="6" class="d-flex align-strart">
+          <v-card outlined>
+            <v-card-title class="headline pb-0"> Storage Capacity </v-card-title>
+            <v-card-text class="py-0">
+              Your storage capacity is a calculation of the images and assets you have uploaded.
+              <strong> This feature is currently inactive</strong>
+            </v-card-text>
+            <v-card-text>
+              <v-progress-linear :value="storageUsedPercentage" color="accent" class="rounded" height="30">
+                <template #default>
+                  <strong> {{ storageText }} </strong>
+                </template>
+              </v-progress-linear>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </section>
+    <v-divider class="my-7"></v-divider>
     <section>
       <div>
         <h3 class="headline">Personal</h3>
@@ -149,18 +194,21 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext, ref, toRefs, reactive } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext, ref, toRefs, reactive, useAsync } from "@nuxtjs/composition-api";
 import UserProfileLinkCard from "@/components/Domain/User/UserProfileLinkCard.vue";
 import { useUserApi } from "~/composables/api";
 import { validators } from "~/composables/use-validators";
 import { alert } from "~/composables/use-toast";
 import UserAvatar from "@/components/Domain/User/UserAvatar.vue";
+import { useAsyncKey } from "~/composables/use-utils";
+import StatsCards from "~/components/global/StatsCards.vue";
 
 export default defineComponent({
   name: "UserProfile",
   components: {
     UserProfileLinkCard,
     UserAvatar,
+    StatsCards,
   },
   scrollToTop: true,
   setup() {
@@ -218,7 +266,81 @@ export default defineComponent({
       return false;
     });
 
+    const stats = useAsync(async () => {
+      const { data } = await api.groups.statistics();
+
+      if (data) {
+        return data;
+      }
+    }, useAsyncKey());
+
+    const statsText: { [key: string]: string } = {
+      totalRecipes: "Recipes",
+      totalUsers: "Users",
+      totalCategories: "Categories",
+      totalTags: "Tags",
+      totalTools: "Tools",
+    };
+
+    function getStatsTitle(key: string) {
+      return statsText[key] ?? "unknown";
+    }
+
+    const { $globals } = useContext();
+
+    const iconText: { [key: string]: string } = {
+      totalUsers: $globals.icons.user,
+      totalCategories: $globals.icons.tags,
+      totalTags: $globals.icons.tags,
+      totalTools: $globals.icons.potSteam,
+    };
+
+    function getStatsIcon(key: string) {
+      return iconText[key] ?? $globals.icons.primary;
+    }
+
+    const statsTo: { [key: string]: string } = {
+      totalRecipes: "/recipes/all",
+      totalUsers: "/group/members",
+      totalCategories: "/recipes/categories",
+      totalTags: "/recipes/tags",
+      totalTools: "/recipes/tools",
+    };
+
+    function getStatsTo(key: string) {
+      return statsTo[key] ?? "unknown";
+    }
+
+    const storage = useAsync(async () => {
+      const { data } = await api.groups.storage();
+
+      if (data) {
+        return data;
+      }
+    }, useAsyncKey());
+
+    const storageUsedPercentage = computed(() => {
+      if (!storage.value) {
+        return 0;
+      }
+
+      return (storage.value?.usedStorageBytes / storage.value?.totalStorageBytes) * 100 ?? 0;
+    });
+
+    const storageText = computed(() => {
+      if (!storage.value) {
+        return "Loading...";
+      }
+      return `${storage.value.usedStorageStr} / ${storage.value.totalStorageStr}`;
+    });
+
     return {
+      storageText,
+      storageUsedPercentage,
+      getStatsTitle,
+      getStatsIcon,
+      getStatsTo,
+      stats,
       user,
       constructLink,
       generatedLink,

frontend/types/api-types/group.ts

@@ -176,6 +176,19 @@ export interface GroupEventNotifierUpdate {
   options?: GroupEventNotifierOptions;
   id: string;
 }
+export interface GroupStatistics {
+  totalRecipes: number;
+  totalUsers: number;
+  totalCategories: number;
+  totalTags: number;
+  totalTools: number;
+}
+export interface GroupStorage {
+  usedStorageBytes: number;
+  usedStorageStr: string;
+  totalStorageBytes: number;
+  totalStorageStr: string;
+}
 export interface IngredientFood {
   name: string;
   description?: string;

frontend/types/components.d.ts

@@ -10,6 +10,7 @@
  import BannerExperimental from "@/components/global/BannerExperimental.vue";
  import BaseDialog from "@/components/global/BaseDialog.vue";
  import RecipeJsonEditor from "@/components/global/RecipeJsonEditor.vue";
+ import StatsCards from "@/components/global/StatsCards.vue";
  import InputLabelType from "@/components/global/InputLabelType.vue";
  import BaseStatCard from "@/components/global/BaseStatCard.vue";
  import DevDumpJson from "@/components/global/DevDumpJson.vue";
@@ -45,6 +46,7 @@ declare module "vue" {
      BannerExperimental: typeof BannerExperimental;
      BaseDialog: typeof BaseDialog;
      RecipeJsonEditor: typeof RecipeJsonEditor;
+     StatsCards: typeof StatsCards;
      InputLabelType: typeof InputLabelType;
      BaseStatCard: typeof BaseStatCard;
      DevDumpJson: typeof DevDumpJson;