🏠 Overview › 🧩 Components ›🧩 Cost Comparison Widget

Cost Comparison Widget

Component Detail

User Interface medium complexity frontend
0
Dependencies
0
Dependents
0
Entities
0
Integrations

Description

Client-side widget rendered on the sales website that collects current-state cost inputs and displays a side-by-side comparison against projected Meander spend. Operates entirely in the browser with no backend coupling or authentication.

Feature: Cost Comparison

cost-comparison-widget

Sources & reasoning

Explicitly listed as a feature of the sales-calculator area in the canonical area taxonomy (§8). Source is silent on phase placement, so per the resolution rule defaulting to the second non-mobilization phase (Core Product) - MVP Sales Website scope in §5 covers only landing page, demo form, and legal pages, so the calculator features fall to the next phase.

  • | sales-calculator | Benefit Calculator | Impact Calculator, Cost Comparison |
  • Product 4: Product Sales Website (simple static site) ... Benefit / impact calculator (static calculation, no login) ... Tech: Static site ... Public-facing, no auth, no backend dependency.

Responsibilities

  • Render input fields for current staff hours, coordinator count, and toolchain costs
  • Validate numeric inputs and provide inline feedback for out-of-range values
  • Display side-by-side comparison of present-state cost versus projected Meander cost
  • Trigger recalculation on input change and update the comparison view
  • Provide accessible labels and keyboard navigation for all inputs and results

Interfaces

renderWidget(container: HTMLElement): void
onInputChange(field: string, value: number): void
displayComparison(result: ComparisonResult): void