メインコンテンツにスキップ

Customer Health Dashboard

Interactive beeswarm of every account by health score and ARR, with explainable scores and an at-risk watchlist

Lovable
·0 remixes

Designed for

  • Customer success leaders who need a portfolio-level view of account health and renewal exposure
  • Account managers and CSMs prioritizing which at-risk customers to call this week
  • Founders and revenue leaders at B2B SaaS companies tracking net retention risk
  • RevOps teams prototyping a health-scoring model before committing to a CS platform

Key highlights

  • Interactive account beeswarm
  • Explainable health scores
  • At-risk watchlist with sparklines
  • Account drill-down panel
  • Portfolio risk stat bar
  • Light and dark themes

Technology stack

Libraries

  • React
  • TypeScript
  • Tailwind CSS

Deployment

  • Lovable
  • GitHub

About this template

This template gives you a customer health dashboard with an editorial, print-inspired look instead of the usual BI-tool chrome. The centerpiece is a beeswarm chart where every dot is one account: position shows health score, size shows ARR, and color shifts toward a single alarm hue as accounts approach risk. Dots settle into place with a live physics simulation and flow between a combined view and a by-segment breakdown.

Health scores are composed from six named drivers such as product usage, adoption breadth, and champion engagement, so every score can be explained rather than trusted blindly. Clicking any account opens a slide-out panel with a 13-week trajectory chart, a waterfall showing exactly which drivers add or subtract points, and a facts grid with renewal date, seat utilization, and owner.

Below the chart, a watchlist ranks the eight most exposed accounts by revenue at risk, combining health, drawdown from peak, projected runway to the risk threshold, and days since last touch. A stat bar above summarizes ARR at risk, accounts at risk, median health, and renewals due in the next 90 days.

The template ships with 160 realistic demo accounts and no login, so you can explore everything immediately after remixing. A built-in template guide walks you through swapping in your own customer data and rebuilding the score around signals you actually track.

Features & capabilities

Production-ready features with hand-rolled SVG charts for smooth interactions and quick load times

Account beeswarm chart

Every account rendered as one dot, positioned by health score and sized by ARR, settling into place with a live force simulation.

Combined and by-segment views

Toggle between a single swarm and three stacked segment rows, with dots animating between layouts.

Segment highlighting

Focus Enterprise, Mid-Market, or SMB accounts by dimming the rest instead of hiding them.

Risk threshold line

A labeled reference line marks the score where accounts count as at risk.

Hover tooltips and selection

Hover any dot for name, ARR, score, and segment; click to select an account and dim the others.

Portfolio stat bar

Four headline figures: ARR at risk, accounts at risk, median health, and renewal ARR due in the next 90 days, with alarming deltas colored.

Exposure-ranked watchlist

The eight most exposed accounts ranked by revenue at risk, combining score, ARR, and drawdown from peak.

Inline sparklines

13-week health trajectories drawn inline for every watchlist row, colored by severity.

Projected runway to risk

Declining accounts show an estimated number of weeks until they cross the risk threshold.

Account detail panel

A slide-out with a full trajectory chart, driver waterfall, and facts grid for renewal date, seat utilization, owner, and last touch.

Driver-based health scores

Every score composes from six named drivers, so the waterfall shows exactly why an account scores what it does.

Light and dark themes

Warm paper and warm ink themes with a one-click toggle, both driven by the same semantic tokens.

Built-in template guide

A slide-out guide with copy-paste prompts for swapping in real data, wiring a live source, and tuning thresholds.

Staged page-load animation

Header, stats, chart, and watchlist rise in sequence while the beeswarm dots settle into position.

Best use cases

Weekly customer health reviews

Put the dashboard on screen in your weekly CS sync. The stat bar frames the conversation, the beeswarm shows where the book is drifting, and the watchlist sets the agenda: who to call, in what order, and why.

Renewal risk triage

The watchlist ranks accounts by revenue exposure, not just low scores, so a large account sliding from 88 to 54 surfaces above a small account that has always been unhealthy. Runway projections show how many weeks until an account crosses the risk threshold.

Building an explainable health score

Because every score decomposes into named drivers with visible point contributions, this template is a working starting point for teams designing their first health metric. Swap the demo drivers for signals you can actually measure.

Executive reporting

The editorial layout reads like a data feature, not an admin tool, which makes it comfortable to share upward. ARR at risk, median health, and 90-day renewal exposure are the first things on the page.

Getting started

Step 1: Remix this template

Click "Remix" to create your copy. You'll have a working dashboard with realistic demo accounts you can explore before adding your own data.

Step 2: Familiarize yourself with the project

Go to User > Settings > Knowledge, and read what's under "Project knowledge" to understand the intended architecture and access control model. You can also ask Lovable in the chat for more details.

Step 3: Customize your brand

Update colors, fonts, and the title to match your company. The design system uses semantic tokens, so both light and dark themes update together.

Step 4: Add your customer accounts

Open the built-in template guide for step-by-step prompts. Paste a CSV export from your CRM into the chat and ask Lovable to swap it in, or ask it to connect your CRM and keep accounts synced automatically.

Step 5: Score health your way

Tell Lovable which three to five signals you actually track, like logins, support tickets, and renewal conversations, and have it rebuild the driver-based score around those.

Step 6: Go live

Deploy with one click and share with your team. Lovable handles hosting and performance.

Step 7: Iterate and make it yours

Continue building: move the risk threshold, change the watchlist ranking, or add weekly score snapshots so the trend lines build from real history.

Conclusion

This dashboard works for customer success leaders, account managers, and founders who need to see where revenue is at risk before renewal conversations start. You get an interactive beeswarm of the whole book, explainable driver-based scores, a ranked watchlist, and per-account drill-downs in a template you can deploy in minutes. It replaces the health spreadsheet nobody opens with a page your team actually checks.

Remix this template today and make it yours.