1

2026-05-17 10:14:14 -06:00
parent d8773b2508
commit 64b3d15b90
61 changed files with 7612 additions and 0 deletions
@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { api, API_URL, SettingsStatus } from "@/lib/api";
+import { Shell } from "@/components/Shell";
+import { Card } from "@/components/ui";
+
+export default function SettingsPage() {
+  const [settings, setSettings] = useState<SettingsStatus | null>(null);
+  const [apiOk, setApiOk] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    Promise.all([api.health(), api.settings()]).then(([, status]) => {
+      setApiOk(true); setSettings(status);
+    }).catch((err) => setError(err.message));
+  }, []);
+
+  return (
+    <Shell>
+      <h1 className="text-4xl font-bold">Configuracion</h1>
+      <div className="mt-6 grid gap-4 lg:grid-cols-2">
+        <Card>
+          <h2 className="text-xl font-semibold">Estado</h2>
+          <div className="mt-4 space-y-3 text-sm">
+            <Row label="API" value={apiOk ? "Activa" : "No disponible"} ok={apiOk} />
+            <Row label="Deepgram" value={settings?.deepgram_configured ? "Configurado" : "Falta DEEPGRAM_API_KEY"} ok={!!settings?.deepgram_configured} />
+            <Row label="Mistral" value={settings?.mistral_configured ? "Configurado" : "Falta MISTRAL_API_KEY"} ok={!!settings?.mistral_configured} />
+          </div>
+          {error && <p className="mt-4 text-sm text-red-300">{error}</p>}
+        </Card>
+        <Card>
+          <h2 className="text-xl font-semibold">Rutas</h2>
+          <div className="mt-4 space-y-3 text-sm text-slate-300">
+            <p><span className="text-slate-500">API:</span> {API_URL}</p>
+            <p><span className="text-slate-500">Datos:</span> {settings?.data_dir || "-"}</p>
+            <p><span className="text-slate-500">SQLite:</span> {settings?.database_path || "-"}</p>
+          </div>
+        </Card>
+      </div>
+      <Card className="mt-4">
+        <h2 className="text-xl font-semibold">API Keys</h2>
+        <p className="mt-3 text-slate-400">Configura las claves en el archivo <code className="rounded bg-slate-900 px-2 py-1">.env</code>. No se muestran ni editan desde la UI para evitar pegarlas accidentalmente en capturas o commits.</p>
+      </Card>
+    </Shell>
+  );
+}
+
+function Row({ label, value, ok }: { label: string; value: string; ok: boolean }) {
+  return <div className="flex justify-between gap-4"><span>{label}</span><span className={ok ? "text-emerald-300" : "text-amber-300"}>{value}</span></div>;
+}