Admin platform, with users, transactions, games and admin creation

frontend/src/pages/home/HomePage.vue

@@ -36,6 +36,7 @@ const lbPage = ref(1)
 const lbObserverTarget = ref(null)
 const lbObserver = ref(null)
 const lbMorePages = ref(true)
+const publicStats = ref(null)
 
 const setupGamesObserver = () => {
     if (gObserver.value) gObserver.value.disconnect();
@@ -68,6 +69,15 @@ const getPendingGames = async (mode = selectedMode.value) => {
     }
 }
 
+const fetchPublicStats = async () => {
+    try {
+        const response = await apiStore.getPublicStats()
+        publicStats.value = response.data
+    } catch (error) {
+        console.error("Failed to fetch public stats", error)
+    }
+}
+
 const openStats = async () => {
     showStatsModal.value = true
     statsLoading.value = true
@@ -155,6 +165,7 @@ const toggleReady = () => {
 }
 
 onMounted(async () => {
+    await fetchPublicStats();
     await getPendingGames();
     await nextTick();
     setupGamesObserver();
@@ -166,6 +177,27 @@ onMounted(async () => {
 
         <div class="flex flex-col justify-center items-center gap-5 pt-10 px-4">
 
+            <Card v-if="publicStats" class="w-full max-w-2xl border-[#a855f7] bg-[#f8f0ff] shadow-sm">
+                <CardContent class="p-4">
+                    <div class="flex justify-around items-center">
+                        <div class="text-center">
+                            <p class="text-xs uppercase font-bold opacity-70">Players</p>
+                            <p class="text-xl font-black">{{ publicStats.total_players }}</p>
+                        </div>
+                        <div class="h-8 w-[1px] bg-[#a855f7]/20"></div>
+                        <div class="text-center">
+                            <p class="text-xs uppercase font-bold opacity-70">Total Games</p>
+                            <p class="text-xl font-black">{{ publicStats.total_games }}</p>
+                        </div>
+                        <div class="h-8 w-[1px] bg-[#a855f7]/20"></div>
+                        <div class="text-center">
+                            <p class="text-xs uppercase font-bold opacity-70">Active</p>
+                            <p class="text-xl font-black">{{ publicStats.active_games }}</p>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+
             <div class="relative w-full max-w-md bg-card rounded-lg border shadow-sm overflow-hidden">
                 <div class="relative h-14 flex items-center">