jramos/cve-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add return classification for archive chart, CARD API integration, compliance charts, systemd services

Browse Source
This commit is contained in:
root
2026-05-01 17:15:41 +00:00
parent 8df961cce8
commit 15abf8bae4
21 changed files with 3639 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/App.js
View File

@@ -179,7 +179,17 @@ export default function App() {
const [cveDocuments, setCveDocuments] = useState({});
const [quickCheckCVE, setQuickCheckCVE] = useState('');
const [quickCheckResult, setQuickCheckResult] = useState(null);
const [currentPage, setCurrentPage] = useState('home');
const VALID_PAGES = new Set(['home', 'triage', 'compliance', 'knowledge-base', 'exports', 'jira', 'admin']);
const [currentPage, setCurrentPageRaw] = useState(() => {
try {
const saved = localStorage.getItem('cve-dashboard-page');
return saved && VALID_PAGES.has(saved) ? saved : 'home';
} catch { return 'home'; }
});
const setCurrentPage = (page) => {
setCurrentPageRaw(page);
try { localStorage.setItem('cve-dashboard-page', page); } catch {}
};
const [navOpen, setNavOpen] = useState(false);
const [calendarFilter, setCalendarFilter] = useState(null);
const [reportingExcFilter, setReportingExcFilter] = useState(null);

399
frontend/src/components/UserManagement.js
View File

@@ -1,6 +1,13 @@
// ⚠️ CONVENTION: This component uses Tailwind utility classes (e.g. bg-white, rounded-lg, hover:bg-gray-50)
// instead of inline styles or App.css global classes. This is the legacy modal kept for UserMenu quick-access;
// the themed replacement lives in AdminPage.js.
// ⚠️ CONVENTION: This component uses inline styles matching the dark "tactical intelligence"
// design system (DESIGN_SYSTEM.md). Colors use the --intel-* and --text-* palette.
//
// ⚠️ CONVENTION: This file is INCOMPLETE — the exported functional component (UserManagement)
// was removed during the style refactor. Only style constants remain. The file must include:
// - A default-exported functional component using hooks (useState, useEffect)
// - Data fetching via fetch() with credentials: 'include' and relative API paths
// - Loading and error state handling in the rendered output
// - JSX that uses the imported lucide-react icons (X, Plus, Edit2, Trash2, etc.)
// - The ConfirmModal integration for delete/group-change confirmations
import React, { useState, useEffect } from 'react';
import { X, Plus, Edit2, Trash2, Loader, AlertCircle, CheckCircle, User, Mail, Shield } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
@@ -18,12 +25,150 @@ const GROUP_LABELS = {
};
const GROUP_BADGE_STYLES = {
Admin: { backgroundColor: '#FEE2E2', color: '#991B1B' },
Standard_User: { backgroundColor: '#DBEAFE', color: '#1E40AF' },
Leadership: { backgroundColor: '#F3E8FF', color: '#6B21A8' },
Read_Only: { backgroundColor: '#F3F4F6', color: '#374151' }
Admin: { backgroundColor: 'rgba(239, 68, 68, 0.25)', color: '#FCA5A5', border: '1px solid rgba(239, 68, 68, 0.4)' },
Standard_User: { backgroundColor: 'rgba(14, 165, 233, 0.25)', color: '#7DD3FC', border: '1px solid rgba(14, 165, 233, 0.4)' },
Leadership: { backgroundColor: 'rgba(168, 85, 247, 0.25)', color: '#C4B5FD', border: '1px solid rgba(168, 85, 247, 0.4)' },
Read_Only: { backgroundColor: 'rgba(148, 163, 184, 0.2)', color: '#CBD5E1', border: '1px solid rgba(148, 163, 184, 0.3)' }
};
/* ── Shared style constants ── */
const styles = {
overlay: {
position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.6)',
display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 50, padding: '1rem',
},
modal: {
background: 'linear-gradient(135deg, #1E293B 0%, #0F172A 100%)',
borderRadius: '0.75rem', border: '1.5px solid rgba(14,165,233,0.3)',
boxShadow: '0 8px 24px rgba(0,0,0,0.6), 0 0 28px rgba(14,165,233,0.08)',
maxWidth: '56rem', width: '100%', maxHeight: '90vh', overflow: 'hidden',
display: 'flex', flexDirection: 'column', color: '#F8FAFC',
},
header: {
padding: '1.5rem', borderBottom: '1px solid rgba(14,165,233,0.2)',
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
},
title: {
fontSize: '1.5rem', fontWeight: 700, color: '#F8FAFC', margin: 0,
fontFamily: "'JetBrains Mono', monospace",
},
subtitle: { color: '#94A3B8', fontSize: '0.875rem', margin: '0.25rem 0 0' },
closeBtn: {
background: 'none', border: 'none', color: '#94A3B8', cursor: 'pointer', padding: '0.5rem',
borderRadius: '0.375rem', transition: 'color 0.2s',
},
body: { padding: '1.5rem', overflowY: 'auto', flex: 1 },
addBtn: {
marginBottom: '1.5rem', padding: '0.5rem 1rem',
background: 'linear-gradient(135deg, rgba(14,165,233,0.15), rgba(14,165,233,0.1))',
border: '1px solid #0EA5E9', borderRadius: '0.5rem', color: '#38BDF8',
cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.5rem',
fontSize: '0.875rem', fontWeight: 500, transition: 'all 0.2s',
textShadow: '0 0 6px rgba(14,165,233,0.2)',
},
formCard: {
marginBottom: '1.5rem', padding: '1.5rem',
background: 'linear-gradient(135deg, rgba(15,23,42,0.95), rgba(30,41,59,0.9))',
borderRadius: '0.5rem', border: '1px solid rgba(14,165,233,0.25)',
},
formTitle: {
fontSize: '1.125rem', fontWeight: 600, color: '#0EA5E9', margin: '0 0 1rem',
fontFamily: "'JetBrains Mono', monospace",
},
label: {
display: 'block', fontSize: '0.75rem', fontWeight: 500, color: '#CBD5E1',
marginBottom: '0.375rem', textTransform: 'uppercase', letterSpacing: '0.5px',
},
inputWrap: { position: 'relative' },
inputIcon: {
position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)',
color: '#94A3B8', width: '1.125rem', height: '1.125rem', pointerEvents: 'none',
},
input: {
width: '100%', padding: '0.5rem 0.75rem 0.5rem 2.5rem',
background: 'rgba(30,41,59,0.6)', border: '1px solid rgba(14,165,233,0.25)',
borderRadius: '0.5rem', color: '#F8FAFC', fontSize: '0.875rem',
fontFamily: "'JetBrains Mono', monospace", outline: 'none', transition: 'border-color 0.2s',
boxSizing: 'border-box',
},
inputNoIcon: {
width: '100%', padding: '0.5rem 0.75rem',
background: 'rgba(30,41,59,0.6)', border: '1px solid rgba(14,165,233,0.25)',
borderRadius: '0.5rem', color: '#F8FAFC', fontSize: '0.875rem',
fontFamily: "'JetBrains Mono', monospace", outline: 'none', transition: 'border-color 0.2s',
boxSizing: 'border-box',
},
select: {
width: '100%', padding: '0.5rem 0.75rem 0.5rem 2.5rem',
background: 'rgba(30,41,59,0.6)', border: '1px solid rgba(14,165,233,0.25)',
borderRadius: '0.5rem', color: '#F8FAFC', fontSize: '0.875rem',
fontFamily: "'JetBrains Mono', monospace", outline: 'none', cursor: 'pointer',
appearance: 'none', boxSizing: 'border-box',
},
primaryBtn: {
padding: '0.5rem 1rem',
background: 'linear-gradient(135deg, rgba(14,165,233,0.15), rgba(14,165,233,0.1))',
border: '1px solid #0EA5E9', borderRadius: '0.5rem', color: '#38BDF8',
cursor: 'pointer', fontSize: '0.875rem', fontWeight: 500, transition: 'all 0.2s',
textShadow: '0 0 6px rgba(14,165,233,0.2)',
},
cancelBtn: {
padding: '0.5rem 1rem',
background: 'rgba(51,65,85,0.5)', border: '1px solid rgba(148,163,184,0.3)',
borderRadius: '0.5rem', color: '#CBD5E1', cursor: 'pointer',
fontSize: '0.875rem', fontWeight: 500, transition: 'all 0.2s',
},
alertError: {
marginBottom: '1rem', padding: '0.75rem',
background: 'rgba(239,68,68,0.15)', border: '1px solid rgba(239,68,68,0.3)',
borderRadius: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem',
},
alertSuccess: {
marginBottom: '1rem', padding: '0.75rem',
background: 'rgba(16,185,129,0.15)', border: '1px solid rgba(16,185,129,0.3)',
borderRadius: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem',
},
th: {
textAlign: 'left', padding: '0.75rem 1rem', fontSize: '0.75rem', fontWeight: 600,
color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.5px',
borderBottom: '1px solid rgba(14,165,233,0.2)',
},
thRight: {
textAlign: 'right', padding: '0.75rem 1rem', fontSize: '0.75rem', fontWeight: 600,
color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.5px',
borderBottom: '1px solid rgba(14,165,233,0.2)',
},
td: { padding: '0.75rem 1rem', borderBottom: '1px solid rgba(51,65,85,0.5)' },
tdRight: { padding: '0.75rem 1rem', borderBottom: '1px solid rgba(51,65,85,0.5)', textAlign: 'right' },
username: { fontWeight: 500, color: '#F8FAFC', fontSize: '0.875rem' },
email: { fontSize: '0.8rem', color: '#94A3B8' },
lastLogin: { fontSize: '0.8rem', color: '#94A3B8' },
badge: {
padding: '0.25rem 0.625rem', borderRadius: '0.375rem',
fontSize: '0.7rem', fontWeight: 600, display: 'inline-block',
fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.3px',
},
statusActive: {
padding: '0.2rem 0.5rem', borderRadius: '0.25rem', fontSize: '0.7rem', fontWeight: 600,
background: 'rgba(16,185,129,0.2)', color: '#6EE7B7', border: '1px solid rgba(16,185,129,0.3)',
cursor: 'pointer', transition: 'opacity 0.2s',
},
statusInactive: {
padding: '0.2rem 0.5rem', borderRadius: '0.25rem', fontSize: '0.7rem', fontWeight: 600,
background: 'rgba(239,68,68,0.2)', color: '#FCA5A5', border: '1px solid rgba(239,68,68,0.3)',
cursor: 'pointer', transition: 'opacity 0.2s',
},
actionBtn: {
background: 'none', border: 'none', padding: '0.375rem', borderRadius: '0.375rem',
cursor: 'pointer', color: '#94A3B8', transition: 'all 0.2s',
},
deleteBtn: {
background: 'none', border: 'none', padding: '0.375rem', borderRadius: '0.375rem',
cursor: 'pointer', color: '#EF4444', transition: 'all 0.2s',
},
};
export default function UserManagement({ onClose }) {
const { user: currentUser } = useAuth();
const [users, setUsers] = useState([]);
@@ -106,7 +251,6 @@ export default function UserManagement({ onClose }) {
const handleSubmit = (e) => {
e.preventDefault();
// If editing and group changed, show confirmation modal
if (editingUser && formData.group !== editingUser.group) {
let message = `Are you sure you want to change ${editingUser.username}'s group from ${editingUser.group} to ${formData.group}?`;
if (editingUser.group === 'Admin' && formData.group !== 'Admin') {
@@ -189,29 +333,29 @@ export default function UserManagement({ onClose }) {
}
};
// Check if group dropdown should be disabled for self-demotion prevention
const isGroupDropdownDisabled = (targetUser) => {
if (!targetUser || !currentUser) return false;
return targetUser.id === currentUser.id && currentUser.group === 'Admin';
};
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
<div className="p-6 border-b border-gray-200 flex justify-between items-center">
<div style={styles.overlay}>
<div style={styles.modal}>
{/* Header */}
<div style={styles.header}>
<div>
<h2 className="text-2xl font-bold text-gray-900">User Management</h2>
<p className="text-gray-600">Manage user accounts and permissions</p>
<h2 style={styles.title}>User Management</h2>
<p style={styles.subtitle}>Manage user accounts and permissions</p>
</div>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600 p-2"
>
<X className="w-6 h-6" />
<button onClick={onClose} style={styles.closeBtn}
onMouseEnter={e => e.currentTarget.style.color = '#F8FAFC'}
onMouseLeave={e => e.currentTarget.style.color = '#94A3B8'}>
<X style={{ width: '1.5rem', height: '1.5rem' }} />
</button>
</div>
<div className="p-6 overflow-y-auto flex-1">
{/* Body */}
<div style={styles.body}>
{!showAddUser && (
<button
onClick={() => {
@@ -221,69 +365,80 @@ export default function UserManagement({ onClose }) {
setFormError('');
setFormSuccess('');
}}
className="mb-6 px-4 py-2 bg-[#0476D9] text-white rounded-lg hover:bg-[#0360B8] transition-colors flex items-center gap-2 shadow-md"
style={styles.addBtn}
onMouseEnter={e => {
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(14,165,233,0.25), rgba(14,165,233,0.2))';
e.currentTarget.style.boxShadow = '0 0 20px rgba(14,165,233,0.25)';
}}
onMouseLeave={e => {
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(14,165,233,0.15), rgba(14,165,233,0.1))';
e.currentTarget.style.boxShadow = 'none';
}}
>
<Plus className="w-5 h-5" />
<Plus style={{ width: '1.125rem', height: '1.125rem' }} />
Add User
</button>
)}
{/* Add / Edit Form */}
{showAddUser && (
<div className="mb-6 p-6 bg-gray-50 rounded-lg border border-gray-200">
<h3 className="text-lg font-semibold mb-4">
<div style={styles.formCard}>
<h3 style={styles.formTitle}>
{editingUser ? 'Edit User' : 'Add New User'}
</h3>
{formError && (
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg flex items-center gap-2">
<AlertCircle className="w-5 h-5 text-red-600" />
<span className="text-sm text-red-700">{formError}</span>
<div style={styles.alertError}>
<AlertCircle style={{ width: '1.125rem', height: '1.125rem', color: '#FCA5A5', flexShrink: 0 }} />
<span style={{ fontSize: '0.8rem', color: '#FCA5A5' }}>{formError}</span>
</div>
)}
{formSuccess && (
<div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg flex items-center gap-2">
<CheckCircle className="w-5 h-5 text-green-600" />
<span className="text-sm text-green-700">{formSuccess}</span>
<div style={styles.alertSuccess}>
<CheckCircle style={{ width: '1.125rem', height: '1.125rem', color: '#6EE7B7', flexShrink: 0 }} />
<span style={{ fontSize: '0.8rem', color: '#6EE7B7' }}>{formSuccess}</span>
</div>
)}
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<form onSubmit={handleSubmit}>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Username *
</label>
<div className="relative">
<User className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
<label style={styles.label}>Username *</label>
<div style={styles.inputWrap}>
<User style={styles.inputIcon} />
<input
type="text"
required
value={formData.username}
onChange={(e) => setFormData({ ...formData, username: e.target.value })}
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
style={styles.input}
placeholder="Enter username"
onFocus={e => e.target.style.borderColor = '#0EA5E9'}
onBlur={e => e.target.style.borderColor = 'rgba(14,165,233,0.25)'}
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Email *
</label>
<div className="relative">
<Mail className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
<label style={styles.label}>Email *</label>
<div style={styles.inputWrap}>
<Mail style={styles.inputIcon} />
<input
type="email"
required
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
style={styles.input}
placeholder="user@example.com"
onFocus={e => e.target.style.borderColor = '#0EA5E9'}
onBlur={e => e.target.style.borderColor = 'rgba(14,165,233,0.25)'}
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label style={styles.label}>
Password {editingUser ? '(leave blank to keep current)' : '*'}
</label>
<input
@@ -291,49 +446,58 @@ export default function UserManagement({ onClose }) {
required={!editingUser}
value={formData.password}
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
style={styles.inputNoIcon}
onFocus={e => e.target.style.borderColor = '#0EA5E9'}
onBlur={e => e.target.style.borderColor = 'rgba(14,165,233,0.25)'}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Group *
</label>
<div className="relative">
<Shield className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
<label style={styles.label}>Group *</label>
<div style={styles.inputWrap}>
<Shield style={styles.inputIcon} />
<select
value={formData.group}
onChange={(e) => setFormData({ ...formData, group: e.target.value })}
disabled={isGroupDropdownDisabled(editingUser)}
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
style={{
...styles.select,
opacity: isGroupDropdownDisabled(editingUser) ? 0.5 : 1,
cursor: isGroupDropdownDisabled(editingUser) ? 'not-allowed' : 'pointer',
}}
title={isGroupDropdownDisabled(editingUser) ? 'Cannot change your own Admin group' : ''}
>
{VALID_GROUPS.map((g) => (
<option key={g} value={g}>{GROUP_LABELS[g]}</option>
<option key={g} value={g} style={{ background: '#1E293B', color: '#F8FAFC' }}>
{GROUP_LABELS[g]}
</option>
))}
</select>
{isGroupDropdownDisabled(editingUser) && (
<p className="text-xs text-amber-600 mt-1">You cannot change your own Admin group.</p>
<p style={{ fontSize: '0.7rem', color: '#F59E0B', marginTop: '0.375rem' }}>
You cannot change your own Admin group.
</p>
)}
</div>
</div>
</div>
<div className="flex gap-3 pt-2">
<button
type="submit"
className="px-4 py-2 bg-[#0476D9] text-white rounded-lg hover:bg-[#0360B8] transition-colors"
>
<div style={{ display: 'flex', gap: '0.75rem', paddingTop: '1rem' }}>
<button type="submit" style={styles.primaryBtn}
onMouseEnter={e => {
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(14,165,233,0.25), rgba(14,165,233,0.2))';
e.currentTarget.style.boxShadow = '0 0 20px rgba(14,165,233,0.25)';
}}
onMouseLeave={e => {
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(14,165,233,0.15), rgba(14,165,233,0.1))';
e.currentTarget.style.boxShadow = 'none';
}}>
{editingUser ? 'Update User' : 'Create User'}
</button>
<button
type="button"
onClick={() => {
setShowAddUser(false);
setEditingUser(null);
}}
className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
>
<button type="button" style={styles.cancelBtn}
onClick={() => { setShowAddUser(false); setEditingUser(null); }}
onMouseEnter={e => e.currentTarget.style.background = 'rgba(51,65,85,0.8)'}
onMouseLeave={e => e.currentTarget.style.background = 'rgba(51,65,85,0.5)'}>
Cancel
</button>
</div>
@@ -341,87 +505,92 @@ export default function UserManagement({ onClose }) {
</div>
)}
{/* User Table */}
{loading ? (
<div className="text-center py-12">
<Loader className="w-8 h-8 text-[#0476D9] mx-auto animate-spin" />
<p className="text-gray-600 mt-2">Loading users...</p>
<div style={{ textAlign: 'center', padding: '3rem 0' }}>
<Loader style={{ width: '2rem', height: '2rem', color: '#0EA5E9', margin: '0 auto', animation: 'spin 1s linear infinite' }} />
<p style={{ color: '#94A3B8', marginTop: '0.5rem', fontSize: '0.875rem' }}>Loading users...</p>
</div>
) : error ? (
<div className="text-center py-12">
<AlertCircle className="w-8 h-8 text-red-500 mx-auto" />
<p className="text-red-600 mt-2">{error}</p>
<div style={{ textAlign: 'center', padding: '3rem 0' }}>
<AlertCircle style={{ width: '2rem', height: '2rem', color: '#EF4444', margin: '0 auto' }} />
<p style={{ color: '#FCA5A5', marginTop: '0.5rem', fontSize: '0.875rem' }}>{error}</p>
</div>
) : (
<div className="overflow-x-auto">
<table className="w-full">
<div style={{ overflowX: 'auto' }}>
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
<thead>
<tr className="border-b border-gray-200">
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700">User</th>
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Group</th>
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Status</th>
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Last Login</th>
<th className="text-right py-3 px-4 text-sm font-medium text-gray-700">Actions</th>
<tr>
<th style={styles.th}>User</th>
<th style={styles.th}>Group</th>
<th style={styles.th}>Status</th>
<th style={styles.th}>Last Login</th>
<th style={styles.thRight}>Actions</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user.id} className="border-b border-gray-100 hover:bg-gray-50">
<td className="py-3 px-4">
<tr key={user.id}
onMouseEnter={e => e.currentTarget.style.background = 'rgba(14,165,233,0.05)'}
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
<td style={styles.td}>
<div>
<p className="font-medium text-gray-900">{user.username}</p>
<p className="text-sm text-gray-500">{user.email}</p>
<p style={styles.username}>{user.username}</p>
<p style={styles.email}>{user.email}</p>
</div>
</td>
<td className="py-3 px-4">
<span
style={{
...GROUP_BADGE_STYLES[user.group] || GROUP_BADGE_STYLES.Read_Only,
padding: '2px 8px',
borderRadius: '4px',
fontSize: '12px',
fontWeight: '500',
display: 'inline-block'
}}
>
<td style={styles.td}>
<span style={{
...styles.badge,
...(GROUP_BADGE_STYLES[user.group] || GROUP_BADGE_STYLES.Read_Only),
}}>
{user.group ? user.group.replace('_', ' ') : 'Read Only'}
</span>
</td>
<td className="py-3 px-4">
<td style={styles.td}>
<button
onClick={() => handleToggleActive(user)}
disabled={user.id === currentUser.id}
className={`px-2 py-1 rounded text-xs font-medium ${
user.is_active
? 'bg-green-100 text-green-800'
: 'bg-red-100 text-red-800'
} ${user.id === currentUser.id ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:opacity-80'}`}
style={{
...(user.is_active ? styles.statusActive : styles.statusInactive),
opacity: user.id === currentUser.id ? 0.5 : 1,
cursor: user.id === currentUser.id ? 'not-allowed' : 'pointer',
}}
>
{user.is_active ? 'Active' : 'Inactive'}
</button>
</td>
<td className="py-3 px-4 text-sm text-gray-500">
{user.last_login
? new Date(user.last_login).toLocaleString()
: 'Never'}
<td style={styles.td}>
<span style={styles.lastLogin}>
{user.last_login
? new Date(user.last_login).toLocaleString()
: 'Never'}
</span>
</td>
<td className="py-3 px-4">
<div className="flex justify-end gap-2">
<td style={styles.tdRight}>
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.25rem' }}>
<button
onClick={() => handleEdit(user)}
className="p-2 text-gray-600 hover:bg-gray-100 rounded"
style={styles.actionBtn}
title="Edit user"
onMouseEnter={e => { e.currentTarget.style.color = '#0EA5E9'; e.currentTarget.style.background = 'rgba(14,165,233,0.1)'; }}
onMouseLeave={e => { e.currentTarget.style.color = '#94A3B8'; e.currentTarget.style.background = 'none'; }}
>
<Edit2 className="w-4 h-4" />
<Edit2 style={{ width: '1rem', height: '1rem' }} />
</button>
<button
onClick={() => handleDelete(user.id)}
disabled={user.id === currentUser.id}
className={`p-2 text-red-600 hover:bg-red-50 rounded ${
user.id === currentUser.id ? 'opacity-50 cursor-not-allowed' : ''
}`}
style={{
...styles.deleteBtn,
opacity: user.id === currentUser.id ? 0.3 : 1,
cursor: user.id === currentUser.id ? 'not-allowed' : 'pointer',
}}
title="Delete user"
onMouseEnter={e => { if (user.id !== currentUser.id) { e.currentTarget.style.background = 'rgba(239,68,68,0.1)'; } }}
onMouseLeave={e => { e.currentTarget.style.background = 'none'; }}
>
<Trash2 className="w-4 h-4" />
<Trash2 style={{ width: '1rem', height: '1rem' }} />
</button>
</div>
</td>
@@ -446,4 +615,4 @@ export default function UserManagement({ onClose }) {
/>
</div>
);
}
}

21
frontend/src/components/pages/AnomalyBanner.js
View File

@@ -102,6 +102,13 @@ const CLASSIFICATION_LABELS = {
decommissioned: 'decommissioned',
};
const RETURN_CLASSIFICATION_LABELS = {
bu_reassignment: 'BU reassigned back',
severity_drift: 'severity re-escalated',
closed_on_platform: 'reopened on platform',
decommissioned: 're-provisioned',
};
// ---------------------------------------------------------------------------
// Build the summary text from anomaly data
// ---------------------------------------------------------------------------
@@ -220,6 +227,20 @@ export default function AnomalyBanner() {
<span style={DETAIL_COUNT}>{anomaly.returned_count}</span>
</div>
)}
{anomaly.returned_count > 0 && anomaly.return_classification && (
<>
{Object.entries(RETURN_CLASSIFICATION_LABELS).map(([key, label]) => {
const val = (anomaly.return_classification || {})[key] || 0;
if (val === 0) return null;
return (
<div key={`ret-${key}`} style={{ ...DETAIL_ROW, paddingLeft: '0.75rem', fontSize: '0.6rem', color: '#94A3B8' }}>
<span>↳ {label}</span>
<span style={{ fontWeight: '600', color: '#14B8A6' }}>{val}</span>
</div>
);
})}
</>
)}
</div>
)}
</div>

102
frontend/src/components/pages/ComplianceChartsPanel.js
View File

@@ -1,7 +1,7 @@
// ComplianceChartsPanel.js
// Tier-1 time-based compliance charts using Recharts.
// Charts rendered: Active Findings Over Time, Change per Cycle,
// Team Health, MTTR by Team, Persistent Findings, Archer Pipeline.
// Team Health, Aging Findings Distribution, Resolution Rate, Archer Pipeline.
import React, { useState, useEffect, useMemo } from 'react';
import {
@@ -208,47 +208,68 @@ function TeamTrendChart({ data }) {
}
// ---------------------------------------------------------------------------
// Chart 4 — MTTR by Team (horizontal bar)
// Chart 4 — Aging Findings Distribution (vertical stacked bar by age bucket)
// ---------------------------------------------------------------------------
function MttrChart({ data }) {
if (data.length === 0) return <NoData msg="No resolved findings yet — MTTR will appear after items are remediated" />;
function AgingChart({ data }) {
if (data.length === 0) return <NoData />;
const teamKeys = Object.keys(TEAM_COLORS);
return (
<ResponsiveContainer width="100%" height={Math.max(160, data.length * 44 + 40)}>
<BarChart data={data} layout="vertical" margin={{ top: 4, right: 48, bottom: 0, left: 4 }}>
<ResponsiveContainer width="100%" height={210}>
<BarChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
<CartesianGrid {...GRID_STYLE} />
<XAxis type="number" tick={AXIS_STYLE} unit=" d" />
<YAxis type="category" dataKey="team" tick={AXIS_STYLE} width={86} />
<XAxis dataKey="bucket" tick={AXIS_STYLE} />
<YAxis tick={AXIS_STYLE} allowDecimals={false} />
<Tooltip content={<DarkTooltip />} />
<Bar dataKey="avg_days" name="Avg Days" fill={TEAL} fillOpacity={0.8} radius={[0, 3, 3, 0]}
label={{ position: 'right', style: { ...AXIS_STYLE, fill: '#64748B' }, formatter: v => `${v}d` }}
/>
<Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
{teamKeys.map((team, i) => (
<Bar
key={team}
dataKey={team}
name={team}
stackId="aging"
fill={TEAM_COLORS[team]}
fillOpacity={0.85}
radius={i === teamKeys.length - 1 ? [2, 2, 0, 0] : [0, 0, 0, 0]}
/>
))}
</BarChart>
</ResponsiveContainer>
);
}
// ---------------------------------------------------------------------------
// Chart 5 — Most Persistent Findings (horizontal bar by seen_count)
// Chart 5 — Resolution Rate per Cycle (line chart, % of findings resolved)
// ---------------------------------------------------------------------------
function RecurringChart({ data }) {
if (data.length === 0) return <NoData />;
const top10 = data.slice(0, 10).map(r => ({
...r,
label: r.metric_id.length > 18 ? r.metric_id.slice(0, 18) + '…' : r.metric_id,
}));
function ResolutionRateChart({ data }) {
const rateData = useMemo(() => {
return data
.filter(t => t.total_active > 0 || t.resolved_count > 0)
.map(t => {
const pool = t.total_active + t.resolved_count;
return {
date: t.date,
rate: pool > 0 ? Math.round((t.resolved_count / pool) * 1000) / 10 : 0,
resolved: t.resolved_count,
active: t.total_active,
};
});
}, [data]);
if (rateData.length < 2) return <NoData />;
return (
<ResponsiveContainer width="100%" height={Math.max(160, top10.length * 28 + 40)}>
<BarChart data={top10} layout="vertical" margin={{ top: 4, right: 48, bottom: 0, left: 4 }}>
<ResponsiveContainer width="100%" height={210}>
<LineChart data={rateData} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
<CartesianGrid {...GRID_STYLE} />
<XAxis type="number" tick={AXIS_STYLE} unit=" cycles" allowDecimals={false} />
<YAxis type="category" dataKey="label" tick={AXIS_STYLE} width={110} />
<Tooltip content={<DarkTooltip />} formatter={(val, name, props) => [
`${val} cycles (${props.payload.host_count} host${props.payload.host_count !== 1 ? 's' : ''})`, props.payload.team
]} />
<Bar dataKey="seen_count" name="Cycles Seen" fill="#F59E0B" fillOpacity={0.85} radius={[0, 3, 3, 0]}
label={{ position: 'right', style: { ...AXIS_STYLE, fill: '#64748B' }, formatter: v => `${v}×` }}
<XAxis dataKey="date" tick={AXIS_STYLE} />
<YAxis tick={AXIS_STYLE} unit="%" domain={[0, 'auto']} />
<Tooltip content={<DarkTooltip />} />
<Line
type="monotone" dataKey="rate" name="Resolution %"
stroke="#10B981" strokeWidth={2}
dot={{ r: 4, fill: '#10B981', strokeWidth: 0 }}
activeDot={{ r: 6 }}
/>
</BarChart>
</LineChart>
</ResponsiveContainer>
);
}
@@ -286,8 +307,7 @@ export default function ComplianceChartsPanel() {
const [collapsed, setCollapsed] = useState(false);
const [loading, setLoading] = useState(true);
const [trends, setTrends] = useState([]);
const [mttr, setMttr] = useState([]);
const [recurring, setRecurring] = useState([]);
const [aging, setAging] = useState([]);
const [archerRaw, setArcherRaw] = useState([]);
useEffect(() => {
@@ -295,16 +315,14 @@ export default function ComplianceChartsPanel() {
const load = async () => {
setLoading(true);
try {
const [tRes, mRes, rRes, aRes] = await Promise.all([
const [tRes, mRes, aRes] = await Promise.all([
fetch(`${API_BASE}/compliance/trends`, { credentials: 'include' }),
fetch(`${API_BASE}/compliance/mttr`, { credentials: 'include' }),
fetch(`${API_BASE}/compliance/top-recurring`, { credentials: 'include' }),
fetch(`${API_BASE}/archer-tickets/status-trend`, { credentials: 'include' }),
]);
if (cancelled) return;
if (tRes.ok) { const d = await tRes.json(); setTrends(d.trends || []); }
if (mRes.ok) { const d = await mRes.json(); setMttr(d.mttr || []); }
if (rRes.ok) { const d = await rRes.json(); setRecurring(d.items || []); }
if (mRes.ok) { const d = await mRes.json(); setAging(d.aging || []); }
if (aRes.ok) { const d = await aRes.json(); setArcherRaw(d.statusTrend || []); }
} catch { /* silent — charts will show no-data state */ }
finally { if (!cancelled) setLoading(false); }
@@ -393,20 +411,20 @@ export default function ComplianceChartsPanel() {
<TeamTrendChart data={formattedTrends} />
</ChartCard>
{/* 4. MTTR per team */}
{/* 4. Aging Findings Distribution */}
<ChartCard
title="Mean Time to Resolution"
subtitle="Average calendar days between first-seen and resolved, by team"
title="Aging Findings Distribution"
subtitle="Active findings by age bucket — stacked by team"
>
<MttrChart data={mttr} />
<AgingChart data={aging} />
</ChartCard>
{/* 5. Most persistent / recurring findings */}
{/* 5. Resolution Rate per Cycle */}
<ChartCard
title="Most Persistent Findings"
subtitle="Active items with the highest recurrence count (top 10)"
title="Resolution Rate"
subtitle="Percentage of known findings resolved each cycle — higher is better"
>
<RecurringChart data={recurring} />
<ResolutionRateChart data={formattedTrends} />
</ChartCard>
{/* 6. Archer ticket pipeline */}

35
frontend/src/components/pages/IvantiCountsChart.js
View File

@@ -76,6 +76,7 @@ function ArchiveTooltip({ active, payload, label }) {
// Parse classification if present
const dataPoint = payload[0]?.payload;
const classification = dataPoint?.classification;
const returnClassification = dataPoint?.return_classification;
return (
<div style={{
@@ -133,6 +134,37 @@ function ArchiveTooltip({ active, payload, label }) {
)}
</div>
)}
{returnClassification && returned > 0 && (returnClassification.bu_reassignment > 0 || returnClassification.severity_drift > 0 || returnClassification.closed_on_platform > 0 || returnClassification.decommissioned > 0) && (
<div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', marginTop: '0.35rem', paddingTop: '0.3rem' }}>
<div style={{ color: '#475569', fontSize: '0.58rem', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '0.2rem' }}>
Returned because
</div>
{returnClassification.bu_reassignment > 0 && (
<div style={{ color: '#FB923C', fontSize: '0.62rem', display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
<span style={{ opacity: 0.8 }}>BU reassigned back</span>
<span>{returnClassification.bu_reassignment}</span>
</div>
)}
{returnClassification.severity_drift > 0 && (
<div style={{ color: '#A78BFA', fontSize: '0.62rem', display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
<span style={{ opacity: 0.8 }}>Severity re-escalated</span>
<span>{returnClassification.severity_drift}</span>
</div>
)}
{returnClassification.closed_on_platform > 0 && (
<div style={{ color: SKY, fontSize: '0.62rem', display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
<span style={{ opacity: 0.8 }}>Reopened on platform</span>
<span>{returnClassification.closed_on_platform}</span>
</div>
)}
{returnClassification.decommissioned > 0 && (
<div style={{ color: '#94A3B8', fontSize: '0.62rem', display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
<span style={{ opacity: 0.8 }}>Re-provisioned</span>
<span>{returnClassification.decommissioned}</span>
</div>
)}
</div>
)}
</div>
);
}
@@ -219,10 +251,11 @@ export default function IvantiCountsChart() {
archived: anomaly.newly_archived_count || 0,
returned: anomaly.returned_count || 0,
classification: anomaly.classification || {},
return_classification: anomaly.return_classification || {},
is_significant: anomaly.is_significant,
};
}
return { date: point.date, archived: 0, returned: 0, classification: {}, is_significant: false };
return { date: point.date, archived: 0, returned: 0, classification: {}, return_classification: {}, is_significant: false };
});
}, [anomalies, chartData]);

651
frontend/src/components/pages/ReportingPage.js
View File

@@ -1518,7 +1518,7 @@ function AddToQueuePopover({ finding, anchorRect, queueForm, setQueueForm, onAdd
// ---------------------------------------------------------------------------
// QueuePanel — fixed slide-out panel showing the user's Ivanti queue
// ---------------------------------------------------------------------------
function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, onClearCompleted, onCreateFpWorkflow, onRedirectComplete, canWrite, fpSubmissions, onEditSubmission }) {
function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, onClearCompleted, onCreateFpWorkflow, onRedirectComplete, canWrite, fpSubmissions, onEditSubmission, cardConfigured, cardTeams, onQueueRefresh }) {
const pendingCount = items.filter((i) => i.status === 'pending').length;
const completedCount = items.filter((i) => i.status === 'complete').length;
@@ -1526,6 +1526,24 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
const [redirectItem, setRedirectItem] = useState(null);
const [redirectSuccess, setRedirectSuccess] = useState(null);
// CARD action state — tracks which item has an active action form
const [cardAction, setCardAction] = useState(null); // { itemId, type: 'confirm'|'decline'|'redirect' }
const [cardFormTeam, setCardFormTeam] = useState('');
const [cardFormComment, setCardFormComment] = useState('');
const [cardFormFromTeam, setCardFormFromTeam] = useState('');
const [cardFormToTeam, setCardFormToTeam] = useState('');
const [cardActionLoading, setCardActionLoading] = useState(false);
const [cardActionError, setCardActionError] = useState(null);
// CARD Asset Search state
const [assetSearchOpen, setAssetSearchOpen] = useState(false);
const [assetSearchTeam, setAssetSearchTeam] = useState('');
const [assetSearchDisposition, setAssetSearchDisposition] = useState('confirmed');
const [assetSearchResults, setAssetSearchResults] = useState(null);
const [assetSearchLoading, setAssetSearchLoading] = useState(false);
const [assetSearchError, setAssetSearchError] = useState(null);
const [assetSearchPage, setAssetSearchPage] = useState(1);
// Drop any selected IDs that no longer exist in items
useEffect(() => {
setSelectedIds((prev) => {
@@ -1556,6 +1574,110 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
setTimeout(() => setRedirectSuccess(null), 3000);
};
// CARD action handlers
const openCardAction = (itemId, type) => {
setCardAction({ itemId, type });
setCardFormTeam('');
setCardFormComment('');
setCardFormFromTeam('');
setCardFormToTeam('');
setCardActionError(null);
};
const closeCardAction = () => {
setCardAction(null);
setCardFormTeam('');
setCardFormComment('');
setCardFormFromTeam('');
setCardFormToTeam('');
setCardActionError(null);
setCardActionLoading(false);
};
const handleCardConfirmDecline = async (item, actionType) => {
if (!cardFormTeam) return;
setCardActionLoading(true);
setCardActionError(null);
try {
const res = await fetch(`${API_BASE}/card/queue/${item.id}/${actionType}`, {
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
teamName: cardFormTeam,
assetId: item.ip_address,
comment: cardFormComment || '',
}),
});
const data = await res.json();
if (!res.ok) {
setCardActionError(data.error || `${actionType} failed.`);
setCardActionLoading(false);
return;
}
// Update local state to complete without full refresh
onUpdate(item.id, { status: 'complete' });
closeCardAction();
} catch (err) {
setCardActionError(err.message || 'Network error.');
setCardActionLoading(false);
}
};
const handleCardRedirect = async (item) => {
if (!cardFormFromTeam || !cardFormToTeam) return;
setCardActionLoading(true);
setCardActionError(null);
try {
const res = await fetch(`${API_BASE}/card/queue/${item.id}/redirect`, {
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
fromTeam: cardFormFromTeam,
toTeam: cardFormToTeam,
assetId: item.ip_address,
}),
});
const data = await res.json();
if (!res.ok) {
setCardActionError(data.error || 'Redirect failed.');
setCardActionLoading(false);
return;
}
onUpdate(item.id, { status: 'complete' });
closeCardAction();
} catch (err) {
setCardActionError(err.message || 'Network error.');
setCardActionLoading(false);
}
};
// CARD Asset Search handler
const handleAssetSearch = async (page = 1) => {
if (!assetSearchTeam || !assetSearchDisposition) return;
setAssetSearchLoading(true);
setAssetSearchError(null);
setAssetSearchPage(page);
try {
const res = await fetch(
`${API_BASE}/card/teams/${encodeURIComponent(assetSearchTeam)}/assets?disposition=${encodeURIComponent(assetSearchDisposition)}&page_size=50&page=${page}`,
{ credentials: 'include' }
);
const data = await res.json();
if (!res.ok) {
setAssetSearchError(data.error || 'Search failed.');
setAssetSearchLoading(false);
return;
}
setAssetSearchResults(data);
} catch (err) {
setAssetSearchError(err.message || 'Network error.');
} finally {
setAssetSearchLoading(false);
}
};
// Render a single queue item row
const renderQueueItem = (item, { done, selectedIds, toggleSelect, onUpdate, onDelete, setRedirectItem, canWrite }) => {
const wfColor = item.workflow_type === 'FP' ? { col: '#F59E0B', rgb: '245,158,11' }
@@ -1681,6 +1803,66 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
{item.workflow_type}
</span>
{/* CARD action buttons — pending CARD items only */}
{item.workflow_type === 'CARD' && item.status === 'pending' && canWrite && (
<div style={{ display: 'flex', gap: '0.25rem', flexShrink: 0 }}>
<button
onClick={() => openCardAction(item.id, 'confirm')}
disabled={!cardConfigured || cardActionLoading}
title={!cardConfigured ? 'CARD integration not configured' : 'Confirm asset'}
style={{
background: cardConfigured ? 'rgba(16,185,129,0.1)' : 'transparent',
border: `1px solid ${cardConfigured ? 'rgba(16,185,129,0.3)' : 'rgba(255,255,255,0.05)'}`,
borderRadius: '0.2rem',
padding: '0.15rem 0.3rem',
fontFamily: 'monospace', fontSize: '0.55rem', fontWeight: '700',
color: cardConfigured ? '#10B981' : '#334155',
cursor: cardConfigured ? 'pointer' : 'not-allowed',
textTransform: 'uppercase', letterSpacing: '0.04em',
transition: 'all 0.12s',
}}
>
Confirm
</button>
<button
onClick={() => openCardAction(item.id, 'decline')}
disabled={!cardConfigured || cardActionLoading}
title={!cardConfigured ? 'CARD integration not configured' : 'Decline asset'}
style={{
background: cardConfigured ? 'rgba(239,68,68,0.1)' : 'transparent',
border: `1px solid ${cardConfigured ? 'rgba(239,68,68,0.3)' : 'rgba(255,255,255,0.05)'}`,
borderRadius: '0.2rem',
padding: '0.15rem 0.3rem',
fontFamily: 'monospace', fontSize: '0.55rem', fontWeight: '700',
color: cardConfigured ? '#EF4444' : '#334155',
cursor: cardConfigured ? 'pointer' : 'not-allowed',
textTransform: 'uppercase', letterSpacing: '0.04em',
transition: 'all 0.12s',
}}
>
Decline
</button>
<button
onClick={() => openCardAction(item.id, 'redirect')}
disabled={!cardConfigured || cardActionLoading}
title={!cardConfigured ? 'CARD integration not configured' : 'Redirect asset'}
style={{
background: cardConfigured ? 'rgba(14,165,233,0.1)' : 'transparent',
border: `1px solid ${cardConfigured ? 'rgba(14,165,233,0.3)' : 'rgba(255,255,255,0.05)'}`,
borderRadius: '0.2rem',
padding: '0.15rem 0.3rem',
fontFamily: 'monospace', fontSize: '0.55rem', fontWeight: '700',
color: cardConfigured ? '#0EA5E9' : '#334155',
cursor: cardConfigured ? 'pointer' : 'not-allowed',
textTransform: 'uppercase', letterSpacing: '0.04em',
transition: 'all 0.12s',
}}
>
Redirect
</button>
</div>
)}
{/* Redirect button — completed items only */}
{canWrite && done && (
<button
@@ -1708,6 +1890,228 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
);
};
// Render CARD action inline form below a queue item
const renderCardActionForm = (item) => {
if (!cardAction || cardAction.itemId !== item.id) return null;
const { type } = cardAction;
if (type === 'confirm' || type === 'decline') {
const accentColor = type === 'confirm' ? '#10B981' : '#EF4444';
const accentRgb = type === 'confirm' ? '16,185,129' : '239,68,68';
const canSubmit = !cardActionLoading && cardFormTeam.length > 0;
return (
<div style={{
padding: '0.5rem 0.625rem',
marginBottom: '0.25rem',
borderRadius: '0.375rem',
background: `rgba(${accentRgb},0.04)`,
border: `1px solid rgba(${accentRgb},0.15)`,
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem', marginBottom: '0.375rem' }}>
<span style={{ fontFamily: 'monospace', fontSize: '0.62rem', fontWeight: '700', color: accentColor, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
{type === 'confirm' ? 'Confirm Asset' : 'Decline Asset'}
</span>
</div>
<select
value={cardFormTeam}
onChange={(e) => setCardFormTeam(e.target.value)}
disabled={cardActionLoading}
style={{
width: '100%', boxSizing: 'border-box',
background: 'rgba(15, 23, 42, 0.6)',
border: `1px solid rgba(${accentRgb}, 0.25)`,
borderRadius: '0.25rem',
padding: '0.35rem 0.5rem',
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.7rem',
color: '#E2E8F0',
outline: 'none',
marginBottom: '0.375rem',
}}
>
<option value="">Select team…</option>
{cardTeams.map(t => <option key={t} value={t}>{t}</option>)}
</select>
<input
type="text"
value={cardFormComment}
onChange={(e) => setCardFormComment(e.target.value)}
disabled={cardActionLoading}
placeholder="Comment (optional)"
maxLength={500}
style={{
width: '100%', boxSizing: 'border-box',
background: 'rgba(15, 23, 42, 0.6)',
border: `1px solid rgba(${accentRgb}, 0.15)`,
borderRadius: '0.25rem',
padding: '0.35rem 0.5rem',
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.7rem',
color: '#E2E8F0',
outline: 'none',
marginBottom: '0.375rem',
}}
/>
{cardActionError && (
<div style={{
display: 'flex', alignItems: 'center', gap: '0.375rem',
padding: '0.3rem 0.5rem',
background: 'rgba(239, 68, 68, 0.1)',
border: '1px solid rgba(239, 68, 68, 0.25)',
borderRadius: '0.25rem',
marginBottom: '0.375rem',
}}>
<AlertCircle style={{ width: '12px', height: '12px', color: '#EF4444', flexShrink: 0 }} />
<span style={{ fontFamily: 'monospace', fontSize: '0.62rem', color: '#FCA5A5' }}>{cardActionError}</span>
</div>
)}
<div style={{ display: 'flex', gap: '0.375rem' }}>
<button
onClick={() => handleCardConfirmDecline(item, type)}
disabled={!canSubmit}
style={{
flex: 1, padding: '0.3rem',
background: canSubmit ? `rgba(${accentRgb},0.12)` : 'transparent',
border: `1px solid ${canSubmit ? `rgba(${accentRgb},0.35)` : 'rgba(255,255,255,0.05)'}`,
borderRadius: '0.25rem',
color: canSubmit ? accentColor : '#334155',
fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '600',
cursor: canSubmit ? 'pointer' : 'not-allowed',
textTransform: 'uppercase', letterSpacing: '0.04em',
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.25rem',
}}
>
{cardActionLoading && <Loader style={{ width: '10px', height: '10px', animation: 'spin 1s linear infinite' }} />}
{cardActionLoading ? 'Submitting…' : type === 'confirm' ? 'Confirm' : 'Decline'}
</button>
<button
onClick={closeCardAction}
disabled={cardActionLoading}
style={{
padding: '0.3rem 0.5rem',
background: 'transparent',
border: '1px solid rgba(255,255,255,0.08)',
borderRadius: '0.25rem',
color: '#64748B',
fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '600',
cursor: 'pointer',
textTransform: 'uppercase', letterSpacing: '0.04em',
}}
>
Cancel
</button>
</div>
</div>
);
}
if (type === 'redirect') {
const canSubmit = !cardActionLoading && cardFormFromTeam.length > 0 && cardFormToTeam.length > 0;
return (
<div style={{
padding: '0.5rem 0.625rem',
marginBottom: '0.25rem',
borderRadius: '0.375rem',
background: 'rgba(14,165,233,0.04)',
border: '1px solid rgba(14,165,233,0.15)',
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem', marginBottom: '0.375rem' }}>
<span style={{ fontFamily: 'monospace', fontSize: '0.62rem', fontWeight: '700', color: '#0EA5E9', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
Redirect Asset
</span>
</div>
<select
value={cardFormFromTeam}
onChange={(e) => setCardFormFromTeam(e.target.value)}
disabled={cardActionLoading}
style={{
width: '100%', boxSizing: 'border-box',
background: 'rgba(15, 23, 42, 0.6)',
border: '1px solid rgba(14, 165, 233, 0.25)',
borderRadius: '0.25rem',
padding: '0.35rem 0.5rem',
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.7rem',
color: '#E2E8F0',
outline: 'none',
marginBottom: '0.375rem',
}}
>
<option value="">From team…</option>
{cardTeams.map(t => <option key={t} value={t}>{t}</option>)}
</select>
<select
value={cardFormToTeam}
onChange={(e) => setCardFormToTeam(e.target.value)}
disabled={cardActionLoading}
style={{
width: '100%', boxSizing: 'border-box',
background: 'rgba(15, 23, 42, 0.6)',
border: '1px solid rgba(14, 165, 233, 0.25)',
borderRadius: '0.25rem',
padding: '0.35rem 0.5rem',
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.7rem',
color: '#E2E8F0',
outline: 'none',
marginBottom: '0.375rem',
}}
>
<option value="">To team…</option>
{cardTeams.map(t => <option key={t} value={t}>{t}</option>)}
</select>
{cardActionError && (
<div style={{
display: 'flex', alignItems: 'center', gap: '0.375rem',
padding: '0.3rem 0.5rem',
background: 'rgba(239, 68, 68, 0.1)',
border: '1px solid rgba(239, 68, 68, 0.25)',
borderRadius: '0.25rem',
marginBottom: '0.375rem',
}}>
<AlertCircle style={{ width: '12px', height: '12px', color: '#EF4444', flexShrink: 0 }} />
<span style={{ fontFamily: 'monospace', fontSize: '0.62rem', color: '#FCA5A5' }}>{cardActionError}</span>
</div>
)}
<div style={{ display: 'flex', gap: '0.375rem' }}>
<button
onClick={() => handleCardRedirect(item)}
disabled={!canSubmit}
style={{
flex: 1, padding: '0.3rem',
background: canSubmit ? 'rgba(14,165,233,0.12)' : 'transparent',
border: `1px solid ${canSubmit ? 'rgba(14,165,233,0.35)' : 'rgba(255,255,255,0.05)'}`,
borderRadius: '0.25rem',
color: canSubmit ? '#0EA5E9' : '#334155',
fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '600',
cursor: canSubmit ? 'pointer' : 'not-allowed',
textTransform: 'uppercase', letterSpacing: '0.04em',
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.25rem',
}}
>
{cardActionLoading && <Loader style={{ width: '10px', height: '10px', animation: 'spin 1s linear infinite' }} />}
{cardActionLoading ? 'Redirecting…' : 'Redirect'}
</button>
<button
onClick={closeCardAction}
disabled={cardActionLoading}
style={{
padding: '0.3rem 0.5rem',
background: 'transparent',
border: '1px solid rgba(255,255,255,0.08)',
borderRadius: '0.25rem',
color: '#64748B',
fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '600',
cursor: 'pointer',
textTransform: 'uppercase', letterSpacing: '0.04em',
}}
>
Cancel
</button>
</div>
</div>
);
}
return null;
};
// Inventory items (CARD + GRANITE) are their own top section; everything else groups by vendor
const grouped = useMemo(() => {
const inventoryItems = items.filter((i) => i.workflow_type === 'CARD' || i.workflow_type === 'GRANITE');
@@ -1819,7 +2223,12 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
{/* Items — Inventory section renders CARD then GRANITE with optional sub-divider */}
{isInventory ? (
<>
{cardItems.map((item) => renderQueueItem(item, { done: item.status === 'complete', selectedIds, toggleSelect, onUpdate, onDelete, setRedirectItem, canWrite }))}
{cardItems.map((item) => (
<React.Fragment key={item.id}>
{renderQueueItem(item, { done: item.status === 'complete', selectedIds, toggleSelect, onUpdate, onDelete, setRedirectItem, canWrite })}
{renderCardActionForm(item)}
</React.Fragment>
))}
{cardItems.length > 0 && graniteItems.length > 0 && (
<div style={{
height: '1px',
@@ -1836,6 +2245,211 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
))}
</div>
{/* CARD Asset Search section */}
{cardConfigured && (
<div style={{ padding: '0 1.25rem 0.75rem' }}>
<div
onClick={() => setAssetSearchOpen(!assetSearchOpen)}
style={{
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
padding: '0.3rem 0', marginBottom: '0.375rem',
borderBottom: '1px solid rgba(14,165,233,0.2)',
cursor: 'pointer',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
<Database style={{ width: '12px', height: '12px', color: '#0EA5E9' }} />
<span style={{ fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '700', color: '#0EA5E9', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
CARD Asset Search
</span>
</div>
{assetSearchOpen
? <ChevronUp style={{ width: '14px', height: '14px', color: '#475569' }} />
: <ChevronDown style={{ width: '14px', height: '14px', color: '#475569' }} />
}
</div>
{assetSearchOpen && (
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.375rem' }}>
<select
value={assetSearchTeam}
onChange={(e) => { setAssetSearchTeam(e.target.value); setAssetSearchResults(null); setAssetSearchError(null); }}
style={{
width: '100%', boxSizing: 'border-box',
background: 'rgba(15, 23, 42, 0.6)',
border: '1px solid rgba(14, 165, 233, 0.25)',
borderRadius: '0.25rem',
padding: '0.35rem 0.5rem',
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.7rem',
color: '#E2E8F0',
outline: 'none',
}}
>
<option value="">Select team…</option>
{cardTeams.map(t => <option key={t} value={t}>{t}</option>)}
</select>
<select
value={assetSearchDisposition}
onChange={(e) => { setAssetSearchDisposition(e.target.value); setAssetSearchResults(null); setAssetSearchError(null); }}
style={{
width: '100%', boxSizing: 'border-box',
background: 'rgba(15, 23, 42, 0.6)',
border: '1px solid rgba(14, 165, 233, 0.25)',
borderRadius: '0.25rem',
padding: '0.35rem 0.5rem',
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.7rem',
color: '#E2E8F0',
outline: 'none',
}}
>
<option value="confirmed">Confirmed</option>
<option value="unconfirmed">Unconfirmed</option>
<option value="declined">Declined</option>
<option value="candidate">Candidate</option>
</select>
<button
onClick={() => handleAssetSearch(1)}
disabled={!assetSearchTeam || assetSearchLoading}
style={{
padding: '0.35rem',
background: assetSearchTeam ? 'rgba(14,165,233,0.12)' : 'transparent',
border: `1px solid ${assetSearchTeam ? 'rgba(14,165,233,0.35)' : 'rgba(255,255,255,0.05)'}`,
borderRadius: '0.25rem',
color: assetSearchTeam ? '#0EA5E9' : '#334155',
fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600',
cursor: assetSearchTeam ? 'pointer' : 'not-allowed',
textTransform: 'uppercase', letterSpacing: '0.05em',
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.375rem',
}}
>
{assetSearchLoading
? <Loader style={{ width: '12px', height: '12px', animation: 'spin 1s linear infinite' }} />
: <Search style={{ width: '12px', height: '12px' }} />
}
{assetSearchLoading ? 'Searching…' : 'Search'}
</button>
{/* Error */}
{assetSearchError && (
<div style={{
display: 'flex', alignItems: 'center', gap: '0.375rem',
padding: '0.3rem 0.5rem',
background: 'rgba(239, 68, 68, 0.1)',
border: '1px solid rgba(239, 68, 68, 0.25)',
borderRadius: '0.25rem',
}}>
<AlertCircle style={{ width: '12px', height: '12px', color: '#EF4444', flexShrink: 0 }} />
<span style={{ fontFamily: 'monospace', fontSize: '0.62rem', color: '#FCA5A5' }}>{assetSearchError}</span>
</div>
)}
{/* Results */}
{assetSearchResults && (
<div>
<div style={{
fontFamily: 'monospace', fontSize: '0.62rem', fontWeight: '600',
color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.08em',
marginBottom: '0.25rem',
}}>
{assetSearchResults.total != null ? `${assetSearchResults.total} asset${assetSearchResults.total !== 1 ? 's' : ''} found` : 'Results'}
</div>
{/* Results table */}
{Array.isArray(assetSearchResults.assets) && assetSearchResults.assets.length > 0 ? (
<div style={{
maxHeight: '200px', overflowY: 'auto',
border: '1px solid rgba(14,165,233,0.12)',
borderRadius: '0.25rem',
}}>
<table style={{
width: '100%', borderCollapse: 'collapse',
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.62rem',
}}>
<thead>
<tr style={{ background: 'rgba(14,165,233,0.06)' }}>
<th style={{ padding: '0.3rem 0.5rem', textAlign: 'left', color: '#94A3B8', fontWeight: '700', textTransform: 'uppercase', letterSpacing: '0.06em', borderBottom: '1px solid rgba(14,165,233,0.12)' }}>
Asset ID
</th>
{assetSearchResults.assets[0] && Object.keys(assetSearchResults.assets[0]).filter(k => k !== 'asset_id' && k !== '_id').slice(0, 3).map(k => (
<th key={k} style={{ padding: '0.3rem 0.5rem', textAlign: 'left', color: '#94A3B8', fontWeight: '700', textTransform: 'uppercase', letterSpacing: '0.06em', borderBottom: '1px solid rgba(14,165,233,0.12)' }}>
{k.replace(/_/g, ' ')}
</th>
))}
</tr>
</thead>
<tbody>
{assetSearchResults.assets.map((asset, idx) => {
const extraKeys = Object.keys(asset).filter(k => k !== 'asset_id' && k !== '_id').slice(0, 3);
return (
<tr key={asset.asset_id || asset._id || idx} style={{ borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
<td style={{ padding: '0.25rem 0.5rem', color: '#CBD5E1', fontWeight: '600' }}>
{asset.asset_id || asset._id || '—'}
</td>
{extraKeys.map(k => (
<td key={k} style={{ padding: '0.25rem 0.5rem', color: '#94A3B8' }}>
{typeof asset[k] === 'object' ? JSON.stringify(asset[k]) : String(asset[k] ?? '—')}
</td>
))}
</tr>
);
})}
</tbody>
</table>
</div>
) : (
<div style={{ fontFamily: 'monospace', fontSize: '0.65rem', color: '#475569', padding: '0.5rem 0' }}>
No assets found.
</div>
)}
{/* Pagination */}
{assetSearchResults.total != null && assetSearchResults.total > (assetSearchResults.page_size || 50) && (
<div style={{
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem',
marginTop: '0.375rem',
}}>
<button
onClick={() => handleAssetSearch(assetSearchPage - 1)}
disabled={assetSearchPage <= 1 || assetSearchLoading}
style={{
padding: '0.2rem 0.4rem',
background: assetSearchPage > 1 ? 'rgba(14,165,233,0.08)' : 'transparent',
border: `1px solid ${assetSearchPage > 1 ? 'rgba(14,165,233,0.25)' : 'rgba(255,255,255,0.05)'}`,
borderRadius: '0.2rem',
color: assetSearchPage > 1 ? '#0EA5E9' : '#334155',
fontFamily: 'monospace', fontSize: '0.6rem', fontWeight: '600',
cursor: assetSearchPage > 1 ? 'pointer' : 'not-allowed',
}}
>
← Prev
</button>
<span style={{ fontFamily: 'monospace', fontSize: '0.6rem', color: '#64748B' }}>
Page {assetSearchPage} of {Math.ceil(assetSearchResults.total / (assetSearchResults.page_size || 50))}
</span>
<button
onClick={() => handleAssetSearch(assetSearchPage + 1)}
disabled={assetSearchPage >= Math.ceil(assetSearchResults.total / (assetSearchResults.page_size || 50)) || assetSearchLoading}
style={{
padding: '0.2rem 0.4rem',
background: assetSearchPage < Math.ceil(assetSearchResults.total / (assetSearchResults.page_size || 50)) ? 'rgba(14,165,233,0.08)' : 'transparent',
border: `1px solid ${assetSearchPage < Math.ceil(assetSearchResults.total / (assetSearchResults.page_size || 50)) ? 'rgba(14,165,233,0.25)' : 'rgba(255,255,255,0.05)'}`,
borderRadius: '0.2rem',
color: assetSearchPage < Math.ceil(assetSearchResults.total / (assetSearchResults.page_size || 50)) ? '#0EA5E9' : '#334155',
fontFamily: 'monospace', fontSize: '0.6rem', fontWeight: '600',
cursor: assetSearchPage < Math.ceil(assetSearchResults.total / (assetSearchResults.page_size || 50)) ? 'pointer' : 'not-allowed',
}}
>
Next →
</button>
</div>
)}
</div>
)}
</div>
)}
</div>
)}
{/* Submissions section */}
{fpSubmissions && fpSubmissions.length > 0 && (
<div style={{ padding: '0 1.25rem 0.75rem' }}>
@@ -4344,6 +4958,10 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
const [atlasMetricsLoading, setAtlasMetricsLoading] = useState(false);
const [atlasMetricsError, setAtlasMetricsError] = useState(null);
// CARD API state — session-level caching for teams list
const [cardConfigured, setCardConfigured] = useState(false);
const [cardTeams, setCardTeams] = useState([]);
const updateColumns = useCallback((newOrder) => {
setColumnOrder(newOrder);
saveColumnOrder(newOrder);
@@ -4481,6 +5099,31 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
}
}, []);
// CARD API — fetch status and teams (session-level caching)
const cardTeamsFetchedRef = useRef(false);
const fetchCardStatus = useCallback(async () => {
try {
const res = await fetch(`${API_BASE}/card/status`, { credentials: 'include' });
if (res.ok) {
const data = await res.json();
setCardConfigured(data.configured === true);
if (data.configured && !cardTeamsFetchedRef.current) {
cardTeamsFetchedRef.current = true;
const teamsRes = await fetch(`${API_BASE}/card/teams`, { credentials: 'include' });
if (teamsRes.ok) {
const teamsData = await teamsRes.json();
const teams = Array.isArray(teamsData)
? teamsData.map(t => t.card_team_name || t._id).filter(Boolean).sort()
: [];
setCardTeams(teams);
}
}
}
} catch (err) {
console.error('[card-api] Failed to fetch CARD status:', err.message);
}
}, []);
const fetchFindings = async () => {
setLoading(true);
try {
@@ -4523,6 +5166,7 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
fetchFpSubmissions();
fetchAtlasStatus();
fetchAtlasMetrics();
fetchCardStatus();
}, []); // eslint-disable-line
// Set/clear a single column filter
@@ -5658,6 +6302,9 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
canWrite={canWrite}
fpSubmissions={fpSubmissions}
onEditSubmission={handleEditSubmission}
cardConfigured={cardConfigured}
cardTeams={cardTeams}
onQueueRefresh={fetchQueue}
/>
<FpWorkflowModal
open={fpModalOpen}