feat(app): mock UI for circularity metrics (emissions, CRM content)

[simonvanlierde]

Area

frontend-app

Problem

Problem

We want to show what R9lab does with a completed bill of materials: CO₂e footprint,
critical raw material (CRM) content, recyclability,; but the calculation methodology
and data sources aren't settled. We need the screen to exist before the numbers are
real, so we can validate the layout with users.

Proposed solution

Scope

A mock results view. Hardcoded / stubbed numbers, clearly labelled as such.

• New section (or dedicated screen) on the product detail spec sheet: "Circularity".
• Panels to sketch:
  • Estimated embodied emissions (kg CO₂e), broken down per BOM row.
  • CRM content — which listed critical raw materials appear, and at what mass share.
  • Something for the 9R strategies, even a placeholder.
• Numbers come from a single stubbed module (e.g. features/circularity/mock-data.ts)
  so the swap to a real API is a one-file change.
• Visible "estimated / not validated" affordance so no one screenshots this as fact.

Explicitly deferred

• Real emission factors, LCA database, or any methodology.
• Backend endpoints. Nothing ships to the API in this issue.
• Anything that would make the mock numbers look authoritative.

Depends on: BOM UI, for the input data it renders against.

Alternatives considered

No response

Additional context

No response