Cost Comparison Widget
Component Detail
User Interface
low complexity
frontend
1
Dependencies
0
Dependents
0
Entities
0
Integrations
Description
Two-column comparison table rendered as a React component in the Next.js sales website. Displays manual-process line items on the left (staff hours, Excel aggregation, Bufdir prep, coordinator overhead) against Meander subscription costs on the right, with a net savings row at the bottom. Optionally reads organization size from the Impact Calculator context on the same page to scale manual-cost estimates dynamically; falls back to a median organization profile when no input is present.
cost-comparison-widget
Responsibilities
- Render two-column cost comparison table with manual-process and Meander cost columns
- Display net savings summary row with dynamic totals
- Read organization size from Impact Calculator context to scale manual cost estimates
- Expose all line items and assumptions via a content configuration object for no-code updates
- Ensure full screen-reader accessibility with proper table semantics, column headers, and ARIA labels
Interfaces
CostComparisonWidget({ config?: CostComparisonConfig, orgSize?: number })
getScaledCosts(baseConfig, orgSize): ScaledCostRow[]
computeNetSavings(manualTotal, meanderTotal): NetSavings