Skip to content

feat(work-items): display work orders in the same format as invoices - #52

Merged
Dev869 merged 1 commit into
mainfrom
feat/workorders-display-like-invoices
May 19, 2026
Merged

feat(work-items): display work orders in the same format as invoices#52
Dev869 merged 1 commit into
mainfrom
feat/workorders-display-like-invoices

Conversation

@Dev869

@Dev869 Dev869 commented May 19, 2026

Copy link
Copy Markdown
Owner

What changed

The Work Orders list (/dashboard/work-items) now renders in the exact same visual format as the Invoices list (/dashboard/invoices) — a bordered, column-driven data table with a select-all checkbox, uppercase header row, hover/selected row states, status pills, and AI insight badges — instead of the previous stacked card layout.

Shared component

Extracted a single source of truth so both lists stay visually identical:

  • web/src/components/common/EntityTable.tsx (new) — generic, column-driven table that reproduces the original InvoiceTable markup and styling exactly (same bordered container, header style, checkbox column, row hover/selected treatment, empty-state row).
  • web/src/components/finance/InvoiceTable.tsx (refactored) — now a thin column-config wrapper around EntityTable. Visual output is unchanged (same columns: Work Order / Client, Amount, Sent Date, Due Date, Status + invoice risk insight badges).
  • web/src/components/workitems/WorkItemTable.tsx (new) — Work Orders column config for the same EntityTable.

Field mapping (work-order columns mirror the invoice columns)

Invoice column Work Order column
Work Order / Client Work Order / Client (subject + client; app tag + Non-Billable tag as subtext)
Amount Cost (right-aligned, mono, tabular)
Sent Date Hours (right-aligned, mono, tabular)
Due Date Created (date)
Status (pill + risk) Status (StatusBadge + client-approval pill + completion-estimate / scope-creep insight badges)

Preserved Work Orders functionality

  • Status tabs (default Open) and type tabs
  • Search box
  • Advanced filters (client chips/dropdown, app chips/dropdown, date range, clear-all, URL sync)
  • Multi-select with bulk Approve / Convert to Invoice / Archive (selection now driven by the shared table's checkboxes)
  • CSV export
  • New Work Order modal
  • AI insight badges (completion estimate, scope creep) — now shown in the Status column
  • Click row → navigate to work item detail (/dashboard/work-items/:id)
  • Empty state unchanged

Not changed

  • Invoices list (visual output identical — verified by intent diff: same columns, classes, status colors, insight badges)
  • Data model, predicates (isWorkOrder / isInvoice), routing
  • WorkItemCard (still used by Dashboard, ClientDetail, AppDetail)

Test plan

  • npx tsc -b — exit 0
  • npx eslint on all touched files — 0 errors
  • npx vitest run — 70/70 passing
  • Manual: verify Work Orders list visually matches Invoices list, all tabs/filters/bulk actions/export/modal work, row click navigates to detail

@github-actions

Copy link
Copy Markdown

🔥 Firebase Hosting preview: https://open-ten99--pr-52-b1smjf57.web.app
(expires in 7 days)

@Dev869
Dev869 merged commit 6b2dfd4 into main May 19, 2026
3 checks passed
@Dev869
Dev869 deleted the feat/workorders-display-like-invoices branch May 19, 2026 03:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant