14.5: Frontend Shared Components & API Factories

[steilerDev]

As a developer, I want shared React components for budget/subsidy UI sections and a generic budget API client factory so that the Work Item and Household Item detail pages use common components instead of duplicating rendering and API logic.

Parent Epic: #495 (EPIC-14: Cross-Entity Code Deduplication & UI Harmonization)
Priority: Should Have
Complexity: Large

Acceptance Criteria

• 1. A budget API client factory exists (e.g., createBudgetApi(entityPath)) that generates typed CRUD functions for any entity's budget endpoints — the factory eliminates the 95% duplication between workItemBudgetsApi and householdItemBudgetsApi
• 2. workItemBudgetsApi and householdItemBudgetsApi are refactored to thin wrappers around the factory
• 3. Shared BudgetLineForm component (or equivalent) is extracted and used by both Work Item and Household Item budget editing flows
• 4. Shared BudgetLineList component (or equivalent) is extracted and used by both entity detail pages to display budget line items
• 5. Shared SubsidySection component (or equivalent) is extracted for the subsidy allocation/payback UI that appears on both detail pages
• 6. Shared constants (confidence level labels, budget status colors, invoice status badges) are extracted to a common location and used by both entity UIs
• 7. The Work Item detail page renders identically before and after the refactor (visual regression check)
• 8. The Household Item detail page renders identically before and after the refactor (visual regression check)
• 9. All existing frontend unit tests and E2E tests pass without modification
• 10. The combined line count of the refactored budget/subsidy sections in both detail pages plus the new shared components is at least 25% less than the original duplicated sections

Notes

• Blocked by: 14.4: Shared Type Consolidation #499 (Story 14.4 — shared types must exist before shared components can be properly typed)
• Key source files:
  • client/src/lib/workItemBudgetsApi.ts (95% overlap with HI API client)
  • client/src/lib/householdItemBudgetsApi.ts
  • Budget/subsidy sections in client/src/pages/WorkItemDetailPage.tsx
  • Budget/subsidy sections in client/src/pages/HouseholdItemDetailPage.tsx
• Shared components should live in client/src/components/budget/ or similar
• Components must be entity-agnostic — they accept data and callbacks as props, not entity-specific hooks
• Must be completed before Story 14.6 (harmonization audit depends on shared components being in place)

[github-actions]

🎉 This issue has been resolved in version 1.13.0-beta.8 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀