cve-dashboard/.kiro/specs/queue-collapsible-sections/requirements.md

# Requirements Document

## Introduction

The IvantiTodoQueuePage currently displays all pending queue items in a flat table. This feature introduces collapsible sections that group items using a hybrid layout: an "Inventory" section at the top containing CARD, GRANITE, and DECOM workflow type items, followed by vendor-grouped sections for FP and Archer items. Each section header is clickable to collapse or expand its contents, allowing users to focus on relevant groups while maintaining full cross-section selection and existing page functionality.

## Glossary

- **Queue_Page**: The IvantiTodoQueuePage React component located at `frontend/src/components/pages/IvantiTodoQueuePage.js`
- **Section**: A collapsible group of queue items sharing a common grouping criterion (either Inventory type or vendor name)
- **Section_Header**: The clickable row that displays the section label, item count, and collapse/expand toggle
- **Inventory_Section**: The top-level section containing items with workflow_type of CARD, GRANITE, or DECOM
- **Vendor_Section**: A section grouping FP and Archer workflow type items by their vendor field
- **Collapse_State**: A per-section boolean indicating whether the section body is hidden (collapsed) or visible (expanded)
- **Visible_Items**: Queue items with status "pending" that are displayed in the main list

## Requirements

### Requirement 1: Hybrid Grouping Layout

**User Story:** As a queue operator, I want items grouped into logical sections (Inventory at top, then vendor groups), so that I can quickly locate items by their workflow category.

#### Acceptance Criteria

1. THE Queue_Page SHALL group Visible_Items into an Inventory_Section containing all items where workflow_type is CARD, GRANITE, or DECOM.
2. THE Queue_Page SHALL group remaining Visible_Items (workflow_type FP or Archer) into Vendor_Sections keyed by the item vendor field.
3. THE Queue_Page SHALL display the Inventory_Section before all Vendor_Sections.
4. THE Queue_Page SHALL sort Vendor_Sections alphabetically by vendor name.
5. WHEN a Visible_Item has no vendor value, THE Queue_Page SHALL place the item in a Vendor_Section labeled "Unknown".
6. WHEN the Inventory_Section contains zero items, THE Queue_Page SHALL omit the Inventory_Section from the layout.
7. WHEN a vendor has zero pending items, THE Queue_Page SHALL omit that Vendor_Section from the layout.

### Requirement 2: Collapsible Section Headers

**User Story:** As a queue operator, I want to collapse sections I am not working on, so that I can reduce visual clutter and focus on relevant items.

#### Acceptance Criteria

1. THE Queue_Page SHALL render a Section_Header for each displayed Section.
2. WHEN a user clicks a Section_Header, THE Queue_Page SHALL toggle the Collapse_State of that Section.
3. WHILE a Section is in expanded Collapse_State, THE Queue_Page SHALL display all items belonging to that Section.
4. WHILE a Section is in collapsed Collapse_State, THE Queue_Page SHALL hide all items belonging to that Section.
5. WHILE a Section is in collapsed Collapse_State, THE Section_Header SHALL remain visible with the section label and item count.
6. THE Section_Header SHALL display a directional chevron icon indicating the current Collapse_State (down for expanded, right for collapsed).
7. THE Queue_Page SHALL initialize all Sections in expanded Collapse_State on page load.

### Requirement 3: Section Header Display

**User Story:** As a queue operator, I want section headers to show the group name and item count, so that I can assess workload distribution at a glance.

#### Acceptance Criteria

1. THE Section_Header for the Inventory_Section SHALL display the label "Inventory" with the total count of items in that section.
2. THE Section_Header for each Vendor_Section SHALL display the vendor name with the total count of items in that section.
3. THE Section_Header SHALL use a monospace font, uppercase text, and styling consistent with the dark theme tactical intelligence aesthetic.
4. THE Section_Header SHALL use a distinct accent color for the Inventory_Section (green) and a neutral color for Vendor_Sections.
5. THE Section_Header SHALL display a bottom border to visually separate the header from section content.

### Requirement 4: Cross-Section Selection Preservation

**User Story:** As a queue operator, I want to select items across multiple sections without losing selections when collapsing sections, so that I can create consolidated Jira tickets from items in different groups.

#### Acceptance Criteria

1. WHILE selection mode is active, THE Queue_Page SHALL allow selecting items from any combination of Sections.
2. WHEN a Section is collapsed, THE Queue_Page SHALL preserve the selected state of items within that collapsed Section.
3. WHEN a Section is expanded after being collapsed, THE Queue_Page SHALL display the previously selected items as still selected.
4. THE selection count indicator SHALL reflect the total count of selected items across all Sections regardless of Collapse_State.
5. THE Select All checkbox SHALL toggle selection for all Visible_Items across all Sections regardless of Collapse_State.
6. THE floating action bar SHALL operate on all selected items across all Sections regardless of Collapse_State.

### Requirement 5: Visual and Interaction Consistency

**User Story:** As a queue operator, I want the collapsible sections to match the existing page aesthetic and not break existing functionality, so that the experience remains cohesive.

#### Acceptance Criteria

1. THE Queue_Page SHALL use inline styles consistent with the existing STYLES constant and dark theme tactical intelligence aesthetic.
2. THE Queue_Page SHALL use lucide-react icons for the collapse/expand chevron indicators.
3. THE Section_Header SHALL provide a pointer cursor to indicate clickability.
4. WHEN items are grouped into Sections, THE ticket link badges SHALL continue to display on items that have associated Jira tickets.
5. WHEN items are grouped into Sections, THE consolidation modal SHALL continue to function with the selected items.
6. WHEN items are grouped into Sections, THE floating action bar SHALL continue to appear when one or more items are selected.
7. THE Queue_Page SHALL continue to display the completed items count at the bottom of the page.
8. IF the queue contains zero Visible_Items, THEN THE Queue_Page SHALL display the existing empty state without any Section_Headers.