4.11: Inline date and dependency editing on Household Item Detail Page #467
Description
As a homeowner, I want to edit dates, delivery constraints, and dependencies directly on the Household Item Detail Page so that I can manage scheduling without navigating to a separate edit screen.
Parent Epic: #4
Priority: Should Have
Acceptance Criteria
- AC 1 — Page restructure into three sections: The Household Item Detail Page is reorganized into three distinct card sections in this order: (1) "Details" box (name, description, category, vendor, URL, room, quantity, tags), (2) "Dates & Delivery" box (schedule, status, order date, actual delivery, earliest/latest constraints), (3) "Dependencies" box (dependency list with add/remove). The current duplicate "Schedule" and "Constraints > Delivery Window" sections are consolidated into the "Dates & Delivery" box.
- AC 2 — Schedule display logic with target/actual date: In the "Dates & Delivery" box, a "Schedule" row displays: when
actualDeliveryDateis null, show "Target Date" with the computedtargetDeliveryDatevalue; whenactualDeliveryDateis set, show "Actual Date" with the actual date value followed by the target date in strikethrough text (e.g., "Actual Date: Mar 15, 2026Mar 10, 2026"). The target date no longer appears elsewhere on the page. - AC 3 — Inline editable order date: The "Order Date" field in the "Dates & Delivery" box is inline-editable using a date input with autosave-on-blur (same pattern as Work Item Detail Page date constraints). An
AutosaveIndicatorshows saving/saved/error state. Clearing the field sendsnullto the API. - AC 4 — Inline editable actual delivery date: The "Actual Delivery Date" field in the "Dates & Delivery" box is inline-editable using a date input with autosave-on-blur. Setting a date triggers a re-fetch of the item (since it may change the computed target date). An
AutosaveIndicatorshows saving/saved/error state. - AC 5 — Inline editable status: The purchase status dropdown remains inline-editable in the "Dates & Delivery" box (current behavior preserved).
- AC 6 — Inline editable earliest delivery date: In the "Dates & Delivery" box (or "Dependencies" box if grouped with constraints), the "Earliest Delivery Date" field is inline-editable using a date input with autosave-on-blur. Clearing the field sends
nullto the API. After saving, the item is re-fetched becauseearliestDeliveryDateaffects the computedtargetDeliveryDatevia the scheduling engine. - AC 7 — Inline editable latest delivery date: The "Latest Delivery Date" field is inline-editable using a date input with autosave-on-blur. Clearing the field sends
nullto the API. AnAutosaveIndicatorshows saving/saved/error state. - AC 8 — Dependencies box with add/remove: The "Dependencies" box is a standalone section below "Dates & Delivery". It contains the dependency list (work items and milestones) with add/remove functionality (current behavior preserved from the existing "Constraints > Dependencies" subsection). The "Add Dependency" modal is retained as-is.
- AC 9 — Edit page scoped to details only: The Household Item Edit Page (
/household-items/:id/edit) no longer includes date fields (orderDate, earliestDeliveryDate, latestDeliveryDate, actualDeliveryDate) or status. It only edits: name, description, category, vendor, URL, room, quantity, and tags. The edit button on the detail page continues to navigate to this reduced edit form. - AC 10 — Reuse of Work Item Detail autosave pattern: The inline date editing uses the same autosave-on-blur pattern as the Work Item Detail Page (local state for each field,
onBlurhandler that PATCHes the API,AutosaveIndicatorcomponent for feedback, clear button to set value to null). TheAutosaveIndicatorcomponent is imported from existing shared components. - AC 11 — Target date reflects earliest delivery date: When a user sets or changes the
earliestDeliveryDateand saves, the scheduling engine recalculatestargetDeliveryDateconsidering both dependencies AND the earliest delivery constraint (max of dependency-computed date and earliestDeliveryDate). The detail page re-fetches and displays the updated target date. (Note: the backend scheduling engine already implements this logic -- this AC verifies the frontend triggers a re-fetch after saving earliestDeliveryDate so the updated target date is visible.) - AC 12 — Accessibility: All inline-editable fields have visible labels, proper
aria-labelattributes, and keyboard-accessible clear buttons. The autosave indicator usesrole="status"for screen reader announcements. Focus management follows existing Work Item Detail patterns.
Notes
- The backend scheduling engine (
schedulingEngine.ts) already factorsearliestDeliveryDateinto the target date computation (line 926-929). No backend changes are needed for AC 11 -- the fix is ensuring the frontend re-fetches after savingearliestDeliveryDate. - The existing
AutosaveIndicatorcomponent (client/src/components/AutosaveIndicator/AutosaveIndicator.tsx) should be reused. - The Work Item Detail Page (
client/src/pages/WorkItemDetailPage/WorkItemDetailPage.tsx) lines 220-244 and 734-780 show the autosave pattern to mirror. - The current HouseholdItemDetailPage has duplicate date display: "Dates & Delivery" card (lines 751-795) shows order/target/actual dates, and "Schedule" section (lines 797-817) repeats target/actual. The "Constraints > Delivery Window" (lines 819-851) shows earliest/target/latest. All three should be consolidated.
- Dependencies: This story depends on Story 4.5 (Story 4.5: Household Item Detail Page #391, detail page) being complete.
- The HouseholdItemEditPage currently includes: name, description, category, status, quantity, vendorId, url, room, orderDate, earliestDeliveryDate, latestDeliveryDate, actualDeliveryDate, tags. AC 9 removes date fields and status from this page.