3.6: Work Item Detail & Edit Page

[steilerDev]

As a homeowner, I want to view the full details of a work item and edit all its properties inline so that I can manage each construction task's information in one place.

Parent Epic: #3
Priority: Must Have

Acceptance Criteria

Detail View

• 1. A work item detail page is accessible at /work-items/:id. It displays all work item properties: title, description, status, start date, end date, duration, "start after" constraint, "start before" constraint, assigned user, tags, notes, subtasks, and timestamps (created/updated).
• 2. The status is displayed as a color-coded badge (e.g., green for Completed, yellow for In Progress, red for Blocked, gray for Not Started) and can be changed via a dropdown or click-to-cycle interaction.
• 3. The assigned user is displayed with their name and can be changed via a user selection dropdown that lists all active users. A "None" option allows unassigning.
• 4. Tags are displayed as colored pills and can be added/removed inline (same interaction pattern as Story 3.3 AC EPIC-09: Dashboard & Project Health Center #9).
• 5. Notes are displayed in chronological order with the author's name and timestamp. Users can add new notes via an input field. Users can edit/delete their own notes. Admins can edit/delete any note.
• 6. Subtasks are displayed as a reorderable checklist. Users can: add new subtasks, toggle completion (checkbox), edit subtask titles inline, delete subtasks, and reorder subtasks via drag-and-drop.
• 7. The page shows a "Delete" action (button or menu option) that prompts for confirmation before deleting the work item. After deletion, the user is redirected to the work items list page.

Create/Edit Form

• 8. A create form is accessible at /work-items/new. It includes fields for: title (required), description (textarea), status (dropdown), start date (date picker), end date (date picker), duration in days (number input), "start after" constraint (date picker), "start before" constraint (date picker), assigned user (dropdown), and tags (multi-select). Submitting calls POST /api/work-items and redirects to the new work item's detail page on success.
• 9. Inline editing on the detail page allows modifying title, description, status, dates, duration, constraints, and assigned user without navigating away. Changes are saved via PATCH /api/work-items/:id and the UI updates optimistically or on confirmation.
• 10. Client-side validation displays errors for: empty title, start date after end date, "start after" after "start before", and invalid date formats. Server-side validation errors from the API are also displayed with field-level detail.
• 11. Date fields use date picker components that are keyboard accessible and display dates in a human-readable format (e.g., "Feb 16, 2026").

Cross-cutting

• 12. A "Back to list" navigation element (breadcrumb or back button) is visible and returns to the work items list, preserving the previous filter/sort state.
• 13. The page is responsive: on desktop it uses a multi-column layout; on tablet/mobile it stacks into a single column.
• 14. Loading states are shown while fetching work item data. A 404-style message is shown if the work item ID does not exist.

Notes

• Depends on Story 3.4 (notes and subtasks API) and Story 3.5 (list page for navigation context).
• This is the most interaction-heavy page in the application — it needs to feel smooth and responsive.
• Inline editing should use a clear visual pattern (e.g., click-to-edit with a pencil icon, or always-editable fields with auto-save).
• The drag-and-drop subtask reordering calls PATCH /api/work-items/:workItemId/subtasks/reorder.
• Dependencies section on this page will be added in Story 3.7.
• Depends on: 3.4: Work Item Notes & Subtasks API #90 (Story 3.4), 3.5: Work Items List Page #91 (Story 3.5)

[steilerDev]

[uat-validator]

UAT Scenarios: Story 3.6 — Work Item Detail & Edit Page

Preconditions

• Story 3.4 (Notes & Subtasks API) and Story 3.5 (List Page) are complete
• Work items with complete data (tags, notes, subtasks, assigned users) exist for testing
• Authentication system is functional

---

Scenario Group: Navigation & Access

UAT-3.6-01: Detail page is accessible via direct URL

Given I am authenticated
And a work item exists with ID "work-123"
When I navigate to /work-items/work-123
Then the work item detail page loads
And all work item properties are displayed
Verification Method: Both (E2E + manual)

UAT-3.6-02: Detail page is accessible from list page

Given I am on the work items list page
When I click a work item row
Then I navigate to the detail page for that work item
Verification Method: Both (E2E + manual)

UAT-3.6-03: 404 page appears for non-existent work item

Given I am authenticated
When I navigate to /work-items/non-existent-uuid
Then a 404 error message is displayed (e.g., "Work item not found")
And a link to return to the work items list is visible
Verification Method: Both (E2E + manual)

---

Scenario Group: Detail View — Basic Properties

UAT-3.6-04: Title is displayed prominently

Given I am viewing a work item detail page
And the work item has title "Install electrical panel"
When the page loads
Then "Install electrical panel" is displayed as the main heading
Verification Method: Manual

UAT-3.6-05: Description is displayed

Given the work item has description "Install main electrical panel in garage"
When I view the detail page
Then the description is displayed in a readable format
Verification Method: Manual

UAT-3.6-06: Status badge is displayed and color-coded

Given the work item has status "in_progress"
When I view the detail page
Then a status badge is displayed with label "In Progress" and color yellow/amber
Verification Method: Manual

UAT-3.6-07: Dates are displayed in human-readable format

Given the work item has startDate = "2026-03-01" and endDate = "2026-03-05"
When I view the detail page
Then the dates are displayed as "Mar 1, 2026" and "Mar 5, 2026" (or similar locale-specific format)
Verification Method: Manual

UAT-3.6-08: Duration is displayed

Given the work item has durationDays = 4
When I view the detail page
Then "4 days" is displayed
Verification Method: Manual

UAT-3.6-09: Scheduling constraints are displayed

Given the work item has startAfter = "2026-02-28" and startBefore = "2026-03-10"
When I view the detail page
Then both constraints are displayed with labels like "Start after: Feb 28, 2026" and "Start before: Mar 10, 2026"
Verification Method: Manual

UAT-3.6-10: Assigned user is displayed

Given the work item is assigned to user "John Doe"
When I view the detail page
Then "John Doe" is displayed in the "Assigned to" section
Verification Method: Manual

UAT-3.6-11: Unassigned work items show placeholder

Given the work item has no assigned user
When I view the detail page
Then "Unassigned" or a similar placeholder is displayed
Verification Method: Manual

UAT-3.6-12: Created and updated timestamps are displayed

Given the work item has createdAt and updatedAt timestamps
When I view the detail page
Then both timestamps are displayed at the bottom (e.g., "Created Feb 10, 2026 at 2:30 PM • Updated Feb 15, 2026 at 4:15 PM")
Verification Method: Manual

---

Scenario Group: Detail View — Tags

UAT-3.6-13: Tags are displayed as colored pills

Given the work item has tags "Electrical" (blue) and "Priority" (red)
When I view the detail page
Then both tags are displayed as colored pills with their names
Verification Method: Manual

UAT-3.6-14: Adding a tag inline works

Given I am viewing a work item detail page
When I click an "Add tag" button or field
And I select an existing tag "Plumbing"
And I confirm the addition
Then the tag is added via PATCH /api/work-items/:id
And "Plumbing" pill appears immediately
Verification Method: Both (E2E for API, manual for UX)

UAT-3.6-15: Creating a new tag inline works

Given I am adding a tag to a work item
When I type a tag name that doesn't exist (e.g., "New Tag")
Then a "Create tag 'New Tag'" option appears
And clicking it creates the tag via POST /api/tags
And the new tag is immediately added to the work item
Verification Method: Both (E2E for API flow, manual for UX)

UAT-3.6-16: Removing a tag works

Given the work item has tag "Electrical"
When I click a remove/delete icon on the "Electrical" pill
Then the tag is removed via PATCH /api/work-items/:id
And the "Electrical" pill disappears
Verification Method: Both (E2E for API, manual for UX)

---

Scenario Group: Detail View — Notes

UAT-3.6-17: Notes are displayed in chronological order

Given the work item has 3 notes created at different times
When I view the detail page
Then notes are displayed with the newest note first
And each note shows: author name, timestamp, content
Verification Method: Manual

UAT-3.6-18: Adding a new note works

Given I am viewing a work item detail page
When I enter text in the "Add note" input field
And I submit (e.g., click "Add Note" or press Enter)
Then the note is created via POST /api/work-items/:workItemId/notes
And the new note appears at the top of the notes list
Verification Method: Both (E2E for API, manual for UX)

UAT-3.6-19: Editing my own note works

Given I am viewing a note I created
When I click an "Edit" action next to the note
And I modify the content
And I save the changes
Then the note is updated via PATCH /api/work-items/:workItemId/notes/:noteId
And the updated content is displayed
Verification Method: Both (E2E for API, manual for UX)

UAT-3.6-20: Admin can edit any note

Given I am authenticated as an admin
And a note exists created by another user
When I click "Edit" on that note
And I modify and save
Then the note is updated successfully
Verification Method: Both (E2E for API, manual for UX)

UAT-3.6-21: Non-admin cannot edit others' notes

Given I am authenticated as a member (not admin)
And a note exists created by another user
When I view the note
Then no "Edit" action is available
Verification Method: Manual

UAT-3.6-22: Deleting my own note works

Given I am viewing a note I created
When I click "Delete" on the note
And I confirm the deletion (if prompted)
Then the note is deleted via DELETE /api/work-items/:workItemId/notes/:noteId
And the note is removed from the list
Verification Method: Both (E2E for API, manual for UX)

UAT-3.6-23: Admin can delete any note

Given I am authenticated as an admin
And a note exists created by another user
When I click "Delete" on that note
And I confirm
Then the note is deleted successfully
Verification Method: Both (E2E for API, manual for UX)

UAT-3.6-24: Non-admin cannot delete others' notes

Given I am authenticated as a member
And a note exists created by another user
When I view the note
Then no "Delete" action is available
Verification Method: Manual

---

Scenario Group: Detail View — Subtasks

UAT-3.6-25: Subtasks are displayed as a checklist

Given the work item has 3 subtasks with various completion states
When I view the detail page
Then subtasks are displayed as a checklist with checkboxes
And completed subtasks have checked boxes
Verification Method: Manual

UAT-3.6-26: Adding a new subtask works

Given I am viewing a work item detail page
When I enter text in the "Add subtask" input field
And I submit (e.g., press Enter or click "Add")
Then the subtask is created via POST /api/work-items/:workItemId/subtasks
And the new subtask appears at the bottom of the list
Verification Method: Both (E2E for API, manual for UX)

UAT-3.6-27: Toggling subtask completion works

Given a subtask exists with isCompleted = false
When I click the checkbox
Then the subtask is updated via PATCH /api/work-items/:workItemId/subtasks/:subtaskId
And the checkbox is now checked
Verification Method: Both (E2E for API, manual for UX)

UAT-3.6-28: Editing a subtask title inline works

Given a subtask exists with title "Order materials"
When I click the subtask title to edit it
And I change the text to "Order electrical materials"
And I confirm (e.g., blur or press Enter)
Then the subtask is updated via PATCH
And the new title is displayed
Verification Method: Both (E2E for API, manual for UX)

UAT-3.6-29: Deleting a subtask works

Given a subtask exists
When I click a delete icon next to the subtask
And I confirm (if prompted)
Then the subtask is deleted via DELETE /api/work-items/:workItemId/subtasks/:subtaskId
And the subtask is removed from the list
Verification Method: Both (E2E for API, manual for UX)

UAT-3.6-30: Drag-and-drop reordering of subtasks works

Given the work item has 3 subtasks in order [A, B, C]
When I drag subtask C above subtask A
And I drop it
Then the order is updated via PATCH /api/work-items/:workItemId/subtasks/reorder
And the new order [C, A, B] is displayed
Verification Method: Both (E2E for API, manual for drag UX)

---

Scenario Group: Inline Editing — Basic Properties

UAT-3.6-31: Clicking title activates edit mode

Given I am viewing a work item detail page
When I click on the title field (or click an "Edit" icon)
Then the title becomes an editable text input
Verification Method: Manual

UAT-3.6-32: Editing title and saving works

Given the title is in edit mode
When I change the title to "New title"
And I blur the field or press Enter
Then the work item is updated via PATCH /api/work-items/:id
And the new title is displayed
Verification Method: Both (E2E for API, manual for UX)

UAT-3.6-33: Canceling edit reverts changes

Given the title is in edit mode
And I have made changes
When I press Escape
Then the changes are discarded
And the original title is displayed
Verification Method: Manual

UAT-3.6-34: Changing status via dropdown works

Given the work item has status "not_started"
When I click the status badge
And I select "in_progress" from the dropdown
Then the work item is updated via PATCH
And the status badge now shows "In Progress" with updated color
Verification Method: Both (E2E for API, manual for UX)

UAT-3.6-35: Click-to-cycle status works (alternative UX)

Given the work item has status "not_started"
When I click the status badge repeatedly
Then the status cycles through: not_started → in_progress → completed → blocked → not_started
And each click updates via PATCH
Verification Method: Manual (if this UX pattern is implemented)

UAT-3.6-36: Editing description works

Given I am viewing the detail page
When I click the description field
And I edit the text
And I save (blur or explicit save button)
Then the description is updated via PATCH
And the new description is displayed
Verification Method: Both (E2E for API, manual for UX)

UAT-3.6-37: Changing assigned user works

Given the work item is assigned to "User A"
When I click the "Assigned to" field
And I select "User B" from the dropdown
Then the work item is updated via PATCH
And "User B" is now displayed
Verification Method: Both (E2E for API, manual for UX)

UAT-3.6-38: Unassigning a user works

Given the work item is assigned to a user
When I click the "Assigned to" field
And I select "None" or "Unassigned"
Then the assignedUserId is set to null via PATCH
And "Unassigned" is displayed
Verification Method: Both (E2E for API, manual for UX)

UAT-3.6-39: Editing dates with date picker works

Given I am viewing the detail page
When I click the "Start Date" field
Then a date picker appears
When I select "Mar 15, 2026"
And I confirm
Then the start date is updated via PATCH
And "Mar 15, 2026" is displayed
Verification Method: Both (E2E for API, manual for date picker UX)

UAT-3.6-40: Date picker is keyboard accessible

Given the date picker is open
When I navigate using Tab and arrow keys
Then I can select a date using only the keyboard
Verification Method: Manual (accessibility check)

---

Scenario Group: Create Form (New Work Item)

UAT-3.6-41: Create form is accessible at /work-items/new

Given I am authenticated
When I navigate to /work-items/new
Then the work item creation form loads
And all fields are empty (except status = default "not_started")
Verification Method: Manual

UAT-3.6-42: Submitting create form creates work item

Given I am on the create form
When I enter title "New work item"
And I fill optional fields (description, status, dates, etc.)
And I submit the form
Then a POST request is made to /api/work-items
And I am redirected to the new work item's detail page
Verification Method: Both (E2E for API + navigation, manual for UX)

UAT-3.6-43: Client-side validation prevents empty title submission

Given I am on the create form
When I leave the title field empty
And I attempt to submit
Then an error message is displayed: "Title is required"
And the form is not submitted
Verification Method: Manual

UAT-3.6-44: Client-side validation checks date constraints

Given I am on the create form
When I enter startDate = "2026-03-10" and endDate = "2026-03-01"
And I attempt to submit
Then an error message is displayed: "Start date must be before end date"
And the form is not submitted
Verification Method: Manual

UAT-3.6-45: Server-side validation errors are displayed

Given I am on the create form
When I submit invalid data (e.g., non-existent assignedUserId)
Then the server returns 400 with field-level errors
And the errors are displayed inline next to the relevant fields
Verification Method: Manual (simulate server error)

---

Scenario Group: Delete Action

UAT-3.6-46: Delete button is visible on detail page

Given I am viewing a work item detail page
When I look for delete actions
Then a "Delete" button or menu option is visible
Verification Method: Manual

UAT-3.6-47: Clicking delete prompts for confirmation

Given I am on a work item detail page
When I click "Delete"
Then a confirmation dialog appears asking "Are you sure you want to delete this work item?"
Verification Method: Manual

UAT-3.6-48: Confirming delete removes work item and redirects

Given the delete confirmation dialog is open
When I confirm
Then the work item is deleted via DELETE /api/work-items/:id
And I am redirected to /work-items (list page)
Verification Method: Both (E2E for API + navigation, manual for UX)

UAT-3.6-49: Canceling delete keeps work item

Given the delete confirmation dialog is open
When I cancel
Then the dialog closes
And I remain on the detail page
And the work item is NOT deleted
Verification Method: Manual

---

Scenario Group: Navigation

UAT-3.6-50: Back to list button is visible

Given I am on a work item detail page
When I view the page header
Then a "Back to list" button or breadcrumb is visible
Verification Method: Manual

UAT-3.6-51: Back to list preserves filter state

Given I navigated to a work item from a filtered list (e.g., /work-items?status=in_progress)
When I click "Back to list"
Then I return to /work-items?status=in_progress
And the filter is still applied
Verification Method: Manual

---

Scenario Group: Responsive Design

UAT-3.6-52: Desktop layout uses multi-column design

Given I am on a desktop browser (viewport > 1024px)
When I view the detail page
Then the layout uses multiple columns (e.g., properties on left, notes/subtasks on right)
Verification Method: Manual

UAT-3.6-53: Mobile layout stacks into single column

Given I am on a mobile browser (viewport < 768px)
When I view the detail page
Then all sections stack vertically in a single column
And all interactions remain accessible
Verification Method: Manual

---

Scenario Group: Loading & Error States

UAT-3.6-54: Loading indicator appears while fetching work item

Given I navigate to /work-items/work-123
When the API call is in progress
Then a loading spinner or skeleton UI is displayed
Verification Method: Manual

UAT-3.6-55: Error message appears if work item not found

Given I navigate to /work-items/non-existent-uuid
When the API returns 404
Then a "Work item not found" message is displayed
And a link to return to the list is visible
Verification Method: Manual

---

Edge Cases

UAT-3.6-56: Very long note content wraps correctly

Given a note has 5000 characters of content
When I view the detail page
Then the note content wraps within its container
And no horizontal scrolling is required
Verification Method: Manual

UAT-3.6-57: Work item with 20 subtasks displays correctly

Given a work item has 20 subtasks
When I view the detail page
Then all subtasks are visible (or paginated if designed that way)
And drag-and-drop still works
Verification Method: Manual

UAT-3.6-58: Optimistic updates revert on API error

Given I change the status from "not_started" to "in_progress"
And the API call fails (e.g., network error)
When the error occurs
Then the status reverts to "not_started"
And an error message is displayed
Verification Method: Manual (simulate network failure)

---

Automated Test Mapping

• E2E tests: e2e/tests/work-items/detail-page.spec.ts (owned by e2e-test-engineer)
• E2E tests: e2e/tests/work-items/create-form.spec.ts
• Component tests: client/src/pages/WorkItemDetailPage.test.tsx

---

Notes for Developers

• Inline editing: Use controlled inputs or a library like react-contenteditable
• Optimistic updates: Update local state immediately, revert on API error
• Date picker: Use a library like react-datepicker or native <input type="date"> with polyfill
• Drag-and-drop: Use a library like react-beautiful-dnd or @dnd-kit/core
• Back navigation with state: Store previous list URL in session storage or React Router location state
• Keyboard accessibility: Ensure all interactive elements are focusable and operable via keyboard
• Validation: Reuse validation logic from API (consider sharing validation schemas between client and server)