Feature: Audit-Log - tracks all user actions with timestamps

frontend/src/App.jsx

@@ -11,6 +11,7 @@ import Customers from './pages/Customers'
 import SettingsPage from './pages/SettingsPage'
 import Tunnels from './pages/Tunnels'
 import Firmware from './pages/Firmware'
+import AuditLog from './pages/AuditLog'
 
 function ProtectedRoute({ children }) {
   const { isAuthenticated, loading } = useAuthStore()
@@ -57,6 +58,7 @@ export default function App() {
           <Route path="customers" element={<Customers />} />
           <Route path="firmware" element={<Firmware />} />
           <Route path="settings" element={<SettingsPage />} />
+          <Route path="audit" element={<AuditLog />} />
         </Route>
       </Routes>
     </BrowserRouter>

frontend/src/api/client.js

@@ -236,6 +236,16 @@ class ApiClient {
     return this.delete(`/api/v1/apikeys/${id}`)
   }
 
+  // Audit Log
+  getAuditLogs(params = {}) {
+    const q = new URLSearchParams()
+    if (params.limit) q.set('limit', params.limit)
+    if (params.offset) q.set('offset', params.offset)
+    if (params.action) q.set('action', params.action)
+    if (params.agent_id) q.set('agent_id', params.agent_id)
+    return this.get(`/api/v1/audit?${q.toString()}`)
+  }
+
   // Firmware
   getFirmwareInfo() {
     return this.get('/api/v1/firmware')

frontend/src/layouts/AppLayout.jsx

@@ -13,6 +13,7 @@ import {
   Cable,
   Download,
   HardDrive,
+  ClipboardList,
 } from 'lucide-react'
 
 const navItems = [
@@ -23,6 +24,7 @@ const navItems = [
   { path: '/firmware', label: 'Firmware', icon: Download },
   { path: '/customers', label: 'Kunden', icon: Users },
   { path: '/settings', label: 'Einstellungen', icon: Settings },
+  { path: '/audit', label: 'Audit-Log', icon: ClipboardList },
 ]
 
 export default function AppLayout() {

frontend/src/pages/AuditLog.jsx

@@ -0,0 +1,185 @@
+import { useState, useEffect, useMemo } from 'react'
+import { ClipboardList, Search, ChevronDown } from 'lucide-react'
+import api from '../api/client'
+
+const ACTION_COLORS = {
+  login: 'bg-blue-500/20 text-blue-400',
+  'tunnel.open': 'bg-green-500/20 text-green-400',
+  'tunnel.close': 'bg-green-500/20 text-green-400',
+  'backup.create': 'bg-yellow-500/20 text-yellow-400',
+  'backup.download': 'bg-yellow-500/20 text-yellow-400',
+  'update.check': 'bg-orange-500/20 text-orange-400',
+  'update.run': 'bg-orange-500/20 text-orange-400',
+  'update.major': 'bg-orange-500/20 text-orange-400',
+  reboot: 'bg-orange-500/20 text-orange-400',
+  'agent.delete': 'bg-red-500/20 text-red-400',
+  'agent.create': 'bg-emerald-500/20 text-emerald-400',
+  'wireguard.add': 'bg-purple-500/20 text-purple-400',
+  'wireguard.delete': 'bg-red-500/20 text-red-400',
+  'firmware.upload': 'bg-cyan-500/20 text-cyan-400',
+  'firmware.update_request': 'bg-orange-500/20 text-orange-400',
+  'firmware.update_all': 'bg-orange-500/20 text-orange-400',
+  exec: 'bg-gray-500/20 text-gray-400',
+  'customer.create': 'bg-emerald-500/20 text-emerald-400',
+  'customer.delete': 'bg-red-500/20 text-red-400',
+  'user.create': 'bg-emerald-500/20 text-emerald-400',
+  'user.delete': 'bg-red-500/20 text-red-400',
+  'password.change': 'bg-amber-500/20 text-amber-400',
+}
+
+const ALL_ACTIONS = Object.keys(ACTION_COLORS)
+
+function timeAgo(dateStr) {
+  const now = new Date()
+  const date = new Date(dateStr)
+  const seconds = Math.floor((now - date) / 1000)
+  if (seconds < 60) return 'gerade eben'
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `vor ${minutes} Min`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `vor ${hours} Std`
+  const days = Math.floor(hours / 24)
+  return `vor ${days} Tag${days > 1 ? 'en' : ''}`
+}
+
+export default function AuditLog() {
+  const [entries, setEntries] = useState([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+  const [actionFilter, setActionFilter] = useState('')
+  const [offset, setOffset] = useState(0)
+  const LIMIT = 100
+
+  const load = async (reset = false) => {
+    try {
+      setLoading(true)
+      const newOffset = reset ? 0 : offset
+      const res = await api.getAuditLogs({ limit: LIMIT, offset: newOffset, action: actionFilter })
+      if (reset) {
+        setEntries(res.data)
+        setOffset(LIMIT)
+      } else {
+        setEntries(prev => [...prev, ...res.data])
+        setOffset(prev => prev + LIMIT)
+      }
+      setTotal(res.total)
+    } catch (e) {
+      console.error('Audit-Log laden fehlgeschlagen:', e)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    load(true)
+  }, [actionFilter])
+
+  const filtered = useMemo(() => {
+    if (!search) return entries
+    const q = search.toLowerCase()
+    return entries.filter(e =>
+      e.user_name.toLowerCase().includes(q) ||
+      e.action.toLowerCase().includes(q) ||
+      (e.target_name || '').toLowerCase().includes(q) ||
+      (e.target_id || '').toLowerCase().includes(q) ||
+      (e.details || '').toLowerCase().includes(q) ||
+      (e.source_ip || '').toLowerCase().includes(q)
+    )
+  }, [entries, search])
+
+  return (
+    <div>
+      <div className="flex items-center gap-3 mb-4">
+        <ClipboardList className="w-5 h-5 text-orange-500" />
+        <h1 className="text-lg font-bold text-white">Audit-Log</h1>
+        <span className="text-xs text-gray-500">{total} Einträge</span>
+      </div>
+
+      {/* Filter */}
+      <div className="flex flex-col sm:flex-row gap-2 mb-4">
+        <div className="relative flex-1">
+          <Search className="absolute left-2.5 top-2 w-4 h-4 text-gray-500" />
+          <input
+            type="text"
+            placeholder="Suchen..."
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            className="w-full pl-8 pr-3 py-1.5 bg-gray-800 border border-gray-700 rounded text-xs text-gray-200 placeholder-gray-500 focus:outline-none focus:border-orange-500"
+          />
+        </div>
+        <div className="relative">
+          <select
+            value={actionFilter}
+            onChange={e => setActionFilter(e.target.value)}
+            className="appearance-none pl-3 pr-8 py-1.5 bg-gray-800 border border-gray-700 rounded text-xs text-gray-200 focus:outline-none focus:border-orange-500"
+          >
+            <option value="">Alle Aktionen</option>
+            {ALL_ACTIONS.map(a => (
+              <option key={a} value={a}>{a}</option>
+            ))}
+          </select>
+          <ChevronDown className="absolute right-2 top-2 w-3 h-3 text-gray-500 pointer-events-none" />
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="overflow-x-auto rounded border border-gray-800">
+        <table className="w-full text-xs">
+          <thead>
+            <tr className="bg-gray-900 text-gray-400 border-b border-gray-800">
+              <th className="px-3 py-2 text-left font-medium">Zeitpunkt</th>
+              <th className="px-3 py-2 text-left font-medium">Benutzer</th>
+              <th className="px-3 py-2 text-left font-medium">Aktion</th>
+              <th className="px-3 py-2 text-left font-medium">Ziel</th>
+              <th className="px-3 py-2 text-left font-medium">Details</th>
+              <th className="px-3 py-2 text-left font-medium">IP</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-800/50">
+            {filtered.map(e => (
+              <tr key={e.id} className="hover:bg-gray-800/30">
+                <td className="px-3 py-1.5 text-gray-400 whitespace-nowrap" title={new Date(e.timestamp).toLocaleString('de-DE')}>
+                  {timeAgo(e.timestamp)}
+                </td>
+                <td className="px-3 py-1.5 text-gray-300">{e.user_name}</td>
+                <td className="px-3 py-1.5">
+                  <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-medium ${ACTION_COLORS[e.action] || 'bg-gray-500/20 text-gray-400'}`}>
+                    {e.action}
+                  </span>
+                </td>
+                <td className="px-3 py-1.5 text-gray-400 max-w-[200px] truncate" title={`${e.target_type || ''} ${e.target_name || e.target_id || ''}`}>
+                  {e.target_name || e.target_id || '-'}
+                </td>
+                <td className="px-3 py-1.5 text-gray-500 max-w-[250px] truncate" title={e.details}>
+                  {e.details || '-'}
+                </td>
+                <td className="px-3 py-1.5 text-gray-500 whitespace-nowrap">{e.source_ip || '-'}</td>
+              </tr>
+            ))}
+            {filtered.length === 0 && !loading && (
+              <tr>
+                <td colSpan={6} className="px-3 py-6 text-center text-gray-500">
+                  Keine Einträge
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Load more */}
+      {entries.length < total && (
+        <div className="mt-3 text-center">
+          <button
+            onClick={() => load(false)}
+            disabled={loading}
+            className="px-4 py-1.5 bg-gray-800 hover:bg-gray-700 text-gray-300 text-xs rounded border border-gray-700 disabled:opacity-50"
+          >
+            {loading ? 'Laden...' : `Mehr laden (${entries.length}/${total})`}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}