Admin home page #128 (#259)

* First iteration on the new PieChart component

* #128 Adds new admin home page

* Fixes code after merging conflicts

* Removes empty file

* Uses real data for admin home page, and improves style

* Reverts debugging code

* Defines missing variable

* Caches user stats data for admin home page

* Typo

* Styles improvements

* Invalidates cache on signup/signin

* Implements top 5 biggest games

* Improves styling

* Improves style

* Using generateManifest to get the proper size

* Reading data from cache

* Removes unnecessary import

* Improves caching mechanism for game sizes

* Removes lint errors

* Replaces piechart tooltip with colors in legend

* Fixes caching

* Fixes caching and slight improvement on pie chart colours

* Fixes a few bugs related to caching

* Fixes bug where app signin didn't refresh cache

* feat: style improvements

* fix: lint

---------

Co-authored-by: DecDuck <declanahofmeyr@gmail.com>

pages/admin/index.vue

@@ -1,6 +1,147 @@
-<template><div /></template>
+<template>
+  <div class="space-y-4">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="text-2xl font-semibold text-zinc-100">
+          {{ t("home.admin.title") }}
+        </h1>
+        <p class="mt-2 text-base text-zinc-400">
+          {{ t("home.admin.subheader") }}
+        </p>
+      </div>
+    </div>
+    <main
+      class="mx-auto max-w-md lg:max-w-none md:max-w-none w-full py-2 text-zinc-100"
+    >
+      <div class="grid grid-cols-6 gap-4">
+        <div class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1">
+          <TileWithLink>
+            <div class="h-full flex">
+              <div class="flex-1 my-auto">
+                <DropLogo />
+              </div>
+              <div
+                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
+              >
+                <div class="text-2xl flex-1 font-bold">{{ version }}</div>
+                <div class="text-xs flex-1 text-left lg:text-center">
+                  {{ t("home.admin.version") }}
+                </div>
+              </div>
+            </div>
+          </TileWithLink>
+        </div>
+
+        <div class="col-span-6 lg:col-span-1 md:col-span-3">
+          <TileWithLink>
+            <div class="h-full flex">
+              <div class="flex-1 my-auto">
+                <GamepadIcon />
+              </div>
+              <div
+                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
+              >
+                <div class="text-3xl flex-1 font-bold">{{ gameCount }}</div>
+                <div class="text-xs flex-1 text-left lg:text-center">
+                  {{ t("home.admin.games") }}
+                </div>
+              </div>
+            </div>
+          </TileWithLink>
+        </div>
+
+        <div
+          class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1 lg:col-start-1 lg:row-start-2"
+        >
+          <TileWithLink>
+            <div class="h-full flex">
+              <div class="flex-1 my-auto">
+                <ServerStackIcon />
+              </div>
+              <div
+                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
+              >
+                <div class="text-3xl flex-1 font-bold">
+                  {{ sources.length }}
+                </div>
+                <div class="text-xs flex-1 text-left lg:text-center">
+                  {{ t("home.admin.librarySources") }}
+                </div>
+              </div>
+            </div>
+          </TileWithLink>
+        </div>
+
+        <div
+          class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1 lg:col-start-2 lg:row-start-2"
+        >
+          <TileWithLink>
+            <div class="h-full flex">
+              <div class="flex-1 my-auto">
+                <UserGroupIcon />
+              </div>
+              <div
+                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
+              >
+                <div class="text-3xl flex-1 font-bold">
+                  {{ userStats.userCount }}
+                </div>
+                <div class="text-xs flex-1 text-left lg:text-center">
+                  {{ t("home.admin.users") }}
+                </div>
+              </div>
+            </div>
+          </TileWithLink>
+        </div>
+
+        <div class="col-span-6 row-span-1 lg:col-span-2 lg:row-span-2">
+          <TileWithLink
+            :link="{
+              url: '/admin/users',
+              label: t('home.admin.goToUsers'),
+            }"
+            :title="t('home.admin.activeInactiveUsers')"
+          >
+            <PieChart :data="pieChartData" />
+          </TileWithLink>
+        </div>
+        <div class="col-span-6">
+          <TileWithLink
+            title="Library"
+            :link="{ url: '/admin/library', label: 'Go to library' }"
+          >
+            <SourceTable :sources="sources" />
+          </TileWithLink>
+        </div>
+        <div class="col-span-6 lg:col-span-2">
+          <TileWithLink
+            :title="t('home.admin.biggestGamesToDownload')"
+            :subtitle="t('home.admin.latestVersionOnly')"
+          >
+            <RankingList :items="biggestGamesLatest.map(gameToRankItem)" />
+          </TileWithLink>
+        </div>
+        <div class="col-span-6 lg:col-span-2">
+          <TileWithLink
+            :title="t('home.admin.biggestGamesOnServer')"
+            :subtitle="t('home.admin.allVersionsCombined')"
+          >
+            <RankingList :items="biggestGamesCombined.map(gameToRankItem)" />
+          </TileWithLink>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
 
 <script setup lang="ts">
+import { formatBytes } from "~/server/internal/utils/files";
+import GamepadIcon from "~/components/Icons/GamepadIcon.vue";
+import DropLogo from "~/components/DropLogo.vue";
+import { ServerStackIcon, UserGroupIcon } from "@heroicons/vue/24/outline";
+import type { GameSize } from "~/server/internal/gamesize";
+import type { RankItem } from "~/components/RankingList.vue";
+
 definePageMeta({
   layout: "admin",
 });
@@ -8,4 +149,29 @@ definePageMeta({
 useHead({
   title: "Home",
 });
+
+const { t } = useI18n();
+
+const {
+  version,
+  gameCount,
+  sources,
+  userStats,
+  biggestGamesLatest,
+  biggestGamesCombined,
+} = await $dropFetch("/api/v1/admin/home");
+
+const gameToRankItem = (game: GameSize, rank: number): RankItem => ({
+  rank: rank + 1,
+  name: game.gameName,
+  value: formatBytes(game.size),
+});
+
+const pieChartData = [
+  {
+    label: t("home.admin.inactiveUsers"),
+    value: userStats.userCount - userStats.activeSessions,
+  },
+  { label: t("home.admin.activeUsers"), value: userStats.activeSessions },
+];
 </script>

pages/admin/library/sources/index.vue

@@ -18,99 +18,12 @@
         </button>
       </div>
     </div>
-    <div class="mt-8 flow-root">
-      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-          <table class="min-w-full divide-y divide-zinc-700">
-            <thead>
-              <tr>
-                <th
-                  scope="col"
-                  class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-3"
-                >
-                  {{ $t("common.name") }}
-                </th>
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                >
-                  {{ $t("type") }}
-                </th>
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                >
-                  {{ $t("library.admin.sources.working") }}
-                </th>
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                >
-                  {{ $t("options") }}
-                </th>
-                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-3">
-                  <span class="sr-only">{{ $t("common.edit") }}</span>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="(source, sourceIdx) in sources"
-                :key="source.id"
-                class="even:bg-zinc-800"
-              >
-                <td
-                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
-                >
-                  {{ source.name }}
-                </td>
-                <td
-                  class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400 inline-flex gap-x-1 items-center"
-                >
-                  <component
-                    :is="optionsMetadata[source.backend].icon"
-                    class="size-5 text-zinc-400"
-                  />
-                  {{ optionsMetadata[source.backend].title }}
-                </td>
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
-                  <CheckIcon
-                    v-if="source.working"
-                    class="size-5 text-green-500"
-                  />
-                  <XMarkIcon v-else class="size-5 text-red-500" />
-                </td>
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
-                  {{ source.options }}
-                </td>
-                <td
-                  class="relative whitespace-nowrap py-4 pl-3 pr-3 text-right text-sm font-medium space-x-2"
-                >
-                  <button
-                    class="text-blue-500 hover:text-blue-400"
-                    @click="() => edit(sourceIdx)"
-                  >
-                    {{ $t("common.edit") }}
-                    <span class="sr-only">
-                      {{ $t("chars.srComma", [source.name]) }}
-                    </span>
-                  </button>
-
-                  <button
-                    class="text-red-500 hover:text-red-400"
-                    @click="() => deleteSource(sourceIdx)"
-                  >
-                    {{ $t("delete") }}
-                    <span class="sr-only">
-                      {{ $t("chars.srComma", [source.name]) }}
-                    </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
+    <div class="mt-4 flow-root">
+      <SourceTable
+        :sources="sources"
+        :edit-source="edit"
+        :delete-source="deleteSource"
+      />
     </div>
 
     <ModalTemplate v-model="actionSourceOpen">
@@ -313,7 +226,7 @@ import {
   XCircleIcon,
   ArrowTopRightOnSquareIcon,
 } from "@heroicons/vue/20/solid";
-import { BackwardIcon, CheckIcon, XMarkIcon } from "@heroicons/vue/24/outline";
+import { BackwardIcon } from "@heroicons/vue/24/outline";
 import { FetchError } from "ofetch";
 import type { Component } from "vue";
 import type { LibraryBackend } from "~/prisma/client/enums";

pages/admin/task/[id]/index.vue

@@ -53,18 +53,7 @@
           :log="parseTaskLog(task.log.at(-(idx + 1)))"
         />
       </div>
-      <div class="relative h-5 rounded-xl bg-zinc-950 overflow-hidden">
-        <div
-          :style="{ width: `${task.progress}%` }"
-          class="transition-all bg-blue-600 h-full"
-        />
-        <span
-          class="absolute inset-0 flex items-center justify-center text-blue-200 text-sm font-bold font-display"
-          >{{
-            $t("tasks.admin.progress", [Math.round(task.progress * 10) / 10])
-          }}</span
-        >
-      </div>
+      <ProgressBar :percentage="task.progress" />
     </div>
     <div v-else role="status" class="w-full flex items-center justify-center">
       <svg

pages/store/[id]/index.vue

@@ -86,6 +86,27 @@
                   >
                 </td>
               </tr>
+              <tr>
+                <td
+                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
+                >
+                  {{ $t("store.size") }}
+                </td>
+                <td
+                  v-if="size"
+                  class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400"
+                >
+                  {{ formatBytes(size) }}
+                </td>
+                <td
+                  v-else
+                  class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400 italic"
+                >
+                  <span class="font-semibold text-blue-600">{{
+                    $t("store.commingSoon")
+                  }}</span>
+                </td>
+              </tr>
               <tr>
                 <td
                   class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
@@ -246,13 +267,14 @@ import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
 import { StarIcon } from "@heroicons/vue/24/solid";
 import { micromark } from "micromark";
 import type { PlatformClient } from "~/composables/types";
+import { formatBytes } from "~/server/internal/utils/files";
 
 const route = useRoute();
 const gameId = route.params.id.toString();
 
 const user = useUser();
 
-const { game, rating } = await $dropFetch(`/api/v1/games/${gameId}`);
+const { game, rating, size } = await $dropFetch(`/api/v1/games/${gameId}`);
 
 // Preview description (first 30 lines)
 const showPreview = ref(true);