Add MVP operational readiness checks

components/settings/operations-readiness.tsx

@@ -0,0 +1,61 @@
+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>
+  );
+}