dashboard ui

frontend/src/pages/Admin/About/index.vue

@@ -22,19 +22,26 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <TheDownloadBtn :button-text="$t('about.download-recipe-json')" download-url="/api/debug/last-recipe-json" />
+        <TheDownloadBtn download-url="/api/debug/last-recipe-json">
-        <TheDownloadBtn :button-text="$t('about.download-log')" download-url="/api/debug/log" />
+          <template v-slot:default="{ downloadFile }">
+            <v-btn color="primary" @click="downloadFile">
+              <v-icon left> mdi-code-braces </v-icon> {{ $t("about.download-recipe-json") }}
+            </v-btn>
+          </template>
+        </TheDownloadBtn>
       </v-card-actions>
       <v-divider></v-divider>
     </v-card>
+    <LogCard />
   </div>
 </template>
 
 <script>
 import { api } from "@/api";
 import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn";
+import LogCard from "@/components/UI/LogCard.vue";
 export default {
-  components: { TheDownloadBtn },
+  components: { TheDownloadBtn, LogCard },
   data() {
     return {
       prettyInfo: [],

frontend/src/pages/Admin/Dashboard/StatCard.vue

@@ -0,0 +1,95 @@
+w<template>
+  <v-card v-bind="$attrs" :class="classes" class="v-card--material pa-3">
+    <div class="d-flex grow flex-wrap">
+      <v-sheet
+        :class="{
+          'pa-7': !$slots.image,
+        }"
+        :color="color"
+        :max-height="icon ? 90 : undefined"
+        :width="icon ? 'auto' : '100%'"
+        elevation="6"
+        class="text-start v-card--material__heading mb-n6"
+        dark
+      >
+        <v-icon v-if="icon" size="32" v-text="icon" />
+        <div v-if="text" class="headline font-weight-thin" v-text="text" />
+      </v-sheet>
+
+      <div v-if="$slots['after-heading']" class="ml-auto">
+        <slot name="after-heading" />
+      </div>
+    </div>
+
+    <slot />
+
+    <template v-if="$slots.actions">
+      <v-divider class="mt-2" />
+
+      <v-card-actions class="pb-0">
+        <slot name="actions" />
+      </v-card-actions>
+    </template>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: "MaterialCard",
+
+  props: {
+    avatar: {
+      type: String,
+      default: "",
+    },
+    color: {
+      type: String,
+      default: "primary",
+    },
+    icon: {
+      type: String,
+      default: undefined,
+    },
+    image: {
+      type: Boolean,
+      default: false,
+    },
+    text: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        "v-card--material--has-heading": this.hasHeading,
+      };
+    },
+    hasHeading() {
+      return Boolean(this.$slots.heading || this.title || this.icon);
+    },
+    hasAltHeading() {
+      return Boolean(this.$slots.heading || (this.title && this.icon));
+    },
+  },
+};
+</script>
+
+<style lang="sass">
+.v-card--material
+    &__avatar
+        position: relative
+        top: -64px
+        margin-bottom: -32px
+
+    &__heading
+        position: relative
+        top: -40px
+        transition: .3s ease
+        z-index: 1
+</style>

frontend/src/pages/Admin/Dashboard/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="mt-15">
+    <v-row>
+      <v-col>
+        <StatCard icon="mdi-silverware-fork-knife">
+          <template v-slot:after-heading>
+            <div class="ml-auto text-right">
+              <div class="body-3 grey--text font-weight-light" v-text="'Recipes'" />
+
+              <h3 class="display-2 font-weight-light text--primary">
+                <small> {{ statistics.totalRecipes }}</small>
+              </h3>
+            </div>
+          </template>
+          <template v-slot:actions>
+            <div class="d-flex row py-3 justify-space-around">
+              <v-btn small color="primary">
+                <v-icon left> mdi-tag </v-icon> Untagged {{ statistics.untaggedRecipes }}
+              </v-btn>
+              <v-btn small color="primary">
+                <v-icon left> mdi-tag </v-icon> Uncategorized {{ statistics.uncategorizedRecipes }}
+              </v-btn>
+            </div>
+          </template>
+        </StatCard>
+      </v-col>
+      <v-col>
+        <StatCard icon="mdi-account">
+          <template v-slot:after-heading>
+            <div class="ml-auto text-right">
+              <div class="body-3 grey--text font-weight-light" v-text="'Users'" />
+
+              <h3 class="display-2 font-weight-light text--primary">
+                <small> {{ statistics.totalUsers }}</small>
+              </h3>
+            </div>
+          </template>
+          <template v-slot:actions>
+            <div class="ml-auto">
+              <v-btn color="primary" small to="/admin/manage-users?tab=users">
+                <v-icon left>mdi-account</v-icon>
+                Manage Users
+              </v-btn>
+            </div>
+          </template>
+        </StatCard>
+      </v-col>
+      <v-col>
+        <StatCard icon="mdi-account-group">
+          <template v-slot:after-heading>
+            <div class="ml-auto text-right">
+              <div class="body-3 grey--text font-weight-light" v-text="'Groups'" />
+
+              <h3 class="display-2 font-weight-light text--primary">
+                <small> {{ statistics.totalGroups }}</small>
+              </h3>
+            </div>
+          </template>
+          <template v-slot:actions>
+            <div class="ml-auto">
+              <v-btn color="primary" small to="/admin/manage-users?tab=groups">
+                <v-icon left>mdi-account-group</v-icon>
+                Manage Groups
+              </v-btn>
+            </div>
+          </template>
+        </StatCard>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import { api } from "@/api";
+import StatCard from "./StatCard";
+export default {
+  components: { StatCard },
+  data() {
+    return {
+      statistics: {
+        totalGroups: 0,
+        totalRecipes: 0,
+        totalUsers: 0,
+        uncategorizedRecipes: 0,
+        untaggedRecipes: 0,
+      },
+    };
+  },
+  mounted() {
+    this.getStatistics();
+  },
+  methods: {
+    async getStatistics() {
+      this.statistics = await api.meta.getStatistics();
+      console.log(this.statistics);
+    },
+  },
+};
+</script>
+
+<style>
+.grid-style {
+  flex-grow: inherit;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+</style>

frontend/src/pages/Admin/ManageUsers/index.vue

@@ -4,30 +4,30 @@
       <v-tabs v-model="tab" background-color="primary" centered dark icons-and-text>
         <v-tabs-slider></v-tabs-slider>
 
-        <v-tab>
+        <v-tab href="#users">
           {{ $t("user.users") }}
           <v-icon>mdi-account</v-icon>
         </v-tab>
 
-        <v-tab>
+        <v-tab href="#sign-ups">
           {{ $t("signup.sign-up-links") }}
           <v-icon>mdi-account-plus-outline</v-icon>
         </v-tab>
 
-        <v-tab>
+        <v-tab href="#groups">
           {{ $t("group.groups") }}
           <v-icon>mdi-account-group</v-icon>
         </v-tab>
       </v-tabs>
 
       <v-tabs-items v-model="tab">
-        <v-tab-item>
+        <v-tab-item value="users">
           <TheUserTable />
         </v-tab-item>
-        <v-tab-item>
+        <v-tab-item value="sign-ups">
           <TheSignUpTable />
         </v-tab-item>
-        <v-tab-item>
+        <v-tab-item value="groups">
           <GroupDashboard />
         </v-tab-item>
       </v-tabs-items>
@@ -42,9 +42,17 @@ import TheSignUpTable from "./TheSignUpTable";
 export default {
   components: { TheUserTable, GroupDashboard, TheSignUpTable },
   data() {
-    return {
+    return {};
-      tab: 0,
+  },
-    };
+  computed: {
+    tab: {
+      set(tab) {
+        this.$router.replace({ query: { ...this.$route.query, tab } });
+      },
+      get() {
+        return this.$route.query.tab;
+      },
+    },
   },
   mounted() {
     this.$store.dispatch("requestAllGroups");

frontend/src/routes/admin.js

@@ -8,6 +8,7 @@ import ManageUsers from "@/pages/Admin/ManageUsers";
 import Settings from "@/pages/Admin/Settings";
 import About from "@/pages/Admin/About";
 import ToolBox from "@/pages/Admin/ToolBox";
+import Dashboard from "@/pages/Admin/Dashboard";
 import { store } from "../store";
 
 export const adminRoutes = {
@@ -87,5 +88,12 @@ export const adminRoutes = {
         title: "general.about",
       },
     },
+    {
+      path: "dashboard",
+      component: Dashboard,
+      meta: {
+        title: "general.dashboard",
+      },
+    },
   ],
 };

mealie/db/database.py

@@ -18,7 +18,6 @@ from mealie.schema.theme import SiteTheme
 from mealie.schema.user import GroupInDB, UserInDB
 from sqlalchemy.orm.session import Session
 
-
 logger = getLogger()
 
 
@@ -35,6 +34,12 @@ class _Recipes(BaseDocument):
 
         return f"{slug}.{extension}"
 
+    def count_uncategorized(self, session: Session) -> int:
+        return session.query(self.sql_model).filter(RecipeModel.recipe_category == None).count()
+
+    def count_untagged(self, session: Session) -> int:
+        return session.query(self.sql_model).filter(RecipeModel.tags == None).count()
+
 
 class _Categories(BaseDocument):
     def __init__(self) -> None:

mealie/db/db_base.py

@@ -154,3 +154,10 @@ class BaseDocument:
         session.commit()
 
         return results_as_model
+
+    def count_all(self, session: Session, match_key=None, match_value=None) -> int:
+
+        if None in [match_key, match_value]:
+            return session.query(self.sql_model).count()
+        else:
+            return session.query(self.sql_model).filter_by(**{match_key: match_value}).count()