feat: add DocumentProgressCard component#338
Open
interacsean wants to merge 4 commits into
Open
Conversation
A presentational card for a transactional document's fulfilment state:
a derived completion percentage, a stacked progress bar, and a
received / returned / yet-to-receive legend. Ported from the omakase
FulfilmentRate component as a view-only, props-driven component — no
data-fetching or domain logic.
Each bucket takes { value, label?, color? } with per-bucket defaults.
Percent is derived as received / (received + yetToReceive); pass
returnedCountsAsComplete={false} to subtract returns from progress.
Includes behavioral + snapshot tests, docs, catalogue entry, and a changeset.
Refs tailor-inc/platform-planning#784
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Adds a /dashboard/document-progress example page demonstrating the component's states (empty, partial, returns-subtracted, complete, relabelled/custom-colors, returns-heavy) and a sidebar nav link. Refs tailor-inc/platform-planning#784 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Adversarial review surfaced two ways the bar could contradict the
header percentage:
- With returnedCountsAsComplete={false}, the header showed
(received − returned)/total but the bar still filled received/total.
The returned segment is now part of the colored fill only when it
counts as complete, so the fill always equals the header percentage.
- When returned > received, the net-received clamp left a returned
segment wider than the header implied. returned is now clamped to
received before deriving the breakdown.
Also sanitize incoming amounts (non-finite/negative → 0) so invalid
input can't render NaN/negative figures in the legend or break the bar.
Adds tests for both consistency cases and sanitization; updates docs
and the affected snapshot.
Refs tailor-inc/platform-planning#784
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Treat the bar as a composition rather than a pure progress fill: it
always renders a net-received segment (received − returned) followed by
a returned segment, in both modes. The header percentage maps onto the
net-received segment, plus the returned segment when
returnedCountsAsComplete is true.
This keeps returned items visible in the bar even when they're excluded
from the rate (returnedCountsAsComplete={false}), matching the Figma /
omakase intent, while the net-received segment still equals the header.
Retains the returned≤received clamp and input sanitization. Updates the
affected test, snapshot, and docs.
Refs tailor-inc/platform-planning#784
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
|
/review |
Contributor
|
🚀 API Design Review has started processing this issue comment |
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
2 participants
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.
Summary
Adds
DocumentProgressCard— a presentational card for a transactional document's fulfilment / lifecycle state: a derived completion percentage, a stacked progress bar, and a received / returned / yet-to-receive legend. Ported from the omakaseFulfilmentRatecomponent as a view-only, props-driven component (no data-fetching or domain logic).Implements tailor-inc/platform-planning#784 (Document Progress Card), AppShell v1.6.0. Matches the Figma design.
Screenshot
API
received/returned/yetToReceive— each{ value, label?, color? }with per-bucket label/color defaults (indigo / pink / neutral).received / (received + yetToReceive).returnedis a subset ofreceived, so it doesn't change the denominator. PassreturnedCountsAsComplete={false}to subtract returns from progress.titledefaults to"Fulfilment rate". Curated color palette (indigo/pink/green/amber/red/blue/neutral).Changes
packages/core/src/components/document-progress-card/— component (Pattern C),types.ts,index.ts, testspackages/core/src/index.ts(minimal surface: component + Props type)docs/components/document-progress-card.md, catalogue entry, changeset (minor)examples/vite-app—/dashboard/document-progressshowcase page + sidebar linkTesting
🤖 Generated with Claude Code