Skip to Content

← All archived runs

Run: csm-sdm-panels-in-demo

run.md

Run: csm-sdm-panels-in-demo

  • branch: claude/csm-sdm-panels-demo-fzvdhi
  • pr: #706

01_define/output/spec.md

Spec: Add CSM portfolio + SDM area panels to demo

  • slug: csm-sdm-panels-in-demo
  • personas: CSM, SDM
  • touches: apps/demo/app/(demo)/dashboards/csm, apps/demo/app/(demo)/dashboards/sdm, apps/demo/components/dashboard/csm, apps/demo/components/dashboard/sdm, apps/demo/lib/mock/csm, apps/demo/lib/mock/sdm
  • complexity: standard

Problem

The demo app is the platform's showcase source-of-truth for how each persona's dashboard looks, but it has drifted from web. Web's CSM dashboard opens with a "My portfolio" panel (account list with a "My accounts / All accounts" scope toggle) and web's SDM dashboard opens with a "My area" panel (in-scope demand + in-scope experts with a "My area / All supply" toggle). Neither panel exists in demo, so demo's CSM and SDM dashboards are missing their top-of-page section and their section order no longer matches web. This parity gap undermines the demo's credibility as a faithful product walkthrough — which directly supports Q2 2026 Objective 1 (product-market fit with vendor partners: maintaining active engagement) under the Refine the Bridge initiative, where a coherent, trustworthy demo is how CSM/SDM value is shown to partners.

Proposed change

Build demo equivalents of the CSM "My portfolio" and SDM "My area" panels, mock-data driven, at the top of the respective demo dashboards — mirroring web's structure and scope-toggle behaviour so that section order and content line up across both apps.

  • CSM "My portfolio" panel at the top of the demo CSM dashboard: a list of accounts showing account / region / status / project, with a "My accounts / All accounts" scope toggle that client-side filters the mock list.
  • SDM "My area" panel at the top of the demo SDM dashboard: in-scope demand and in-scope experts, with a "My area / All supply" scope toggle that client-side filters the mock data.
  • Reorder both demo dashboards so the panel renders first, then the existing action strip and the rest, matching web's section order.

Acceptance criteria

  • The demo CSM dashboard renders a "My portfolio" panel at the top showing account, region, status, and project columns for each account, driven by CSM mock data.
  • The CSM panel has a "My accounts / All accounts" scope toggle that client-side filters the account list between the CSM's own accounts and all accounts.
  • The demo SDM dashboard renders a "My area" panel at the top showing in-scope demand and in-scope experts, driven by SDM mock data.
  • The SDM panel has a "My area / All supply" scope toggle that client-side filters the demand/expert data between the SDM's area and all supply.
  • Section order on both demo dashboards matches web: the panel renders first, then the action strip, then the remaining sections.
  • Scope-toggle labels match web exactly ("My accounts / All accounts" for CSM, "My area / All supply" for SDM).
  • Both panels use the demo Typography components and per-persona mock data (no hardcoded strings, no shared cross-persona mock), per the dashboard-page conventions.

Out of scope

  • Wiring real scope logic — demo is mock-only; client-side filtering over mock data is sufficient.
  • The other CSM/SDM demo dashboard drifts from web (each has its own parity stub in this epic).
  • Any changes to the web CSM/SDM panels — web keeps its panels as-is; this run only adds demo equivalents.

Open questions

  • none

02_build/output/notes.md

Build notes: csm-sdm-panels-in-demo

  • commits: feat: csm-sdm-panels-in-demo — add My portfolio + My area panels to demo dashboards

What changed

  • apps/demo/lib/mock/csm.ts: added MY_CSM (exported the logged-in CSM), a PortfolioStatus union, and a portfolioAccounts mock array (account / region / status / project + owning csm for scope filtering). MY_CSM was previously a local const in the page; it now lives with the mock data and is imported.
  • apps/demo/lib/mock/sdm.ts: added areaLeads and areaExperts to the sdmData namespace, each row carrying inArea so the scope toggle can client-side filter the SDM's own regions/platforms vs all supply.
  • apps/demo/components/dashboard/csm/portfolio-panel.tsx (new): presentational "My portfolio" panel — account/region/status/project table with a "My accounts / All accounts" scope toggle, mirroring web's portfolio-panel.tsx but on the demo @/components/ui/* barrel and TableSection.
  • apps/demo/components/dashboard/sdm/area-panel.tsx (new): presentational "My area" panel — in-scope demand + in-scope experts with a "My area / All supply" scope toggle, mirroring web's area-panel.tsx.
  • apps/demo/app/(demo)/dashboards/csm/page.tsx: renders PortfolioPanel as the first section (before the action strip), owns portfolioScope state and filters the accounts client-side.
  • apps/demo/app/(demo)/dashboards/sdm/page.tsx: converted to a stateful client component; renders AreaPanel first, owns areaScope state and filters leads/ experts client-side.

Acceptance criteria status

  • Demo CSM dashboard renders a "My portfolio" panel (account/region/status/project) at the top — driven by portfolioAccounts mock.
  • CSM panel has a "My accounts / All accounts" scope toggle that client-side filters the account list (by MY_CSM).
  • Demo SDM dashboard renders a "My area" panel (in-scope demand + experts) at the top — driven by areaLeads/areaExperts mock.
  • SDM panel has a "My area / All supply" scope toggle that client-side filters demand/expert data (by inArea).
  • Section order on both demo dashboards matches web: panel first, then action strip, then the rest.
  • Scope-toggle labels match web exactly ("My accounts / All accounts", "My area / All supply").
  • Both panels use the demo Typography/@/components/ui/* primitives, shared tokens, and per-persona mock data (no hardcoded strings, no cross-persona mock).

Verify result

  • mechanical checks (format · lint · typecheck · build) run in CI + the Vercel preview, not here. Release reads them back from the PR's check runs. No check is known to fail.

Notes for review

  • Scope logic is intentionally client-side over mock only (per spec Out of scope) — no real querying. The panels are presentational; each page owns its scope state and does the filter, matching the demo composition idiom (activation-status-table does the same).
  • The prop types on both panels deliberately omit the filter-only fields (csm on portfolio accounts, inArea on area rows) — the page filters on them before passing the slice.

03_release/output/investor-update.md

CSM and SDM demos now mirror the live product

Who it's for: Vendor partners viewing CSM and SDM demos What shipped: The demo's CSM and SDM dashboards now open with the same "My portfolio" and "My area" panels as the live product. Why it matters: Faithful persona demos build partner trust under Refine the Bridge, supporting Q2 Objective 1 — establish product-market fit with vendor partners.

Dig deeper: https://github.com/sustentus/sustentus/pull/706

03_release/output/release.md

Release: csm-sdm-panels-in-demo

  • pr: #706 · merged: yes — squash-merged to main (4a8341a) on 2026-07-27
  • CI: green — Quality Project (lint/typecheck/format/build), preview + production migration jobs, spec/labels all success; demo + web previews deployed. Claude Code Review action skipped (not enabled), so the diff was reviewed inline at medium effort.
  • technical docs: no technical docs impact — demo-showcase-only UI (new mock-driven panels + components); no app, route, env var, package, or architecture change. apps/docs/technical/demo-environment documents the live demo tenant, not the standalone apps/demo panels.
  • business docs: no business docs impact — the live product already renders these panels; this run only brings the standalone demo showcase to parity, so no documented user-facing capability changed.
  • release notes: investor-only — no end-user note (demo showcase change; no customer-facing product behaviour changed). Investor draft in this PR.
  • sent: investor update sent to 2 recipients on 2026-07-27

Review summary

  • Diff reviewed against CONVENTIONS.md (dashboard-page rules) at medium effort: primitives via the @/components/ui/* barrel, shared design tokens (no raw palette literals), Typography everywhere (no raw text tags), sentence case, per-persona mock data, TableSection reused. No findings.
  • Stray Bengali-digit id (ACC-১) caught during build and corrected to ACC-1 before commit. — resolved on branch.
  • Panel prop types intentionally omit the filter-only fields (csm, inArea); the page filters on them before passing the slice. — accepted (structural typing, no leak).

Acceptance check (vs spec)

  • Demo CSM dashboard renders a "My portfolio" panel (account/region/status/project) at the top — PortfolioPanel + portfolioAccounts.
  • CSM "My accounts / All accounts" scope toggle client-side filters by MY_CSM.
  • Demo SDM dashboard renders a "My area" panel (in-scope demand + experts) at the top — AreaPanel + areaLeads/areaExperts.
  • SDM "My area / All supply" scope toggle client-side filters by inArea.
  • Section order matches web (panel → action strip → rest) on both dashboards.
  • Scope-toggle labels match web exactly.
  • Demo Typography + @/components/ui/* primitives, shared tokens, per-persona mock — verified in review + CI (Quality Project green).