62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
import { AlertTriangle, CheckCircle2 } from "lucide-react";
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import type { IntegrationReadinessRow } from "@/lib/operational-readiness";
|
|
|
|
type OperationsReadinessProps = {
|
|
rows: IntegrationReadinessRow[];
|
|
};
|
|
|
|
export function OperationsReadiness({ rows }: OperationsReadinessProps) {
|
|
return (
|
|
<section className="space-y-4">
|
|
<header className="border-b pb-3">
|
|
<p className="text-sm text-muted-foreground">MVP-Betrieb</p>
|
|
<h1 className="mt-2 text-3xl font-semibold tracking-normal">
|
|
Einstellungen
|
|
</h1>
|
|
</header>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Integrationsstatus</CardTitle>
|
|
<CardDescription>
|
|
Diese Übersicht zeigt nur fehlende Variablennamen und keine Secret-Werte.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-3 md:grid-cols-2">
|
|
{rows.map((row) => {
|
|
const isConfigured = row.status === "configured";
|
|
const Icon = isConfigured ? CheckCircle2 : AlertTriangle;
|
|
|
|
return (
|
|
<article className="rounded-lg border p-4" key={row.id}>
|
|
<div className="flex items-start gap-3">
|
|
<Icon
|
|
aria-hidden
|
|
className={isConfigured ? "mt-0.5 size-5 text-emerald-600" : "mt-0.5 size-5 text-amber-600"}
|
|
/>
|
|
<div className="min-w-0">
|
|
<h2 className="text-base font-semibold">{row.label}</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{isConfigured ? "Konfiguration vorhanden" : "Konfiguration fehlt"}
|
|
</p>
|
|
{row.missingEnv.length > 0 ? (
|
|
<p className="mt-2 break-words text-xs text-muted-foreground">
|
|
Fehlend: {row.missingEnv.join(", ")}
|
|
</p>
|
|
) : null}
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
{row.errorSurface}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
})}
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
);
|
|
}
|