Redesign the marketing site and dashboard from mockups, and remove fabricated data from three production pages

[therajanmaurya]

Summary

Redesigns the marketing site and dashboard from 20 Stitch mockups, and establishes a design system
the whole product renders against.

The mockups earned their keep by exposing six defects that were invisible from the code alone.
Writing down what each screen was supposed to say surfaced places where it said something else, or
said something untrue. Those fixes are the substance of this PR; the visual work is the reason they
were found.

---

Fabricated data removed from three production pages

Analytics was inventing its charts. synthesizeMRRSeries(mrrToday) ran unconditionally and
drew a six-month curve as current * (0.55 + i * 0.075) — a guaranteed upward slope, for every
account, whether the business was growing, flat or shrinking. synthesizeChurnSeries() did the
same whenever the churn view was empty, inventing a rate falling from 4.1% to 2.35%. Neither was
labelled as an estimate, on the exact charts an operator reads to decide whether retention is
working. Both deleted; MRR is now computed month-by-month from real subscriptions rows, and an
empty window renders "No revenue history yet" instead of a curve.

The Team page was entirely mock. Every account saw the same invented colleagues, including one
at alex.dev@hotmail.com. On an access-control screen that is the worst thing to fabricate: an
operator auditing who can reach their billing data saw people who do not exist, and would not have
seen a real teammate who does. Now reads tenant_admins — the same table the authorization checks
use, so the page and the permission system cannot disagree. Pending invitations have no backing
table in the schema at all, so the list passes through empty rather than keeping a fixture that
implies an invitation was sent.

The webhook detail page was mock, and it is reached during incident triage. /webhooks/[id]
rendered a fake payment.succeeded for rahul.kumar@gmail.com with an invented payload, response
and retry history; its own comment said "real implementation would fetch from Supabase". Clicking a
failed delivery in the log landed on a fabricated successful one. Now fetches the real row,
tenant-scoped. Fields webhook_logs genuinely does not record render as "not recorded" rather than
being filled in.

Three correctness fixes

• Webhook counts were page-local. logs.filter(...) over a 50-row slice reported "3 failed"
  when the real figure could be 300. Now tenant-wide exact counts, plus a "Needs attention" panel
  grouped by (event, provider) carrying each provider's real error_message.
• Subscribers showed no entitlement. Subscription status alone cannot answer "is this person
  entitled right now". Added an Entitlement column from entitlement_records; in_grace_period,
  on_billing_retry and active_non_renewing all mean still entitled, and treating them as
  inactive would revoke access someone paid for.
• Audit coloured api_key amber — the warning colour, on normal automated activity. Actor
  chips are now neutral and differentiated by label; semantic colour is reserved for real failures.

Design system

idea-layer/design-system/ — tokens lifted from what already ships (violet-700, the docs site's
IBM Plex pairing), not invented. Plus docs/ENGINEERING_STANDARDS.md recording the stack and what
CI gates.

• Type unified on IBM Plex. The docs site was Plex, the dashboard was Inter; the two halves of
  one product read as two products. Loaded via next/font as CSS variables, self-hosted, verified
  serving rather than silently falling back.
• Semantic colour never borrows the accent. Provider health and readiness use green/red/neutral
  so state reads at a glance.
• Google Play and App Store test mode renders NEUTRAL "manual step", never amber. Neither store
  exposes an API to enable sandbox, so that state can never clear from software, and amber would
  leave the board crying wolf permanently.
• 225 off-system Tailwind utilities (gray-*, zinc-*) swapped to the ink-* tokens.

Lint became a real gate

npm run lint was next lint with no ESLint installed and no config — running it opened Next's
interactive setup prompt. A script that can only hang reads as covered. Added eslint +
eslint-config-next with security-shaped rules (blocking dangerouslySetInnerHTML, eval, unsafe
target="_blank", and casting a parsed request body with as). Those rules found nothing,
which is a real result about this codebase. Now gates every dashboard PR.

Verification

tsc --noEmit    exit 0
eslint          0 errors, 3 known warnings (documented deliberate dep arrays)
jest            528/528
next build      compiled successfully
mockups         20, 0 em-dashes
fabricated data sweep clean

Deploy

Merging triggers deploy-cloud.yml: Supabase migrations → dashboard → docs → production smoke
tests. paycraft, api.paycraft and mcp.paycraft are custom domains on one Pages project, so
they ship together.

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}