Frontend: Firewall-Tabelle mit CPU/RAM/Disk/Uptime/Gateways, sortierbar, Slide-in Detail-Panel mit Tabs (Uebersicht, Interfaces, Dienste, VPN, Routen, DHCP, Zertifikate, Backups)

backend/api/handlers.go

@@ -50,6 +50,7 @@ func (h *Handler) SetupRoutes(mux *http.ServeMux, hub *ws.Hub) {
 	// User-Routes
 	mux.HandleFunc("GET /api/v1/users", h.listUsers)
 	mux.HandleFunc("POST /api/v1/users", h.createUser)
+	mux.HandleFunc("PUT /api/v1/users/{id}/password", h.changePassword)
 	mux.HandleFunc("DELETE /api/v1/users/{id}", h.deleteUser)
 
 	// WebSocket und Tunnel-Routes

backend/api/users.go

@@ -39,6 +39,31 @@ func (h *Handler) createUser(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, http.StatusCreated, u)
 }
 
+// PUT /api/v1/users/{id}/password
+func (h *Handler) changePassword(w http.ResponseWriter, r *http.Request) {
+	id, err := strconv.Atoi(r.PathValue("id"))
+	if err != nil {
+		writeError(w, http.StatusBadRequest, "Ungueltige ID")
+		return
+	}
+	var req struct {
+		Password string `json:"password"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil || req.Password == "" {
+		writeError(w, http.StatusBadRequest, "password ist erforderlich")
+		return
+	}
+	if len(req.Password) < 6 {
+		writeError(w, http.StatusBadRequest, "Passwort muss mindestens 6 Zeichen lang sein")
+		return
+	}
+	if err := h.db.ChangePassword(id, req.Password); err != nil {
+		writeError(w, http.StatusInternalServerError, "Passwort aendern fehlgeschlagen")
+		return
+	}
+	writeJSON(w, http.StatusOK, map[string]string{"message": "Passwort geaendert"})
+}
+
 // DELETE /api/v1/users/{id}
 func (h *Handler) deleteUser(w http.ResponseWriter, r *http.Request) {
 	id, err := strconv.Atoi(r.PathValue("id"))

backend/db/users.go

@@ -73,6 +73,15 @@ func (d *Database) UpdateUserLastLogin(id int) error {
 	return err
 }
 
+func (d *Database) ChangePassword(id int, newPassword string) error {
+	hash, err := bcrypt.GenerateFromPassword([]byte(newPassword), bcrypt.DefaultCost)
+	if err != nil {
+		return err
+	}
+	_, err = d.db.Exec("UPDATE users SET password_hash = $1 WHERE id = $2", string(hash), id)
+	return err
+}
+
 func (d *Database) DeleteUser(id int) (bool, error) {
 	res, err := d.db.Exec("DELETE FROM users WHERE id = $1", id)
 	if err != nil {

frontend/src/components/AgentPanel.jsx

@@ -0,0 +1,497 @@
+import { useEffect, useState } from 'react'
+import api from '../api/client'
+import StatusBadge from './StatusBadge'
+import {
+  X, Cpu, MemoryStick, HardDrive, Clock, Network, Shield, Route,
+  Globe, Key, Download, Terminal, Wifi,
+} from 'lucide-react'
+
+const tabs = [
+  { id: 'overview', label: 'Uebersicht' },
+  { id: 'interfaces', label: 'Interfaces' },
+  { id: 'services', label: 'Dienste' },
+  { id: 'vpn', label: 'VPN' },
+  { id: 'routes', label: 'Routen' },
+  { id: 'dhcp', label: 'DHCP' },
+  { id: 'certs', label: 'Zertifikate' },
+  { id: 'backups', label: 'Backups' },
+]
+
+export default function AgentPanel({ agentId, customers, onClose, onReload }) {
+  const [data, setData] = useState(null)
+  const [tab, setTab] = useState('overview')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    setLoading(true)
+    setTab('overview')
+    api.getAgent(agentId).then(setData).finally(() => setLoading(false))
+  }, [agentId])
+
+  useEffect(() => {
+    if (!data) return
+    const iv = setInterval(() => {
+      api.getAgent(agentId).then(setData)
+    }, 30000)
+    return () => clearInterval(iv)
+  }, [agentId, data])
+
+  if (loading) return <Panel onClose={onClose}><div className="p-6 text-gray-500">Laden...</div></Panel>
+  if (!data) return <Panel onClose={onClose}><div className="p-6 text-red-400">Nicht gefunden</div></Panel>
+
+  const { agent, system_data: sys, status } = data
+  const cust = agent.customer_id ? customers.find((c) => c.id === agent.customer_id) : null
+
+  return (
+    <Panel onClose={onClose}>
+      {/* Header */}
+      <div className="px-6 py-4 bg-gradient-to-r from-gray-800 to-gray-900 border-b border-gray-700">
+        <div className="flex items-start justify-between">
+          <div>
+            <div className="flex items-center gap-3">
+              <h2 className="text-lg font-bold text-white">{agent.name}</h2>
+              <StatusBadge status={status} />
+            </div>
+            {cust && (
+              <div className="text-sm text-orange-400 mt-0.5">{cust.number} — {cust.name}</div>
+            )}
+            <div className="text-xs text-gray-500 mt-1">
+              {agent.hostname} &middot; IP: {agent.ip} &middot; {sys?.opnsense_version || agent.opnsense_version || '—'}
+            </div>
+          </div>
+          <button onClick={onClose} className="text-gray-400 hover:text-white">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex gap-1 mt-4 overflow-x-auto text-xs">
+          {tabs.map((t) => (
+            <button
+              key={t.id}
+              onClick={() => setTab(t.id)}
+              className={`px-3 py-1.5 rounded-t whitespace-nowrap transition-colors ${
+                tab === t.id
+                  ? 'bg-gray-900 text-orange-400 border-t border-x border-gray-700'
+                  : 'text-gray-400 hover:text-gray-200'
+              }`}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-6 space-y-4">
+        {!sys ? (
+          <div className="text-gray-500">Keine Systemdaten</div>
+        ) : tab === 'overview' ? (
+          <OverviewTab sys={sys} />
+        ) : tab === 'interfaces' ? (
+          <InterfacesTab sys={sys} />
+        ) : tab === 'services' ? (
+          <ServicesTab sys={sys} />
+        ) : tab === 'vpn' ? (
+          <VPNTab sys={sys} />
+        ) : tab === 'routes' ? (
+          <RoutesTab sys={sys} />
+        ) : tab === 'dhcp' ? (
+          <DHCPTab sys={sys} />
+        ) : tab === 'certs' ? (
+          <CertsTab sys={sys} />
+        ) : tab === 'backups' ? (
+          <BackupsTab agentId={agentId} />
+        ) : null}
+      </div>
+    </Panel>
+  )
+}
+
+function Panel({ onClose, children }) {
+  return (
+    <>
+      <div className="fixed inset-0 z-40 bg-black/50" onClick={onClose} />
+      <div className="fixed inset-y-0 right-0 z-50 w-full max-w-3xl bg-gray-900 border-l border-gray-800 flex flex-col shadow-2xl animate-slide-in">
+        {children}
+      </div>
+      <style>{`
+        @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
+        .animate-slide-in { animation: slideIn 0.2s ease-out; }
+      `}</style>
+    </>
+  )
+}
+
+function MetricCard({ icon: Icon, label, value, sub, bar, barColor }) {
+  return (
+    <div className="bg-gray-800/50 rounded-lg border border-gray-700/50 p-4">
+      <div className="flex items-center gap-2 text-gray-500 mb-2">
+        {Icon && <Icon className="w-4 h-4" />}
+        <span className="text-xs uppercase">{label}</span>
+      </div>
+      <div className="text-xl font-bold text-white">{value}</div>
+      {sub && <div className="text-xs text-gray-500 mt-0.5">{sub}</div>}
+      {bar !== undefined && bar !== null && (
+        <div className="mt-2 h-1.5 bg-gray-700 rounded overflow-hidden">
+          <div className={`h-full rounded ${barColor || 'bg-blue-500'}`} style={{ width: `${Math.min(bar, 100)}%` }} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function OverviewTab({ sys }) {
+  const rootDisk = sys.disks?.find((d) => d.mount_point === '/')
+  const diskPct = rootDisk && rootDisk.total_bytes > 0
+    ? (rootDisk.used_bytes / rootDisk.total_bytes * 100) : null
+  const ramPct = sys.memory?.total_bytes > 0
+    ? (sys.memory.used_bytes / sys.memory.total_bytes * 100) : null
+  const cpuPct = sys.cpu?.usage_percent
+
+  const barColor = (v) => v > 90 ? 'bg-red-500' : v > 70 ? 'bg-yellow-500' : v > 50 ? 'bg-orange-500' : 'bg-green-500'
+
+  const ifaceCount = sys.network_interfaces?.filter((i) => i.status === 'active' || i.status === 'up').length || 0
+  const gwCount = sys.gateways?.length || 0
+  const wgCount = sys.wireguard_peers?.length || 0
+  const routeCount = sys.routes?.length || 0
+  const certCount = sys.certificates?.length || 0
+  const svcRunning = sys.services?.filter((s) => s.running).length || 0
+  const svcTotal = sys.services?.length || 0
+
+  return (
+    <>
+      <h3 className="text-sm font-medium text-gray-300">System-Metriken</h3>
+      <div className="grid grid-cols-2 gap-3">
+        <MetricCard icon={Cpu} label="CPU Auslastung" value={cpuPct != null ? `${cpuPct.toFixed(1)}%` : '—'}
+          sub={sys.cpu?.model} bar={cpuPct} barColor={barColor(cpuPct || 0)} />
+        <MetricCard icon={MemoryStick} label="RAM Auslastung" value={ramPct != null ? `${ramPct.toFixed(1)}%` : '—'}
+          sub={sys.memory ? `${formatBytes(sys.memory.used_bytes)} / ${formatBytes(sys.memory.total_bytes)}` : ''}
+          bar={ramPct} barColor={barColor(ramPct || 0)} />
+        <MetricCard icon={HardDrive} label="Festplatte" value={diskPct != null ? `${diskPct.toFixed(1)}%` : '—'}
+          sub={rootDisk ? `${formatBytes(rootDisk.used_bytes)} / ${formatBytes(rootDisk.total_bytes)}` : ''}
+          bar={diskPct} barColor={barColor(diskPct || 0)} />
+        <MetricCard icon={Clock} label="Uptime" value={sys.uptime_seconds ? formatUptime(sys.uptime_seconds) : '—'} />
+      </div>
+
+      <h3 className="text-sm font-medium text-gray-300 mt-4">Firewall Status</h3>
+      <div className="grid grid-cols-4 gap-3">
+        <StatusCard icon={Shield} value={sys.opnsense_version || '—'} label="OPNsense" />
+        <StatusCard icon={Network} value={ifaceCount} label="Interfaces" />
+        <StatusCard icon={Globe} value={gwCount} label="Gateways" />
+        <StatusCard icon={Wifi} value={wgCount} label="VPN Tunnel" />
+        <StatusCard icon={Route} value={routeCount} label="Routen" />
+        <StatusCard icon={Key} value={certCount} label="Zertifikate" />
+        <StatusCard value={`${svcRunning}/${svcTotal}`} label="Dienste" />
+      </div>
+
+      {/* Gateways */}
+      {sys.gateways && sys.gateways.length > 0 && (
+        <>
+          <h3 className="text-sm font-medium text-gray-300 mt-4">Gateways</h3>
+          <div className="bg-gray-800/50 rounded-lg border border-gray-700/50 overflow-hidden">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="text-left text-gray-500 text-xs border-b border-gray-700">
+                  <th className="px-3 py-2">Name</th>
+                  <th className="px-3 py-2">Gateway</th>
+                  <th className="px-3 py-2">Status</th>
+                  <th className="px-3 py-2">RTT</th>
+                  <th className="px-3 py-2">Loss</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-700/50">
+                {sys.gateways.map((gw) => (
+                  <tr key={gw.name}>
+                    <td className="px-3 py-2 text-white">{gw.name}</td>
+                    <td className="px-3 py-2 text-gray-400">{gw.gateway}</td>
+                    <td className="px-3 py-2">
+                      <span className={gw.status === 'none' ? 'text-green-400' : 'text-yellow-400'}>
+                        {gw.status === 'none' ? 'OK' : gw.status}
+                      </span>
+                    </td>
+                    <td className="px-3 py-2 text-gray-400">{gw.delay || '—'}</td>
+                    <td className="px-3 py-2 text-gray-400">{gw.loss || '—'}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </>
+      )}
+    </>
+  )
+}
+
+function StatusCard({ icon: Icon, value, label }) {
+  return (
+    <div className="bg-gray-800/50 rounded-lg border border-gray-700/50 p-3 text-center">
+      {Icon && <Icon className="w-5 h-5 mx-auto text-gray-500 mb-1" />}
+      <div className="text-lg font-bold text-white">{value}</div>
+      <div className="text-xs text-gray-500">{label}</div>
+    </div>
+  )
+}
+
+function InterfacesTab({ sys }) {
+  const ifaces = sys.network_interfaces || []
+  return (
+    <div className="bg-gray-800/50 rounded-lg border border-gray-700/50 overflow-hidden">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="text-left text-gray-500 text-xs border-b border-gray-700">
+            <th className="px-3 py-2">Interface</th>
+            <th className="px-3 py-2">Status</th>
+            <th className="px-3 py-2">MAC</th>
+            <th className="px-3 py-2">Adressen</th>
+            <th className="px-3 py-2">RX</th>
+            <th className="px-3 py-2">TX</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-700/50">
+          {ifaces.map((i) => (
+            <tr key={i.name}>
+              <td className="px-3 py-2 text-white font-mono text-xs">{i.name}</td>
+              <td className="px-3 py-2">
+                <span className={`text-xs ${i.status === 'active' || i.status === 'up' ? 'text-green-400' : 'text-gray-500'}`}>
+                  {i.status || '—'}
+                </span>
+              </td>
+              <td className="px-3 py-2 text-gray-400 font-mono text-xs">{i.mac || '—'}</td>
+              <td className="px-3 py-2 text-gray-400 text-xs">
+                {i.addresses && i.addresses.length > 0
+                  ? i.addresses.join(', ')
+                  : '—'}
+              </td>
+              <td className="px-3 py-2 text-gray-400 text-xs">{formatBytes(i.rx_bytes)}</td>
+              <td className="px-3 py-2 text-gray-400 text-xs">{formatBytes(i.tx_bytes)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function ServicesTab({ sys }) {
+  const services = sys.services || []
+  const running = services.filter((s) => s.running)
+  const stopped = services.filter((s) => !s.running)
+  return (
+    <div className="space-y-3">
+      <div className="text-sm text-gray-400">{running.length} aktiv / {stopped.length} inaktiv</div>
+      <div className="flex flex-wrap gap-2">
+        {services.map((svc) => (
+          <span
+            key={svc.name}
+            className={`text-xs px-2 py-1 rounded ${
+              svc.running
+                ? 'bg-green-900/30 text-green-400 border border-green-800/50'
+                : 'bg-gray-800 text-gray-500 border border-gray-700'
+            }`}
+          >
+            {svc.name}
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function VPNTab({ sys }) {
+  const peers = sys.wireguard_peers || []
+  if (peers.length === 0) return <div className="text-gray-500">Keine WireGuard-Peers</div>
+  return (
+    <div className="bg-gray-800/50 rounded-lg border border-gray-700/50 overflow-hidden">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="text-left text-gray-500 text-xs border-b border-gray-700">
+            <th className="px-3 py-2">Interface</th>
+            <th className="px-3 py-2">Public Key</th>
+            <th className="px-3 py-2">Endpoint</th>
+            <th className="px-3 py-2">Transfer</th>
+            <th className="px-3 py-2">Last Handshake</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-700/50">
+          {peers.map((p, i) => (
+            <tr key={i}>
+              <td className="px-3 py-2 text-white font-mono text-xs">{p.interface || '—'}</td>
+              <td className="px-3 py-2 text-gray-400 font-mono text-xs">{(p.public_key || '—').substring(0, 16)}...</td>
+              <td className="px-3 py-2 text-gray-400 text-xs">{p.endpoint || '—'}</td>
+              <td className="px-3 py-2 text-gray-400 text-xs">
+                {p.transfer_rx ? `RX: ${formatBytes(p.transfer_rx)} / TX: ${formatBytes(p.transfer_tx)}` : '—'}
+              </td>
+              <td className="px-3 py-2 text-gray-400 text-xs">{p.latest_handshake || '—'}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function RoutesTab({ sys }) {
+  const routes = sys.routes || []
+  if (routes.length === 0) return <div className="text-gray-500">Keine Routen</div>
+  return (
+    <div className="bg-gray-800/50 rounded-lg border border-gray-700/50 overflow-hidden">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="text-left text-gray-500 text-xs border-b border-gray-700">
+            <th className="px-3 py-2">Ziel</th>
+            <th className="px-3 py-2">Gateway</th>
+            <th className="px-3 py-2">Flags</th>
+            <th className="px-3 py-2">Interface</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-700/50">
+          {routes.map((r, i) => (
+            <tr key={i}>
+              <td className="px-3 py-2 text-white font-mono text-xs">{r.destination}</td>
+              <td className="px-3 py-2 text-gray-400 font-mono text-xs">{r.gateway}</td>
+              <td className="px-3 py-2 text-gray-400 text-xs">{r.flags}</td>
+              <td className="px-3 py-2 text-gray-400 text-xs">{r.interface_name || r.iface}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function DHCPTab({ sys }) {
+  const leases = sys.dhcp_leases || []
+  if (leases.length === 0) return <div className="text-gray-500">Keine DHCP Leases</div>
+  return (
+    <div className="bg-gray-800/50 rounded-lg border border-gray-700/50 overflow-hidden">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="text-left text-gray-500 text-xs border-b border-gray-700">
+            <th className="px-3 py-2">IP</th>
+            <th className="px-3 py-2">MAC</th>
+            <th className="px-3 py-2">Hostname</th>
+            <th className="px-3 py-2">Ablauf</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-700/50">
+          {leases.map((l, i) => (
+            <tr key={i}>
+              <td className="px-3 py-2 text-white font-mono text-xs">{l.ip || l.address}</td>
+              <td className="px-3 py-2 text-gray-400 font-mono text-xs">{l.mac || l.hwaddr}</td>
+              <td className="px-3 py-2 text-gray-400 text-xs">{l.hostname || '—'}</td>
+              <td className="px-3 py-2 text-gray-400 text-xs">{l.expires || l.expire || '—'}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function CertsTab({ sys }) {
+  const certs = sys.certificates || []
+  if (certs.length === 0) return <div className="text-gray-500">Keine Zertifikate</div>
+  return (
+    <div className="bg-gray-800/50 rounded-lg border border-gray-700/50 overflow-hidden">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="text-left text-gray-500 text-xs border-b border-gray-700">
+            <th className="px-3 py-2">Name</th>
+            <th className="px-3 py-2">Aussteller</th>
+            <th className="px-3 py-2">Gueltig bis</th>
+            <th className="px-3 py-2">Typ</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-700/50">
+          {certs.map((c, i) => {
+            const expires = c.not_after ? new Date(c.not_after) : null
+            const isExpired = expires && expires < new Date()
+            const soonExpires = expires && !isExpired && (expires - new Date()) < 30 * 86400000
+            return (
+              <tr key={i}>
+                <td className="px-3 py-2 text-white text-xs">{c.name || c.subject || '—'}</td>
+                <td className="px-3 py-2 text-gray-400 text-xs">{c.issuer || '—'}</td>
+                <td className={`px-3 py-2 text-xs ${isExpired ? 'text-red-400' : soonExpires ? 'text-yellow-400' : 'text-gray-400'}`}>
+                  {expires ? expires.toLocaleDateString('de-DE') : '—'}
+                </td>
+                <td className="px-3 py-2 text-gray-400 text-xs">{c.type || (c.is_ca ? 'CA' : 'Cert')}</td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function BackupsTab({ agentId }) {
+  const [backups, setBackups] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    api.getBackups(agentId).then(setBackups).catch(() => {}).finally(() => setLoading(false))
+  }, [agentId])
+
+  const triggerBackup = async () => {
+    await api.triggerBackup(agentId)
+    setTimeout(() => {
+      api.getBackups(agentId).then(setBackups)
+    }, 3000)
+  }
+
+  if (loading) return <div className="text-gray-500">Laden...</div>
+  return (
+    <div className="space-y-3">
+      <button
+        onClick={triggerBackup}
+        className="flex items-center gap-1.5 px-3 py-1.5 bg-orange-600 hover:bg-orange-700 rounded text-sm text-white"
+      >
+        <Download className="w-4 h-4" />
+        Backup jetzt erstellen
+      </button>
+      {backups.length === 0 ? (
+        <div className="text-gray-500">Keine Backups vorhanden</div>
+      ) : (
+        <div className="bg-gray-800/50 rounded-lg border border-gray-700/50 overflow-hidden">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="text-left text-gray-500 text-xs border-b border-gray-700">
+                <th className="px-3 py-2">ID</th>
+                <th className="px-3 py-2">Erstellt</th>
+                <th className="px-3 py-2">Groesse</th>
+                <th className="px-3 py-2">Hash</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-700/50">
+              {backups.map((b) => (
+                <tr key={b.id}>
+                  <td className="px-3 py-2 text-white">{b.id}</td>
+                  <td className="px-3 py-2 text-gray-400 text-xs">{new Date(b.created_at).toLocaleString('de-DE')}</td>
+                  <td className="px-3 py-2 text-gray-400">{formatBytes(b.size)}</td>
+                  <td className="px-3 py-2 text-gray-500 font-mono text-xs">{(b.hash || '').substring(0, 16)}...</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function formatBytes(bytes) {
+  if (!bytes || bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`
+}
+
+function formatUptime(seconds) {
+  const d = Math.floor(seconds / 86400)
+  const h = Math.floor((seconds % 86400) / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  if (d > 0) return `${d}d ${h}h ${m}m`
+  return `${h}h ${m}m`
+}

frontend/src/pages/Agents.jsx

@@ -1,109 +1,220 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo } from 'react'
-import { Link } from 'react-router-dom'
 import api from '../api/client'
 import StatusBadge from '../components/StatusBadge'
-import { Search } from 'lucide-react'
+import AgentPanel from '../components/AgentPanel'
+import { Search, ChevronUp, ChevronDown } from 'lucide-react'
 
 export default function Agents() {
   const [agents, setAgents] = useState([])
   const [customers, setCustomers] = useState([])
   const [search, setSearch] = useState('')
   const [loading, setLoading] = useState(true)
+  const [sortKey, setSortKey] = useState('customer')
+  const [sortDir, setSortDir] = useState('asc')
+  const [selectedId, setSelectedId] = useState(null)
 
-  useEffect(() => {
+  const reload = () => {
     Promise.all([api.getAgents(), api.getCustomers()])
       .then(([a, c]) => {
         setAgents(a || [])
         setCustomers(c || [])
       })
       .finally(() => setLoading(false))
+  }
+
+  useEffect(() => {
+    reload()
+    const iv = setInterval(reload, 30000)
+    return () => clearInterval(iv)
   }, [])
 
-  const customerMap = {}
+  const customerMap = useMemo(() => {
-  customers.forEach((c) => (customerMap[c.id] = c))
+    const m = {}
+    customers.forEach((c) => (m[c.id] = c))
+    return m
+  }, [customers])
 
-  const filtered = agents.filter((a) => {
+  // Enrich agents with system data summaries
-    const q = search.toLowerCase()
+  const [agentDetails, setAgentDetails] = useState({})
-    const cust = a.customer_id ? customerMap[a.customer_id] : null
+
-    return (
+  useEffect(() => {
-      a.name.toLowerCase().includes(q) ||
+    agents.forEach((a) => {
-      a.ip.toLowerCase().includes(q) ||
+      if (!agentDetails[a.id]) {
-      a.hostname.toLowerCase().includes(q) ||
+        api.getAgent(a.id).then((d) => {
-      (cust && (cust.name.toLowerCase().includes(q) || cust.number.toLowerCase().includes(q)))
+          setAgentDetails((prev) => ({ ...prev, [a.id]: d }))
-    )
+        })
-  })
+      }
+    })
+  }, [agents])
+
+  const toggleSort = (key) => {
+    if (sortKey === key) {
+      setSortDir(sortDir === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortKey(key)
+      setSortDir('asc')
+    }
+  }
+
+  const enriched = useMemo(() => {
+    return agents.map((a) => {
+      const detail = agentDetails[a.id]
+      const sys = detail?.system_data
+      const cust = a.customer_id ? customerMap[a.customer_id] : null
+      const rootDisk = sys?.disks?.find((d) => d.mount_point === '/')
+      const diskPct = rootDisk && rootDisk.total_bytes > 0
+        ? (rootDisk.used_bytes / rootDisk.total_bytes * 100)
+        : null
+      const ramPct = sys?.memory?.total_bytes > 0
+        ? (sys.memory.used_bytes / sys.memory.total_bytes * 100)
+        : null
+      const gateways = sys?.gateways || []
+
+      return {
+        ...a,
+        customer: cust,
+        customerName: cust?.name || '',
+        customerNumber: cust?.number || '',
+        cpuPct: sys?.cpu?.usage_percent ?? null,
+        ramPct,
+        diskPct,
+        uptime: sys?.uptime_seconds || 0,
+        version: sys?.opnsense_version || a.opnsense_version || '',
+        gateways,
+        sys,
+      }
+    })
+  }, [agents, agentDetails, customerMap])
+
+  const filtered = useMemo(() => {
+    let list = enriched
+    if (search) {
+      const q = search.toLowerCase()
+      list = list.filter((a) =>
+        a.name.toLowerCase().includes(q) ||
+        a.ip.toLowerCase().includes(q) ||
+        a.hostname.toLowerCase().includes(q) ||
+        a.customerName.toLowerCase().includes(q) ||
+        a.customerNumber.toLowerCase().includes(q)
+      )
+    }
+    list.sort((a, b) => {
+      let va, vb
+      switch (sortKey) {
+        case 'customer': va = a.customerNumber; vb = b.customerNumber; break
+        case 'name': va = a.name; vb = b.name; break
+        case 'ip': va = a.ip; vb = b.ip; break
+        case 'version': va = a.version; vb = b.version; break
+        case 'uptime': return sortDir === 'asc' ? a.uptime - b.uptime : b.uptime - a.uptime
+        case 'cpu': return sortDir === 'asc' ? (a.cpuPct ?? 999) - (b.cpuPct ?? 999) : (b.cpuPct ?? -1) - (a.cpuPct ?? -1)
+        case 'ram': return sortDir === 'asc' ? (a.ramPct ?? 999) - (b.ramPct ?? 999) : (b.ramPct ?? -1) - (a.ramPct ?? -1)
+        case 'disk': return sortDir === 'asc' ? (a.diskPct ?? 999) - (b.diskPct ?? 999) : (b.diskPct ?? -1) - (a.diskPct ?? -1)
+        case 'status': va = a.status; vb = b.status; break
+        default: va = a.name; vb = b.name
+      }
+      if (typeof va === 'string') {
+        const cmp = va.localeCompare(vb)
+        return sortDir === 'asc' ? cmp : -cmp
+      }
+      return 0
+    })
+    return list
+  }, [enriched, search, sortKey, sortDir])
+
+  const SortHeader = ({ label, k, className = '' }) => (
+    <th
+      className={`px-3 py-2 font-medium cursor-pointer hover:text-gray-300 select-none ${className}`}
+      onClick={() => toggleSort(k)}
+    >
+      <span className="inline-flex items-center gap-1">
+        {label}
+        {sortKey === k && (sortDir === 'asc' ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />)}
+      </span>
+    </th>
+  )
 
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <h1 className="text-xl font-bold text-white">Firewalls</h1>
+        <h1 className="text-xl font-bold text-white">Firewalls ({agents.length})</h1>
-        <span className="text-sm text-gray-500">{agents.length} gesamt</span>
       </div>
 
-      {/* Search */}
+      <div className="flex items-center gap-3">
-      <div className="relative">
+        <div className="relative flex-1">
-        <Search className="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
+          <Search className="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
-        <input
+          <input
-          type="text"
+            type="text"
-          placeholder="Suchen (Name, IP, Kunde)..."
+            placeholder="Suchen (Name, IP, Kunde)..."
-          value={search}
+            value={search}
-          onChange={(e) => setSearch(e.target.value)}
+            onChange={(e) => setSearch(e.target.value)}
-          className="w-full bg-gray-900 border border-gray-800 rounded pl-10 pr-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-orange-500"
+            className="w-full bg-gray-900 border border-gray-800 rounded pl-10 pr-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-orange-500"
-        />
+          />
+        </div>
       </div>
 
       {loading ? (
         <div className="text-gray-500">Laden...</div>
       ) : (
-        <div className="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden">
+        <div className="bg-gray-900 rounded-lg border border-gray-800 overflow-x-auto">
-          <table className="w-full text-sm">
+          <table className="w-full text-sm whitespace-nowrap">
             <thead>
-              <tr className="border-b border-gray-800 text-left text-gray-500">
+              <tr className="border-b border-gray-800 text-left text-gray-500 text-xs">
-                <th className="px-4 py-2 font-medium">Status</th>
+                <th className="px-3 py-2 font-medium w-8"></th>
-                <th className="px-4 py-2 font-medium">Name</th>
+                <SortHeader label="KUNDE" k="customer" />
-                <th className="px-4 py-2 font-medium hidden md:table-cell">IP</th>
+                <SortHeader label="NAME" k="name" />
-                <th className="px-4 py-2 font-medium hidden lg:table-cell">Version</th>
+                <th className="px-3 py-2 font-medium">HOSTNAME</th>
-                <th className="px-4 py-2 font-medium hidden lg:table-cell">Kunde</th>
+                <SortHeader label="VERSION" k="version" />
-                <th className="px-4 py-2 font-medium hidden md:table-cell">Letzter Heartbeat</th>
+                <th className="px-3 py-2 font-medium">WAN IP</th>
+                <SortHeader label="UPTIME" k="uptime" />
+                <SortHeader label="CPU" k="cpu" />
+                <SortHeader label="RAM" k="ram" />
+                <SortHeader label="DISK" k="disk" />
+                <th className="px-3 py-2 font-medium">LAST RESPONSE</th>
+                <th className="px-3 py-2 font-medium">GATEWAYS</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-gray-800">
-              {filtered.map((agent) => {
+              {filtered.map((a) => (
-                const cust = agent.customer_id ? customerMap[agent.customer_id] : null
+                <tr
-                return (
+                  key={a.id}
-                  <tr
+                  onClick={() => setSelectedId(a.id)}
-                    key={agent.id}
+                  className={`hover:bg-gray-800/50 transition-colors cursor-pointer ${selectedId === a.id ? 'bg-gray-800/70' : ''}`}
-                    className="hover:bg-gray-800/50 transition-colors cursor-pointer"
+                >
-                  >
+                  <td className="px-3 py-2"><StatusBadge status={a.status} size="dot" /></td>
-                    <td className="px-4 py-2.5">
+                  <td className="px-3 py-2 text-gray-400">
-                      <StatusBadge status={agent.status} />
+                    {a.customer ? <span className="text-orange-400">{a.customerNumber}</span> : <span className="text-gray-600">—</span>}
-                    </td>
+                  </td>
-                    <td className="px-4 py-2.5">
+                  <td className="px-3 py-2 text-white font-medium">{a.name}</td>
-                      <Link to={`/agents/${agent.id}`} className="text-white hover:text-orange-400">
+                  <td className="px-3 py-2 text-gray-400 text-xs">{a.hostname}</td>
-                        {agent.name}
+                  <td className="px-3 py-2 text-gray-400">{a.version || '—'}</td>
-                      </Link>
+                  <td className="px-3 py-2 text-gray-400">{a.ip}</td>
-                    </td>
+                  <td className="px-3 py-2 text-gray-400">{a.uptime ? formatUptime(a.uptime) : '—'}</td>
-                    <td className="px-4 py-2.5 text-gray-400 hidden md:table-cell">{agent.ip}</td>
+                  <td className="px-3 py-2">
-                    <td className="px-4 py-2.5 text-gray-400 hidden lg:table-cell">
+                    <MiniBar value={a.cpuPct} />
-                      {agent.opnsense_version || '—'}
+                  </td>
-                    </td>
+                  <td className="px-3 py-2">
-                    <td className="px-4 py-2.5 hidden lg:table-cell">
+                    <MiniBar value={a.ramPct} />
-                      {cust ? (
+                  </td>
-                        <span className="text-gray-400">
+                  <td className="px-3 py-2">
-                          <span className="text-orange-400">{cust.number}</span> {cust.name}
+                    <MiniBar value={a.diskPct} />
-                        </span>
+                  </td>
-                      ) : (
+                  <td className="px-3 py-2 text-gray-500 text-xs">
-                        <span className="text-gray-600">—</span>
+                    {a.last_heartbeat ? new Date(a.last_heartbeat).toLocaleString('de-DE') : '—'}
-                      )}
+                  </td>
-                    </td>
+                  <td className="px-3 py-2">
-                    <td className="px-4 py-2.5 text-gray-500 text-xs hidden md:table-cell">
+                    {a.gateways.length > 0 ? (
-                      {agent.last_heartbeat
+                      <div className="flex flex-col gap-0.5">
-                        ? new Date(agent.last_heartbeat).toLocaleString('de-DE')
+                        {a.gateways.map((gw) => (
-                        : '—'}
+                          <span key={gw.name} className="inline-flex items-center gap-1 text-xs">
-                    </td>
+                            <span className={`w-1.5 h-1.5 rounded-full ${gw.status === 'none' ? 'bg-green-500' : 'bg-yellow-500'}`} />
-                  </tr>
+                            <span className="text-gray-400">{gw.name}</span>
-                )
+                          </span>
-              })}
+                        ))}
+                      </div>
+                    ) : '—'}
+                  </td>
+                </tr>
+              ))}
             </tbody>
           </table>
           {filtered.length === 0 && (
@@ -113,6 +224,37 @@ export default function Agents() {
           )}
         </div>
       )}
+
+      {/* Detail Panel */}
+      {selectedId && (
+        <AgentPanel
+          agentId={selectedId}
+          customers={customers}
+          onClose={() => setSelectedId(null)}
+          onReload={reload}
+        />
+      )}
     </div>
   )
 }
+
+function MiniBar({ value }) {
+  if (value === null || value === undefined) return <span className="text-gray-600 text-xs">—</span>
+  const color = value > 90 ? 'bg-red-500' : value > 70 ? 'bg-yellow-500' : value > 50 ? 'bg-blue-500' : 'bg-green-500'
+  return (
+    <div className="flex items-center gap-1.5">
+      <div className="w-12 h-1.5 bg-gray-800 rounded overflow-hidden">
+        <div className={`h-full rounded ${color}`} style={{ width: `${Math.min(value, 100)}%` }} />
+      </div>
+      <span className="text-xs text-gray-400">{value.toFixed(0)}%</span>
+    </div>
+  )
+}
+
+function formatUptime(seconds) {
+  const d = Math.floor(seconds / 86400)
+  const h = Math.floor((seconds % 86400) / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  if (d > 0) return `${d}d ${h}h`
+  return `${h}h ${m}m`
+}