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

Toned down color scheme. Added modernization

Browse Source
This commit is contained in:
jramos
2026-02-10 14:43:51 -07:00
parent 0c9c3b5514
commit 9384ded04f
3 changed files with 286 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
frontend/src/App.js
View File

@@ -17,106 +17,106 @@ const STYLES = {
// Main container with visible background
mainContainer: {
minHeight: '100vh',
background: 'linear-gradient(135deg, #0A0E27 0%, #131937 50%, #0A0E27 100%)',
background: 'linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%)',
padding: '1.5rem',
position: 'relative',
overflow: 'hidden',
},
// Stat cards with BRIGHT CYAN borders
// Stat cards with refined borders
statCard: {
background: 'linear-gradient(135deg, rgba(19, 25, 55, 1) 0%, rgba(30, 39, 73, 0.95) 100%)',
border: '3px solid #00D9FF',
background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%)',
border: '2px solid #0EA5E9',
borderRadius: '0.5rem',
padding: '1rem',
boxShadow: '0 8px 24px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 217, 255, 0.3), inset 0 2px 0 rgba(0, 217, 255, 0.2)',
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(14, 165, 233, 0.15), inset 0 1px 0 rgba(14, 165, 233, 0.15)',
position: 'relative',
overflow: 'hidden',
},
// Intel card with thick glowing border
// Intel card with refined glowing border
intelCard: {
background: 'linear-gradient(135deg, rgba(19, 25, 55, 1) 0%, rgba(30, 39, 73, 0.95) 50%, rgba(19, 25, 55, 1) 100%)',
border: '3px solid rgba(0, 217, 255, 0.6)',
background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 50%, rgba(30, 41, 59, 0.95) 100%)',
border: '2px solid rgba(14, 165, 233, 0.4)',
borderRadius: '0.5rem',
boxShadow: '0 12px 32px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 217, 255, 0.25), inset 0 2px 0 rgba(0, 217, 255, 0.15)',
boxShadow: '0 8px 24px rgba(0, 0, 0, 0.6), 0 0 28px rgba(14, 165, 233, 0.15), inset 0 1px 0 rgba(14, 165, 233, 0.12)',
position: 'relative',
overflow: 'hidden',
},
// Vendor card with depth
vendorCard: {
background: 'linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(19, 25, 55, 0.9) 100%)',
border: '2px solid rgba(0, 217, 255, 0.4)',
background: 'linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%)',
border: '1.5px solid rgba(14, 165, 233, 0.3)',
borderRadius: '0.5rem',
padding: '1rem',
boxShadow: '0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(0, 217, 255, 0.1)',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(14, 165, 233, 0.08)',
marginBottom: '0.75rem',
},
// CRITICAL severity badge - BRIGHT RED with WHITE text
// CRITICAL severity badge - Modern red with refined glow
badgeCritical: {
display: 'inline-flex',
alignItems: 'center',
gap: '0.5rem',
background: 'linear-gradient(135deg, rgba(255, 51, 102, 0.4) 0%, rgba(255, 51, 102, 0.3) 100%)',
border: '2px solid #FF3366',
background: 'linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.2) 100%)',
border: '2px solid #EF4444',
borderRadius: '0.375rem',
padding: '0.375rem 0.875rem',
color: '#FFFFFF',
color: '#FCA5A5',
fontWeight: '700',
fontSize: '0.75rem',
textTransform: 'uppercase',
letterSpacing: '0.5px',
textShadow: '0 0 10px rgba(255, 51, 102, 0.9)',
boxShadow: '0 0 20px rgba(255, 51, 102, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4)',
textShadow: '0 0 8px rgba(239, 68, 68, 0.5)',
boxShadow: '0 0 16px rgba(239, 68, 68, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4)',
},
// HIGH severity badge - BRIGHT ORANGE/YELLOW with WHITE text
// HIGH severity badge - Amber with refined glow
badgeHigh: {
display: 'inline-flex',
alignItems: 'center',
gap: '0.5rem',
background: 'linear-gradient(135deg, rgba(255, 184, 0, 0.4) 0%, rgba(255, 184, 0, 0.3) 100%)',
border: '2px solid #FFB800',
background: 'linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.2) 100%)',
border: '2px solid #F59E0B',
borderRadius: '0.375rem',
padding: '0.375rem 0.875rem',
color: '#FFFFFF',
color: '#FCD34D',
fontWeight: '700',
fontSize: '0.75rem',
textTransform: 'uppercase',
letterSpacing: '0.5px',
textShadow: '0 0 10px rgba(255, 184, 0, 0.9)',
boxShadow: '0 0 20px rgba(255, 184, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4)',
textShadow: '0 0 8px rgba(245, 158, 11, 0.5)',
boxShadow: '0 0 16px rgba(245, 158, 11, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4)',
},
// MEDIUM severity badge - BRIGHT CYAN with WHITE text
// MEDIUM severity badge - Sky blue with refined glow
badgeMedium: {
display: 'inline-flex',
alignItems: 'center',
gap: '0.5rem',
background: 'linear-gradient(135deg, rgba(0, 217, 255, 0.4) 0%, rgba(0, 217, 255, 0.3) 100%)',
border: '2px solid #00D9FF',
background: 'linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(14, 165, 233, 0.2) 100%)',
border: '2px solid #0EA5E9',
borderRadius: '0.375rem',
padding: '0.375rem 0.875rem',
color: '#FFFFFF',
color: '#7DD3FC',
fontWeight: '700',
fontSize: '0.75rem',
textTransform: 'uppercase',
letterSpacing: '0.5px',
textShadow: '0 0 10px rgba(0, 217, 255, 0.9)',
boxShadow: '0 0 20px rgba(0, 217, 255, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4)',
textShadow: '0 0 8px rgba(14, 165, 233, 0.5)',
boxShadow: '0 0 16px rgba(14, 165, 233, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4)',
},
// LOW severity badge - BRIGHT GREEN with WHITE text
// LOW severity badge - Emerald with refined glow
badgeLow: {
display: 'inline-flex',
alignItems: 'center',
gap: '0.5rem',
background: 'linear-gradient(135deg, rgba(0, 255, 136, 0.4) 0%, rgba(0, 255, 136, 0.3) 100%)',
border: '2px solid #00FF88',
background: 'linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.2) 100%)',
border: '2px solid #10B981',
borderRadius: '0.375rem',
padding: '0.375rem 0.875rem',
color: '#FFFFFF',
color: '#6EE7B7',
fontWeight: '700',
fontSize: '0.75rem',
textTransform: 'uppercase',
letterSpacing: '0.5px',
textShadow: '0 0 10px rgba(0, 255, 136, 0.9)',
boxShadow: '0 0 20px rgba(0, 255, 136, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4)',
textShadow: '0 0 8px rgba(16, 185, 129, 0.5)',
boxShadow: '0 0 16px rgba(16, 185, 129, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4)',
},
// Glowing dot for badges
glowDot: (color) => ({
@@ -143,11 +143,11 @@ const getSeverityBadgeStyle = (severity) => {
// Helper function to get severity dot color
const getSeverityDotColor = (severity) => {
switch (severity?.toLowerCase()) {
case 'critical': return '#FF3366';
case 'high': return '#FFB800';
case 'medium': return '#00D9FF';
case 'low': return '#00FF88';
default: return '#00D9FF';
case 'critical': return '#EF4444';
case 'high': return '#F59E0B';
case 'medium': return '#0EA5E9';
case 'low': return '#10B981';
default: return '#0EA5E9';
}
};
const API_HOST = process.env.REACT_APP_API_HOST || 'http://localhost:3001';
@@ -770,27 +770,27 @@ export default function App() {
</div>
</div>
{/* Stats Bar - INLINE STYLES FOR GUARANTEED VISIBILITY */}
{/* Stats Bar - Modern refined styling */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<div style={STYLES.statCard}>
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '3px', background: 'linear-gradient(90deg, transparent, #00D9FF, transparent)', boxShadow: '0 0 12px rgba(0, 217, 255, 0.7)' }}></div>
<div style={{ fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#B8C5D9', marginBottom: '0.25rem' }}>Total CVEs</div>
<div style={{ fontSize: '1.5rem', fontWeight: '700', fontFamily: 'monospace', color: '#00D9FF', textShadow: '0 0 20px rgba(0, 217, 255, 0.5)' }}>{Object.keys(filteredGroupedCVEs).length}</div>
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '2px', background: 'linear-gradient(90deg, transparent, #0EA5E9, transparent)', boxShadow: '0 0 8px rgba(14, 165, 233, 0.5)' }}></div>
<div style={{ fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#CBD5E1', marginBottom: '0.25rem' }}>Total CVEs</div>
<div style={{ fontSize: '1.5rem', fontWeight: '700', fontFamily: 'monospace', color: '#0EA5E9', textShadow: '0 0 16px rgba(14, 165, 233, 0.4)' }}>{Object.keys(filteredGroupedCVEs).length}</div>
</div>
<div style={STYLES.statCard}>
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '3px', background: 'linear-gradient(90deg, transparent, #00D9FF, transparent)', boxShadow: '0 0 12px rgba(0, 217, 255, 0.7)' }}></div>
<div style={{ fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#B8C5D9', marginBottom: '0.25rem' }}>Vendor Entries</div>
<div style={{ fontSize: '1.5rem', fontWeight: '700', fontFamily: 'monospace', color: '#E4E8F1' }}>{cves.length}</div>
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '2px', background: 'linear-gradient(90deg, transparent, #0EA5E9, transparent)', boxShadow: '0 0 8px rgba(14, 165, 233, 0.5)' }}></div>
<div style={{ fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#CBD5E1', marginBottom: '0.25rem' }}>Vendor Entries</div>
<div style={{ fontSize: '1.5rem', fontWeight: '700', fontFamily: 'monospace', color: '#E2E8F0' }}>{cves.length}</div>
</div>
<div style={{...STYLES.statCard, border: '3px solid #FFB800', boxShadow: '0 8px 24px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 184, 0, 0.3), inset 0 2px 0 rgba(255, 184, 0, 0.2)'}}>
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '3px', background: 'linear-gradient(90deg, transparent, #FFB800, transparent)', boxShadow: '0 0 12px rgba(255, 184, 0, 0.7)' }}></div>
<div style={{ fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#B8C5D9', marginBottom: '0.25rem' }}>Open Tickets</div>
<div style={{ fontSize: '1.5rem', fontWeight: '700', fontFamily: 'monospace', color: '#FFB800', textShadow: '0 0 20px rgba(255, 184, 0, 0.5)' }}>{jiraTickets.filter(t => t.status !== 'Closed').length}</div>
<div style={{...STYLES.statCard, border: '2px solid #F59E0B', boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(245, 158, 11, 0.15)'}}>
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '2px', background: 'linear-gradient(90deg, transparent, #F59E0B, transparent)', boxShadow: '0 0 8px rgba(245, 158, 11, 0.5)' }}></div>
<div style={{ fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#CBD5E1', marginBottom: '0.25rem' }}>Open Tickets</div>
<div style={{ fontSize: '1.5rem', fontWeight: '700', fontFamily: 'monospace', color: '#F59E0B', textShadow: '0 0 16px rgba(245, 158, 11, 0.4)' }}>{jiraTickets.filter(t => t.status !== 'Closed').length}</div>
</div>
<div style={{...STYLES.statCard, border: '3px solid #FF3366', boxShadow: '0 8px 24px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 51, 102, 0.3), inset 0 2px 0 rgba(255, 51, 102, 0.2)'}}>
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '3px', background: 'linear-gradient(90deg, transparent, #FF3366, transparent)', boxShadow: '0 0 12px rgba(255, 51, 102, 0.7)' }}></div>
<div style={{ fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#B8C5D9', marginBottom: '0.25rem' }}>Critical</div>
<div style={{ fontSize: '1.5rem', fontWeight: '700', fontFamily: 'monospace', color: '#FF3366', textShadow: '0 0 20px rgba(255, 51, 102, 0.5)' }}>{cves.filter(c => c.severity === 'Critical').length}</div>
<div style={{...STYLES.statCard, border: '2px solid #EF4444', boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(239, 68, 68, 0.15), inset 0 1px 0 rgba(239, 68, 68, 0.15)'}}>
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '2px', background: 'linear-gradient(90deg, transparent, #EF4444, transparent)', boxShadow: '0 0 8px rgba(239, 68, 68, 0.5)' }}></div>
<div style={{ fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#CBD5E1', marginBottom: '0.25rem' }}>Critical</div>
<div style={{ fontSize: '1.5rem', fontWeight: '700', fontFamily: 'monospace', color: '#EF4444', textShadow: '0 0 16px rgba(239, 68, 68, 0.4)' }}>{cves.filter(c => c.severity === 'Critical').length}</div>
</div>
</div>
</div>
@@ -1259,38 +1259,38 @@ export default function App() {
<div className="grid grid-cols-12 gap-6">
{/* LEFT PANEL - Wiki/Knowledge Base */}
<div className="col-span-12 lg:col-span-3 space-y-4">
<div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '4px solid #00FF88'}} className="rounded-lg">
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#00FF88', marginBottom: '1rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 15px rgba(0, 255, 136, 0.5)' }}>
<div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '3px solid #10B981'}} className="rounded-lg">
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#10B981', marginBottom: '1rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 12px rgba(16, 185, 129, 0.4)' }}>
Knowledge Base
</h2>
{/* Wiki/Blog Style Entries */}
<div className="space-y-3">
<div style={{ background: 'linear-gradient(135deg, rgba(19, 25, 55, 0.85) 0%, rgba(30, 39, 73, 0.75) 100%)', border: '1px solid rgba(0, 255, 136, 0.3)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
<div style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(16, 185, 129, 0.25)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
<h3 className="text-white font-semibold text-sm mb-1 font-mono">CVE Response Procedures</h3>
<p className="text-gray-400 text-xs mb-2">Standard operating procedures for vulnerability response and escalation...</p>
<span className="text-xs text-intel-success font-mono">Last updated: 2024-02-08</span>
</div>
<div style={{ background: 'linear-gradient(135deg, rgba(19, 25, 55, 0.85) 0%, rgba(30, 39, 73, 0.75) 100%)', border: '1px solid rgba(0, 255, 136, 0.3)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
<div style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(16, 185, 129, 0.25)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
<h3 className="text-white font-semibold text-sm mb-1 font-mono">Vendor Contact Matrix</h3>
<p className="text-gray-400 text-xs mb-2">Emergency contacts and escalation paths for security vendors...</p>
<span className="text-xs text-intel-success font-mono">Last updated: 2024-02-05</span>
</div>
<div style={{ background: 'linear-gradient(135deg, rgba(19, 25, 55, 0.85) 0%, rgba(30, 39, 73, 0.75) 100%)', border: '1px solid rgba(0, 255, 136, 0.3)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
<div style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(16, 185, 129, 0.25)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
<h3 className="text-white font-semibold text-sm mb-1 font-mono">Severity Classification Guide</h3>
<p className="text-gray-400 text-xs mb-2">Guidelines for assessing and classifying vulnerability severity levels...</p>
<span className="text-xs text-intel-success font-mono">Last updated: 2024-01-28</span>
</div>
<div style={{ background: 'linear-gradient(135deg, rgba(19, 25, 55, 0.85) 0%, rgba(30, 39, 73, 0.75) 100%)', border: '1px solid rgba(0, 255, 136, 0.3)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
<div style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(16, 185, 129, 0.25)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
<h3 className="text-white font-semibold text-sm mb-1 font-mono">Patching Policy</h3>
<p className="text-gray-400 text-xs mb-2">Enterprise patch management timelines and approval workflow...</p>
<span className="text-xs text-intel-success font-mono">Last updated: 2024-01-15</span>
</div>
<div style={{ background: 'linear-gradient(135deg, rgba(19, 25, 55, 0.85) 0%, rgba(30, 39, 73, 0.75) 100%)', border: '1px solid rgba(0, 255, 136, 0.3)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
<div style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(16, 185, 129, 0.25)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
<h3 className="text-white font-semibold text-sm mb-1 font-mono">Documentation Standards</h3>
<p className="text-gray-400 text-xs mb-2">Required documentation for vulnerability tracking and audit compliance...</p>
<span className="text-xs text-intel-success font-mono">Last updated: 2024-01-10</span>
@@ -1304,7 +1304,7 @@ export default function App() {
{/* Quick Check */}
<div style={{...STYLES.intelCard, padding: '1.5rem'}} className="rounded-lg">
<div className="scan-line"></div>
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#00D9FF', marginBottom: '0.75rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 20px rgba(0, 217, 255, 0.5)' }}>Quick CVE Lookup</h2>
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#0EA5E9', marginBottom: '0.75rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 16px rgba(14, 165, 233, 0.4)' }}>Quick CVE Lookup</h2>
<div className="flex gap-3">
<input
type="text"
@@ -1743,8 +1743,8 @@ export default function App() {
{/* RIGHT PANEL - Calendar & Open Tickets */}
<div className="col-span-12 lg:col-span-3 space-y-4">
{/* Calendar Widget */}
<div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '4px solid #00D9FF'}} className="rounded-lg">
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#00D9FF', marginBottom: '1rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 15px rgba(0, 217, 255, 0.5)' }}>
<div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '3px solid #0EA5E9'}} className="rounded-lg">
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#0EA5E9', marginBottom: '1rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 12px rgba(14, 165, 233, 0.4)' }}>
Calendar
</h2>
@@ -1808,9 +1808,9 @@ export default function App() {
</div>
{/* Open Vendor Tickets */}
<div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '4px solid #FFB800'}} className="rounded-lg">
<div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '3px solid #F59E0B'}} className="rounded-lg">
<div className="flex justify-between items-center mb-4">
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#FFB800', display: 'flex', alignItems: 'center', gap: '0.5rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 15px rgba(255, 184, 0, 0.5)' }}>
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#F59E0B', display: 'flex', alignItems: 'center', gap: '0.5rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 12px rgba(245, 158, 11, 0.4)' }}>
<AlertCircle className="w-5 h-5" />
Open Tickets
</h2>
@@ -1824,14 +1824,14 @@ export default function App() {
)}
</div>
<div className="text-center mb-3">
<div style={{ fontSize: '2rem', fontWeight: '700', fontFamily: 'monospace', color: '#FFB800', textShadow: '0 0 20px rgba(255, 184, 0, 0.5)' }}>
<div style={{ fontSize: '2rem', fontWeight: '700', fontFamily: 'monospace', color: '#F59E0B', textShadow: '0 0 16px rgba(245, 158, 11, 0.4)' }}>
{jiraTickets.filter(t => t.status !== 'Closed').length}
</div>
<div className="text-xs text-gray-400 uppercase tracking-wider">Active</div>
</div>
<div className="space-y-2 max-h-96 overflow-y-auto">
{jiraTickets.filter(t => t.status !== 'Closed').slice(0, 10).map(ticket => (
<div key={ticket.id} style={{ background: 'linear-gradient(135deg, rgba(19, 25, 55, 0.85) 0%, rgba(30, 39, 73, 0.75) 100%)', border: '1px solid rgba(255, 184, 0, 0.3)', borderRadius: '0.375rem', padding: '0.5rem', boxShadow: '0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04)' }}>
<div key={ticket.id} style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(245, 158, 11, 0.25)', borderRadius: '0.375rem', padding: '0.5rem', boxShadow: '0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03)' }}>
<div className="flex items-start justify-between gap-2 mb-1">
<a
href={ticket.url || '#'}
@@ -1857,7 +1857,7 @@ export default function App() {
{ticket.summary && <div className="text-xs text-gray-300 mt-1 truncate">{ticket.summary}</div>}
<div className="mt-2">
<span style={{ ...STYLES.badgeHigh, fontSize: '0.65rem', padding: '0.25rem 0.5rem' }}>
<span style={{...STYLES.glowDot('#FFB800'), width: '6px', height: '6px'}}></span>
<span style={{...STYLES.glowDot('#F59E0B'), width: '6px', height: '6px'}}></span>
{ticket.status}
</span>
</div>