feat(work-items): display work orders in the same format as invoices - #52
Merged
Conversation
|
🔥 Firebase Hosting preview: https://open-ten99--pr-52-b1smjf57.web.app |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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 originalInvoiceTablemarkup 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 aroundEntityTable. 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 sameEntityTable.Field mapping (work-order columns mirror the invoice columns)
Preserved Work Orders functionality
/dashboard/work-items/:id)Not changed
isWorkOrder/isInvoice), routingWorkItemCard(still used by Dashboard, ClientDetail, AppDetail)Test plan
npx tsc -b— exit 0npx eslinton all touched files — 0 errorsnpx vitest run— 70/70 passing