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>

components/ProgressBar.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    :class="[
+      'relative h-5 rounded-xl overflow-hidden',
+      CHART_COLOURS[backgroundColor].bg,
+    ]"
+  >
+    <div
+      :style="{ width: `${percentage}%` }"
+      :class="['transition-all h-full', CHART_COLOURS[color].bg]"
+    />
+    <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(percentage * 10) / 10]) }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type ChartColour, CHART_COLOURS } from "~/utils/colors";
+const {
+  percentage,
+  color = "blue",
+  backgroundColor = "zinc",
+} = defineProps<{
+  percentage: number;
+  color?: ChartColour;
+  backgroundColor?: ChartColour;
+}>();
+</script>