Extend admin for websites/scripts and surface links

frontend/src/components/ToolOverview.jsx

@@ -1,8 +1,26 @@
 import { useNavigate } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import axios from '../services/api';
 
 function ToolOverview() {
   const navigate = useNavigate();
   const role = localStorage.getItem('role');
+  const [websites, setWebsites] = useState([]);
+  const [loadingWebsites, setLoadingWebsites] = useState(true);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const res = await axios.get('/api/websites');
+        setWebsites(res.data);
+      } catch (e) {
+        setWebsites([]);
+      } finally {
+        setLoadingWebsites(false);
+      }
+    };
+    load();
+  }, []);
 
   return (
     <div className="main-content">
@@ -13,6 +31,31 @@ function ToolOverview() {
       {role === 'admin' && (
         <button onClick={() => navigate('/admin')}>🛠️ Admin-Bereich</button>
       )}
+
+      <h3 style={{ marginTop: '24px' }}>🌐 Externe Webseiten</h3>
+      {loadingWebsites ? (
+        <p className="muted">Lade Links...</p>
+      ) : websites.length === 0 ? (
+        <p className="muted">Keine Links angelegt.</p>
+      ) : (
+        <div className="card-grid">
+          {websites.map((w) => (
+            <a
+              key={w.id}
+              className="link-card"
+              href={w.url}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <div className="link-card__icon">🌐</div>
+              <div>
+                <div className="link-card__title">{w.name}</div>
+                <div className="link-card__desc">{w.description || w.url}</div>
+              </div>
+            </a>
+          ))}
+        </div>
+      )}
     </div>
   );
 }