1028 lines
62 KiB
React
1028 lines
62 KiB
React
|
import React, { useState, useEffect, useCallback } from 'react';
|
|||
|
|
|
|||
|
|
const API = process.env.REACT_APP_API_URL || '/api';
|
|||
|
|
|
|||
|
|
const apiFetch = (url) => fetch(url).then(r => r.ok ? r.json() : null).catch(() => null);
|
|||
|
|
|
|||
|
|
/* ── Design tokens ─────────────────────────────────────────── */
|
|||
|
|
const ACCENT = '#4FD1C5';
|
|||
|
|
const C_OK = '#34D399';
|
|||
|
|
const C_WARN = '#F59E0B';
|
|||
|
|
const C_ERROR = '#EF4444';
|
|||
|
|
const C_INFO = '#60A5FA';
|
|||
|
|
// const C_CRIT = '#F43F5E'; // reserved for future use
|
|||
|
|
|
|||
|
|
/* ── Mesh palettes per slide tint ──────────────────────────── */
|
|||
|
|
const MESH_PAL = {
|
|||
|
|
mint: ['#0a3d3a','#0d4f48','#082b29','#0b1f1d'],
|
|||
|
|
red: ['#3d0a1a','#4f0d22','#2b0810','#1f0b0e'],
|
|||
|
|
blue: ['#0a1f3d','#0d2a4f','#08152b','#0b121f'],
|
|||
|
|
violet: ['#22093d','#2d0c4f','#16062b','#10071f'],
|
|||
|
|
neutral: ['#0a1014','#0e1419','#070b0e','#04070a'],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* ════════════════════════════════════════════════════════════
|
|||
|
|
HOOKS
|
|||
|
|
════════════════════════════════════════════════════════════ */
|
|||
|
|
function useNow(interval = 1000) {
|
|||
|
|
const [now, setNow] = useState(() => new Date());
|
|||
|
|
useEffect(() => {
|
|||
|
|
const id = setInterval(() => setNow(new Date()), interval);
|
|||
|
|
return () => clearInterval(id);
|
|||
|
|
}, [interval]);
|
|||
|
|
return now;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function useCountUp(target, durationMs = 1400, deps = []) {
|
|||
|
|
const [val, setVal] = useState(target);
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (document.visibilityState !== 'visible') { setVal(target); return; }
|
|||
|
|
let raf;
|
|||
|
|
const start = performance.now();
|
|||
|
|
const to = Number(target) || 0;
|
|||
|
|
setVal(0);
|
|||
|
|
const tick = (t) => {
|
|||
|
|
const p = Math.min(1, (t - start) / durationMs);
|
|||
|
|
const eased = 1 - Math.pow(1 - p, 3);
|
|||
|
|
setVal(to * eased);
|
|||
|
|
if (p < 1) raf = requestAnimationFrame(tick);
|
|||
|
|
};
|
|||
|
|
raf = requestAnimationFrame(tick);
|
|||
|
|
const safety = setTimeout(() => setVal(to), 200);
|
|||
|
|
return () => { cancelAnimationFrame(raf); clearTimeout(safety); };
|
|||
|
|
// eslint-disable-next-line
|
|||
|
|
}, deps);
|
|||
|
|
return val;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function useStageScale(w = 1920, h = 1080) {
|
|||
|
|
const [scale, setScale] = useState(1);
|
|||
|
|
useEffect(() => {
|
|||
|
|
const fit = () => {
|
|||
|
|
const vw = window.innerWidth, vh = window.innerHeight;
|
|||
|
|
if (vw < 4 || vh < 4) return;
|
|||
|
|
setScale(Math.min(vw / w, vh / h));
|
|||
|
|
};
|
|||
|
|
fit();
|
|||
|
|
window.addEventListener('resize', fit);
|
|||
|
|
const retries = [50, 150, 400].map(t => setTimeout(fit, t));
|
|||
|
|
return () => { window.removeEventListener('resize', fit); retries.forEach(clearTimeout); };
|
|||
|
|
}, [w, h]);
|
|||
|
|
return scale;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ════════════════════════════════════════════════════════════
|
|||
|
|
ATOMS
|
|||
|
|
════════════════════════════════════════════════════════════ */
|
|||
|
|
function MeshBackground({ tint = 'neutral', intensity = 1 }) {
|
|||
|
|
const p = MESH_PAL[tint] || MESH_PAL.neutral;
|
|||
|
|
const k = intensity;
|
|||
|
|
return (
|
|||
|
|
<div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
|
|||
|
|
<div style={{ position: 'absolute', inset: 0, background: '#000' }} />
|
|||
|
|
<div className="tv-blob tv-b1" style={{ background: p[0], opacity: 0.85 * k }} />
|
|||
|
|
<div className="tv-blob tv-b2" style={{ background: p[1], opacity: 0.7 * k }} />
|
|||
|
|
<div className="tv-blob tv-b3" style={{ background: p[2], opacity: 0.6 * k }} />
|
|||
|
|
<div className="tv-blob tv-b4" style={{ background: p[3], opacity: 0.5 * k }} />
|
|||
|
|
<div style={{ position: 'absolute', inset: 0, opacity: 0.06, mixBlendMode: 'overlay',
|
|||
|
|
backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")` }} />
|
|||
|
|
<div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%)' }} />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function ClockBig() {
|
|||
|
|
const now = useNow(1000);
|
|||
|
|
const hh = String(now.getHours()).padStart(2, '0');
|
|||
|
|
const mm = String(now.getMinutes()).padStart(2, '0');
|
|||
|
|
const ss = String(now.getSeconds()).padStart(2, '0');
|
|||
|
|
const dateStr = now.toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
|
|||
|
|
return (
|
|||
|
|
<div style={{ position: 'absolute', top: 56, right: 80, textAlign: 'right', fontFeatureSettings: '"tnum" 1', zIndex: 5 }}>
|
|||
|
|
<div style={{ fontSize: 76, fontWeight: 600, letterSpacing: -2.5, lineHeight: 1, display: 'inline-flex', alignItems: 'baseline' }}>
|
|||
|
|
<span>{hh}</span>
|
|||
|
|
<span style={{ opacity: 0.32, margin: '0 2px', fontWeight: 300 }}>:</span>
|
|||
|
|
<span>{mm}</span>
|
|||
|
|
<span style={{ opacity: 0.32, margin: '0 2px', fontWeight: 300, fontSize: 56 }}>:</span>
|
|||
|
|
<span style={{ fontSize: 44, opacity: 0.4, fontWeight: 400, letterSpacing: -1 }}>{ss}</span>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ fontSize: 16, color: 'rgba(244,245,247,0.62)', marginTop: 10, letterSpacing: 0.4, fontWeight: 500, textTransform: 'capitalize' }}>{dateStr}</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function BrandChip({ section }) {
|
|||
|
|
return (
|
|||
|
|
<div style={{ position: 'absolute', top: 64, left: 80, display: 'inline-flex', alignItems: 'center', gap: 16, fontSize: 14, fontWeight: 700, letterSpacing: 2.2, zIndex: 5 }}>
|
|||
|
|
<span className="tv-brand-dot" style={{ background: ACCENT }} />
|
|||
|
|
<span style={{ color: '#F4F5F7' }}>IT NEXUS</span>
|
|||
|
|
{section && <>
|
|||
|
|
<span style={{ width: 1, height: 16, background: 'rgba(255,255,255,0.14)' }} />
|
|||
|
|
<span style={{ color: 'rgba(244,245,247,0.62)', letterSpacing: 1.6, fontWeight: 500, textTransform: 'uppercase' }}>{section}</span>
|
|||
|
|
</>}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function SlideIndicator({ total, active, durationMs, autoplay }) {
|
|||
|
|
return (
|
|||
|
|
<div style={{ position: 'absolute', top: 80, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 8, zIndex: 5 }}>
|
|||
|
|
{Array.from({ length: total }).map((_, i) => (
|
|||
|
|
<div key={i} style={{
|
|||
|
|
width: i === active ? 64 : 28, height: 3, borderRadius: 2,
|
|||
|
|
background: i < active ? 'rgba(255,255,255,0.28)' : i === active ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.12)',
|
|||
|
|
overflow: 'hidden', transition: 'width 0.5s cubic-bezier(.2,.7,.2,1)',
|
|||
|
|
}}>
|
|||
|
|
{i === active && autoplay && (
|
|||
|
|
<div style={{ width: 0, height: '100%', background: ACCENT, boxShadow: `0 0 6px ${ACCENT}`, animation: `tvSiFill ${durationMs}ms linear forwards` }} />
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function Sparkline({ data = [], width = 400, height = 80, color = ACCENT, fill = true, strokeW = 2 }) {
|
|||
|
|
if (!data || data.length < 2) return null;
|
|||
|
|
const min = Math.min(...data), max = Math.max(...data);
|
|||
|
|
const range = max - min || 1;
|
|||
|
|
const step = width / (data.length - 1);
|
|||
|
|
const pts = data.map((v, i) => [i * step, height - ((v - min) / range) * (height - 8) - 4]);
|
|||
|
|
const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
|
|||
|
|
const area = `${path} L${width},${height} L0,${height} Z`;
|
|||
|
|
const id = `sg-${color.replace(/[^a-z0-9]/gi, '')}-${width}`;
|
|||
|
|
return (
|
|||
|
|
<svg viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
|
|||
|
|
<defs>
|
|||
|
|
<linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
|
|||
|
|
<stop offset="0%" stopColor={color} stopOpacity="0.35" />
|
|||
|
|
<stop offset="100%" stopColor={color} stopOpacity="0" />
|
|||
|
|
</linearGradient>
|
|||
|
|
</defs>
|
|||
|
|
{fill && <path d={area} fill={`url(#${id})`} />}
|
|||
|
|
<path d={path} fill="none" stroke={color} strokeWidth={strokeW} strokeLinecap="round" strokeLinejoin="round" />
|
|||
|
|
<circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r={strokeW + 1} fill={color} />
|
|||
|
|
</svg>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function Donut({ value, size = 220, stroke = 16, color = ACCENT, label, sublabel, animateKey }) {
|
|||
|
|
const animated = useCountUp(value, 1400, [animateKey, value]);
|
|||
|
|
const r = (size - stroke) / 2;
|
|||
|
|
const c = 2 * Math.PI * r;
|
|||
|
|
const off = c - (animated / 100) * c;
|
|||
|
|
return (
|
|||
|
|
<div style={{ position: 'relative', display: 'inline-block', width: size, height: size }}>
|
|||
|
|
<svg width={size} height={size}>
|
|||
|
|
<circle cx={size/2} cy={size/2} r={r} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth={stroke} />
|
|||
|
|
<circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={stroke}
|
|||
|
|
strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round"
|
|||
|
|
transform={`rotate(-90 ${size/2} ${size/2})`}
|
|||
|
|
style={{ filter: `drop-shadow(0 0 12px ${color}55)` }} />
|
|||
|
|
</svg>
|
|||
|
|
<div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
|
|||
|
|
<div style={{ fontSize: size < 260 ? 44 : 56, fontWeight: 700, letterSpacing: -2, lineHeight: 1, fontFeatureSettings: '"tnum" 1' }}>
|
|||
|
|
{Math.round(animated)}<span style={{ fontSize: size < 260 ? 24 : 32, opacity: 0.6, marginLeft: 3 }}>%</span>
|
|||
|
|
</div>
|
|||
|
|
{label && <div style={{ fontSize: 12, color: 'rgba(244,245,247,0.62)', marginTop: 5, letterSpacing: 1.5, textTransform: 'uppercase' }}>{label}</div>}
|
|||
|
|
{sublabel && <div style={{ fontSize: 11, color: 'rgba(244,245,247,0.38)', marginTop: 2 }}>{sublabel}</div>}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function BigNumber({ value, suffix = '', decimals = 0, animateKey }) {
|
|||
|
|
const animated = useCountUp(value, 1400, [animateKey, value]);
|
|||
|
|
const display = decimals === 0
|
|||
|
|
? Math.round(animated).toLocaleString('de-DE')
|
|||
|
|
: animated.toFixed(decimals).replace('.', ',');
|
|||
|
|
return <span key={animateKey} className="tv-number-punch" style={{ fontFeatureSettings: '"tnum" 1' }}>{display}{suffix}</span>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function StatusDot({ status, size = 10 }) {
|
|||
|
|
const colors = { ok: C_OK, online: C_OK, warn: C_WARN, error: C_ERROR, offline: C_ERROR, info: C_INFO };
|
|||
|
|
const c = colors[status] || '#94A3B8';
|
|||
|
|
const pulse = status === 'ok' || status === 'online';
|
|||
|
|
return (
|
|||
|
|
<span className={pulse ? 'tv-dot-pulse' : ''} style={{
|
|||
|
|
display: 'inline-block', width: size, height: size, borderRadius: '50%', flexShrink: 0,
|
|||
|
|
background: c, boxShadow: `0 0 ${size}px ${c}88`,
|
|||
|
|
}} />
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Bento tile ─────────────────────────────────────────────── */
|
|||
|
|
const TILE_GLOWS = {
|
|||
|
|
hero: 'rgba(79,209,197,0.22)',
|
|||
|
|
danger: 'rgba(244,63,94,0.22)',
|
|||
|
|
warn: 'rgba(245,158,11,0.20)',
|
|||
|
|
info: 'rgba(96,165,250,0.20)',
|
|||
|
|
success: 'rgba(52,211,153,0.22)',
|
|||
|
|
};
|
|||
|
|
const TILE_BG = {
|
|||
|
|
hero: 'linear-gradient(165deg,rgba(79,209,197,0.16),rgba(79,209,197,0.025) 60%,rgba(255,255,255,0.012))',
|
|||
|
|
danger: 'linear-gradient(165deg,rgba(244,63,94,0.16),rgba(244,63,94,0.025) 60%,rgba(255,255,255,0.012))',
|
|||
|
|
warn: 'linear-gradient(165deg,rgba(245,158,11,0.14),rgba(245,158,11,0.025) 60%,rgba(255,255,255,0.012))',
|
|||
|
|
info: 'linear-gradient(165deg,rgba(96,165,250,0.14),rgba(96,165,250,0.025) 60%,rgba(255,255,255,0.012))',
|
|||
|
|
success: 'linear-gradient(165deg,rgba(52,211,153,0.14),rgba(52,211,153,0.025) 60%,rgba(255,255,255,0.012))',
|
|||
|
|
'': 'linear-gradient(180deg,rgba(255,255,255,0.045),rgba(255,255,255,0.012))',
|
|||
|
|
};
|
|||
|
|
const TILE_BORDER = {
|
|||
|
|
hero: 'rgba(79,209,197,0.22)', danger: 'rgba(244,63,94,0.22)',
|
|||
|
|
warn: 'rgba(245,158,11,0.22)', info: 'rgba(96,165,250,0.22)',
|
|||
|
|
success: 'rgba(52,211,153,0.22)', '': 'rgba(255,255,255,0.07)',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function BTile({ children, style, variant = '', animDelay = 0, cornerGlyph }) {
|
|||
|
|
return (
|
|||
|
|
<div style={{
|
|||
|
|
borderRadius: 18, padding: 20,
|
|||
|
|
background: TILE_BG[variant] || TILE_BG[''],
|
|||
|
|
border: `1px solid ${TILE_BORDER[variant] || TILE_BORDER['']}`,
|
|||
|
|
display: 'flex', flexDirection: 'column',
|
|||
|
|
position: 'relative', overflow: 'hidden', isolation: 'isolate',
|
|||
|
|
boxShadow: `inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 0 rgba(255,255,255,0.02), 0 20px 60px rgba(0,0,0,0.35)${TILE_GLOWS[variant] ? `, 0 0 0 1px transparent` : ''}`,
|
|||
|
|
animation: `tvTileIn 800ms ${animDelay}ms both cubic-bezier(.2,.7,.2,1)`,
|
|||
|
|
...style,
|
|||
|
|
}}>
|
|||
|
|
{/* hairline */}
|
|||
|
|
<div style={{ content: '""', position: 'absolute', top: 0, left: '12%', right: '12%', height: 1, background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent)', pointerEvents: 'none' }} />
|
|||
|
|
{/* glow */}
|
|||
|
|
{TILE_GLOWS[variant] && (
|
|||
|
|
<div style={{ position: 'absolute', inset: -1, borderRadius: 18, pointerEvents: 'none', zIndex: -1, background: `radial-gradient(ellipse at 50% 0%, ${TILE_GLOWS[variant]}, transparent 60%)`, opacity: 0.6 }} />
|
|||
|
|
)}
|
|||
|
|
{cornerGlyph && (
|
|||
|
|
<div style={{ position: 'absolute', top: 14, right: 16, opacity: 0.6, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: 'rgba(244,245,247,0.38)', fontFeatureSettings: '"tnum" 1' }}>
|
|||
|
|
{cornerGlyph}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function BLabel({ children, style }) {
|
|||
|
|
return <div style={{ fontSize: 11, letterSpacing: 2.2, textTransform: 'uppercase', color: 'rgba(244,245,247,0.38)', fontWeight: 600, ...style }}>{children}</div>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function SlideHeader({ eyebrow, title, accentSpan, right }) {
|
|||
|
|
return (
|
|||
|
|
<div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 14 }}>
|
|||
|
|
<div>
|
|||
|
|
<div style={{ fontSize: 11, letterSpacing: 3.2, textTransform: 'uppercase', color: 'rgba(244,245,247,0.38)', fontWeight: 600, marginBottom: 8 }}>{eyebrow}</div>
|
|||
|
|
<div style={{ fontSize: 62, fontWeight: 600, letterSpacing: -1.8, lineHeight: 1 }}>
|
|||
|
|
{title}{accentSpan && <> <span style={{
|
|||
|
|
background: `linear-gradient(180deg, ${ACCENT} 0%, color-mix(in srgb, ${ACCENT}, white 18%) 100%)`,
|
|||
|
|
WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
|
|||
|
|
filter: `drop-shadow(0 0 24px color-mix(in srgb, ${ACCENT}, transparent 60%))`,
|
|||
|
|
}}>{accentSpan}</span></>}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{right}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function BentoGrid({ children, style }) {
|
|||
|
|
return (
|
|||
|
|
<div style={{
|
|||
|
|
display: 'grid', gap: 14,
|
|||
|
|
gridTemplateColumns: 'repeat(12, 1fr)',
|
|||
|
|
gridAutoRows: 'minmax(0, 1fr)',
|
|||
|
|
flex: 1, minHeight: 0,
|
|||
|
|
...style,
|
|||
|
|
}}>
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function SlideWrap({ k, tint, children }) {
|
|||
|
|
return (
|
|||
|
|
<div key={k} style={{ position: 'absolute', inset: 0, animation: 'tvSlideUp 900ms cubic-bezier(.2,.7,.2,1)' }}>
|
|||
|
|
<MeshBackground tint={tint} />
|
|||
|
|
<div style={{ position: 'absolute', inset: 0, padding: '168px 60px 62px', display: 'flex', flexDirection: 'column' }}>
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ════════════════════════════════════════════════════════════
|
|||
|
|
DATA PROCESSING
|
|||
|
|
════════════════════════════════════════════════════════════ */
|
|||
|
|
function processData(data) {
|
|||
|
|
const now = Date.now();
|
|||
|
|
const rawAgents = data.agentList || [];
|
|||
|
|
const agentList = rawAgents.map(a => {
|
|||
|
|
const ms = a.last_checkin ? new Date(a.last_checkin + 'Z').getTime() : 0;
|
|||
|
|
const online = ms && (now - ms) < 15 * 60 * 1000;
|
|||
|
|
return { name: a.hostname || '?', cpu: a.cpu_usage_percent || 0, ram: a.ram_usage_percent || 0, status: online ? 'online' : 'offline' };
|
|||
|
|
});
|
|||
|
|
const agentsOnline = agentList.filter(a => a.status === 'online');
|
|||
|
|
const avgCpu = agentsOnline.length > 0 ? agentsOnline.reduce((s, a) => s + a.cpu, 0) / agentsOnline.length : 0;
|
|||
|
|
// Synthetic 24h CPU trend
|
|||
|
|
const cpuTrend24h = Array.from({ length: 24 }, (_, i) => {
|
|||
|
|
const t = i / 23;
|
|||
|
|
return Math.max(0, Math.min(100, avgCpu * (0.5 + t * 0.5) + Math.sin(i * 0.8) * 6));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const total = agentList.length;
|
|||
|
|
const online = agentsOnline.length;
|
|||
|
|
const offline = total - online;
|
|||
|
|
|
|||
|
|
const patch = data.patch || {};
|
|||
|
|
const patchTotal = patch.total || total || 1;
|
|||
|
|
const compliancePct = Math.round(((patch.compliant || 0) / patchTotal) * 100);
|
|||
|
|
|
|||
|
|
const noEncrypt = data.monitoring?.noEncrypt || 0;
|
|||
|
|
const encrypted = total - noEncrypt;
|
|||
|
|
const bitlockerPct = total > 0 ? Math.round((encrypted / total) * 100) : 0;
|
|||
|
|
|
|||
|
|
const secReport = data.lastSecReport;
|
|||
|
|
const loginFailures = secReport?.analysis?.login_stats?.failed || 0;
|
|||
|
|
// Synthetic 14-day login failure trend
|
|||
|
|
const failuresTrend14d = Array.from({ length: 14 }, (_, i) => {
|
|||
|
|
const base = loginFailures;
|
|||
|
|
return Math.max(0, Math.round(base * (0.3 + i * 0.05) + Math.sin(i * 0.9) * base * 0.12));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const tickets = data.tickets || {};
|
|||
|
|
const ticketPerDay7 = data.ticketMetrics?.perDay7 || data.ticketMetrics?.daily?.slice(-7)?.map(d => d.count) || [0, 0, 0, 0, 0, 0, 0];
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
agentList,
|
|||
|
|
agents: { online, offline, total, cpuTrend24h },
|
|||
|
|
patches: {
|
|||
|
|
compliancePct,
|
|||
|
|
current: patch.compliant || 0,
|
|||
|
|
warning: patch.warnings || 0,
|
|||
|
|
offline: patch.offline || 0,
|
|||
|
|
pending: patch.total_pending_updates || 0,
|
|||
|
|
total: patchTotal,
|
|||
|
|
},
|
|||
|
|
security: {
|
|||
|
|
bitlockerPct, encrypted, unencrypted: noEncrypt,
|
|||
|
|
loginFailures, failuresTrend14d,
|
|||
|
|
lastReport: secReport ? new Date(secReport.created_at).toLocaleDateString('de-DE') : '—',
|
|||
|
|
risk: (loginFailures > 5000 || noEncrypt > 5) ? 'HOCH' : (loginFailures > 1000 || noEncrypt > 1) ? 'MITTEL' : 'NIEDRIG',
|
|||
|
|
},
|
|||
|
|
tickets: {
|
|||
|
|
open: tickets.open || 0,
|
|||
|
|
inProgress: tickets.inProgress || 0,
|
|||
|
|
solvedToday: tickets.closedToday || 0,
|
|||
|
|
byPriority: { critical: tickets.critical || 0, high: tickets.high || 0, medium: tickets.medium || 0, low: tickets.low || 0 },
|
|||
|
|
perDay7: ticketPerDay7,
|
|||
|
|
},
|
|||
|
|
// Static: network, backup, CVE (no backend endpoint yet)
|
|||
|
|
network: [
|
|||
|
|
{ name: 'Internet', status: 'ok', latency: '12 ms', detail: '1 Gbit/s' },
|
|||
|
|
{ name: 'VPN', status: 'ok', latency: '24 ms', detail: 'Aktive Sessions' },
|
|||
|
|
{ name: 'Exchange Online', status: 'ok', latency: '48 ms', detail: 'Microsoft 365' },
|
|||
|
|
{ name: 'SharePoint', status: 'ok', latency: '52 ms', detail: 'OK' },
|
|||
|
|
{ name: 'Proxmox Cluster', status: 'ok', latency: '3 ms', detail: '3 Nodes' },
|
|||
|
|
{ name: 'NoSpamProxy', status: 'ok', latency: '18 ms', detail: 'OK' },
|
|||
|
|
{ name: 'Swyx Telefonie', status: 'ok', latency: '9 ms', detail: 'OK' },
|
|||
|
|
{ name: 'SelectLine ERP', status: 'ok', latency: '14 ms', detail: 'OK' },
|
|||
|
|
],
|
|||
|
|
backups: {
|
|||
|
|
coverage: 96, successful: 42, failed: 1, running: 0,
|
|||
|
|
lastSuccess: '06:14',
|
|||
|
|
lastFailJob: 'FAM102223 · Vollsicherung',
|
|||
|
|
trend14d: [98,99,100,100,97,95,100,100,99,98,100,96,94,96],
|
|||
|
|
},
|
|||
|
|
cves: [
|
|||
|
|
{ id: 'CVE-2026-13421', sev: 'critical', cvss: 9.8, title: 'Apache Tomcat — Pre-Auth RCE via AJP-Connector', vendor: 'Apache', published: '2 Std.' },
|
|||
|
|
{ id: 'CVE-2026-13380', sev: 'critical', cvss: 9.6, title: 'Microsoft Outlook — Zero-Click via Preview Pane', vendor: 'Microsoft', published: '5 Std.' },
|
|||
|
|
{ id: 'CVE-2026-13298', sev: 'high', cvss: 8.4, title: 'Fortinet FortiGate — Auth Bypass', vendor: 'Fortinet', published: '11 Std.' },
|
|||
|
|
{ id: 'CVE-2026-13211', sev: 'high', cvss: 7.9, title: 'VMware ESXi — Privilege Escalation', vendor: 'VMware', published: '18 Std.' },
|
|||
|
|
{ id: 'CVE-2026-13104', sev: 'medium', cvss: 6.5, title: 'Chrome V8 — Type Confusion', vendor: 'Google', published: '1 Tag' },
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ════════════════════════════════════════════════════════════
|
|||
|
|
SLIDES
|
|||
|
|
════════════════════════════════════════════════════════════ */
|
|||
|
|
|
|||
|
|
/* 1 – Overview */
|
|||
|
|
function SlideOverview({ d, k }) {
|
|||
|
|
const onlinePct = d.agents.total > 0 ? Math.round((d.agents.online / d.agents.total) * 100) : 0;
|
|||
|
|
return (
|
|||
|
|
<SlideWrap k={k} tint="neutral">
|
|||
|
|
<SlideHeader eyebrow="Cereda Systems GmbH · Echtzeit-Systemübersicht" title="Heute im" accentSpan="Überblick" />
|
|||
|
|
<BentoGrid>
|
|||
|
|
{/* Hero — Agents */}
|
|||
|
|
<BTile variant="hero" style={{ gridColumn: 'span 7', gridRow: 'span 4' }} animDelay={0} cornerGlyph="01 · AGENTS">
|
|||
|
|
<BLabel>Agents online</BLabel>
|
|||
|
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginTop: 10 }}>
|
|||
|
|
<span style={{ fontSize: 160, fontWeight: 700, letterSpacing: -5, lineHeight: 0.92, color: ACCENT, filter: `drop-shadow(0 0 32px ${ACCENT}60)`, fontFeatureSettings: '"tnum" 1' }}>
|
|||
|
|
<BigNumber value={d.agents.online} animateKey={k} />
|
|||
|
|
</span>
|
|||
|
|
<span style={{ fontSize: 52, color: 'rgba(244,245,247,0.18)', fontWeight: 500, letterSpacing: -1.5, fontFeatureSettings: '"tnum" 1' }}>/ {d.agents.total}</span>
|
|||
|
|
</div>
|
|||
|
|
{/* Fleet strip */}
|
|||
|
|
<div style={{ display: 'grid', gridTemplateColumns: `repeat(${Math.max(d.agentList.length, 1)}, 1fr)`, gap: 4, marginTop: 12 }}>
|
|||
|
|
{d.agentList.map((a, i) => (
|
|||
|
|
<div key={a.name} style={{
|
|||
|
|
aspectRatio: 1, borderRadius: 6,
|
|||
|
|
border: '1px solid rgba(255,255,255,0.04)',
|
|||
|
|
background: a.status === 'online'
|
|||
|
|
? `rgba(79,209,197,${0.3 + (a.cpu / 100) * 0.6})`
|
|||
|
|
: 'rgba(239,68,68,0.4)',
|
|||
|
|
animation: `tvHeatIn 600ms ${300 + i * 14}ms both cubic-bezier(.2,.7,.2,1)`,
|
|||
|
|
}} />
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<div style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
|
|||
|
|
<div style={{ display: 'flex', gap: 24 }}>
|
|||
|
|
<span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><StatusDot status="online" size={9} /><span style={{ color: 'rgba(244,245,247,0.62)' }}>{d.agents.online} online</span></span>
|
|||
|
|
<span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><StatusDot status="offline" size={9} /><span style={{ color: 'rgba(244,245,247,0.62)' }}>{d.agents.offline} offline</span></span>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ fontSize: 28, fontWeight: 600, color: ACCENT, letterSpacing: -0.5, fontFeatureSettings: '"tnum" 1' }}>{onlinePct} %</div>
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
{/* Tickets */}
|
|||
|
|
<BTile variant="success" style={{ gridColumn: 'span 5', gridRow: 'span 2' }} animDelay={140} cornerGlyph="02 · HELPDESK">
|
|||
|
|
<BLabel>Offene Tickets</BLabel>
|
|||
|
|
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 8 }}>
|
|||
|
|
<span style={{ fontSize: 80, fontWeight: 700, letterSpacing: -2.5, lineHeight: 1, color: C_OK }}><BigNumber value={d.tickets.open} animateKey={k} /></span>
|
|||
|
|
<div style={{ width: 180, height: 40 }}><Sparkline data={d.tickets.perDay7} color={C_OK} width={180} height={40} strokeW={1.5} /></div>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ marginTop: 'auto', fontSize: 14, color: 'rgba(244,245,247,0.62)' }}>
|
|||
|
|
{d.tickets.byPriority.critical} kritisch · {d.tickets.byPriority.high} hoch
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
{/* Security */}
|
|||
|
|
<BTile variant="danger" style={{ gridColumn: 'span 5', gridRow: 'span 2' }} animDelay={200} cornerGlyph="03 · SECURITY">
|
|||
|
|
<BLabel>Login-Fehler · 30 Tage</BLabel>
|
|||
|
|
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 8 }}>
|
|||
|
|
<span style={{ fontSize: 64, fontWeight: 700, letterSpacing: -2, lineHeight: 1, color: C_ERROR }}><BigNumber value={d.security.loginFailures} animateKey={k} /></span>
|
|||
|
|
<div style={{ width: 180, height: 40 }}><Sparkline data={d.security.failuresTrend14d} color={C_ERROR} width={180} height={40} strokeW={1.5} /></div>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ marginTop: 'auto', fontSize: 14, color: 'rgba(244,245,247,0.62)' }}><span style={{ color: C_ERROR }}>●</span> Risiko: {d.security.risk}</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
{/* Updates */}
|
|||
|
|
<BTile variant="info" style={{ gridColumn: 'span 4', gridRow: 'span 2' }} animDelay={260} cornerGlyph="04 · UPDATES">
|
|||
|
|
<BLabel>Updates ausstehend</BLabel>
|
|||
|
|
<div style={{ fontSize: 80, fontWeight: 700, letterSpacing: -2.5, lineHeight: 1, color: C_INFO, marginTop: 8 }}><BigNumber value={d.patches.pending} animateKey={k} /></div>
|
|||
|
|
<div style={{ height: 8, borderRadius: 4, background: 'rgba(255,255,255,0.06)', overflow: 'hidden', marginTop: 'auto' }}>
|
|||
|
|
<div style={{ height: '100%', borderRadius: 4, background: C_INFO, transition: 'width 1.4s cubic-bezier(.2,.7,.2,1)', width: `${d.patches.compliancePct}%` }} />
|
|||
|
|
</div>
|
|||
|
|
<div style={{ marginTop: 6, fontSize: 12, color: 'rgba(244,245,247,0.62)' }}>{d.patches.compliancePct} % konform</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
{/* Backup */}
|
|||
|
|
<BTile variant="success" style={{ gridColumn: 'span 4', gridRow: 'span 2' }} animDelay={320} cornerGlyph="05 · BACKUP">
|
|||
|
|
<BLabel>Backup Coverage</BLabel>
|
|||
|
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
|
|||
|
|
<span style={{ fontSize: 80, fontWeight: 700, letterSpacing: -2.5, lineHeight: 1, color: C_OK }}><BigNumber value={d.backups.coverage} animateKey={k} /></span>
|
|||
|
|
<span style={{ fontSize: 36, color: 'rgba(244,245,247,0.18)' }}>%</span>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ marginTop: 'auto', fontSize: 13, color: 'rgba(244,245,247,0.62)' }}>Letzter Lauf {d.backups.lastSuccess} Uhr</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
{/* CVE */}
|
|||
|
|
<BTile variant="warn" style={{ gridColumn: 'span 4', gridRow: 'span 2' }} animDelay={380} cornerGlyph="06 · CVE">
|
|||
|
|
<BLabel>Kritische CVEs</BLabel>
|
|||
|
|
<div style={{ fontSize: 80, fontWeight: 700, letterSpacing: -2.5, lineHeight: 1, color: C_WARN, marginTop: 8 }}>
|
|||
|
|
{d.cves.filter(c => c.sev === 'critical').length}
|
|||
|
|
</div>
|
|||
|
|
<div style={{ marginTop: 'auto', fontSize: 13, color: 'rgba(244,245,247,0.62)', lineHeight: 1.3 }}>
|
|||
|
|
{d.cves[0].vendor} · {d.cves[0].id}
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
</BentoGrid>
|
|||
|
|
</SlideWrap>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 2 – Agents */
|
|||
|
|
function SlideAgents({ d, k }) {
|
|||
|
|
const pct = d.agents.total > 0 ? Math.round((d.agents.online / d.agents.total) * 100) : 0;
|
|||
|
|
const onlineAgents = d.agentList.filter(a => a.status === 'online');
|
|||
|
|
const top = [...onlineAgents].sort((a, b) => b.cpu - a.cpu).slice(0, 6);
|
|||
|
|
const avgCpu = onlineAgents.length > 0 ? Math.round(onlineAgents.reduce((s, a) => s + a.cpu, 0) / onlineAgents.length) : 0;
|
|||
|
|
return (
|
|||
|
|
<SlideWrap k={k} tint="mint">
|
|||
|
|
<SlideHeader eyebrow="Windows Agents · Live-Telemetrie" title="Flotte" accentSpan="im Blick" />
|
|||
|
|
<BentoGrid>
|
|||
|
|
<BTile variant="hero" style={{ gridColumn: 'span 4', gridRow: 'span 5' }} animDelay={0} cornerGlyph="VERFÜGBARKEIT">
|
|||
|
|
<div style={{ display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center', marginTop: 8 }}>
|
|||
|
|
<Donut value={pct} size={240} stroke={16} color={ACCENT} animateKey={k} label="Online" sublabel={`${d.agents.online} / ${d.agents.total}`} />
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14 }}>
|
|||
|
|
<span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><StatusDot status="online" size={9} /><span style={{ color: 'rgba(244,245,247,0.62)' }}>{d.agents.online} online</span></span>
|
|||
|
|
<span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><StatusDot status="offline" size={9} /><span style={{ color: 'rgba(244,245,247,0.62)' }}>{d.agents.offline} offline</span></span>
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
<BTile style={{ gridColumn: 'span 8', gridRow: 'span 3' }} animDelay={120} cornerGlyph="CPU · 24 STD">
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
|
|||
|
|
<BLabel>Cluster-CPU-Last</BLabel>
|
|||
|
|
<div style={{ fontSize: 14, color: 'rgba(244,245,247,0.62)', fontFeatureSettings: '"tnum" 1' }}>
|
|||
|
|
Ø <span style={{ color: ACCENT, fontWeight: 600 }}>{avgCpu} %</span> · jetzt {Math.round(d.agents.cpuTrend24h[d.agents.cpuTrend24h.length - 1])} %
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ flex: 1, marginTop: 12, minHeight: 0 }}>
|
|||
|
|
<Sparkline data={d.agents.cpuTrend24h} color={ACCENT} width={900} height={200} />
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'rgba(244,245,247,0.38)', marginTop: 8 }}>
|
|||
|
|
<span>vor 24 Std</span><span>jetzt</span>
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
<BTile style={{ gridColumn: 'span 8', gridRow: 'span 2' }} animDelay={200} cornerGlyph="TOP 6 · CPU">
|
|||
|
|
<BLabel>Top Auslastung</BLabel>
|
|||
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16, marginTop: 12, flex: 1 }}>
|
|||
|
|
{(top.length > 0 ? top : Array(6).fill({ name: '—', cpu: 0 })).map((a, i) => (
|
|||
|
|
<div key={a.name + i} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: 6,
|
|||
|
|
animation: `tvTileIn 600ms ${260 + i * 60}ms both cubic-bezier(.2,.7,.2,1)` }}>
|
|||
|
|
<div style={{ fontSize: 12, fontWeight: 600, opacity: 0.85, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.name}</div>
|
|||
|
|
<div style={{ fontSize: 24, fontWeight: 700, letterSpacing: -0.5, color: a.cpu > 50 ? C_WARN : ACCENT, fontFeatureSettings: '"tnum" 1' }}>{a.cpu.toFixed(1)} %</div>
|
|||
|
|
<div style={{ height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.06)', overflow: 'hidden' }}>
|
|||
|
|
<div style={{ height: '100%', borderRadius: 2, transition: 'width 1.4s cubic-bezier(.2,.7,.2,1)', width: `${a.cpu}%`, background: a.cpu > 50 ? C_WARN : ACCENT }} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
</BentoGrid>
|
|||
|
|
</SlideWrap>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 3 – Patch Compliance */
|
|||
|
|
function SlideCompliance({ d, k }) {
|
|||
|
|
const pct = d.patches.compliancePct;
|
|||
|
|
const color = pct < 50 ? C_ERROR : pct < 80 ? C_WARN : C_OK;
|
|||
|
|
return (
|
|||
|
|
<SlideWrap k={k} tint="red">
|
|||
|
|
<SlideHeader eyebrow="Patch Compliance" title="Update-" accentSpan="Zustand"
|
|||
|
|
right={<div style={{
|
|||
|
|
display: 'inline-flex', alignItems: 'center', gap: 10, padding: '10px 20px', borderRadius: 999,
|
|||
|
|
background: 'rgba(245,158,11,0.12)', border: '1px solid rgba(245,158,11,0.35)', color: '#FCD34D',
|
|||
|
|
fontSize: 18, fontWeight: 600, letterSpacing: 0.5,
|
|||
|
|
}}>⚠ unter Ziel · 95 %</div>}
|
|||
|
|
/>
|
|||
|
|
<BentoGrid>
|
|||
|
|
<BTile variant="danger" style={{ gridColumn: 'span 5', gridRow: 'span 4' }} animDelay={0} cornerGlyph="KONFORM">
|
|||
|
|
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|||
|
|
<Donut value={pct} size={270} stroke={20} color={color} animateKey={k} label="konform" sublabel={`${d.patches.current} von ${d.patches.total} Geräten`} />
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'rgba(244,245,247,0.38)' }}>
|
|||
|
|
<span>Ziel: 95 %</span>
|
|||
|
|
<span style={{ color: C_ERROR }}>Abweichung −{Math.max(0, 95 - pct)} %</span>
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
<BTile variant="success" style={{ gridColumn: 'span 7', gridRow: 'span 2' }} animDelay={120} cornerGlyph="AKTUELL">
|
|||
|
|
<BLabel>Aktuell · konform</BLabel>
|
|||
|
|
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 8 }}>
|
|||
|
|
<span style={{ fontSize: 48, fontWeight: 700, letterSpacing: -1.2, color: C_OK }}><BigNumber value={d.patches.current} animateKey={k} /></span>
|
|||
|
|
<div style={{ fontSize: 14, color: 'rgba(244,245,247,0.62)', fontFeatureSettings: '"tnum" 1' }}>{d.patches.total > 0 ? Math.round((d.patches.current / d.patches.total) * 100) : 0} %</div>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ height: 8, borderRadius: 4, background: 'rgba(255,255,255,0.06)', overflow: 'hidden', marginTop: 'auto' }}>
|
|||
|
|
<div style={{ height: '100%', borderRadius: 4, background: C_OK, transition: 'width 1.4s cubic-bezier(.2,.7,.2,1)', width: `${d.patches.total > 0 ? (d.patches.current / d.patches.total) * 100 : 0}%` }} />
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
<BTile variant="warn" style={{ gridColumn: 'span 4', gridRow: 'span 2' }} animDelay={180} cornerGlyph="FEHLEN">
|
|||
|
|
<BLabel>Updates fehlen</BLabel>
|
|||
|
|
<div style={{ fontSize: 48, fontWeight: 700, letterSpacing: -1.2, color: C_WARN, marginTop: 8 }}><BigNumber value={d.patches.warning} animateKey={k} /></div>
|
|||
|
|
<div style={{ height: 8, borderRadius: 4, background: 'rgba(255,255,255,0.06)', overflow: 'hidden', marginTop: 'auto' }}>
|
|||
|
|
<div style={{ height: '100%', borderRadius: 4, background: C_WARN, transition: 'width 1.4s cubic-bezier(.2,.7,.2,1)', width: `${d.patches.total > 0 ? (d.patches.warning / d.patches.total) * 100 : 0}%` }} />
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
<BTile variant="danger" style={{ gridColumn: 'span 3', gridRow: 'span 2' }} animDelay={240} cornerGlyph="OFFLINE">
|
|||
|
|
<BLabel>Offline</BLabel>
|
|||
|
|
<div style={{ fontSize: 48, fontWeight: 700, letterSpacing: -1.2, color: C_ERROR, marginTop: 8 }}><BigNumber value={d.patches.offline} animateKey={k} /></div>
|
|||
|
|
<div style={{ height: 8, borderRadius: 4, background: 'rgba(255,255,255,0.06)', overflow: 'hidden', marginTop: 'auto' }}>
|
|||
|
|
<div style={{ height: '100%', borderRadius: 4, background: C_ERROR, transition: 'width 1.4s cubic-bezier(.2,.7,.2,1)', width: `${d.patches.total > 0 ? (d.patches.offline / d.patches.total) * 100 : 0}%` }} />
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
</BentoGrid>
|
|||
|
|
</SlideWrap>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 4 – Security */
|
|||
|
|
function SlideSecurity({ d, k }) {
|
|||
|
|
return (
|
|||
|
|
<SlideWrap k={k} tint="red">
|
|||
|
|
<SlideHeader eyebrow="Sicherheit" title="Risiko" accentSpan="Übersicht"
|
|||
|
|
right={<div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 16px', borderRadius: 999, background: 'rgba(244,63,94,0.12)', border: '1px solid rgba(244,63,94,0.35)', color: '#FCA5A5', fontSize: 15, fontWeight: 600 }}>⚠ Risiko {d.security.risk}</div>}
|
|||
|
|
/>
|
|||
|
|
<BentoGrid>
|
|||
|
|
<BTile variant="danger" style={{ gridColumn: 'span 7', gridRow: 'span 4' }} animDelay={0} cornerGlyph="M365 · 30 TAGE">
|
|||
|
|
<BLabel>Login-Fehler</BLabel>
|
|||
|
|
<div style={{ fontSize: 130, fontWeight: 700, color: C_ERROR, letterSpacing: -4, lineHeight: 0.95, marginTop: 8,
|
|||
|
|
filter: 'drop-shadow(0 0 32px rgba(244,63,94,0.4))', fontFeatureSettings: '"tnum" 1' }}>
|
|||
|
|
<BigNumber value={d.security.loginFailures} animateKey={k} />
|
|||
|
|
</div>
|
|||
|
|
<div style={{ fontSize: 16, color: 'rgba(244,245,247,0.62)', marginTop: 4 }}>fehlgeschlagene Anmeldeversuche · Microsoft 365</div>
|
|||
|
|
<div style={{ flex: 1, marginTop: 20, minHeight: 0 }}>
|
|||
|
|
<Sparkline data={d.security.failuresTrend14d} color={C_ERROR} width={900} height={140} />
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'rgba(244,245,247,0.38)' }}>
|
|||
|
|
<span>vor 14 Tagen</span><span>heute · {d.security.failuresTrend14d[d.security.failuresTrend14d.length - 1]}/Tag</span>
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
<BTile variant="warn" style={{ gridColumn: 'span 5', gridRow: 'span 2' }} animDelay={120} cornerGlyph="BITLOCKER">
|
|||
|
|
<BLabel>Verschlüsselungs-Abdeckung</BLabel>
|
|||
|
|
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 8 }}>
|
|||
|
|
<span style={{ fontSize: 48, fontWeight: 700, letterSpacing: -1.2, color: d.security.bitlockerPct >= 90 ? C_OK : C_WARN }}><BigNumber value={d.security.bitlockerPct} suffix=" %" animateKey={k} /></span>
|
|||
|
|
<span style={{ fontSize: 14, color: 'rgba(244,245,247,0.62)', fontFeatureSettings: '"tnum" 1' }}>{d.security.encrypted}/{d.agents.total}</span>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ height: 8, borderRadius: 4, background: 'rgba(255,255,255,0.06)', overflow: 'hidden', marginTop: 'auto' }}>
|
|||
|
|
<div style={{ height: '100%', borderRadius: 4, background: d.security.bitlockerPct >= 90 ? C_OK : C_WARN, transition: 'width 1.4s cubic-bezier(.2,.7,.2,1)', width: `${d.security.bitlockerPct}%` }} />
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
<BTile variant="danger" style={{ gridColumn: 'span 3', gridRow: 'span 2' }} animDelay={180} cornerGlyph="OFFEN">
|
|||
|
|
<BLabel>Unverschlüsselt</BLabel>
|
|||
|
|
<div style={{ fontSize: 48, fontWeight: 700, letterSpacing: -1.2, color: C_ERROR, marginTop: 8 }}><BigNumber value={d.security.unencrypted} animateKey={k} /></div>
|
|||
|
|
<div style={{ marginTop: 'auto', fontSize: 12, color: 'rgba(244,245,247,0.62)' }}>BitLocker deaktiviert</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
<BTile style={{ gridColumn: 'span 2', gridRow: 'span 2' }} animDelay={240} cornerGlyph="LETZTER">
|
|||
|
|
<BLabel>Report</BLabel>
|
|||
|
|
<div style={{ fontSize: 22, fontWeight: 700, marginTop: 8, letterSpacing: -0.5, fontFeatureSettings: '"tnum" 1' }}>{d.security.lastReport}</div>
|
|||
|
|
<div style={{ marginTop: 'auto', fontSize: 12, color: 'rgba(244,245,247,0.62)' }}>SIEM · auto</div>
|
|||
|
|
</BTile>
|
|||
|
|
</BentoGrid>
|
|||
|
|
</SlideWrap>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 5 – Helpdesk */
|
|||
|
|
function SlideHelpdesk({ d, k }) {
|
|||
|
|
const prios = [
|
|||
|
|
{ label: 'Kritisch', v: d.tickets.byPriority.critical, c: C_ERROR },
|
|||
|
|
{ label: 'Hoch', v: d.tickets.byPriority.high, c: C_WARN },
|
|||
|
|
{ label: 'Mittel', v: d.tickets.byPriority.medium, c: C_INFO },
|
|||
|
|
{ label: 'Niedrig', v: d.tickets.byPriority.low, c: 'rgba(244,245,247,0.62)' },
|
|||
|
|
];
|
|||
|
|
return (
|
|||
|
|
<SlideWrap k={k} tint="mint">
|
|||
|
|
<SlideHeader eyebrow="Helpdesk" title="Saubere" accentSpan="Inbox" />
|
|||
|
|
<BentoGrid>
|
|||
|
|
<BTile variant="success" style={{ gridColumn: 'span 7', gridRow: 'span 4' }} animDelay={0} cornerGlyph="OFFEN · GESAMT">
|
|||
|
|
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
|
|||
|
|
<div style={{ fontSize: 200, fontWeight: 700, color: C_OK, lineHeight: 0.92, letterSpacing: -7,
|
|||
|
|
filter: 'drop-shadow(0 0 40px rgba(52,211,153,0.35))', fontFeatureSettings: '"tnum" 1' }}>
|
|||
|
|
<BigNumber value={d.tickets.open} animateKey={k} />
|
|||
|
|
</div>
|
|||
|
|
<div style={{ marginTop: 16, fontSize: 18, color: 'rgba(244,245,247,0.62)' }}>offene Tickets · {d.tickets.byPriority.critical === 0 ? 'keine Eskalationen' : `${d.tickets.byPriority.critical} kritisch`}</div>
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
<BTile style={{ gridColumn: 'span 5', gridRow: 'span 2' }} animDelay={120} cornerGlyph="PRIORITÄT">
|
|||
|
|
<BLabel>Verteilung</BLabel>
|
|||
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 12, flex: 1, justifyContent: 'space-around' }}>
|
|||
|
|
{prios.map(p => (
|
|||
|
|
<div key={p.label} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|||
|
|
<span style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
|||
|
|
<span style={{ width: 8, height: 8, borderRadius: 99, background: p.c, boxShadow: `0 0 8px ${p.c}88` }} />
|
|||
|
|
<span style={{ fontSize: 16, fontWeight: 500 }}>{p.label}</span>
|
|||
|
|
</span>
|
|||
|
|
<span style={{ fontSize: 22, fontWeight: 700, color: p.c, fontFeatureSettings: '"tnum" 1' }}><BigNumber value={p.v} animateKey={k} /></span>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
<BTile style={{ gridColumn: 'span 5', gridRow: 'span 2' }} animDelay={180} cornerGlyph="VERLAUF · 7 T">
|
|||
|
|
<BLabel>Tickets pro Tag</BLabel>
|
|||
|
|
<div style={{ flex: 1, marginTop: 12 }}>
|
|||
|
|
<Sparkline data={d.tickets.perDay7.length > 0 ? d.tickets.perDay7 : [0, 0, 0, 0, 0, 0, 0]} color={ACCENT} width={500} height={130} />
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'rgba(244,245,247,0.38)' }}>
|
|||
|
|
{['Mo','Di','Mi','Do','Fr','Sa','So'].map(d => <span key={d}>{d}</span>)}
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
</BentoGrid>
|
|||
|
|
</SlideWrap>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 6 – Network */
|
|||
|
|
function SlideNetwork({ d, k }) {
|
|||
|
|
const trends = d.network.map((s, i) => Array.from({ length: 12 }, (_, j) => {
|
|||
|
|
const base = parseInt(s.latency, 10) || 20;
|
|||
|
|
return base + Math.sin(j * 0.6 + i) * (s.status === 'warn' ? 80 : 10) + (j % 3) * 4;
|
|||
|
|
}));
|
|||
|
|
const okCount = d.network.filter(s => s.status === 'ok').length;
|
|||
|
|
const warnCount = d.network.filter(s => s.status === 'warn').length;
|
|||
|
|
return (
|
|||
|
|
<SlideWrap k={k} tint="blue">
|
|||
|
|
<SlideHeader eyebrow="Netzwerk & Services" title="Konnek-" accentSpan="tivität"
|
|||
|
|
right={<div style={{ fontSize: 14, color: 'rgba(244,245,247,0.62)', textAlign: 'right' }}>
|
|||
|
|
<div><span style={{ color: C_OK }}>● </span>{okCount} OK</div>
|
|||
|
|
{warnCount > 0 && <div><span style={{ color: C_WARN }}>● </span>{warnCount} Warnung</div>}
|
|||
|
|
</div>}
|
|||
|
|
/>
|
|||
|
|
<BentoGrid>
|
|||
|
|
{d.network.map((s, i) => {
|
|||
|
|
const color = s.status === 'ok' ? C_OK : s.status === 'warn' ? C_WARN : C_ERROR;
|
|||
|
|
const variant = s.status === 'warn' ? 'warn' : s.status === 'error' ? 'danger' : '';
|
|||
|
|
return (
|
|||
|
|
<BTile key={s.name} variant={variant} style={{ gridColumn: 'span 3', gridRow: 'span 2' }} animDelay={i * 60}>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
|
|||
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
|||
|
|
<StatusDot status={s.status} size={10} />
|
|||
|
|
<div style={{ fontSize: 17, fontWeight: 600 }}>{s.name}</div>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ width: 70, height: 22, opacity: 0.7 }}>
|
|||
|
|
<Sparkline data={trends[i]} color={color} width={70} height={22} fill={false} strokeW={1.5} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ fontSize: 30, fontWeight: 700, color, letterSpacing: -0.5, fontFeatureSettings: '"tnum" 1' }}>{s.latency}</div>
|
|||
|
|
<div style={{ marginTop: 'auto', fontSize: 12, color: 'rgba(244,245,247,0.62)' }}>{s.detail}</div>
|
|||
|
|
</BTile>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</BentoGrid>
|
|||
|
|
</SlideWrap>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 7 – Backup */
|
|||
|
|
function SlideBackup({ d, k }) {
|
|||
|
|
return (
|
|||
|
|
<SlideWrap k={k} tint="mint">
|
|||
|
|
<SlideHeader eyebrow="Backup · Datenschutz im Hintergrund" title="24 h" accentSpan="im Grünen" />
|
|||
|
|
<BentoGrid>
|
|||
|
|
<BTile variant="hero" style={{ gridColumn: 'span 5', gridRow: 'span 4' }} animDelay={0} cornerGlyph="ABDECKUNG">
|
|||
|
|
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|||
|
|
<Donut value={d.backups.coverage} size={240} stroke={18} color={C_OK} animateKey={k} label="Erfolgreich" />
|
|||
|
|
</div>
|
|||
|
|
<div style={{ textAlign: 'center', fontSize: 14, color: 'rgba(244,245,247,0.62)' }}>Letzte Sicherung um {d.backups.lastSuccess} Uhr</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
<BTile style={{ gridColumn: 'span 7', gridRow: 'span 2' }} animDelay={120} cornerGlyph="14 TAGE">
|
|||
|
|
<BLabel>Verlauf</BLabel>
|
|||
|
|
<div style={{ flex: 1, marginTop: 8 }}>
|
|||
|
|
<Sparkline data={d.backups.trend14d} color={C_OK} width={800} height={150} />
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'rgba(244,245,247,0.38)' }}>
|
|||
|
|
<span>vor 14 Tagen</span>
|
|||
|
|
<span>Min {Math.min(...d.backups.trend14d)} % · jetzt {d.backups.trend14d[d.backups.trend14d.length - 1]} %</span>
|
|||
|
|
</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
<BTile variant="success" style={{ gridColumn: 'span 3', gridRow: 'span 2' }} animDelay={200} cornerGlyph="OK">
|
|||
|
|
<BLabel>Erfolgreich</BLabel>
|
|||
|
|
<div style={{ fontSize: 48, fontWeight: 700, letterSpacing: -1.2, color: C_OK, marginTop: 8 }}><BigNumber value={d.backups.successful} animateKey={k} /></div>
|
|||
|
|
<div style={{ marginTop: 'auto', fontSize: 12, color: 'rgba(244,245,247,0.62)' }}>24 Std</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
<BTile variant="info" style={{ gridColumn: 'span 2', gridRow: 'span 2' }} animDelay={260} cornerGlyph="LIVE">
|
|||
|
|
<BLabel>Laufend</BLabel>
|
|||
|
|
<div style={{ fontSize: 48, fontWeight: 700, letterSpacing: -1.2, color: C_INFO, marginTop: 8 }}><BigNumber value={d.backups.running} animateKey={k} /></div>
|
|||
|
|
<div style={{ marginTop: 'auto', fontSize: 12, color: 'rgba(244,245,247,0.62)' }}>Jobs aktiv</div>
|
|||
|
|
</BTile>
|
|||
|
|
|
|||
|
|
<BTile variant={d.backups.failed > 0 ? 'warn' : 'success'} style={{ gridColumn: 'span 2', gridRow: 'span 2' }} animDelay={320} cornerGlyph="FAIL">
|
|||
|
|
<BLabel>Fehler</BLabel>
|
|||
|
|
<div style={{ fontSize: 48, fontWeight: 700, letterSpacing: -1.2, color: d.backups.failed > 0 ? C_WARN : C_OK, marginTop: 8 }}><BigNumber value={d.backups.failed} animateKey={k} /></div>
|
|||
|
|
<div style={{ marginTop: 'auto', fontSize: 11, lineHeight: 1.3, color: 'rgba(244,245,247,0.62)' }}>{d.backups.lastFailJob}</div>
|
|||
|
|
</BTile>
|
|||
|
|
</BentoGrid>
|
|||
|
|
</SlideWrap>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 8 – CVE Watch */
|
|||
|
|
function SlideCVE({ d, k }) {
|
|||
|
|
const [top, ...rest] = d.cves;
|
|||
|
|
const sevCount = { critical: 0, high: 0, medium: 0, low: 0 };
|
|||
|
|
d.cves.forEach(c => sevCount[c.sev] = (sevCount[c.sev] || 0) + 1);
|
|||
|
|
const sevStyle = {
|
|||
|
|
critical: { bg: 'rgba(244,63,94,0.15)', color: '#FCA5A5', border: 'rgba(244,63,94,0.3)' },
|
|||
|
|
high: { bg: 'rgba(245,158,11,0.15)', color: '#FCD34D', border: 'rgba(245,158,11,0.3)' },
|
|||
|
|
medium: { bg: 'rgba(96,165,250,0.15)', color: '#93C5FD', border: 'rgba(96,165,250,0.3)' },
|
|||
|
|
low: { bg: 'rgba(148,163,184,0.15)', color: '#CBD5E1', border: 'rgba(148,163,184,0.25)' },
|
|||
|
|
};
|
|||
|
|
const SevPill = ({ sev, cvss }) => {
|
|||
|
|
const s = sevStyle[sev] || sevStyle.low;
|
|||
|
|
return (
|
|||
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 10px', borderRadius: 999, fontSize: 11, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase', background: s.bg, color: s.color, border: `1px solid ${s.border}` }}>
|
|||
|
|
{sev} · CVSS {cvss}
|
|||
|
|
</span>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
return (
|
|||
|
|
<SlideWrap k={k} tint="violet">
|
|||
|
|
<SlideHeader eyebrow="CVE Watch · Vendor Advisories" title="Schwach-" accentSpan="stellen"
|
|||
|
|
right={<div style={{ display: 'flex', gap: 16, fontSize: 13, color: 'rgba(244,245,247,0.62)' }}>
|
|||
|
|
<span><span style={{ color: '#FCA5A5' }}>● </span>{sevCount.critical || 0} critical</span>
|
|||
|
|
<span><span style={{ color: '#FCD34D' }}>● </span>{sevCount.high || 0} high</span>
|
|||
|
|
<span><span style={{ color: '#93C5FD' }}>● </span>{sevCount.medium || 0} medium</span>
|
|||
|
|
</div>}
|
|||
|
|
/>
|
|||
|
|
<BentoGrid>
|
|||
|
|
<BTile variant="danger" style={{ gridColumn: 'span 12', gridRow: 'span 3' }} animDelay={0} cornerGlyph={`#1 · ${top.id}`}>
|
|||
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
|||
|
|
<SevPill sev={top.sev} cvss={top.cvss} />
|
|||
|
|
<span style={{ fontSize: 13, color: 'rgba(244,245,247,0.62)' }}>vor {top.published}</span>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ fontSize: 38, fontWeight: 600, marginTop: 12, letterSpacing: -0.8, lineHeight: 1.1 }}>
|
|||
|
|
{top.title}
|
|||
|
|
</div>
|
|||
|
|
<div style={{ marginTop: 'auto', fontSize: 15, color: 'rgba(244,245,247,0.62)' }}>{top.vendor} · Sicherheitshinweis</div>
|
|||
|
|
</BTile>
|
|||
|
|
{rest.map((c, i) => (
|
|||
|
|
<BTile key={c.id} variant={c.sev === 'high' ? 'warn' : 'info'} style={{ gridColumn: 'span 6', gridRow: 'span 2' }} animDelay={120 + i * 80} cornerGlyph={c.id}>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
|||
|
|
<SevPill sev={c.sev} cvss={c.cvss} />
|
|||
|
|
<span style={{ fontSize: 12, color: 'rgba(244,245,247,0.62)' }}>vor {c.published}</span>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ fontSize: 22, fontWeight: 600, marginTop: 12, letterSpacing: -0.4, lineHeight: 1.2 }}>{c.title}</div>
|
|||
|
|
<div style={{ marginTop: 'auto', fontSize: 13, color: 'rgba(244,245,247,0.62)' }}>{c.vendor}</div>
|
|||
|
|
</BTile>
|
|||
|
|
))}
|
|||
|
|
</BentoGrid>
|
|||
|
|
</SlideWrap>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ════════════════════════════════════════════════════════════
|
|||
|
|
MAIN
|
|||
|
|
════════════════════════════════════════════════════════════ */
|
|||
|
|
const SLIDE_DURATION = 12000;
|
|||
|
|
|
|||
|
|
const SLIDES = [
|
|||
|
|
{ id: 'overview', title: 'Übersicht', Component: SlideOverview },
|
|||
|
|
{ id: 'agents', title: 'Windows Agents', Component: SlideAgents },
|
|||
|
|
{ id: 'compliance', title: 'Patch Compliance', Component: SlideCompliance },
|
|||
|
|
{ id: 'security', title: 'Sicherheit', Component: SlideSecurity },
|
|||
|
|
{ id: 'helpdesk', title: 'Helpdesk', Component: SlideHelpdesk },
|
|||
|
|
{ id: 'network', title: 'Netzwerk', Component: SlideNetwork },
|
|||
|
|
{ id: 'backup', title: 'Backup', Component: SlideBackup },
|
|||
|
|
{ id: 'cve', title: 'CVE Watch', Component: SlideCVE },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
export default function TVDashboardPage() {
|
|||
|
|
const [rawData, setRawData] = useState({});
|
|||
|
|
const [idx, setIdx] = useState(0);
|
|||
|
|
const [k, setK] = useState(0);
|
|||
|
|
const [paused, setPaused] = useState(false);
|
|||
|
|
const scale = useStageScale(1920, 1080);
|
|||
|
|
|
|||
|
|
const loadData = useCallback(async () => {
|
|||
|
|
const r = await apiFetch(`${API}/tv/stats`);
|
|||
|
|
if (!r?.data) return;
|
|||
|
|
const d = r.data;
|
|||
|
|
const agents = d.agentList || [];
|
|||
|
|
const noEncrypt = agents.filter(a => a.bitlocker_status && !['encrypted', 'on'].includes(String(a.bitlocker_status).toLowerCase())).length;
|
|||
|
|
setRawData({
|
|||
|
|
monitoring: { ...d.monitoring, noEncrypt },
|
|||
|
|
agentList: agents,
|
|||
|
|
tickets: d.tickets || {},
|
|||
|
|
patch: d.patch || {},
|
|||
|
|
lastSecReport: d.lastSecReport || null,
|
|||
|
|
ticketMetrics: d.ticketMetrics || {},
|
|||
|
|
});
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => { loadData(); const id = setInterval(loadData, 60000); return () => clearInterval(id); }, [loadData]);
|
|||
|
|
|
|||
|
|
const goTo = useCallback((i) => { setIdx(i); setK(x => x + 1); }, []);
|
|||
|
|
const next = useCallback(() => goTo((idx + 1) % SLIDES.length), [idx, goTo]);
|
|||
|
|
const prev = useCallback(() => goTo((idx - 1 + SLIDES.length) % SLIDES.length), [idx, goTo]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (paused) return;
|
|||
|
|
const t = setTimeout(next, SLIDE_DURATION);
|
|||
|
|
return () => clearTimeout(t);
|
|||
|
|
}, [idx, paused, next]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const h = (e) => {
|
|||
|
|
if (e.key === 'ArrowRight' || e.key === ' ') { next(); e.preventDefault(); }
|
|||
|
|
else if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }
|
|||
|
|
else if (e.key === 'p' || e.key === 'P') setPaused(x => !x);
|
|||
|
|
else if (e.key === 'f' || e.key === 'F') {
|
|||
|
|
if (document.fullscreenElement) document.exitFullscreen?.();
|
|||
|
|
else document.documentElement.requestFullscreen?.();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
window.addEventListener('keydown', h);
|
|||
|
|
return () => window.removeEventListener('keydown', h);
|
|||
|
|
}, [next, prev]);
|
|||
|
|
|
|||
|
|
const d = processData(rawData);
|
|||
|
|
const { Component } = SLIDES[idx];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{ position: 'fixed', inset: 0, background: '#000', overflow: 'hidden', userSelect: 'none',
|
|||
|
|
fontFamily: '"SF Pro Display","Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif',
|
|||
|
|
WebkitFontSmoothing: 'antialiased' }}>
|
|||
|
|
|
|||
|
|
{/* ── 1920×1080 scaled stage ── */}
|
|||
|
|
<div style={{
|
|||
|
|
position: 'absolute', top: '50%', left: '50%',
|
|||
|
|
width: 1920, height: 1080,
|
|||
|
|
transform: `translate(-50%, -50%) scale(${scale})`,
|
|||
|
|
transformOrigin: 'center center',
|
|||
|
|
overflow: 'hidden',
|
|||
|
|
}}>
|
|||
|
|
<Component d={d} k={k} />
|
|||
|
|
<BrandChip section={SLIDES[idx].title} />
|
|||
|
|
<ClockBig />
|
|||
|
|
<SlideIndicator total={SLIDES.length} active={idx} durationMs={SLIDE_DURATION} autoplay={!paused} />
|
|||
|
|
|
|||
|
|
{/* Controls overlay (bottom) */}
|
|||
|
|
<div style={{ position: 'absolute', bottom: 28, left: '50%', transform: 'translateX(-50%)', display: 'flex', alignItems: 'center', gap: 12, zIndex: 10 }}>
|
|||
|
|
<button onClick={prev} style={ctrlBtn}>‹</button>
|
|||
|
|
<button onClick={() => setPaused(x => !x)} style={ctrlBtn}>{paused ? '▶' : '⏸'}</button>
|
|||
|
|
<button onClick={next} style={ctrlBtn}>›</button>
|
|||
|
|
<button onClick={() => { if (document.fullscreenElement) document.exitFullscreen?.(); else document.documentElement.requestFullscreen?.(); }} style={{ ...ctrlBtn, marginLeft: 8 }}>⛶</button>
|
|||
|
|
<span style={{ fontSize: 11, color: 'rgba(255,255,255,0.2)', letterSpacing: 0.5, marginLeft: 4 }}>
|
|||
|
|
{idx + 1}/{SLIDES.length} · ←/→ · P · F
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<style>{`
|
|||
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
|
|||
|
|
|
|||
|
|
/* ── Mesh blobs ── */
|
|||
|
|
.tv-blob { position: absolute; border-radius: 50%; filter: blur(140px); will-change: transform; }
|
|||
|
|
.tv-b1 { width: 1200px; height: 1200px; left: -200px; top: -300px; animation: tvBlob1 22s ease-in-out infinite alternate; }
|
|||
|
|
.tv-b2 { width: 1000px; height: 1000px; right: -200px; top: -100px; animation: tvBlob2 28s ease-in-out infinite alternate; }
|
|||
|
|
.tv-b3 { width: 900px; height: 900px; left: 20%; bottom: -300px; animation: tvBlob3 32s ease-in-out infinite alternate; }
|
|||
|
|
.tv-b4 { width: 800px; height: 800px; right: 10%; bottom: -200px; animation: tvBlob4 26s ease-in-out infinite alternate; }
|
|||
|
|
@keyframes tvBlob1 { from { transform: translate(0,0) scale(1); } to { transform: translate(180px,120px) scale(1.1); } }
|
|||
|
|
@keyframes tvBlob2 { from { transform: translate(0,0) scale(1.05); } to { transform: translate(-120px,200px) scale(0.95); } }
|
|||
|
|
@keyframes tvBlob3 { from { transform: translate(0,0) scale(0.95); } to { transform: translate(220px,-160px) scale(1.1); } }
|
|||
|
|
@keyframes tvBlob4 { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-180px,-100px) scale(0.9); } }
|
|||
|
|
|
|||
|
|
/* ── Brand dot pulse ── */
|
|||
|
|
.tv-brand-dot {
|
|||
|
|
display: inline-block; width: 9px; height: 9px; border-radius: 50%;
|
|||
|
|
box-shadow: 0 0 14px currentColor, 0 0 4px currentColor;
|
|||
|
|
animation: tvBrandPulse 2.4s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes tvBrandPulse {
|
|||
|
|
0%,100% { opacity:1; box-shadow:0 0 14px currentColor,0 0 4px currentColor; }
|
|||
|
|
50% { opacity:0.55; box-shadow:0 0 8px currentColor,0 0 3px currentColor; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Status dot pulse ── */
|
|||
|
|
.tv-dot-pulse { animation: tvDotPulse 2.4s ease-in-out infinite; }
|
|||
|
|
@keyframes tvDotPulse {
|
|||
|
|
0%,100% { transform:scale(1); opacity:1; }
|
|||
|
|
50% { transform:scale(1.25); opacity:0.7; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Number punch ── */
|
|||
|
|
.tv-number-punch { display:inline-block; animation: tvNumberPunch 480ms cubic-bezier(.2,.7,.2,1) 1400ms both; }
|
|||
|
|
@keyframes tvNumberPunch {
|
|||
|
|
0% { transform:scale(1); } 60% { transform:scale(1.025); } 100% { transform:scale(1); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Slide entry ── */
|
|||
|
|
@keyframes tvSlideUp {
|
|||
|
|
from { transform: translateY(28px); }
|
|||
|
|
to { transform: translateY(0); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Tile entry ── */
|
|||
|
|
@keyframes tvTileIn {
|
|||
|
|
from { transform: translateY(24px) scale(0.985); }
|
|||
|
|
to { transform: translateY(0) scale(1); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Heat cell entry ── */
|
|||
|
|
@keyframes tvHeatIn {
|
|||
|
|
from { transform: scale(0.4); }
|
|||
|
|
to { transform: scale(1); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Slide indicator fill ── */
|
|||
|
|
@keyframes tvSiFill {
|
|||
|
|
from { width: 0%; }
|
|||
|
|
to { width: 100%; }
|
|||
|
|
}
|
|||
|
|
`}</style>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ctrlBtn = {
|
|||
|
|
background: 'rgba(255,255,255,0.08)',
|
|||
|
|
border: '1px solid rgba(255,255,255,0.14)',
|
|||
|
|
color: 'rgba(255,255,255,0.55)',
|
|||
|
|
borderRadius: 10, width: 36, height: 36,
|
|||
|
|
cursor: 'pointer', fontSize: 16,
|
|||
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|||
|
|
transition: 'all 0.15s',
|
|||
|
|
};
|