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

Add collapsible sections to Ivanti Queue side panel

Browse Source 
Make the INVENTORY and vendor group headers in the QueuePanel (slide-out
side panel) clickable to collapse/expand their contents. Adds a chevron
indicator showing collapse state. All sections start expanded by default.
This commit is contained in:
Jordan Ramos
2026-05-27 11:18:22 -06:00
parent fabf98790c
commit ea875e9193
1 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
import ReactDOM from 'react-dom';
import { RefreshCw, Loader, AlertCircle, PieChart, ChevronUp, ChevronDown, ChevronsUpDown, Settings2, GripVertical, Eye, EyeOff, Filter, Download, RotateCcw, Trash2, X, ListTodo, Upload, FileText, Check, AlertTriangle, CornerUpRight, Edit3, Square, CheckSquare, MinusSquare, Search, Database, Plus } from 'lucide-react';
import { RefreshCw, Loader, AlertCircle, PieChart, ChevronUp, ChevronDown, ChevronRight, ChevronsUpDown, Settings2, GripVertical, Eye, EyeOff, Filter, Download, RotateCcw, Trash2, X, ListTodo, Upload, FileText, Check, AlertTriangle, CornerUpRight, Edit3, Square, CheckSquare, MinusSquare, Search, Database, Plus } from 'lucide-react';
import * as XLSX from 'xlsx';
import { useAuth } from '../../contexts/AuthContext';
import IvantiCountsChart from './IvantiCountsChart';
@@ -1584,6 +1584,12 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
const [submissionsCollapsed, setSubmissionsCollapsed] = useState(() => localStorage.getItem('steam_submissions_collapsed') === 'true');
const [dismissError, setDismissError] = useState(null);
// Collapsible section state for queue groups
const [collapsedSections, setCollapsedSections] = useState({});
const toggleSectionCollapse = (sectionKey) => {
setCollapsedSections((prev) => ({ ...prev, [sectionKey]: !prev[sectionKey] }));
};
const toggleSubmissionsCollapsed = () => {
setSubmissionsCollapsed(prev => {
const next = !prev;
@@ -2353,13 +2359,26 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
</div>
) : grouped.map(({ key, label, items: groupItems, isInventory, cardItems, graniteItems, decomItems }) => (
<div key={key} style={{ marginBottom: '1.25rem' }}>
{/* Group header */}
<div style={{
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
{/* Group header — clickable to collapse/expand */}
<div
onClick={() => toggleSectionCollapse(key)}
style={{
display: 'flex', alignItems: 'center', gap: '0.375rem',
padding: '0.3rem 0', marginBottom: '0.375rem',
borderBottom: `1px solid ${isInventory ? 'rgba(16,185,129,0.2)' : 'rgba(255,255,255,0.06)'}`,
}}>
<span style={{ fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '700', color: isInventory ? '#10B981' : '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
cursor: 'pointer', userSelect: 'none',
}}
role="button"
tabIndex={0}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleSectionCollapse(key); } }}
aria-expanded={!collapsedSections[key]}
aria-label={`${label} section, ${groupItems.length} items`}
>
{collapsedSections[key]
? <ChevronRight style={{ width: '12px', height: '12px', color: isInventory ? '#10B981' : '#64748B' }} />
: <ChevronDown style={{ width: '12px', height: '12px', color: isInventory ? '#10B981' : '#64748B' }} />
}
<span style={{ fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '700', color: isInventory ? '#10B981' : '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.1em', flex: 1 }}>
{label}
</span>
<span style={{ fontFamily: 'monospace', fontSize: '0.62rem', color: '#334155' }}>
@@ -2367,8 +2386,8 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
</span>
</div>
{/* Items — Inventory section renders CARD then GRANITE then DECOM with optional sub-dividers */}
{isInventory ? (
{/* Items — only rendered when section is expanded */}
{!collapsedSections[key] && (isInventory ? (
<>
{cardItems.map((item) => (
<React.Fragment key={item.id}>
@@ -2395,7 +2414,7 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
</>
) : (
groupItems.map((item) => renderQueueItem(item, { done: item.status === 'complete', selectedIds, toggleSelect, onUpdate, onDelete, setRedirectItem, canWrite }))
)}
))}
</div>
))}
</div>