Refactoring and UI improvements on the admin home page (#348)

components/MiniTile.vue

@@ -0,0 +1,28 @@
+<template>
+  <TileWithLink>
+    <div class="h-full flex gap-4">
+      <div class="flex-1 my-auto">
+        <slot name="icon" />
+      </div>
+      <div
+        class="md:flex-8 flex-6 lg:flex-2 my-auto text-center flex md:flex-row-reverse lg:inline"
+      >
+        <div class="md:text-2xl text-3xl flex-1 font-bold self-center">
+          {{ value }}
+        </div>
+        <div
+          class="text-2xl xl:text-xs flex-1 md:flex-auto text-left md:text-center lg:text-center self-center"
+        >
+          {{ label }}
+        </div>
+      </div>
+    </div>
+  </TileWithLink>
+</template>
+
+<script setup lang="ts">
+const { label, value } = defineProps<{
+  label: string;
+  value: string | number;
+}>();
+</script>

components/PieChart/PieChart.vue

@@ -1,34 +1,36 @@
 <template>
   <h2 v-if="title" class="text-lg mb-4 w-full">{{ title }}</h2>
-  <div class="flex flex-col xl:flex-row gap-4">
-    <div class="relative flex grow max-w-[12rem]">
-      <svg class="aspect-square grow relative inline" viewBox="0 0 100 100">
-        <PieChartPieSlice
+  <div class="flex">
+    <div class="flex flex-col md:flex-row xl:gap-4 mx-auto">
+      <div class="relative flex max-w-[12rem] my-auto min-w-50">
+        <svg class="aspect-square grow relative inline" viewBox="0 0 100 100">
+          <PieChartPieSlice
+            v-for="slice in slices"
+            :key="`${slice.percentage}-${slice.totalPercentage}`"
+            :slice="slice"
+          />
+        </svg>
+        <div class="absolute inset-0 bg-zinc-900 rounded-full m-12" />
+      </div>
+      <ul class="flex flex-col gap-y-1 m-auto text-left">
+        <li
           v-for="slice in slices"
-          :key="`${slice.percentage}-${slice.totalPercentage}`"
-          :slice="slice"
-        />
-      </svg>
-      <div class="absolute inset-0 bg-zinc-900 rounded-full m-12" />
+          :key="slice.value"
+          class="text-sm inline-flex items-center gap-x-1"
+        >
+          <span
+            class="size-3 inline-block rounded-sm"
+            :class="CHART_COLOURS[slice.color].bg"
+          />
+          {{
+            $t("common.labelValueColon", {
+              label: slice.label,
+              value: slice.value,
+            })
+          }}
+        </li>
+      </ul>
     </div>
-    <ul class="flex flex-col gap-y-1 my-auto text-left">
-      <li
-        v-for="slice in slices"
-        :key="slice.value"
-        class="text-sm inline-flex items-center gap-x-1"
-      >
-        <span
-          class="size-3 inline-block rounded-sm"
-          :class="CHART_COLOURS[slice.color].bg"
-        />
-        {{
-          $t("common.labelValueColon", {
-            label: slice.label,
-            value: slice.value,
-          })
-        }}
-      </li>
-    </ul>
   </div>
 </template>