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

@@ -0,0 +1,43 @@
+<template>
+  <table v-if="items.length > 0" class="w-full mt-4 space-y-6">
+    <thead>
+      <tr>
+        <th></th>
+        <th></th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-white/10">
+      <tr v-for="item in items" :key="`${item.rank}-${item.name}`">
+        <td
+          class="my-2 size-7 rounded-sm bg-zinc-950 ring ring-zinc-800 inline-flex items-center justify-center font-bold font-display text-blue-500"
+        >
+          {{ item.rank }}
+        </td>
+        <td class="w-full font-bold px-2">{{ item.name }}</td>
+        <td
+          class="text-right text-sm font-semibold text-zinc-500 whitespace-nowrap"
+        >
+          {{ item.value }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <p
+    v-else
+    class="w-full p-2 text-center uppercase text-sm font-display font-bold text-zinc-700"
+  >
+    {{ $t("common.noData") }}
+  </p>
+</template>
+
+<script lang="ts" setup>
+export type RankItem = {
+  rank: number;
+  name: string;
+  value: string;
+};
+const { items } = defineProps<{
+  items: RankItem[];
+}>();
+</script>