Feat/credit summary - #33
Conversation
Shared, i18n-agnostic credit profile summary card: counter stats, per-category breakdown, and a simple history timeline. All copy is passed via props; callers must supply an explicit disclaimer that this is an informational overview, not a credit score or risk assessment.
Compute an aggregate CreditProfileSummary (totals per category, valid/revoked/invalid counts, and oldest-credential history age) from the loaded credential list and render it via the shared ProfileSummaryCard above the list. Adds en/es i18n copy, including an explicit disclaimer that this is an informational overview and not a credit score or risk assessment.
|
@Villarley is attempting to deploy a commit to the ACTA Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe credit-history app now computes a profile summary from loaded credentials, renders a shared summary card with totals, category counts, and a timeline, and adds English and Spanish copy for the new summary section. ChangesCredit profile summary
Sequence Diagram(s)sequenceDiagram
participant CredentialsView
participant computeProfileSummary
participant useFormatter
participant ProfileSummaryCard
CredentialsView->>computeProfileSummary: derive totals, status counts, and oldestIssuedAt
CredentialsView->>useFormatter: create dateTime formatter
CredentialsView->>ProfileSummaryCard: pass stats, category counts, and timeline labels
ProfileSummaryCard->>Card: render disclaimer, stats grid, categories, and timeline
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/credit-history/src/components/credentials/credentials-view.tsx`:
- Around line 163-176: The stats rendered in credentials-view.tsx are missing
the invalid credential count, even though summary.counts.invalid is already
available. Update the stats array in the relevant summary section to include an
invalid entry alongside total, valid, and revoked, and wire it to a new
summary.stats.invalid translation key so the UI matches the acceptance criteria
and does not fold invalid credentials into the total.
In `@packages/ui/src/components/profile-summary-card.tsx`:
- Line 108: Update the timeline bar styling in profile-summary-card so the
Tailwind gradient utility uses the v4-compatible direction class instead of the
deprecated bg-gradient-to-r. Locate the className on the div in the profile
summary card component and replace the legacy gradient utility with the
corresponding bg-linear-to-r class while keeping the rest of the gradient colors
unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: fc3d3630-f404-4e17-a458-4b8ea582aa47
📒 Files selected for processing (6)
apps/credit-history/src/components/credentials/credentials-view.tsxapps/credit-history/src/i18n/messages/en.jsonapps/credit-history/src/i18n/messages/es.jsonapps/credit-history/src/lib/profile-summary.tspackages/ui/src/components/profile-summary-card.tsxpackages/ui/src/index.ts
| stats={[ | ||
| { label: t('summary.stats.total'), value: String(state.credentials.length) }, | ||
| { label: t('summary.stats.valid'), value: String(summary.counts.valid) }, | ||
| { label: t('summary.stats.revoked'), value: String(summary.counts.revoked) }, | ||
| { | ||
| label: t('summary.stats.historySince'), | ||
| value: summary.oldestIssuedAt | ||
| ? format.dateTime(new Date(summary.oldestIssuedAt), { | ||
| year: 'numeric', | ||
| month: 'short', | ||
| }) | ||
| : '—', | ||
| }, | ||
| ]} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Surface the invalid count to match the acceptance criteria.
The linked issue requires showing counts for valid vs revoked vs invalid credentials. summary.counts.invalid is computed but never rendered — the stats only expose total/valid/revoked, so invalid credentials are silently folded into the total. Consider adding an invalid stat.
🔧 Proposed addition (requires a `summary.stats.invalid` i18n key)
{ label: t('summary.stats.valid'), value: String(summary.counts.valid) },
{ label: t('summary.stats.revoked'), value: String(summary.counts.revoked) },
+ { label: t('summary.stats.invalid'), value: String(summary.counts.invalid) },📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| stats={[ | |
| { label: t('summary.stats.total'), value: String(state.credentials.length) }, | |
| { label: t('summary.stats.valid'), value: String(summary.counts.valid) }, | |
| { label: t('summary.stats.revoked'), value: String(summary.counts.revoked) }, | |
| { | |
| label: t('summary.stats.historySince'), | |
| value: summary.oldestIssuedAt | |
| ? format.dateTime(new Date(summary.oldestIssuedAt), { | |
| year: 'numeric', | |
| month: 'short', | |
| }) | |
| : '—', | |
| }, | |
| ]} | |
| stats={[ | |
| { label: t('summary.stats.total'), value: String(state.credentials.length) }, | |
| { label: t('summary.stats.valid'), value: String(summary.counts.valid) }, | |
| { label: t('summary.stats.revoked'), value: String(summary.counts.revoked) }, | |
| { label: t('summary.stats.invalid'), value: String(summary.counts.invalid) }, | |
| { | |
| label: t('summary.stats.historySince'), | |
| value: summary.oldestIssuedAt | |
| ? format.dateTime(new Date(summary.oldestIssuedAt), { | |
| year: 'numeric', | |
| month: 'short', | |
| }) | |
| : '—', | |
| }, | |
| ]} |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/credit-history/src/components/credentials/credentials-view.tsx` around
lines 163 - 176, The stats rendered in credentials-view.tsx are missing the
invalid credential count, even though summary.counts.invalid is already
available. Update the stats array in the relevant summary section to include an
invalid entry alongside total, valid, and revoked, and wire it to a new
summary.stats.invalid translation key so the UI matches the acceptance criteria
and does not fold invalid credentials into the total.
| <span>{timeline.endLabel}</span> | ||
| </div> | ||
| <div className="relative"> | ||
| <div className="h-0.5 w-full rounded-full bg-gradient-to-r from-primary/40 to-primary" /> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor
🧩 Analysis chain
🌐 Web query:
Was bg-gradient-to-r renamed to bg-linear-to-r in Tailwind CSS v4, and does bg-gradient-to-r still work in v4.0?
💡 Result:
In Tailwind CSS v4.0, the bg-gradient-to-* utility classes were renamed to bg-linear-to-* [1][2][3]. As a result, bg-gradient-to-r does not work in Tailwind CSS v4.0 and must be replaced with bg-linear-to-r [2][3]. The official Tailwind CSS upgrade tool is designed to automatically detect and migrate these class names in your codebase when you upgrade from v3 to v4 [1][2][4]. This change was made to better align Tailwind’s class naming convention with standard CSS functions (linear-gradient(), radial-gradient(), and conic-gradient()) and to accommodate an expanded set of gradient features in v4.0, including new radial and conic gradient utilities [2][3][5]. While the base utility names changed, the color stop utilities (from-*, via-*, and to-*) remain unchanged and function exactly as they did in v3 [2][3].
Citations:
- 1: Template migrations: Migrate
bg-gradient-*utilities tobg-linear-*tailwindlabs/tailwindcss#14537 - 2: https://richdynamix.com/articles/tailwind-v4-gradient-utilities-bg-linear-radial-conic
- 3: https://capytoolkit.com/tools/design/gradient-builder/tailwind-v4-gradients/
- 4: v3→v4 upgrade: gradient buttons broken when using @import 'tailwindcss' (unlayered preflight overrides bg-linear-to-* utilities) tailwindlabs/tailwindcss#19979
- 5: https://tailwindcss.com/blog/tailwindcss-v4
Replace deprecated bg-gradient-to-r with bg-linear-to-r for Tailwind CSS v4
Tailwind CSS v4 renamed gradient direction utilities from bg-gradient-to-* to bg-linear-to-* to align with standard CSS convention. The legacy bg-gradient-to-r class will not generate any CSS in v4, causing this timeline bar to render without a gradient background.
♻️ Proposed change
- <div className="h-0.5 w-full rounded-full bg-gradient-to-r from-primary/40 to-primary" />
+ <div className="h-0.5 w-full rounded-full bg-linear-to-r from-primary/40 to-primary" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="h-0.5 w-full rounded-full bg-gradient-to-r from-primary/40 to-primary" /> | |
| <div className="h-0.5 w-full rounded-full bg-linear-to-r from-primary/40 to-primary" /> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/ui/src/components/profile-summary-card.tsx` at line 108, Update the
timeline bar styling in profile-summary-card so the Tailwind gradient utility
uses the v4-compatible direction class instead of the deprecated
bg-gradient-to-r. Locate the className on the div in the profile summary card
component and replace the legacy gradient utility with the corresponding
bg-linear-to-r class while keeping the rest of the gradient colors unchanged.
2 participants
🚀 ACTA Pull Request
Mark with an
xall the checkboxes that apply (like[x])Closes #19
📌 Type of Change
📝 Changes Description
📸 Evidence
https://cap.so/s/frn896150c4nb7e
🌌 Comments
Thank you for contributing to ACTA! We hope you can continue contributing to this project.
Summary by CodeRabbit
New Features
Bug Fixes