Init first files

frontend/src/pages/DashboardPage.jsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { apiFetch } from "../api";
+import { useAuth } from "../state";
+
+export function DashboardPage() {
+  const { tokens, refresh } = useAuth();
+  const [targets, setTargets] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let active = true;
+    (async () => {
+      try {
+        const data = await apiFetch("/targets", {}, tokens, refresh);
+        if (active) setTargets(data);
+      } catch (e) {
+        if (active) setError(String(e.message || e));
+      } finally {
+        if (active) setLoading(false);
+      }
+    })();
+    return () => {
+      active = false;
+    };
+  }, [tokens, refresh]);
+
+  if (loading) return <div className="card">Lade Dashboard...</div>;
+  if (error) return <div className="card error">{error}</div>;
+
+  return (
+    <div>
+      <h2>Dashboard Overview</h2>
+      <div className="grid three">
+        <div className="card stat">
+          <strong>{targets.length}</strong>
+          <span>Targets</span>
+        </div>
+        <div className="card stat">
+          <strong>{targets.length}</strong>
+          <span>Status OK (placeholder)</span>
+        </div>
+        <div className="card stat">
+          <strong>0</strong>
+          <span>Alerts (placeholder)</span>
+        </div>
+      </div>
+      <div className="card">
+        <h3>Targets</h3>
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Host</th>
+              <th>DB</th>
+              <th>Aktion</th>
+            </tr>
+          </thead>
+          <tbody>
+            {targets.map((t) => (
+              <tr key={t.id}>
+                <td>{t.name}</td>
+                <td>{t.host}:{t.port}</td>
+                <td>{t.dbname}</td>
+                <td><Link to={`/targets/${t.id}`}>Details</Link></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}