- {/* Row 1: Weather placeholders */}
-
-
-
-
-
-
- {/* Row 2: Info cards */}
-
-
-
-
-
-
-
- {/* Row 3: News */}
-
-
-
- {Array.from({ length: 8 }).map((_, i) => (
-
- ))}
-
-
-
+ {/* Mobile header */}
+
+
+
+
Admin Panel
+
+
+
+
+
+
+ {/* Sidebar */}
+
+
+ {/* Overlay for mobile sidebar */}
+ {sidebarOpen && (
+
setSidebarOpen(false)}
+ />
+ )}
+
+ {/* Main content */}
+
+
+
+
+
+
+
+ );
+}
diff --git a/web/src/admin/LoginPage.tsx b/web/src/admin/LoginPage.tsx
new file mode 100644
index 0000000..808891d
--- /dev/null
+++ b/web/src/admin/LoginPage.tsx
@@ -0,0 +1,113 @@
+import { useState, FormEvent } from "react";
+import { useNavigate } from "react-router-dom";
+import { Lock, User, AlertCircle, Loader2 } from "lucide-react";
+import { login, isAuthenticated } from "./api";
+
+export default function LoginPage() {
+ const navigate = useNavigate();
+ const [username, setUsername] = useState("");
+ const [password, setPassword] = useState("");
+ const [error, setError] = useState("");
+ const [loading, setLoading] = useState(false);
+
+ // Redirect if already logged in
+ if (isAuthenticated()) {
+ navigate("/admin", { replace: true });
+ return null;
+ }
+
+ const handleSubmit = async (e: FormEvent) => {
+ e.preventDefault();
+ setError("");
+ setLoading(true);
+
+ try {
+ await login(username, password);
+ navigate("/admin", { replace: true });
+ } catch (err: any) {
+ setError(err.message || "Login fehlgeschlagen");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+ {/* Logo / Title */}
+
+
+
+
+
Daily Briefing
+
Admin Panel
+
+
+ {/* Login Card */}
+
+
+
+ Daily Briefing v2.1 — Admin
+
+
+
+ );
+}
diff --git a/web/src/admin/api.ts b/web/src/admin/api.ts
new file mode 100644
index 0000000..fb0b5b7
--- /dev/null
+++ b/web/src/admin/api.ts
@@ -0,0 +1,218 @@
+/**
+ * Admin API client with JWT token management.
+ * Stores the token in localStorage and automatically attaches it to requests.
+ */
+
+const API_BASE = "/api";
+const TOKEN_KEY = "admin_token";
+const USERNAME_KEY = "admin_user";
+
+// ---------------------------------------------------------------------------
+// Token Management
+// ---------------------------------------------------------------------------
+
+export function getToken(): string | null {
+ return localStorage.getItem(TOKEN_KEY);
+}
+
+export function getUsername(): string | null {
+ return localStorage.getItem(USERNAME_KEY);
+}
+
+export function setAuth(token: string, username: string): void {
+ localStorage.setItem(TOKEN_KEY, token);
+ localStorage.setItem(USERNAME_KEY, username);
+}
+
+export function clearAuth(): void {
+ localStorage.removeItem(TOKEN_KEY);
+ localStorage.removeItem(USERNAME_KEY);
+}
+
+export function isAuthenticated(): boolean {
+ return !!getToken();
+}
+
+// ---------------------------------------------------------------------------
+// HTTP helpers
+// ---------------------------------------------------------------------------
+
+async function authFetch(path: string, options: RequestInit = {}): Promise
{
+ const token = getToken();
+ const headers: Record = {
+ "Content-Type": "application/json",
+ ...(options.headers as Record || {}),
+ };
+ if (token) {
+ headers["Authorization"] = `Bearer ${token}`;
+ }
+
+ const res = await fetch(`${API_BASE}${path}`, { ...options, headers });
+
+ if (res.status === 401 || res.status === 403) {
+ clearAuth();
+ window.location.href = "/admin/login";
+ throw new Error("Sitzung abgelaufen");
+ }
+
+ return res;
+}
+
+async function fetchJSON(path: string): Promise {
+ const res = await authFetch(path);
+ if (!res.ok) {
+ const body = await res.json().catch(() => ({}));
+ throw new Error(body.detail || `Fehler: ${res.status}`);
+ }
+ return res.json();
+}
+
+async function putJSON(path: string, data: unknown): Promise {
+ const res = await authFetch(path, {
+ method: "PUT",
+ body: JSON.stringify(data),
+ });
+ if (!res.ok) {
+ const body = await res.json().catch(() => ({}));
+ throw new Error(body.detail || `Fehler: ${res.status}`);
+ }
+ return res.json();
+}
+
+async function postJSON(path: string, data?: unknown): Promise {
+ const res = await authFetch(path, {
+ method: "POST",
+ body: data ? JSON.stringify(data) : undefined,
+ });
+ if (!res.ok) {
+ const body = await res.json().catch(() => ({}));
+ throw new Error(body.detail || `Fehler: ${res.status}`);
+ }
+ return res.json();
+}
+
+async function deleteJSON(path: string): Promise {
+ const res = await authFetch(path, { method: "DELETE" });
+ if (!res.ok) {
+ const body = await res.json().catch(() => ({}));
+ throw new Error(body.detail || `Fehler: ${res.status}`);
+ }
+ return res.json();
+}
+
+// ---------------------------------------------------------------------------
+// Auth API
+// ---------------------------------------------------------------------------
+
+export async function login(username: string, password: string): Promise<{ token: string; username: string }> {
+ const res = await fetch(`${API_BASE}/auth/login`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ username, password }),
+ });
+ if (!res.ok) {
+ const body = await res.json().catch(() => ({}));
+ throw new Error(body.detail || "Login fehlgeschlagen");
+ }
+ const data = await res.json();
+ setAuth(data.token, data.username);
+ return data;
+}
+
+export async function verifyToken(): Promise {
+ try {
+ await fetchJSON("/auth/me");
+ return true;
+ } catch {
+ return false;
+ }
+}
+
+export async function changePassword(currentPassword: string, newPassword: string): Promise {
+ await putJSON("/auth/password", {
+ current_password: currentPassword,
+ new_password: newPassword,
+ });
+}
+
+// ---------------------------------------------------------------------------
+// Settings API
+// ---------------------------------------------------------------------------
+
+export interface AppSettings {
+ [key: string]: { value: string; value_type: string; category: string; label: string; description: string };
+}
+
+export async function getSettings(): Promise {
+ return fetchJSON("/admin/settings");
+}
+
+export async function updateSettings(settings: Record): Promise {
+ await putJSON("/admin/settings", { settings });
+}
+
+// ---------------------------------------------------------------------------
+// Integrations API
+// ---------------------------------------------------------------------------
+
+export interface Integration {
+ id: number;
+ type: string;
+ name: string;
+ config: Record;
+ enabled: boolean;
+ display_order: number;
+}
+
+export async function getIntegrations(): Promise {
+ return fetchJSON("/admin/integrations");
+}
+
+export async function getIntegration(type: string): Promise {
+ return fetchJSON(`/admin/integrations/${type}`);
+}
+
+export async function updateIntegration(
+ type: string,
+ data: { name?: string; config?: Record; enabled?: boolean; display_order?: number }
+): Promise {
+ return putJSON(`/admin/integrations/${type}`, data);
+}
+
+export async function testIntegration(type: string): Promise<{ success: boolean; message: string }> {
+ return postJSON(`/admin/integrations/${type}/test`);
+}
+
+// ---------------------------------------------------------------------------
+// MQTT Subscriptions API
+// ---------------------------------------------------------------------------
+
+export interface MqttSubscription {
+ id: number;
+ topic_pattern: string;
+ display_name: string;
+ category: string;
+ unit: string;
+ widget_type: string;
+ enabled: boolean;
+ display_order: number;
+}
+
+export async function getMqttSubscriptions(): Promise {
+ return fetchJSON("/admin/mqtt/subscriptions");
+}
+
+export async function createMqttSubscription(data: Omit): Promise {
+ return postJSON("/admin/mqtt/subscriptions", data);
+}
+
+export async function updateMqttSubscription(
+ id: number,
+ data: Partial>
+): Promise {
+ return putJSON(`/admin/mqtt/subscriptions/${id}`, data);
+}
+
+export async function deleteMqttSubscription(id: number): Promise {
+ await deleteJSON(`/admin/mqtt/subscriptions/${id}`);
+}
diff --git a/web/src/admin/components/FormField.tsx b/web/src/admin/components/FormField.tsx
new file mode 100644
index 0000000..9ab3fcc
--- /dev/null
+++ b/web/src/admin/components/FormField.tsx
@@ -0,0 +1,63 @@
+interface Props {
+ label: string;
+ description?: string;
+ children: React.ReactNode;
+}
+
+export default function FormField({ label, description, children }: Props) {
+ return (
+
+
+ {description &&
{description}
}
+ {children}
+
+
+
+ {message && (
+
+ {message}
+
+ )}
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
WebSocket Intervall
+
+
+
+
+
+
+
Cache TTLs (Sekunden)
+
Wie lange gecachte Daten gültig sind bevor sie neu geladen werden
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {error && (
+
+ )}
+
+
+
+
+
+
+ );
+ }
+
+ if (error || !integration) {
+ return (
+
+
+
+
{error || "Integration nicht gefunden"}
+
+
+
+
+
+
+ {(config, setConfig) => (
+ <>
+
+ setConfig("url", v)}
+ placeholder="http://10.10.10.50:8123"
+ />
+
+
+
+ setConfig("token", v)}
+ type="password"
+ placeholder="eyJhbGciOi..."
+ />
+
+
+ )}
+
+
+
+
+
+ );
+ }
+
+ if (error && !integration) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+ {/* Broker Config */}
+ {integration && (
+
+
Broker-Verbindung
+
+ {(config, setConfig) => (
+ <>
+
+
+ setConfig("host", v)}
+ placeholder="z.B. 10.10.10.50"
+ />
+
+
+ setConfig("port", v)}
+ min={1}
+ max={65535}
+ />
+
+
+
+
+
+ setConfig("username", v)}
+ />
+
+
+ setConfig("password", v)}
+ type="password"
+ />
+
+
+
+
+ setConfig("client_id", v)}
+ placeholder="daily-briefing"
+ />
+
+
+ )}
+
+
+ )}
+
+ {/* Subscriptions */}
+
+
+
+
+
+
Topic-Subscriptions
+ {subscriptions.length} Topics
+
+
+ {/* Existing subscriptions */}
+
+ {subscriptions.map((sub) => (
+
+
+
+
+
{sub.display_name || sub.topic_pattern}
+
{sub.topic_pattern}
+
+
+
+ {sub.category}
+
+
+ {sub.unit && (
+
{sub.unit}
+ )}
+
+
+
+ ))}
+
+ {subscriptions.length === 0 && !adding && (
+
+ Keine Subscriptions konfiguriert. Füge einen MQTT-Topic hinzu um Daten zu empfangen.
+
+ )}
+
+
+ {/* Add new */}
+ {adding ? (
+
+
Neuer Topic
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
+ )}
+
+ {error && (
+
+ )}
+
+
+
+ );
+ }
+
+ if (error || !integration) {
+ return (
+
+
+
+
{error || "Integration nicht gefunden"}
+
+
+
+
+
+
+ {(config, setConfig) => (
+ <>
+
+ setConfig("db_host", v)}
+ placeholder="z.B. 10.10.10.100"
+ />
+
+
+
+
+ setConfig("db_port", v)}
+ min={1}
+ max={65535}
+ />
+
+
+ setConfig("db_name", v)}
+ placeholder="market_news"
+ />
+
+
+
+
+
+ setConfig("db_user", v)}
+ placeholder="postgres"
+ />
+
+
+ setConfig("db_password", v)}
+ type="password"
+ />
+
+
+
+
+ setConfig("max_age_hours", v)}
+ min={1}
+ max={720}
+ />
+
+
+ )}
+
+
+
+
+
+ );
+ }
+
+ if (error && !integration) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+
+ {/* Enable toggle */}
+
+
+
Unraid Integration
+
{enabled ? "Aktiv" : "Deaktiviert"}
+
+
+
+
+
+ {/* Server list */}
+ {servers.map((srv, idx) => (
+
+
+ Server #{idx + 1}
+
+
+
+
+
+ updateServer(idx, "name", v)}
+ placeholder="z.B. Main Server"
+ />
+
+
+ updateServer(idx, "host", v)}
+ placeholder="z.B. 10.10.10.100"
+ />
+
+
+ updateServer(idx, "api_key", v)}
+ type="password"
+ />
+
+
+ updateServer(idx, "port", v)}
+ min={1}
+ max={65535}
+ />
+
+
+
+ ))}
+
+ {/* Add server button */}
+
+
+
+ {error && (
+
+ )}
+
+ {/* Actions */}
+
+
+
+ {integration && }
+
+
+
+
+
+ );
+ }
+
+ if (error || !integration) {
+ return (
+
+
+
+
{error || "Integration nicht gefunden"}
+
+
+
+
+
+
+ {(config, setConfig) => (
+ <>
+
+ setConfig("url", v)}
+ placeholder="http://10.10.10.50:3456"
+ />
+
+
+
+ setConfig("token", v)}
+ type="password"
+ placeholder="tk_..."
+ />
+
+
+
+ setConfig("private_projects", v)}
+ placeholder="z.B. 1,5,12"
+ />
+
+
+
+ setConfig("sams_projects", v)}
+ placeholder="z.B. 3,8"
+ />
+
+
+ )}
+
+
+
+
+
+ );
+ }
+
+ if (error || !integration) {
+ return (
+
+
+
+
{error || "Integration nicht gefunden"}
+
+
+
+
+
+
+ {(config, setConfig) => (
+ <>
+
+ setConfig("primary_location", v)}
+ placeholder="z.B. Berlin oder 52.52,13.405"
+ />
+
+
+
+ setConfig("secondary_location", v)}
+ placeholder="z.B. München oder 48.137,11.576"
+ />
+
+
+ )}
+
+
+
+ {error && (
+
+
+
{error}
+
+
+ )}
+
+
+
+
+
Daily Briefing
+
+
+
+
+
+
+
+
+
+
+
+
+ {loading && !data ? (
+
+ ) : data ? (
+ <>
+
+
+
+ {data.servers.servers.map((srv) => (
+
+ ))}
+
+
+
+
+ {(data.mqtt?.connected || (data.mqtt?.entities?.length ?? 0) > 0) && (
+
+ )}
+
+
+
+
+
+ ) : null}
+
+
+
+
+ {connected ? "Live" : "Offline"}
+
+ {connected ?
:
}
+
+
+
+
+
+
+
+ {Array.from({ length: 4 }).map((_, i) => )}
+
+
+
+
+ {Array.from({ length: 8 }).map((_, i) => )}
+
+
+