284 lines
11 KiB
TypeScript
284 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import {
|
|
getDatabaseIntegrity,
|
|
repairDatabaseSchema,
|
|
optimizeDatabaseIndices
|
|
} from "@/lib/actions/admin";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Loader2, RefreshCw, Wrench, Database, AlertTriangle, CheckCircle2, XCircle, Terminal, ArrowLeft } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
interface TableStatus {
|
|
exists: boolean;
|
|
count: number;
|
|
}
|
|
|
|
interface IntegrityData {
|
|
tables: {
|
|
profiles: TableStatus;
|
|
end_customers: TableStatus;
|
|
pos_modules: TableStatus;
|
|
licenses: TableStatus;
|
|
};
|
|
errors: {
|
|
foreign_keys: number;
|
|
};
|
|
}
|
|
|
|
export default function AdminToolsPage() {
|
|
const [integrity, setIntegrity] = useState<IntegrityData | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [logs, setLogs] = useState<string[]>([]);
|
|
const [activeAction, setActiveAction] = useState<string | null>(null);
|
|
|
|
const addLog = (message: string) => {
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
setLogs((prev) => [...prev, `[${timestamp}] ${message}`]);
|
|
};
|
|
|
|
const loadStatus = async (quiet = false) => {
|
|
if (!quiet) setIsLoading(true);
|
|
addLog("Starte Integritätsscan der Datenbank...");
|
|
const res = await getDatabaseIntegrity();
|
|
if (res.success && res.data) {
|
|
setIntegrity(res.data as IntegrityData);
|
|
addLog("Integritätsscan erfolgreich abgeschlossen.");
|
|
} else {
|
|
addLog(`FEHLER beim Scannen: ${res.error}`);
|
|
}
|
|
if (!quiet) setIsLoading(false);
|
|
};
|
|
|
|
const handleRepair = async () => {
|
|
setIsLoading(true);
|
|
setActiveAction("repair");
|
|
addLog("Starte automatische Schemareparatur...");
|
|
const res = await repairDatabaseSchema();
|
|
if (res.success && res.data) {
|
|
const repaired = (res.data as any).repaired || [];
|
|
if (repaired.length > 0) {
|
|
addLog(`Erfolgreich reparierte Tabellen: ${repaired.join(", ")}`);
|
|
} else {
|
|
addLog("Keine fehlenden Tabellen gefunden. Schema intakt.");
|
|
}
|
|
await loadStatus(true);
|
|
} else {
|
|
addLog(`FEHLER bei Schemareparatur: ${res.error}`);
|
|
}
|
|
setIsLoading(false);
|
|
setActiveAction(null);
|
|
};
|
|
|
|
const handleOptimize = async () => {
|
|
setIsLoading(true);
|
|
setActiveAction("optimize");
|
|
addLog("Starte Reindexierung des Schemas public...");
|
|
const res = await optimizeDatabaseIndices();
|
|
if (res.success) {
|
|
addLog("Reindexierung erfolgreich abgeschlossen. Suchindizes neu aufgebaut.");
|
|
} else {
|
|
addLog(`FEHLER bei Reindexierung: ${res.error}`);
|
|
}
|
|
setIsLoading(false);
|
|
setActiveAction(null);
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadStatus();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#020617] text-white px-4 py-12 relative overflow-hidden">
|
|
{/* Background decoration */}
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-blue-600/10 blur-[120px] rounded-full -z-10 opacity-30" />
|
|
|
|
{/* Loading Overlay */}
|
|
{isLoading && (
|
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex flex-col items-center justify-center gap-4">
|
|
<Loader2 className="w-12 h-12 text-primary animate-spin" />
|
|
<p className="text-slate-200 text-lg font-medium">
|
|
{activeAction === "repair"
|
|
? "Schema wird repariert..."
|
|
: activeAction === "optimize"
|
|
? "Datenbank wird indexiert..."
|
|
: "Verbindung zur Datenbank wird aufgebaut..."}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="max-w-5xl mx-auto space-y-8">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/">
|
|
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-white">
|
|
<ArrowLeft className="w-4 h-4 mr-2" /> Startseite
|
|
</Button>
|
|
</Link>
|
|
<div>
|
|
<h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
|
|
<Database className="w-8 h-8 text-primary" />
|
|
Admin Datenbank-Cockpit
|
|
</h1>
|
|
<p className="text-slate-400 text-sm mt-1">
|
|
Verwalten und reparieren Sie Systemtabellen, Sicherheitsrichtlinien (RLS) und Datenbank-Indizes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Controls */}
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
<Card className="glass-dark border-white/10 flex flex-col justify-between">
|
|
<CardHeader>
|
|
<CardTitle className="text-white text-lg flex items-center gap-2">
|
|
<RefreshCw className="w-5 h-5 text-blue-400" />
|
|
Integritätsscan
|
|
</CardTitle>
|
|
<CardDescription className="text-slate-400">
|
|
Prüft die physische Existenz der Tabellen und zählt deren Zeilenanzahl.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<Button
|
|
onClick={() => loadStatus()}
|
|
disabled={isLoading}
|
|
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
|
|
>
|
|
Status aktualisieren
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="glass-dark border-white/10 flex flex-col justify-between">
|
|
<CardHeader>
|
|
<CardTitle className="text-white text-lg flex items-center gap-2">
|
|
<Wrench className="w-5 h-5 text-emerald-400" />
|
|
Schema reparieren
|
|
</CardTitle>
|
|
<CardDescription className="text-slate-400">
|
|
Erstellt fehlende Kerntabellen automatisch neu und konfiguriert die RLS-Rechte.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<Button
|
|
onClick={handleRepair}
|
|
disabled={isLoading}
|
|
className="w-full bg-emerald-600 hover:bg-emerald-700 text-white"
|
|
>
|
|
Schema reparieren
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="glass-dark border-white/10 flex flex-col justify-between">
|
|
<CardHeader>
|
|
<CardTitle className="text-white text-lg flex items-center gap-2">
|
|
<Database className="w-5 h-5 text-amber-400" />
|
|
Index optimieren
|
|
</CardTitle>
|
|
<CardDescription className="text-slate-400">
|
|
Baut korrupte Suchindizes im Schema public mittels REINDEX neu auf.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<Button
|
|
onClick={handleOptimize}
|
|
disabled={isLoading}
|
|
className="w-full bg-amber-600 hover:bg-amber-700 text-white"
|
|
>
|
|
Index optimieren
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Tabellenstatus */}
|
|
<Card className="glass-dark border-white/10">
|
|
<CardHeader>
|
|
<CardTitle className="text-white text-xl">Tabellen-Status & Diagnose</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="grid sm:grid-cols-2 md:grid-cols-4 gap-4">
|
|
{integrity?.tables ? (
|
|
Object.entries(integrity.tables).map(([name, status]) => (
|
|
<div
|
|
key={name}
|
|
className="p-4 rounded-xl border bg-white/5 border-white/10 flex flex-col justify-between gap-2"
|
|
>
|
|
<span className="font-semibold text-slate-300 text-sm capitalize">
|
|
{name.replace("_", " ")}
|
|
</span>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs text-slate-500">Zeilen: {status.count}</span>
|
|
{status.exists ? (
|
|
<Badge className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20 gap-1">
|
|
<CheckCircle2 className="w-3.5 h-3.5" /> OK
|
|
</Badge>
|
|
) : (
|
|
<Badge className="bg-red-500/10 text-red-400 border-red-500/20 gap-1">
|
|
<XCircle className="w-3.5 h-3.5" /> Fehlt
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="col-span-4 py-8 text-center text-slate-500 text-sm">
|
|
Lade Diagnosedaten...
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Foreign Key Errors */}
|
|
{integrity && integrity.errors.foreign_keys > 0 && (
|
|
<div className="p-4 rounded-xl bg-red-500/10 border border-red-500/20 flex gap-3 items-center">
|
|
<AlertTriangle className="w-6 h-6 text-red-400 shrink-0" />
|
|
<div>
|
|
<p className="font-bold text-red-200">Fremdschlüssel-Fehler gefunden!</p>
|
|
<p className="text-red-300/80 text-sm">
|
|
Es wurden {integrity.errors.foreign_keys} verwaiste Lizenzen ohne zugeordneten Endkunden in der Tabelle `licenses` detektiert.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Console / Output logs */}
|
|
<Card className="glass-dark border-white/10">
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle className="text-white text-lg flex items-center gap-2">
|
|
<Terminal className="w-5 h-5 text-primary" />
|
|
Diagnose-Konsole
|
|
</CardTitle>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setLogs([])}
|
|
className="text-slate-400 hover:text-white text-xs"
|
|
>
|
|
Konsole leeren
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<div className="font-mono text-xs bg-black/50 p-4 rounded-xl border border-white/5 h-64 overflow-y-auto space-y-1.5 scrollbar-thin">
|
|
{logs.length === 0 ? (
|
|
<span className="text-slate-600 italic">Konsole bereit. Führen Sie einen Scan aus.</span>
|
|
) : (
|
|
logs.map((log, index) => (
|
|
<div key={index} className={log.includes("FEHLER") ? "text-red-400" : log.includes("Erfolgreich") ? "text-emerald-400" : "text-slate-300"}>
|
|
{log}
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|