From cf1b3f7786227f97c8ca235d357c6594589de5b9 Mon Sep 17 00:00:00 2001
From: Oliver Hofmann <oliver.hofmann@dokoliho.de>
Date: Sun, 10 May 2026 10:20:03 +0200
Subject: [PATCH] Add 5-minute auto-reload and last-updated timestamp to admin
 UI

---
 frontend/src/main.jsx   | 31 ++++++++++++++++++++++++-------
 frontend/src/styles.css | 11 +++++++++++
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 9c1437a..bbb52df 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -222,21 +222,31 @@ function App() {
   const [creating, setCreating] = useState(false);
   const [editKey, setEditKey] = useState(null);
   const [editForm, setEditForm] = useState({});
-
-  useEffect(() => {
-    if (!password) { setLoading(false); return; }
-    fetchApiKeys().finally(() => setLoading(false));
-  }, [password]);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [lastUpdated, setLastUpdated] = useState(null);
 
   const fetchApiKeys = async () => {
     try {
       const res = await axios.get('/api/api-keys', { headers: authHeaders(password) });
       setApiKeys(res.data);
+      setLastUpdated(new Date());
     } catch {
       setError('API-Keys konnten nicht geladen werden.');
     }
   };
 
+  useEffect(() => {
+    if (!password) { setLoading(false); return; }
+    fetchApiKeys().finally(() => setLoading(false));
+
+    const timer = setInterval(() => {
+      fetchApiKeys();
+      setRefreshKey(k => k + 1);
+    }, 5 * 60 * 1000);
+
+    return () => clearInterval(timer);
+  }, [password]);
+
   const handleCreate = async (e) => {
     e.preventDefault();
     setCreating(true);
@@ -328,10 +338,17 @@ function App() {
     <div className="container">
       <div className="header">
         <h1>Ollama Proxy Admin</h1>
-        <button onClick={logout}>Abmelden</button>
+        <div className="header-right">
+          {lastUpdated && (
+            <span className="last-updated">
+              Aktualisiert: {lastUpdated.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
+            </span>
+          )}
+          <button onClick={logout}>Abmelden</button>
+        </div>
       </div>
 
-      <SettingsSection password={password} />
+      <SettingsSection password={password} refreshKey={refreshKey} />
 
       <section>
         <h2>Neuer API-Key</h2>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index b55cfe0..90dff3f 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -486,3 +486,14 @@ tr:hover {
   color: #f5a0a0;
   margin-bottom: 0;
 }
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.last-updated {
+  font-size: 12px;
+  color: #95a5a6;
+}