Entwicklung der Admin- & Entwickler-Suite
Diese Fähigkeit hilft Ihnen, das Admin-Dashboard zu erweitern und interne Tools gemäß den etablierten Mustern zu erstellen.
ENTSCHEIDUNGSPUNKTE
Wann ein Tab hinzugefügt, ein Endpunkt geändert oder ein neues Tool erstellt werden sollte
Neue Admin-Funktionalität hinzufügen:
├─ Benutzer benötigt eine schreibgeschützte Datenansicht?
│ ├─ Daten existieren in der aktuellen API? → Vorhandenen Tab ändern
│ ├─ Neuer Datentyp erforderlich? → Neuen Tab + neuen Endpunkt hinzufügen
│ └─ Komplexe Analysen erforderlich? → Dedizierten Analysetab erstellen
│
├─ Benutzer muss Systemdaten ändern?
│ ├─ Einfache CRUD-Operationen? → Verwaltungstab hinzufügen
│ ├─ Massenoperationen erforderlich? → Operationskonsolen-Tab erstellen
│ └─ Mehrstufiger Workflow? → Wizard-Komponente erstellen
│
├─ Interne Entwicklertools?
│ ├─ Code-Inspektion/Dokumentation? → Zum /dev-Portal hinzufügen
│ ├─ Systemüberwachung? → Zur /ops-Konsole hinzufügen
│ └─ Benutzer-Support-Tools? → Zum Admin-Dashboard hinzufügen
│
└─ Externe Benutzerfunktionalität?
→ STOP: Verwenden Sie stattdessen die Fähigkeit `frontend-development`
Strategie zur Implementierung von Tab-Inhalten
Bewertung der Tab-Komplexität:
├─ Einfache Statistik-Anzeige (< 5 Metriken)?
│ → StatCard-Rastermuster verwenden
│
├─ Datentabelle mit Filterung?
│ ├─ < 1000 Zeilen? → Clientseitige Filterung
│ └─ > 1000 Zeilen? → Serverseitige Paginierung + Suche
│
├─ Echtzeit-Überwachung?
│ ├─ Aktualisierungen alle 30s+? → SWR mit Aktualisierungsintervall verwenden
│ └─ Aktualisierungen alle 5s-? → WebSocket-Verbindung verwenden
│
└─ Interaktive Steuerelemente?
├─ Einfache Kippschalter/Schaltflächen? → Inline-Aktionen
└─ Komplexe Formulare? → Modale Dialoge + Bestätigungsabläufe
FEHLERFÄLLE
1. Datenbank-Abfrage-Performance-Todesspirale
Symptom: Admin-Dashboard timeout oder lädt langsam (>5 Sekunden) Erkennung: Überwachen Sie /api/admin/*-Antwortzeiten >3s Behebung: Datenbankindizes hinzufügen, Paginierung implementieren, aggregierte Statistiken cachen
-- SCHLECHT: Volltabellenscan
SELECT COUNT(*) FROM pageViews WHERE userId = ?
-- GUT: Indizierte Zeitstempelbereiche verwenden
SELECT COUNT(*) FROM pageViews WHERE createdAt > NOW() - INTERVAL 24 HOUR
2. Veralteter Cache zeigt falsche Daten
Symptom: Admin sieht veraltete Metriken, die nicht mit aktuellen Aktivitäten übereinstimmen Erkennung: Benutzer meldet, dass sich Statistiken nach bekannten Aktionen nicht ändern Behebung: Cache-Invalidierung bei Datenänderungen implementieren, „Zuletzt aktualisiert“-Zeitstempel hinzufügen
// Cache-Busting zu Mutationen hinzufügen
await updateUserData(userId);
await revalidateTag('admin-stats'); // Cache leeren
3. Fehlendes Audit-Logging
Symptom: Admin-Aktionen werden nicht in der auditLog-Tabelle protokolliert Erkennung: Prüfen Sie auditLog-Einträge für Admin-Aktionen der letzten 24h Behebung: Fügen Sie logAdminAction()-Aufrufe zu ALLEN Admin-Endpunkten hinzu
// Erforderlich in jedem Admin-Endpunkt
await logAdminAction(admin.id, AuditAction.USER_DATA_VIEW, 'users', userId);
4. HIPAA-Verstoß: Datenexposition
Symptom: PHI in Fehlermeldungen, Protokollen oder aggregierten Ansichten sichtbar Erkennung: Fehler enthält Benutzer-E-Mail/Telefonnummer/medizinische Daten Behebung: Bereinigen Sie alle Fehlerantworten, verwenden Sie gehashte Identifikatoren in Admin-Ansichten
// SCHLECHT: Gibt Benutzer-E-Mail preis
{ error: "Benutzer [email protected] nicht gefunden" }
// GUT: Verwendet anonyme Identifikatoren
{ error: "Benutzer-ID Hash_123abc nicht gefunden" }
5. Admin-Rechteausweitung
Symptom: Normale Benutzer können auf Admin-Endpunkte zugreifen Erkennung: Nicht-Admin-Benutzer erhält Admin-Daten anstelle eines 403-Fehlers Behebung: Fügen Sie requireAdmin()-Prüfung als erste Zeile jedes Admin-Endpunkts hinzu
export async function GET(request: Request) {
const admin = await requireAdmin(); // Muss ERSTE sein
if (!admin) return Response.json({ error: 'Verboten' }, { status: 403 });
// ... Rest des Handlers
}
ARBEITSBEISPIELE
Hinzufügen eines Produktions-Health-Monitoring-Tabs
Szenario: Fügen Sie eine Echtzeit-API-Health-Überwachung mit Latenzmetriken, Fehlerraten und Dienststatus hinzu.
1. Entscheidungspunkt-Navigation:
- Benutzer benötigt Echtzeit-Überwachung → SWR mit 30s-Aktualisierung verwenden
- Systemdaten, keine Benutzerdaten → Zum Admin-Dashboard hinzufügen
- Neuer Datentyp (API-Metriken) → Neuen Tab + Endpunkt erstellen
2. Implementierungsschritte:
Endpunkt mit erforderlichen Mustern erstellen:
// src/app/api/admin/health/route.ts
export async function GET(request: Request) {
const admin = await requireAdmin(); // Sicherheit zuerst
if (!admin) return Response.json({ error: 'Verboten' }, { status: 403 });
const rateLimitResult = await rateLimiter.check(admin.id); // Ratenbegrenzung
if (!rateLimitResult.allowed) return Response.json({}, { status: 429 });
await logAdminAction(admin.id, 'HEALTH_VIEW', 'metrics', null); // Audit
const metrics = await getHealthMetrics(); // Datenabruf
return Response.json(metrics);
}
Tab-Komponente erstellen:
function ProductionHealthTab() {
const { data: health, error } = useSWR('/api/admin/health', fetcher, {
refreshInterval: 30000 // Echtzeit-Updates
});
return (
<div className="space-y-6">
<div className="grid grid-cols-4 gap-4">
<StatCard label="API-Verfügbarkeit" value="99.9%" status="good" />
<StatCard label="Durchschn. Latenz" value="45ms" trend="down" />
<StatCard label="Fehlerrate" value="0.1%" status="warning" />
<StatCard label="Aktive Dienste" value="12/12" status="good" />
</div>
</div>
);
}
3. Unterschiede zwischen Experten und Anfängern:
- Anfänger übersehen: Audit-Logging, Ratenbegrenzung, HIPAA-sichere Fehlerbehandlung
- Experten beachten: Cache-Invalidierungsstrategie, Leistungsüberwachungseinrichtung, ordnungsgemäße Fehlergrenzen
QUALITÄTSGATES
- Admin-Zugriffskontrolle: requireAdmin()-Prüfung besteht mit Admin-Benutzer, schlägt fehl mit normalem Benutzer
- Ratenbegrenzung: Endpunkt gibt 429 zurück, wenn Ratenlimit überschritten (Standard: 60 req/min)
- Audit-Logging: Admin-Aktion wird mit korrektem Aktionstyp in auditLog-Tabelle protokolliert
- Leistungsbasislinie: Tab lädt in <2 Sekunden mit realistischer Datenmenge
- HIPAA-Compliance: Keine PHI in Fehlermeldungen oder Debug-Ausgaben offengelegt
- Datenvalidierung: Ungültige Anfragen geben korrekte 400-Fehler mit sicheren Nachrichten zurück
- Cache-Verhalten: Daten aktualisieren sich innerhalb von 30 Sekunden nach Backend-Änderungen
- Fehlergrenzen: UI behandelt API-Fehler ordnungsgemäß, ohne abzustürzen
- Mobil responsive: Tab-Layout funktioniert auf Tablet-Bildschirmen (768px+)
- Echtzeit-Updates: Automatische Aktualisierung funktioniert ohne Speicherlecks über 10+ Minuten
GRENZEN DER FÄHIGKEIT
Verwenden Sie diese Fähigkeit NICHT für:
- Externe benutzerorientierte Funktionen → Verwenden Sie stattdessen
frontend-development - Authentifizierungs-/Login-Abläufe → Verwenden Sie stattdessen
auth-security - Datenbankschema-Änderungen → Verwenden Sie stattdessen
database-operations - E-Mail-/Benachrichtigungssysteme → Verwenden Sie stattdessen
communications - API-Ratenbegrenzungskonfiguration → Verwenden Sie stattdessen
backend-api - HIPAA-Compliance-Einrichtung → Verwenden Sie stattdessen
security-compliance - Leistungsoptimierung → Verwenden Sie stattdessen
optimization
Delegieren Sie an andere Fähigkeiten, wenn:
- Öffentliche Benutzerfunktionen hinzugefügt werden →
frontend-development - Benutzerauthentifizierung geändert wird →
auth-security - Neue API-Endpunkte für externe Nutzung erstellt werden →
backend-api - Überwachungsinfrastruktur eingerichtet wird →
devops-infrastructure