## GPM-025: Progress Visualization PRD

**Goal:** Provide users with clear and actionable visual representations of ongoing work and its status, leveraging the aggregated data from GPM-015. This PRD focuses on foundational visual components to make progress transparent and easily digestible.

---

### GPM-026: Display Core Work Item Progress List
**Goal:** Present a basic, real-time list of all active (not completed/cancelled) work items with their essential progress information.
**Acceptance Criteria:**
- A dedicated UI section displays a list of work items.
- Each item in the list shows its ID, Title, and current Status (e.g., "In Progress", "Blocked", "Ready for Review").
- The list is ordered by default (e.g., by last updated).
**Files:**
- `frontend/src/views/ProgressDashboard.vue`
- `frontend/src/components/WorkItemProgressList.vue`
- `backend/src/routes/progress_api.py` (GET `/progress/items`)
**Spawns:** GPM-033 (Enhanced Work Item Details PRD)

### GPM-027: Visual Progress Indicator for Work Items
**Goal:** Enhance the work item list by adding a visual progress indicator (e.g., a progress bar or percentage) for each item, based on its completion state.
**Acceptance Criteria:**
- Each work item in the list displays a visual progress bar or a percentage (e.g., "75% complete").
- The progress indicator accurately reflects the aggregated completion data from GPM-015.
- The indicator updates dynamically if underlying data changes (e.g., via a manual refresh).
**Files:**
- `frontend/src/components/WorkItemProgressBar.vue`
- `frontend/src/components/WorkItemProgressList.vue` (integration)
- `backend/src/services/progress_calculator.py` (if not fully covered by GPM-015)
**Spawns:** GPM-034 (Work Item History Tracking PRD)

### GPM-028: Filter Progress List by Status
**Goal:** Enable users to filter the displayed work items by their current status, making it easier to focus on specific categories of work.
**Acceptance Criteria:**
- A dropdown or set of toggle buttons allows users to select one or more statuses (e.g., "In Progress", "Blocked", "Ready for Review").
- When a filter is applied, the list updates to show only items matching the selected status(es).
- An option to "Show All" statuses is available.
**Files:**
- `frontend/src/components/StatusFilter.vue`
- `frontend/src/views/ProgressDashboard.vue` (integration)
- `backend/src/routes/progress_api.py` (add status filter parameter to GET `/progress/items`)
**Spawns:** GPM-036 (Advanced Filtering & Search PRD)

### GPM-029: Sort Progress List by Key Attributes
**Goal:** Provide options for users to sort the progress list based on relevant attributes like priority or due date.
**Acceptance Criteria:**
- A dropdown or buttons allow sorting the list by:
    - Priority (High to Low, Low to High)
    - Due Date (Ascending, Descending)
    - Last Updated (Ascending, Descending)
- Applying a sort option immediately reorders the displayed list.
**Files:**
- `frontend/src/components/SortOptions.vue`
- `frontend/src/views/ProgressDashboard.vue` (integration)
- `backend/src/routes/progress_api.py` (add sort parameter to GET `/progress/items`)
**Spawns:** GPM-037 (Customizable Views PRD)

### GPM-030: Highlight Blocked Work Items
**Goal:** Visually distinguish work items that are currently in a "Blocked" status, drawing immediate attention to potential impediments.
**Acceptance Criteria:**
- Any work item with a "Blocked" status receives a distinct visual highlight (e.g., a red border, a specific icon, or a background color).
- The highlighting is clear and easily noticeable without being overly distracting.
**Files:**
- `frontend/src/styles/progress_visualization.css`
- `frontend/src/components/WorkItemProgressList.vue` (apply conditional styling)
**Spawns:** GPM-038 (Blocker Resolution Workflow PRD)

### GPM-031: Project/Epic Level Progress Summary
**Goal:** Provide a higher-level summary of progress for projects or epics, aggregating the status of their child work items.
**Acceptance Criteria:**
- A separate section or card displays high-level entities (e.g., "Project A", "Epic B").
- Each high-level entity shows an overall progress percentage or a summary status based on its child items' completion.
- Clicking on a high-level entity (optional for this story, but good for future) could filter the list to its children.
**Files:**
- `frontend/src/components/ProjectEpicSummaryCard.vue`
- `backend/src/routes/progress_api.py` (GET `/progress/summary`)
- `backend/src/services/project_aggregator.py`
**Spawns:** GPM-039 (Hierarchy Navigation PRD)

### GPM-032: Manual Data Refresh Mechanism
**Goal:** Allow users to manually trigger a refresh of all displayed progress data to ensure they are viewing the most up-to-date information.
**Acceptance Criteria:**
- A "Refresh" button or icon is visible in the progress dashboard.
- Clicking the "Refresh" button re-fetches all progress data from the backend and updates the UI.
- A visual indicator (e.g., loading spinner) is shown during the refresh process.
**Files:**
- `frontend/src/components/RefreshButton.vue`
- `frontend/src/views/ProgressDashboard.vue` (integrate refresh logic)
**Spawns:** GPM-040 (Automated Real-time Updates PRD)