KI-AGENT: Zentralen Push-Server Stack ergänzen

push-server/apps/admin/pages/index.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const pushApi = usePushApi();
+const toast = useToast();
+
+const { data, pending, refresh, error } = await useAsyncData("summary", () => pushApi.request<{
+  instances: number;
+  devices: number;
+  jobs: number;
+  failedJobs: number;
+}>("/admin/summary"), { immediate: false });
+
+onMounted(async () => {
+  pushApi.hydrateToken();
+  if (pushApi.token.value) await refresh();
+});
+
+watch(error, (nextError) => {
+  if (nextError) toast.add({ title: "Dashboard konnte nicht geladen werden", color: "error" });
+});
+</script>
+
+<template>
+  <AdminShell>
+    <TokenGate>
+      <div class="space-y-6">
+        <div class="flex items-center justify-between">
+          <div>
+            <h2 class="text-2xl font-bold text-gray-950">Übersicht</h2>
+            <p class="text-sm text-gray-500">Technischer Zustand des zentralen Push-Gateways.</p>
+          </div>
+          <UButton icon="i-lucide-refresh-cw" variant="soft" :loading="pending" @click="refresh()">Aktualisieren</UButton>
+        </div>
+
+        <div class="grid gap-4 md:grid-cols-4">
+          <UCard>
+            <p class="text-sm text-gray-500">Instanzen</p>
+            <p class="mt-2 text-3xl font-bold">{{ data?.instances ?? 0 }}</p>
+          </UCard>
+          <UCard>
+            <p class="text-sm text-gray-500">Geräte</p>
+            <p class="mt-2 text-3xl font-bold">{{ data?.devices ?? 0 }}</p>
+          </UCard>
+          <UCard>
+            <p class="text-sm text-gray-500">Jobs</p>
+            <p class="mt-2 text-3xl font-bold">{{ data?.jobs ?? 0 }}</p>
+          </UCard>
+          <UCard>
+            <p class="text-sm text-gray-500">Fehler</p>
+            <p class="mt-2 text-3xl font-bold text-red-600">{{ data?.failedJobs ?? 0 }}</p>
+          </UCard>
+        </div>
+      </div>
+    </TokenGate>
+  </AdminShell>
+</template>