diff --git a/.claude/launch.json b/.claude/launch.json index d681838..fe780f4 100644 --- a/.claude/launch.json +++ b/.claude/launch.json @@ -6,6 +6,12 @@ "runtimeExecutable": "npx", "runtimeArgs": ["vite", "preview", "frontend", "--port", "4173"], "port": 4173 + }, + { + "name": "frontend-dev", + "runtimeExecutable": "npx", + "runtimeArgs": ["vite", "frontend", "--port", "4174"], + "port": 4174 } ] } diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx index d04fd57..6db23aa 100644 --- a/frontend/src/pages/Settings.jsx +++ b/frontend/src/pages/Settings.jsx @@ -322,6 +322,7 @@ export default function Settings({ me }) { const [botDesc, setBotDesc] = useState(''); const [team, setTeam] = useState([]); const [audit, setAudit] = useState([]); + const [serverStats, setServerStats] = useState(null); const [owner, setOwner] = useState(null); const [auditAlle, setAuditAlle] = useState(false); // Module (An/Aus für alle Funktionen) @@ -446,6 +447,8 @@ export default function Settings({ me }) { .then((d) => { setTeam(d.admins); setOwner(d.owner); }) .catch(() => {}); apiGet('/api/auditlog').then((d) => setAudit(d.entries)).catch(() => {}); + // Fuers Dashboard: Mitgliederzahl und Nachrichten pro Tag + apiGet('/api/serverstats').then(setServerStats).catch(() => {}); apiGet('/api/ssoapps').then((d) => setSsoApps(d.apps)).catch(() => {}); apiGet('/api/services').then((d) => setServices(d.services)).catch(() => {}); apiGet('/api/pages/all/list').then((d) => setPages(d.pages)).catch(() => {}); @@ -1108,29 +1111,138 @@ export default function Settings({ me }) { const activeModules = modules.filter((m) => m.enabled); const unfinished = activeModules.filter((m) => m.missing.length > 0); + /** Wie alt ist ein Zeitstempel, in Tagen — fuer die Nebenzeilen */ + function alterInTagen(iso) { + if (!iso) return null; + return Math.floor((Date.now() - new Date(iso.replace(' ', 'T') + 'Z').getTime()) / 86400000); + } + + /** „vor 3 Tagen" bzw. „heute" fuer eine Nebenzeile */ + function seit(iso, nie) { + const t = alterInTagen(iso); + if (t == null) return nie; + if (t <= 0) return 'heute'; + return t === 1 ? 'gestern' : `vor ${t} Tagen`; + } + + // Mitglieder-Zuwachs der letzten 7 Tage aus den Tagesdaten + const memberDelta = serverStats?.days + ? serverStats.days.slice(-7).reduce((n, d) => n + (d.joins ?? 0) - (d.leaves ?? 0), 0) + : null; + + // Nachrichten der letzten 30 Tage, luckenlos — fehlende Tage sind 0 und + // nicht einfach weg, sonst staucht sich der Verlauf + const aktivitaet = (() => { + if (!serverStats?.days) return null; + const proTag = new Map(serverStats.days.map((d) => [d.day, d.messages ?? 0])); + const tage = []; + for (let i = 29; i >= 0; i--) { + const key = new Date(Date.now() - i * 86400000).toISOString().slice(0, 10); + tage.push({ key, n: proTag.get(key) ?? 0 }); + } + return { tage, gesamt: tage.reduce((n, t) => n + t.n, 0), max: Math.max(1, ...tage.map((t) => t.n)) }; + })(); + + const backupTage = alterInTagen(data.status.lastBackup); + const tabStatus = ( <>
-

// Status

-
-
{data.status.botTag ?? '—'}Bot
-
{fmtUptime(data.status.uptimeSeconds)}Uptime
- {modules.length > 0 && ( -
- {activeModules.length}/{modules.length} - Module an -
- )} -
{data.status.devlogs}Devlogs
-
{data.status.commits}Commits
-
{fmtBytes(data.status.dbSizeBytes)}Datenbank
-
- {data.status.lastBackup ? data.status.lastBackup.slice(0, 10) : '—'} - Letztes Backup +
+ {data.status.botAvatar + ? + : ?} +
+ + {data.status.botName ?? 'Bot'} + {data.status.botTag && {data.status.botTag}} + + online +
+ + seit {fmtUptime(data.status.uptimeSeconds)} + {data.status.guilds > 0 && ` · ${data.status.guilds} Server`} + +
+ +
+
+ {activeModules.length}/{modules.length || '–'} + Module an + 0 ? ' warn' : ' gut'}`}> + {unfinished.length > 0 ? `${unfinished.length} unvollständig` : 'alle einsatzbereit'} + +
+
+ {serverStats?.members != null ? serverStats.members.toLocaleString('de-DE') : '—'} + Member + 0 ? ' gut' : ''}`}> + {memberDelta == null + ? ' ' + : `${memberDelta >= 0 ? '+' : ''}${memberDelta} in 7 Tagen`} + +
+
+ {data.status.devlogs} + Devlogs + {seit(data.status.lastDevlog, 'noch keins')} +
+
+ {fmtBytes(data.status.dbSizeBytes)} + Datenbank + 2 ? ' warn' : ' gut'}`}> + Backup {seit(data.status.lastBackup, 'fehlt')} +
+ {aktivitaet && aktivitaet.gesamt > 0 && ( +
+

+ // Aktivität — {aktivitaet.gesamt.toLocaleString('de-DE')} Nachrichten in 30 Tagen +

+
+ {aktivitaet.tage.map((t) => ( + + ))} +
+
+ )} + + {modules.length > 0 && moduleGroups.length > 0 && ( +
+

// Module nach Bereich

+
+ {moduleGroups.map((g) => { + const drin = modules.filter((m) => m.group === g.id); + if (drin.length === 0) return null; + const an = drin.filter((m) => m.enabled).length; + const offen = drin.filter((m) => m.enabled && m.missing.length > 0).length; + return ( + + ); + })} +
+
+ )} + {modules.length > 0 && (

// Noch einzurichten

diff --git a/frontend/src/style.css b/frontend/src/style.css index 3f85c9a..dc6718e 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -1736,6 +1736,85 @@ label.toggle { .srv-checked { font-family: var(--mono); font-size: .62rem; color: var(--muted2); margin-top: .8rem; } /* ── AUDIT-LOG ─────────────────────────────────────── */ +/* ── STATUS-DASHBOARD ──────────────────────────────── */ +.dash-head { + display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; + margin-bottom: 1.2rem; +} +.dash-avatar { + width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; + border: 1px solid color-mix(in srgb, var(--neon) 35%, transparent); +} +.dash-avatar.leer { + display: grid; place-items: center; + background: rgba(255, 255, 255, .05); color: var(--muted); +} +.dash-ident { display: flex; flex-direction: column; gap: .35rem; } +.dash-name { font-weight: 700; font-size: 1rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } +.dash-tag { font-family: var(--mono); font-size: .62rem; color: var(--muted2); letter-spacing: .06em; } +.dash-pill { + display: inline-flex; align-items: center; gap: .4rem; width: fit-content; + font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; + padding: .16rem .5rem; border-radius: 999px; + border: 1px solid rgba(59, 165, 93, .45); color: #3ba55d; +} +.dash-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } +.dash-uptime { + margin-left: auto; font-family: var(--mono); + font-size: .64rem; letter-spacing: .08em; color: var(--muted2); +} + +.dash-kpis { display: grid; gap: .7rem; grid-template-columns: repeat(4, 1fr); } +.dash-kpi { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; min-width: 0; } +.dash-v { font-size: 1.55rem; font-weight: 700; line-height: 1.1; } +.dash-of { font-size: .85rem; color: var(--muted2); font-weight: 400; } +.dash-l { + font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; + text-transform: uppercase; color: var(--muted); +} +/* Nebenzeile: min-height, damit Karten ohne Wert nicht kürzer werden */ +.dash-t { + font-family: var(--mono); font-size: .6rem; letter-spacing: .04em; + color: var(--muted2); margin-top: .35rem; min-height: 1em; +} +.dash-t.gut { color: #3ba55d; } +.dash-t.warn { color: var(--neon2); } + +.dash-spark { + display: flex; align-items: flex-end; gap: 2px; + height: 70px; margin-top: 1rem; +} +.dash-bar { + flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; + background: linear-gradient(180deg, var(--neon), color-mix(in srgb, var(--neon) 15%, transparent)); +} +.dash-bar:hover { background: var(--neon2); } + +.dash-groups { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; } +.dash-group { + display: flex; align-items: center; gap: .8rem; + background: none; border: none; padding: .25rem 0; cursor: pointer; + font-size: .82rem; color: var(--muted); text-align: left; +} +.dash-group:hover { color: var(--text); } +.dash-group-name { flex: 0 0 12rem; } +.dash-group-bar { + flex: 1; height: 5px; border-radius: 3px; + background: rgba(255, 255, 255, .07); overflow: hidden; +} +.dash-group-bar i { display: block; height: 100%; background: var(--neon); } +.dash-group-bar.warn i { background: var(--neon2); } +.dash-group-n { + font-family: var(--mono); font-size: .64rem; color: var(--muted2); + flex: 0 0 3rem; text-align: right; +} + +@media (max-width: 820px) { + .dash-kpis { grid-template-columns: repeat(2, 1fr); } + .dash-uptime { margin-left: 0; width: 100%; } + .dash-group-name { flex-basis: 7rem; } +} + /* ── ERREICHBARKEITS-BALKEN ────────────────────────── */ /* Ein Strich pro Stunde, 168 Stück. Auf schmalen Schirmen werden die Striche dünner als ein Pixel — deshalb scrollt der Balken dort lieber, statt zu diff --git a/src/db.js b/src/db.js index a97e578..e76a818 100644 --- a/src/db.js +++ b/src/db.js @@ -1127,11 +1127,17 @@ export function weeklyStats() { return { perDay, topRepos, devlogs }; } +const lastDevlogStmt = db.prepare('SELECT max(posted_at) AS ts FROM devlogs'); +const lastCommitStmt = db.prepare('SELECT max(committed_at) AS ts FROM commits'); + /** Statistiken fürs Status-Panel der Settings-Seite */ export function archiveStats() { return { devlogs: countDevlogsStmt.get().n, commits: countCommitsStmt.get().n, dbSizeBytes: statSync(dbFile).size, + // Reine Zahlen sagen nicht, ob noch etwas passiert — das Datum schon + lastDevlog: lastDevlogStmt.get().ts ?? null, + lastCommit: lastCommitStmt.get().ts ?? null, }; }