From ea875e91937270e311c4303365f4725170483975 Mon Sep 17 00:00:00 2001
From: Jordan Ramos <jordan.ramos@spectrum.com>
Date: Wed, 27 May 2026 11:18:22 -0600
Subject: [PATCH] Add collapsible sections to Ivanti Queue side panel

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.
---
 .../src/components/pages/ReportingPage.js     | 41 ++++++++++++++-----
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/pages/ReportingPage.js b/frontend/src/components/pages/ReportingPage.js
index d5d905b..3e54e5d 100644
--- a/frontend/src/components/pages/ReportingPage.js
+++ b/frontend/src/components/pages/ReportingPage.js
@@ -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',
-                                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' }}>
+                            {/* 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)'}`,
+                                    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>