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/TileWithLink.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    :class="[
+      'border border-zinc-800 rounded-xl h-full px-6 py-4 relative bg-zinc-950/30',
+      { 'min-h-50 pb-15': link, 'lg:pb-4': !link },
+    ]"
+  >
+    <h1
+      v-if="props.title"
+      :class="[
+        'font-semibold text-lg w-full',
+        { 'mb-3': !props.subtitle && link },
+      ]"
+    >
+      {{ props.title }}
+      <div v-if="rightTitle" class="float-right">{{ props.rightTitle }}</div>
+    </h1>
+    <h2
+      v-if="props.subtitle"
+      :class="['text-zinc-400 text-sm w-full', { 'mb-3': link }]"
+    >
+      {{ props.subtitle }}
+      <div v-if="rightTitle" class="float-right">{{ props.rightTitle }}</div>
+    </h2>
+
+    <slot />
+
+    <div v-if="props.link" class="absolute bottom-5 right-5">
+      <NuxtLink
+        :to="props.link.url"
+        class="transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
+      >
+        {{ props.link.label }}
+        <ArrowRightIcon class="h-4 w-4" aria-hidden="true" />
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ArrowRightIcon } from "@heroicons/vue/20/solid";
+
+const props = defineProps<{
+  title?: string;
+  subtitle?: string;
+  rightTitle?: string;
+  link?: {
+    url: string;
+    label: string;
+  };
+}>();
+</script>