27192dd69f
Frontend redesign in progress: updated styles, layout, and components across all pages to align with new design system. Includes Jira API compliance specs, property tests, and load test script.
394 lines
18 KiB
JavaScript
394 lines
18 KiB
JavaScript
// ReportPrimitives.jsx — Reporting-specific UI vocabulary.
|
||
// All inline styles + tokens from ../../colors_and_type.css.
|
||
// Mirrors the live Reporting page (frontend/src/components/pages/ReportingPage.js)
|
||
// after the Knowledge-Base alignment pass.
|
||
|
||
const { useState: useRPTState } = React;
|
||
|
||
/* ─────────────────────────────────────────────────────────────────
|
||
COLOR ROLE MAP (Reporting)
|
||
──────────────────────────────────────────────────────────────────
|
||
Sky-blue (#0EA5E9) → primary surface accent (panel borders,
|
||
tab pill active, donut highlight, table
|
||
header text, neutral secondary buttons)
|
||
Green (#10B981) → page identity (header glow + primary
|
||
Sync button)
|
||
Amber (#F59E0B) → filter-active indicator, anomaly callout
|
||
Red (#EF4444) → error / overdue
|
||
Slate stack → muted text + dividers (#475569 → #334155)
|
||
──────────────────────────────────────────────────────────────── */
|
||
|
||
const COLORS = {
|
||
sky: '#0EA5E9',
|
||
skySoft: '#7DD3FC',
|
||
green: '#10B981',
|
||
amber: '#F59E0B',
|
||
red: '#EF4444',
|
||
redSoft: '#FCA5A5',
|
||
};
|
||
|
||
/* ── Page header ─────────────────────────────────────────────────
|
||
Big mono uppercase title in green w/ glow + count subtitle.
|
||
Right side: neutral icon-tinted secondaries + tinted-fill primary.
|
||
Lifted from the existing Knowledge Base page header pattern. */
|
||
function PageHeader({ title = 'Reporting', meta, children }) {
|
||
return (
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 }}>
|
||
<div>
|
||
<h2 style={{
|
||
fontFamily: 'var(--font-mono)', fontSize: 24, fontWeight: 700,
|
||
color: COLORS.green, textTransform: 'uppercase', letterSpacing: '0.1em',
|
||
textShadow: '0 0 16px rgba(16,185,129,0.25)',
|
||
margin: '0 0 4px 0',
|
||
}}>
|
||
{title}
|
||
</h2>
|
||
{meta && (
|
||
<div style={{ fontSize: 12, color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)' }}>
|
||
{meta}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 8, flexShrink: 0, alignItems: 'center' }}>
|
||
{children}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ── Buttons ─────────────────────────────────────────────────────
|
||
THREE variants documented for Reporting:
|
||
• primary — green tinted-fill (lone primary action: Sync)
|
||
• neutral — sky outlined transparent (Atlas, refresh, etc.)
|
||
• subtle — sky tinted-fill (Export, Queue, Column manager)
|
||
*/
|
||
function RptButton({ variant = 'neutral', icon, children, disabled, ...rest }) {
|
||
const [hover, setHover] = useRPTState(false);
|
||
const v = {
|
||
primary: {
|
||
bgRest: 'rgba(16,185,129,0.18)',
|
||
bgHover: 'rgba(16,185,129,0.26)',
|
||
bd: COLORS.green, fg: COLORS.green,
|
||
},
|
||
neutral: {
|
||
bgRest: 'transparent',
|
||
bgHover: 'rgba(14,165,233,0.06)',
|
||
bd: 'rgba(14,165,233,0.25)', fg: COLORS.sky,
|
||
},
|
||
subtle: {
|
||
bgRest: 'rgba(14,165,233,0.08)',
|
||
bgHover: 'rgba(14,165,233,0.16)',
|
||
bd: 'rgba(14,165,233,0.35)', fg: COLORS.sky,
|
||
},
|
||
danger: {
|
||
bgRest: 'rgba(239,68,68,0.08)',
|
||
bgHover: 'rgba(239,68,68,0.16)',
|
||
bd: 'rgba(239,68,68,0.30)', fg: COLORS.red,
|
||
},
|
||
}[variant];
|
||
return (
|
||
<button
|
||
disabled={disabled}
|
||
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
||
style={{
|
||
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||
background: hover && !disabled ? v.bgHover : v.bgRest,
|
||
border: `1px solid ${hover && !disabled && variant === 'neutral' ? 'rgba(14,165,233,0.55)' : v.bd}`,
|
||
color: disabled ? 'var(--fg-disabled)' : v.fg,
|
||
padding: '8px 14px', borderRadius: 6,
|
||
fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
|
||
textTransform: 'uppercase', letterSpacing: '0.05em',
|
||
cursor: disabled ? 'not-allowed' : 'pointer',
|
||
opacity: disabled ? 0.5 : 1,
|
||
transition: 'all 150ms cubic-bezier(0.4,0,0.2,1)',
|
||
}}
|
||
{...rest}
|
||
>
|
||
{icon}{children}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
/* ── KB-style card (sky) — used for donuts + findings panel ──── */
|
||
function KbCard({ children, padding = 16, label, labelExtra, hover = true, style }) {
|
||
const [h, setH] = useRPTState(false);
|
||
return (
|
||
<div
|
||
onMouseEnter={() => hover && setH(true)} onMouseLeave={() => setH(false)}
|
||
style={{
|
||
background: 'linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%)',
|
||
border: `1.5px solid ${h ? 'rgba(14,165,233,0.35)' : 'rgba(14,165,233,0.12)'}`,
|
||
borderRadius: 8, padding,
|
||
display: 'flex', flexDirection: 'column', gap: 10,
|
||
transition: 'border-color 150ms cubic-bezier(0.4,0,0.2,1)',
|
||
...style,
|
||
}}>
|
||
{label && (
|
||
<div style={{
|
||
fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
|
||
color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.1em',
|
||
paddingBottom: 8,
|
||
borderBottom: '1px solid rgba(255,255,255,0.04)',
|
||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||
}}>
|
||
<span>{label}</span>
|
||
{labelExtra}
|
||
</div>
|
||
)}
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ── Pill tab (Ivanti / Atlas) ───────────────────────────────── */
|
||
function PillTab({ active, color = COLORS.sky, onClick, children }) {
|
||
const [hover, setHover] = useRPTState(false);
|
||
return (
|
||
<button
|
||
onClick={onClick}
|
||
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
||
style={{
|
||
padding: '6px 12px',
|
||
fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
|
||
textTransform: 'uppercase', letterSpacing: '0.05em',
|
||
cursor: 'pointer', borderRadius: 4,
|
||
border: `1px solid ${active ? color : (hover ? 'rgba(255,255,255,0.10)' : 'transparent')}`,
|
||
background: active ? `${color}26` : 'transparent',
|
||
color: active ? color : (hover ? '#94A3B8' : 'var(--fg-muted)'),
|
||
transition: 'all 120ms',
|
||
}}
|
||
>
|
||
{children}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
/* ── Filter chip (active filter pin in the toolbar) ──────────── */
|
||
function FilterChip({ color = COLORS.amber, onClear, children }) {
|
||
return (
|
||
<button
|
||
onClick={onClear}
|
||
style={{
|
||
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||
padding: '6px 12px',
|
||
background: `${color}14`,
|
||
border: `1px solid ${color}4D`,
|
||
borderRadius: 6,
|
||
color, cursor: 'pointer',
|
||
fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
|
||
letterSpacing: '0.05em',
|
||
}}
|
||
>
|
||
<RptIcon.Filter size={11} />
|
||
{children}
|
||
<span style={{ marginLeft: 2, opacity: 0.7 }}>×</span>
|
||
</button>
|
||
);
|
||
}
|
||
|
||
/* ── Status banner (error / Atlas error / sync error) ────────── */
|
||
function StatusBanner({ tone = 'error', children }) {
|
||
const tones = {
|
||
error: { bg: 'rgba(239,68,68,0.08)', bd: 'rgba(239,68,68,0.25)', fg: COLORS.redSoft, icon: COLORS.red },
|
||
warn: { bg: 'rgba(245,158,11,0.10)', bd: 'rgba(245,158,11,0.28)', fg: '#FCD34D', icon: COLORS.amber },
|
||
info: { bg: 'rgba(14,165,233,0.08)', bd: 'rgba(14,165,233,0.25)', fg: COLORS.skySoft, icon: COLORS.sky },
|
||
};
|
||
const t = tones[tone];
|
||
return (
|
||
<div style={{
|
||
display: 'flex', alignItems: 'flex-start', gap: 8,
|
||
padding: '10px 14px', background: t.bg, border: `1px solid ${t.bd}`,
|
||
borderRadius: 8,
|
||
}}>
|
||
<RptIcon.AlertCircle size={15} style={{ color: t.icon, flexShrink: 0, marginTop: 1 }} />
|
||
<span style={{ fontSize: 12, color: t.fg, fontFamily: 'var(--font-mono)' }}>{children}</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ── Toolbar label (small mono uppercase, used inside findings panel) ── */
|
||
function ToolbarLabel({ children, accent = COLORS.sky, count }) {
|
||
return (
|
||
<div style={{
|
||
fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
|
||
color: accent, textTransform: 'uppercase', letterSpacing: '0.1em',
|
||
}}>
|
||
{children}
|
||
{count != null && (
|
||
<span style={{ marginLeft: 10, color: '#334155', fontWeight: 400 }}>
|
||
{count}
|
||
</span>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ── Severity dot (used in table rows) ───────────────────────── */
|
||
function SeverityDot({ level }) {
|
||
const map = {
|
||
Critical: { c: COLORS.red, text: '#FCA5A5' },
|
||
High: { c: COLORS.amber, text: '#FCD34D' },
|
||
Medium: { c: COLORS.sky, text: '#7DD3FC' },
|
||
Low: { c: COLORS.green, text: '#6EE7B7' },
|
||
Info: { c: '#94A3B8', text: '#CBD5E1' },
|
||
};
|
||
const v = map[level] || map.Info;
|
||
return (
|
||
<span style={{
|
||
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||
fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
|
||
color: v.text, letterSpacing: '0.04em',
|
||
}}>
|
||
<span style={{
|
||
width: 7, height: 7, borderRadius: '50%', background: v.c,
|
||
boxShadow: `0 0 6px ${v.c}99`,
|
||
}} />
|
||
{level}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
/* ── SLA pill (table cell) ───────────────────────────────────── */
|
||
function SlaPill({ status }) {
|
||
const map = {
|
||
OVERDUE: { c: COLORS.red, bg: 'rgba(239,68,68,0.16)' },
|
||
AT_RISK: { c: COLORS.amber, bg: 'rgba(245,158,11,0.16)' },
|
||
WITHIN_SLA: { c: COLORS.green, bg: 'rgba(16,185,129,0.16)' },
|
||
};
|
||
const v = map[status] || map.WITHIN_SLA;
|
||
return (
|
||
<span style={{
|
||
padding: '2px 8px', borderRadius: 999,
|
||
background: v.bg, color: v.c,
|
||
fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 10,
|
||
letterSpacing: '0.05em',
|
||
}}>
|
||
{status.replace('_', ' ')}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
/* ── Workflow badge (table cell) ─────────────────────────────── */
|
||
function WorkflowBadge({ state }) {
|
||
const map = {
|
||
OPEN: { c: COLORS.sky, bg: 'rgba(14,165,233,0.14)' },
|
||
FP: { c: COLORS.amber, bg: 'rgba(245,158,11,0.14)' },
|
||
EXC: { c: '#A78BFA', bg: 'rgba(167,139,250,0.14)' },
|
||
REMEDIATED:{ c: COLORS.green, bg: 'rgba(16,185,129,0.14)' },
|
||
ARCHIVED: { c: '#94A3B8', bg: 'rgba(148,163,184,0.14)' },
|
||
};
|
||
const v = map[state] || { c: 'var(--fg-muted)', bg: 'rgba(148,163,184,0.10)' };
|
||
return (
|
||
<span style={{
|
||
padding: '2px 8px', borderRadius: 4,
|
||
background: v.bg, color: v.c, border: `1px solid ${v.c}55`,
|
||
fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 10,
|
||
letterSpacing: '0.05em',
|
||
}}>
|
||
{state}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
/* ── Donut placeholder — semantic stand-in for the real recharts donut ── */
|
||
function DonutSample({ size = 130, segments, centerLabel, centerValue }) {
|
||
// segments: [{ label, value, color }]
|
||
const total = segments.reduce((s, x) => s + x.value, 0);
|
||
const cx = size / 2, cy = size / 2;
|
||
const outerR = size / 2 - 4, innerR = outerR - 16;
|
||
let angle = -90;
|
||
const arcs = segments.map((seg) => {
|
||
const sweep = (seg.value / total) * 360;
|
||
const a0 = (angle * Math.PI) / 180;
|
||
const a1 = ((angle + sweep) * Math.PI) / 180;
|
||
const large = sweep > 180 ? 1 : 0;
|
||
const x0 = cx + outerR * Math.cos(a0), y0 = cy + outerR * Math.sin(a0);
|
||
const x1 = cx + outerR * Math.cos(a1), y1 = cy + outerR * Math.sin(a1);
|
||
const xi1 = cx + innerR * Math.cos(a1), yi1 = cy + innerR * Math.sin(a1);
|
||
const xi0 = cx + innerR * Math.cos(a0), yi0 = cy + innerR * Math.sin(a0);
|
||
const d = `M ${x0} ${y0} A ${outerR} ${outerR} 0 ${large} 1 ${x1} ${y1}
|
||
L ${xi1} ${yi1} A ${innerR} ${innerR} 0 ${large} 0 ${xi0} ${yi0} Z`;
|
||
angle += sweep;
|
||
return { d, color: seg.color };
|
||
});
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
|
||
<div style={{ position: 'relative' }}>
|
||
<svg width={size} height={size}>
|
||
{arcs.map((a, i) => (
|
||
<path key={i} d={a.d} fill={a.color} stroke="rgba(15,23,42,0.95)" strokeWidth="1" />
|
||
))}
|
||
</svg>
|
||
<div style={{
|
||
position: 'absolute', inset: 0,
|
||
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
|
||
pointerEvents: 'none',
|
||
}}>
|
||
<div style={{
|
||
fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 700,
|
||
color: 'var(--fg-1)', lineHeight: 1,
|
||
}}>{centerValue}</div>
|
||
{centerLabel && (
|
||
<div style={{
|
||
fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600,
|
||
color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.12em',
|
||
marginTop: 4,
|
||
}}>
|
||
{centerLabel}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{/* Legend */}
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px 10px', justifyContent: 'center', maxWidth: size + 32 }}>
|
||
{segments.map((s) => (
|
||
<div key={s.label} style={{
|
||
display: 'inline-flex', alignItems: 'center', gap: 4,
|
||
fontFamily: 'var(--font-mono)', fontSize: 9.5, color: 'var(--fg-muted)',
|
||
letterSpacing: '0.04em',
|
||
}}>
|
||
<span style={{ width: 8, height: 8, borderRadius: 2, background: s.color, flexShrink: 0 }} />
|
||
<span>{s.label} <span style={{ color: 'var(--fg-disabled)' }}>{s.value}</span></span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ── Inline lucide icons (Reporting subset) ──────────────────── */
|
||
const _ic = (path) => ({ size = 14, strokeWidth = 1.75, ...rest }) => (
|
||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
|
||
style={{ flexShrink: 0 }} {...rest}>{path}</svg>
|
||
);
|
||
const RptIcon = {
|
||
Refresh: _ic(<><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></>),
|
||
PieChart: _ic(<><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></>),
|
||
Filter: _ic(<><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></>),
|
||
Download: _ic(<><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></>),
|
||
ChevronD: _ic(<><polyline points="6 9 12 15 18 9"/></>),
|
||
ChevronUp: _ic(<><polyline points="18 15 12 9 6 15"/></>),
|
||
ChevronUpDn:_ic(<><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></>),
|
||
ListTodo: _ic(<><rect x="3" y="5" width="6" height="6" rx="1"/><path d="m3 17 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/></>),
|
||
Settings: _ic(<><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>),
|
||
Eye: _ic(<><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></>),
|
||
EyeOff: _ic(<><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" y1="2" x2="22" y2="22"/></>),
|
||
AlertCircle:_ic(<><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></>),
|
||
AlertTri: _ic(<><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></>),
|
||
Atlas: _ic(<><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10"/><path d="M12 2a15.3 15.3 0 0 0-4 10 15.3 15.3 0 0 0 4 10"/></>),
|
||
Search: _ic(<><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></>),
|
||
Square: _ic(<><rect x="3" y="3" width="18" height="18" rx="2"/></>),
|
||
CheckSq: _ic(<><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></>),
|
||
Loader: _ic(<><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/></>),
|
||
TrendUp: _ic(<><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></>),
|
||
};
|
||
|
||
window.RPT = {
|
||
COLORS,
|
||
PageHeader, RptButton, KbCard, PillTab, FilterChip, StatusBanner,
|
||
ToolbarLabel, SeverityDot, SlaPill, WorkflowBadge, DonutSample,
|
||
RptIcon,
|
||
};
|