feat: Phase 1 – Plattform-Grundgerüst (Docker, NestJS, React, Auth)

apps/platform-frontend/src/features/admin/system-status-page.tsx

@@ -0,0 +1,88 @@
+import { type ReactNode } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { apiRequest } from '../../lib/api-client';
+import { healthSchema, type Health } from '../../lib/schemas';
+import { Card, CardBody, CardHeader } from '../../components/ui/card';
+import { Badge } from '../../components/ui/badge';
+import { ErrorState, Spinner } from '../../components/ui/states';
+
+/** Admin-Seite: detaillierter Systemstatus der Plattform. */
+export function SystemStatusPage(): ReactNode {
+  const healthQuery = useQuery({
+    queryKey: ['health'],
+    queryFn: async (): Promise<Health> =>
+      healthSchema.parse(await apiRequest('/api/v1/health')),
+    refetchInterval: 30_000,
+  });
+
+  return (
+    <div className="mx-auto max-w-4xl space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-slate-900">Systemstatus</h1>
+        <p className="mt-1 text-sm text-slate-500">
+          Zustand aller Plattform-Komponenten (aktualisiert alle 30 Sekunden).
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader title="Komponenten" />
+        <CardBody>
+          {healthQuery.isLoading && <Spinner />}
+          {healthQuery.isError && (
+            <ErrorState message="Der Health-Endpoint ist nicht erreichbar." />
+          )}
+          {healthQuery.data && (
+            <div className="space-y-3">
+              <StatusRow
+                label="Management-Backend"
+                variant={healthQuery.data.components.backend === 'healthy' ? 'success' : 'danger'}
+                status={healthQuery.data.components.backend === 'healthy' ? 'Healthy' : 'Unhealthy'}
+              />
+              <StatusRow
+                label="PostgreSQL"
+                variant={
+                  healthQuery.data.components.database.status === 'healthy'
+                    ? 'success'
+                    : 'danger'
+                }
+                status={
+                  healthQuery.data.components.database.status === 'healthy'
+                    ? `Healthy · ${healthQuery.data.components.database.latencyMs} ms`
+                    : 'Unhealthy'
+                }
+              />
+              <div className="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3">
+                <span className="text-sm font-medium text-slate-700">Plattform-Version</span>
+                <span className="text-sm text-slate-500">{healthQuery.data.version}</span>
+              </div>
+              <div className="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3">
+                <span className="text-sm font-medium text-slate-700">Uptime</span>
+                <span className="text-sm text-slate-500">
+                  {Math.floor(healthQuery.data.uptimeSeconds / 60)} Minuten
+                </span>
+              </div>
+            </div>
+          )}
+        </CardBody>
+      </Card>
+    </div>
+  );
+}
+
+/** Zeile im Systemstatus. */
+function StatusRow({
+  label,
+  status,
+  variant,
+}: {
+  label: string;
+  status: string;
+  variant: 'success' | 'danger';
+}): ReactNode {
+  return (
+    <div className="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3">
+      <span className="text-sm font-medium text-slate-700">{label}</span>
+      <Badge variant={variant}>{status}</Badge>
+    </div>
+  );
+}