fix(web): fix #1055 health score formula explanation and grade thresholds

[Owolabenjade]

Close issue #1055

This PR addresses issue #1055 where the HealthScore component (apps/web/components/HealthScore.tsx) displayed a numeric account health score (0–100) and grade badge (Excellent, Good, Fair, Poor) computed from a 70% coverage ratio and 30% reserve ratio weighting, but provided no explanation of the formula or grade thresholds in the UI.

Prior to this fix, importers viewing their Account Health Score could see their numerical score and grade, but could not determine how the score was calculated or what actions (e.g. adding collateral vs. boosting reserve) would improve their account standing.

Solution & Flow

• Modified apps/web/components/HealthScore.tsx to add 'use client'; and a local state (showInfo) for toggling an inline popover panel.
• Added an info icon button (ⓘ) affordance next to the "Account Health Score" header with accessible label attributes (aria-label).
• Implemented an expandable inline explanation panel that presents:
  • Formula Breakdown: 70% Coverage Ratio (Collateral ÷ Required, capped at 100%) + 30% Reserve Ratio (Reserve ÷ Collateral, capped at 100%).
  • Grade Thresholds: Excellent (80–100), Good (60–79), Fair (40–59), and Poor (< 40).
• Preserved all underlying score and grade calculation math (lines 12–37) without modification.

Value & Impact

This change resolves importer ambiguity regarding Account Health Score computation for issue #1055, providing instant inline guidance without requiring page navigation or altering core business logic.

Changed

• apps/web/components/HealthScore.tsx: Added an info button affordance (ⓘ) and interactive popover panel explaining the 70/30 weighted formula and grade thresholds (Excellent ≥80, Good ≥60, Fair ≥40, Poor <40) without modifying score calculation math, fixing Account Health Score gives no explanation of how the score or grade is derived #1055.

Testing

The component changes were validated with the following static verification checks:

# Verify component syntax and prop types
npm run typecheck --workspace=apps/web

# Verify code formatting and lint rules
npm run lint --workspace=apps/web

[drips-wave]

@Owolabenjade Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tariff-shield-web	Error		Aug 27, 2026 5:44pm